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

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

@@ -0,0 +1,248 @@
+import React from 'react';
+import { useMedia } from 'react-use';
+import { HMSHLSLayer } from '@100mslive/hls-player';
+import { CheckIcon, CrossIcon, SettingsIcon } from '@100mslive/react-icons';
+import { Box, Dropdown, Flex, Text, Tooltip } from '../../..';
+import { Sheet } from '../../../Sheet';
+import { config } from '../../../Theme';
+import { useIsLandscape } from '../../common/hooks';
+
+export function HLSQualitySelector({
+  open,
+  onOpenChange,
+  layers,
+  onQualityChange,
+  selection,
+  isAuto,
+  containerRef,
+}: {
+  open: boolean;
+  onOpenChange: (value: boolean) => void;
+  layers: HMSHLSLayer[];
+  onQualityChange: (quality: { [key: string]: string | number } | HMSHLSLayer) => void;
+  selection: HMSHLSLayer;
+  isAuto: boolean;
+  containerRef?: HTMLDivElement;
+}) {
+  const isMobile = useMedia(config.media.md);
+  const isLandscape = useIsLandscape();
+
+  if (layers.length === 0) {
+    return null;
+  }
+  if (isMobile || isLandscape) {
+    return (
+      <Sheet.Root open={open} onOpenChange={onOpenChange}>
+        <Sheet.Trigger asChild data-testid="quality_selector">
+          <Flex
+            css={{
+              color: '$on_primary_high',
+              r: '$1',
+              cursor: 'pointer',
+              p: '$2',
+            }}
+          >
+            <SettingsIcon />
+          </Flex>
+        </Sheet.Trigger>
+        <Sheet.Content
+          container={containerRef}
+          css={{ bg: '$surface_default', pb: '$1' }}
+          onClick={() => onOpenChange(false)}
+        >
+          <Sheet.Title
+            css={{
+              display: 'flex',
+              color: '$on_surface_high',
+              w: '100%',
+              justifyContent: 'space-between',
+              mt: '$8',
+              fontSize: '$md',
+              px: '$10',
+              pb: '$8',
+              borderBottom: '1px solid $border_bright',
+              alignItems: 'center',
+            }}
+          >
+            Quality
+            <Sheet.Close css={{ color: '$on_surface_high' }} onClick={() => onOpenChange(false)}>
+              <CrossIcon />
+            </Sheet.Close>
+          </Sheet.Title>
+          {layers.map(layer => {
+            return (
+              <Flex
+                align="center"
+                css={{
+                  w: '100%',
+                  bg: '$surface_default',
+                  '&:hover': {
+                    bg: '$surface_brighter',
+                  },
+                  cursor: 'pointer',
+                  gap: '$4',
+                  py: '$8',
+                  px: '$10',
+                }}
+                key={layer.width}
+                onClick={() => onQualityChange(layer)}
+              >
+                <Text variant="caption" css={{ fontWeight: '$semiBold' }}>
+                  {getQualityText(layer)}
+                </Text>
+                <Text variant="caption" css={{ flex: '1 1 0', c: '$on_surface_low', pl: '$2' }}>
+                  {getBitrateText(layer)}
+                </Text>
+                {!isAuto && layer.width === selection?.width && layer.height === selection?.height && (
+                  <CheckIcon width="16px" height="16px" />
+                )}
+              </Flex>
+            );
+          })}
+          <Flex
+            align="center"
+            css={{
+              w: '100%',
+              bg: '$surface_default',
+              '&:hover': {
+                bg: '$surface_brighter',
+              },
+              cursor: 'pointer',
+              gap: '$4',
+              py: '$8',
+              px: '$10',
+            }}
+            key="auto"
+            onClick={() => onQualityChange({ height: 'auto' })}
+          >
+            <Text variant="caption" css={{ fontWeight: '$semiBold', flex: '1 1 0' }}>
+              Auto
+            </Text>
+            {isAuto && <CheckIcon width="16px" height="16px" />}
+          </Flex>
+        </Sheet.Content>
+      </Sheet.Root>
+    );
+  }
+  return (
+    <Dropdown.Root open={open} onOpenChange={value => onOpenChange(value)} modal={false}>
+      <Dropdown.Trigger asChild data-testid="quality_selector">
+        <Flex
+          css={{
+            color: '$on_primary_high',
+            r: '$1',
+            cursor: 'pointer',
+            p: '$2',
+          }}
+        >
+          <Tooltip title="Select Quality" side="top">
+            <Flex align="center">
+              <Box
+                css={{
+                  w: '$9',
+                  h: '$9',
+                  display: 'inline-flex',
+                  alignItems: 'center',
+                  c: '$on_surface_high',
+                }}
+              >
+                <SettingsIcon />
+              </Box>
+              <Text
+                variant={{
+                  '@md': 'sm',
+                  '@sm': 'xs',
+                  '@xs': 'tiny',
+                }}
+                css={{ display: 'flex', alignItems: 'center', ml: '$2', c: '$on_surface_medium' }}
+              >
+                {isAuto && (
+                  <>
+                    Auto
+                    <Box
+                      css={{
+                        mx: '$2',
+                        w: '$2',
+                        h: '$2',
+                        background: '$on_surface_medium',
+                        r: '$1',
+                      }}
+                    />
+                  </>
+                )}
+                {selection && Math.min(selection.width || 0, selection.height || 0)}p
+              </Text>
+            </Flex>
+          </Tooltip>
+        </Flex>
+      </Dropdown.Trigger>
+      <Dropdown.Portal container={containerRef}>
+        <Dropdown.Content
+          sideOffset={5}
+          align="end"
+          css={{
+            height: 'auto',
+            maxHeight: '$52',
+            w: '$40',
+            bg: '$surface_bright',
+            py: '$4',
+            gap: '$4',
+            display: 'grid',
+          }}
+        >
+          {layers.map(layer => {
+            return (
+              <Dropdown.Item
+                onClick={() => onQualityChange(layer)}
+                key={layer.width}
+                css={{
+                  bg:
+                    !isAuto && layer.width === selection?.width && layer.height === selection?.height
+                      ? '$surface_default'
+                      : '$surface_bright',
+                  '&:hover': {
+                    bg: '$surface_brighter',
+                  },
+                  p: '$2 $4 $2 $8',
+                  h: '$12',
+                  gap: '$2',
+                }}
+              >
+                <Text variant="caption" css={{ fontWeight: '$semiBold' }}>
+                  {getQualityText(layer)}
+                </Text>
+                <Text variant="caption" css={{ flex: '1 1 0', c: '$on_surface_low', pl: '$2' }}>
+                  {getBitrateText(layer)}
+                </Text>
+                {!isAuto && layer.width === selection?.width && layer.height === selection?.height && (
+                  <CheckIcon width="16px" height="16px" />
+                )}
+              </Dropdown.Item>
+            );
+          })}
+          <Dropdown.Item
+            onClick={() => onQualityChange({ height: 'auto' })}
+            key="auto"
+            css={{
+              bg: !isAuto ? '$surface_bright' : '$surface_default',
+              '&:hover': {
+                bg: '$surface_brighter',
+              },
+              p: '$2 $4 $2 $8',
+              h: '$12',
+              gap: '$2',
+            }}
+          >
+            <Text variant="caption" css={{ fontWeight: '$semiBold', flex: '1 1 0' }}>
+              Auto
+            </Text>
+            {isAuto && <CheckIcon width="16px" height="16px" />}
+          </Dropdown.Item>
+        </Dropdown.Content>
+      </Dropdown.Portal>
+    </Dropdown.Root>
+  );
+}
+
+const getQualityText = (layer: HMSHLSLayer) => `${Math.min(layer.height || 0, layer.width || 0)}p `;
+const getBitrateText = (layer: HMSHLSLayer) => `(${(Number(layer.bitrate / 1000) / 1000).toFixed(2)} Mbps)`;

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

