@100mslive/roomkit-react 0.2.7-alpha.0 → 0.2.7-alpha.1

package/src/Prebuilt/components/Notifications/HandRaisedNotifications.tsx

@@ -11,25 +11,36 @@ import {
 // @ts-ignore: No implicit Any
 import { ToastBatcher } from '../Toast/ToastBatcher';
 import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
+// @ts-ignore: No implicit Any
+import { useSubscribedNotifications } from '../AppData/useUISettings';
 
 export const HandRaisedNotifications = () => {
   const notification = useHMSNotifications(HMSNotificationTypes.HAND_RAISE_CHANGED);
   const roomState = useHMSStore(selectRoomState);
   const vanillaStore = useHMSVanillaStore();
   const { on_stage_exp } = useRoomLayoutConferencingScreen().elements || {};
+  const subscribedNotifications = useSubscribedNotifications();
 
   useEffect(() => {
     if (!notification?.data) {
       return;
     }
-    if (roomState !== HMSRoomState.Connected || notification.data.isLocal || !on_stage_exp) {
+
+    // Don't show toast message in case of local peer.
+    if (
+      roomState !== HMSRoomState.Connected ||
+      notification.data.isLocal ||
+      !on_stage_exp ||
+      !subscribedNotifications.METADATA_UPDATED
+    ) {
       return;
     }
     const hasPeerHandRaised = vanillaStore.getState(selectHasPeerHandRaised(notification.data.id));
     if (hasPeerHandRaised) {
       ToastBatcher.showToast({ notification, type: 'RAISE_HAND' });
+      console.debug('Metadata updated', notification.data);
     }
-  }, [notification, on_stage_exp, roomState, vanillaStore]);
+  }, [notification, on_stage_exp, roomState, subscribedNotifications.METADATA_UPDATED, vanillaStore]);
 
   return null;
 };

package/src/Prebuilt/components/Notifications/Notifications.tsx

@@ -16,8 +16,6 @@ import { GroupIcon } from '@100mslive/react-icons';
 import { Box, Button } from '../../..';
 import { useUpdateRoomLayout } from '../../provider/roomLayoutProvider';
 // @ts-ignore: No implicit Any
-import { ToastBatcher } from '../Toast/ToastBatcher';
-// @ts-ignore: No implicit Any
 import { ToastManager } from '../Toast/ToastManager';
 import { AutoplayBlockedModal } from './AutoplayBlockedModal';
 import { ChatNotifications } from './ChatNotifications';
@@ -34,8 +32,6 @@ import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvid
 import { usePollViewToggle } from '../AppData/useSidepane';
 // @ts-ignore: No implicit Any
 import { useIsNotificationDisabled, useSubscribedNotifications } from '../AppData/useUISettings';
-// @ts-ignore: No implicit Any
-import { getMetadata } from '../../common/utils';
 import { ROLE_CHANGE_DECLINED } from '../../common/constants';
 
 const pollToastKey: Record<string, string> = {};
