@100mslive/roomkit-react 0.1.0

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

@@ -0,0 +1,39 @@
+import React, { useState } from 'react';
+import { SpeakerIcon } from '@100mslive/react-icons';
+import { Flex, Slider } from '../../../';
+
+export const VolumeControl = ({ hlsPlayer }) => {
+  const [volume, setVolume] = useState(hlsPlayer?.volume ?? 100);
+
+  return (
+    <Flex align="center" css={{ color: '$white' }}>
+      <SpeakerIcon
+        style={{ cursor: 'pointer' }}
+        onClick={() => {
+          setVolume(0);
+          if (hlsPlayer) {
+            hlsPlayer.setVolume(0);
+          }
+        }}
+      />
+      <Slider
+        css={{
+          mx: '$4',
+          w: '$20',
+          cursor: 'pointer',
+          '@sm': { w: '$14' },
+          '@xs': { w: '$14' },
+        }}
+        min={0}
+        max={100}
+        step={1}
+        value={[volume]}
+        onValueChange={volume => {
+          hlsPlayer.setVolume(volume);
+          setVolume(volume);
+        }}
+        thumbStyles={{ w: '$6', h: '$6' }}
+      />
+    </Flex>
+  );
+};

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

@@ -0,0 +1,19 @@
+import { LeftControls, RightControls, VideoControls } from './Controls';
+import { HMSVideo } from './HMSVideo';
+import { PlayButton } from './PlayButton';
+import { VideoProgress } from './VideoProgress';
+import { VideoTime } from './VideoTime';
+import { VolumeControl } from './VolumeControl';
+
+export const HMSVideoPlayer = {
+  Root: HMSVideo,
+  PlayButton: PlayButton,
+  Progress: VideoProgress,
+  Duration: VideoTime,
+  Volume: VolumeControl,
+  Controls: {
+    Root: VideoControls,
+    Left: LeftControls,
+    Right: RightControls,
+  },
+};

package/src/Prebuilt/components/Header/AdditionalRoomState.jsx

