@100mslive/roomkit-react 0.1.0

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

@@ -0,0 +1,129 @@
+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 { useIsFeatureEnabled } from '../hooks/useFeatures';
+import { usePlaylist } from '../hooks/usePlaylist';
+import { FEATURE_LIST } from '../../common/constants';
+
+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);
+  const isFeatureEnabled = useIsFeatureEnabled(
+    isAudioPlaylist ? FEATURE_LIST.AUDIO_PLAYLIST : FEATURE_LIST.VIDEO_PLAYLIST,
+  );
+  if (!isAllowedToPublish.screen || playlist.length === 0 || !isFeatureEnabled) {
+    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: '$bgSecondary',
+            border: '1px solid $menuBg',
+          }}
+        >
+          <Flex
+            align="center"
+            css={{
+              p: '$4 $8',
+              borderBottom: '1px solid $borderLight',
+              bg: '$menuBg',
+            }}
+          >
+            <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

@@ -0,0 +1,172 @@
+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: '$white' }}>
+      <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 $borderLight',
+        bg: '$menuBg',
+      }}
+    >
+      <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

@@ -0,0 +1,51 @@
+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: '$menuBg',
+        },
+        '&:focus-visible': {
+          bg: '$menuBg',
+        },
+      }}
+      onClick={onClick}
+    >
+      <Flex align="center" justify="between" css={{ width: '100%', minHeight: 0 }}>
+        <Text variant="md" css={{ color: selected ? '$brandDefault' : '$textPrimary' }}>
+          {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

@@ -0,0 +1,95 @@
+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: '$menuBg',
+            p: '$2 $2 $2 $6',
+            borderTopLeftRadius: '$1',
+            borderTopRightRadius: '$1',
+          }}
+        >
+          <Text css={{ color: '$textPrimary' }}>{active.name}</Text>
+          <IconButton
+            css={{
+              color: '$white',
+            }}
+            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: '$white',
+              height: 'max-content',
+              alignSelf: 'center',
+              cursor: 'pointer',
+            }}
+          >
+            {isFullscreen ? <ShrinkIcon /> : <ExpandIcon />}
+          </IconButton>
+        )}
+      </VideoPlaylistControls>
+    </Flex>
+  );
+});

package/src/Prebuilt/components/PostLeave.jsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import { useParams } from 'react-router-dom';
+import { ExitIcon } from '@100mslive/react-icons';
+import { ToastManager } from './Toast/ToastManager';
+import { Button } from '../../Button';
+import { Box, Flex } from '../../Layout';
+import { Text } from '../../Text';
+import { useHMSPrebuiltContext } from '../AppContext';
+import { Header } from './Header';
+import { useNavigation } from './hooks/useNavigation';
+import { defaultPreviewPreference, UserPreferencesKeys, useUserPreferences } from './hooks/useUserPreferences';
+import { getRoutePrefix } from '../common/utils';
+import { textEllipsis } from '../../utils';
+
+const PostLeave = () => {
+  const navigate = useNavigation();
+  const { showPreview, roomCode } = useHMSPrebuiltContext();
+  const { roomId, role } = useParams();
+  const [previewPreference] = useUserPreferences(UserPreferencesKeys.PREVIEW, defaultPreviewPreference);
+  return (
+    <Flex direction="column" css={{ size: '100%' }}>
+      <Box css={{ h: '$18', '@md': { h: '$17' } }} data-testid="header">
+        <Header />
+      </Box>
+      <Flex
+        justify="center"
+        direction="column"
+        align="center"
+        css={{ bg: '$mainBg', flex: '1 1 0', position: 'relative' }}
+      >
+        <Text variant="h2" css={{ fontWeight: '$semiBold' }}>
+          👋
+        </Text>
+        <Text variant="h4" css={{ color: '$textHighEmp', fontWeight: '$semiBold', mt: '$12' }}>
+          You left the {getRoutePrefix() ? 'stream' : 'room'}
+        </Text>
+        <Text
+          variant="body1"
+          css={{
+            color: '$textMedEmp',
+            mt: '$8',
+            fontWeight: '$regular',
+            textAlign: 'center',
+          }}
+        >
+          Have a nice day
+          {previewPreference.name && (
+            <Box as="span" css={{ ...textEllipsis(100) }}>
+              , {previewPreference.name}
+            </Box>
+          )}
+          !
+        </Text>
+        <Flex css={{ mt: '$14', gap: '$10', alignItems: 'center' }}>
+          <Text variant="body1" css={{ color: '$textMedEmp', fontWeight: '$regular' }}>
+            Left by mistake?
+          </Text>
+          <Button
+            onClick={() => {
+              let redirectUrl = `${showPreview ? '/preview/' : '/meeting/'}${roomCode || roomId}`;
+              if (role && roomId) redirectUrl += '/' + role;
+              navigate(redirectUrl);
+              ToastManager.clearAllToast();
+            }}
+            data-testid="join_again_btn"
+          >
+            <ExitIcon />
+            <Text css={{ ml: '$3', fontWeight: '$semiBold', color: 'inherit' }}>Rejoin</Text>
+          </Button>
+        </Flex>
+      </Flex>
+    </Flex>
+  );
+};
+
+export default PostLeave;

package/src/Prebuilt/components/Preview/PreviewContainer.jsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { useParams } from 'react-router-dom';
+import { useSearchParam } from 'react-use';
+import { Box, Flex, Loading } from '../../../';
+import SidePane from '../../layouts/SidePane';
+import { Header } from '../Header';
+import PreviewJoin from './PreviewJoin';
+import { useAuthToken } from '../AppData/useUISettings';
+import { useNavigation } from '../hooks/useNavigation';
+import { useSkipPreview } from '../hooks/useSkipPreview';
+import { QUERY_PARAM_NAME, QUERY_PARAM_PREVIEW_AS_ROLE } from '../../common/constants';
+
+const PreviewContainer = () => {
+  const navigate = useNavigation();
+  const skipPreview = useSkipPreview();
+  const previewAsRole = useSearchParam(QUERY_PARAM_PREVIEW_AS_ROLE);
+  const initialName = useSearchParam(QUERY_PARAM_NAME) || (skipPreview ? 'Beam' : '');
+  const { roomId: urlRoomId, role: userRole } = useParams(); // from the url
+  const authToken = useAuthToken();
+
+  const onJoin = () => {
+    let meetingURL = `/meeting/${urlRoomId}`;
+    if (userRole) {
+      meetingURL += `/${userRole}`;
+    }
+    navigate(meetingURL);
+  };
+  return (
+    <Flex direction="column" css={{ size: '100%' }}>
+      <Box css={{ h: '$18', '@md': { h: '$17', flexShrink: 0 } }} data-testid="header">
+        <Header />
+      </Box>
+      <Flex css={{ flex: '1 1 0', position: 'relative', overflowY: 'auto' }} justify="center" align="center">
+        {authToken ? (
+          <PreviewJoin initialName={initialName} skipPreview={skipPreview} asRole={previewAsRole} onJoin={onJoin} />
+        ) : (
+          <Loading size={100} />
+        )}
+        <SidePane
+          css={{
+            position: 'unset',
+            mr: '$10',
+            '@lg': { position: 'fixed', mr: '$0' },
+          }}
+        />
+      </Flex>
+    </Flex>
+  );
+};
+
+export default PreviewContainer;