fix: pip not working in prebuilt

packages/roomkit-react/src/Prebuilt/components/LeaveRoom.jsx

@@ -4,6 +4,7 @@ import { useMedia } from 'react-use';
 import { selectIsConnectedToRoom, selectPermissions, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
 import { DesktopLeaveRoom } from './MoreSettings/SplitComponents/DesktopLeaveRoom';
 import { MwebLeaveRoom } from './MoreSettings/SplitComponents/MwebLeaveRoom';
+import { PictureInPicture } from './PIP/PIPManager';
 import { ToastManager } from './Toast/ToastManager';
 import { IconButton } from '../../IconButton';
 import { config as cssConfig, styled } from '../../Theme';
@@ -28,6 +29,7 @@ export const LeaveRoom = () => {
         navigate('/leave/' + params.roomId);
       }
     }
+    PictureInPicture.stop().catch(() => console.error('stopping pip'));
     ToastManager.clearAllToast();
     onLeave?.();
   };

packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/DesktopOptions.jsx

@@ -15,12 +15,12 @@ import {
   HandIcon,
   InfoIcon,
   PencilIcon,
-  // PipIcon,
+  PipIcon,
   SettingsIcon,
 } from '@100mslive/react-icons';
 import { Checkbox, Dropdown, Flex, Text, Tooltip } from '../../../../';
 import IconButton from '../../../IconButton';
-// import { PIP } from '../../PIP';
+import { PIP } from '../../PIP';
 import { RoleChangeModal } from '../../RoleChangeModal';
 import SettingsModal from '../../Settings/SettingsModal';
 import StartRecording from '../../Settings/StartRecording';
@@ -65,7 +65,7 @@ export const DesktopOptions = () => {
   const isBRBEnabled = useIsFeatureEnabled(FEATURE_LIST.BRB);
   const showStreamingUI = useShowStreamingUI();
 
-  // const isPIPEnabled = useIsFeatureEnabled(FEATURE_LIST.PICTURE_IN_PICTURE);
+  const isPIPEnabled = useIsFeatureEnabled(FEATURE_LIST.PICTURE_IN_PICTURE);
 
   useDropdownList({ open: openModals.size > 0, name: 'MoreSettings' });
 
@@ -135,7 +135,7 @@ export const DesktopOptions = () => {
             <Dropdown.ItemSeparator css={{ mx: '0' }} />
           ) : null}
 
-          {/* {isPIPEnabled ? (
+          {isPIPEnabled ? (
             <Dropdown.Item>
               <PIP
                 content={
@@ -148,7 +148,7 @@ export const DesktopOptions = () => {
                 }
               />
             </Dropdown.Item>
-          ) : null} */}
+          ) : null}
 
           {isChangeNameEnabled && (
             <Dropdown.Item onClick={() => updateState(MODALS.CHANGE_NAME, true)} data-testid="change_name_btn">

packages/roomkit-react/src/Prebuilt/components/PIP/PIPComponent.jsx

@@ -2,7 +2,6 @@ import React, { useCallback, useEffect, useState } from 'react';
 import {
   selectLocalPeerRoleName,
   selectPeers,
-  selectRemotePeers,
   selectTracksMap,
   useHMSActions,
   useHMSStore,
@@ -13,14 +12,15 @@ import { Flex, Tooltip } from '../../../';
 import IconButton from '../../IconButton';
 import { PictureInPicture } from './PIPManager';
 import { MediaSession } from './SetupMediaSession';
+import { usePinnedTrack } from '../AppData/useUISettings';
 import { useIsFeatureEnabled } from '../hooks/useFeatures';
 import { DEFAULT_HLS_VIEWER_ROLE, FEATURE_LIST } from '../../common/constants';
 
 /**
  * shows a button which when clicked shows some videos in PIP, clicking
  * again turns it off.
  */
-const PIPComponent = ({ peers, showLocalPeer, content = null }) => {
+const PIPComponent = ({ content = null }) => {
   const localPeerRole = useHMSStore(selectLocalPeerRoleName);
   const [isPipOn, setIsPipOn] = useState(PictureInPicture.isOn());
   const hmsActions = useHMSActions();
@@ -36,13 +36,6 @@ const PIPComponent = ({ peers, showLocalPeer, content = null }) => {
     }
   }, [hmsActions, isPipOn, store]);
 
-  // stop pip on unmount
-  useEffect(() => {
-    return () => {
-      PictureInPicture.stop().catch(err => console.error('error in stopping pip on unmount', err));
-    };
-  }, []);
-
   if (!PictureInPicture.isSupported() || localPeerRole === DEFAULT_HLS_VIEWER_ROLE || !isFeatureEnabled) {
     return null;
   }
@@ -59,7 +52,6 @@ const PIPComponent = ({ peers, showLocalPeer, content = null }) => {
           </IconButton>
         </Tooltip>
       )}
-      {isPipOn && <ActivatedPIP showLocalPeer={showLocalPeer} peers={peers} />}
     </>
   );
 };
