@100mslive/roomkit-react 0.3.14 → 0.3.15-alpha.1

package/src/Diagnostics/hms.ts

@@ -1,9 +0,0 @@
-// @ts-check
-import { HMSReactiveStore } from '@100mslive/hms-video-store';
-
-const hms = new HMSReactiveStore();
-export const hmsStore = hms.getStore();
-export const hmsActions = hms.getActions();
-export const hmsNotifications = hms.getNotifications();
-export const hmsStats = hms.getStats();
-export const hmsDiagnostics = hms.getDiagnosticsSDK();

package/src/Prebuilt/common/roles.js

@@ -1,4 +0,0 @@
-export const ROLES = {
-  TEACHER: 'teacher',
-  STUDENT: 'student',
-};

package/src/Prebuilt/components/AppData/useAppConfig.js

@@ -1,7 +0,0 @@
-import { selectAppDataByPath, useHMSStore } from '@100mslive/react-sdk';
-import { APP_DATA } from '../../common/constants';
-
-export const useAppConfig = (...path) => {
-  const appConfig = useHMSStore(selectAppDataByPath(APP_DATA.appConfig, ...path));
-  return appConfig;
-};

package/src/Prebuilt/components/HMSVideo/PlayButton.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 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/Header/AmbientMusic.jsx

@@ -1,88 +0,0 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { MusicIcon } from '@100mslive/react-icons';
-import { IconButton, Tooltip } from '../../../';
-import { useSetUiSettings } from '../AppData/useUISettings';
-import { useWhenAloneInRoom } from '../../common/hooks';
-import { UI_SETTINGS } from '../../common/constants';
-
-const ambientMusicURL = process.env.REACT_APP_AMBIENT_MUSIC;
-/**
- * @type HTMLAudioElement
- */
-let ambientAudio = null;
-if (ambientMusicURL) {
-  try {
-    ambientAudio = new Audio(ambientMusicURL);
-  } catch (err) {
-    console.error(err);
-  }
-}
-
-/**
- *
- * @param {number} threshold the threshold after which the music is played(from the starting to be alone in the room)
- * @returns {Object}
- * ready: boolean - the threshold has passed and the music can be played,
- *
- * playing: boolean - flag to denote whether music is playing,
- *
- * toggleAmbientMusic - function to play/pause the music
- */
-const useAmbientMusic = (threshold = 5 * 1000) => {
-  const audioRef = useRef(ambientAudio);
-  const [userHasEnabled, setEnableAmbientMusic] = useSetUiSettings(UI_SETTINGS.enableAmbientMusic); // user settings
-  const [playing, setPlaying] = useState(false);
-  const { alone: aloneRightNow, aloneForLong } = useWhenAloneInRoom(threshold);
-  // play if user has enabled the setting and been alone for some time
-  const shouldMusicBePlayed = !playing && userHasEnabled && aloneForLong;
-  // pause immediately if user has disabled the setting or not alone anymore
-  const shouldMusicBePaused = playing && (!userHasEnabled || !aloneRightNow);
-
-  useEffect(() => {
-    if (shouldMusicBePlayed && audioRef.current) {
-      audioRef.current.volume = 0.2;
-      audioRef.current.loop = true;
-      audioRef.current.play().catch(err => console.error('Unable to play Ambient Music', err));
-      setPlaying(true);
-    }
-  }, [shouldMusicBePlayed]);
-
-  useEffect(() => {
-    if (shouldMusicBePaused) {
-      audioRef.current.pause();
-      setPlaying(false);
-    }
-  }, [shouldMusicBePaused]);
-
-  useEffect(() => {
-    const ref = audioRef.current;
-    // Stop on leave
-    return () => {
-      if (ref) {
-        ref.pause();
-      }
-    };
-  }, []);
-
-  const toggleAmbientMusic = useCallback(
-    () => setEnableAmbientMusic(!playing), // save user settings
-    [playing, setEnableAmbientMusic],
-  );
-
-  return { ready: aloneForLong, playing, toggleAmbientMusic };
-};
-
-export const AmbientMusic = () => {
-  const { ready, playing, toggleAmbientMusic } = useAmbientMusic();
-  if (!ambientAudio || !ready) {
-    return null;
-  }
-
-  return (
-    <Tooltip title={playing ? `Disable Ambient Music` : `Play Ambient Music`} key="ambient-music">
-      <IconButton css={{ mx: '$4' }} onClick={toggleAmbientMusic} active={!playing}>
-        <MusicIcon />
-      </IconButton>
-    </Tooltip>
-  );
-};

