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

package/src/Prebuilt/components/MoreSettings/EmbedUrl.jsx

@@ -1,81 +0,0 @@
-import React, { useState } from 'react';
-import { LinkIcon } from '@100mslive/react-icons';
-import { Button, Dialog, Dropdown, Flex, Input, Text } from '../../../';
-import { useSetAppDataByKey } from '../AppData/useUISettings';
-import { APP_DATA } from '../../common/constants';
-
-export const EmbedUrl = ({ setShowOpenUrl }) => {
-  if (!window.CropTarget) {
-    return null;
-  }
-
-  return (
-    <Dropdown.Item
-      onClick={() => {
-        setShowOpenUrl(true);
-      }}
-      data-testid="embed_url_btn"
-    >
-      <LinkIcon />
-      <Text variant="sm" css={{ ml: '$4' }}>
-        Embed URL
-      </Text>
-    </Dropdown.Item>
-  );
-};
-
-export function EmbedUrlModal({ onOpenChange }) {
-  const [embedConfig, setEmbedConfig] = useSetAppDataByKey(APP_DATA.embedConfig);
-  const [url, setUrl] = useState(embedConfig?.url || '');
-
-  return (
-    <Dialog.Root defaultOpen onOpenChange={onOpenChange}>
-      <Dialog.Portal>
-        <Dialog.Overlay />
-        <Dialog.Content css={{ w: 'min(420px, 90%)', p: '$8', bg: '$surface_dim' }}>
-          <Dialog.Title
-            css={{
-              borderBottom: '1px solid $border_default',
-              color: '$on_surface_high',
-              display: 'flex',
-              alignItems: 'center',
-            }}
-          >
-            Embed URL
-          </Dialog.Title>
-          <Text variant="sm" css={{ color: '$on_surface_medium', mt: '$4', mb: '$8' }}>
-            Ensure that you're sharing the current tab when the prompt opens. Note that not all websites support being
-            embedded.
-          </Text>
-          <Text variant="sm" css={{ color: '$on_surface_high' }}>
-            URL
-          </Text>
-          <Input
-            css={{ w: '100%', mt: '$4' }}
-            placeholder="Enter your URL"
-            value={url}
-            onChange={e => setUrl(e.target.value)}
-            type="url"
-          />
-          <Flex justify="between" css={{ w: '100%', gap: '$8', mt: '$8' }}>
-            <Button outlined variant="standard" css={{ w: '100%' }} onClick={() => onOpenChange(false)}>
-              Cancel
-            </Button>
-            <Button
-              css={{ w: '100%' }}
-              type="submit"
-              disabled={!url.toString().trim()}
-              onClick={() => {
-                setEmbedConfig({ url, shareScreen: true });
-                onOpenChange(false);
-              }}
-              data-testid="embed_url_btn"
-            >
-              Embed and Share
-            </Button>
-          </Flex>
-        </Dialog.Content>
-      </Dialog.Portal>
-    </Dialog.Root>
-  );
-}

package/src/Prebuilt/components/MoreSettings/FullScreenItem.tsx

@@ -1,26 +0,0 @@
-import React from 'react';
-import { ExpandIcon } from '@100mslive/react-icons';
-import { Dropdown, Text } from '../../..';
-import { useFullscreen } from '../hooks/useFullscreen';
-
-export const FullScreenItem = () => {
-  const { allowed, isFullscreen, toggleFullscreen } = useFullscreen();
-
-  if (!allowed) {
-    return null;
-  }
-
-  return (
-    <Dropdown.Item
-      onClick={() => {
-        toggleFullscreen();
-      }}
-      data-testid="full_screen_btn"
-    >
-      <ExpandIcon />
-      <Text variant="sm" css={{ ml: '$4' }}>
-        {isFullscreen ? 'Exit ' : 'Go '}Fullscreen
-      </Text>
-    </Dropdown.Item>
-  );
-};