@@ -0,0 +1,217 @@
+import React, { useState } from 'react';
+import { selectLocalPeerID, selectPeerSharingVideoPlaylist, useHMSStore, useScreenShare } from '@100mslive/react-sdk';
+import {
+  AudioPlayerIcon,
+  ChevronDownIcon,
+  ChevronUpIcon,
+  MusicIcon,
+  PencilDrawIcon,
+  ShareScreenIcon,
+  VideoPlayerIcon,
+} from '@100mslive/react-icons';
+import { Box, Dropdown, Flex, Text, Tooltip } from '../../../';
+import { useWhiteboardMetadata } from '../../plugins/whiteboard/useWhiteboardMetadata';
+import { useUISettings } from '../AppData/useUISettings';
+import { usePlaylistMusic } from '../hooks/usePlaylistMusic';
+import { useScreenshareAudio } from '../hooks/useScreenshareAudio';
+import { UI_SETTINGS } from '../../common/constants';
+
+export const getRecordingText = ({ isBrowserRecordingOn, isServerRecordingOn, isHLSRecordingOn }, delimiter = ', ') => {
+  if (!isBrowserRecordingOn && !isServerRecordingOn && !isHLSRecordingOn) {
+    return '';
+  }
+  const title = [];
+  if (isBrowserRecordingOn) {
+    title.push('Browser');
+  }
+  if (isServerRecordingOn) {
+    title.push('Server');
+  }
+  if (isHLSRecordingOn) {
+    title.push('HLS');
+  }
+  return title.join(delimiter);
+};
+
+/**
+ * Display state of recording, streaming, playlist, whiteboard
+ */
+export const AdditionalRoomState = () => {
+  const playlist = usePlaylistMusic();
+  const isAudioOnly = useUISettings(UI_SETTINGS.isAudioOnly);
+  const screenshareAudio = useScreenshareAudio();
+  const [open, setOpen] = useState(false);
+  const isPlaylistInactive = [
+    !playlist.peer || !playlist.track,
+    !playlist.peer?.isLocal && !playlist.track?.enabled,
+    playlist.peer?.isLocal && !playlist.selection,
+  ].some(Boolean);
+  const isAudioshareInactive = [
+    !screenshareAudio.peer || !screenshareAudio.track,
+    !screenshareAudio.peer?.isLocal && !screenshareAudio.track?.enabled,
+  ].some(Boolean);
+
+  const peerSharingPlaylist = useHMSStore(selectPeerSharingVideoPlaylist);
+  const localPeerID = useHMSStore(selectLocalPeerID);
+  const isVideoPlayListPlaying = !!peerSharingPlaylist?.id;
+  const { screenSharingPeerName, screenSharingPeerId, screenShareVideoTrackId } = useScreenShare();
+
+  const isVideoScreenSharingOn = !!screenShareVideoTrackId;
+  const { whiteboardOwner, amIWhiteboardOwner, toggleWhiteboard } = useWhiteboardMetadata();
+  const shouldShowScreenShareState = isAudioOnly && isVideoScreenSharingOn;
+  const shouldShowVideoState = isAudioOnly && isVideoPlayListPlaying;
+  if (
+    isPlaylistInactive &&
+    isAudioshareInactive &&
+    !shouldShowScreenShareState &&
+    !shouldShowVideoState &&
+    !whiteboardOwner
+  ) {
+    return null;
+  }
+
+  return (
+    <Dropdown.Root open={open} onOpenChange={setOpen}>
+      <Dropdown.Trigger asChild>
+        <Flex
+          align="center"
+          css={{
+            color: '$textPrimary',
+            borderRadius: '$1',
+            border: '1px solid $textDisabled',
+            padding: '$4',
+            '@sm': { display: 'none' },
+          }}
+          data-testid="record_status_dropdown"
+        >
+          {!isAudioshareInactive && (
+            <Tooltip title="Screenshare Audio">
+              <Flex align="center" css={{ color: '$textPrimary', mx: '$2' }}>
+                <MusicIcon width={24} height={24} />
+              </Flex>
+            </Tooltip>
+          )}
+          {shouldShowScreenShareState && (
+            <Tooltip title="Screenshare">
+              <Flex align="center" css={{ color: '$textPrimary', mx: '$2' }}>
+                <ShareScreenIcon width={24} height={24} />
+              </Flex>
+            </Tooltip>
+          )}
+          {shouldShowVideoState && (
+            <Tooltip title="video playlist">
+              <Flex align="center" css={{ color: '$textPrimary', mx: '$2' }}>
+                <VideoPlayerIcon width={24} height={24} />
+              </Flex>
+            </Tooltip>
+          )}
+          {!isPlaylistInactive && (
+            <Tooltip title="Playlist Music">
+              <Flex align="center" css={{ color: '$textPrimary', mx: '$2' }}>
+                <AudioPlayerIcon width={24} height={24} />
+              </Flex>
+            </Tooltip>
+          )}
+          {whiteboardOwner && (
+            <Tooltip title="Whiteboard">
+              <Flex align="center" css={{ color: '$textPrimary', mx: '$2' }}>
+                <PencilDrawIcon width={24} height={24} />
+              </Flex>
+            </Tooltip>
+          )}
+          <Box css={{ '@lg': { display: 'none' }, color: '$textDisabled' }}>
+            {open ? <ChevronUpIcon /> : <ChevronDownIcon />}
+          </Box>
+        </Flex>
+      </Dropdown.Trigger>
+      <Dropdown.Content sideOffset={5} align="end" css={{ w: '$60' }}>
+        {!isPlaylistInactive && (
+          <Dropdown.Item css={{ color: '$textPrimary' }}>
+            <AudioPlayerIcon width={24} height={24} />
+            <Text variant="sm" css={{ ml: '$2', flex: '1 1 0' }}>
+              Playlist is playing
+            </Text>
+            {playlist.peer.isLocal ? (
+              <Text
+                variant="sm"
+                css={{ color: '$error', cursor: 'pointer', ml: '$2' }}
+                onClick={e => {
+                  e.preventDefault();
+                  playlist.selection.playing ? playlist.pause() : playlist.play(playlist.selection.id);
+                }}
+              >
+                {playlist.selection.playing ? 'Pause' : 'Play'}
+              </Text>
+            ) : (
+              <Text
+                variant="sm"
+                css={{ color: '$error', ml: '$2', cursor: 'pointer' }}
+                onClick={e => {
+                  e.preventDefault();
+                  playlist.setVolume(!playlist.track.volume ? 100 : 0);
+                }}
+              >
+                {playlist.track.volume === 0 ? 'Unmute' : 'Mute'}
+              </Text>
+            )}
+          </Dropdown.Item>
+        )}
+        {!isAudioshareInactive && (
+          <Dropdown.Item css={{ color: '$textPrimary' }}>
+            <MusicIcon width={24} height={24} />
+            <Text variant="sm" css={{ ml: '$2', flex: '1 1 0' }}>
+              Music is playing
+            </Text>
+            <Text
+              variant="sm"
+              css={{ color: '$error', ml: '$2', cursor: 'pointer' }}
+              onClick={e => {
+                e.preventDefault();
+                screenshareAudio.onToggle();
+              }}
+            >
+              {screenshareAudio.muted ? 'Unmute' : 'Mute'}
+            </Text>
+          </Dropdown.Item>
+        )}
+        {shouldShowScreenShareState && (
+          <Dropdown.Item css={{ color: '$textPrimary' }}>
+            <ShareScreenIcon width={24} height={24} />
+            <Text variant="sm" css={{ ml: '$2', flex: '1 1 0' }}>
+              {`Shared by: ${screenSharingPeerId === localPeerID ? 'You' : screenSharingPeerName}`}
+            </Text>
+          </Dropdown.Item>
+        )}
+        {shouldShowVideoState && (
+          <Dropdown.Item css={{ color: '$textPrimary' }}>
+            <VideoPlayerIcon width={24} height={24} />
+            <Text variant="sm" css={{ ml: '$2', flex: '1 1 0' }}>
+              {`Shared by: ${peerSharingPlaylist.id === localPeerID ? 'You' : peerSharingPlaylist.name}`}
+            </Text>
+          </Dropdown.Item>
+        )}
+        {whiteboardOwner && (
+          <Dropdown.Item css={{ color: '$textPrimary' }}>
+            <PencilDrawIcon width={24} height={24} />
+            <Text variant="sm" css={{ ml: '$2', flex: '1 1 0' }}>
+              Whiteboard Owner - {whiteboardOwner.name}
+              {amIWhiteboardOwner && '(You)'}
+            </Text>
+            {amIWhiteboardOwner && (
+              <Text
+                variant="sm"
+                css={{ color: '$error', ml: '$2', cursor: 'pointer' }}
+                onClick={e => {
+                  e.preventDefault();
+                  toggleWhiteboard();
+                }}
+              >
+                Stop
+              </Text>
+            )}
+          </Dropdown.Item>
+        )}
+      </Dropdown.Content>
+    </Dropdown.Root>
+  );
+};