package/src/Prebuilt/components/Image.jsx

@@ -1,7 +0,0 @@
-import { styled } from '../../Theme';
-
-export const Image = styled('img', {
-  width: '100%',
-  height: 'auto',
-  r: '$3',
-});

package/src/Prebuilt/components/MetaActions.jsx

@@ -1,37 +0,0 @@
-import React from 'react';
-import { selectIsConnectedToRoom, useHMSStore } from '@100mslive/react-sdk';
-import { BrbIcon, HandIcon } from '@100mslive/react-icons';
-import { Flex } from '../../Layout';
-import { Tooltip } from '../../Tooltip';
-import IconButton from '../IconButton';
-import { useMyMetadata } from './hooks/useMetadata';
-
-const MetaActions = ({ isMobile = false, compact = false }) => {
-  const isConnected = useHMSStore(selectIsConnectedToRoom);
-  const { isHandRaised, isBRBOn, toggleHandRaise, toggleBRB } = useMyMetadata();
-
-  if (!isConnected) {
-    return null;
-  }
-
-  return (
-    <Flex align="center" css={{ gap: compact ? '$4' : '$8' }}>
-      <Tooltip title={`${!isHandRaised ? 'Raise' : 'Unraise'} hand`}>
-        <IconButton
-          onClick={toggleHandRaise}
-          active={!isHandRaised}
-          data-testid={isMobile ? 'raise_hand_btn_mobile' : 'raise_hand_btn'}
-        >
-          <HandIcon />
-        </IconButton>
-      </Tooltip>
-      <Tooltip title={isBRBOn ? `I'm back` : `I'll be right back`}>
-        <IconButton onClick={toggleBRB} active={!isBRBOn} data-testid="brb_btn">
-          <BrbIcon />
-        </IconButton>
-      </Tooltip>
-    </Flex>
-  );
-};
-
-export default MetaActions;

package/src/Prebuilt/components/Playlist/Playlist.jsx

@@ -1,124 +0,0 @@
-import React, { Fragment, useState } from 'react';
-import { HMSPlaylistType, selectIsAllowedToPublish, useHMSStore } from '@100mslive/react-sdk';
-import { AudioPlayerIcon, CrossIcon, VideoPlayerIcon } from '@100mslive/react-icons';
-import { Box, Dropdown, Flex, Text, Tooltip } from '../../../';
-import IconButton from '../../IconButton';
-import { AudioPlaylistControls } from './PlaylistControls';
-import { PlaylistItem } from './PlaylistItem';
-import { usePlaylist } from '../hooks/usePlaylist';
-
-const BrowseAndPlayFromLocal = ({ type, actions }) => {
-  return (
-    <Fragment>
-      <Text as="label" htmlFor={`${type}PlaylistBrowse`} variant="sm" css={{ cursor: 'pointer', mr: '$2' }}>
-        Browse
-      </Text>
-      <input
-        type="file"
-        id={`${type}PlaylistBrowse`}
-        accept={type === HMSPlaylistType.audio ? 'audio/*' : 'video/*'}
-        onChange={e => {
-          const file = e.target.files[0];
-          const id = file.lastModified;
-          actions.setList([
-            {
-              type,
-              id,
-              name: file.name,
-              url: URL.createObjectURL(file),
-            },
-          ]);
-          actions.play(id);
-        }}
-        style={{ display: 'none' }}
-      />
-    </Fragment>
-  );
-};
-
-export const Playlist = ({ type }) => {
-  const isAudioPlaylist = type === HMSPlaylistType.audio;
-  const { active, list: playlist, actions } = usePlaylist(type);
-  const [open, setOpen] = useState(false);
-  const [collapse, setCollapse] = useState(false);
-  const isAllowedToPublish = useHMSStore(selectIsAllowedToPublish);
-  if (!isAllowedToPublish.screen || playlist.length === 0) {
-    return null;
-  }
-
-  return (
-    <Fragment>
-      <Dropdown.Root open={open} onOpenChange={setOpen}>
-        <Dropdown.Trigger asChild data-testid={type === HMSPlaylistType.audio ? 'audio_playlist' : 'video_playlist'}>
-          <IconButton active={!active}>
-            <Tooltip title={isAudioPlaylist ? 'Audio Playlist' : 'Video Playlist'}>
-              <Box>{isAudioPlaylist ? <AudioPlayerIcon /> : <VideoPlayerIcon />}</Box>
-            </Tooltip>
-          </IconButton>
-        </Dropdown.Trigger>
-        <Dropdown.Content
-          sideOffset={5}
-          align="center"
-          css={{
-            maxHeight: 'unset',
-            width: '$60',
-            p: '$0',
-            bg: '$surface_bright',
-            border: '1px solid $border_default',
-          }}
-        >
-          <Flex
-            align="center"
-            css={{
-              p: '$4 $8',
-              borderBottom: '1px solid $border_bright',
-              bg: '$surface_default',
-            }}
-          >
-            <Text variant="md" css={{ flex: '1 1 0' }}>
-              {isAudioPlaylist ? 'Audio Player' : 'Video Playlist'}
-            </Text>
-            <BrowseAndPlayFromLocal type={type} actions={actions} />
-            <IconButton
-              css={{ mr: '-$4' }}
-              onClick={async () => {
-                if (active) {
-                  await actions.stop();
-                }
-                setOpen(false);
-                setCollapse(false);
-              }}
-            >
-              <CrossIcon width={24} height={24} />
-            </IconButton>
-          </Flex>
-          {!collapse && (
-            <Box css={{ maxHeight: '$96', overflowY: 'auto' }}>
-              {playlist.map(playlistItem => {
-                return (
-                  <PlaylistItem
-                    key={playlistItem.id}
-                    {...playlistItem}
-                    onClick={async e => {
-                      e.preventDefault();
-                      try {
-                        await actions.play(playlistItem.id);
-                      } catch (e) {
-                        // error in playlist, stop or play next
-                      }
-                      // Close the dropdown list for videoplaylist
-                      if (!isAudioPlaylist) {
-                        setOpen(false);
-                      }
-                    }}
-                  />
-                );
-              })}
-            </Box>
-          )}
-          {isAudioPlaylist && <AudioPlaylistControls onToggle={() => setCollapse(value => !value)} />}
-        </Dropdown.Content>
-      </Dropdown.Root>
-    </Fragment>
-  );
-};

