@100mslive/roomkit-react 0.1.0

package/src/Prebuilt/components/FirstPersonDisplay.jsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { Box, Flex } from '../../Layout';
+import { Text } from '../../Text';
+import PlaceholderBg from '../images/first_person.png';
+
+export const FirstPersonDisplay = React.memo(() => {
+  return (
+    <Box
+      css={{
+        position: 'relative',
+        overflow: 'hidden',
+        w: '37.5rem',
+        maxWidth: '80%',
+        h: '100%',
+        r: '$3',
+        m: '0 auto',
+        backgroundImage: `url(${PlaceholderBg})`,
+        backgroundSize: 'cover',
+        backgroundRepeat: 'no-repeat',
+        '@md': {
+          w: '100%',
+          maxWidth: 'unset',
+        },
+      }}
+      data-testid="first_person_img"
+    >
+      <Flex
+        align="center"
+        direction="column"
+        css={{
+          position: 'absolute',
+          w: '100%',
+          top: '33.33%',
+          left: 0,
+          textAlign: 'center',
+        }}
+      >
+        <Text color="white" variant="h4" css={{ '@md': { fontSize: '$md' } }}>
+          Welcome!
+        </Text>
+        <Text color="white" variant="h6" css={{ mt: '$4', '@md': { fontSize: '$sm' } }}>
+          You’re the first one here.
+        </Text>
+        <Text color="white" variant="h6" css={{ mt: '$2', '@md': { fontSize: '$sm' } }}>
+          Sit back and relax till the others join.
+        </Text>
+      </Flex>
+    </Box>
+  );
+});

package/src/Prebuilt/components/Footer/ChatToggle.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { selectUnreadHMSMessagesCount, useHMSStore } from '@100mslive/react-sdk';
+import { ChatIcon, ChatUnreadIcon } from '@100mslive/react-icons';
+import { Tooltip } from '../../../';
+import IconButton from '../../IconButton';
+import { useIsSidepaneTypeOpen, useSidepaneToggle } from '../AppData/useSidepane';
+import { useIsFeatureEnabled } from '../hooks/useFeatures';
+import { FEATURE_LIST, SIDE_PANE_OPTIONS } from '../../common/constants';
+
+export const ChatToggle = () => {
+  const countUnreadMessages = useHMSStore(selectUnreadHMSMessagesCount);
+  const isChatOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.CHAT);
+  const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
+  const isFeatureEnabled = useIsFeatureEnabled(FEATURE_LIST.CHAT);
+
+  if (!isFeatureEnabled) {
+    return;
+  }
+
+  return (
+    <Tooltip key="chat" title={`${isChatOpen ? 'Close' : 'Open'} chat`}>
+      <IconButton onClick={toggleChat} active={!isChatOpen} data-testid="chat_btn">
+        {countUnreadMessages === 0 ? <ChatIcon /> : <ChatUnreadIcon data-testid="chat_unread_btn" />}
+      </IconButton>
+    </Tooltip>
+  );
+};

package/src/Prebuilt/components/Footer/ConferencingFooter.jsx

