@100mslive/roomkit-react 0.4.3-alpha.2 → 0.4.3-alpha.4

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

@@ -1,75 +0,0 @@
-import React, { forwardRef, useEffect, useState } from 'react';
-import { Flex } from '../../../Layout';
-
-export const HMSVideo = forwardRef(({ children, isFullScreen, ...props }, videoRef) => {
-  const [width, setWidth] = useState('auto');
-
-  useEffect(() => {
-    const updatingVideoWidth = () => {
-      const videoEl = videoRef.current;
-      if (!videoEl) {
-        return;
-      }
-      if (videoEl.videoWidth > videoEl.videoHeight && width !== '100%') {
-        setWidth('100%');
-      }
-    };
-    const videoEl = videoRef.current;
-    if (!videoEl) {
-      return;
-    }
-    videoEl.addEventListener('loadedmetadata', updatingVideoWidth);
-    return () => {
-      videoEl.removeEventListener('loadedmetadata', updatingVideoWidth);
-    };
-  }, [videoRef, width]);
-  return (
-    <Flex
-      data-testid="hms-video"
-      css={{
-        size: '100%',
-        position: 'relative',
-        justifyContent: 'center',
-        transition: 'all 0.3s ease-in-out',
-        '@md': {
-          '& video': {
-            height: isFullScreen ? '' : '$60 !important',
-          },
-        },
-        '& video::cue': {
-          // default for on-surface-high
-          color: '#EFF0FA',
-          whiteSpace: 'pre-line',
-          fontSize: '$sm',
-          fontStyle: 'normal',
-          fontWeight: '$regular',
-          lineHeight: '$sm',
-          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',
-        },
-      }}
-      direction="column"
-      {...props}
-    >
-      <video
-        style={{
-          margin: '0 auto',
-          objectFit: 'contain',
-          width: width,
-          height: '100%',
-          maxWidth: '100%',
-        }}
-        ref={videoRef}
-        playsInline
-        disablePictureInPicture
-      />
-      {children}
-    </Flex>
-  );
-});

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

@@ -1,86 +0,0 @@
-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, description } = 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} />
-          {description ? (
-            <Text variant="caption" css={{ color: '$on_surface_medium' }} onClick={toggleDetailsPane}>
-              &nbsp;...more
-            </Text>
-          ) : null}
-        </Flex>
-      </Flex>
-    </Flex>
-  );
-};

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

@@ -1,27 +0,0 @@
-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/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/HMSVideo/PlayerContext.tsx

@@ -1,15 +0,0 @@
-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/SeekControl.tsx