package/src/Prebuilt/components/Playlist/PlaylistControls.jsx

@@ -1,172 +0,0 @@
-import React from 'react';
-import {
-  HMSPlaylistType,
-  selectAudioPlaylist,
-  selectAudioTrackVolume,
-  selectPeerSharingVideoPlaylist,
-  selectVideoPlaylist,
-  selectVideoPlaylistAudioTrackByPeerID,
-  useHMSActions,
-  useHMSStore,
-} from '@100mslive/react-sdk';
-import { NextIcon, PauseIcon, PlayIcon, PlaylistIcon, PrevIcon, SpeakerIcon } from '@100mslive/react-icons';
-import { Box, Flex, IconButton, Slider, Text } from '../../../';
-import { usePlaylist } from '../hooks/usePlaylist';
-
-const Progress = ({ type, duration }) => {
-  const selectPlaylist = type === HMSPlaylistType.audio ? selectAudioPlaylist : selectVideoPlaylist;
-  const progress = useHMSStore(selectPlaylist.progress);
-  const hmsActions = useHMSActions();
-  const playlistAction = type === HMSPlaylistType.audio ? hmsActions.audioPlaylist : hmsActions.videoPlaylist;
-
-  if (!duration) {
-    return null;
-  }
-
-  return (
-    <Slider
-      step={1}
-      value={[progress]}
-      onValueChange={e => {
-        playlistAction.seekTo(e[0] * 0.01 * duration);
-      }}
-    />
-  );
-};
-
-export const PlaylistActive = ({ type, onToggle }) => {
-  const isAudioPlaylist = type === HMSPlaylistType.audio;
-  const selector = isAudioPlaylist ? selectAudioPlaylist : selectVideoPlaylist;
-  const active = useHMSStore(selector.selectedItem);
-  if (!active) {
-    return null;
-  }
-  return (
-    <Box css={{ mt: '$8' }}>
-      <Flex justify="between" css={{ w: '100%' }}>
-        <Box>
-          <Text variant="md">{active.name}</Text>
-          {active.metadata?.description && <Text variant="xs">{active.metadata?.description}</Text>}
-        </Box>
-        <IconButton onClick={onToggle} css={{ alignSelf: 'center' }} data-testid="playlist_collapse_btn">
-          <PlaylistIcon />
-        </IconButton>
-      </Flex>
-    </Box>
-  );
-};
-
-const Controls = ({ type, css = {} }) => {
-  const { active, hasNext, hasPrevious, actions } = usePlaylist(type);
-  if (!active) {
-    return null;
-  }
-  return (
-    <Flex justify="center" css={css}>
-      <IconButton
-        disabled={!hasPrevious}
-        onClick={() => {
-          actions.playPrevious();
-        }}
-        data-testid="playlist_prev_btn"
-      >
-        <PrevIcon />
-      </IconButton>
-      <IconButton
-        onClick={() => {
-          active.playing ? actions.pause() : actions.play(active.id);
-        }}
-        data-testid="playlist_play_pause_btn"
-      >
-        {active.playing ? <PauseIcon width={32} height={32} /> : <PlayIcon width={32} height={32} />}
-      </IconButton>
-      <IconButton
-        disabled={!hasNext}
-        onClick={() => {
-          actions.playNext();
-        }}
-        data-testid="playlist_next_btn"
-      >
-        <NextIcon />
-      </IconButton>
-    </Flex>
-  );
-};
-
-const VolumeControl = () => {
-  const hmsActions = useHMSActions();
-  const volume = useHMSStore(selectVideoPlaylist.volume);
-  const active = useHMSStore(selectVideoPlaylist.selectedItem);
-  const peerSharingPlaylist = useHMSStore(selectPeerSharingVideoPlaylist);
-  const audioTrack = useHMSStore(selectVideoPlaylistAudioTrackByPeerID(peerSharingPlaylist?.id));
-  const audioTrackVolume = useHMSStore(selectAudioTrackVolume(audioTrack?.id));
-  const sliderVolume = active ? volume : audioTrackVolume;
-
-  return (
-    <Flex align="center" css={{ color: '$on_primary_high' }}>
-      <SpeakerIcon />
-      <Slider
-        css={{ mx: '$4', w: '$20' }}
-        min={0}
-        max={100}
-        step={1}
-        value={[Math.floor(sliderVolume ?? 100)]}
-        onValueChange={e => {
-          const value = e[0];
-          if (active) {
-            hmsActions.videoPlaylist.setVolume(value);
-          } else if (audioTrack) {
-            hmsActions.setVolume(value, audioTrack.id);
-          }
-        }}
-        thumbStyles={{ w: '$6', h: '$6' }}
-      />
-    </Flex>
-  );
-};
-
-export const AudioPlaylistControls = ({ onToggle }) => {
-  const { active } = usePlaylist(HMSPlaylistType.audio);
-  if (!active) {
-    return null;
-  }
-  return (
-    <Box
-      css={{
-        p: '$8',
-        borderTop: '1px solid $border_bright',
-        bg: '$surface_default',
-      }}
-    >
-      <Controls type={HMSPlaylistType.audio} />
-      <Progress type={HMSPlaylistType.audio} duration={active.duration} />
-      <PlaylistActive type={HMSPlaylistType.audio} onToggle={onToggle} />
-    </Box>
-  );
-};
-
-export const VideoPlaylistControls = ({ children }) => {
-  const { active } = usePlaylist(HMSPlaylistType.video);
-
-  return (
-    <Box
-      css={{
-        p: '$8',
-        mt: '-$24',
-        w: '100%',
-        zIndex: 1,
-        '@lg': {
-          mt: 0,
-          p: '$6',
-        },
-      }}
-    >
-      {active && <Progress type={HMSPlaylistType.video} duration={active.duration} />}
-      <Flex align="center" justify="between">
-        <VolumeControl />
-        {active && <Controls css={{ flex: '1 1 0' }} />}
-        {children}
-      </Flex>
-    </Box>
-  );
-};

