@100mslive/roomkit-react 0.4.3-alpha.2 → 0.4.3-alpha.4

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

@@ -1,215 +0,0 @@
-import React, { useState } from 'react';
-import { DefaultConferencingScreen_Elements } from '@100mslive/types-prebuilt';
-import { match } from 'ts-pattern';
-import {
-  HMSPeer,
-  selectPermissions,
-  selectRoleByRoleName,
-  selectTracksMap,
-  useHMSActions,
-  useHMSStore,
-} 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',
-  whiteSpace: 'nowrap',
-};
-
-const DropdownWrapper = ({ children }: { children: React.ReactNode }) => {
-  const [openOptions, setOpenOptions] = useState(false);
-  if (React.Children.toArray(children).length === 0) {
-    return null;
-  }
-  return (
-    <Dropdown.Root open={openOptions} onOpenChange={setOpenOptions}>
-      <Dropdown.Trigger
-        data-testid="role_group_options"
-        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', bg: '$surface_default', py: 0 }}
-        align="end"
-      >
-        {children}
-      </Dropdown.Content>
-    </Dropdown.Root>
-  );
-};
-
-export const RoleOptions = ({ roleName, peerList }: { roleName: string; peerList: HMSPeer[] }) => {
-  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 canRemoveRoleFromStage = permissions?.changeRole && roleName === on_stage_role;
-  const role = useHMSStore(selectRoleByRoleName(roleName));
-  const tracks = useHMSStore(selectTracksMap);
-  if (!role) {
-    return null;
-  }
-  const canPublishAudio = role.publishParams.allowed.includes('audio');
-  const canPublishVideo = role.publishParams.allowed.includes('video');
-
-  let isVideoOnForSomePeers = false;
-  let isAudioOnForSomePeers = false;
-
-  peerList.forEach(peer => {
-    if (peer.isLocal) {
-      return;
-    }
-    const isAudioOn = !!peer.audioTrack && tracks[peer.audioTrack]?.enabled;
-    const isVideoOn = !!peer.videoTrack && tracks[peer.videoTrack]?.enabled;
-    isAudioOnForSomePeers = isAudioOnForSomePeers || isAudioOn;
-    isVideoOnForSomePeers = isVideoOnForSomePeers || isVideoOn;
-  });
-
-  const setTrackEnabled = async (type: 'audio' | 'video', enabled = false) => {
-    try {
-      await hmsActions.setRemoteTracksEnabled({ roles: [roleName], source: 'regular', type, enabled });
-    } catch (e) {
-      console.error(e);
-    }
-  };
-
-  // on stage and off stage roles
-  const canRemoveRoleFromRoom =
-    permissions?.removeOthers && (on_stage_role === roleName || off_stage_roles?.includes(roleName));
-
-  if (
-    peerList.length === 0 ||
-    // if only local peer is present no need to show any options
-    (peerList.length === 1 && peerList[0].isLocal) ||
-    !role
-  ) {
-    return null;
-  }
-
-  const removeAllFromStage = () => {
-    peerList.forEach(peer => {
-      const prevRole = getMetadata(peer.metadata).prevRole;
-      if (prevRole) {
-        hmsActions.changeRoleOfPeer(peer.id, prevRole, true);
-      }
-    });
-  };
-
-  const removePeersFromRoom = async () => {
-    try {
-      peerList.forEach(async peer => {
-        await hmsActions.removePeer(peer.id, '');
-      });
-    } catch (e) {
-      console.error(e);
-    }
-  };
-
-  return (
-    <DropdownWrapper>
-      {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>
-      ) : null}
-
-      {match({ canPublishAudio, isAudioOnForSomePeers, canMute: permissions?.mute, canUnmute: permissions?.unmute })
-        .with({ canPublishAudio: true, isAudioOnForSomePeers: true, canMute: true }, () => {
-          return (
-            <Dropdown.Item css={dropdownItemCSS} onClick={() => setTrackEnabled('audio', false)}>
-              <MicOffIcon />
-              <Text variant="sm" css={optionTextCSS}>
-                Mute Audio for All
-              </Text>
-            </Dropdown.Item>
-          );
-        })
-        .with({ canPublishAudio: true, isAudioOnForSomePeers: false, canUnmute: true }, () => {
-          return (
-            <Dropdown.Item css={dropdownItemCSS} onClick={() => setTrackEnabled('audio', true)}>
-              <MicOnIcon />
-              <Text variant="sm" css={optionTextCSS}>
-                Request to Unmute Audio for All
-              </Text>
-            </Dropdown.Item>
-          );
-        })
-        .otherwise(() => null)}
-      {match({ canPublishVideo, isVideoOnForSomePeers, canMute: permissions?.mute, canUnmute: permissions?.unmute })
-        .with({ canPublishVideo: true, isVideoOnForSomePeers: true, canMute: true }, () => {
-          return (
-            <Dropdown.Item css={dropdownItemCSS} onClick={() => setTrackEnabled('video', false)}>
-              <VideoOffIcon />
-              <Text variant="sm" css={optionTextCSS}>
-                Mute Video for All
-              </Text>
-            </Dropdown.Item>
-          );
-        })
-        .with({ canPublishVideo: true, isVideoOnForSomePeers: false, canUnmute: true }, () => {
-          return (
-            <Dropdown.Item css={dropdownItemCSS} onClick={() => setTrackEnabled('video', true)}>
-              <VideoOnIcon />
-              <Text variant="sm" css={optionTextCSS}>
-                Request to Unmute Video for All
-              </Text>
-            </Dropdown.Item>
-          );
-        })
-        .otherwise(() => null)}
-
-      {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>
-      ) : null}
-    </DropdownWrapper>
-  );
-};

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

