@100mslive/roomkit-react 0.3.9 → 0.3.10-alpha.0

package/package.json

@@ -10,7 +10,7 @@
     "prebuilt",
     "roomkit"
   ],
-  "version": "0.3.9",
+  "version": "0.3.10-alpha.0",
   "author": "100ms",
   "license": "MIT",
   "repository": {
@@ -27,7 +27,8 @@
       "require": "./dist/index.cjs.js",
       "import": "./dist/index.js",
       "default": "./dist/index.js"
-    }
+    },
+    "./index.css": "./dist/index.css"
   },
   "sideEffects": false,
   "scripts": {
@@ -50,11 +51,6 @@
     "@babel/preset-env": "^7.22.5",
     "@babel/preset-react": "^7.22.5",
     "@babel/preset-typescript": "^7.22.5",
-    "@rollup/plugin-commonjs": "^21.0.3",
-    "@rollup/plugin-image": "^3.0.2",
-    "@rollup/plugin-json": "^6.0.0",
-    "@rollup/plugin-node-resolve": "^13.1.3",
-    "@rollup/plugin-typescript": "^8.3.1",
     "@storybook/addon-a11y": "^7.0.27",
     "@storybook/addon-actions": "^7.0.27",
     "@storybook/addon-essentials": "^7.0.27",
@@ -72,21 +68,18 @@
     "babel-plugin-react-require": "3.1.3",
     "esbuild-loader": "^4.0.2",
     "react": "^18.1.0",
-    "rollup": "^2.70.1",
-    "rollup-plugin-esbuild": "^5.0.0",
-    "rollup-plugin-import-css": "^3.3.1",
-    "rollup-plugin-terser": "^7.0.2",
     "storybook-dark-mode": "^3.0.0"
   },
   "peerDependencies": {
     "react": ">=17.0.2 <19.0.0"
   },
   "dependencies": {
-    "@100mslive/hls-player": "0.3.9",
+    "@100mslive/hls-player": "0.3.10-alpha.0",
     "@100mslive/hms-noise-cancellation": "0.0.1",
-    "@100mslive/hms-virtual-background": "1.13.9",
-    "@100mslive/react-icons": "0.10.9",
-    "@100mslive/react-sdk": "0.10.9",
+    "@100mslive/hms-virtual-background": "1.13.10-alpha.0",
+    "@100mslive/hms-whiteboard": "0.0.0-alpha.1",
+    "@100mslive/react-icons": "0.10.10-alpha.0",
+    "@100mslive/react-sdk": "0.10.10-alpha.0",
     "@100mslive/types-prebuilt": "0.12.8",
     "@emoji-mart/data": "^1.0.6",
     "@emoji-mart/react": "^1.0.1",
@@ -122,5 +115,5 @@
     "uuid": "^8.3.2",
     "worker-timers": "^7.0.40"
   },
-  "gitHead": "b0a949da447e2dae0ed46087699ca18e9cd3537e"
+  "gitHead": "c705b5b8ce729747f28c7aff242057ac8178d338"
 }

package/src/Prebuilt/components/MoreSettings/SplitComponents/DesktopOptions.tsx