package/src/Prebuilt/components/MoreSettings/MoreSettings.tsx

@@ -1,29 +0,0 @@
-import React from 'react';
-import { useMedia } from 'react-use';
-import {
-  ConferencingScreen,
-  DefaultConferencingScreen_Elements,
-  HLSLiveStreamingScreen_Elements,
-} from '@100mslive/types-prebuilt';
-// @ts-ignore: No implicit Any
-import { DesktopOptions } from './SplitComponents/DesktopOptions';
-// @ts-ignore: No implicit Any
-import { MwebOptions } from './SplitComponents/MwebOptions';
-import { config as cssConfig } from '../../..';
-import { useLandscapeHLSStream } from '../../common/hooks';
-
-export const MoreSettings = ({
-  elements,
-  screenType,
-}: {
-  elements: DefaultConferencingScreen_Elements | HLSLiveStreamingScreen_Elements;
-  screenType: keyof ConferencingScreen;
-}) => {
-  const isMobile = useMedia(cssConfig.media.md);
-  const isLandscapeHLSStream = useLandscapeHLSStream();
-  return isMobile || isLandscapeHLSStream ? (
-    <MwebOptions elements={elements} screenType={screenType} />
-  ) : (
-    <DesktopOptions elements={elements} screenType={screenType} />
-  );
-};

package/src/Prebuilt/components/MoreSettings/MuteAllContent.tsx

@@ -1,81 +0,0 @@
-import React from 'react';
-import { HMSRoleName, HMSTrackSource, HMSTrackType, selectPermissions, useHMSStore } from '@100mslive/react-sdk';
-import { Button } from '../../../Button';
-import { Label } from '../../../Label';
-import { Flex } from '../../../Layout';
-import { RadioGroup } from '../../../RadioGroup';
-import { Text } from '../../../Text';
-// @ts-ignore: No implicit any
-import { DialogRow, DialogSelect } from '../../primitives/DialogContent';
-import { trackSourceOptions, trackTypeOptions } from './constants';
-
-export const MuteAllContent = (props: {
-  muteAll: () => Promise<void>;
-  roles?: HMSRoleName[];
-  enabled: boolean;
-  setEnabled: (value: boolean) => void;
-  trackType?: HMSTrackType;
-  setTrackType: (value: HMSTrackType) => void;
-  selectedRole?: HMSRoleName;
-  setRole: (value: HMSRoleName) => void;
-  selectedSource?: HMSTrackSource;
-  setSource: (value: HMSTrackSource) => void;
-  isMobile: boolean;
-}) => {
-  const roles = props.roles || [];
-  const permissions = useHMSStore(selectPermissions);
-  return (
-    <>
-      <DialogSelect
-        title="Role"
-        options={[{ label: 'All Roles', value: '' }, ...roles.map(role => ({ label: role, value: role }))]}
-        selected={props.selectedRole}
-        keyField="value"
-        labelField="label"
-        onChange={props.setRole}
-      />
-      <DialogSelect
-        title="Track type"
-        options={trackTypeOptions}
-        selected={props.trackType}
-        onChange={props.setTrackType}
-        keyField="value"
-        labelField="label"
-      />
-      <DialogSelect
-        title="Track source"
-        options={trackSourceOptions}
-        selected={props.selectedSource}
-        onChange={props.setSource}
-        keyField="value"
-        labelField="label"
-      />
-      <DialogRow>
-        <Text variant="md">Track status</Text>
-        <RadioGroup.Root value={String(props.enabled)} onValueChange={value => props.setEnabled(value === 'true')}>
-          {permissions?.mute && (
-            <Flex align="center" css={{ mr: '$8' }}>
-              <RadioGroup.Item value="false" id="trackDisableRadio" css={{ mr: '$4' }}>
-                <RadioGroup.Indicator />
-              </RadioGroup.Item>
-              <Label htmlFor="trackDisableRadio">Mute</Label>
-            </Flex>
-          )}
-          {permissions?.unmute && (
-            <Flex align="center" css={{ cursor: 'pointer' }}>
-              <RadioGroup.Item value="true" id="trackEnableRadio" css={{ mr: '$4' }}>
-                <RadioGroup.Indicator />
-              </RadioGroup.Item>
-              <Label htmlFor="trackEnableRadio">Request Unmute</Label>
-            </Flex>
-          )}
-        </RadioGroup.Root>
-      </DialogRow>
-      <DialogRow justify="end">
-        <Button variant="primary" onClick={props.muteAll} css={{ w: props?.isMobile ? '100%' : '' }}>
-          Apply
-        </Button>
-      </DialogRow>
-    </>
-  );
-};