@@ -1,52 +0,0 @@
-import React, { useState } from 'react';
-import { selectPeerScreenSharing, useHMSStore, useWhiteboard } from '@100mslive/react-sdk';
-import { PencilDrawIcon } from '@100mslive/react-icons';
-import { Tooltip } from '../../..';
-// @ts-ignore: No implicit Any
-import IconButton from '../../IconButton';
-// @ts-ignore: No implicit Any
-import { ToastManager } from '../Toast/ToastManager';
-
-export const WhiteboardToggle = () => {
-  const { toggle, open, isOwner } = useWhiteboard();
-  const peerSharing = useHMSStore(selectPeerScreenSharing);
-  const disabled = !!peerSharing || (open && !isOwner);
-  const [isLoading, setLoading] = useState(false);
-
-  if (!toggle) {
-    return null;
-  }
-
-  return (
-    <Tooltip
-      key="whiteboard"
-      title={
-        peerSharing ? 'Cannot open whiteboard when viewing a shared screen' : `${open ? 'Close' : 'Open'} Whiteboard`
-      }
-    >
-      <IconButton
-        onClick={async () => {
-          if (disabled || isLoading) {
-            return;
-          }
-          try {
-            if (!open) {
-              setLoading(true);
-              await toggle();
-              setTimeout(() => setLoading(false), 500);
-            } else {
-              await toggle();
-            }
-          } catch (error) {
-            ToastManager.addToast({ title: (error as Error).message, variant: 'error' });
-          }
-        }}
-        active={!open}
-        disabled={disabled || isLoading}
-        data-testid="whiteboard_btn"
-      >
-        <PencilDrawIcon />
-      </IconButton>
-    </Tooltip>
-  );
-};

package/src/Prebuilt/components/FullPageProgress.tsx

@@ -1,22 +0,0 @@
-import React from 'react';
-import { Flex } from '../../Layout';
-import { Loading } from '../../Loading';
-import { Text } from '../../Text';
-import { CSS } from '../../Theme';
-
-const FullPageProgress = ({
-  loaderColor = '$primary_default',
-  text = '',
-  css = {},
-}: {
-  loaderColor?: string;
-  text?: string;
-  css?: CSS;
-}) => (
-  <Flex direction="column" justify="center" align="center" css={{ size: '100%', color: loaderColor, ...css }}>
-    <Loading color="currentColor" size={100} />
-    {text ? <Text css={{ mt: '$10', color: '$on_surface_high' }}>{text}</Text> : null}
-  </Flex>
-);
-
-export default FullPageProgress;

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

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

package/src/Prebuilt/components/HMSVideo/FullscreenButton.tsx

@@ -1,13 +0,0 @@
-import React from 'react';
-import { ExpandIcon, ShrinkIcon } from '@100mslive/react-icons';
-import { Flex, IconButton, Tooltip } from '../../..';
-
-export const FullScreenButton = ({ isFullScreen, onToggle }: { isFullScreen: boolean; onToggle: () => void }) => {
-  return (
-    <Tooltip title={`${isFullScreen ? 'Exit' : 'Go'} fullscreen`} side="top">
-      <IconButton css={{ margin: '0px' }} onClick={onToggle} key="fullscreen_btn" data-testid="fullscreen_btn">
-        <Flex>{isFullScreen ? <ShrinkIcon /> : <ExpandIcon />}</Flex>
-      </IconButton>
-    </Tooltip>
-  );
-};