package/src/Prebuilt/components/Playlist/PlaylistItem.jsx

@@ -1,51 +0,0 @@
-import React from 'react';
-import { Dropdown, Flex, Text } from '../../../';
-
-function formatDuration(duration) {
-  if (!duration) {
-    return '';
-  }
-  let mins = Math.floor(duration / 60);
-  if (mins < 10) {
-    mins = `0${String(mins)}`;
-  }
-  let secs = Math.floor(duration % 60);
-  if (secs < 10) {
-    secs = `0${String(secs)}`;
-  }
-
-  return `${mins}:${secs}`;
-}
-
-export const PlaylistItem = React.memo(({ name, metadata, duration, selected, onClick }) => {
-  return (
-    <Dropdown.Item
-      css={{
-        flexDirection: 'column',
-        alignItems: 'flex-start',
-        h: '$18',
-        p: '$8',
-        '&:hover': {
-          cursor: 'pointer',
-          bg: '$surface_default',
-        },
-        '&:focus-visible': {
-          bg: '$surface_default',
-        },
-      }}
-      onClick={onClick}
-    >
-      <Flex align="center" justify="between" css={{ width: '100%', minHeight: 0 }}>
-        <Text variant="md" css={{ color: selected ? '$primary_default' : '$on_primary_high' }}>
-          {name}
-        </Text>
-        <Text variant="xs">{formatDuration(duration)}</Text>
-      </Flex>
-      {metadata?.description && (
-        <Text variant="xs" css={{ mt: '$4' }}>
-          {metadata?.description}
-        </Text>
-      )}
-    </Dropdown.Item>
-  );
-});