@@ -0,0 +1,104 @@
+import React, { Fragment, Suspense, useState } from 'react';
+import { useMedia } from 'react-use';
+import { HMSPlaylistType, selectIsAllowedToPublish, useHMSStore, useScreenShare } from '@100mslive/react-sdk';
+import { MusicIcon } from '@100mslive/react-icons';
+import { Playlist } from '../../components/Playlist/Playlist';
+import { config as cssConfig, Flex, Footer as AppFooter, Tooltip } from '../../../';
+import IconButton from '../../IconButton';
+import { AudioVideoToggle } from '../AudioVideoToggle';
+import { EmojiReaction } from '../EmojiReaction';
+import { LeaveRoom } from '../LeaveRoom';
+import MetaActions from '../MetaActions';
+import { MoreSettings } from '../MoreSettings/MoreSettings';
+import { PIP } from '../PIP';
+import { ScreenshareToggle } from '../ScreenShare';
+import { ScreenShareHintModal } from '../ScreenshareHintModal';
+import { ChatToggle } from './ChatToggle';
+import { useIsFeatureEnabled } from '../hooks/useFeatures';
+import { isScreenshareSupported } from '../../common/utils';
+import { FeatureFlags } from '../../services/FeatureFlags';
+import { FEATURE_LIST } from '../../common/constants';
+
+const TranscriptionButton = React.lazy(() => import('../../plugins/transcription'));
+const VirtualBackground = React.lazy(() => import('../../plugins/VirtualBackground/VirtualBackground'));
+
+const ScreenshareAudio = () => {
+  const {
+    amIScreenSharing,
+    screenShareVideoTrackId: video,
+    screenShareAudioTrackId: audio,
+    toggleScreenShare,
+  } = useScreenShare();
+  const isAllowedToPublish = useHMSStore(selectIsAllowedToPublish);
+  const isAudioScreenshare = amIScreenSharing && !video && !!audio;
+  const [showModal, setShowModal] = useState(false);
+  const isFeatureEnabled = useIsFeatureEnabled(FEATURE_LIST.AUDIO_ONLY_SCREENSHARE);
+  if (!isFeatureEnabled || !isAllowedToPublish.screen || !isScreenshareSupported()) {
+    return null;
+  }
+  return (
+    <Fragment>
+      <Tooltip title={`${!isAudioScreenshare ? 'Start' : 'Stop'} audio sharing`} key="shareAudio">
+        <IconButton
+          active={!isAudioScreenshare}
+          onClick={() => {
+            if (amIScreenSharing) {
+              toggleScreenShare();
+            } else {
+              setShowModal(true);
+            }
+          }}
+          data-testid="screenshare_audio"
+        >
+          <MusicIcon />
+        </IconButton>
+      </Tooltip>
+      {showModal && <ScreenShareHintModal onClose={() => setShowModal(false)} />}
+    </Fragment>
+  );
+};
+
+export const ConferencingFooter = () => {
+  const isMobile = useMedia(cssConfig.media.md);
+  return (
+    <AppFooter.Root>
+      <AppFooter.Left>
+        <ScreenshareAudio />
+        <Playlist type={HMSPlaylistType.audio} />
+        <Playlist type={HMSPlaylistType.video} />
+        <Suspense fallback="">
+          <VirtualBackground />
+        </Suspense>
+        {FeatureFlags.enableTranscription ? <TranscriptionButton /> : null}
+        <Flex
+          align="center"
+          css={{
+            display: 'none',
+            '@md': {
+              display: 'flex',
+              gap: '$8',
+            },
+          }}
+        >
+          {isMobile && <EmojiReaction />}
+          <MetaActions isMobile />
+        </Flex>
+      </AppFooter.Left>
+      <AppFooter.Center>
+        <AudioVideoToggle />
+        <ScreenshareToggle />
+        <PIP />
+        <MoreSettings />
+        <Flex align="center" css={{ display: 'none', '@md': { display: 'flex' } }}>
+          <ChatToggle />
+        </Flex>
+        <LeaveRoom />
+      </AppFooter.Center>
+      <AppFooter.Right>
+        {!isMobile && <EmojiReaction />}
+        <MetaActions />
+        <ChatToggle />
+      </AppFooter.Right>
+    </AppFooter.Root>
+  );
+};

package/src/Prebuilt/components/Footer/StreamingFooter.jsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import { Box, Flex, Footer as AppFooter } from '../../../';
+import { AudioVideoToggle } from '../AudioVideoToggle';
+import { EmojiReaction } from '../EmojiReaction';
+import { StreamActions } from '../Header/StreamActions';
+import { LeaveRoom } from '../LeaveRoom';
+import MetaActions from '../MetaActions';
+import { MoreSettings } from '../MoreSettings/MoreSettings';
+import { PIP } from '../PIP';
+import { ScreenshareToggle } from '../ScreenShare';
+import { ChatToggle } from './ChatToggle';
+
+export const StreamingFooter = () => {
+  return (
+    <AppFooter.Root
+      css={{
+        flexWrap: 'nowrap',
+        '@md': {
+          justifyContent: 'center',
+        },
+      }}
+    >
+      <AppFooter.Left
+        css={{
+          '@md': {
+            w: 'unset',
+            p: '0',
+          },
+        }}
+      >
+        <AudioVideoToggle />
+      </AppFooter.Left>
+      <AppFooter.Center
+        css={{
+          '@md': {
+            w: 'unset',
+          },
+        }}
+      >
+        <ScreenshareToggle css={{ '@sm': { display: 'none' } }} />
+        <Box css={{ '@md': { display: 'none' } }}>
+          <PIP />
+        </Box>
+        <Box
+          css={{
+            display: 'none',
+            '@md': {
+              display: 'flex',
+              alignItems: 'center',
+              mx: '$4',
+            },
+          }}
+        >
+          <StreamActions />
+        </Box>
+        <MoreSettings />
+        <Box css={{ '@md': { display: 'none' } }}>
+          <LeaveRoom />
+        </Box>
+        <Flex align="center" css={{ display: 'none', '@md': { display: 'flex' } }}>
+          <ChatToggle />
+        </Flex>
+      </AppFooter.Center>
+      <AppFooter.Right>
+        <EmojiReaction />
+        <MetaActions />
+        <ChatToggle />
+      </AppFooter.Right>
+    </AppFooter.Root>
+  );
+};