package/src/Prebuilt/components/Header/AmbientMusic.jsx

@@ -0,0 +1,88 @@
+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/Header/ConferencingHeader.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Flex, VerticalDivider } from '../../../';
+import { Logo, SpeakerTag } from './HeaderComponents';
+import { ParticipantCount } from './ParticipantList';
+import { StreamActions } from './StreamActions';
+
+export const ConferencingHeader = ({ isPreview }) => {
+  return (
+    <Flex justify="between" align="center" css={{ position: 'relative', height: '100%' }}>
+      <Flex align="center" css={{ position: 'absolute', left: '$10' }}>
+        <Logo />
+        <VerticalDivider css={{ ml: '$8' }} />
+        {!isPreview ? <SpeakerTag /> : null}
+      </Flex>
+
+      <Flex
+        align="center"
+        css={{
+          position: 'absolute',
+          right: '$10',
+          gap: '$4',
+        }}
+      >
+        <StreamActions />
+        <ParticipantCount />
+      </Flex>
+    </Flex>
+  );
+};

package/src/Prebuilt/components/Header/Header.jsx

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

package/src/Prebuilt/components/Header/HeaderComponents.jsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { useMedia } from 'react-use';
+import { selectDominantSpeaker, selectIsConnectedToRoom, useHMSStore } from '@100mslive/react-sdk';
+import { VolumeOneIcon } from '@100mslive/react-icons';
+import { config as cssConfig, Flex, styled, Text, textEllipsis } from '../../../';
+import { useLogo } from '../AppData/useUISettings';
+import { isStreamingKit } from '../../common/utils';
+
+export const SpeakerTag = () => {
+  const dominantSpeaker = useHMSStore(selectDominantSpeaker);
+  return dominantSpeaker && dominantSpeaker.name ? (
+    <Flex align="center" justify="center" css={{ flex: '1 1 0', color: '$textPrimary', '@md': { display: 'none' } }}>
+      <VolumeOneIcon />
+      <Text variant="md" css={{ ...textEllipsis(200), ml: '$2' }} title={dominantSpeaker.name}>
+        {dominantSpeaker.name}
+      </Text>
+    </Flex>
+  ) : (
+    <></>
+  );
+};
+
+const LogoImg = styled('img', {
+  maxHeight: '$14',
+  p: '$2',
+  w: 'auto',
+  '@md': {
+    maxHeight: '$12',
+  },
+});
+
+export const Logo = () => {
+  const logo = useLogo();
+  const isMobile = useMedia(cssConfig.media.md);
+  const isConnected = useHMSStore(selectIsConnectedToRoom);
+  // Hide logo for now as there is not enough space
+  if (isConnected && isMobile && isStreamingKit()) {
+    return null;
+  }
+  return logo ? <LogoImg src={logo} alt="Brand Logo" width={132} height={40} /> : null;
+};

