Update publish-alpha

100mslive · Mar 19, 2024 · 8be5d48 · 8be5d48
2 parents ada10fb + 08ac6c4
commit 8be5d48
Show file tree

Hide file tree

Showing 17 changed files with 460 additions and 213 deletions.
diff --git a/packages/roomkit-react/src/IconButton/IconButton.tsx b/packages/roomkit-react/src/IconButton/IconButton.tsx
@@ -25,19 +25,14 @@ export const IconButton = styled('button', {
   '&[disabled]': {
     opacity: 0.5,
     cursor: 'not-allowed',
+    backgroundColor: '$secondary_dim',
+    color: '$on_primary_high',
   },
   '&:focus': {
     outline: 'none',
   },
   variants: {
     active: {
-      false: {
-        backgroundColor: '$secondary_dim',
-        color: '$on_primary_high',
-        '&:not([disabled]):hover': {
-          backgroundColor: '$secondary_default',
-        },
-      },
       true: {
         '&:not([disabled]):hover': {
           backgroundColor: '$on_surface_low',

diff --git a/packages/roomkit-react/src/Prebuilt/IconButton.tsx b/packages/roomkit-react/src/Prebuilt/IconButton.tsx
@@ -7,22 +7,18 @@ const IconButton = styled(BaseIconButton, {
   border: '1px solid $border_bright',
   bg: '$background_dim',
   r: '$1',
+  '&[disabled]': {
+    opacity: 0.5,
+    cursor: 'not-allowed',
+    backgroundColor: '$secondary_dim',
+    color: '$on_primary_high',
+  },
   variants: {
     active: {
       true: {
         color: '$on_surface_high',
         backgroundColor: 'transparent',
       },
-      false: {
-        border: '1px solid transparent',
-        color: '$on_primary_high',
-      },
-    },
-    disabled: {
-      true: {
-        backgroundColor: '$surface_brighter',
-        color: '$on_surface_low',
-      },
     },
   },
 });

diff --git a/packages/roomkit-react/src/Prebuilt/components/Footer/ChatToggle.tsx b/packages/roomkit-react/src/Prebuilt/components/Footer/ChatToggle.tsx
@@ -9,7 +9,7 @@ import { useIsSidepaneTypeOpen, useSidepaneToggle } from '../AppData/useSidepane
 // @ts-ignore: No implicit Any
 import { SIDE_PANE_OPTIONS } from '../../common/constants';
 
-export const ChatToggle = () => {
+export const ChatToggle = ({ onClick }: { onClick?: () => void }) => {
   const countUnreadMessages = useHMSStore(selectUnreadHMSMessagesCount);
   const isChatOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.CHAT);
   const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
@@ -21,7 +21,7 @@ export const ChatToggle = () => {
       }}
     >
       <Tooltip key="chat" title={`${isChatOpen ? 'Close' : 'Open'} chat`}>
-        <IconButton onClick={toggleChat} active={!isChatOpen} data-testid="chat_btn">
+        <IconButton onClick={() => (onClick ? onClick() : toggleChat())} active={!isChatOpen} data-testid="chat_btn">
           <ChatIcon />
         </IconButton>
       </Tooltip>

diff --git a/packages/roomkit-react/src/Prebuilt/components/Footer/WhiteboardToggle.tsx b/packages/roomkit-react/src/Prebuilt/components/Footer/WhiteboardToggle.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { useWhiteboard } from '@100mslive/react-sdk';
+import { useScreenShare, useWhiteboard } from '@100mslive/react-sdk';
 import { PencilDrawIcon } from '@100mslive/react-icons';
 import { Tooltip } from '../../..';
 // @ts-ignore: No implicit Any
@@ -9,22 +9,36 @@ import { ToastManager } from '../Toast/ToastManager';
 
 export const WhiteboardToggle = () => {
   const { toggle, open, isOwner } = useWhiteboard();
+  const { screenSharingPeerId, amIScreenSharing } = useScreenShare();
+  const remoteScreenShare = screenSharingPeerId && !amIScreenSharing;
+  const disabled = remoteScreenShare || (open && !isOwner);
+
   if (!toggle) {
     return null;
   }
 
   return (
-    <Tooltip key="whiteboard" title={`${open ? 'Close' : 'Open'} Whiteboard`}>
+    <Tooltip
+      key="whiteboard"
+      title={
+        remoteScreenShare
+          ? 'Cannot open whiteboard when viewing a shared screen'
+          : `${open ? 'Close' : 'Open'} Whiteboard`
+      }
+    >
       <IconButton
         onClick={async () => {
+          if (disabled) {
+            return;
+          }
           try {
             await toggle();
           } catch (error) {
             ToastManager.addToast({ title: (error as Error).message, variant: 'error' });
           }
         }}
         active={!open}
-        disabled={open && !isOwner}
+        disabled={disabled}
         data-testid="whiteboard_btn"
       >
         <PencilDrawIcon />

diff --git a/packages/roomkit-react/src/Prebuilt/components/HMSVideo/HMSVideo.jsx b/packages/roomkit-react/src/Prebuilt/components/HMSVideo/HMSVideo.jsx
@@ -9,6 +9,7 @@ export const HMSVideo = forwardRef(({ children, ...props }, videoRef) => {
         size: '100%',
         position: 'relative',
         justifyContent: 'center',
+        transition: 'all 0.3s ease-in-out',
         '@md': {
           height: 'auto',
           '& video': {

diff --git a/packages/roomkit-react/src/Prebuilt/components/HMSVideo/PlayPauseButton.tsx b/packages/roomkit-react/src/Prebuilt/components/HMSVideo/PlayPauseButton.tsx
@@ -9,8 +9,8 @@ export const PlayPauseButton = ({
   height = 20,
 }: {
   isPaused: boolean;
-  width: number;
-  height: number;
+  width?: number;
+  height?: number;
 }) => {
   const { hlsPlayer } = useHMSPlayerContext();
   const onClick = async (event: MouseEvent) => {

diff --git a/packages/roomkit-react/src/Prebuilt/components/HMSVideo/PlayPauseSeekControls.tsx b/packages/roomkit-react/src/Prebuilt/components/HMSVideo/PlayPauseSeekControls.tsx
@@ -0,0 +1,158 @@
+import React from 'react';
+import { useMedia } from 'react-use';
+import { BackwardArrowIcon, ForwardArrowIcon } from '@100mslive/react-icons';
+import { Box, Flex } from '../../../Layout';
+import { Text } from '../../../Text';
+import { config } from '../../../Theme';
+import { PlayPauseButton } from './PlayPauseButton';
+import { SeekControl } from './SeekControl';
+import { useIsLandscape } from '../../common/hooks';
+
+// desktop buttons
+export const PlayPauseSeekControls = ({
+  isPaused,
+  onSeekTo,
+}: {
+  isPaused: boolean;
+  onSeekTo: (value: number) => void;
+}) => {
+  return (
+    <>
+      <SeekControl
+        onClick={e => {
+          e.stopPropagation();
+          onSeekTo(-10);
+        }}
+        title="backward"
+      >
+        <BackwardArrowIcon width={20} height={20} />
+      </SeekControl>
+      <PlayPauseButton isPaused={isPaused} />
+      <SeekControl
+        onClick={e => {
+          e.stopPropagation();
+          onSeekTo(10);
+        }}
+        title="forward"
+      >
+        <ForwardArrowIcon width={20} height={20} />
+      </SeekControl>
+    </>
+  );
+};
+
+// overlay handlers
+export const PlayPauseSeekOverlayControls = ({
+  isPaused,
+  showControls,
+  hoverControlsVisible,
+}: {
+  isPaused: boolean;
+  showControls: boolean;
+  hoverControlsVisible: {
+    seekBackward: boolean;
+    seekForward: boolean;
+    pausePlay: boolean;
+  };
+}) => {
+  const isMobile = useMedia(config.media.md);
+  const isLandscape = useIsLandscape();
+
+  if (!isMobile && !isLandscape) {
+    // show desktopOverflow icons
+    return (
+      <>
+        <Flex
+          css={{
+            bg: 'rgba(0, 0, 0, 0.6)',
+            r: '$round',
+            size: '$24',
+            visibility: hoverControlsVisible.seekBackward ? `` : `hidden`,
+            opacity: hoverControlsVisible.seekBackward ? `1` : '0',
+          }}
+          direction="column"
+          align="center"
+        >
+          <SeekControl title="backward">
+            <BackwardArrowIcon width={52} height={52} />
+          </SeekControl>
+          <Text variant="body2" css={{ fontWeight: '$regular' }}>
+            10 secs
+          </Text>
+        </Flex>
+        <Box
+          css={{
+            bg: 'rgba(0, 0, 0, 0.6)',
+            r: '$round',
+            visibility: hoverControlsVisible.pausePlay ? `` : `hidden`,
+            opacity: hoverControlsVisible.pausePlay ? `1` : '0',
+          }}
+        >
+          <PlayPauseButton isPaused={isPaused} width={48} height={48} />
+        </Box>
+        <Flex
+          css={{
+            bg: 'rgba(0, 0, 0, 0.6)',
+            r: '$round',
+            size: '$24',
+            visibility: hoverControlsVisible.seekForward ? `` : `hidden`,
+            opacity: hoverControlsVisible.seekForward ? `1` : '0',
+          }}
+          direction="column"
+          align="center"
+        >
+          <SeekControl title="forward">
+            <ForwardArrowIcon width={52} height={52} />
+          </SeekControl>
+          <Text variant="body2" css={{ fontWeight: '$regular' }}>
+            10 secs
+          </Text>
+        </Flex>
+      </>
+    );
+  }
+
+  return (
+    <Flex
+      align="center"
+      justify="center"
+      css={{
+        position: 'absolute',
+        bg: '#00000066',
+        display: 'inline-flex',
+        gap: '$2',
+        zIndex: 1,
+        size: '100%',
+        visibility: showControls ? `` : `hidden`,
+        opacity: showControls ? `1` : '0',
+      }}
+    >
+      <SeekControl
+        title="backward"
+        css={{
+          visibility: hoverControlsVisible.seekBackward ? `` : `hidden`,
+          opacity: hoverControlsVisible.seekBackward ? `1` : '0',
+        }}
+      >
+        <BackwardArrowIcon width={32} height={32} />
+      </SeekControl>
+      <Box
+        css={{
+          bg: 'rgba(0, 0, 0, 0.6)',
+          r: '$round',
+        }}
+      >
+        <PlayPauseButton isPaused={isPaused} width={48} height={48} />
+      </Box>
+      <SeekControl
+        title="forward"
+        css={{
+          visibility: hoverControlsVisible.seekForward ? `` : `hidden`,
+          opacity: hoverControlsVisible.seekForward ? `1` : '0',
+        }}
+      >
+        <ForwardArrowIcon width={32} height={32} />
+      </SeekControl>
+    </Flex>
+  );
+};
diff --git a/...uilt/components/HMSVideo/SeekControls.tsx → ...built/components/HMSVideo/SeekControl.tsx b/...uilt/components/HMSVideo/SeekControls.tsx → ...built/components/HMSVideo/SeekControl.tsx
@@ -1,15 +1,15 @@
 import React, { MouseEventHandler } from 'react';
 import { IconButton, Tooltip } from '../../..';
 
-export const SeekControls = ({
+export const SeekControl = ({
   title,
   onClick,
   children,
   css,
 }: {
   title: string;
   onClick?: MouseEventHandler<HTMLButtonElement>;
-  css: any;
+  css?: any;
   children: React.ReactNode;
 }) => {
   return (

diff --git a/packages/roomkit-react/src/Prebuilt/components/HMSVideo/VideoProgress.tsx b/packages/roomkit-react/src/Prebuilt/components/HMSVideo/VideoProgress.tsx
@@ -25,8 +25,12 @@ export const VideoProgress = ({
     if (videoEl.buffered.length > 0) {
       bufferProgress = Math.floor(getPercentage(videoEl.buffered?.end(0), duration));
     }
-    setVideoProgress(isNaN(videoProgress) ? 0 : videoProgress);
-    setBufferProgress(isNaN(bufferProgress) ? 0 : bufferProgress);
+    if (!isNaN(videoProgress)) {
+      setVideoProgress(videoProgress);
+    }
+    if (!isNaN(bufferProgress)) {
+      setBufferProgress(bufferProgress);
+    }
   }, [videoEl]);
   const timeupdateHandler = useCallback(() => {
     if (!videoEl || seekProgress) {
@@ -42,7 +46,7 @@ export const VideoProgress = ({
     return function cleanup() {
       videoEl?.removeEventListener('timeupdate', timeupdateHandler);
     };
-  }, [timeupdateHandler, videoEl]);
+  }, [setProgress, timeupdateHandler, videoEl]);
 
   const onProgress = (progress: number[]) => {
     const progress1 = Math.floor(getPercentage(progress[0], 100));

diff --git a/packages/roomkit-react/src/Prebuilt/components/HMSVideo/index.ts b/packages/roomkit-react/src/Prebuilt/components/HMSVideo/index.ts
@@ -2,15 +2,13 @@
 import { LeftControls, RightControls, VideoControls } from './Controls';
 // @ts-ignore
 import { HMSVideo } from './HMSVideo';
-import { PlayPauseButton } from './PlayPauseButton';
-import { SeekControls } from './SeekControls';
+import { PlayPauseSeekControls, PlayPauseSeekOverlayControls } from './PlayPauseSeekControls';
 import { VideoProgress } from './VideoProgress';
 import { VideoTime } from './VideoTime';
 import { VolumeControl } from './VolumeControl';
 
 export const HMSVideoPlayer = {
   Root: HMSVideo,
-  PlayPauseButton: PlayPauseButton,
   Progress: VideoProgress,
   Duration: VideoTime,
   Volume: VolumeControl,
@@ -19,5 +17,8 @@ export const HMSVideoPlayer = {
     Left: LeftControls,
     Right: RightControls,
   },
-  Seeker: SeekControls,
+  PlayPauseSeekControls: {
+    Overlay: PlayPauseSeekOverlayControls,
+    Button: PlayPauseSeekControls,
+  },
 };
diff --git a/...ges/roomkit-react/src/Prebuilt/components/IconButtonWithOptions/IconButtonWithOptions.tsx b/...ges/roomkit-react/src/Prebuilt/components/IconButtonWithOptions/IconButtonWithOptions.tsx
@@ -25,9 +25,9 @@ const IconSection = styled(IconButton, {
   p: '$4',
   r: '$1',
   bg: 'transparent',
-  borderTopRightRadius: 0,
+  borderTopRightRadius: '0 !important',
   borderColor: '$border_bright',
-  borderBottomRightRadius: 0,
+  borderBottomRightRadius: '0 !important',
   position: 'relative',
   '&:not([disabled]):focus-visible': {
     zIndex: 1,
@@ -41,8 +41,8 @@ const IconSection = styled(IconButton, {
     ...variants,
     hideOptions: {
       true: {
-        borderTopRightRadius: '$1',
-        borderBottomRightRadius: '$1',
+        borderTopRightRadius: '$1 !important',
+        borderBottomRightRadius: '$1 !important',
       },
     },
   },
@@ -53,10 +53,10 @@ const OptionsSection = styled(IconButton, {
   h: '$14',
   p: '$4 $2',
   r: '$1',
-  borderTopLeftRadius: 0,
+  borderTopLeftRadius: '0 !important',
   borderColor: '$border_bright',
-  borderBottomLeftRadius: 0,
-  borderLeftWidth: 0,
+  borderBottomLeftRadius: '0 !important',
+  borderLeftWidth: '0 !important',
   position: 'relative',
   '&:not([disabled]):focus-visible': {
     zIndex: 1,