@@ -68,21 +60,27 @@ const PIPComponent = ({ peers, showLocalPeer, content = null }) => {
  * this is a separate component so it can be conditionally rendered and
  * the subscriptions to store are done only if required.
  */
-const ActivatedPIP = ({ showLocalPeer, peers }) => {
+export const ActivatedPIP = () => {
   const tracksMap = useHMSStore(selectTracksMap);
-  const storePeers = useHMSStore(showLocalPeer ? selectPeers : selectRemotePeers);
+  const storePeers = useHMSStore(selectPeers);
+  const pinnedTrack = usePinnedTrack();
 
   useEffect(() => {
-    let pipPeers = storePeers;
-    if (peers) {
-      pipPeers = storePeers.filter(peer => peers.includes(peer.id));
-    }
-    PictureInPicture.updatePeersAndTracks(pipPeers, tracksMap).catch(err => {
-      console.error('error in updating pip', err);
+    PictureInPicture.listenToStateChange(isPipOn => {
+      if (!isPipOn) {
+        return;
+      }
+      let pipPeers = storePeers;
+      if (pinnedTrack) {
+        pipPeers = storePeers.filter(peer => pinnedTrack.peerId === peer.id);
+      }
+      PictureInPicture.updatePeersAndTracks(pipPeers, tracksMap).catch(err => {
+        console.error('error in updating pip', err);
+      });
     });
-  }, [peers, storePeers, tracksMap]);
+  }, [storePeers, tracksMap, pinnedTrack]);
 
-  return null;
+  return <></>;
 };
 
 export default PIPComponent;

packages/roomkit-react/src/Prebuilt/components/PIP/PIPManager.js

@@ -24,10 +24,15 @@ const PIPStates = {
  * tracks which should be shown.
  */
 class PipManager {
+  listeners = new Set();
   constructor() {
     this.reset();
   }
 
+  listenToStateChange(cb) {
+    this.listeners.add(cb);
+  }
+
   /**
    * @private
    */
@@ -87,6 +92,7 @@ class PipManager {
       console.debug('pip started');
       this.state = PIPStates.started;
       this.onStateChange(true);
+      this.callListeners(true);
     } catch (err) {
       console.error('error in request pip', err);
       this.state = PIPStates.stopped;
@@ -108,6 +114,7 @@ class PipManager {
     // detach all to avoid bandwidth consumption
     await this.detachOldAttachNewTracks(this.tracksToShow, []);
     this.onStateChange(false); // notify parent about this
+    this.callListeners(false);
     this.reset(); // cleanup
     this.state = PIPStates.stopped;
   };
@@ -131,6 +138,12 @@ class PipManager {
   }
 
   // ------- Private function --------------
+  /**
+   * @private {boolean} on - whether pip is on/off
+   */
+  callListeners = on => {
+    this.listeners.forEach(listener => listener?.(on));
+  };
 
   /**
    * @private

packages/roomkit-react/src/Prebuilt/components/PIP/index.jsx

@@ -1,15 +1,6 @@
 import React from 'react';
 import PIPComponent from './PIPComponent';
-import { usePinnedTrack } from '../AppData/useUISettings';
 
 export const PIP = ({ content = null }) => {
-  const pinnedTrack = usePinnedTrack();
-
-  return (
-    <PIPComponent
-      peers={pinnedTrack && pinnedTrack.enabled ? [pinnedTrack.peerId] : undefined}
-      showLocalPeer={true}
-      content={content}
-    />
-  );
+  return <PIPComponent content={content} />;
 };

packages/roomkit-react/src/Prebuilt/components/conference.jsx

@@ -10,6 +10,8 @@ import {
   useHMSStore,
 } from '@100mslive/react-sdk';
 import { HLSFailureModal } from './Notifications/HLSFailureModal';
+import { ActivatedPIP } from './PIP/PIPComponent';
+import { PictureInPicture } from './PIP/PIPManager';
 import { Box, Flex } from '../../Layout';
 import { useHMSPrebuiltContext } from '../AppContext';
 import { ConferenceMainView } from '../layouts/mainView';
@@ -106,6 +108,12 @@ const Conference = () => {
     }
   }, [isHeadless, hmsActions]);
 
+  useEffect(() => {
+    return () => {
+      PictureInPicture.stop().catch(error => console.error('stopping pip', error));
+    };
+  }, []);
+
   if (!isConnectedToRoom) {
     return <FullPageProgress loadingText="Joining..." />;
   }
@@ -168,6 +176,7 @@ const Conference = () => {
       )}
       <RoleChangeRequestModal />
       <HLSFailureModal />
+      <ActivatedPIP />
     </Flex>
   );
 };