fix: pushed this new control file

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 { SeekControls } from './SeekControls';
+import { useIsLandscape } from '../../common/hooks';
+
+// desktop buttons
+export const PlayPauseSeekControls = ({
+  isPaused,
+  onSeekTo,
+}: {
+  isPaused: boolean;
+  onSeekTo: (value: number) => void;
+}) => {
+  return (
+    <>
+      <SeekControls
+        onClick={e => {
+          e.stopPropagation();
+          onSeekTo(-10);
+        }}
+        title="backward"
+      >
+        <BackwardArrowIcon width={20} height={20} />
+      </SeekControls>
+      <PlayPauseButton isPaused={isPaused} />
+      <SeekControls
+        onClick={e => {
+          e.stopPropagation();
+          onSeekTo(10);
+        }}
+        title="forward"
+      >
+        <ForwardArrowIcon width={20} height={20} />
+      </SeekControls>
+    </>
+  );
+};
+
+// overlay handlers
+export const PlayPauseSeekOverlayControls = ({
+  isPaused,
+  controlsVisible,
+  hoverControlsVisible,
+}: {
+  isPaused: boolean;
+  controlsVisible: 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"
+        >
+          <SeekControls title="backward">
+            <BackwardArrowIcon width={52} height={52} />
+          </SeekControls>
+          <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"
+        >
+          <SeekControls title="forward">
+            <ForwardArrowIcon width={52} height={52} />
+          </SeekControls>
+          <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: controlsVisible ? `` : `hidden`,
+        opacity: controlsVisible ? `1` : '0',
+      }}
+    >
+      <SeekControls
+        title="backward"
+        css={{
+          visibility: hoverControlsVisible.seekBackward ? `` : `hidden`,
+          opacity: hoverControlsVisible.seekBackward ? `1` : '0',
+        }}
+      >
+        <BackwardArrowIcon width={32} height={32} />
+      </SeekControls>
+      <Box
+        css={{
+          bg: 'rgba(0, 0, 0, 0.6)',
+          r: '$round',
+        }}
+      >
+        <PlayPauseButton isPaused={isPaused} width={48} height={48} />
+      </Box>
+      <SeekControls
+        title="forward"
+        css={{
+          visibility: hoverControlsVisible.seekForward ? `` : `hidden`,
+          opacity: hoverControlsVisible.seekForward ? `1` : '0',
+        }}
+      >
+        <ForwardArrowIcon width={32} height={32} />
+      </SeekControls>
+    </Flex>
+  );
+};