@100mslive/roomkit-react 0.3.3-alpha.3 → 0.3.3-alpha.4

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

@@ -1,158 +0,0 @@
-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>
-  );
-};

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

@@ -1,95 +0,0 @@
-import React, { useEffect, useMemo } from 'react';
-import { useMedia } from 'react-use';
-import { selectPeerByCondition, selectWhiteboard, useHMSStore, useWhiteboard } from '@100mslive/react-sdk';
-import { Box } from '../../../Layout';
-import { config as cssConfig } from '../../../Theme';
-import { InsetTile } from '../InsetTile';
-import { SecondaryTiles } from '../SecondaryTiles';
-import { LayoutMode } from '../Settings/LayoutSettings';
-import { LayoutProps } from './interface';
-import { ProminenceLayout } from './ProminenceLayout';
-// @ts-ignore: No implicit Any
-import { useSetUiSettings } from '../AppData/useUISettings';
-import { UI_SETTINGS } from '../../common/constants';
-
-const WhiteboardEmbed = () => {
-  const isMobile = useMedia(cssConfig.media.md);
-  const { iframeRef } = useWhiteboard(isMobile);
-
-  return (
-    <Box
-      css={{
-        mx: '$8',
-        flex: '3 1 0',
-        '@lg': {
-          flex: '2 1 0',
-          display: 'flex',
-          alignItems: 'center',
-        },
-      }}
-    >
-      <iframe
-        title="Whiteboard View"
-        ref={iframeRef}
-        style={{
-          width: '100%',
-          height: '100%',
-          border: 0,
-          borderRadius: '0.75rem',
-        }}
-        allow="autoplay; clipboard-write;"
-        referrerPolicy="no-referrer"
-      />
-    </Box>
-  );
-};
-
-export const WhiteboardLayout = ({ peers, onPageChange, onPageSize, edgeToEdge }: LayoutProps) => {
-  const whiteboard = useHMSStore(selectWhiteboard);
-  const whiteboardOwner = useHMSStore(selectPeerByCondition(peer => peer.customerUserId === whiteboard?.owner));
-  const [layoutMode, setLayoutMode] = useSetUiSettings(UI_SETTINGS.layoutMode);
-  const isMobile = useMedia(cssConfig.media.md);
-  const hasSidebar = !isMobile && layoutMode === LayoutMode.SIDEBAR;
-  const secondaryPeers = useMemo(() => {
-    if (layoutMode === LayoutMode.SPOTLIGHT) {
-      return [];
-    }
-    if (isMobile || layoutMode === LayoutMode.SIDEBAR) {
-      return whiteboardOwner
-        ? [whiteboardOwner, ...peers.filter(p => p.id !== whiteboardOwner?.id)] //keep active sharing peer as first tile
-        : peers;
-    }
-    return peers.filter(p => p.id !== whiteboardOwner?.id);
-  }, [whiteboardOwner, peers, isMobile, layoutMode]);
-
-  useEffect(() => {
-    if (isMobile) {
-      setLayoutMode(LayoutMode.GALLERY);
-      return;
-    }
-    if (layoutMode === LayoutMode.SIDEBAR) {
-      return;
-    }
-    setLayoutMode(LayoutMode.SIDEBAR);
-    return () => {
-      // reset to gallery once whiteboard is stopped
-      setLayoutMode(LayoutMode.GALLERY);
-    };
-  }, [isMobile]); // eslint-disable-line react-hooks/exhaustive-deps
-
-  return (
-    <ProminenceLayout.Root edgeToEdge={edgeToEdge} hasSidebar={hasSidebar}>
-      <ProminenceLayout.ProminentSection>
-        <WhiteboardEmbed />
-      </ProminenceLayout.ProminentSection>
-      <SecondaryTiles
-        peers={secondaryPeers}
-        onPageChange={onPageChange}
-        onPageSize={onPageSize}
-        edgeToEdge={edgeToEdge}
-        hasSidebar={hasSidebar}
-      />
-      {layoutMode === LayoutMode.SPOTLIGHT && whiteboardOwner && <InsetTile peerId={whiteboardOwner?.id} />}
-    </ProminenceLayout.Root>
-  );
-};