package/src/Prebuilt/components/Footer.jsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ConferencingFooter } from './Footer/ConferencingFooter';
+import { StreamingFooter } from './Footer/StreamingFooter';
+import { isStreamingKit } from '../common/utils';
+
+export const Footer = () => {
+  return isStreamingKit() ? <StreamingFooter /> : <ConferencingFooter />;
+};

package/src/Prebuilt/components/FullPageProgress.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Flex } from '../../Layout';
+import { Loading } from '../../Loading';
+
+const FullPageProgress = () => (
+  <Flex justify="center" align="center" css={{ size: '100%' }}>
+    <Loading size={100} />
+  </Flex>
+);
+
+export default FullPageProgress;

package/src/Prebuilt/components/GoLiveButton.jsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { useRecordingStreaming } from '@100mslive/react-sdk';
+import { GoLiveIcon } from '@100mslive/react-icons';
+import { Button } from '../../Button';
+import { Tooltip } from '../../Tooltip';
+import { useIsSidepaneTypeOpen, useSidepaneToggle } from './AppData/useSidepane';
+import { useIsHLSStartedFromUI, useIsRTMPStartedFromUI } from './AppData/useUISettings';
+import { SIDE_PANE_OPTIONS } from './../common/constants';
+
+const GoLiveButton = () => {
+  const isStreamingSidepaneOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.STREAMING);
+  const toggleStreaming = useSidepaneToggle(SIDE_PANE_OPTIONS.STREAMING);
+  const { isStreamingOn, isBrowserRecordingOn } = useRecordingStreaming();
+  const isHLSStartedFromUI = useIsHLSStartedFromUI();
+  const isRTMPStartedFromUI = useIsRTMPStartedFromUI();
+  let tooltipText = 'Start streaming';
+  if (isHLSStartedFromUI || isRTMPStartedFromUI) {
+    if (isHLSStartedFromUI) {
+      tooltipText = 'HLS start in progress';
+    }
+    if (isRTMPStartedFromUI) {
+      tooltipText = 'RTMP start in progress';
+    }
+  }
+  return (
+    <Tooltip title={tooltipText}>
+      <Button
+        data-testid="go_live"
+        variant={isStreamingSidepaneOpen ? 'standard' : 'primary'}
+        onClick={() => {
+          toggleStreaming();
+          window.sessionStorage.setItem('userStartedStream', 'true');
+        }}
+        icon
+        loading={isRTMPStartedFromUI || isHLSStartedFromUI}
+        disabled={isBrowserRecordingOn && !isStreamingOn}
+      >
+        <GoLiveIcon />
+        Go Live
+      </Button>
+    </Tooltip>
+  );
+};
+
+export default GoLiveButton;

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

@@ -0,0 +1,21 @@
+import { Flex, styled } from '../../../';
+
+export const VideoControls = styled(Flex, {
+  justifyContent: 'center',
+  alignItems: 'center',
+  width: '100%',
+  gap: '$2',
+});
+
+export const LeftControls = styled(Flex, {
+  justifyContent: 'flex-start',
+  alignItems: 'center',
+  width: '100%',
+  gap: '$2',
+});
+export const RightControls = styled(Flex, {
+  justifyContent: 'flex-end',
+  alignItems: 'center',
+  width: '100%',
+  gap: '$2',
+});

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

@@ -0,0 +1,18 @@
+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/HLSAutoplayBlockedPrompt.jsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Button, Dialog, Text } from '../../../';
+import { DialogContent, DialogRow } from '../../primitives/DialogContent';
+
+export function HLSAutoplayBlockedPrompt({ open, unblockAutoPlay }) {
+  return (
+    <Dialog.Root
+      open={open}
+      onOpenChange={value => {
+        if (!value) {
+          unblockAutoPlay();
+        }
+      }}
+    >
+      <DialogContent title="Attention" closeable={false}>
+        <DialogRow>
+          <Text variant="md">
+            The browser wants us to get a confirmation for playing the HLS Stream. Please click "play stream" to
+            proceed.
+          </Text>
+        </DialogRow>
+        <DialogRow justify="end">
+          <Button
+            variant="primary"
+            onClick={() => {
+              unblockAutoPlay();
+            }}
+          >
+            Play stream
+          </Button>
+        </DialogRow>
+      </DialogContent>
+    </Dialog.Root>
+  );
+}

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