package/src/Prebuilt/components/MoreSettings/MuteAllModal.tsx

@@ -1,72 +0,0 @@
-import React, { useCallback, useState } from 'react';
-import {
-  HMSRoleName,
-  HMSTrackSource,
-  HMSTrackType,
-  selectAvailableRoleNames,
-  useHMSActions,
-  useHMSStore,
-} from '@100mslive/react-sdk';
-import { MicOffIcon } from '@100mslive/react-icons';
-import { Dialog } from '../../..';
-import { Sheet } from '../../../Sheet';
-// @ts-ignore: No implicit any
-import { DialogContent } from '../../primitives/DialogContent';
-import { MuteAllContent } from './MuteAllContent';
-
-export const MuteAllModal = ({
-  onOpenChange,
-  isMobile = false,
-}: {
-  onOpenChange: (value: boolean) => void;
-  isMobile?: boolean;
-}) => {
-  const roles = useHMSStore(selectAvailableRoleNames);
-  const hmsActions = useHMSActions();
-  const [enabled, setEnabled] = useState(false);
-  const [trackType, setTrackType] = useState<HMSTrackType>();
-  const [selectedRole, setRole] = useState<HMSRoleName>();
-  const [selectedSource, setSource] = useState<HMSTrackSource>();
-
-  const muteAll = useCallback(async () => {
-    await hmsActions.setRemoteTracksEnabled({
-      enabled: enabled,
-      type: trackType,
-      source: selectedSource,
-      roles: selectedRole ? [selectedRole] : undefined,
-    });
-    onOpenChange(false);
-  }, [selectedRole, enabled, trackType, selectedSource, hmsActions, onOpenChange]);
-
-  const props = {
-    muteAll,
-    roles,
-    enabled,
-    setEnabled,
-    trackType,
-    setTrackType,
-    selectedRole,
-    setRole,
-    selectedSource,
-    setSource,
-    isMobile,
-  };
-
-  if (isMobile) {
-    return (
-      <Sheet.Root defaultOpen onOpenChange={onOpenChange}>
-        <Sheet.Content css={{ px: '$10' }}>
-          <MuteAllContent {...props} />
-        </Sheet.Content>
-      </Sheet.Root>
-    );
-  }
-
-  return (
-    <Dialog.Root defaultOpen onOpenChange={onOpenChange}>
-      <DialogContent title="Mute/Unmute Remote Tracks" Icon={MicOffIcon}>
-        <MuteAllContent {...props} />
-      </DialogContent>
-    </Dialog.Root>
-  );
-};

package/src/Prebuilt/components/MoreSettings/SplitComponents/DesktopOptions.tsx