package/src/Prebuilt/components/HMSVideo/HLSAutoplayBlockedPrompt.tsx

@@ -1,72 +0,0 @@
-import React from 'react';
-import { useMedia } from 'react-use';
-import { VolumeTwoIcon } from '@100mslive/react-icons';
-import { Button, config, Dialog, IconButton, Text } from '../../..';
-// @ts-ignore
-import { DialogContent, DialogRow } from '../../primitives/DialogContent';
-import { useIsLandscape } from '../../common/hooks';
-
-export function HLSAutoplayBlockedPrompt({
-  open,
-  unblockAutoPlay,
-}: {
-  open: boolean;
-  unblockAutoPlay: () => Promise<void>;
-}) {
-  const isLandscape = useIsLandscape();
-  const isMobile = useMedia(config.media.md);
-  if ((isMobile || isLandscape) && open) {
-    return (
-      <IconButton
-        css={{
-          border: '1px solid white',
-          bg: 'white',
-          color: '#000',
-          r: '$2',
-        }}
-        onClick={async () => await unblockAutoPlay()}
-      >
-        <VolumeTwoIcon width="32" height="32" />
-        <Text
-          variant="body1"
-          css={{
-            fontWeight: '$semiBold',
-            px: '$2',
-            color: '#000',
-          }}
-        >
-          Tap To Unmute
-        </Text>
-      </IconButton>
-    );
-  }
-  return (
-    <Dialog.Root
-      open={open}
-      onOpenChange={async value => {
-        if (!value) {
-          await unblockAutoPlay();
-        }
-      }}
-    >
-      <DialogContent title="Attention" closeable={false}>
-        <DialogRow>
-          <Text variant="md">
-            The browser wants us to get a confirmation for playing the HLS Stream. Please click "play stream" to
-            proceed.
-          </Text>
-        </DialogRow>
-        <DialogRow justify="end">
-          <Button
-            variant="primary"
-            onClick={async () => {
-              await unblockAutoPlay();
-            }}
-          >
-            Play stream
-          </Button>
-        </DialogRow>
-      </DialogContent>
-    </Dialog.Root>
-  );
-}

package/src/Prebuilt/components/HMSVideo/HLSCaptionSelector.tsx

@@ -1,15 +0,0 @@
-import React from 'react';
-import { ClosedCaptionIcon, OpenCaptionIcon } from '@100mslive/react-icons';
-import { IconButton, Tooltip } from '../../../';
-import { useHMSPlayerContext } from './PlayerContext';
-
-export function HLSCaptionSelector({ isEnabled }: { isEnabled: boolean }) {
-  const { hlsPlayer } = useHMSPlayerContext();
-  return (
-    <Tooltip title="Subtitles/closed captions" side="top">
-      <IconButton css={{ p: '$2' }} onClick={() => hlsPlayer?.toggleCaption()}>
-        {isEnabled ? <ClosedCaptionIcon width="20" height="20px" /> : <OpenCaptionIcon width="20" height="20px" />}
-      </IconButton>
-    </Tooltip>
-  );
-}

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

