feat: add play pause state for desktop, fullscreen fixes

100mslive · Mar 19, 2024 · 08ac6c4 · 08ac6c4
1 parent ab349b4
commit 08ac6c4
Show file tree

Hide file tree

Showing 8 changed files with 292 additions and 91 deletions.
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/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,
+  },
 };