Dev to Main (#2817)

* fix: transcription text color * fix: screenshare getting hidden, add scroll to dialog (#2783) * fix: screenshare button getting hidden on smaller screens * fix: set max height on dialog --------- Co-authored-by: Kaustubh Kumar <[email protected]> * fix: show leaderboard summary based on poll read/write permissions * feat: upgrade effects sdk version * fix: mweb vb sidepane * feat: hls multiple variants * fix: hls initialzation * fix: hls brightness issue * fix: hide emoji based on prebuilt layout --------- Co-authored-by: Ravi theja <[email protected]> Co-authored-by: Amar Bathwal <[email protected]>
100mslive · Apr 12, 2024 · ac8297a · ac8297a
1 parent 6f3b3e4
commit ac8297a
Show file tree

Hide file tree

Showing 23 changed files with 84 additions and 68 deletions.
diff --git a/examples/prebuilt-react-integration/src/App.jsx b/examples/prebuilt-react-integration/src/App.jsx
@@ -4,9 +4,5 @@ import { getRoomCodeFromUrl } from './utils';
 export default function App() {
   const roomCode = getRoomCodeFromUrl();
 
-  return (
-    <HMSPrebuilt
-      roomCode={roomCode}
-    />
-  );
+  return <HMSPrebuilt roomCode={roomCode} />;
 }
diff --git a/packages/hms-video-store/src/analytics/stats/BaseStatsAnalytics.ts b/packages/hms-video-store/src/analytics/stats/BaseStatsAnalytics.ts
@@ -39,7 +39,7 @@ export abstract class BaseStatsAnalytics {
     this.stop();
     this.shouldSendEvent = true;
     this.eventBus.statsUpdate.subscribe(this.handleStatsUpdate.bind(this));
-    this.startLoop().catch(e => HMSLogger.e('[StatsAnanlytics]', e.message));
+    this.startLoop().catch(e => HMSLogger.e('[StatsAnalytics]', e.message));
   }
 
   stop = () => {

diff --git a/packages/hms-video-store/src/index.ts b/packages/hms-video-store/src/index.ts
@@ -56,7 +56,7 @@ export type {
 
 export { EventBus } from './events/EventBus';
 export { HMSReactiveStore } from './reactive-store/HMSReactiveStore';
-export { HMSPluginUnsupportedTypes, HMSRecordingState, HLSPlaylistType } from './internal';
+export { HMSPluginUnsupportedTypes, HMSRecordingState, HLSPlaylistType, HLSStreamType } from './internal';
 export type {
   HMSVideoPlugin,
   HMSAudioPlugin,

diff --git a/packages/hms-video-store/src/interfaces/room.ts b/packages/hms-video-store/src/interfaces/room.ts
@@ -102,6 +102,11 @@ export enum HLSPlaylistType {
   NO_DVR = 'no-dvr',
 }
 
+export enum HLSStreamType {
+  REGULAR = 'regular',
+  SCREEN = 'screen',
+  COMPOSITE = 'composite',
+}
 export interface HLSVariant {
   url: string;
   playlist_type?: HLSPlaylistType;
@@ -110,4 +115,5 @@ export interface HLSVariant {
   startedAt?: Date;
   initialisedAt?: Date;
   state?: HMSStreamingState;
+  stream_type?: HLSStreamType;
 }
diff --git a/packages/hms-video-store/src/notification-manager/HMSNotifications.ts b/packages/hms-video-store/src/notification-manager/HMSNotifications.ts
@@ -285,7 +285,11 @@ export enum HLSPlaylistType {
   DVR = 'dvr',
   NO_DVR = 'no-dvr',
 }
-
+export enum HLSStreamType {
+  REGULAR = 'regular',
+  SCREEN = 'screen',
+  COMPOSITE = 'composite',
+}
 export interface HLSVariantInfo {
   url: string;
   meeting_url?: string;
@@ -294,6 +298,7 @@ export interface HLSVariantInfo {
   started_at?: number;
   initialised_at?: number;
   state?: HMSStreamingState;
+  stream_type?: HLSStreamType;
 }
 
 export interface MetadataChangeNotification {

diff --git a/packages/hms-video-store/src/notification-manager/managers/RoomUpdateManager.ts b/packages/hms-video-store/src/notification-manager/managers/RoomUpdateManager.ts
@@ -149,19 +149,32 @@ export class RoomUpdateManager {
     if (!notification?.variants) {
       return hls;
     }
-    notification.variants.forEach((_: HLSVariant, index: number) => {
-      hls.variants.push({
-        initialisedAt: convertDateNumToDate(notification?.variants?.[index].initialised_at),
-        url: '',
-      });
+    notification.variants.forEach((variant: HLSVariant, index: number) => {
+      if (variant.state !== HMSStreamingState.INITIALISED) {
+        hls.variants.push({
+          meetingURL: variant?.meetingURL,
+          url: variant?.url,
+          metadata: variant?.metadata,
+          playlist_type: variant?.playlist_type,
+          startedAt: convertDateNumToDate(notification?.variants?.[index].started_at),
+          initialisedAt: convertDateNumToDate(notification?.variants?.[index].initialised_at),
+          state: variant.state,
+          stream_type: variant?.stream_type,
+        });
+      } else {
+        hls.variants.push({
+          initialisedAt: convertDateNumToDate(notification?.variants?.[index].initialised_at),
+          url: '',
+        });
+      }
     });
     return hls;
   }
   private updateHLSStatus(notification: HLSNotification) {
     const room = this.store.getRoom();
     const running =
       notification.variants && notification.variants.length > 0
-        ? this.isStreamingRunning(notification.variants[0].state)
+        ? notification.variants.some(variant => this.isStreamingRunning(variant.state))
         : false;
     if (!room) {
       HMSLogger.w(this.TAG, 'on hls - room not present');
@@ -175,7 +188,7 @@ export class RoomUpdateManager {
   private convertHls(hlsNotification?: HLSNotification) {
     const isInitialised =
       hlsNotification?.variants && hlsNotification.variants.length > 0
-        ? hlsNotification.variants[0].state === HMSStreamingState.INITIALISED
+        ? hlsNotification.variants.some(variant => variant.state === HMSStreamingState.INITIALISED)
         : false;
     // handling for initialized state
     if (isInitialised) {
@@ -195,6 +208,7 @@ export class RoomUpdateManager {
         startedAt: convertDateNumToDate(variant?.started_at),
         initialisedAt: convertDateNumToDate(variant?.initialised_at),
         state: variant.state,
+        stream_type: variant?.stream_type,
       });
     });
     return hls;

diff --git a/packages/hms-video-store/src/session-store/interactivity-center/HMSInteractivityCenter.ts b/packages/hms-video-store/src/session-store/interactivity-center/HMSInteractivityCenter.ts
@@ -128,9 +128,10 @@ export class InteractivityCenter implements HMSInteractivityCenter {
       throw new Error('Invalid poll ID - Poll not found');
     }
 
-    const canReadPolls = this.store.getLocalPeer()?.role?.permissions.pollRead || false;
+    const localPeerPermissions = this.store.getLocalPeer()?.role?.permissions;
+    const canViewSummary = !!(localPeerPermissions?.pollRead || localPeerPermissions?.pollWrite);
 
-    if (poll.anonymous || poll.state !== HMSPollStates.STOPPED || !canReadPolls) {
+    if (poll.anonymous || poll.state !== HMSPollStates.STOPPED || !canViewSummary) {
       return { entries: [], hasNext: false };
     }
     const pollLeaderboard = await this.transport.signal.fetchPollLeaderboard({

diff --git a/packages/hms-virtual-background/package.json b/packages/hms-virtual-background/package.json
diff --git a/packages/hms-virtual-background/src/HMSEffectsPlugin.ts b/packages/hms-virtual-background/src/HMSEffectsPlugin.ts
@@ -25,10 +25,10 @@ export class HMSEffectsPlugin implements HMSMediaStreamPlugin {
       wasmPaths: {
         'ort-wasm.wasm': `${EFFECTS_SDK_ASSETS}ort-wasm.wasm`,
         'ort-wasm-simd.wasm': `${EFFECTS_SDK_ASSETS}ort-wasm-simd.wasm`,
-        'ort-wasm-threaded.wasm': `${EFFECTS_SDK_ASSETS}ort-wasm-threaded.wasm`,
-        'ort-wasm-simd-threaded.wasm': `${EFFECTS_SDK_ASSETS}ort-wasm-simd-threaded.wasm`,
       },
+      provider: 'webgpu',
     });
+    this.effects.onError(err => console.error('[HMSEffectsPlugin]', err));
   }
 
   getName(): string {

diff --git a/packages/hms-virtual-background/src/constants.ts b/packages/hms-virtual-background/src/constants.ts
@@ -1 +1 @@
-export const EFFECTS_SDK_ASSETS = 'https://assets.100ms.live/effectsdk/';
+export const EFFECTS_SDK_ASSETS = 'https://assets.100ms.live/effectsdk/3.1.5/';
diff --git a/packages/roomkit-react/src/Modal/DialogContent.tsx b/packages/roomkit-react/src/Modal/DialogContent.tsx
@@ -32,6 +32,8 @@ export const CustomDialogContent = styled(DialogPrimitive.Content, {
   position: 'absolute',
   top: '50%',
   left: '50%',
+  maxHeight: '95%',
+  overflowY: 'auto',
   border: '$space$px solid $border_bright',
   boxShadow: '0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)',
   transform: 'translate(-50%, -50%)',

diff --git a/packages/roomkit-react/src/Prebuilt/common/constants.ts b/packages/roomkit-react/src/Prebuilt/common/constants.ts
@@ -117,7 +117,6 @@ export enum SESSION_STORE_KEY {
   CHAT_PEER_BLACKLIST = 'chatPeerBlacklist',
   CHAT_MESSAGE_BLACKLIST = 'chatMessageBlacklist',
   CHAT_STATE = 'chatState',
-  SHARED_LEADERBOARDS = 'sharedLeaderboards',
 }
 
 export enum INTERACTION_TYPE {

diff --git a/packages/roomkit-react/src/Prebuilt/components/AppData/AppData.tsx b/packages/roomkit-react/src/Prebuilt/components/AppData/AppData.tsx
@@ -1,5 +1,4 @@
 import React, { useEffect, useMemo, useRef } from 'react';
-import { useMedia } from 'react-use';
 import {
   HMSRoomState,
   selectFullAppData,
@@ -11,7 +10,6 @@ import {
   useHMSStore,
   useRecordingStreaming,
 } from '@100mslive/react-sdk';
-import { config as cssConfig } from '../../../Theme';
 import { LayoutMode } from '../Settings/LayoutSettings';
 import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
 //@ts-ignore
@@ -77,7 +75,6 @@ export const AppData = React.memo(() => {
   const appData = useHMSStore(selectFullAppData);
   const { elements } = useRoomLayoutConferencingScreen();
   const toggleVB = useSidepaneToggle(SIDE_PANE_OPTIONS.VB);
-  const isMobile = useMedia(cssConfig.media.md);
   const { isLocalVideoEnabled } = useAVToggle();
   const sidepaneOpenedRef = useRef(false);
 
@@ -123,12 +120,12 @@ export const AppData = React.memo(() => {
   }, [preferences.subscribedNotifications, hmsActions]);
 
   useEffect(() => {
-    if (defaultMediaURL && !sidepaneOpenedRef.current && !isMobile && isLocalVideoEnabled) {
+    if (defaultMediaURL && !sidepaneOpenedRef.current && isLocalVideoEnabled) {
       hmsActions.setAppData(APP_DATA.background, defaultMediaURL);
       sidepaneOpenedRef.current = true;
       toggleVB();
     }
-  }, [hmsActions, toggleVB, isLocalVideoEnabled, isMobile, defaultMediaURL]);
+  }, [hmsActions, toggleVB, isLocalVideoEnabled, defaultMediaURL]);
 
   return <ResetStreamingStart />;
 });

diff --git a/packages/roomkit-react/src/Prebuilt/components/EmojiReaction.jsx b/packages/roomkit-react/src/Prebuilt/components/EmojiReaction.jsx
@@ -17,6 +17,7 @@ import { Box } from '../../Layout';
 import { config as cssConfig } from '../../Theme';
 import { Tooltip } from '../../Tooltip';
 import IconButton from '../IconButton';
+import { useRoomLayoutConferencingScreen } from '../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
 import { useDropdownList } from './hooks/useDropdownList';
 import { useLandscapeHLSStream, useMobileHLSStream } from '../common/hooks';
 import { EMOJI_REACTION_TYPE } from '../common/constants';
@@ -26,6 +27,7 @@ init({ data });
 export const EmojiReaction = ({ showCard = false }) => {
   const [open, setOpen] = useState(false);
   const isConnected = useHMSStore(selectIsConnectedToRoom);
+  const { elements } = useRoomLayoutConferencingScreen();
   useDropdownList({ open: open, name: 'EmojiReaction' });
   // const hmsActions = useHMSActions();
   const roles = useHMSStore(selectAvailableRoleNames);
@@ -64,7 +66,7 @@ export const EmojiReaction = ({ showCard = false }) => {
     } */
   };
 
-  if (!isConnected) {
+  if (!isConnected || !elements.emoji_reactions) {
     return null;
   }
 

diff --git a/packages/roomkit-react/src/Prebuilt/components/Footer/Footer.tsx b/packages/roomkit-react/src/Prebuilt/components/Footer/Footer.tsx
@@ -87,6 +87,7 @@ export const Footer = ({
       >
         {isMobile ? (
           <>
+            <ScreenshareToggle />
             <RaiseHand />
             {elements?.chat && <ChatToggle />}
             <MoreSettings elements={elements} screenType={screenType} />

diff --git a/packages/roomkit-react/src/Prebuilt/components/HMSVideo/HMSVideo.jsx b/packages/roomkit-react/src/Prebuilt/components/HMSVideo/HMSVideo.jsx
@@ -17,7 +17,8 @@ export const HMSVideo = forwardRef(({ children, ...props }, videoRef) => {
           },
         },
         '& video::cue': {
-          color: 'white',
+          // default for on-surface-high
+          color: '#EFF0FA',
           whiteSpace: 'pre-line',
           fontSize: '$sm',
           fontStyle: 'normal',

diff --git a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx
@@ -4,6 +4,7 @@ import { ConferencingScreen, DefaultConferencingScreen_Elements } from '@100msli
 import { match } from 'ts-pattern';
 import {
   selectIsConnectedToRoom,
+  selectIsLocalVideoEnabled,
   selectPeerCount,
   selectPermissions,
   useHMSActions,
@@ -23,6 +24,7 @@ import {
   QuizIcon,
   RecordIcon,
   SettingsIcon,
+  VirtualBackgroundIcon,
 } from '@100mslive/react-icons';
 import { Box, Loading, Tooltip } from '../../../..';
 import { Sheet } from '../../../../Sheet';
@@ -98,6 +100,8 @@ export const MwebOptions = ({
   const toggleDetailsSheet = useSheetToggle(SHEET_OPTIONS.ROOM_DETAILS);
   const isMobileHLSStream = useMobileHLSStream();
   const isLandscapeHLSStream = useLandscapeHLSStream();
+  const toggleVB = useSidepaneToggle(SIDE_PANE_OPTIONS.VB);
+  const isLocalVideoEnabled = useHMSStore(selectIsLocalVideoEnabled);
 
   useDropdownList({ open: openModals.size > 0 || openOptionsSheet || openSettingsSheet, name: 'MoreSettings' });
 
@@ -184,7 +188,7 @@ export const MwebOptions = ({
               </ActionTile.Root>
             ) : null}
 
-            {/* {isLocalVideoEnabled && !!elements?.virtual_background ? (
+            {isLocalVideoEnabled && !!elements?.virtual_background ? (
               <ActionTile.Root
                 onClick={() => {
                   toggleVB();
@@ -194,7 +198,7 @@ export const MwebOptions = ({
                 <VirtualBackgroundIcon />
                 <ActionTile.Title>Virtual Background</ActionTile.Title>
               </ActionTile.Root>
-            ) : null} */}
+            ) : null}
 
             {elements?.emoji_reactions && !(isLandscapeHLSStream || isMobileHLSStream) && (
               <ActionTile.Root

diff --git a/packages/roomkit-react/src/Prebuilt/components/Preview/PreviewJoin.tsx b/packages/roomkit-react/src/Prebuilt/components/Preview/PreviewJoin.tsx
@@ -267,7 +267,7 @@ export const PreviewControls = ({ hideSettings, vbEnabled }: { hideSettings: boo
     >
       <Flex css={{ gap: '$4' }}>
         <AudioVideoToggle />
-        {vbEnabled && !isMobile ? <VBToggle /> : null}
+        {vbEnabled ? <VBToggle /> : null}
       </Flex>
       {!hideSettings ? <PreviewSettings /> : null}
     </Flex>

diff --git a/packages/roomkit-react/src/Prebuilt/components/RoleChangeRequest/RequestPrompt.tsx b/packages/roomkit-react/src/Prebuilt/components/RoleChangeRequest/RequestPrompt.tsx
@@ -60,8 +60,8 @@ const RequestActions = ({
 }) => (
   <Flex justify="center" align="center" css={{ width: '100%', gap: '$md', '@md': { mt: '$8', px: '$8' } }}>
     <Box css={{ width: '50%' }}>
-      <Dialog.Close css={{ width: '100%' }}>
-        <Button variant="standard" outlined css={{ width: '100%' }} disabled={disabled}>
+      <Dialog.Close css={{ width: '100%', height: '100%' }} asChild>
+        <Button variant="standard" outlined css={{ width: '100%', p: '$4 $8' }} disabled={disabled}>
           Decline
         </Button>
       </Dialog.Close>

diff --git a/packages/roomkit-react/src/Prebuilt/components/ScreenShareToggle.jsx b/packages/roomkit-react/src/Prebuilt/components/ScreenShareToggle.jsx
@@ -22,7 +22,7 @@ export const ScreenshareToggle = ({ css = {} }) => {
 
   return (
     <Fragment>
-      <Flex direction="row" css={{ '@md': { display: 'none' } }}>
+      <Flex direction="row">
         <ScreenShareButton
           variant="standard"
           key="ShareScreen"

diff --git a/packages/roomkit-react/src/Prebuilt/layouts/HLSView.jsx b/packages/roomkit-react/src/Prebuilt/layouts/HLSView.jsx
@@ -549,7 +549,13 @@ const HLSView = () => {
                   justify="between"
                   css={{
                     position: 'absolute',
-                    bg: '#00000066',
+                    bg: `${
+                      hoverControlsVisible.pausePlay ||
+                      hoverControlsVisible.seekBackward ||
+                      hoverControlsVisible.seekForward
+                        ? '#00000066'
+                        : ''
+                    }`,
                     display: 'inline-flex',
                     gap: '$2',
                     zIndex: 1,

diff --git a/packages/roomkit-react/src/Prebuilt/layouts/SidePane.tsx b/packages/roomkit-react/src/Prebuilt/layouts/SidePane.tsx
@@ -80,6 +80,12 @@ const Wrapper = styled('div', {
     hideControls: {
       true: {},
     },
+    virtualBackground: {
+      true: {
+        maxHeight: '100%',
+        background: '$surface_dim',
+      },
+    },
   },
   compoundVariants: [
     {
@@ -157,6 +163,7 @@ const SidePane = ({
     hideControls,
     overlayChat: !!elements?.chat?.is_overlay,
     roomDescription: isMobile && sidepane === SIDE_PANE_OPTIONS.ROOM_DETAILS,
+    virtualBackground: sidepane === SIDE_PANE_OPTIONS.VB,
   };
 
   const SidepaneComponent = match(sidepane)
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		export const EFFECTS_SDK_ASSETS = 'https://assets.100ms.live/effectsdk/';
		export const EFFECTS_SDK_ASSETS = 'https://assets.100ms.live/effectsdk/3.1.5/';