@100mslive/roomkit-react 0.1.2 → 0.1.4-alpha.0

package/dist/{transcription-KASUU6FK.js → transcription-JJQ4UAIK.js}

@@ -1,7 +1,7 @@
 import {
   Box,
   Text
-} from "./chunk-S4QRZ4VV.js";
+} from "./chunk-6GXDYWD5.js";
 import {
   IconButton_default,
   SESSION_STORE_KEY,
@@ -12,7 +12,7 @@ import {
   __spreadValues,
   define_process_env_default,
   init_define_process_env
-} from "./chunk-YJCBCMH4.js";
+} from "./chunk-YE4RPJYG.js";
 
 // src/Prebuilt/plugins/transcription/index.jsx
 init_define_process_env();
@@ -353,4 +353,4 @@ function TranscriptionButton() {
 export {
   TranscriptionButton as default
 };
-//# sourceMappingURL=transcription-KASUU6FK.js.map
+//# sourceMappingURL=transcription-JJQ4UAIK.js.map

package/package.json

@@ -10,7 +10,7 @@
     "prebuilt",
     "roomkit"
   ],
-  "version": "0.1.2",
+  "version": "0.1.4-alpha.0",
   "author": "100ms",
   "license": "MIT",
   "files": [
@@ -75,20 +75,20 @@
     "react": ">=17.0.2 <19.0.0"
   },
   "dependencies": {
-    "@100mslive/hls-player": "0.1.11",
-    "@100mslive/hms-virtual-background": "1.11.11",
-    "@100mslive/react-icons": "0.8.11",
-    "@100mslive/react-sdk": "0.8.11",
-    "@100mslive/types-prebuilt": "0.8.0",
+    "@100mslive/hls-player": "0.1.13-alpha.0",
+    "@100mslive/hms-virtual-background": "1.11.13-alpha.0",
+    "@100mslive/react-icons": "0.8.13-alpha.0",
+    "@100mslive/react-sdk": "0.8.13-alpha.0",
+    "@100mslive/types-prebuilt": "0.10.0",
     "@emoji-mart/data": "^1.0.6",
     "@emoji-mart/react": "^1.0.1",
     "@radix-ui/react-accordion": "1.0.0",
     "@radix-ui/react-checkbox": "1.0.0",
     "@radix-ui/react-collapsible": "1.0.0",
     "@radix-ui/react-dialog": "1.0.0",
-    "@radix-ui/react-dropdown-menu": "1.0.0",
+    "@radix-ui/react-dropdown-menu": "2.0.5",
     "@radix-ui/react-label": "1.0.0",
-    "@radix-ui/react-popover": "1.0.0",
+    "@radix-ui/react-popover": "1.0.6",
     "@radix-ui/react-progress": "1.0.0",
     "@radix-ui/react-radio-group": "1.0.0",
     "@radix-ui/react-select": "1.0.0",
@@ -96,7 +96,7 @@
     "@radix-ui/react-switch": "1.0.0",
     "@radix-ui/react-tabs": "1.0.0",
     "@radix-ui/react-toast": "1.0.0",
-    "@radix-ui/react-tooltip": "1.0.0",
+    "@radix-ui/react-tooltip": "1.0.6",
     "@stitches/react": "^1.2.8",
     "@tldraw/tldraw": "^1.18.4",
     "emoji-mart": "^5.2.2",
@@ -117,5 +117,5 @@
     "worker-timers": "^7.0.40",
     "zipyai": "^1.3.24"
   },
-  "gitHead": "b40c957e0577e36fd1efd2658e7b3d9a1a1a5baa"
+  "gitHead": "149d1cf9dd51d27800097d81057207e52a046797"
 }

package/src/Prebuilt/components/AppData/useUISettings.js

