From 077afecdbaebf63670f6915b2d21b31d0dc983ff Mon Sep 17 00:00:00 2001
From: Robert Pintilii <robert.pin9@gmail.com>
Date: Mon, 26 Sep 2022 12:13:32 +0300
Subject: [PATCH] fix(external-api) Fix pin function (#12236)

Make pin function work with stage filmstrip
---
 modules/API/API.js                                       | 9 +++++++--
 .../filmstrip/components/web/PinnedIndicator.tsx         | 4 +++-
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/modules/API/API.js b/modules/API/API.js
index fc5caeeb2..5a38eccd6 100644
--- a/modules/API/API.js
+++ b/modules/API/API.js
@@ -68,7 +68,8 @@ import {
 import { appendSuffix } from '../../react/features/display-name';
 import { isEnabled as isDropboxEnabled } from '../../react/features/dropbox';
 import { setMediaEncryptionKey, toggleE2EE } from '../../react/features/e2ee/actions';
-import { resizeFilmStrip, setVolume } from '../../react/features/filmstrip/actions.web';
+import { addStageParticipant, resizeFilmStrip, setVolume } from '../../react/features/filmstrip/actions.web';
+import { isStageFilmstripAvailable } from '../../react/features/filmstrip/functions.web';
 import { invite } from '../../react/features/invite';
 import {
     selectParticipantInLargeVideo
@@ -236,7 +237,11 @@ function initCommands() {
         'pin-participant': id => {
             logger.debug('Pin participant command received');
             sendAnalytics(createApiEvent('participant.pinned'));
-            APP.store.dispatch(pinParticipant(id));
+            if (isStageFilmstripAvailable(APP.store.getState())) {
+                APP.store.dispatch(addStageParticipant(id, true));
+            } else {
+                APP.store.dispatch(pinParticipant(id));
+            }
         },
         'proxy-connection-event': event => {
             APP.conference.onProxyConnectionEvent(event);
diff --git a/react/features/filmstrip/components/web/PinnedIndicator.tsx b/react/features/filmstrip/components/web/PinnedIndicator.tsx
index ed8f2cc53..a54916365 100644
--- a/react/features/filmstrip/components/web/PinnedIndicator.tsx
+++ b/react/features/filmstrip/components/web/PinnedIndicator.tsx
@@ -67,7 +67,9 @@ const PinnedIndicator = ({
     }
 
     return (
-        <div className = { styles.pinnedIndicator }>
+        <div
+            className = { styles.pinnedIndicator }
+            id = { `pin-indicator-${participantId}` }>
             <BaseIndicator
                 icon = { IconPinParticipant }
                 iconSize = { `${iconSize}px` }