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

package/package.json

@@ -10,7 +10,7 @@
     "prebuilt",
     "roomkit"
   ],
-  "version": "0.2.6-alpha.7",
+  "version": "0.2.7-alpha.0",
   "author": "100ms",
   "license": "MIT",
   "repository": {
@@ -82,11 +82,11 @@
     "react": ">=17.0.2 <19.0.0"
   },
   "dependencies": {
-    "@100mslive/hls-player": "0.2.6-alpha.7",
-    "@100mslive/hms-virtual-background": "1.12.6-alpha.7",
-    "@100mslive/react-icons": "0.9.6-alpha.7",
-    "@100mslive/react-sdk": "0.9.6-alpha.7",
-    "@100mslive/types-prebuilt": "0.12.6",
+    "@100mslive/hls-player": "0.2.7-alpha.0",
+    "@100mslive/hms-virtual-background": "1.12.7-alpha.0",
+    "@100mslive/react-icons": "0.9.7-alpha.0",
+    "@100mslive/react-sdk": "0.9.7-alpha.0",
+    "@100mslive/types-prebuilt": "0.12.7",
     "@emoji-mart/data": "^1.0.6",
     "@emoji-mart/react": "^1.0.1",
     "@radix-ui/react-accordion": "1.0.0",
@@ -120,5 +120,5 @@
     "uuid": "^8.3.2",
     "worker-timers": "^7.0.40"
   },
-  "gitHead": "bfc59894d860031e9aac66d839b0b3febdc3961b"
+  "gitHead": "3999106cba680bcb41ce773e10c85463da4dfeec"
 }

package/src/Prebuilt/App.tsx

@@ -26,6 +26,7 @@ import { PreviewScreen } from './components/Preview/PreviewScreen';
 // @ts-ignore: No implicit Any
 import { ToastContainer } from './components/Toast/ToastContainer';
 import { VBHandler } from './components/VirtualBackground/VBHandler';
+import { Sheet } from './layouts/Sheet';
 import { RoomLayoutContext, RoomLayoutProvider, useRoomLayout } from './provider/roomLayoutProvider';
 import { DialogContainerProvider } from '../context/DialogContext';
 import { Box } from '../Layout';