@@ -116,10 +116,10 @@ export const DesktopOptions = ({
           ) : null}
 
           {screenType !== 'hls_live_streaming' ? (
-            <Dropdown.Item css={{ '&:empty': { display: 'none' } }}>
+            <Dropdown.Item css={{ p: 0, '&:empty': { display: 'none' } }}>
               <PIP
                 content={
-                  <Flex css={{ w: '100%' }}>
+                  <Flex css={{ w: '100%', h: '100%', p: '$8' }}>
                     <PipIcon />
                     <Text variant="sm" css={{ ml: '$4' }}>
                       {isPipOn ? 'Disable' : 'Enable'} Picture-in-Picture

package/src/Prebuilt/components/PIP/{PIPComponent.jsx → PIPComponent.tsx}

@@ -1,10 +1,12 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import { selectPeers, selectTracksMap, useHMSActions, useHMSStore, useHMSVanillaStore } from '@100mslive/react-sdk';
+import { selectPeers, selectTracksMap, useHMSActions, useHMSVanillaStore } from '@100mslive/react-sdk';
 import { PipIcon } from '@100mslive/react-icons';
-import { Flex, Tooltip } from '../../../';
+import { Flex, Tooltip } from '../../..';
 import IconButton from '../../IconButton';
 import { PictureInPicture } from './PIPManager';
+// @ts-ignore: No implicit Any
 import { MediaSession } from './SetupMediaSession';
+// @ts-ignore: No implicit Any
 import { usePinnedTrack } from '../AppData/useUISettings';
 
 /**
@@ -50,26 +52,37 @@ const PIPComponent = ({ content = null }) => {
  * the subscriptions to store are done only if required.
  */
 export const ActivatedPIP = () => {
-  const tracksMap = useHMSStore(selectTracksMap);
-  const storePeers = useHMSStore(selectPeers);
+  const store = useHMSVanillaStore();
   const pinnedTrack = usePinnedTrack();
 
   useEffect(() => {
-    function updatePIP() {
-      if (!PictureInPicture.isOn()) {
-        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);
-      });
+    function subscribeToStore() {
+      return store.subscribe(tracksMap => {
+        let pipPeers = store.getState(selectPeers);
+        if (pinnedTrack) {
+          pipPeers = pipPeers.filter(peer => pinnedTrack.peerId === peer.id);
+        }
+        PictureInPicture.updatePeersAndTracks(pipPeers, tracksMap).catch(err => {
+          console.error('error in updating pip', err);
+        });
+      }, selectTracksMap);
     }
-    PictureInPicture.listenToStateChange(updatePIP);
-    updatePIP();
-  }, [storePeers, tracksMap, pinnedTrack]);
+    let unsubscribe: (() => void) | undefined = PictureInPicture.isOn() ? subscribeToStore() : undefined;
+    PictureInPicture.listenToStateChange(isOn => {
+      if (isOn) {
+        if (!unsubscribe) {
+          unsubscribe = subscribeToStore();
+        }
+      } else {
+        unsubscribe?.();
+        unsubscribe = undefined;
+      }
+    });
+    return () => {
+      unsubscribe?.();
+      unsubscribe = undefined;
+    };
+  }, [pinnedTrack, store]);
 
   return <></>;
 };

package/src/Prebuilt/components/PIP/{PIPManager.js → PIPManager.ts}

@@ -1,4 +1,6 @@
 import * as workerTimers from 'worker-timers';
+import { HMSActions, HMSPeer, HMSTrack, HMSVideoTrack } from '@100mslive/react-sdk';
+// @ts-ignore: No implicit any
 import { drawVideoElementsOnCanvas, dummyChangeInCanvas, resetPIPCanvasColors } from './pipUtils';
 import { isIOS, isMacOS, isSafari } from '../../common/constants';
 const MAX_NUMBER_OF_TILES_IN_PIP = 4;
@@ -7,12 +9,12 @@ const DEFAULT_CANVAS_WIDTH = 480;
 const DEFAULT_CANVAS_HEIGHT = 320;
 const LEAVE_EVENT_NAME = 'leavepictureinpicture';
 