@@ -1,22 +0,0 @@
-import React, { MouseEventHandler } from 'react';
-import { IconButton, Tooltip } from '../../..';
-
-export const SeekControl = ({
-  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

@@ -1,100 +0,0 @@
-import React, { useCallback, useEffect, useState } from 'react';
-import { Box, Flex, Slider } from '../../..';
-import { useHMSPlayerContext } from './PlayerContext';
-import { getDuration, 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 = getDuration(videoEl);
-    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));
-    }
-    if (!isNaN(videoProgress)) {
-      setVideoProgress(videoProgress);
-    }
-    if (!isNaN(bufferProgress)) {
-      setBufferProgress(bufferProgress);
-    }
-  }, [videoEl]);
-  const timeupdateHandler = useCallback(() => {
-    if (!videoEl || seekProgress) {
-      return;
-    }
-    setProgress();
-  }, [seekProgress, setProgress, videoEl]);
-  useEffect(() => {
-    if (!videoEl) {
-      return;
-    }
-    setProgress();
-    videoEl.addEventListener('timeupdate', timeupdateHandler);
-    return function cleanup() {
-      videoEl?.removeEventListener('timeupdate', timeupdateHandler);
-    };
-  }, [setProgress, 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

@@ -1,52 +0,0 @@
-import React, { useCallback, useEffect, useState } from 'react';
-import { HMSHLSPlayerEvents } from '@100mslive/hls-player';
-import { Text } from '../../../Text';
-import { useHMSPlayerContext } from './PlayerContext';
-import { getDuration, getDurationFromSeconds } from './utils';
-
-export const VideoTime = () => {
-  const { hlsPlayer } = useHMSPlayerContext();
-
-  const [videoTime, setVideoTime] = useState(getDurationFromSeconds(0));
-
-  const updateTime = useCallback(
-    (currentTime: number) => {
-      const videoEl = hlsPlayer?.getVideoElement();
-      if (videoEl) {
-        const duration = getDuration(videoEl);
-        setVideoTime(getDurationFromSeconds(duration - currentTime));
-      } else {
-        setVideoTime(getDurationFromSeconds(currentTime));
-      }
-    },
-    [hlsPlayer],
-  );
-  useEffect(() => {
-    const timeupdateHandler = (currentTime: number) => {
-      updateTime(currentTime);
-    };
-    if (hlsPlayer) {
-      hlsPlayer.on(HMSHLSPlayerEvents.CURRENT_TIME, timeupdateHandler);
-      const videoEl = hlsPlayer?.getVideoElement();
-      updateTime(videoEl.currentTime);
-    }
-    return function cleanup() {
-      hlsPlayer?.off(HMSHLSPlayerEvents.CURRENT_TIME, timeupdateHandler);
-    };
-  }, [hlsPlayer, updateTime]);
-
-  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.tsx

@@ -1,70 +0,0 @@
-import React, { useState } from 'react';
-import { VolumeOneIcon, VolumeTwoIcon, VolumeZeroIcon } from '@100mslive/react-icons';
-import { Flex, Slider } from '../../..';
-import { useHMSPlayerContext } from './PlayerContext';
-
-export const VolumeControl = () => {
-  const { hlsPlayer } = useHMSPlayerContext();
-  const [volume, setVolume] = useState(hlsPlayer?.volume ?? 100);
-  const [showSlider, setShowSlider] = useState(false);
-
-  return (
-    <Flex
-      align="center"
-      css={{ color: '$on_surface_high' }}
-      onMouseOver={event => {
-        event.stopPropagation();
-        setShowSlider(true);
-      }}
-      onMouseLeave={event => {
-        event.stopPropagation();
-        setShowSlider(false);
-      }}
-    >
-      <VolumeIcon
-        volume={volume}
-        onClick={() => {
-          if (volume > 0) {
-            setVolume(0);
-            hlsPlayer?.setVolume(0);
-          } else {
-            setVolume(100);
-            hlsPlayer?.setVolume(100);
-          }
-        }}
-      />
-      <Slider
-        css={{
-          mx: '$4',
-          w: '$20',
-          cursor: 'pointer',
-          '@sm': { w: '$14' },
-          '@xs': { w: '$14' },
-          opacity: showSlider ? '1' : '0',
-          display: showSlider ? '' : 'none',
-          transition: `all .2s ease .5s`,
-        }}
-        min={0}
-        max={100}
-        step={1}
-        value={[volume]}
-        onValueChange={volume => {
-          hlsPlayer?.setVolume(volume[0]);
-          setVolume(volume[0]);
-        }}
-        thumbStyles={{ w: '$6', h: '$6' }}
-      />
-    </Flex>
-  );
-};
-
-const VolumeIcon = ({ volume, onClick }: { volume: number; onClick: () => void }) => {
-  if (volume === 0) {
-    return <VolumeZeroIcon style={{ cursor: 'pointer', transition: 'color 0.3s' }} onClick={onClick} />;
-  }
-  return volume < 50 ? (
-    <VolumeOneIcon style={{ cursor: 'pointer', transition: 'color 0.3s' }} onClick={onClick} />
-  ) : (
-    <VolumeTwoIcon style={{ cursor: 'pointer', transition: 'color 0.3s' }} onClick={onClick} />
-  );
-};

package/src/Prebuilt/components/HMSVideo/index.ts

@@ -1,24 +0,0 @@
-// @ts-ignore
-import { LeftControls, RightControls, VideoControls } from './Controls';
-// @ts-ignore
-import { HMSVideo } from './HMSVideo';
-import { PlayPauseSeekControls, PlayPauseSeekOverlayControls } from './PlayPauseSeekControls';
-import { VideoProgress } from './VideoProgress';
-import { VideoTime } from './VideoTime';
-import { VolumeControl } from './VolumeControl';
-
-export const HMSVideoPlayer = {
-  Root: HMSVideo,
-  Progress: VideoProgress,
-  Duration: VideoTime,
-  Volume: VolumeControl,
-  Controls: {
-    Root: VideoControls,
-    Left: LeftControls,
-    Right: RightControls,
-  },
-  PlayPauseSeekControls: {
-    Overlay: PlayPauseSeekOverlayControls,
-    Button: PlayPauseSeekControls,
-  },
-};

package/src/Prebuilt/components/HMSVideo/utils.ts

@@ -1,37 +0,0 @@
-export function getPercentage(a: number, b: number) {
-  return (a / b) * 100;
-}
-
-/**
- * Take a time in seconds and return its equivalent time in hh:mm:ss format
- * @param {number} timeInSeconds if given as floating point value, it is floored.
- *
- * @returns a string representing timeInSeconds in HH:MM:SS format.
- */
-export function getDurationFromSeconds(timeInSeconds: number) {
-  let time = Math.floor(timeInSeconds);
-  const hours = Math.floor(time / 3600);
-  time = time - hours * 3600;
-  const minutes = Math.floor(time / 60);
-  const seconds = Math.floor(time - minutes * 60);
-
-  const prefixedMinutes = `${minutes < 10 ? `0${minutes}` : minutes}`;
-  const prefixedSeconds = `${seconds < 10 ? `0${seconds}` : seconds}`;
-
-  let videoTimeStr = `${prefixedMinutes}:${prefixedSeconds}`;
-  if (hours) {
-    const prefixedHours = `${hours < 10 ? `0${hours}` : hours}`;
-    videoTimeStr = `${prefixedHours}:${prefixedMinutes}:${prefixedSeconds}`;
-  }
-  return videoTimeStr;
-}
-
-export function getDuration(videoEl: HTMLVideoElement): number {
-  if (isFinite(videoEl.duration)) {
-    return videoEl.duration;
-  }
-  if (videoEl.seekable.length > 0) {
-    return videoEl.seekable.end(0);
-  }
-  return 0;
-}