@100mslive/roomkit-react 0.2.8-alpha.1 → 0.2.8-alpha.11

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,12 +37,16 @@ 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
+        disablePictureInPicture
       />
       {children}
     </Flex>

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,
 };

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

@@ -1,14 +1,14 @@
-export function getPercentage(a, b) {
+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.
  *
- * @param {number} timeInSeconds - if given as floating point value, it is floored.
- * @returns  a string representing timeInSeconds in HH:MM:SS format.
- * (e.g) getDurationFromSeconds(3910) returns "1:05:10"
+ * @returns a string representing timeInSeconds in HH:MM:SS format.
  */
-export function getDurationFromSeconds(timeInSeconds) {
+export function getDurationFromSeconds(timeInSeconds: number) {
   let time = Math.floor(timeInSeconds);
   const hours = Math.floor(time / 3600);
   time = time - hours * 3600;

package/src/Prebuilt/components/Header/StreamActions.tsx

@@ -42,7 +42,7 @@ export const LiveStatus = () => {
         setLiveTime(Date.now() - timeStamp.getTime());
       }
     }, 1000);
-  }, [hlsState?.running, hlsState?.variants]);
+  }, [hlsState?.running, hlsState?.variants, screenType]);
 
   useEffect(() => {
     if (hlsState?.running) {

package/src/Prebuilt/components/IconButtonWithOptions/IconButtonWithOptions.tsx

@@ -24,7 +24,7 @@ const IconSection = styled(IconButton, {
   h: '$14',
   p: '$4',
   r: '$1',
-  bg: '$transparent',
+  bg: 'transparent',
   borderTopRightRadius: 0,
   borderColor: '$border_bright',
   borderBottomRightRadius: 0,

package/src/Prebuilt/components/Leave/DesktopLeaveRoom.tsx

@@ -17,10 +17,12 @@ export const DesktopLeaveRoom = ({
   leaveRoom,
   screenType,
   endRoom,
+  container,
 }: {
   leaveRoom: (options?: { endStream?: boolean }) => Promise<void>;
   screenType: keyof ConferencingScreen;
   endRoom: () => Promise<void>;
+  container?: HTMLElement;
 }) => {
   const [open, setOpen] = useState(false);
   const [showLeaveRoomAlert, setShowLeaveRoomAlert] = useState(false);
@@ -69,54 +71,56 @@ export const DesktopLeaveRoom = ({
                 <VerticalMenuIcon />
               </MenuTriggerButton>
             </Dropdown.Trigger>
-            <Dropdown.Content css={{ p: 0, w: '$100' }} alignOffset={-50} sideOffset={10}>
-              <Dropdown.Item
-                css={{
-                  bg: '$surface_dim',
-                  color: '$on_surface_medium',
-                  '&:hover': { bg: '$surface_default', color: '$on_surface_high' },
-                  p: '0',
-                }}
-                data-testid="just_leave_btn"
-              >
-                <LeaveCard
-                  title={showStream ? 'Leave Stream' : 'Leave Session'}
-                  subtitle={`Others will continue after you leave. You can join the ${
-                    showStream ? 'stream' : 'session'
-                  } again.`}
-                  bg=""
-                  titleColor="$on_surface_high"
-                  icon={<ExitIcon height={24} width={24} style={{ transform: 'rotate(180deg)' }} />}
-                  onClick={async () => await leaveRoom()}
-                  css={{ p: '$8 $4' }}
-                />
-              </Dropdown.Item>
+            <Dropdown.Portal container={container}>
+              <Dropdown.Content css={{ p: 0, w: '$100' }} alignOffset={-50} sideOffset={10}>
+                <Dropdown.Item
+                  css={{
+                    bg: '$surface_dim',
+                    color: '$on_surface_medium',
+                    '&:hover': { bg: '$surface_default', color: '$on_surface_high' },
+                    p: '0',
+                  }}
+                  data-testid="just_leave_btn"
+                >
+                  <LeaveCard
+                    title={showStream ? 'Leave Stream' : 'Leave Session'}
+                    subtitle={`Others will continue after you leave. You can join the ${
+                      showStream ? 'stream' : 'session'
+                    } again.`}
+                    bg=""
+                    titleColor="$on_surface_high"
+                    icon={<ExitIcon height={24} width={24} style={{ transform: 'rotate(180deg)' }} />}
+                    onClick={async () => await leaveRoom()}
+                    css={{ p: '$8 $4' }}
+                  />
+                </Dropdown.Item>
 
-              <Dropdown.Item
-                css={{
-                  bg: '$alert_error_dim',
-                  color: '$alert_error_bright',
-                  '&:hover': { bg: '$alert_error_dim', color: '$alert_error_brighter' },
-                  p: '0',
-                }}
-                data-testid="end_room_btn"
-              >
-                <LeaveCard
-                  title={showStream ? 'End Stream' : 'End Session'}
-                  subtitle={`The ${
-                    showStream ? 'stream' : 'session'
-                  } will end for everyone. You can't undo this action.`}
-                  bg=""
-                  titleColor="$alert_error_brighter"
-                  icon={<StopIcon height={24} width={24} />}
-                  onClick={() => {
-                    setOpen(false);
-                    setShowEndStreamAlert(true);
+                <Dropdown.Item
+                  css={{
+                    bg: '$alert_error_dim',
+                    color: '$alert_error_bright',
+                    '&:hover': { bg: '$alert_error_dim', color: '$alert_error_brighter' },
+                    p: '0',
                   }}
-                  css={{ p: '$8 $4' }}
-                />
-              </Dropdown.Item>
-            </Dropdown.Content>
+                  data-testid="end_room_btn"
+                >
+                  <LeaveCard
+                    title={showStream ? 'End Stream' : 'End Session'}
+                    subtitle={`The ${
+                      showStream ? 'stream' : 'session'
+                    } will end for everyone. You can't undo this action.`}
+                    bg=""
+                    titleColor="$alert_error_brighter"
+                    icon={<StopIcon height={24} width={24} />}
+                    onClick={() => {
+                      setOpen(false);
+                      setShowEndStreamAlert(true);
+                    }}
+                    css={{ p: '$8 $4' }}
+                  />
+                </Dropdown.Item>
+              </Dropdown.Content>
+            </Dropdown.Portal>
           </Dropdown.Root>
         </Flex>
       ) : (

package/src/Prebuilt/components/Leave/LeaveRoom.tsx

@@ -14,12 +14,18 @@ import {
 } from '@100mslive/react-sdk';
 import { config as cssConfig } from '../../../Theme';
 // @ts-ignore: No implicit Any
-// @ts-ignore: No implicit Any
 import { ToastManager } from '../Toast/ToastManager';
 import { DesktopLeaveRoom } from './DesktopLeaveRoom';
 import { MwebLeaveRoom } from './MwebLeaveRoom';
+import { useLandscapeHLSStream, useMobileHLSStream } from '../../common/hooks';
 
-export const LeaveRoom = ({ screenType }: { screenType: keyof ConferencingScreen }) => {
+export const LeaveRoom = ({
+  screenType,
+  container,
+}: {
+  screenType: keyof ConferencingScreen;
+  container?: HTMLElement;
+}) => {
   const isConnected = useHMSStore(selectIsConnectedToRoom);
   const permissions = useHMSStore(selectPermissions);
   const isMobile = useMedia(cssConfig.media.md);
@@ -33,6 +39,8 @@ export const LeaveRoom = ({ screenType }: { screenType: keyof ConferencingScreen
   );
   const hlsState = useHMSStore(selectHLSState);
   const hmsActions = useHMSActions();
+  const isMobileHLSStream = useMobileHLSStream();
+  const isLandscapeHLSStream = useLandscapeHLSStream();
 
   const stopStream = async () => {
     try {
@@ -61,9 +69,12 @@ export const LeaveRoom = ({ screenType }: { screenType: keyof ConferencingScreen
   if (!permissions || !isConnected) {
     return null;
   }
+  if (isMobileHLSStream || isLandscapeHLSStream) {
+    return <MwebLeaveRoom leaveRoom={leaveRoom} endRoom={endRoom} container={container} />;
+  }
   return isMobile ? (
-    <MwebLeaveRoom leaveRoom={leaveRoom} screenType={screenType} endRoom={endRoom} />
+    <MwebLeaveRoom leaveRoom={leaveRoom} endRoom={endRoom} container={container} />
   ) : (
-    <DesktopLeaveRoom leaveRoom={leaveRoom} screenType={screenType} endRoom={endRoom} />
+    <DesktopLeaveRoom leaveRoom={leaveRoom} screenType={screenType} endRoom={endRoom} container={container} />
   );
 };