@100mslive/roomkit-react 0.3.14-alpha.11 → 0.3.14-alpha.12

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

package/src/Prebuilt/components/Polls/CreatePollQuiz/Timer.jsx

@@ -1,71 +0,0 @@
-// @ts-check
-import React, { useRef, useState } from 'react';
-import { Dropdown, Flex, Switch, Text } from '../../../../';
-import { DialogDropdownTrigger } from '../../../primitives/DropdownTrigger';
-import { useDropdownSelection } from '../../hooks/useDropdownSelection';
-
-const timerSettings = {
-  10: '10 secs',
-  15: '15 secs',
-  20: '20 secs',
-  25: '25 secs',
-  30: '30 secs',
-  60: '1 min',
-  120: '2 mins',
-  300: '5 mins',
-};
-
-export const Timer = ({ timer, setTimer, showTimerDropDown, setShowTimerDropDown }) => {
-  const selectionBg = useDropdownSelection();
-  const [timerDropdownToggle, setTimerDropdownToggle] = useState(false);
-  const timerDropdownRef = useRef();
-
-  return (
-    <Flex justify="between" align="center" css={{ mt: '$10' }}>
-      <Flex align="center">
-        <Switch checked={showTimerDropDown} onCheckedChange={setShowTimerDropDown} css={{ mr: '$6' }} />
-        <Text variant="body2" css={{ c: '$on_surface_medium' }}>
-          Timer
-        </Text>
-      </Flex>
-      <Flex align="center">
-        {showTimerDropDown ? (
-          <Dropdown.Root open={timerDropdownToggle} onOpenChange={setTimerDropdownToggle}>
-            <DialogDropdownTrigger
-              ref={timerDropdownRef}
-              title={timerSettings[timer]}
-              open={timerDropdownToggle}
-              titleCss={{ c: '$on_surface_high', ml: '$md' }}
-            />
-            <Dropdown.Portal>
-              <Dropdown.Content
-                align="start"
-                sideOffset={8}
-                css={{
-                  w: timerDropdownRef.current?.clientWidth,
-                  zIndex: 1000,
-                }}
-              >
-                {Object.keys(timerSettings).map(value => {
-                  const val = parseInt(value);
-                  return (
-                    <Dropdown.Item
-                      key={value}
-                      onSelect={() => setTimer(val)}
-                      css={{
-                        px: '$9',
-                        bg: timer === val ? selectionBg : undefined,
-                      }}
-                    >
-                      {timerSettings[val]}
-                    </Dropdown.Item>
-                  );
-                })}
-              </Dropdown.Content>
-            </Dropdown.Portal>
-          </Dropdown.Root>
-        ) : null}
-      </Flex>
-    </Flex>
-  );
-};

package/src/Prebuilt/components/Polls/common/VoterList.tsx

@@ -1,22 +0,0 @@
-import React from 'react';
-import { Avatar, Flex, Text } from '../../../../';
-
-export const VoterList = ({ voters }: { voters: string[] }) => {
-  return voters.map((voter, index) => (
-    <Flex align="center" key={`${voter}-${index}`} css={{ gap: '$4', py: '$2' }}>
-      <Avatar
-        name={voter}
-        css={{
-          position: 'relative',
-          transform: 'unset',
-          fontSize: '$tiny',
-          size: '$9',
-          p: '$4',
-        }}
-      />
-      <Text variant="xs" css={{ color: '$on_surface_medium', fontWeight: '$semiBold' }}>
-        {voter}
-      </Text>
-    </Flex>
-  ));
-};

package/src/Prebuilt/components/ScreenshareHintModal.jsx

@@ -1,37 +0,0 @@
-import React from 'react';
-import { useHMSActions } from '@100mslive/react-sdk';
-import { Button } from '../../Button';
-import { Dialog } from '../../Modal';
-import { DialogContent, DialogRow } from '../primitives/DialogContent';
-
-export const ScreenShareHintModal = ({ onClose }) => {
-  const hmsActions = useHMSActions();
-  return (
-    <Dialog.Root defaultOpen onOpenChange={value => !value && onClose()}>
-      <DialogContent title="AudioOnly Screenshare">
-        <img
-          src="https://images.app.100ms.live/share-audio.png"
-          alt="AudioOnly Screenshare instructions"
-          width="100%"
-        />
-        <DialogRow justify="end">
-          <Button
-            variant="primary"
-            onClick={() => {
-              hmsActions
-                .setScreenShareEnabled(true, {
-                  audioOnly: true,
-                  displaySurface: 'browser',
-                })
-                .catch(console.error);
-              onClose();
-            }}
-            data-testid="audio_screenshare_continue"
-          >
-            Continue
-          </Button>
-        </DialogRow>
-      </DialogContent>
-    </Dialog.Root>
-  );
-};