@100mslive/roomkit-react 0.1.5 → 0.1.6-alpha.1

package/src/Prebuilt/components/Footer/RoleOptions.tsx

@@ -0,0 +1,155 @@
+import React, { useState } from 'react';
+import { DefaultConferencingScreen_Elements } from '@100mslive/types-prebuilt';
+import { HMSPeer, selectPermissions, useHMSActions, useHMSStore, useHMSVanillaStore } from '@100mslive/react-sdk';
+import {
+  MicOffIcon,
+  MicOnIcon,
+  PersonRectangleIcon,
+  RemoveUserIcon,
+  VerticalMenuIcon,
+  VideoOffIcon,
+  VideoOnIcon,
+} from '@100mslive/react-icons';
+import { Dropdown } from '../../../Dropdown';
+import { Flex } from '../../../Layout';
+import { Text } from '../../../Text';
+import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
+// @ts-ignore: No implicit Any
+import { getMetadata } from '../../common/utils';
+
+const dropdownItemCSS = { backgroundColor: '$surface_default', gap: '$4', p: '$8' };
+const optionTextCSS = { fontWeight: '$semiBold', color: '$on_surface_high', textTransform: 'none' };
+
+export const RoleOptions = ({ roleName, peerList }: { roleName: string; peerList: HMSPeer[] }) => {
+  const [openOptions, setOpenOptions] = useState(false);
+  const permissions = useHMSStore(selectPermissions);
+  const hmsActions = useHMSActions();
+  const { elements } = useRoomLayoutConferencingScreen();
+  const { on_stage_role, off_stage_roles = [] } = (elements as DefaultConferencingScreen_Elements)?.on_stage_exp || {};
+
+  const vanillaStore = useHMSVanillaStore();
+  const store = vanillaStore.getState();
+
+  let allPeersHaveVideoOn = true;
+  let allPeersHaveAudioOn = true;
+
+  peerList.forEach(peer => {
+    const isAudioOn = !!peer.audioTrack && store.tracks[peer.audioTrack]?.enabled;
+    const isVideoOn = !!peer.videoTrack && store.tracks[peer.videoTrack]?.enabled;
+    allPeersHaveAudioOn = allPeersHaveAudioOn && isAudioOn;
+    allPeersHaveVideoOn = allPeersHaveVideoOn && isVideoOn;
+  });
+
+  const canMuteRole = permissions?.mute && roleName === on_stage_role;
+  const canRemoveRoleFromStage = permissions?.changeRole && roleName === on_stage_role;
+  // on stage and off stage roles
+  const canRemoveRoleFromRoom =
+    permissions?.removeOthers && (on_stage_role === roleName || off_stage_roles?.includes(roleName));
+
+  if (!(canMuteRole || canRemoveRoleFromStage || canRemoveRoleFromRoom)) {
+    return null;
+  }
+
+  const removeAllFromStage = () => {
+    peerList.forEach(peer => {
+      const prevRole = getMetadata(peer.metadata).prevRole;
+      if (prevRole) {
+        hmsActions.changeRoleOfPeer(peer.id, prevRole, true);
+      }
+    });
+  };
+
+  const setTrackEnabled = async (type: 'audio' | 'video', enabled = false) => {
+    try {
+      await hmsActions.setRemoteTracksEnabled({ roles: [roleName], source: 'regular', type, enabled });
+    } catch (e) {
+      console.error(e);
+    }
+  };
+
+  const removePeersFromRoom = async () => {
+    try {
+      peerList.forEach(async peer => {
+        await hmsActions.removePeer(peer.id, '');
+      });
+    } catch (e) {
+      console.error(e);
+    }
+  };
+
+  return (
+    <Dropdown.Root open={openOptions} onOpenChange={setOpenOptions}>
+      <Dropdown.Trigger
+        onClick={e => e.stopPropagation()}
+        className="role_actions"
+        asChild
+        css={{
+          p: '$1',
+          r: '$0',
+          c: '$on_surface_high',
+          visibility: openOptions ? 'visible' : 'hidden',
+          '&:hover': {
+            c: '$on_surface_medium',
+          },
+          '@md': {
+            visibility: 'visible',
+          },
+        }}
+      >
+        <Flex>
+          <VerticalMenuIcon />
+        </Flex>
+      </Dropdown.Trigger>
+      <Dropdown.Content
+        onClick={e => e.stopPropagation()}
+        css={{ w: 'max-content', maxWidth: '$64', bg: '$surface_default', py: 0 }}
+        align="end"
+      >
+        {canRemoveRoleFromStage && (
+          <Dropdown.Item
+            css={{ ...dropdownItemCSS, borderBottom: '1px solid $border_bright' }}
+            onClick={removeAllFromStage}
+          >
+            <PersonRectangleIcon />
+            <Text variant="sm" css={optionTextCSS}>
+              Remove all from Stage
+            </Text>
+          </Dropdown.Item>
+        )}
+
+        {canMuteRole && (
+          <>
+            <Dropdown.Item css={dropdownItemCSS} onClick={() => setTrackEnabled('audio', !allPeersHaveAudioOn)}>
+              {allPeersHaveAudioOn ? <MicOffIcon /> : <MicOnIcon />}
+              <Text variant="sm" css={optionTextCSS}>
+                {allPeersHaveAudioOn ? 'Mute' : 'Unmute'} Audio
+              </Text>
+            </Dropdown.Item>
+
+            <Dropdown.Item
+              css={{ ...dropdownItemCSS, borderTop: '1px solid $border_bright' }}
+              onClick={() => setTrackEnabled('video', !allPeersHaveVideoOn)}
+            >
+              {allPeersHaveVideoOn ? <VideoOffIcon /> : <VideoOnIcon />}
+              <Text variant="sm" css={optionTextCSS}>
+                {allPeersHaveVideoOn ? 'Mute' : 'Unmute'} Video
+              </Text>
+            </Dropdown.Item>
+          </>
+        )}
+
+        {canRemoveRoleFromRoom && (
+          <Dropdown.Item
+            css={{ ...dropdownItemCSS, borderTop: '1px solid $border_bright', color: '$alert_error_default' }}
+            onClick={removePeersFromRoom}
+          >
+            <RemoveUserIcon />
+            <Text variant="sm" css={{ ...optionTextCSS, color: 'inherit' }}>
+              Remove all from Room
+            </Text>
+          </Dropdown.Item>
+        )}
+      </Dropdown.Content>
+    </Dropdown.Root>
+  );
+};