@@ -43,7 +39,7 @@ const pollToastKey: Record<string, string> = {};
 export function Notifications() {
   const localPeerID = useHMSStore(selectLocalPeerID);
   const notification = useHMSNotifications();
-  const subscribedNotifications = useSubscribedNotifications() || {};
+  const subscribedNotifications = useSubscribedNotifications();
   const roomState = useHMSStore(selectRoomState);
   const updateRoomLayoutForRole = useUpdateRoomLayout();
   const isNotificationDisabled = useIsNotificationDisabled();
@@ -65,19 +61,6 @@ export function Notifications() {
       return;
     }
     switch (notification.type) {
-      case HMSNotificationTypes.METADATA_UPDATED:
-        if (roomState !== HMSRoomState.Connected) {
-          return;
-        }
-        // Don't show toast message when metadata is updated and raiseHand is false.
-        // Don't show toast message in case of local peer.
-        const metadata = getMetadata(notification.data?.metadata);
-        if (!metadata?.isHandRaised || notification.data.isLocal) return;
-
-        console.debug('Metadata updated', notification.data);
-        if (!subscribedNotifications.METADATA_UPDATED) return;
-        ToastBatcher.showToast({ notification, type: 'RAISE_HAND' });
-        break;
       case HMSNotificationTypes.NAME_UPDATED:
         console.log(notification.data.id + ' changed their name to ' + notification.data.name);
         break;

package/src/Prebuilt/components/Polls/common/utils.ts

@@ -1,22 +1,16 @@
-export const getFormattedTime = (milliseconds: number | undefined, precise = true) => {
+export const getFormattedTime = (milliseconds: number | undefined) => {
   if (!milliseconds) return '-';
 
   const totalSeconds = milliseconds / 1000;
-  const hours = Math.floor(totalSeconds / 3600);
-  const minutes = Math.floor((totalSeconds % 3600) / 60);
-  const seconds = precise ? totalSeconds % 60 : Math.floor(totalSeconds % 60);
+  const minutes = Math.floor(totalSeconds / 60);
+  const seconds = totalSeconds % 60;
 
-  let formattedTime = '';
-  if (hours) {
-    formattedTime += `${hours}h `;
+  let formattedSeconds = '';
+  if (Number.isInteger(seconds) || minutes) {
+    formattedSeconds = seconds.toFixed(0);
+  } else {
+    formattedSeconds = seconds.toFixed(1);
   }
-  if (minutes || hours) {
-    formattedTime += `${minutes}m `;
-  }
-  if (!precise && (hours || minutes)) {
-    return formattedTime;
-  }
-  formattedTime += `${seconds}s`;
 
-  return formattedTime;
+  return `${minutes ? `${minutes}m ` : ''}${formattedSeconds}s`;
 };

package/src/Prebuilt/components/Settings/DeviceSettings.jsx

@@ -14,9 +14,10 @@ import { Box, Button, Dropdown, Flex, StyledVideoTile, Text, Video } from '../..
 import { config as cssConfig } from '../../../Theme';
 import { DialogDropdownTrigger } from '../../primitives/DropdownTrigger';
 import { useUISettings } from '../AppData/useUISettings';
+import { useAudioOutputTest } from '../hooks/useAudioOutputTest';
 import { useDropdownSelection } from '../hooks/useDropdownSelection';
 import { settingOverflow } from './common';
-import { UI_SETTINGS } from '../../common/constants';
+import { TEST_AUDIO_URL, UI_SETTINGS } from '../../common/constants';
 
 /**
  * wrap the button on click of whom settings should open, this component will take care of the rest,
@@ -182,22 +183,8 @@ const DeviceSelector = ({ title, devices, selection, onChange, icon, children =
   );
 };
 
-const TEST_AUDIO_URL = 'https://100ms.live/test-audio.wav';
-
 const TestAudio = ({ id }) => {
-  const audioRef = useRef(null);
-  const [playing, setPlaying] = useState(false);
-  useEffect(() => {
-    if (audioRef.current && id) {
-      try {
-        if (typeof audioRef.current.setSinkId !== 'undefined') {
-          audioRef.current.setSinkId(id);
-        }
-      } catch (error) {
-        console.log(error);
-      }
-    }
-  }, [id]);
+  const { playing, setPlaying, audioRef } = useAudioOutputTest({ deviceId: id });
   return (
     <>
       <Button
@@ -218,7 +205,13 @@ const TestAudio = ({ id }) => {
           &nbsp; speaker
         </Text>
       </Button>
-      <audio ref={audioRef} src={TEST_AUDIO_URL} onEnded={() => setPlaying(false)} onPlay={() => setPlaying(true)} />
+      <audio
+        ref={audioRef}
+        src={TEST_AUDIO_URL}
+        onEnded={() => setPlaying(false)}
+        onPlay={() => setPlaying(true)}
+        css={{ display: 'none' }}
+      />
     </>
   );
 };

package/src/Prebuilt/components/hooks/useAudioOutputTest.tsx

@@ -0,0 +1,20 @@
+import { useEffect, useRef, useState } from 'react';
+
+export const useAudioOutputTest = ({ deviceId }: { deviceId: string }) => {
+  const audioRef = useRef<HTMLAudioElement | null>(null);
+  const [playing, setPlaying] = useState(false);
+  useEffect(() => {
+    if (audioRef.current && deviceId) {
+      try {
+        // @ts-ignore
+        if (typeof audioRef.current.setSinkId !== 'undefined') {
+          // @ts-ignore
+          audioRef.current.setSinkId(deviceId);
+        }
+      } catch (error) {
+        console.log(error);
+      }
+    }
+  }, [deviceId]);
+  return { playing, setPlaying, audioRef };
+};

package/src/Prebuilt/layouts/SidePane.tsx

@@ -2,7 +2,6 @@ import React, { useEffect } from 'react';
 import { useMedia } from 'react-use';
 import { selectAppData, selectVideoTrackByPeerID, useHMSStore } from '@100mslive/react-sdk';
 import { Polls } from '../components/Polls/Polls';
-import { RoomDetailsPane } from '../components/RoomDetails/RoomDetailsPane';
 import { LayoutMode } from '../components/Settings/LayoutSettings';
 import { SidePaneTabs } from '../components/SidePaneTabs';
 import { TileCustomisationProps } from '../components/VideoLayouts/GridLayout';
@@ -53,9 +52,6 @@ const SidePane = ({
   if (sidepane === SIDE_PANE_OPTIONS.VB) {
     ViewComponent = <VBPicker backgroundMedia={backgroundMedia} />;
   }
-  if (sidepane === SIDE_PANE_OPTIONS.ROOM_DETAILS) {
-    ViewComponent = <RoomDetailsPane />;
-  }
 
   useEffect(() => {
     return () => {

package/src/Prebuilt/provider/roomLayoutProvider/hooks/useRoomLayoutScreen.ts

@@ -1,4 +1,3 @@
-import { useMemo } from 'react';
 import {
   ConferencingScreen,
   DefaultConferencingScreen_Elements,
@@ -8,16 +7,7 @@ import {
   PreviewScreen,
   Screens,
 } from '@100mslive/types-prebuilt';
-import {
-  selectHLSState,
-  selectPeerCount,
-  selectRoomStartTime,
-  useHMSStore,
-  useRecordingStreaming,
-} from '@100mslive/react-sdk';
 import { useRoomLayout } from '..';
-// @ts-ignore
-import { getFormattedCount } from '../../../common/utils';
 
 export type useRoomLayoutScreenProps = {
   screen: keyof Screens;
@@ -79,33 +69,3 @@ export function useRoomLayoutLeaveScreen() {
     isLeaveScreenEnabled,
   };
 }
-
-export function useRoomLayoutHeader() {
-  const { elements } = useRoomLayoutConferencingScreen();
-  // return elements.header;
-  const { isRecordingOn } = useRecordingStreaming();
-  const peerCount = useHMSStore(selectPeerCount);
-  const sessionStartedAt = useHMSStore(selectRoomStartTime);
-  const hlsState = useHMSStore(selectHLSState);
-
-  // People watching, start timestamp, recording status
-  const details = useMemo(() => {
-    const details = [];
-    if (hlsState?.variants[0]?.['startedAt']) {
-      details.push(`${getFormattedCount(peerCount)} watching`);
-      details.push(hlsState.variants[0]['startedAt']);
-    } else if (sessionStartedAt) {
-      details.push(sessionStartedAt);
-    }
-    if (isRecordingOn) {
-      details.push('Recording');
-    }
-    return details;
-  }, [hlsState?.variants, isRecordingOn, peerCount, sessionStartedAt]);
-
-  return {
-    title: elements.header?.title || '',
-    description: elements.header?.description || '',
-    details,
-  };
-}

package/dist/Prebuilt/components/AppData/useSheet.d.ts

@@ -1,4 +0,0 @@
-export declare const useIsSheetTypeOpen: (sheetType: string) => boolean;
-export declare const useSheetState: () => any;
-export declare const useSheetToggle: (sheetType: string) => () => void;
-export declare const useSheetReset: () => () => void;

package/dist/Prebuilt/components/Header/RoomDetailsHeader.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const RoomDetailsHeader: () => React.JSX.Element | null;

package/dist/Prebuilt/components/RoomDetails/Duration.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-export declare const Duration: ({ timestamp }: {
-    timestamp: Date;
-}) => React.JSX.Element;

package/dist/Prebuilt/components/RoomDetails/RoomDetailsPane.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const RoomDetailsPane: () => React.JSX.Element;

package/dist/Prebuilt/components/RoomDetails/RoomDetailsRow.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-export declare const RoomDetailsRow: ({ details }: {
-    details: (string | Date)[];
-}) => React.JSX.Element;

package/dist/Prebuilt/components/RoomDetails/RoomDetailsSheet.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const RoomDetailsSheet: () => React.JSX.Element;

package/dist/Prebuilt/layouts/Sheet.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const Sheet: () => React.JSX.Element;