@@ -2,8 +2,10 @@ import { useCallback } from 'react';
 import {
   selectAppData,
   selectAppDataByPath,
+  selectAudioTrackByPeerID,
   selectSessionStore,
   selectTrackByID,
+  selectVideoTrackByPeerID,
   useHMSActions,
   useHMSStore,
   useHMSVanillaStore,
@@ -86,8 +88,10 @@ export const usePDFAnnotator = () => {
 };
 export const usePinnedTrack = () => {
   const pinnedTrackId = useHMSStore(selectAppData(APP_DATA.pinnedTrackId));
-  const spotlightTrackId = useHMSStore(selectSessionStore(SESSION_STORE_KEY.SPOTLIGHT));
-  return useHMSStore(selectTrackByID(pinnedTrackId || spotlightTrackId));
+  const spotlightPeerId = useHMSStore(selectSessionStore(SESSION_STORE_KEY.SPOTLIGHT));
+  const spotlightVideoTrackId = useHMSStore(selectVideoTrackByPeerID(spotlightPeerId))?.id;
+  const spotlightAudioTrackId = useHMSStore(selectAudioTrackByPeerID(spotlightPeerId))?.id;
+  return useHMSStore(selectTrackByID(pinnedTrackId || spotlightVideoTrackId || spotlightAudioTrackId));
 };
 
 export const useSubscribedNotifications = notificationKey => {

package/src/Prebuilt/components/Chip.jsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { Flex } from '../../Layout';
 import { Text } from '../../Text';
 

package/src/Prebuilt/components/IconButtonWithOptions/IconButtonWithOptions.jsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { VerticalMenuIcon } from '@100mslive/react-icons';
 import { Dropdown } from '../../../Dropdown';
 import { Box, Flex } from '../../../Layout';

package/src/Prebuilt/components/TileMenu.jsx

@@ -37,24 +37,18 @@ import { APP_DATA, FEATURE_LIST, REMOTE_STOP_SCREENSHARE_TYPE, SESSION_STORE_KEY
 const isSameTile = ({ trackId, videoTrackID, audioTrackID }) =>
   trackId && ((videoTrackID && videoTrackID === trackId) || (audioTrackID && audioTrackID === trackId));
 
-const SpotlightActions = ({ audioTrackID, videoTrackID }) => {
+const SpotlightActions = ({ peerId }) => {
   const hmsActions = useHMSActions();
-  const spotlightTrackId = useHMSStore(selectSessionStore(SESSION_STORE_KEY.SPOTLIGHT));
-  const isTileSpotlighted = isSameTile({
-    trackId: spotlightTrackId,
-    videoTrackID,
-    audioTrackID,
-  });
+  const spotlightPeerId = useHMSStore(selectSessionStore(SESSION_STORE_KEY.SPOTLIGHT));
+  const isTileSpotlighted = spotlightPeerId === peerId;
 
-  const setSpotlightTrackId = trackId =>
+  const setSpotlightPeerId = peer =>
     hmsActions.sessionStore
-      .set(SESSION_STORE_KEY.SPOTLIGHT, trackId)
+      .set(SESSION_STORE_KEY.SPOTLIGHT, peer)
       .catch(err => ToastManager.addToast({ title: err.description }));
 
   return (
-    <StyledMenuTile.ItemButton
-      onClick={() => (isTileSpotlighted ? setSpotlightTrackId() : setSpotlightTrackId(videoTrackID || audioTrackID))}
-    >
+    <StyledMenuTile.ItemButton onClick={() => (isTileSpotlighted ? setSpotlightPeerId() : setSpotlightPeerId(peerId))}>
       <StarIcon />
       <span>{isTileSpotlighted ? 'Remove from Spotlight' : 'Spotlight Tile for everyone'}</span>
     </StyledMenuTile.ItemButton>
@@ -82,8 +76,6 @@ const PinActions = ({ audioTrackID, videoTrackID }) => {
   );
 };
 
-const showSpotlight = process.env.REACT_APP_ENV === 'qa';
-
 /**
  * Taking peerID as peer won't necesarilly have tracks
  */
@@ -92,11 +84,12 @@ const TileMenu = ({ audioTrackID, videoTrackID, peerID, isScreenshare = false })
   const actions = useHMSActions();
   const localPeerID = useHMSStore(selectLocalPeerID);
   const isLocal = localPeerID === peerID;
-  const { removeOthers } = useHMSStore(selectPermissions);
+  const { removeOthers, changeRole } = useHMSStore(selectPermissions);
   const { isAudioEnabled, isVideoEnabled, setVolume, toggleAudio, toggleVideo, volume } = useRemoteAVToggle(
     audioTrackID,
     videoTrackID,
   );
+  const showSpotlight = changeRole;
   const { sendEvent } = useCustomEvent({
     type: REMOTE_STOP_SCREENSHARE_TYPE,
   });
@@ -131,7 +124,7 @@ const TileMenu = ({ audioTrackID, videoTrackID, peerID, isScreenshare = false })
           showPinAction && (
             <>
               <PinActions audioTrackID={audioTrackID} videoTrackID={videoTrackID} />
-              {showSpotlight && <SpotlightActions audioTrackID={audioTrackID} videoTrackID={videoTrackID} />}
+              {showSpotlight && <SpotlightActions peerId={peerID} />}
             </>
           )
         ) : (
@@ -168,7 +161,7 @@ const TileMenu = ({ audioTrackID, videoTrackID, peerID, isScreenshare = false })
             {showPinAction && (
               <>
                 <PinActions audioTrackID={audioTrackID} videoTrackID={videoTrackID} />
-                {showSpotlight && <SpotlightActions audioTrackID={audioTrackID} videoTrackID={videoTrackID} />}
+                {showSpotlight && <SpotlightActions peerId={peerID} />}
               </>
             )}
             <SimulcastLayers trackId={videoTrackID} />