package/src/Prebuilt/components/FullPageProgress.jsx

@@ -3,10 +3,10 @@ import { Flex } from '../../Layout';
 import { Loading } from '../../Loading';
 import { Text } from '../../Text';
 
-const FullPageProgress = ({ loaderColor = '$primary_default', loadingText = '' }) => (
-  <Flex direction="column" justify="center" align="center" css={{ size: '100%', color: loaderColor }}>
+const FullPageProgress = ({ loaderColor = '$primary_default', text = '', css = {} }) => (
+  <Flex direction="column" justify="center" align="center" css={{ size: '100%', color: loaderColor, ...css }}>
     <Loading color="currentColor" size={100} />
-    {loadingText ? <Text css={{ mt: '$10', color: '$on_surface_high' }}>{loadingText}</Text> : null}
+    {text ? <Text css={{ mt: '$10', color: '$on_surface_high' }}>{text}</Text> : null}
   </Flex>
 );
 

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

@@ -3,6 +3,7 @@ import { Flex, styled } from '../../../';
 export const VideoControls = styled(Flex, {
   justifyContent: 'center',
   alignItems: 'center',
+  alignSelf: 'stretch',
   width: '100%',
   gap: '$2',
 });
@@ -11,11 +12,11 @@ export const LeftControls = styled(Flex, {
   justifyContent: 'flex-start',
   alignItems: 'center',
   width: '100%',
-  gap: '$2',
+  gap: '$4',
 });
 export const RightControls = styled(Flex, {
   justifyContent: 'flex-end',
   alignItems: 'center',
   width: '100%',
-  gap: '$2',
+  gap: '$4',
 });

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

@@ -1,12 +1,10 @@
-import React, { useState } from 'react';
-import { CheckCircleIcon, SettingsIcon } from '@100mslive/react-icons';
+import React from 'react';
+import { CheckIcon, SettingsIcon } from '@100mslive/react-icons';
 import { Box, Dropdown, Flex, Text, Tooltip } from '../../../';
 
-export function HLSQualitySelector({ layers, onQualityChange, selection, isAuto }) {
-  const [qualityDropDownOpen, setQualityDropDownOpen] = useState(false);
-
+export function HLSQualitySelector({ open, onOpen, layers, onQualityChange, selection, isAuto }) {
   return (
-    <Dropdown.Root open={qualityDropDownOpen} onOpenChange={value => setQualityDropDownOpen(value)}>
+    <Dropdown.Root open={open} onOpenChange={value => onOpen(value)}>
       <Dropdown.Trigger asChild data-testid="quality_selector">
         <Flex
           css={{
@@ -24,6 +22,7 @@ export function HLSQualitySelector({ layers, onQualityChange, selection, isAuto
                   h: '$9',
                   display: 'inline-flex',
                   alignItems: 'center',
+                  c: '$on_surface_high',
                 }}
               >
                 <SettingsIcon />
@@ -34,7 +33,7 @@ export function HLSQualitySelector({ layers, onQualityChange, selection, isAuto
                   '@sm': 'xs',
                   '@xs': 'tiny',
                 }}
-                css={{ display: 'flex', alignItems: 'center', ml: '$2' }}
+                css={{ display: 'flex', alignItems: 'center', ml: '$2', c: '$on_surface_medium' }}
               >
                 {isAuto && (
                   <>
@@ -44,7 +43,7 @@ export function HLSQualitySelector({ layers, onQualityChange, selection, isAuto
                         mx: '$2',
                         w: '$2',
                         h: '$2',
-                        background: '$on_primary_high',
+                        background: '$on_surface_medium',
                         r: '$1',
                       }}
                     />
@@ -57,26 +56,72 @@ export function HLSQualitySelector({ layers, onQualityChange, selection, isAuto
         </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>
+        <Dropdown.Content
+          sideOffset={5}
+          align="end"
+          css={{
+            height: 'auto',
+            maxHeight: '$52',
+            w: '$40',
+            bg: '$surface_bright',
+            py: '$4',
+            gap: '$4',
+            display: 'grid',
+          }}
+        >
           {layers.map(layer => {
             return (
-              <Dropdown.Item onClick={() => onQualityChange(layer)} key={layer.width}>
-                <Text css={{ flex: '1 1 0' }}>{getQualityText(layer)}</Text>
+              <Dropdown.Item
+                onClick={() => onQualityChange(layer)}
+                key={layer.width}
+                css={{
+                  bg:
+                    !isAuto && layer.width === selection?.width && layer.height === selection?.height
+                      ? '$surface_default'
+                      : '$surface_bright',
+                  '&:hover': {
+                    bg: '$surface_brighter',
+                  },
+                  p: '$2 $4 $2 $8',
+                  h: '$12',
+                  gap: '$2',
+                }}
+              >
+                <Text variant="caption" css={{ fontWeight: '$semiBold' }}>
+                  {getQualityText(layer)}
+                </Text>
+                <Text variant="caption" css={{ flex: '1 1 0', c: '$on_surface_low', pl: '$2' }}>
+                  {getBitrateText(layer)}
+                </Text>
                 {!isAuto && layer.width === selection?.width && layer.height === selection?.height && (
-                  <CheckCircleIcon />
+                  <CheckIcon width="16px" height="16px" />
                 )}
               </Dropdown.Item>
             );
           })}
+          <Dropdown.Item
+            onClick={() => onQualityChange({ height: 'auto' })}
+            key="auto"
+            css={{
+              bg: !isAuto ? '$surface_bright' : '$surface_default',
+              '&:hover': {
+                bg: '$surface_brighter',
+              },
+              p: '$2 $4 $2 $8',
+              h: '$12',
+              gap: '$2',
+            }}
+          >
+            <Text variant="caption" css={{ fontWeight: '$semiBold', flex: '1 1 0' }}>
+              Auto
+            </Text>
+            {isAuto && <CheckIcon width="16px" height="16px" />}
+          </Dropdown.Item>
         </Dropdown.Content>
       )}
     </Dropdown.Root>
   );
 }
 
-const getQualityText = layer =>
-  `${Math.min(layer.height, layer.width)}p (${(Number(layer.bitrate / 1000) / 1000).toFixed(2)} Mbps)`;
+const getQualityText = layer => `${Math.min(layer.height, layer.width)}p `;
+const getBitrateText = layer => `(${(Number(layer.bitrate / 1000) / 1000).toFixed(2)} Mbps)`;

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

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

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

@@ -6,7 +6,7 @@ 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} />}
+        {isPaused ? <PlayIcon width={20} height={20} /> : <PauseIcon width={20} height={20} />}
       </IconButton>
     </Tooltip>
   );

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

@@ -44,7 +44,7 @@ export const VideoProgress = ({ onValueChange, hlsPlayer }) => {
   return hlsPlayer.getVideoElement() ? (
     <Flex
       ref={progressRootRef}
-      css={{ paddingLeft: '$8', paddingRight: '$8', cursor: 'pointer' }}
+      css={{ cursor: 'pointer', h: '$4', alignSelf: 'stretch' }}
       onClick={onProgressChangeHandler}
     >
       <Box
@@ -53,23 +53,22 @@ export const VideoProgress = ({ onValueChange, hlsPlayer }) => {
           display: 'inline',
           width: `${videoProgress}%`,
           background: '$primary_default',
-          height: '0.3rem',
         }}
       />
       <Box
         id="video-buffer"
         css={{
           width: `${bufferProgress - videoProgress}%`,
-          background: '$primary_dim',
-          height: '0.3rem',
+          background: '$on_surface_high',
+          opacity: '25%',
         }}
       />
       <Box
         id="video-rest"
         css={{
           width: `${100 - bufferProgress}%`,
-          background: '$surface_brighter',
-          height: '0.3rem',
+          background: '$on_surface_high',
+          opacity: '10%',
         }}
       />
     </Flex>

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

@@ -22,9 +22,9 @@ export const VideoTime = ({ hlsPlayer }) => {
     <Text
       css={{
         minWidth: '$16',
-      }}
-      variant={{
-        '@sm': 'xs',
+        c: '$on_surface_medium',
+        display: 'flex',
+        justifyContent: 'center',
       }}
     >
       {videoTime}

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

@@ -1,18 +1,33 @@
 import React, { useState } from 'react';
-import { SpeakerIcon } from '@100mslive/react-icons';
+import { VolumeOneIcon, VolumeTwoIcon, VolumeZeroIcon } from '@100mslive/react-icons';
 import { Flex, Slider } from '../../../';
 
 export const VolumeControl = ({ hlsPlayer }) => {
   const [volume, setVolume] = useState(hlsPlayer?.volume ?? 100);
+  const [showSlider, setShowSlider] = useState(false);
 
   return (
-    <Flex align="center" css={{ color: '$on_primary_high' }}>
-      <SpeakerIcon
-        style={{ cursor: 'pointer' }}
+    <Flex
+      align="center"
+      css={{ color: '$on_surface_high' }}
+      onMouseOver={event => {
+        event.stopPropagation();
+        setShowSlider(true);
+      }}
+      onMouseLeave={event => {
+        event.stopPropagation();
+        setShowSlider(false);
+      }}
+    >
+      <VolumeIcon
+        volume={volume}
         onClick={() => {
-          setVolume(0);
-          if (hlsPlayer) {
-            hlsPlayer.setVolume(0);
+          if (volume > 0) {
+            setVolume(0);
+            hlsPlayer?.setVolume(0);
+          } else {
+            setVolume(100);
+            hlsPlayer?.setVolume(100);
           }
         }}
       />
@@ -23,17 +38,31 @@ export const VolumeControl = ({ hlsPlayer }) => {
           cursor: 'pointer',
           '@sm': { w: '$14' },
           '@xs': { w: '$14' },
+          opacity: showSlider ? '1' : '0',
+          display: showSlider ? '' : 'none',
+          transition: `all .2s ease .5s`,
         }}
         min={0}
         max={100}
         step={1}
         value={[volume]}
         onValueChange={volume => {
-          hlsPlayer.setVolume(volume);
-          setVolume(volume);
+          hlsPlayer.setVolume(volume[0]);
+          setVolume(volume[0]);
         }}
         thumbStyles={{ w: '$6', h: '$6' }}
       />
     </Flex>
   );
 };
+
+const VolumeIcon = ({ volume, onClick }) => {
+  if (volume === 0) {
+    return <VolumeZeroIcon style={{ cursor: 'pointer', transition: 'color 0.3s' }} onClick={onClick} />;
+  }
+  return volume < 50 ? (
+    <VolumeOneIcon style={{ cursor: 'pointer', transition: 'color 0.3s' }} onClick={onClick} />
+  ) : (
+    <VolumeTwoIcon style={{ cursor: 'pointer', transition: 'color 0.3s' }} onClick={onClick} />
+  );
+};

package/src/Prebuilt/components/Header/{ConferencingHeader.jsx → Header.tsx}

@@ -1,17 +1,19 @@
 import React from 'react';
 import { useMedia } from 'react-use';
 import { HMSRoomState, selectRoomState, useHMSStore } from '@100mslive/react-sdk';
-import { config as cssConfig, Flex } from '../../../';
+import { config as cssConfig, Flex } from '../../..';
+// @ts-ignore: No implicit any
 import { Logo, SpeakerTag } from './HeaderComponents';
+// @ts-ignore: No implicit any
 import { LiveStatus, RecordingStatus, StreamActions } from './StreamActions';
+// @ts-ignore: No implicit any
 import { AudioOutputActions, CamaraFlipActions } from './common';
 
-export const ConferencingHeader = () => {
+export const Header = () => {
   const roomState = useHMSStore(selectRoomState);
   const isMobile = useMedia(cssConfig.media.md);
-  const isPreview = roomState === HMSRoomState.Preview;
-  // no header if there in preview
-  if (isPreview) {
+  // Header should be present only inside the call - not in preview, leave room states
+  if (roomState !== HMSRoomState.Connected) {
     return <></>;
   }
   return (
@@ -35,12 +37,12 @@ export const ConferencingHeader = () => {
         }}
       >
         <StreamActions />
-        {isMobile && (
+        {isMobile ? (
           <>
             <CamaraFlipActions />
             <AudioOutputActions />
           </>
-        )}
+        ) : null}
       </Flex>
     </Flex>
   );

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

@@ -1,10 +1,9 @@
-import React from 'react';
+import React, { useState } 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, VerticalDivider } from '../../../';
 import { useRoomLayout } from '../../provider/roomLayoutProvider';
-import { isStreamingKit } from '../../common/utils';
 
 export const SpeakerTag = () => {
   const dominantSpeaker = useHMSStore(selectDominantSpeaker);
@@ -40,9 +39,19 @@ export const Logo = () => {
   const logo = roomLayout?.logo?.url;
   const isMobile = useMedia(cssConfig.media.md);
   const isConnected = useHMSStore(selectIsConnectedToRoom);
+  const [hideImage, setHideImage] = useState(false);
   // Hide logo for now as there is not enough space
-  if (isConnected && isMobile && isStreamingKit()) {
+  if (isConnected && isMobile) {
     return null;
   }
-  return logo ? <LogoImg src={logo} alt="Brand Logo" /> : null;
+  return logo && !hideImage ? (
+    <LogoImg
+      src={logo}
+      alt="Brand Logo"
+      onError={e => {
+        e.target.onerror = null;
+        setHideImage(true);
+      }}
+    />
+  ) : null;
 };