@@ -0,0 +1,82 @@
+import React, { useState } from 'react';
+import { CheckCircleIcon, SettingsIcon } from '@100mslive/react-icons';
+import { Box, Dropdown, Flex, Text, Tooltip } from '../../../';
+
+export function HLSQualitySelector({ layers, onQualityChange, selection, isAuto }) {
+  const [qualityDropDownOpen, setQualityDropDownOpen] = useState(false);
+
+  return (
+    <Dropdown.Root open={qualityDropDownOpen} onOpenChange={value => setQualityDropDownOpen(value)}>
+      <Dropdown.Trigger asChild data-testid="quality_selector">
+        <Flex
+          css={{
+            color: '$textPrimary',
+            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',
+                }}
+              >
+                <SettingsIcon />
+              </Box>
+              <Text
+                variant={{
+                  '@md': 'sm',
+                  '@sm': 'xs',
+                  '@xs': 'tiny',
+                }}
+                css={{ display: 'flex', alignItems: 'center', ml: '$2' }}
+              >
+                {isAuto && (
+                  <>
+                    Auto
+                    <Box
+                      css={{
+                        mx: '$2',
+                        w: '$2',
+                        h: '$2',
+                        background: '$textPrimary',
+                        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: '$96', w: '$64' }}>
+          <Dropdown.Item onClick={() => onQualityChange({ height: 'auto' })} key="auto">
+            <Text css={{ flex: '1 1 0' }}>Automatic</Text>
+            {isAuto && <CheckCircleIcon />}
+          </Dropdown.Item>
+          {layers.map(layer => {
+            return (
+              <Dropdown.Item onClick={() => onQualityChange(layer)} key={layer.width}>
+                <Text css={{ flex: '1 1 0' }}>{getQualityText(layer)}</Text>
+                {!isAuto && layer.width === selection?.width && layer.height === selection?.height && (
+                  <CheckCircleIcon />
+                )}
+              </Dropdown.Item>
+            );
+          })}
+        </Dropdown.Content>
+      )}
+    </Dropdown.Root>
+  );
+}
+
+const getQualityText = layer =>
+  `${Math.min(layer.height, layer.width)}p (${(Number(layer.bitrate / 1000) / 1000).toFixed(2)} Mbps)`;

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

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

@@ -0,0 +1,11 @@
+import React, { forwardRef } from 'react';
+import { Flex } from '../../../';
+
+export const HMSVideo = forwardRef(({ children }, videoRef) => {
+  return (
+    <Flex data-testid="hms-video" css={{ size: '100%' }} direction="column">
+      <video style={{ flex: '1 1 0', margin: '0 auto', minHeight: '0' }} ref={videoRef} playsInline />
+      {children}
+    </Flex>
+  );
+});

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import { PauseIcon, PlayIcon } from '@100mslive/react-icons';
+import { IconButton, Tooltip } from '../../../';
+
+export const PlayButton = ({ onClick, isPaused }) => {
+  return (
+    <Tooltip title={`${isPaused ? 'Play' : 'Pause'}`} side="top">
+      <IconButton onClick={onClick} data-testid="play_pause_btn">
+        {isPaused ? <PlayIcon width={32} height={32} /> : <PauseIcon width={32} height={32} />}
+      </IconButton>
+    </Tooltip>
+  );
+};

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

@@ -0,0 +1,77 @@
+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={{ paddingLeft: '$8', paddingRight: '$8', cursor: 'pointer' }}
+      onClick={onProgressChangeHandler}
+    >
+      <Box
+        id="video-actual"
+        css={{
+          display: 'inline',
+          width: `${videoProgress}%`,
+          background: '$primaryDefault',
+          height: '0.3rem',
+        }}
+      />
+      <Box
+        id="video-buffer"
+        css={{
+          width: `${bufferProgress - videoProgress}%`,
+          background: '$primaryDark',
+          height: '0.3rem',
+        }}
+      />
+      <Box
+        id="video-rest"
+        css={{
+          width: `${100 - bufferProgress}%`,
+          background: '$grayLight',
+          height: '0.3rem',
+        }}
+      />
+    </Flex>
+  ) : null;
+};

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

@@ -0,0 +1,31 @@
+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',
+      }}
+      variant={{
+        '@sm': 'xs',
+      }}
+    >{`${videoTime}`}</Text>
+  ) : null;
+};