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

package/src/Prebuilt/layouts/SidePane.tsx

@@ -2,6 +2,7 @@ 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';
@@ -52,6 +53,9 @@ 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,3 +1,4 @@
+import { useMemo } from 'react';
 import {
   ConferencingScreen,
   DefaultConferencingScreen_Elements,
@@ -7,7 +8,16 @@ 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;
@@ -69,3 +79,33 @@ 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,
+  };
+}