package/src/Prebuilt/components/Playlist/VideoPlayer.jsx

@@ -1,95 +0,0 @@
-import React, { useRef } from 'react';
-import { useFullscreen, useToggle } from 'react-use';
-import screenfull from 'screenfull';
-import {
-  selectVideoPlaylist,
-  selectVideoPlaylistAudioTrackByPeerID,
-  selectVideoPlaylistVideoTrackByPeerID,
-  useHMSActions,
-  useHMSStore,
-} from '@100mslive/react-sdk';
-import { CrossIcon, ExpandIcon, ShrinkIcon } from '@100mslive/react-icons';
-import { Box, Flex, IconButton, Text, Video, VideoTileStats } from '../../../';
-import { VideoPlaylistControls } from './PlaylistControls';
-import { useUISettings } from '../AppData/useUISettings';
-import { UI_SETTINGS } from '../../common/constants';
-
-export const VideoPlayer = React.memo(({ peerId }) => {
-  const videoTrack = useHMSStore(selectVideoPlaylistVideoTrackByPeerID(peerId));
-  const audioTrack = useHMSStore(selectVideoPlaylistAudioTrackByPeerID(peerId));
-  const active = useHMSStore(selectVideoPlaylist.selectedItem);
-  const isAudioOnly = useUISettings(UI_SETTINGS.isAudioOnly);
-  const hmsActions = useHMSActions();
-  const ref = useRef(null);
-  const [show, toggle] = useToggle(false);
-  const isFullscreen = useFullscreen(ref, show, {
-    onClose: () => toggle(false),
-  });
-  const showStatsOnTiles = useUISettings(UI_SETTINGS.showStatsOnTiles);
-
-  return (
-    <Flex direction="column" justify="center" css={{ w: '100%', h: '100%' }} ref={ref}>
-      {active && (
-        <Flex
-          justify="between"
-          align="center"
-          css={{
-            bg: '$surface_default',
-            p: '$2 $2 $2 $6',
-            borderTopLeftRadius: '$1',
-            borderTopRightRadius: '$1',
-          }}
-        >
-          <Text css={{ color: '$on_primary_high' }}>{active.name}</Text>
-          <IconButton
-            css={{
-              color: '$on_primary_high',
-            }}
-            onClick={() => {
-              hmsActions.videoPlaylist.stop();
-            }}
-            data-testid="videoplaylist_cross_btn"
-          >
-            <CrossIcon />
-          </IconButton>
-        </Flex>
-      )}
-      {showStatsOnTiles ? (
-        <Box css={{ '& > div': { top: '$14', left: '$8' } }}>
-          <VideoTileStats
-            audioTrackID={audioTrack?.id}
-            videoTrackID={videoTrack?.id}
-            peerID={peerId}
-            isLocal={active}
-          />
-        </Box>
-      ) : null}
-      <Video
-        trackId={videoTrack?.id}
-        attach={!isAudioOnly}
-        css={{
-          objectFit: 'contain',
-          h: 'auto',
-          r: '$1',
-          borderTopLeftRadius: 0,
-          borderTopRightRadius: 0,
-        }}
-      />
-      <VideoPlaylistControls>
-        {screenfull.enabled && (
-          <IconButton
-            onClick={toggle}
-            css={{
-              color: '$on_primary_high',
-              height: 'max-content',
-              alignSelf: 'center',
-              cursor: 'pointer',
-            }}
-          >
-            {isFullscreen ? <ShrinkIcon /> : <ExpandIcon />}
-          </IconButton>
-        )}
-      </VideoPlaylistControls>
-    </Flex>
-  );
-});