From f02c89e1c6d9fcda86f30bc6569023fc73ac70f8 Mon Sep 17 00:00:00 2001 From: raviteja83 Date: Sat, 24 Feb 2024 23:20:12 +0530 Subject: [PATCH] refactor: rename to tsx --- ...{FullScreenItem.jsx => FullScreenItem.tsx} | 2 +- ...{MuteAllContent.jsx => MuteAllContent.tsx} | 28 +++++++++--- .../{MuteAllModal.jsx => MuteAllModal.tsx} | 45 +++++++++---------- .../SplitComponents/DesktopOptions.tsx | 2 - .../components/MoreSettings/constants.ts | 12 +++++ .../{useFullscreen.js => useFullscreen.ts} | 8 ++-- 6 files changed, 61 insertions(+), 36 deletions(-) rename packages/roomkit-react/src/Prebuilt/components/MoreSettings/{FullScreenItem.jsx => FullScreenItem.tsx} (92%) rename packages/roomkit-react/src/Prebuilt/components/MoreSettings/{MuteAllContent.jsx => MuteAllContent.tsx} (67%) rename packages/roomkit-react/src/Prebuilt/components/MoreSettings/{MuteAllModal.jsx => MuteAllModal.tsx} (58%) create mode 100644 packages/roomkit-react/src/Prebuilt/components/MoreSettings/constants.ts rename packages/roomkit-react/src/Prebuilt/components/hooks/{useFullscreen.js => useFullscreen.ts} (81%) diff --git a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/FullScreenItem.jsx b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/FullScreenItem.tsx similarity index 92% rename from packages/roomkit-react/src/Prebuilt/components/MoreSettings/FullScreenItem.jsx rename to packages/roomkit-react/src/Prebuilt/components/MoreSettings/FullScreenItem.tsx index d1aab038b9..fe2e0e1c12 100644 --- a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/FullScreenItem.jsx +++ b/packages/roomkit-react/src/Prebuilt/components/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/packages/roomkit-react/src/Prebuilt/components/MoreSettings/MuteAllContent.jsx b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/MuteAllContent.tsx similarity index 67% rename from packages/roomkit-react/src/Prebuilt/components/MoreSettings/MuteAllContent.jsx rename to packages/roomkit-react/src/Prebuilt/components/MoreSettings/MuteAllContent.tsx index 134839e87e..db21aedbc9 100644 --- a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/MuteAllContent.jsx +++ b/packages/roomkit-react/src/Prebuilt/components/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; + 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,7 +36,7 @@ export const MuteAllContent = props => { /> { /> { /> Track status - + props.setEnabled(value === 'true')}> {permissions?.mute && ( - + @@ -49,7 +63,7 @@ export const MuteAllContent = props => { )} {permissions?.unmute && ( - + diff --git a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/MuteAllModal.jsx b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/MuteAllModal.tsx similarity index 58% rename from packages/roomkit-react/src/Prebuilt/components/MoreSettings/MuteAllModal.jsx rename to packages/roomkit-react/src/Prebuilt/components/MoreSettings/MuteAllModal.tsx index d90d14c6a0..28edee380f 100644 --- a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/MuteAllModal.jsx +++ b/packages/roomkit-react/src/Prebuilt/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(); + const [selectedRole, setRole] = useState(); + const [selectedSource, setSource] = useState(); 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/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/DesktopOptions.tsx b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/DesktopOptions.tsx index 9fe6ae4b9d..902aef3d64 100644 --- a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/DesktopOptions.tsx +++ b/packages/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 new file mode 100644 index 0000000000..41c17d405f --- /dev/null +++ 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/packages/roomkit-react/src/Prebuilt/components/hooks/useFullscreen.js b/packages/roomkit-react/src/Prebuilt/components/hooks/useFullscreen.ts similarity index 81% rename from packages/roomkit-react/src/Prebuilt/components/hooks/useFullscreen.js rename to packages/roomkit-react/src/Prebuilt/components/hooks/useFullscreen.ts index 6f8b7f74a6..cd129b3576 100644 --- a/packages/roomkit-react/src/Prebuilt/components/hooks/useFullscreen.js +++ b/packages/roomkit-react/src/Prebuilt/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]);