-const PIPStates = {
-  starting: 'starting',
-  started: 'started',
-  stopping: 'stopping',
-  stopped: 'stopped',
-};
+enum PIPStates {
+  starting = 'starting',
+  started = 'started',
+  stopping = 'stopping',
+  stopped = 'stopped',
+}
 
 /**
  * video elements are stitched together as a canvas which is converted to
@@ -24,12 +26,21 @@ const PIPStates = {
  * tracks which should be shown.
  */
 class PipManager {
-  listeners = new Set();
+  private listeners = new Set<(value: boolean) => void>();
+  private canvas: HTMLCanvasElement | null = null;
+  private pipVideo: HTMLVideoElement | null = null;
+  private hmsActions: HMSActions | null = null;
+  private timeoutRef = 0;
+  private videoElements: HTMLVideoElement[] = [];
+  private onStateChange: ((value: boolean) => void) | null = null;
+  private tracksToShow: Array<string> = [];
+  private state: PIPStates = PIPStates.stopped;
+
   constructor() {
     this.reset();
   }
 
-  listenToStateChange(cb) {
+  listenToStateChange(cb: (value: boolean) => void) {
     this.listeners.add(cb);
   }
 
@@ -41,12 +52,11 @@ class PipManager {
     resetPIPCanvasColors();
     this.canvas = null; // where stitching will take place
     this.pipVideo = null; // the element which will be sent in PIP
-    this.timeoutRef = null; // setTimeout reference so it can be cancelled
+    this.timeoutRef = 0; // setTimeout reference so it can be cancelled
     this.hmsActions = null; // for attaching detaching
     this.videoElements = []; // for attaching tracks
     this.tracksToShow = [];
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    this.onStateChange = () => {}; // for user of this class to listen to changes
+    this.onStateChange = null; // for user of this class to listen to changes
     this.state = PIPStates.stopped;
   }
 
@@ -70,7 +80,7 @@ class PipManager {
    * @param hmsActions
    * @param onStateChangeFn {function(bool):void} callback called to notify change in pip state
    */
-  async start(hmsActions, onStateChangeFn) {
+  async start(hmsActions: HMSActions, onStateChangeFn: (value: boolean) => void): Promise<void> {
     if (!this.isSupported()) {
       throw new Error('pip is not supported on this browser');
     }
@@ -84,14 +94,14 @@ class PipManager {
     try {
       await this.init(hmsActions, onStateChangeFn);
       // when user closes pip, call internal stop
-      this.pipVideo.addEventListener(LEAVE_EVENT_NAME, this.stop);
+      this.pipVideo?.addEventListener(LEAVE_EVENT_NAME, this.stop);
       this.renderLoop();
       if (!this.isOn()) {
         await this.requestPIP();
       }
       console.debug('pip started');
       this.state = PIPStates.started;
-      this.onStateChange(true);
+      this.onStateChange?.(true);
       this.callListeners(true);
     } catch (err) {
       console.error('error in request pip', err);
@@ -107,14 +117,14 @@ class PipManager {
     this.pipVideo?.removeEventListener(LEAVE_EVENT_NAME, this.stop);
     if (this.timeoutRef) {
       workerTimers.clearTimeout(this.timeoutRef);
-      this.timeoutRef = null;
+      this.timeoutRef = 0;
     }
     if (this.isOn()) {
       this.exitPIP();
     }
     // detach all to avoid bandwidth consumption
     await this.detachOldAttachNewTracks(this.tracksToShow, []);
-    this.onStateChange(false); // notify parent about this
+    this.onStateChange?.(false); // notify parent about this
     this.callListeners(false);
     this.reset(); // cleanup
     this.state = PIPStates.stopped;
@@ -124,8 +134,9 @@ class PipManager {
    * @param peers {Array} All Remote Peers present in call.
    * @param tracksMap {Object} map of track id to track
    * */
-  async updatePeersAndTracks(peers, tracksMap) {
+  async updatePeersAndTracks(peers: HMSPeer[], tracksMap: Record<string, HMSTrack>) {
     if (!this.canvas) {
+      console.log('no canvas to render video to');
       return;
     }
     const newTracksToShowUnordered = this.pickTracksToShow(peers, tracksMap);
@@ -142,14 +153,14 @@ class PipManager {
   /**
    * @private {boolean} on - whether pip is on/off
    */
-  callListeners = on => {
+  callListeners = (on: boolean) => {
     this.listeners.forEach(listener => listener?.(on));
   };
 
   /**
    * @private
    */
-  async init(hmsActions, onStateChangeFn) {
+  async init(hmsActions: HMSActions, onStateChangeFn: (value: boolean) => void) {
     await this.initMediaElements();
     this.hmsActions = hmsActions;
     this.onStateChange = onStateChangeFn;
@@ -180,11 +191,11 @@ class PipManager {
   }
 
   initializeVideoElements() {
-    let videoElements = [];
+    const videoElements = [];
     for (let i = 0; i < MAX_NUMBER_OF_TILES_IN_PIP; i++) {
       const videoElement = document.createElement('video');
       videoElement.autoplay = true;
-      videoElement.playsinline = true;
+      videoElement.playsInline = true;
       videoElements.push(videoElement);
     }
     return videoElements;
@@ -212,6 +223,9 @@ class PipManager {
       if (this.isOn()) {
         this.exitPIP(); // is this really needed?
       }
+      if (!this.pipVideo) {
+        return;
+      }
       await this.pipVideo.requestPictureInPicture();
     } catch (error) {
       console.error('error in requestpip', error, 'state', this.state);
@@ -228,16 +242,16 @@ class PipManager {
    * @param peers {Array<any>}
    * @param tracksMap {Record<string, any>}
    */
-  pickTracksToShow(peers, tracksMap) {
-    const tracksToShow = [];
+  pickTracksToShow(peers: HMSPeer[], tracksMap: Record<string, HMSTrack>) {
+    const tracksToShow = new Set<string>();
     for (const peer of peers) {
-      if (tracksToShow.length === MAX_NUMBER_OF_TILES_IN_PIP) {
+      if (tracksToShow.size === MAX_NUMBER_OF_TILES_IN_PIP) {
         break;
-      } else if (peer.videoTrack && tracksMap[peer.videoTrack]?.enabled) {
-        tracksToShow.push(peer.videoTrack);
+      } else if (peer.videoTrack && this.showTrack(tracksMap[peer.videoTrack] as HMSVideoTrack)) {
+        tracksToShow.add(peer.videoTrack);
       }
     }
-    return tracksToShow;
+    return Array.from(tracksToShow);
   }
 
   /**
@@ -252,9 +266,9 @@ class PipManager {
    * @param newTracks {Array}
    * @return {Array}
    */
-  orderNewTracksToShow(newTracks, oldTracks) {
-    const betterNewTracks = [];
-    const leftOvers = [];
+  orderNewTracksToShow(newTracks: string[], oldTracks: string[]) {
+    const betterNewTracks: Array<string> = new Array(newTracks.length);
+    const leftOvers: Array<string> = [];
     // put the common ones in right position
     newTracks.forEach(track => {
       const oldPosition = oldTracks.indexOf(track);
@@ -268,10 +282,17 @@ class PipManager {
     // put the left overs in remaining empty positions
     for (let i = 0; i < newTracks.length; i++) {
       if (!betterNewTracks[i]) {
-        betterNewTracks[i] = leftOvers.shift();
+        const newEntry = leftOvers.shift();
+        if (newEntry) {
+          betterNewTracks[i] = newEntry;
+        }
       }
     }
-    return betterNewTracks;
+    return Array.from(new Set(betterNewTracks));
+  }
+
+  private showTrack(track: HMSVideoTrack | undefined) {
+    return track && track.enabled && !track.degraded;
   }
 
   /**
@@ -283,7 +304,11 @@ class PipManager {
    * @param tracksMap {Record<String, any>}
    */
   // eslint-disable-next-line complexity
-  async detachOldAttachNewTracks(oldTracks, newTracks, tracksMap = null) {
+  async detachOldAttachNewTracks(
+    oldTracks: Array<string>,
+    newTracks: Array<string>,
+    tracksMap: Record<string, HMSTrack> | null = null,
+  ) {
     const numTracks = Math.max(oldTracks.length, newTracks.length);
     for (let i = 0; i < numTracks; i++) {
       if (oldTracks[i] === newTracks[i]) {
@@ -292,7 +317,7 @@ class PipManager {
         // old track is there but not equal to new track, detach
         // no need to call detach if we know for sure track is no longer in store
         if (!tracksMap || tracksMap[oldTracks[i]]) {
-          await this.hmsActions.detachVideo(oldTracks[i], this.videoElements[i]);
+          await this.hmsActions?.detachVideo(oldTracks[i], this.videoElements[i]);
         }
         if (this.videoElements[i]) {
           // even if old track got removed from the room, element needs to be cleaned up
@@ -300,7 +325,7 @@ class PipManager {
         }
       }
       if (newTracks[i]) {
-        await this.hmsActions.attachVideo(newTracks[i], this.videoElements[i]);
+        await this.hmsActions?.attachVideo(newTracks[i], this.videoElements[i]);
       }
     }
   }

package/src/Prebuilt/components/SecondaryTiles.tsx

@@ -42,6 +42,13 @@ export const SecondaryTiles = ({ peers, onPageChange, onPageSize, edgeToEdge, ha
   });
   const pageSize = pagesWithTiles[0]?.length || 0;
 
+  // Handles final peer leaving from the last page
+  useEffect(() => {
+    if (peers.length > 0 && !pagesWithTiles[page]?.length) {
+      setPage(Math.max(0, page - 1));
+    }
+  }, [peers, page, pagesWithTiles]);
+
   useEffect(() => {
     if (pageSize > 0) {
       onPageSize?.(pageSize);

package/src/Prebuilt/components/VideoLayouts/ScreenshareLayout.tsx

@@ -55,8 +55,6 @@ export const ScreenshareLayout = ({ peers, onPageChange, onPageSize, edgeToEdge
     };
   }, [activeSharePeer?.id, isMobile, setActiveScreenSharePeer]);
 
-  console.log({ activeSharePeer, secondaryPeers });
-
   return (
     <ProminenceLayout.Root edgeToEdge={edgeToEdge} hasSidebar={hasSidebar}>
       <ProminenceLayout.ProminentSection>

package/src/Prebuilt/components/VideoLayouts/WhiteboardLayout.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useMemo } from 'react';
 import { useMedia } from 'react-use';
+import { Whiteboard } from '@100mslive/hms-whiteboard';
 import { selectPeerByCondition, selectWhiteboard, useHMSStore, useWhiteboard } from '@100mslive/react-sdk';
 import { Box } from '../../../Layout';
 import { config as cssConfig } from '../../../Theme';
@@ -11,10 +12,12 @@ import { ProminenceLayout } from './ProminenceLayout';
 // @ts-ignore: No implicit Any
 import { useSetUiSettings } from '../AppData/useUISettings';
 import { UI_SETTINGS } from '../../common/constants';
+// eslint-disable-next-line import/no-unresolved
+import '@100mslive/hms-whiteboard/index.css';
 
 const WhiteboardEmbed = () => {
   const isMobile = useMedia(cssConfig.media.md);
-  const { iframeRef } = useWhiteboard(isMobile);
+  const { token, endpoint, zoomToContent } = useWhiteboard(isMobile);
 
   return (
     <Box
@@ -28,18 +31,9 @@ const WhiteboardEmbed = () => {
         },
       }}
     >
-      <iframe
-        title="Whiteboard View"
-        ref={iframeRef}
-        style={{
-          width: '100%',
-          height: '100%',
-          border: 0,
-          borderRadius: '0.75rem',
-        }}
-        allow="autoplay; clipboard-write;"
-        referrerPolicy="no-referrer"
-      />
+      <Box css={{ size: '100%' }}>
+        <Whiteboard token={token} endpoint={`https://${endpoint}`} zoomToContent={zoomToContent} />
+      </Box>
     </Box>
   );
 };

package/src/Prebuilt/layouts/PDFView.jsx

@@ -11,10 +11,15 @@ import { usePDFConfig, useResetPDFConfig } from '../components/AppData/useUISett
 export const PDFView = () => {
   const pdfConfig = usePDFConfig();
   const resetConfig = useResetPDFConfig();
-
   // need to send resetConfig to clear configuration, if stop screenshare occurs.
   const { iframeRef, startPDFShare, isPDFShareInProgress } = usePDFShare(resetConfig);
 
+  useEffect(() => {
+    // no working in other useEffect, as return is called multiple time on state change
+    return () => {
+      resetConfig();
+    };
+  }, []);
   useEffect(() => {
     (async () => {
       try {

package/src/Prebuilt/plugins/FlyingEmoji.jsx

@@ -119,12 +119,10 @@ export function FlyingEmoji() {
                 emoji.wiggleType === 0 ? wiggleLeftRight() : wiggleRightLeft()
               } 1s ease-in-out infinite alternate`,
             }}
-            onAnimationEnd={() => {
-              setEmojis(emojis.filter(item => item.id !== emoji.id));
-            }}
+            onAnimationEnd={() => setEmojis(emojis.filter(item => item.id !== emoji.id))}
           >
             <Box>
-              <em-emoji id={emoji.emojiId} size="48px" set="apple"></em-emoji>
+              <em-emoji id={emoji.emojiId} size="48px" set="apple" />
             </Box>
             {emoji.senderName ? (
               <Box