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

package/src/Prebuilt/components/Chat/ChatFooter.tsx

@@ -152,7 +152,7 @@ export const ChatFooter = ({ onSend, children }: { onSend: (count: number) => vo
       <Flex>
         <ChatSelectorContainer />
         {canDisableChat && isMobile && isOverlayChat ? (
-          <Flex align="center" justify="end" css={{ mb: '$4' }}>
+          <Flex align="center" justify="end" css={{ mb: '$4' }} onClick={e => e.stopPropagation()}>
             <Popover.Root>
               <Popover.Trigger asChild>
                 <IconButton css={{ border: '1px solid $border_bright' }}>
@@ -273,7 +273,7 @@ export const ChatFooter = ({ onSend, children }: { onSend: (count: number) => vo
                 css={{
                   alignItems: 'center',
                 }}
-                gap="1"
+                gap="2"
               >
                 {noAVPermissions ? <RaiseHand css={{ bg: '$surface_default' }} /> : null}
                 <MoreSettings elements={elements} screenType={screenType} />

package/src/Prebuilt/components/Chat/EmptyChat.tsx

@@ -7,6 +7,7 @@ import { config as cssConfig } from '../../../Theme';
 import emptyChat from '../../images/empty-chat.svg';
 import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
 import { useIsPeerBlacklisted } from '../hooks/useChatBlacklist';
+import { useLandscapeHLSStream, useMobileHLSStream } from '../../common/hooks';
 
 export const EmptyChat = () => {
   const { elements } = useRoomLayoutConferencingScreen();
@@ -18,8 +19,11 @@ export const EmptyChat = () => {
       elements.chat.private_chat_enabled ||
       (elements.chat.roles_whitelist && elements.chat.roles_whitelist.length)) &&
     !isLocalPeerBlacklisted;
+  const isMobileHLSStream = useMobileHLSStream();
+  const isLandscapeStream = useLandscapeHLSStream();
+  const streaming = isMobileHLSStream || isLandscapeStream;
 
-  if (isMobile && elements?.chat?.is_overlay) return <></>;
+  if (isMobile && elements?.chat?.is_overlay && !streaming) return <></>;
 
   return (
     <Flex

package/src/Prebuilt/components/Chat/PinnedMessage.tsx

@@ -71,13 +71,14 @@ export const PinnedMessage = () => {
       <Flex
         css={{
           p: '$4',
-          color: '$on_surface_medium',
-          bg: isMobile ? 'rgba(0, 0, 0, 0.64)' : '$surface_default',
+          color: '$on_surface_high',
+          bg: isMobile && elements?.chat?.is_overlay ? 'rgba(0, 0, 0, 0.64)' : '$surface_brighter',
           r: '$1',
           gap: '$4',
           mb: '$8',
           mt: '$8',
           flexGrow: 1,
+          border: '1px solid $border_bright',
         }}
         align="center"
         justify="between"
@@ -98,7 +99,7 @@ export const PinnedMessage = () => {
         >
           <Text
             variant="sm"
-            css={{ color: '$on_surface_medium' }}
+            css={{ color: '$on_surface_high' }}
             {...swipeHandlers}
             title={pinnedMessages[pinnedMessageIndex]?.text}
           >

package/src/Prebuilt/components/ConferenceScreen.tsx

@@ -22,6 +22,8 @@ import { Box, Flex } from '../../Layout';
 import { useHMSPrebuiltContext } from '../AppContext';
 import { VideoStreamingSection } from '../layouts/VideoStreamingSection';
 // @ts-ignore: No implicit Any
+import { EmojiReaction } from './EmojiReaction';
+// @ts-ignore: No implicit Any
 import FullPageProgress from './FullPageProgress';
 import { Header } from './Header';
 import { PreviousRoleInMetadata } from './PreviousRoleInMetadata';
@@ -195,12 +197,22 @@ export const ConferenceScreen = () => {
               alignItems: 'center',
               pr: '$4',
               pb: '$4',
+              position: 'relative',
             }}
             justify="end"
-            gap="1"
+            gap="2"
           >
             {noAVPermissions ? <RaiseHand /> : null}
             <MoreSettings elements={screenProps.elements} screenType={screenProps.screenType} />
+            <Box
+              css={{
+                position: 'absolute',
+                bottom: '100%',
+                mb: '$4',
+              }}
+            >
+              <EmojiReaction />
+            </Box>
           </Flex>
         )}
         <RoleChangeRequestModal />

package/src/Prebuilt/components/EmojiReaction.jsx

@@ -23,7 +23,7 @@ import { EMOJI_REACTION_TYPE } from '../common/constants';
 
 init({ data });
 
-export const EmojiReaction = () => {
+export const EmojiReaction = ({ showCard = false }) => {
   const [open, setOpen] = useState(false);
   const isConnected = useHMSStore(selectIsConnectedToRoom);
   useDropdownList({ open: open, name: 'EmojiReaction' });
@@ -68,7 +68,7 @@ export const EmojiReaction = () => {
     return null;
   }
 
-  if ((isMobile || isLandscape) && !(isLandscapeStream || isMobileHLSStream)) {
+  if (showCard) {
     return <EmojiCard sendReaction={sendReaction} />;
   }
   return (

package/src/Prebuilt/components/Footer/RoleOptions.tsx

@@ -38,9 +38,6 @@ const DropdownWrapper = ({ children }: { children: React.ReactNode }) => {
   if (React.Children.toArray(children).length === 0) {
     return null;
   }
-  React.Children.map(children, child => {
-    console.log({ child });
-  });
   return (
     <Dropdown.Root open={openOptions} onOpenChange={setOpenOptions}>
       <Dropdown.Trigger
@@ -83,9 +80,12 @@ export const RoleOptions = ({ roleName, peerList }: { roleName: string; peerList
   const { on_stage_role, off_stage_roles = [] } = (elements as DefaultConferencingScreen_Elements)?.on_stage_exp || {};
   const canRemoveRoleFromStage = permissions?.changeRole && roleName === on_stage_role;
   const role = useHMSStore(selectRoleByRoleName(roleName));
+  const tracks = useHMSStore(selectTracksMap);
+  if (!role) {
+    return null;
+  }
   const canPublishAudio = role.publishParams.allowed.includes('audio');
   const canPublishVideo = role.publishParams.allowed.includes('video');
-  const tracks = useHMSStore(selectTracksMap);
 
   let isVideoOnForSomePeers = false;
   let isAudioOnForSomePeers = false;

package/src/Prebuilt/components/HMSVideo/HMSVideo.jsx

@@ -1,17 +1,20 @@
 import React, { forwardRef } from 'react';
-import { useMedia } from 'react-use';
-import { config, Flex } from '../../../';
-import { useIsLandscape } from '../../common/hooks';
+import { Flex } from '../../../Layout';
 
 export const HMSVideo = forwardRef(({ children, ...props }, videoRef) => {
-  const isLandscape = useIsLandscape();
-  const isMobile = useMedia(config.media.md);
   return (
     <Flex
       data-testid="hms-video"
       css={{
         size: '100%',
         position: 'relative',
+        justifyContent: 'center',
+        '@md': {
+          height: 'auto',
+          '& video': {
+            height: '$60 !important',
+          },
+        },
         '& video::cue': {
           color: 'white',
           whiteSpace: 'pre-line',
@@ -34,16 +37,16 @@ export const HMSVideo = forwardRef(({ children, ...props }, videoRef) => {
     >
       <video
         style={{
-          flex: '1 1 0',
           margin: '0 auto',
-          minHeight: '0',
           objectFit: 'contain',
-          width: 'inherit',
-          height: isLandscape || isMobile ? '100%' : '',
-          position: isLandscape || isMobile ? 'absolute' : '',
+          width: 'auto',
+          height: 'auto',
+          maxWidth: '100%',
+          maxHeight: '100%',
         }}
         ref={videoRef}
         playsInline
+        disablePictureInPicture
       />
       {children}
     </Flex>

package/src/Prebuilt/components/HMSVideo/MwebHLSViewTitle.tsx

@@ -17,7 +17,7 @@ import { SIDE_PANE_OPTIONS } from '../../common/constants';
 	half page will have chat or participant view
 */
 export const HLSViewTitle = () => {
-  const { title, details } = useRoomLayoutHeader();
+  const { title, details, description } = useRoomLayoutHeader();
   const toggleDetailsPane = useSidepaneToggle(SIDE_PANE_OPTIONS.ROOM_DETAILS);
   const isDetailSidepaneOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.ROOM_DETAILS);
 
@@ -74,9 +74,11 @@ export const HLSViewTitle = () => {
         ) : null}
         <Flex>
           <RoomDetailsRow details={details} />
-          <Text variant="caption" css={{ color: '$on_surface_medium' }} onClick={toggleDetailsPane}>
-            &nbsp;...more
-          </Text>
+          {description ? (
+            <Text variant="caption" css={{ color: '$on_surface_medium' }} onClick={toggleDetailsPane}>
+              &nbsp;...more
+            </Text>
+          ) : null}
         </Flex>
       </Flex>
     </Flex>

package/src/Prebuilt/components/HMSVideo/VideoProgress.tsx

@@ -1,48 +1,59 @@
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { Box, Flex, Slider } from '../../..';
 import { useHMSPlayerContext } from './PlayerContext';
 import { getPercentage } from './utils';
 
-export const VideoProgress = () => {
+export const VideoProgress = ({
+  seekProgress,
+  setSeekProgress,
+}: {
+  seekProgress: boolean;
+  setSeekProgress: (value: boolean) => void;
+}) => {
   const { hlsPlayer } = useHMSPlayerContext();
   const [videoProgress, setVideoProgress] = useState<number>(0);
   const [bufferProgress, setBufferProgress] = useState(0);
   const videoEl = hlsPlayer?.getVideoElement();
 
-  const onValueChange = (time: number) => {
-    hlsPlayer?.seekTo(time);
-  };
+  const setProgress = useCallback(() => {
+    if (!videoEl) {
+      return;
+    }
+    const duration = isFinite(videoEl.duration) ? videoEl.duration : videoEl.seekable?.end(0) || 0;
+    const videoProgress = Math.floor(getPercentage(videoEl.currentTime, duration));
+    let bufferProgress = 0;
+    if (videoEl.buffered.length > 0) {
+      bufferProgress = Math.floor(getPercentage(videoEl.buffered?.end(0), duration));
+    }
+    setVideoProgress(isNaN(videoProgress) ? 0 : videoProgress);
+    setBufferProgress(isNaN(bufferProgress) ? 0 : bufferProgress);
+  }, [videoEl]);
+  const timeupdateHandler = useCallback(() => {
+    if (!videoEl || seekProgress) {
+      return;
+    }
+    setProgress();
+  }, [seekProgress, setProgress, videoEl]);
   useEffect(() => {
     if (!videoEl) {
       return;
     }
-    const timeupdateHandler = () => {
-      if (!videoEl) {
-        return;
-      }
-      const duration = isFinite(videoEl.duration) ? videoEl.duration : videoEl.seekable?.end(0) || 0;
-      const videoProgress = Math.floor(getPercentage(videoEl.currentTime, duration));
-      let bufferProgress = 0;
-      if (videoEl.buffered.length > 0) {
-        bufferProgress = Math.floor(getPercentage(videoEl.buffered?.end(0), duration));
-      }
-
-      setVideoProgress(isNaN(videoProgress) ? 0 : videoProgress);
-      setBufferProgress(isNaN(bufferProgress) ? 0 : bufferProgress);
-    };
     videoEl.addEventListener('timeupdate', timeupdateHandler);
     return function cleanup() {
       videoEl?.removeEventListener('timeupdate', timeupdateHandler);
     };
-  }, [videoEl]);
+  }, [timeupdateHandler, videoEl]);
 
   const onProgress = (progress: number[]) => {
     const progress1 = Math.floor(getPercentage(progress[0], 100));
     const videoEl = hlsPlayer?.getVideoElement();
-    const currentTime = (progress1 * (videoEl?.duration || 0)) / 100;
-    if (onValueChange) {
-      onValueChange(currentTime);
+    if (!videoEl) {
+      return;
     }
+    const duration = isFinite(videoEl.duration) ? videoEl.duration : videoEl.seekable?.end(0) || 0;
+    const currentTime = (progress1 * duration) / 100;
+    hlsPlayer?.seekTo(currentTime);
+    setProgress();
   };
 
   if (!videoEl) {
@@ -64,6 +75,8 @@ export const VideoProgress = () => {
         value={[videoProgress]}
         showTooltip={false}
         onValueChange={onProgress}
+        onPointerDown={() => setSeekProgress(true)}
+        onPointerUp={() => setSeekProgress(false)}
         thumbStyles={{ w: '$6', h: '$6' }}
       />
       <Box

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

@@ -343,7 +343,7 @@ export const MwebOptions = ({
             mx: '$4',
           }}
         >
-          <EmojiReaction />
+          <EmojiReaction showCard />
         </Box>
       )}
       {showRecordingOn && (

package/src/Prebuilt/components/MwebLandscapePrompt.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { useMedia } from 'react-use';
+import { match, P } from 'ts-pattern';
 import { RefreshIcon } from '@100mslive/react-icons';
 import { Button } from '../../Button';
 import { Box, Flex } from '../../Layout';
@@ -22,21 +23,26 @@ export const MwebLandscapePrompt = () => {
     }
 
     if (!window.screen?.orientation) {
-      setShowMwebLandscapePrompt(isLandscape);
+      setShowMwebLandscapePrompt(isLandscape && !isLandscapeHLSStream);
       return;
     }
     const handleRotation = () => {
       const angle = window.screen.orientation.angle;
       const type = window.screen.orientation.type || '';
       // Angle check needed to diff bw mobile and desktop
-      setShowMwebLandscapePrompt(angle ? angle >= 90 && type.includes('landscape') : isLandscape);
+      setShowMwebLandscapePrompt(
+        match({ angle, isLandscapeHLSStream, isLandscape, type })
+          .with({ isLandscapeHLSStream }, () => false)
+          .with({ angle: P.when(angle => angle && angle >= 90) }, ({ type }) => type.includes('landscape'))
+          .otherwise(() => isLandscape),
+      );
     };
     handleRotation();
     window.screen.orientation.addEventListener('change', handleRotation);
     return () => {
       window.screen.orientation.removeEventListener('change', handleRotation);
     };
-  }, [isLandscape]);
+  }, [isLandscape, isLandscapeHLSStream]);
 
   if (isLandscapeHLSStream) {
     return null;

package/src/Prebuilt/components/Polls/CreatePollQuiz/PollsQuizMenu.tsx

@@ -140,7 +140,7 @@ const AddMenu = () => {
           type="text"
           placeholder="Enter a name to continue"
           value={title}
-          onChange={event => setTitle(event.target.value)}
+          onChange={event => setTitle(event.target.value.trimStart())}
           css={{
             backgroundColor: '$surface_bright',
             border: '1px solid $border_default',

package/src/Prebuilt/components/Polls/CreateQuestions/QuestionForm.tsx

@@ -159,7 +159,7 @@ export const QuestionForm = ({
           maxHeight: '$32',
         }}
         value={text}
-        onChange={event => setText(event.target.value)}
+        onChange={event => setText(event.target.value.trimStart())}
       />
       <Text variant="xs" css={{ color: '$on_surface_medium', textAlign: 'end', mt: '$4' }}>
         {text?.length || 0}/1024

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

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

package/src/Prebuilt/components/SidePaneTabs.tsx

@@ -41,9 +41,8 @@ const ParticipantCount = ({ count }: { count: number }) => {
 
 export const SidePaneTabs = React.memo<{
   active: 'Participants | Chat';
-  hideControls?: boolean;
   hideTab?: boolean;
-}>(({ active = SIDE_PANE_OPTIONS.CHAT, hideControls, hideTab = false }) => {
+}>(({ active = SIDE_PANE_OPTIONS.CHAT, hideTab = false }) => {
   const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
   const toggleParticipants = useSidepaneToggle(SIDE_PANE_OPTIONS.PARTICIPANTS);
   const resetSidePane = useSidepaneReset();
@@ -85,7 +84,6 @@ export const SidePaneTabs = React.memo<{
         css={{
           color: '$on_primary_high',
           h: '100%',
-          marginTop: hideControls && isOverlayChat ? '$17' : '0',
           transition: 'margin 0.3s ease-in-out',
           position: 'relative',
         }}
@@ -103,7 +101,6 @@ export const SidePaneTabs = React.memo<{
       css={{
         color: '$on_primary_high',
         h: '100%',
-        marginTop: hideControls && isOverlayChat ? '$17' : '0',
         transition: 'margin 0.3s ease-in-out',
       }}
     >

package/src/Prebuilt/components/VideoLayouts/ProminenceLayout.tsx

@@ -36,6 +36,7 @@ const SecondarySection = ({
   hasSidebar,
 }: React.PropsWithChildren<{ tiles: TrackWithPeerAndDimensions[]; edgeToEdge?: boolean; hasSidebar?: boolean }>) => {
   const tileLayoutProps = useVideoTileContext();
+  console.log('secondary section', { tilesLength: tiles?.length });
   if (!tiles?.length) {
     return null;
   }

package/src/Prebuilt/components/VideoLayouts/ScreenshareLayout.tsx

@@ -55,6 +55,8 @@ export const ScreenshareLayout = ({ peers, onPageChange, onPageSize, edgeToEdge
     };
   }, [activeSharePeer?.id, isMobile, setActiveScreenSharePeer]);
 
+  console.log({ activeSharePeer, secondaryPeers });
+
   return (
     <ProminenceLayout.Root edgeToEdge={edgeToEdge} hasSidebar={hasSidebar}>
       <ProminenceLayout.ProminentSection>