@100mslive/roomkit-react 0.4.3-alpha.0 → 0.4.3-alpha.10

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

@@ -1,123 +0,0 @@
-import React, { useEffect, useRef } from 'react';
-import { ChevronLeftIcon, CrossIcon } from '@100mslive/react-icons';
-import { Button } from '../../../Button';
-import { Input } from '../../../Input';
-import { Box, Flex } from '../../../Layout';
-import { Text } from '../../../Text';
-
-export const ChangeNameContent = ({
-  changeName,
-  setCurrentName,
-  currentName,
-  localPeerName,
-  isMobile,
-  onExit,
-  onBackClick,
-}: {
-  changeName: () => Promise<void>;
-  setCurrentName: (name: string) => void;
-  currentName?: string;
-  localPeerName?: string;
-  isMobile: boolean;
-  onExit: () => void;
-  onBackClick: () => void;
-}) => {
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  useEffect(() => {
-    if (isMobile) {
-      setTimeout(() => {
-        inputRef.current?.focus();
-      }, 200);
-    }
-  }, [isMobile]);
-
-  return (
-    <form
-      onSubmit={async e => {
-        e.preventDefault();
-        await changeName();
-      }}
-    >
-      <Text
-        variant={isMobile ? 'md' : 'lg'}
-        css={{
-          color: '$on_surface_high',
-          fontWeight: '$semiBold',
-          display: 'flex',
-          pb: '$4',
-          '@md': { px: '$8', borderBottom: '1px solid $border_default' },
-        }}
-      >
-        {isMobile ? <ChevronLeftIcon onClick={onBackClick} style={{ marginRight: '0.5rem' }} /> : null}
-        Change Name
-        <Box
-          css={{ color: 'inherit', ml: 'auto', '&:hover': { color: '$on_surface_medium', cursor: 'pointer' } }}
-          onClick={onExit}
-        >
-          <CrossIcon />
-        </Box>
-      </Text>
-      <Text variant="sm" css={{ color: '$on_surface_medium', pb: '$6', mb: '$8', '@md': { px: '$8', mt: '$4' } }}>
-        Your name will be visible to other participants in the session.
-      </Text>
-      <Flex justify="center" align="center" css={{ my: '$8', w: '100%', '@md': { px: '$8' } }}>
-        <Input
-          ref={inputRef}
-          css={{ width: '100%', bg: '$surface_default' }}
-          value={currentName}
-          type="text"
-          onChange={e => {
-            setCurrentName(e.target.value);
-          }}
-          autoComplete="name"
-          required
-          data-testid="change_name_field"
-          onKeyDown={async e => {
-            if (e.key === 'Enter' && currentName && currentName.trim().length > 0 && currentName !== localPeerName) {
-              e.preventDefault();
-              if (isMobile) {
-                return;
-              }
-              changeName();
-            }
-          }}
-        />
-      </Flex>
-
-      <Flex
-        justify="between"
-        align="center"
-        css={{
-          width: '100%',
-          gap: '$md',
-          mt: '$10',
-          '@md': { px: '$4' },
-        }}
-      >
-        {isMobile ? null : (
-          <Button
-            variant="standard"
-            css={{ w: '100%' }}
-            outlined
-            type="submit"
-            disabled={!localPeerName}
-            onClick={onExit}
-          >
-            Cancel
-          </Button>
-        )}
-
-        <Button
-          variant="primary"
-          css={{ width: '100%' }}
-          type="submit"
-          disabled={!currentName?.trim() || currentName?.trim() === localPeerName}
-          data-testid="popup_change_btn"
-        >
-          Change
-        </Button>
-      </Flex>
-    </form>
-  );
-};

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

@@ -1,78 +0,0 @@
-import React, { useState } from 'react';
-import { useMedia } from 'react-use';
-import { selectLocalPeerName, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
-import { config as cssConfig, Dialog } from '../../..';
-import { Sheet } from '../../../Sheet';
-// @ts-ignore: No implicit Any
-import { ToastManager } from '../Toast/ToastManager';
-// @ts-ignore: No implicit Any
-import { ChangeNameContent } from './ChangeNameContent';
-// @ts-ignore: No implicit Any
-import { UserPreferencesKeys, useUserPreferences } from '../hooks/useUserPreferences';
-
-export const ChangeNameModal = ({
-  onOpenChange,
-  openParentSheet = undefined,
-}: {
-  onOpenChange: (value: boolean) => void;
-  openParentSheet?: () => void;
-}) => {
-  const [previewPreference, setPreviewPreference] = useUserPreferences(UserPreferencesKeys.PREVIEW);
-  const hmsActions = useHMSActions();
-  const localPeerName = useHMSStore(selectLocalPeerName);
-  const [currentName, setCurrentName] = useState(localPeerName);
-  const isMobile = useMedia(cssConfig.media.md);
-
-  const changeName = async () => {
-    const name = currentName?.trim() || '';
-    if (!name || name === localPeerName) {
-      return;
-    }
-    try {
-      await hmsActions.changeName(name);
-      setPreviewPreference({
-        ...(previewPreference || {}),
-        name,
-      });
-    } catch (error) {
-      console.error('failed to update name', error);
-      ToastManager.addToast({ title: (error as Error).message });
-    } finally {
-      onOpenChange(false);
-    }
-  };
-
-  const props = {
-    changeName,
-    setCurrentName,
-    currentName,
-    localPeerName,
-    isMobile,
-    onExit: () => onOpenChange(false),
-    onBackClick: () => {
-      onOpenChange(false);
-      openParentSheet?.();
-    },
-  };
-
-  if (isMobile) {
-    return (
-      <Sheet.Root defaultOpen onOpenChange={onOpenChange}>
-        <Sheet.Content css={{ bg: '$surface_dim', p: '$8 0' }} onOpenAutoFocus={e => e.preventDefault()}>
-          <ChangeNameContent {...props} />
-        </Sheet.Content>
-      </Sheet.Root>
-    );
-  }
-
-  return (
-    <Dialog.Root defaultOpen onOpenChange={onOpenChange}>
-      <Dialog.Portal>
-        <Dialog.Overlay />
-        <Dialog.Content css={{ bg: '$surface_dim', width: 'min(400px,80%)', p: '$10' }}>
-          <ChangeNameContent {...props} />
-        </Dialog.Content>
-      </Dialog.Portal>
-    </Dialog.Root>
-  );
-};

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>
-  );
-};