@100mslive/roomkit-react 0.2.8-alpha.3 → 0.2.8-alpha.5

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

@@ -1,18 +0,0 @@
-import React from 'react';
-import { Flex, IconButton, Tooltip } from '../../../';
-
-export const FullScreenButton = ({ isFullScreen, icon, onToggle }) => {
-  return (
-    <Tooltip title={`${isFullScreen ? 'Exit' : 'Go'} fullscreen`} side="top">
-      <IconButton
-        variant="standard"
-        css={{ margin: '0px' }}
-        onClick={onToggle}
-        key="fullscreen_btn"
-        data-testid="fullscreen_btn"
-      >
-        <Flex>{icon}</Flex>
-      </IconButton>
-    </Tooltip>
-  );
-};

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

@@ -1,127 +0,0 @@
-import React from 'react';
-import { CheckIcon, SettingsIcon } from '@100mslive/react-icons';
-import { Box, Dropdown, Flex, Text, Tooltip } from '../../../';
-
-export function HLSQualitySelector({ open, onOpen, layers, onQualityChange, selection, isAuto }) {
-  return (
-    <Dropdown.Root open={open} onOpenChange={value => onOpen(value)}>
-      <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, selection.height)}p
-              </Text>
-            </Flex>
-          </Tooltip>
-        </Flex>
-      </Dropdown.Trigger>
-      {layers.length > 0 && (
-        <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.Root>
-  );
-}
-
-const getQualityText = layer => `${Math.min(layer.height, layer.width)}p `;
-const getBitrateText = layer => `(${(Number(layer.bitrate / 1000) / 1000).toFixed(2)} Mbps)`;

package/src/Prebuilt/components/HMSVideo/HMSVIdeoUtils.js

@@ -1,27 +0,0 @@
-export function getPercentage(a, b) {
-  return (a / b) * 100;
-}
-
-/**
- *
- * @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"
- */
-export function getDurationFromSeconds(timeInSeconds) {
-  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;
-}

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

@@ -1,76 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { Box, Flex } from '../../../';
-import { getPercentage } from './HMSVIdeoUtils';
-
-export const VideoProgress = ({ onValueChange, hlsPlayer }) => {
-  const [videoProgress, setVideoProgress] = useState(0);
-  const [bufferProgress, setBufferProgress] = useState(0);
-  const progressRootRef = useRef();
-
-  useEffect(() => {
-    const videoEl = hlsPlayer.getVideoElement();
-    const timeupdateHandler = () => {
-      const videoProgress = Math.floor(getPercentage(videoEl.currentTime, videoEl.duration));
-      let bufferProgress = 0;
-      if (videoEl.buffered.length > 0) {
-        bufferProgress = Math.floor(getPercentage(videoEl.buffered?.end(0), videoEl.duration));
-      }
-
-      setVideoProgress(isNaN(videoProgress) ? 0 : videoProgress);
-      setBufferProgress(isNaN(bufferProgress) ? 0 : bufferProgress);
-    };
-    if (videoEl) {
-      videoEl.addEventListener('timeupdate', timeupdateHandler);
-    }
-    return function cleanup() {
-      if (videoEl) {
-        videoEl.removeEventListener('timeupdate', timeupdateHandler);
-      }
-    };
-  }, [hlsPlayer]);
-
-  const onProgressChangeHandler = e => {
-    const userClickedX = e.clientX - progressRootRef.current.offsetLeft;
-    const progressBarWidth = progressRootRef.current.offsetWidth;
-    const progress = Math.floor(getPercentage(userClickedX, progressBarWidth));
-    const videoEl = hlsPlayer.getVideoElement();
-    const currentTime = (progress * videoEl.duration) / 100;
-
-    if (onValueChange) {
-      onValueChange(currentTime);
-    }
-  };
-
-  return hlsPlayer.getVideoElement() ? (
-    <Flex
-      ref={progressRootRef}
-      css={{ cursor: 'pointer', h: '$2', alignSelf: 'stretch' }}
-      onClick={onProgressChangeHandler}
-    >
-      <Box
-        id="video-actual"
-        css={{
-          display: 'inline',
-          width: `${videoProgress}%`,
-          background: '$primary_default',
-        }}
-      />
-      <Box
-        id="video-buffer"
-        css={{
-          width: `${bufferProgress - videoProgress}%`,
-          background: '$on_surface_high',
-          opacity: '25%',
-        }}
-      />
-      <Box
-        id="video-rest"
-        css={{
-          width: `${100 - bufferProgress}%`,
-          background: '$on_surface_high',
-          opacity: '10%',
-        }}
-      />
-    </Flex>
-  ) : null;
-};

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

@@ -1,33 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { HMSHLSPlayerEvents } from '@100mslive/hls-player';
-import { Text } from '../../../';
-import { getDurationFromSeconds } from './HMSVIdeoUtils';
-
-export const VideoTime = ({ hlsPlayer }) => {
-  const [videoTime, setVideoTime] = useState('');
-
-  useEffect(() => {
-    const timeupdateHandler = currentTime => setVideoTime(getDurationFromSeconds(currentTime));
-    if (hlsPlayer) {
-      hlsPlayer.on(HMSHLSPlayerEvents.CURRENT_TIME, timeupdateHandler);
-    }
-    return function cleanup() {
-      if (hlsPlayer) {
-        hlsPlayer.off(HMSHLSPlayerEvents.CURRENT_TIME, timeupdateHandler);
-      }
-    };
-  }, [hlsPlayer]);
-
-  return hlsPlayer ? (
-    <Text
-      css={{
-        minWidth: '$16',
-        c: '$on_surface_medium',
-        display: 'flex',
-        justifyContent: 'center',
-      }}
-    >
-      {videoTime}
-    </Text>
-  ) : null;
-};