@100mslive/roomkit-react 0.2.8-alpha.7 → 0.2.8-alpha.9

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

@@ -54,6 +54,7 @@ import { useDropdownList } from '../../hooks/useDropdownList';
 // @ts-ignore: No implicit any
 import { useMyMetadata } from '../../hooks/useMetadata';
 import { useUnreadPollQuizPresent } from '../../hooks/useUnreadPollQuizPresent';
+import { useLandscapeHLSStream, useMobileHLSStream } from '../../../common/hooks';
 // @ts-ignore: No implicit any
 import { getFormattedCount } from '../../../common/utils';
 // @ts-ignore: No implicit any
@@ -99,6 +100,8 @@ export const MwebOptions = ({
   const { unreadPollQuiz, setUnreadPollQuiz } = useUnreadPollQuizPresent();
   const { title, description } = useRoomLayoutHeader();
   const toggleDetailsSheet = useSheetToggle(SHEET_OPTIONS.ROOM_DETAILS);
+  const isMobileHLSStream = useMobileHLSStream();
+  const isLandscapeHLSStream = useLandscapeHLSStream();
 
   useDropdownList({ open: openModals.size > 0 || openOptionsSheet || openSettingsSheet, name: 'MoreSettings' });
 
@@ -121,7 +124,7 @@ export const MwebOptions = ({
       <Sheet.Root open={openOptionsSheet} onOpenChange={setOpenOptionsSheet}>
         <Tooltip title="More options">
           <Sheet.Trigger asChild data-testid="more_settings_btn">
-            <IconButton css={{ '@md': { bg: screenType === 'hls_live_streaming' ? '$surface_default' : '' } }}>
+            <IconButton css={{ bg: isMobileHLSStream || isLandscapeHLSStream ? '$surface_default' : '' }}>
               <HamburgerMenuIcon />
             </IconButton>
           </Sheet.Trigger>
@@ -197,7 +200,7 @@ export const MwebOptions = ({
               </ActionTile.Root>
             ) : null} */}
 
-            {elements?.emoji_reactions && (
+            {elements?.emoji_reactions && !(isLandscapeHLSStream || isMobileHLSStream) && (
               <ActionTile.Root
                 onClick={() => {
                   setShowEmojiCard(true);

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

@@ -3,6 +3,7 @@ import {
   HMSNotificationTypes,
   HMSRoomState,
   selectHasPeerHandRaised,
+  selectPeerByID,
   selectRoomState,
   useHMSNotifications,
   useHMSStore,
@@ -32,8 +33,10 @@ export const HandRaisedNotifications = () => {
       return;
     }
     const hasPeerHandRaised = vanillaStore.getState(selectHasPeerHandRaised(notification.data.id));
+    const peer = vanillaStore.getState(selectPeerByID(notification.data.id));
     if (hasPeerHandRaised) {
-      ToastBatcher.showToast({ notification, type: on_stage_exp ? 'RAISE_HAND_HLS' : 'RAISE_HAND' });
+      const showCTA = peer?.roleName && (on_stage_exp?.off_stage_roles || [])?.includes(peer.roleName);
+      ToastBatcher.showToast({ notification, type: showCTA ? 'RAISE_HAND_HLS' : 'RAISE_HAND' });
       console.debug('Metadata updated', notification.data);
     }
   }, [isSubscribing, notification, on_stage_exp, roomState, vanillaStore]);

package/src/Prebuilt/components/Polls/Voting/Voting.tsx

@@ -38,9 +38,9 @@ export const Voting = ({ id, toggleVoting }: { id: string; toggleVoting: () => v
       <Flex
         align="center"
         css={{
-          gap: '$6',
+          gap: '$4',
           py: '$6',
-          px: '$10',
+          px: '$8',
           my: '$4',
           w: '100%',
           color: '$on_surface_high',
@@ -60,6 +60,7 @@ export const Voting = ({ id, toggleVoting }: { id: string; toggleVoting: () => v
             marginLeft: 'auto',
             cursor: 'pointer',
             '&:hover': { opacity: '0.8' },
+            height: 'fit-content',
           }}
         >
           <CrossIcon onClick={toggleVoting} />

package/src/Prebuilt/components/Polls/common/OptionInputWithDelete.tsx

@@ -29,7 +29,7 @@ export const OptionInputWithDelete = ({
         key={index}
         onChange={event => handleOptionTextChange(index, event.target.value)}
       />
-      <IconButton onClick={() => removeOption(index)} css={{ bg: '$transparent', border: 'none' }}>
+      <IconButton onClick={() => removeOption(index)} css={{ bg: 'transparent', border: 'none' }}>
         <TrashIcon />
       </IconButton>
     </>

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

@@ -4,7 +4,7 @@ export const getFormattedTime = (milliseconds: number | undefined, precise = tru
   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 seconds = totalSeconds % 60;
 
   let formattedTime = '';
   if (hours) {
@@ -16,7 +16,7 @@ export const getFormattedTime = (milliseconds: number | undefined, precise = tru
   if (!precise && (hours || minutes)) {
     return formattedTime;
   }
-  formattedTime += `${seconds}s`;
+  formattedTime += `${precise ? seconds.toFixed(3) : Math.floor(seconds)}s`;
 
   return formattedTime;
 };

package/src/Prebuilt/components/RaiseHand.tsx

@@ -1,16 +1,22 @@
 import React from 'react';
 import { HandIcon, HandRaiseSlashedIcon } from '@100mslive/react-icons';
+import { CSS } from '../../Theme';
 import { Tooltip } from '../../Tooltip';
 // @ts-ignore: No implicit Any
 import IconButton from '../IconButton';
 // @ts-ignore: No implicit Any
 import { useMyMetadata } from './hooks/useMetadata';
 
-export const RaiseHand = () => {
+export const RaiseHand = ({ css }: { css?: CSS }) => {
   const { isHandRaised, toggleHandRaise } = useMyMetadata();
   return (
     <Tooltip title={isHandRaised ? 'Lower hand' : 'Raise hand'}>
-      <IconButton data-testid="hand_raise_btn" active={!isHandRaised} onClick={async () => await toggleHandRaise()}>
+      <IconButton
+        data-testid="hand_raise_btn"
+        css={css}
+        active={!isHandRaised}
+        onClick={async () => await toggleHandRaise()}
+      >
         {isHandRaised ? <HandRaiseSlashedIcon /> : <HandIcon />}
       </IconButton>
     </Tooltip>

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

@@ -2,31 +2,32 @@ import React from 'react';
 import { CrossIcon } from '@100mslive/react-icons';
 import { Box, Flex } from '../../../Layout';
 import { Text } from '../../../Text';
+// @ts-ignore: No implicit any
+import { Logo } from '../Header/HeaderComponents';
 import { RoomDetailsRow } from './RoomDetailsRow';
 import { useRoomLayoutHeader } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
 // @ts-ignore
 import { useSidepaneToggle } from '../AppData/useSidepane';
+import { useMobileHLSStream } from '../../common/hooks';
 import { SIDE_PANE_OPTIONS } from '../../common/constants';
 
 export const RoomDetailsPane = () => {
-  const { title, description, details } = useRoomLayoutHeader();
-  const toggleDetailsPane = useSidepaneToggle(SIDE_PANE_OPTIONS.ROOM_DETAILS);
+  const { description } = useRoomLayoutHeader();
+  const isMwebHLSStream = useMobileHLSStream();
   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 />
+      {isMwebHLSStream ? (
+        <Flex direction="row" align="center" gap="2">
+          <Logo />
+          <ShowRoomDetailHeader />
         </Flex>
-      </Flex>
-
-      <RoomDetailsRow details={details} />
-
+      ) : (
+        <ShowRoomDetailHeader />
+      )}
       <Box css={{ mt: '$10' }}>
-        <Text css={{ color: '$on_surface_high', fontWeight: '$semiBold' }}>Description</Text>
+        <Text css={{ color: '$on_surface_high', fontWeight: '$semiBold', display: isMwebHLSStream ? 'none' : '' }}>
+          Description
+        </Text>
         <Text variant="sm" css={{ c: '$on_surface_medium' }}>
           {description}
         </Text>
@@ -34,3 +35,29 @@ export const RoomDetailsPane = () => {
     </Box>
   );
 };
+
+const ShowRoomDetailHeader = () => {
+  const { title, details } = useRoomLayoutHeader();
+  const toggleDetailsPane = useSidepaneToggle(SIDE_PANE_OPTIONS.ROOM_DETAILS);
+  const isMwebHLSStream = useMobileHLSStream();
+  return (
+    <Flex direction="column">
+      <Flex justify="between" align="center" css={{ w: '100%' }}>
+        <Text variant="h6">{title}</Text>
+        {!isMwebHLSStream && (
+          <Flex
+            onClick={toggleDetailsPane}
+            css={{
+              color: '$on_surface_high',
+              cursor: 'pointer',
+              '&:hover': { opacity: '0.8' },
+            }}
+          >
+            <CrossIcon />
+          </Flex>
+        )}
+      </Flex>
+      <RoomDetailsRow details={details} />
+    </Flex>
+  );
+};

package/src/Prebuilt/components/pdfAnnotator/shareScreenOptions.jsx

@@ -61,7 +61,7 @@ export function ShareScreenOptions() {
               pt: '$10',
               pb: '$6',
               '&:hover': {
-                bg: '$transparent',
+                bg: 'transparent',
                 cursor: 'default',
               },
             }}
@@ -78,7 +78,7 @@ export function ShareScreenOptions() {
               pt: '$6',
               pb: '$10',
               '&:hover': {
-                bg: '$transparent',
+                bg: 'transparent',
                 cursor: 'default',
               },
             }}

package/src/Prebuilt/components/pdfAnnotator/uploadedFile.jsx

@@ -36,7 +36,7 @@ export const UploadedFile = ({ pdfFile, setPDFFile, onOpenChange }) => {
                 w: '100%',
                 '&:focus': {
                   boxShadow: '0 0 0 1px $colors$primary_default',
-                  border: '1px solid $transparent',
+                  border: '1px solid transparent',
                 },
                 mb: 0,
                 mt: '$6',

package/src/Prebuilt/layouts/HLSView.jsx

@@ -43,7 +43,7 @@ const toastMap = {};
 
 const HLSView = () => {
   const videoRef = useRef(null);
-  const hlsViewRef = useRef(null);
+  const hlsViewRef = useRef();
   const hlsState = useHMSStore(selectHLSState);
   const enablHlsStats = useHMSStore(selectAppData(APP_DATA.hlsStats));
   const { elements, screenType } = useRoomLayoutConferencingScreen();
@@ -170,25 +170,27 @@ const HLSView = () => {
         const poll = vanillaStore.getState(selectPollByID(pollId));
         const pollStartedBy = vanillaStore.getState(selectPeerNameByID(poll.startedBy)) || 'Participant';
         // launch poll
-        const toastID = ToastManager.addToast({
-          title: `${pollStartedBy} started a ${poll.type}: ${poll.title}`,
-          action: (
-            <Button
-              onClick={() => togglePollView(pollId)}
-              variant="standard"
-              css={{
-                backgroundColor: '$surface_bright',
-                fontWeight: '$semiBold',
-                color: '$on_surface_high',
-                p: '$xs $md',
-              }}
-            >
-              {poll.type === 'quiz' ? 'Answer' : 'Vote'}
-            </Button>
-          ),
-          duration: Infinity,
-        });
-        toastMap[pollId] = toastID;
+        if (!toastMap[pollId]) {
+          const toastID = ToastManager.addToast({
+            title: `${pollStartedBy} started a ${poll.type}: ${poll.title}`,
+            action: (
+              <Button
+                onClick={() => togglePollView(pollId)}
+                variant="standard"
+                css={{
+                  backgroundColor: '$surface_bright',
+                  fontWeight: '$semiBold',
+                  color: '$on_surface_high',
+                  p: '$xs $md',
+                }}
+              >
+                {poll.type === 'quiz' ? 'Answer' : 'Vote'}
+              </Button>
+            ),
+            duration: Infinity,
+          });
+          toastMap[pollId] = toastID;
+        }
         return;
       }
       switch (parsedPayload.type) {
@@ -297,7 +299,7 @@ const HLSView = () => {
   }, []);
   const onDoubleClickHandler = useCallback(
     event => {
-      if (!(isMobile || isLandscape)) {
+      if (!(isMobile || isLandscape) || hlsState?.variants[0]?.playlist_type !== HLSPlaylistType.DVR) {
         return;
       }
       const sidePercentage = (event.screenX * 100) / event.target.clientWidth;
@@ -312,7 +314,7 @@ const HLSView = () => {
         setIsSeekEnabled(false);
       }, 200);
     },
-    [isLandscape, isMobile, onSeekTo],
+    [hlsState?.variants, isLandscape, isMobile, onSeekTo],
   );
   const onClickHandler = useCallback(() => {
     if (!(isMobile || isLandscape)) {
@@ -399,7 +401,7 @@ const HLSView = () => {
                 <>
                   {isMobile || isLandscape ? (
                     <>
-                      {!showLoader && (
+                      {!showLoader && hlsState?.variants[0]?.playlist_type === HLSPlaylistType.DVR && (
                         <Flex
                           align="center"
                           justify="center"
@@ -463,14 +465,14 @@ const HLSView = () => {
                           }}
                         >
                           <HMSVideoPlayer.Controls.Left>
-                            <LeaveRoom screenType={screenType} />
+                            {hlsViewRef.current && <LeaveRoom screenType={screenType} container={hlsViewRef.current} />}
                           </HMSVideoPlayer.Controls.Left>
                           <HMSVideoPlayer.Controls.Right>
                             {isLandscape && <ChatToggle />}
                             {hasCaptions && !isHlsAutoplayBlocked && (
                               <HLSCaptionSelector isEnabled={isCaptionEnabled} />
                             )}
-                            {availableLayers.length > 0 && !isHlsAutoplayBlocked ? (
+                            {hlsViewRef.current && availableLayers.length > 0 && !isHlsAutoplayBlocked ? (
                               <HLSQualitySelector
                                 layers={availableLayers}
                                 onOpenChange={setQualityDropDownOpen}
@@ -478,6 +480,7 @@ const HLSView = () => {
                                 selection={currentSelectedQuality}
                                 onQualityChange={handleQuality}
                                 isAuto={isUserSelectedAuto}
+                                containerRef={hlsViewRef.current}
                               />
                             ) : null}
                             <HLSAutoplayBlockedPrompt open={isHlsAutoplayBlocked} unblockAutoPlay={unblockAutoPlay} />
@@ -493,7 +496,7 @@ const HLSView = () => {
                     align="start"
                     css={{
                       position: 'absolute',
-                      bottom: '0',
+                      bottom: isFullScreen && hlsState?.variants[0]?.playlist_type === HLSPlaylistType.DVR ? '$8' : '0',
                       left: '0',
                       zIndex: 1,
                       background:
@@ -508,7 +511,7 @@ const HLSView = () => {
                       opacity: controlsVisible ? `1` : '0',
                     }}
                   >
-                    <HMSVideoPlayer.Progress isDvr={hlsState?.variants[0]?.playlist_type === HLSPlaylistType.DVR} />
+                    {hlsState?.variants[0]?.playlist_type === HLSPlaylistType.DVR ? <HMSVideoPlayer.Progress /> : null}
                     <HMSVideoPlayer.Controls.Root
                       css={{
                         p: '$4 $8',
@@ -517,24 +520,28 @@ const HLSView = () => {
                       <HMSVideoPlayer.Controls.Left>
                         {!(isMobile || isLandscape) && (
                           <>
-                            <HMSVideoPlayer.Seeker
-                              onClick={() => {
-                                onSeekTo(-10);
-                              }}
-                              title="backward"
-                            >
-                              <BackwardArrowIcon width={20} height={20} />
-                            </HMSVideoPlayer.Seeker>
-                            <HMSVideoPlayer.PlayPauseButton isPaused={isPaused} />
-                            <HMSVideoPlayer.Seeker
-                              onClick={() => {
-                                onSeekTo(10);
-                              }}
-                              title="forward"
-                            >
-                              <ForwardArrowIcon width={20} height={20} />
-                            </HMSVideoPlayer.Seeker>
-                            {!isVideoLive ? <HMSVideoPlayer.Duration /> : null}
+                            {hlsState?.variants[0]?.playlist_type === HLSPlaylistType.DVR ? (
+                              <>
+                                <HMSVideoPlayer.Seeker
+                                  onClick={() => {
+                                    onSeekTo(-10);
+                                  }}
+                                  title="backward"
+                                >
+                                  <BackwardArrowIcon width={20} height={20} />
+                                </HMSVideoPlayer.Seeker>
+                                <HMSVideoPlayer.PlayPauseButton isPaused={isPaused} />
+                                <HMSVideoPlayer.Seeker
+                                  onClick={() => {
+                                    onSeekTo(10);
+                                  }}
+                                  title="forward"
+                                >
+                                  <ForwardArrowIcon width={20} height={20} />
+                                </HMSVideoPlayer.Seeker>
+                                {!isVideoLive ? <HMSVideoPlayer.Duration /> : null}
+                              </>
+                            ) : null}
                             <HMSVideoPlayer.Volume />
                           </>
                         )}
@@ -569,7 +576,11 @@ const HLSView = () => {
                             </Flex>
                           </Tooltip>
                         </IconButton>
-                        {(isMobile || isLandscape) && !isVideoLive ? <HMSVideoPlayer.Duration /> : null}
+                        {(isMobile || isLandscape) &&
+                        !isVideoLive &&
+                        hlsState?.variants[0]?.playlist_type === HLSPlaylistType.DVR ? (
+                          <HMSVideoPlayer.Duration />
+                        ) : null}
                       </HMSVideoPlayer.Controls.Left>
 
                       <HMSVideoPlayer.Controls.Right>
@@ -602,7 +613,7 @@ const HLSView = () => {
       ) : (
         <Flex align="center" justify="center" direction="column" css={{ size: '100%', px: '$10' }}>
           <Flex align="center" gap="2" css={{ position: 'absolute', left: '$4', top: '$4', zIndex: 1 }}>
-            <LeaveRoom screenType={screenType} />
+            {isMobile || isLandscape ? <LeaveRoom screenType={screenType} /> : null}
           </Flex>
           <Flex css={{ c: '$on_surface_high', r: '$round', bg: '$surface_default', p: '$2' }}>
             {streamEnded ? <ColoredHandIcon height={56} width={56} /> : <GoLiveIcon height={56} width={56} />}

package/src/Prebuilt/layouts/SidePane.tsx

@@ -60,8 +60,7 @@ const Wrapper = styled('div', {
     mobileStream: {
       true: {
         '@md': {
-          position: 'unset !important',
-          background: 'red',
+          position: 'unset',
         },
       },
     },

package/src/Prebuilt/layouts/VideoStreamingSection.tsx

@@ -31,7 +31,7 @@ import {
   // @ts-ignore: No implicit Any
 } from '../components/AppData/useUISettings';
 import { useCloseScreenshareWhiteboard } from '../components/hooks/useCloseScreenshareWhiteboard';
-import { useMobileHLSStream } from '../common/hooks';
+import { useLandscapeHLSStream, useMobileHLSStream } from '../common/hooks';
 // @ts-ignore: No implicit Any
 import { SESSION_STORE_KEY } from '../common/constants';
 
@@ -57,6 +57,7 @@ export const VideoStreamingSection = ({
   const urlToIframe = useUrlToEmbed();
   const pdfAnnotatorActive = usePDFConfig();
   const isMobileHLSStream = useMobileHLSStream();
+  const isLandscapeHLSStream = useLandscapeHLSStream();
   useCloseScreenshareWhiteboard();
 
   useEffect(() => {
@@ -104,7 +105,7 @@ export const VideoStreamingSection = ({
         css={{
           size: '100%',
           position: 'relative',
-          gap: '$4',
+          gap: isMobileHLSStream || isLandscapeHLSStream ? '0' : '$4',
         }}
         direction={isMobileHLSStream ? 'column' : 'row'}
       >

package/src/Prebuilt/primitives/DialogContent.jsx

@@ -216,7 +216,7 @@ export const DialogInputFile = ({ value, onChange, placeholder, disabled, type,
           '&:hover': {
             border: 'none',
             background: 'none',
-            bg: '$transparent !important',
+            bg: 'transparent !important',
           },
         }}
       >

package/src/Sheet/Sheet.tsx

@@ -92,11 +92,11 @@ const StyledContent = styled(DialogPrimitive.Content, {
 
 type SheetContentVariants = VariantProps<typeof StyledContent>;
 type DialogContentPrimitiveProps = React.ComponentProps<typeof DialogPrimitive.Content>;
-type SheetContentProps = DialogContentPrimitiveProps & SheetContentVariants & { css?: CSS };
+type SheetContentProps = DialogContentPrimitiveProps & SheetContentVariants & { css?: CSS; container?: HTMLElement };
 
 const SheetContent = React.forwardRef<React.ElementRef<typeof StyledContent>, SheetContentProps>(
-  ({ children, ...props }, forwardedRef) => (
-    <Dialog.Portal>
+  ({ children, container, ...props }, forwardedRef) => (
+    <Dialog.Portal container={container}>
       <StyledOverlay />
       <StyledContent {...props} ref={forwardedRef}>
         {children}