@@ -1,248 +0,0 @@
-import React from 'react';
-import { useMedia } from 'react-use';
-import { HMSHLSLayer } from '@100mslive/hls-player';
-import { CheckIcon, CrossIcon, SettingsIcon } from '@100mslive/react-icons';
-import { Box, Dropdown, Flex, Text, Tooltip } from '../../..';
-import { Sheet } from '../../../Sheet';
-import { config } from '../../../Theme';
-import { useIsLandscape } from '../../common/hooks';
-
-export function HLSQualitySelector({
-  open,
-  onOpenChange,
-  layers,
-  onQualityChange,
-  selection,
-  isAuto,
-  containerRef,
-}: {
-  open: boolean;
-  onOpenChange: (value: boolean) => void;
-  layers: HMSHLSLayer[];
-  onQualityChange: (quality: { [key: string]: string | number } | HMSHLSLayer) => void;
-  selection: HMSHLSLayer;
-  isAuto: boolean;
-  containerRef?: HTMLDivElement;
-}) {
-  const isMobile = useMedia(config.media.md);
-  const isLandscape = useIsLandscape();
-
-  if (layers.length === 0) {
-    return null;
-  }
-  if (isMobile || isLandscape) {
-    return (
-      <Sheet.Root open={open} onOpenChange={onOpenChange}>
-        <Sheet.Trigger asChild data-testid="quality_selector">
-          <Flex
-            css={{
-              color: '$on_primary_high',
-              r: '$1',
-              cursor: 'pointer',
-              p: '$2',
-            }}
-          >
-            <SettingsIcon />
-          </Flex>
-        </Sheet.Trigger>
-        <Sheet.Content
-          container={containerRef}
-          css={{ bg: '$surface_default', pb: '$1' }}
-          onClick={() => onOpenChange(false)}
-        >
-          <Sheet.Title
-            css={{
-              display: 'flex',
-              color: '$on_surface_high',
-              w: '100%',
-              justifyContent: 'space-between',
-              mt: '$8',
-              fontSize: '$md',
-              px: '$10',
-              pb: '$8',
-              borderBottom: '1px solid $border_bright',
-              alignItems: 'center',
-            }}
-          >
-            Quality
-            <Sheet.Close css={{ color: '$on_surface_high' }} onClick={() => onOpenChange(false)}>
-              <CrossIcon />
-            </Sheet.Close>
-          </Sheet.Title>
-          {layers.map(layer => {
-            return (
-              <Flex
-                align="center"
-                css={{
-                  w: '100%',
-                  bg: '$surface_default',
-                  '&:hover': {
-                    bg: '$surface_brighter',
-                  },
-                  cursor: 'pointer',
-                  gap: '$4',
-                  py: '$8',
-                  px: '$10',
-                }}
-                key={layer.width}
-                onClick={() => onQualityChange(layer)}
-              >
-                <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 && (
-                  <CheckIcon width="16px" height="16px" />
-                )}
-              </Flex>
-            );
-          })}
-          <Flex
-            align="center"
-            css={{
-              w: '100%',
-              bg: '$surface_default',
-              '&:hover': {
-                bg: '$surface_brighter',
-              },
-              cursor: 'pointer',
-              gap: '$4',
-              py: '$8',
-              px: '$10',
-            }}
-            key="auto"
-            onClick={() => onQualityChange({ height: 'auto' })}
-          >
-            <Text variant="caption" css={{ fontWeight: '$semiBold', flex: '1 1 0' }}>
-              Auto
-            </Text>
-            {isAuto && <CheckIcon width="16px" height="16px" />}
-          </Flex>
-        </Sheet.Content>
-      </Sheet.Root>
-    );
-  }
-  return (
-    <Dropdown.Root open={open} onOpenChange={value => onOpenChange(value)} modal={false}>
-      <Dropdown.Trigger asChild data-testid="quality_selector">
-        <Flex
-          css={{
-            color: '$on_primary_high',
-            r: '$1',
-            cursor: 'pointer',
-            p: '$2',
-          }}
-        >
-          <Tooltip title="Select Quality" side="top">
-            <Flex align="center">
-              <Box
-                css={{
-                  w: '$9',
-                  h: '$9',
-                  display: 'inline-flex',
-                  alignItems: 'center',
-                  c: '$on_surface_high',
-                }}
-              >
-                <SettingsIcon />
-              </Box>
-              <Text
-                variant={{
-                  '@md': 'sm',
-                  '@sm': 'xs',
-                  '@xs': 'tiny',
-                }}
-                css={{ display: 'flex', alignItems: 'center', ml: '$2', c: '$on_surface_medium' }}
-              >
-                {isAuto && (
-                  <>
-                    Auto
-                    <Box
-                      css={{
-                        mx: '$2',
-                        w: '$2',
-                        h: '$2',
-                        background: '$on_surface_medium',
-                        r: '$1',
-                      }}
-                    />
-                  </>
-                )}
-                {selection && Math.min(selection.width || 0, selection.height || 0)}p
-              </Text>
-            </Flex>
-          </Tooltip>
-        </Flex>
-      </Dropdown.Trigger>
-      <Dropdown.Portal container={containerRef}>
-        <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}
-                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 && (
-                  <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.Portal>
-    </Dropdown.Root>
-  );
-}
-
-const getQualityText = (layer: HMSHLSLayer) => `${Math.min(layer.height || 0, layer.width || 0)}p `;
-const getBitrateText = (layer: HMSHLSLayer) => `(${(Number(layer.bitrate / 1000) / 1000).toFixed(2)} Mbps)`;