@@ -293,6 +294,7 @@ function AppRoutes({
         <ToastContainer />
         <Notifications />
         <MwebLandscapePrompt />
+        <Sheet />
         <BackSwipe />
         {!isNotificationsDisabled && <FlyingEmoji />}
         <RemoteStopScreenshare />

package/src/Prebuilt/common/constants.ts

@@ -46,6 +46,7 @@ export const APP_DATA = {
   disableNotifications: 'disableNotifications',
   pollState: 'pollState',
   background: 'background',
+  sheet: 'sheet',
 };
 
 export const UI_SETTINGS = {
@@ -64,6 +65,11 @@ export const SIDE_PANE_OPTIONS = {
   STREAMING: 'STREAMING',
   POLLS: 'POLLS',
   VB: 'VB',
+  ROOM_DETAILS: 'ROOM_DETAILS',
+};
+
+export const SHEET_OPTIONS = {
+  ROOM_DETAILS: 'ROOM_DETAILS',
 };
 
 export const POLL_STATE = {

package/src/Prebuilt/components/AppData/AppData.tsx

@@ -54,6 +54,7 @@ const initialAppData = {
   },
   [APP_DATA.chatDraft]: '',
   [APP_DATA.sidePane]: '',
+  [APP_DATA.sheet]: '',
   [APP_DATA.hlsStarted]: false,
   [APP_DATA.rtmpStarted]: false,
   [APP_DATA.recordingStarted]: false,

package/src/Prebuilt/components/AppData/useSheet.ts

@@ -0,0 +1,33 @@
+import { useCallback } from 'react';
+import { selectAppData, useHMSActions, useHMSStore, useHMSVanillaStore } from '@100mslive/react-sdk';
+import { APP_DATA } from '../../common/constants';
+
+export const useIsSheetTypeOpen = (sheetType: string) => {
+  if (!sheetType) {
+    throw Error('Pass one of the sheet options');
+  }
+  return useHMSStore(selectAppData(APP_DATA.sheet)) === sheetType;
+};
+
+export const useSheetState = () => {
+  const sheet = useHMSStore(selectAppData(APP_DATA.sheet));
+  return sheet;
+};
+
+export const useSheetToggle = (sheetType: string) => {
+  const hmsActions = useHMSActions();
+  const vanillaStore = useHMSVanillaStore();
+  const toggleSheet = useCallback(() => {
+    const isOpen = vanillaStore.getState(selectAppData(APP_DATA.sheet)) === sheetType;
+    hmsActions.setAppData(APP_DATA.sheet, !isOpen ? sheetType : '');
+  }, [vanillaStore, hmsActions, sheetType]);
+  return toggleSheet;
+};
+
+export const useSheetReset = () => {
+  const hmsActions = useHMSActions();
+  const resetSheet = useCallback(() => {
+    hmsActions.setAppData(APP_DATA.sheet, '');
+  }, [hmsActions]);
+  return resetSheet;
+};

package/src/Prebuilt/components/Header/Header.tsx

@@ -5,6 +5,7 @@ import { config as cssConfig, Flex } from '../../..';
 // @ts-ignore: No implicit any
 import { Logo, SpeakerTag } from './HeaderComponents';
 // @ts-ignore: No implicit any
+import { RoomDetailsHeader } from './RoomDetailsHeader';
 import { LiveStatus, RecordingPauseStatus, RecordingStatus, StreamActions } from './StreamActions';
 // @ts-ignore: No implicit any
 import { AudioActions, CamaraFlipActions } from './common';
@@ -20,6 +21,7 @@ export const Header = () => {
     <Flex justify="between" align="center" css={{ position: 'relative', height: '100%' }}>
       <Flex align="center" gap="2" css={{ position: 'absolute', left: '$10' }}>
         <Logo />
+        <RoomDetailsHeader />
         <SpeakerTag />
         {isMobile && (
           <Flex align="center" css={{ gap: '$4' }}>

package/src/Prebuilt/components/Header/RoomDetailsHeader.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { useMedia } from 'react-use';
+import { ChevronRightIcon } from '@100mslive/react-icons';
+import { Flex } from '../../../Layout';
+import { Text } from '../../../Text';
+import { config as cssConfig } from '../../../Theme';
+import { useRoomLayoutHeader } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
+import { useSheetToggle } from '../AppData/useSheet';
+// @ts-ignore
+import { useSidepaneToggle } from '../AppData/useSidepane';
+import { SHEET_OPTIONS, SIDE_PANE_OPTIONS } from '../../common/constants';
+
+export const RoomDetailsHeader = () => {
+  const { title, description } = useRoomLayoutHeader();
+  const isMobile = useMedia(cssConfig.media.md);
+  const clipLength = 80;
+  const toggleDetailsPane = useSidepaneToggle(SIDE_PANE_OPTIONS.ROOM_DETAILS);
+  const toggleDetailsSheet = useSheetToggle(SHEET_OPTIONS.ROOM_DETAILS);
+
+  if ((!title && !description) || (isMobile && !title)) {
+    return null;
+  }
+
+  return (
+    <Flex direction={isMobile ? 'row' : 'column'} css={{ ml: '$8', alignItems: isMobile ? 'center' : 'start' }}>
+      <Text variant="sm" css={{ c: '$on_surface_high', fontWeight: '$semiBold' }}>
+        {title}
+      </Text>
+      {!isMobile && (
+        <Flex align="end" css={{ color: '$on_surface_high' }}>
+          <Text variant="xs" css={{ c: '$on_surface_medium' }}>
+            {description.slice(0, clipLength)}
+          </Text>
+          {description.length > clipLength ? (
+            <span
+              style={{ fontWeight: '600', fontSize: '12px', cursor: 'pointer', lineHeight: '1rem' }}
+              onClick={toggleDetailsPane}
+            >
+              &nbsp;...more
+            </span>
+          ) : null}
+        </Flex>
+      )}
+      {isMobile && description ? (
+        <Flex css={{ color: '$on_surface_medium' }}>
+          <ChevronRightIcon height={16} width={16} onClick={toggleDetailsSheet} />
+        </Flex>
+      ) : null}
+    </Flex>
+  );
+};

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

@@ -17,6 +17,7 @@ import {
   HamburgerMenuIcon,
   HandIcon,
   HandRaiseSlashedIcon,
+  InfoIcon,
   PeopleIcon,
   QuizActiveIcon,
   QuizIcon,
@@ -41,6 +42,8 @@ import { ActionTile } from '../ActionTile';
 import { ChangeNameModal } from '../ChangeNameModal';
 // @ts-ignore: No implicit any
 import { MuteAllModal } from '../MuteAllModal';
+import { useRoomLayoutHeader } from '../../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
+import { useSheetToggle } from '../../AppData/useSheet';
 // @ts-ignore: No implicit any
 import { usePollViewToggle, useSidepaneToggle } from '../../AppData/useSidepane';
 // @ts-ignore: No implicit Any
@@ -53,7 +56,7 @@ import { useUnreadPollQuizPresent } from '../../hooks/useUnreadPollQuizPresent';
 // @ts-ignore: No implicit any
 import { getFormattedCount } from '../../../common/utils';
 // @ts-ignore: No implicit any
-import { SIDE_PANE_OPTIONS } from '../../../common/constants';
+import { SHEET_OPTIONS, SIDE_PANE_OPTIONS } from '../../../common/constants';
 
 const MODALS = {
   CHANGE_NAME: 'changeName',
@@ -93,7 +96,8 @@ export const MwebOptions = ({
   const { toggleAudio, toggleVideo } = useAVToggle();
   const noAVPermissions = !(toggleAudio || toggleVideo);
   const { unreadPollQuiz, setUnreadPollQuiz } = useUnreadPollQuizPresent();
-  // const toggleVB = useSidepaneToggle(SIDE_PANE_OPTIONS.VB);
+  const { title, description } = useRoomLayoutHeader();
+  const toggleDetailsSheet = useSheetToggle(SHEET_OPTIONS.ROOM_DETAILS);
 
   useDropdownList({ open: openModals.size > 0 || openOptionsSheet || openSettingsSheet, name: 'MoreSettings' });
 
@@ -291,6 +295,18 @@ export const MwebOptions = ({
                 </ActionTile.Title>
               </ActionTile.Root>
             ) : null}
+
+            {title || description ? (
+              <ActionTile.Root
+                onClick={() => {
+                  setOpenOptionsSheet(false);
+                  toggleDetailsSheet();
+                }}
+              >
+                <InfoIcon />
+                <ActionTile.Title>About Session</ActionTile.Title>
+              </ActionTile.Root>
+            ) : null}
           </Box>
         </Sheet.Content>
       </Sheet.Root>

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

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

package/src/Prebuilt/components/RoomDetails/Duration.tsx

@@ -0,0 +1,26 @@
+import React, { useEffect, useState } from 'react';
+import { Flex } from '../../../Layout';
+import { Text } from '../../../Text';
+import { getFormattedTime } from '../Polls/common/utils';
+
+export const Duration = ({ timestamp }: { timestamp: Date }) => {
+  const [elapsedTime, setElapsedTime] = useState(getFormattedTime(Date.now() - timestamp.getTime(), false));
+
+  useEffect(() => {
+    const timerAdded = setInterval(() => {
+      setElapsedTime(getFormattedTime(Date.now() - timestamp.getTime(), false));
+    }, 1000);
+
+    return () => {
+      clearInterval(timerAdded);
+    };
+  }, [timestamp]);
+
+  return (
+    <Flex css={{ color: '$on_surface_medium' }}>
+      <Text variant="xs" css={{ color: 'inherit' }}>
+        Started {elapsedTime} ago
+      </Text>
+    </Flex>
+  );
+};

package/src/Prebuilt/components/RoomDetails/RoomDetailsPane.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { CrossIcon } from '@100mslive/react-icons';
+import { Box, Flex } from '../../../Layout';
+import { Text } from '../../../Text';
+import { RoomDetailsRow } from './RoomDetailsRow';
+import { useRoomLayoutHeader } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
+// @ts-ignore
+import { useSidepaneToggle } from '../AppData/useSidepane';
+import { SIDE_PANE_OPTIONS } from '../../common/constants';
+
+export const RoomDetailsPane = () => {
+  const { title, description, details } = useRoomLayoutHeader();
+  const toggleDetailsPane = useSidepaneToggle(SIDE_PANE_OPTIONS.ROOM_DETAILS);
+  return (
+    <Box css={{ flex: '1 1 0' }}>
+      <Flex justify="between" align="center" css={{ w: '100%' }}>
+        <Text variant="h6">{title}</Text>
+        <Flex
+          onClick={toggleDetailsPane}
+          css={{ color: '$on_surface_high', cursor: 'pointer', '&:hover': { opacity: '0.8' } }}
+        >
+          <CrossIcon />
+        </Flex>
+      </Flex>
+
+      <RoomDetailsRow details={details} />
+
+      <Box css={{ mt: '$10' }}>
+        <Text css={{ color: '$on_surface_high', fontWeight: '$semiBold' }}>Description</Text>
+        <Text variant="sm" css={{ c: '$on_surface_medium' }}>
+          {description}
+        </Text>
+      </Box>
+    </Box>
+  );
+};

package/src/Prebuilt/components/RoomDetails/RoomDetailsRow.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Box, Flex } from '../../../Layout';
+import { Text } from '../../../Text';
+import { Duration } from './Duration';
+
+export const RoomDetailsRow = ({ details }: { details: (string | Date)[] }) => {
+  return (
+    <Flex align="center" css={{ w: '100%' }}>
+      {details.map((detail, index) => (
+        <React.Fragment key={detail.toString()}>
+          {index > 0 && <Box css={{ h: '$2', w: '$2', r: '$round', bg: '$on_surface_medium', m: '0 $2' }} />}
+          {typeof detail !== 'string' ? (
+            <Duration timestamp={detail} />
+          ) : (
+            <Text variant="xs" css={{ c: '$on_surface_medium' }}>
+              {detail}
+            </Text>
+          )}
+        </React.Fragment>
+      ))}
+    </Flex>
+  );
+};

package/src/Prebuilt/components/RoomDetails/RoomDetailsSheet.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { CrossIcon } from '@100mslive/react-icons';
+import { Box, Flex } from '../../../Layout';
+import { Sheet } from '../../../Sheet';
+import { Text } from '../../../Text';
+// @ts-ignore
+import { Logo } from '../Header/HeaderComponents';
+import { RoomDetailsRow } from './RoomDetailsRow';
+import { useRoomLayoutHeader } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
+import { useIsSheetTypeOpen, useSheetToggle } from '../AppData/useSheet';
+import { SHEET_OPTIONS } from '../../common/constants';
+
+export const RoomDetailsSheet = () => {
+  const { title, description, details } = useRoomLayoutHeader();
+  const toggleSheet = useSheetToggle(SHEET_OPTIONS.ROOM_DETAILS);
+  const showRoomDetailsSheet = useIsSheetTypeOpen(SHEET_OPTIONS.ROOM_DETAILS);
+  return (
+    <Sheet.Root open={showRoomDetailsSheet} onOpenChange={toggleSheet}>
+      <Sheet.Content css={{ py: '$8', pb: '$12' }}>
+        <Flex
+          justify="between"
+          align="center"
+          css={{ w: '100%', borderBottom: '1px solid $border_bright', pb: '$4', mb: '$4', px: '$8' }}
+        >
+          <Text css={{ fontWeight: '$semiBold', color: '$on_surface_high' }}>Description</Text>
+          <Sheet.Close css={{ color: '$on_surface_high' }}>
+            <CrossIcon />
+          </Sheet.Close>
+        </Flex>
+        <Flex align="center" css={{ w: '100%', gap: '$4', pb: '$8', px: '$8' }}>
+          <Logo />
+          <Box>
+            <Text variant="sm" css={{ c: '$on_secondary_high', fontWeight: '$semiBold' }}>
+              {title}
+            </Text>
+            <RoomDetailsRow details={details} />
+          </Box>
+        </Flex>
+        <Text variant="sm" css={{ color: '$on_surface_medium', px: '$8' }}>
+          {description}
+        </Text>
+      </Sheet.Content>
+    </Sheet.Root>
+  );
+};

package/src/Prebuilt/layouts/Sheet.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { selectAppData, useHMSStore } from '@100mslive/react-sdk';
+import { RoomDetailsSheet } from '../components/RoomDetails/RoomDetailsSheet';
+import { Box } from '../../Layout';
+import { APP_DATA, SHEET_OPTIONS } from '../common/constants';
+
+export const Sheet = () => {
+  const sheet = useHMSStore(selectAppData(APP_DATA.sheet));
+  let ViewComponent;
+  if (sheet === SHEET_OPTIONS.ROOM_DETAILS) {
+    ViewComponent = <RoomDetailsSheet />;
+  }
+  return <Box>{ViewComponent}</Box>;
+};

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,
+  };
+}