@@ -1,282 +0,0 @@
-import React, { Fragment, useState } from 'react';
-import { HMSHLSPlayer } from '@100mslive/hls-player';
-import {
-  ConferencingScreen,
-  DefaultConferencingScreen_Elements,
-  HLSLiveStreamingScreen_Elements,
-} from '@100mslive/types-prebuilt';
-import { match } from 'ts-pattern';
-import {
-  HMSTranscriptionMode,
-  selectAppData,
-  selectIsTranscriptionAllowedByMode,
-  selectIsTranscriptionEnabled,
-  selectLocalPeerID,
-  useHMSActions,
-  useHMSStore,
-} from '@100mslive/react-sdk';
-import {
-  BrbIcon,
-  CheckIcon,
-  HamburgerMenuIcon,
-  InfoIcon,
-  OpenCaptionIcon,
-  PipIcon,
-  SettingsIcon,
-} from '@100mslive/react-icons';
-import { Checkbox, Dropdown, Flex, Switch, Text, Tooltip } from '../../../..';
-import IconButton from '../../../IconButton';
-// @ts-ignore: No implicit any
-import { PIP } from '../../PIP';
-import { PIPChat } from '../../PIP/PIPChat';
-// @ts-ignore: No implicit any
-import { PIPChatOption } from '../../PIP/PIPChatOption';
-import { PictureInPicture } from '../../PIP/PIPManager';
-import { PIPWindow } from '../../PIP/PIPWindow';
-// @ts-ignore: No implicit any
-import { RoleChangeModal } from '../../RoleChangeModal';
-// @ts-ignore: No implicit any
-import SettingsModal from '../../Settings/SettingsModal';
-// @ts-ignore: No implicit any
-import StartRecording from '../../Settings/StartRecording';
-// @ts-ignore: No implicit any
-import { StatsForNerds } from '../../StatsForNerds';
-// @ts-ignore: No implicit any
-import { BulkRoleChangeModal } from '../BulkRoleChangeModal';
-import { CaptionModal } from '../CaptionModal';
-// @ts-ignore: No implicit any
-import { FullScreenItem } from '../FullScreenItem';
-import { MuteAllModal } from '../MuteAllModal';
-// @ts-ignore: No implicit any
-import { useIsSidepaneTypeOpen, useSidepaneToggle } from '../../AppData/useSidepane';
-// @ts-ignore: No implicit any
-import { useDropdownList } from '../../hooks/useDropdownList';
-import { useMyMetadata } from '../../hooks/useMetadata';
-// @ts-ignore: No implicit any
-import { usePIPChat } from '../../PIP/usePIPChat';
-// @ts-ignore: No implicit any
-import { APP_DATA, isMacOS, SIDE_PANE_OPTIONS } from '../../../common/constants';
-
-const MODALS = {
-  CHANGE_NAME: 'changeName',
-  SELF_ROLE_CHANGE: 'selfRoleChange',
-  MORE_SETTINGS: 'moreSettings',
-  START_RECORDING: 'startRecording',
-  DEVICE_SETTINGS: 'deviceSettings',
-  STATS_FOR_NERDS: 'statsForNerds',
-  BULK_ROLE_CHANGE: 'bulkRoleChange',
-  MUTE_ALL: 'muteAll',
-  EMBED_URL: 'embedUrl',
-  CAPTION: 'caption',
-};
-
-export const DesktopOptions = ({
-  elements,
-  screenType,
-}: {
-  elements: DefaultConferencingScreen_Elements & HLSLiveStreamingScreen_Elements;
-  screenType: keyof ConferencingScreen;
-}) => {
-  const localPeerId = useHMSStore(selectLocalPeerID);
-  const hmsActions = useHMSActions();
-  const enablHlsStats = useHMSStore(selectAppData(APP_DATA.hlsStats));
-  const [openModals, setOpenModals] = useState(new Set());
-  const { isBRBOn, toggleBRB } = useMyMetadata();
-  const isPipOn = PictureInPicture.isOn();
-  const isBRBEnabled = !!elements?.brb;
-  const isTranscriptionAllowed = useHMSStore(selectIsTranscriptionAllowedByMode(HMSTranscriptionMode.CAPTION));
-  const isTranscriptionEnabled = useHMSStore(selectIsTranscriptionEnabled);
-  const { isSupported, pipWindow, requestPipWindow } = usePIPChat();
-  const isChatOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.CHAT);
-  const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
-  // Hide if pip chat is already open
-  const showPipChatOption = !!elements?.chat && isSupported && !pipWindow;
-
-  useDropdownList({ open: openModals.size > 0, name: 'MoreSettings' });
-
-  const updateState = (modalName: string, value: boolean) => {
-    setOpenModals(modals => {
-      const copy = new Set(modals);
-      if (value) {
-        // avoiding extra set state trigger which removes currently open dialog by clearing set.
-        copy.clear();
-        copy.add(modalName);
-      } else {
-        copy.delete(modalName);
-      }
-      return copy;
-    });
-  };
-
-  return (
-    <Fragment>
-      {isSupported && pipWindow ? (
-        <PIPWindow pipWindow={pipWindow}>
-          <PIPChat />
-        </PIPWindow>
-      ) : null}
-      <Dropdown.Root
-        open={openModals.has(MODALS.MORE_SETTINGS)}
-        onOpenChange={value => updateState(MODALS.MORE_SETTINGS, value)}
-        modal={false}
-      >
-        <Tooltip title="More options">
-          <Dropdown.Trigger asChild data-testid="more_settings_btn">
-            <IconButton>
-              <HamburgerMenuIcon />
-            </IconButton>
-          </Dropdown.Trigger>
-        </Tooltip>
-
-        <Dropdown.Content
-          sideOffset={5}
-          onCloseAutoFocus={e => {
-            e.preventDefault();
-          }}
-          align="end"
-          css={{
-            py: '$0',
-            maxHeight: 'unset',
-            '@md': { w: '$64' },
-            "div[role='separator']:first-child": {
-              display: 'none',
-            },
-          }}
-        >
-          {isBRBEnabled && screenType !== 'hls_live_streaming' ? (
-            <Dropdown.Item onClick={toggleBRB} data-testid="brb_btn">
-              <BrbIcon />
-              <Text variant="sm" css={{ ml: '$4', color: '$on_surface_high' }}>
-                Be Right Back
-              </Text>
-              <Flex justify="end" css={{ color: '$on_surface_high', flexGrow: '1' }}>
-                {isBRBOn ? <CheckIcon /> : null}
-              </Flex>
-            </Dropdown.Item>
-          ) : null}
-          {isTranscriptionAllowed ? (
-            <Dropdown.Item
-              data-testid="closed_caption_admin"
-              onClick={() => {
-                updateState(MODALS.CAPTION, true);
-              }}
-            >
-              <OpenCaptionIcon />
-              <Flex direction="column" css={{ flexGrow: '1' }}>
-                <Text variant="sm" css={{ ml: '$4', color: '$on_surface_high' }}>
-                  Closed Captions
-                </Text>
-                <Text variant="caption" css={{ ml: '$4', color: '$on_surface_medium' }}>
-                  {isTranscriptionEnabled ? 'Enabled' : 'Disabled'}
-                </Text>
-              </Flex>
-              <Switch id="closed_caption_start_stop" checked={isTranscriptionEnabled} disabled={false} />
-            </Dropdown.Item>
-          ) : null}
-          {screenType !== 'hls_live_streaming' ? (
-            <Dropdown.Item css={{ p: 0, '&:empty': { display: 'none' } }}>
-              <PIP
-                content={
-                  <Flex css={{ w: '100%', h: '100%', p: '$8' }}>
-                    <PipIcon />
-                    <Text variant="sm" css={{ ml: '$4' }}>
-                      {isPipOn ? 'Disable' : 'Enable'} Picture-in-Picture
-                    </Text>
-                  </Flex>
-                }
-              />
-            </Dropdown.Item>
-          ) : null}
-
-          <PIPChatOption
-            showPIPChat={showPipChatOption}
-            openChat={async () => {
-              isChatOpen && toggleChat();
-              await requestPipWindow(350, 500);
-            }}
-          />
-          <FullScreenItem />
-          <Dropdown.ItemSeparator css={{ mx: 0 }} />
-          <Dropdown.Item onClick={() => updateState(MODALS.DEVICE_SETTINGS, true)} data-testid="device_settings_btn">
-            <SettingsIcon />
-            <Text variant="sm" css={{ ml: '$4' }}>
-              Settings
-            </Text>
-          </Dropdown.Item>
-          {match({ screenType, isSupported: HMSHLSPlayer.isSupported() })
-            .with({ screenType: 'hls_live_streaming', isSupported: false }, () => null)
-            .with({ screenType: 'hls_live_streaming', isSupported: true }, () => {
-              return (
-                <Dropdown.Item
-                  onClick={() => hmsActions.setAppData(APP_DATA.hlsStats, !enablHlsStats)}
-                  data-testid="hls_stats"
-                >
-                  <Checkbox.Root
-                    css={{ margin: '$2' }}
-                    checked={enablHlsStats}
-                    onCheckedChange={() => hmsActions.setAppData(APP_DATA.hlsStats, !enablHlsStats)}
-                  >
-                    <Checkbox.Indicator>
-                      <CheckIcon width={16} height={16} />
-                    </Checkbox.Indicator>
-                  </Checkbox.Root>
-                  <Flex justify="between" css={{ width: '100%' }}>
-                    <Text variant="sm" css={{ ml: '$4' }}>
-                      Show HLS Stats
-                    </Text>
-
-                    <Text variant="sm" css={{ ml: '$4' }}>
-                      {`${isMacOS ? '⌘' : 'ctrl'} + ]`}
-                    </Text>
-                  </Flex>
-                </Dropdown.Item>
-              );
-            })
-            .otherwise(() => (
-              <Dropdown.Item
-                onClick={() => updateState(MODALS.STATS_FOR_NERDS, true)}
-                data-testid="stats_for_nerds_btn"
-              >
-                <InfoIcon />
-                <Text variant="sm" css={{ ml: '$4' }}>
-                  Stats for Nerds
-                </Text>
-              </Dropdown.Item>
-            ))}
-        </Dropdown.Content>
-      </Dropdown.Root>
-      {openModals.has(MODALS.BULK_ROLE_CHANGE) && (
-        <BulkRoleChangeModal onOpenChange={(value: boolean) => updateState(MODALS.BULK_ROLE_CHANGE, value)} />
-      )}
-      {openModals.has(MODALS.MUTE_ALL) && (
-        <MuteAllModal onOpenChange={(value: boolean) => updateState(MODALS.MUTE_ALL, value)} />
-      )}
-
-      {openModals.has(MODALS.START_RECORDING) && (
-        <StartRecording open onOpenChange={(value: boolean) => updateState(MODALS.START_RECORDING, value)} />
-      )}
-      {openModals.has(MODALS.DEVICE_SETTINGS) && (
-        <SettingsModal
-          open
-          onOpenChange={(value: boolean) => updateState(MODALS.DEVICE_SETTINGS, value)}
-          screenType={screenType}
-        />
-      )}
-      {openModals.has(MODALS.STATS_FOR_NERDS) && (
-        <StatsForNerds open onOpenChange={(value: boolean) => updateState(MODALS.STATS_FOR_NERDS, value)} />
-      )}
-      {openModals.has(MODALS.SELF_ROLE_CHANGE) && (
-        <RoleChangeModal
-          peerId={localPeerId}
-          onOpenChange={(value: boolean) => updateState(MODALS.SELF_ROLE_CHANGE, value)}
-        />
-      )}
-      {openModals.has(MODALS.CAPTION) && (
-        <CaptionModal onOpenChange={(value: boolean) => updateState(MODALS.CAPTION, value)} />
-      )}
-      {/* {openModals.has(MODALS.EMBED_URL) && (
-        <EmbedUrlModal onOpenChange={value => updateState(MODALS.EMBED_URL, value)} />
-      )} */}
-    </Fragment>
-  );
-};