refactor: rename to tsx

100mslive · Feb 24, 2024 · f02c89e · f02c89e
1 parent 1383a67
commit f02c89e
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 36 deletions.
diff --git a/...omponents/MoreSettings/FullScreenItem.jsx → ...omponents/MoreSettings/FullScreenItem.tsx b/...omponents/MoreSettings/FullScreenItem.jsx → ...omponents/MoreSettings/FullScreenItem.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { ExpandIcon } from '@100mslive/react-icons';
-import { Dropdown, Text } from '../../../';
+import { Dropdown, Text } from '../../..';
 import { useFullscreen } from '../hooks/useFullscreen';
 
 export const FullScreenItem = () => {

diff --git a/...omponents/MoreSettings/MuteAllContent.jsx → ...omponents/MoreSettings/MuteAllContent.tsx b/...omponents/MoreSettings/MuteAllContent.jsx → ...omponents/MoreSettings/MuteAllContent.tsx
@@ -1,13 +1,27 @@
 import React from 'react';
-import { selectPermissions, useHMSStore } from '@100mslive/react-sdk';
+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 => {
+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 (
@@ -22,34 +36,34 @@ export const MuteAllContent = props => {
       />
       <DialogSelect
         title="Track type"
-        options={props.trackTypeOptions}
+        options={trackTypeOptions}
         selected={props.trackType}
         onChange={props.setTrackType}
         keyField="value"
         labelField="label"
       />
       <DialogSelect
         title="Track source"
-        options={props.trackSourceOptions}
+        options={trackSourceOptions}
         selected={props.selectedSource}
         onChange={props.setSource}
         keyField="value"
         labelField="label"
       />
       <DialogRow>
         <Text variant="md">Track status</Text>
-        <RadioGroup.Root value={props.enabled} onValueChange={props.setEnabled}>
+        <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.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.Item value="true" id="trackEnableRadio" css={{ mr: '$4' }}>
                 <RadioGroup.Indicator />
               </RadioGroup.Item>
               <Label htmlFor="trackEnableRadio">Request Unmute</Label>

diff --git a/.../components/MoreSettings/MuteAllModal.jsx → .../components/MoreSettings/MuteAllModal.tsx b/.../components/MoreSettings/MuteAllModal.jsx → .../components/MoreSettings/MuteAllModal.tsx
@@ -1,31 +1,32 @@
 import React, { useCallback, useState } from 'react';
-import { useHMSActions } from '@100mslive/react-sdk';
+import {
+  HMSRoleName,
+  HMSTrackSource,
+  HMSTrackType,
+  selectAvailableRoleNames,
+  useHMSActions,
+  useHMSStore,
+} from '@100mslive/react-sdk';
 import { MicOffIcon } from '@100mslive/react-icons';
-import { Dialog } from '../../../';
+import { Dialog } from '../../..';
 import { Sheet } from '../../../Sheet';
+// @ts-ignore: No implicit any
 import { DialogContent } from '../../primitives/DialogContent';
 import { MuteAllContent } from './MuteAllContent';
-import { useFilteredRoles } from '../../common/hooks';
 
-const trackSourceOptions = [
-  { label: 'All Track Sources', value: '' },
-  { label: 'regular', value: 'regular' },
-  { label: 'screen', value: 'screen' },
-  { label: 'audioplaylist', value: 'audioplaylist' },
-  { label: 'videoplaylist', value: 'videoplaylist' },
-];
-const trackTypeOptions = [
-  { label: 'All Track Types', value: '' },
-  { label: 'audio', value: 'audio' },
-  { label: 'video', value: 'video' },
-];
-export const MuteAllModal = ({ onOpenChange, isMobile = false }) => {
-  const roles = useFilteredRoles();
+export const MuteAllModal = ({
+  onOpenChange,
+  isMobile = false,
+}: {
+  onOpenChange: (value: boolean) => void;
+  isMobile?: boolean;
+}) => {
+  const roles = useHMSStore(selectAvailableRoleNames);
   const hmsActions = useHMSActions();
-  const [enabled, setEnabled] = useState();
-  const [trackType, setTrackType] = useState();
-  const [selectedRole, setRole] = useState();
-  const [selectedSource, setSource] = useState();
+  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({
@@ -48,8 +49,6 @@ export const MuteAllModal = ({ onOpenChange, isMobile = false }) => {
     setRole,
     selectedSource,
     setSource,
-    trackSourceOptions,
-    trackTypeOptions,
     isMobile,
   };
 

diff --git a/...ges/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/DesktopOptions.tsx b/...ges/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/DesktopOptions.tsx
@@ -16,7 +16,6 @@ import {
   SettingsIcon,
 } from '@100mslive/react-icons';
 import { Checkbox, Dropdown, Flex, Text, Tooltip } from '../../../..';
-// @ts-ignore: No implicit any
 import IconButton from '../../../IconButton';
 // @ts-ignore: No implicit any
 import { PIP } from '../../PIP';
@@ -34,7 +33,6 @@ import { StatsForNerds } from '../../StatsForNerds';
 import { BulkRoleChangeModal } from '../BulkRoleChangeModal';
 // @ts-ignore: No implicit any
 import { FullScreenItem } from '../FullScreenItem';
-// @ts-ignore: No implicit any
 import { MuteAllModal } from '../MuteAllModal';
 // @ts-ignore: No implicit any
 import { useDropdownList } from '../../hooks/useDropdownList';

diff --git a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/constants.ts b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/constants.ts
@@ -0,0 +1,12 @@
+export const trackSourceOptions = [
+  { label: 'All Track Sources', value: '' },
+  { label: 'regular', value: 'regular' },
+  { label: 'screen', value: 'screen' },
+  { label: 'audioplaylist', value: 'audioplaylist' },
+  { label: 'videoplaylist', value: 'videoplaylist' },
+];
+export const trackTypeOptions = [
+  { label: 'All Track Types', value: '' },
+  { label: 'audio', value: 'audio' },
+  { label: 'video', value: 'video' },
+];
diff --git a/...rebuilt/components/hooks/useFullscreen.js → ...rebuilt/components/hooks/useFullscreen.ts b/...rebuilt/components/hooks/useFullscreen.js → ...rebuilt/components/hooks/useFullscreen.ts
@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useState } from 'react';
 import screenfull from 'screenfull';
+// @ts-ignore: No implicit any
 import { ToastManager } from '../Toast/ToastManager';
 import { DEFAULT_PORTAL_CONTAINER } from '../../common/constants';
 
@@ -12,13 +13,14 @@ export const useFullscreen = () => {
       return;
     }
     try {
+      const container = document.querySelector(DEFAULT_PORTAL_CONTAINER);
       if (isFullScreenEnabled) {
         await screenfull.exit();
-      } else {
-        await screenfull.request(document.querySelector(DEFAULT_PORTAL_CONTAINER));
+      } else if (container) {
+        await screenfull.request(container);
       }
     } catch (err) {
-      ToastManager.addToast({ title: err.message });
+      ToastManager.addToast({ title: (err as Error).message });
     }
   }, [isFullScreenEnabled]);