package/src/Prebuilt/components/Header/ParticipantFilter.jsx

@@ -0,0 +1,91 @@
+import React, { useCallback, useState } from 'react';
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon, HandRaiseIcon, PeopleIcon } from '@100mslive/react-icons';
+import { Box, Dropdown, Flex, Text, textEllipsis } from '../../../';
+import { isInternalRole } from '../../common/utils';
+
+export const ParticipantFilter = ({ selection, onSelection, isConnected, roles }) => {
+  const [open, setOpen] = useState(false);
+  const selectionValue = selection?.role || (selection?.metadata?.isHandRaised ? 'Raised Hand' : '');
+  const onItemClick = useCallback(value => {
+    onSelection(value);
+    setOpen(false);
+  }, []); //eslint-disable-line
+  if (!isConnected) {
+    return null;
+  }
+  return (
+    <Dropdown.Root open={open} onOpenChange={value => setOpen(value)}>
+      <Dropdown.Trigger
+        asChild
+        data-testid="participant_list_filter"
+        css={{
+          border: '1px solid $textDisabled',
+          r: '$0',
+          p: '$2 $4',
+        }}
+        tabIndex={0}
+      >
+        <Flex align="center">
+          <Text variant="sm" css={{ ...textEllipsis(80) }}>
+            {selectionValue || 'Everyone'}
+          </Text>
+          <Box css={{ ml: '$2', color: '$textDisabled' }}>
+            {open ? <ChevronUpIcon width={14} height={14} /> : <ChevronDownIcon width={14} height={14} />}
+          </Box>
+        </Flex>
+      </Dropdown.Trigger>
+      <Dropdown.Content
+        align="start"
+        sideOffset={8}
+        css={{
+          height: 'auto',
+          maxHeight: '$96',
+          boxShadow: '$md',
+          w: '$48',
+        }}
+      >
+        <Item selected={!selection} title="Everyone" onSelection={onItemClick} icon={<PeopleIcon />} />
+        <Item
+          selected={selection?.metadata?.isHandRaised}
+          title="Raised Hand"
+          onSelection={onItemClick}
+          icon={<HandRaiseIcon />}
+          value={{ metadata: { isHandRaised: true }, role: '' }}
+        />
+        <Dropdown.ItemSeparator />
+        {roles
+          .filter(role => !isInternalRole(role))
+          .map(role => (
+            <Item
+              key={role}
+              selected={selectionValue === role}
+              title={role}
+              value={{ metadata: { isHandRaised: false }, role }}
+              onSelection={onItemClick}
+            />
+          ))}
+      </Dropdown.Content>
+    </Dropdown.Root>
+  );
+};
+
+const Item = ({ selected, title, onSelection, value, icon }) => {
+  return (
+    <Dropdown.Item
+      onClick={e => {
+        e.preventDefault();
+        onSelection(value);
+      }}
+    >
+      <Flex align="center" css={{ flex: '1 1 0' }}>
+        {icon && <Text>{icon}</Text>}
+        <Text css={{ ml: '$4' }}>{title}</Text>
+      </Flex>
+      {selected && (
+        <Text>
+          <CheckIcon widht={16} height={16} />
+        </Text>
+      )}
+    </Dropdown.Item>
+  );
+};