@@ -1,5 +1,5 @@
 import React, { forwardRef } from 'react';
-import { Flex } from '../../../';
+import { Flex } from '../../../Layout';
 
 export const HMSVideo = forwardRef(({ children, ...props }, videoRef) => {
   return (
@@ -8,18 +8,25 @@ export const HMSVideo = forwardRef(({ children, ...props }, videoRef) => {
       css={{
         size: '100%',
         position: 'relative',
+        justifyContent: 'center',
+        '@md': {
+          height: 'auto',
+          '& video': {
+            height: '$60 !important',
+          },
+        },
         '& video::cue': {
           color: 'white',
-          // textShadow: '0px 0px 4px #000',
           whiteSpace: 'pre-line',
-          fontSize: '$lg',
+          fontSize: '$sm',
           fontStyle: 'normal',
-          fontWeight: '$semiBold',
+          fontWeight: '$regular',
           lineHeight: '$sm',
-          letterSpacing: '0.5px',
+          letterSpacing: '0.25px',
         },
         '& video::-webkit-media-text-track-display': {
           padding: '0 $4',
+          boxShadow: '0px 1px 3px 0px #000000A3',
         },
         '& video::-webkit-media-text-track-container': {
           fontSize: '$space$10 !important',
@@ -30,9 +37,12 @@ export const HMSVideo = forwardRef(({ children, ...props }, videoRef) => {
     >
       <video
         style={{
-          flex: '1 1 0',
           margin: '0 auto',
-          minHeight: '0',
+          objectFit: 'contain',
+          width: 'auto',
+          height: 'auto',
+          maxWidth: '100%',
+          maxHeight: '100%',
         }}
         ref={videoRef}
         playsInline

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

@@ -0,0 +1,84 @@
+import React from 'react';
+import { ChevronDownIcon } from '@100mslive/react-icons';
+import { Flex } from '../../../Layout';
+import { Text } from '../../../Text';
+// @ts-ignore: No implicit any
+import { Logo } from '../Header/HeaderComponents';
+import { RoomDetailsRow } from '../RoomDetails/RoomDetailsRow';
+import { useRoomLayoutHeader } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
+// @ts-ignore
+import { useIsSidepaneTypeOpen, useSidepaneToggle } from '../AppData/useSidepane';
+import { SIDE_PANE_OPTIONS } from '../../common/constants';
+
+/*
+	player handler --> left -> go live with timer or live, right -> expand icon 
+	inbetween -> play pause icon, double tap to go back/forward
+	seekbar
+	half page will have chat or participant view
+*/
+export const HLSViewTitle = () => {
+  const { title, details } = useRoomLayoutHeader();
+  const toggleDetailsPane = useSidepaneToggle(SIDE_PANE_OPTIONS.ROOM_DETAILS);
+  const isDetailSidepaneOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.ROOM_DETAILS);
+
+  if (isDetailSidepaneOpen) {
+    return (
+      <Flex
+        gap="4"
+        align="center"
+        justify="between"
+        css={{
+          position: 'relative',
+          h: 'fit-content',
+          w: '100%',
+          borderBottom: '1px solid $border_bright',
+          p: '$8',
+          backgroundColor: '$surface_dim',
+        }}
+      >
+        <Text variant="sub2" css={{ fontWeight: '$semiBold' }}>
+          About Session
+        </Text>
+        <Flex
+          onClick={toggleDetailsPane}
+          css={{
+            color: '$on_surface_high',
+            cursor: 'pointer',
+            '&:hover': { opacity: '0.8' },
+          }}
+        >
+          <ChevronDownIcon />
+        </Flex>
+      </Flex>
+    );
+  }
+  return (
+    <Flex
+      gap="4"
+      align="center"
+      css={{
+        position: 'relative',
+        h: 'fit-content',
+        w: '100%',
+        borderBottom: '1px solid $border_bright',
+        p: '$8',
+        backgroundColor: '$surface_dim',
+      }}
+    >
+      <Logo />
+      <Flex direction="column">
+        {title ? (
+          <Text variant="sub2" css={{ fontWeight: '$semiBold' }}>
+            {title}
+          </Text>
+        ) : null}
+        <Flex>
+          <RoomDetailsRow details={details} />
+          <Text variant="caption" css={{ color: '$on_surface_medium' }} onClick={toggleDetailsPane}>
+            &nbsp;...more
+          </Text>
+        </Flex>
+      </Flex>
+    </Flex>
+  );
+};

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

@@ -0,0 +1,27 @@
+import React, { MouseEvent } from 'react';
+import { PauseIcon, PlayIcon } from '@100mslive/react-icons';
+import { IconButton, Tooltip } from '../../..';
+import { useHMSPlayerContext } from './PlayerContext';
+
+export const PlayButton = ({
+  isPaused,
+  width = 20,
+  height = 20,
+}: {
+  isPaused: boolean;
+  width: number;
+  height: number;
+}) => {
+  const { hlsPlayer } = useHMSPlayerContext();
+  const onClick = async (event: MouseEvent) => {
+    event?.stopPropagation();
+    isPaused ? await hlsPlayer?.play() : hlsPlayer?.pause();
+  };
+  return (
+    <Tooltip title={isPaused ? 'Play' : 'Pause'} side="top">
+      <IconButton onClick={onClick} data-testid="play_pause_btn">
+        {isPaused ? <PlayIcon width={width} height={height} /> : <PauseIcon width={width} height={height} />}
+      </IconButton>
+    </Tooltip>
+  );
+};

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

@@ -0,0 +1,27 @@
+import React, { MouseEvent } from 'react';
+import { PauseIcon, PlayIcon } from '@100mslive/react-icons';
+import { IconButton, Tooltip } from '../../..';
+import { useHMSPlayerContext } from './PlayerContext';
+
+export const PlayPauseButton = ({
+  isPaused,
+  width = 20,
+  height = 20,
+}: {
+  isPaused: boolean;
+  width: number;
+  height: number;
+}) => {
+  const { hlsPlayer } = useHMSPlayerContext();
+  const onClick = async (event: MouseEvent) => {
+    event?.stopPropagation();
+    isPaused ? await hlsPlayer?.play() : hlsPlayer?.pause();
+  };
+  return (
+    <Tooltip title={isPaused ? 'Play' : 'Pause'} side="top">
+      <IconButton onClick={onClick} data-testid="play_pause_btn">
+        {isPaused ? <PlayIcon width={width} height={height} /> : <PauseIcon width={width} height={height} />}
+      </IconButton>
+    </Tooltip>
+  );
+};

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

@@ -0,0 +1,15 @@
+import React, { useContext } from 'react';
+import { HMSHLSPlayer } from '@100mslive/hls-player';
+
+type IHMSPlayerContext = {
+  hlsPlayer?: HMSHLSPlayer;
+};
+
+export const HMSPlayerContext = React.createContext<IHMSPlayerContext>({
+  hlsPlayer: undefined,
+});
+
+export const useHMSPlayerContext = () => {
+  const context = useContext(HMSPlayerContext);
+  return context;
+};

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

@@ -0,0 +1,22 @@
+import React, { MouseEventHandler } from 'react';
+import { IconButton, Tooltip } from '../../..';
+
+export const SeekControls = ({
+  title,
+  onClick,
+  children,
+  css,
+}: {
+  title: string;
+  onClick?: MouseEventHandler<HTMLButtonElement>;
+  css: any;
+  children: React.ReactNode;
+}) => {
+  return (
+    <Tooltip title={title} side="top">
+      <IconButton onClick={onClick} data-testid="backward_forward_arrow_btn" css={css}>
+        {children}
+      </IconButton>
+    </Tooltip>
+  );
+};

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

@@ -0,0 +1,95 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { Box, Flex, Slider } from '../../..';
+import { useHMSPlayerContext } from './PlayerContext';
+import { getPercentage } from './utils';
+
+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 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;
+    }
+    videoEl.addEventListener('timeupdate', timeupdateHandler);
+    return function cleanup() {
+      videoEl?.removeEventListener('timeupdate', timeupdateHandler);
+    };
+  }, [timeupdateHandler, videoEl]);
+
+  const onProgress = (progress: number[]) => {
+    const progress1 = Math.floor(getPercentage(progress[0], 100));
+    const videoEl = hlsPlayer?.getVideoElement();
+    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) {
+    return null;
+  }
+  return (
+    <Flex align="center" css={{ cursor: 'pointer', h: '$2', alignSelf: 'stretch' }}>
+      <Slider
+        id="video-actual-rest"
+        css={{
+          cursor: 'pointer',
+          h: '$2',
+          zIndex: 1,
+          transition: `all .2s ease .5s`,
+        }}
+        min={0}
+        max={100}
+        step={1}
+        value={[videoProgress]}
+        showTooltip={false}
+        onValueChange={onProgress}
+        onPointerDown={() => setSeekProgress(true)}
+        onPointerUp={() => setSeekProgress(false)}
+        thumbStyles={{ w: '$6', h: '$6' }}
+      />
+      <Box
+        id="video-buffer"
+        css={{
+          h: '$2',
+          width: `${bufferProgress - videoProgress}%`,
+          background: '$on_surface_high',
+          position: 'absolute',
+          left: `${videoProgress}%`,
+          opacity: '25%',
+        }}
+      />
+    </Flex>
+  );
+};

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

@@ -0,0 +1,43 @@
+import React, { useEffect, useState } from 'react';
+import { HMSHLSPlayerEvents } from '@100mslive/hls-player';
+import { Text } from '../../../Text';
+import { useHMSPlayerContext } from './PlayerContext';
+import { getDurationFromSeconds } from './utils';
+
+export const VideoTime = () => {
+  const { hlsPlayer } = useHMSPlayerContext();
+  const [videoTime, setVideoTime] = useState('');
+
+  useEffect(() => {
+    const timeupdateHandler = (currentTime: number) => {
+      const videoEl = hlsPlayer?.getVideoElement();
+      if (videoEl) {
+        const duration = isFinite(videoEl.duration) ? videoEl.duration : videoEl.seekable.end(0) || 0;
+        setVideoTime(getDurationFromSeconds(duration - currentTime));
+      } else {
+        setVideoTime(getDurationFromSeconds(currentTime));
+      }
+    };
+    if (hlsPlayer) {
+      hlsPlayer.on(HMSHLSPlayerEvents.CURRENT_TIME, timeupdateHandler);
+    }
+    return function cleanup() {
+      hlsPlayer?.off(HMSHLSPlayerEvents.CURRENT_TIME, timeupdateHandler);
+    };
+  }, [hlsPlayer]);
+
+  return hlsPlayer ? (
+    <Text
+      variant="body1"
+      css={{
+        minWidth: '$16',
+        c: '$on_surface_medium',
+        display: 'flex',
+        justifyContent: 'center',
+        fontWeight: '$regular',
+      }}
+    >
+      -{videoTime}
+    </Text>
+  ) : null;
+};

package/src/Prebuilt/components/HMSVideo/{VolumeControl.jsx → VolumeControl.tsx}

@@ -1,8 +1,10 @@
 import React, { useState } from 'react';
 import { VolumeOneIcon, VolumeTwoIcon, VolumeZeroIcon } from '@100mslive/react-icons';
-import { Flex, Slider } from '../../../';
+import { Flex, Slider } from '../../..';
+import { useHMSPlayerContext } from './PlayerContext';
 
-export const VolumeControl = ({ hlsPlayer }) => {
+export const VolumeControl = () => {
+  const { hlsPlayer } = useHMSPlayerContext();
   const [volume, setVolume] = useState(hlsPlayer?.volume ?? 100);
   const [showSlider, setShowSlider] = useState(false);
 
@@ -47,7 +49,7 @@ export const VolumeControl = ({ hlsPlayer }) => {
         step={1}
         value={[volume]}
         onValueChange={volume => {
-          hlsPlayer.setVolume(volume[0]);
+          hlsPlayer?.setVolume(volume[0]);
           setVolume(volume[0]);
         }}
         thumbStyles={{ w: '$6', h: '$6' }}
@@ -56,7 +58,7 @@ export const VolumeControl = ({ hlsPlayer }) => {
   );
 };
 
-const VolumeIcon = ({ volume, onClick }) => {
+const VolumeIcon = ({ volume, onClick }: { volume: number; onClick: () => void }) => {
   if (volume === 0) {
     return <VolumeZeroIcon style={{ cursor: 'pointer', transition: 'color 0.3s' }} onClick={onClick} />;
   }

package/src/Prebuilt/components/HMSVideo/{index.js → index.ts}

@@ -1,13 +1,16 @@
+// @ts-ignore
 import { LeftControls, RightControls, VideoControls } from './Controls';
+// @ts-ignore
 import { HMSVideo } from './HMSVideo';
-import { PlayButton } from './PlayButton';
+import { PlayPauseButton } from './PlayPauseButton';
+import { SeekControls } from './SeekControls';
 import { VideoProgress } from './VideoProgress';
 import { VideoTime } from './VideoTime';
 import { VolumeControl } from './VolumeControl';
 
 export const HMSVideoPlayer = {
   Root: HMSVideo,
-  PlayButton: PlayButton,
+  PlayPauseButton: PlayPauseButton,
   Progress: VideoProgress,
   Duration: VideoTime,
   Volume: VolumeControl,
@@ -16,4 +19,5 @@ export const HMSVideoPlayer = {
     Left: LeftControls,
     Right: RightControls,
   },
+  Seeker: SeekControls,
 };