diff --git a/packages/roomkit-react/src/Prebuilt/common/constants.js b/packages/roomkit-react/src/Prebuilt/common/constants.js index 870b928477..8f2c34ce9f 100644 --- a/packages/roomkit-react/src/Prebuilt/common/constants.js +++ b/packages/roomkit-react/src/Prebuilt/common/constants.js @@ -92,25 +92,6 @@ export const isIPadOS = false; // navigator?.maxTouchPoints > 2 && // navigator?.userAgent?.match(/Mac/); -export const FEATURE_LIST = { - AUDIO_ONLY_SCREENSHARE: 'audioscreenshare', - AUDIO_PLAYLIST: 'audioplaylist', - VIDEO_PLAYLIST: 'videoplaylist', - EMOJI_REACTION: 'emojireaction', - AUDIO_PLUGINS: 'audioplugins', - VIDEO_PLUGINS: 'videoplugins', - WHITEBOARD: 'whiteboard', - CHANGE_NAME: 'changename', - FULLSCREEN: 'fullscreen', - PICTURE_IN_PICTURE: 'pip', - STARTS_FOR_NERDS: 'statsfornerds', - EMBED_URL: 'embedurl', - BRB: 'brb', - HAND_RAISE: 'handraise', - CHAT: 'chat', - PIN_TILE: 'pintile', -}; - export const SESSION_STORE_KEY = { TRANSCRIPTION_STATE: 'transcriptionState', PINNED_MESSAGE: 'pinnedMessage', diff --git a/packages/roomkit-react/src/Prebuilt/components/EmojiReaction.jsx b/packages/roomkit-react/src/Prebuilt/components/EmojiReaction.jsx index 1fc72fec37..b5e2191f63 100644 --- a/packages/roomkit-react/src/Prebuilt/components/EmojiReaction.jsx +++ b/packages/roomkit-react/src/Prebuilt/components/EmojiReaction.jsx @@ -21,15 +21,13 @@ import { Tooltip } from '../../Tooltip'; import IconButton from '../IconButton'; import { useHLSViewerRole } from './AppData/useUISettings'; import { useDropdownList } from './hooks/useDropdownList'; -import { useIsFeatureEnabled } from './hooks/useFeatures'; -import { EMOJI_REACTION_TYPE, FEATURE_LIST } from '../common/constants'; +import { EMOJI_REACTION_TYPE } from '../common/constants'; init({ data }); export const EmojiReaction = () => { const [open, setOpen] = useState(false); const isConnected = useHMSStore(selectIsConnectedToRoom); - const isFeatureEnabled = useIsFeatureEnabled(FEATURE_LIST.EMOJI_REACTION); useDropdownList({ open: open, name: 'EmojiReaction' }); const hmsActions = useHMSActions(); const roles = useHMSStore(selectAvailableRoleNames); @@ -70,7 +68,7 @@ export const EmojiReaction = () => { } }; - if (!isConnected || !isFeatureEnabled) { + if (!isConnected) { return null; } return isMobile ? ( diff --git a/packages/roomkit-react/src/Prebuilt/components/Footer/ChatToggle.jsx b/packages/roomkit-react/src/Prebuilt/components/Footer/ChatToggle.jsx index 0463d626c1..f622d1faca 100644 --- a/packages/roomkit-react/src/Prebuilt/components/Footer/ChatToggle.jsx +++ b/packages/roomkit-react/src/Prebuilt/components/Footer/ChatToggle.jsx @@ -4,18 +4,12 @@ import { ChatIcon, ChatUnreadIcon } from '@100mslive/react-icons'; import { Tooltip } from '../../../'; import IconButton from '../../IconButton'; import { useIsSidepaneTypeOpen, useSidepaneToggle } from '../AppData/useSidepane'; -import { useIsFeatureEnabled } from '../hooks/useFeatures'; -import { FEATURE_LIST, SIDE_PANE_OPTIONS } from '../../common/constants'; +import { SIDE_PANE_OPTIONS } from '../../common/constants'; export const ChatToggle = () => { const countUnreadMessages = useHMSStore(selectUnreadHMSMessagesCount); const isChatOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.CHAT); const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT); - const isFeatureEnabled = useIsFeatureEnabled(FEATURE_LIST.CHAT); - - if (!isFeatureEnabled) { - return; - } return ( diff --git a/packages/roomkit-react/src/Prebuilt/components/MetaActions.jsx b/packages/roomkit-react/src/Prebuilt/components/MetaActions.jsx index 2465618b98..33ba25b373 100644 --- a/packages/roomkit-react/src/Prebuilt/components/MetaActions.jsx +++ b/packages/roomkit-react/src/Prebuilt/components/MetaActions.jsx @@ -4,40 +4,32 @@ import { BrbIcon, HandIcon } from '@100mslive/react-icons'; import { Flex } from '../../Layout'; import { Tooltip } from '../../Tooltip'; import IconButton from '../IconButton'; -import { useIsFeatureEnabled } from './hooks/useFeatures'; import { useMyMetadata } from './hooks/useMetadata'; -import { FEATURE_LIST } from '../common/constants'; const MetaActions = ({ isMobile = false, compact = false }) => { const isConnected = useHMSStore(selectIsConnectedToRoom); const { isHandRaised, isBRBOn, toggleHandRaise, toggleBRB } = useMyMetadata(); - const isHandRaiseEnabled = useIsFeatureEnabled(FEATURE_LIST.HAND_RAISE); - const isBRBEnabled = useIsFeatureEnabled(FEATURE_LIST.BRB); - if (!isConnected || (!isHandRaiseEnabled && !isBRBEnabled)) { + if (!isConnected) { return null; } return ( - {isHandRaiseEnabled && ( - - - - - - )} - {isBRBEnabled && ( - - - - - - )} + + + + + + + + + + ); }; diff --git a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/FullScreenItem.jsx b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/FullScreenItem.jsx index b63a1e8a89..d1aab038b9 100644 --- a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/FullScreenItem.jsx +++ b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/FullScreenItem.jsx @@ -1,15 +1,12 @@ import React from 'react'; import { ExpandIcon } from '@100mslive/react-icons'; import { Dropdown, Text } from '../../../'; -import { useIsFeatureEnabled } from '../hooks/useFeatures'; import { useFullscreen } from '../hooks/useFullscreen'; -import { FEATURE_LIST } from '../../common/constants'; export const FullScreenItem = () => { const { allowed, isFullscreen, toggleFullscreen } = useFullscreen(); - const isFullscreenEnabled = useIsFeatureEnabled(FEATURE_LIST.FULLSCREEN); - if (!isFullscreenEnabled || !allowed) { + if (!allowed) { return null; } diff --git a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/DesktopOptions.jsx b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/DesktopOptions.jsx index 37c40fd1e3..1d63911692 100644 --- a/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/DesktopOptions.jsx +++ b/packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/DesktopOptions.jsx @@ -20,11 +20,10 @@ import { BulkRoleChangeModal } from '.././BulkRoleChangeModal'; import { FullScreenItem } from '.././FullScreenItem'; import { MuteAllModal } from '.././MuteAllModal'; import { useDropdownList } from '../../hooks/useDropdownList'; -import { useIsFeatureEnabled } from '../../hooks/useFeatures'; import { useMyMetadata } from '../../hooks/useMetadata'; import { useIsLocalPeerHLSViewer, useShowStreamingUI } from '../../../common/hooks'; import { FeatureFlags } from '../../../services/FeatureFlags'; -import { APP_DATA, FEATURE_LIST, isMacOS } from '../../../common/constants'; +import { APP_DATA, isMacOS } from '../../../common/constants'; const MODALS = { CHANGE_NAME: 'changeName', @@ -43,14 +42,10 @@ export const DesktopOptions = () => { const localPeerRole = useHMSStore(selectLocalPeerRoleName); const hmsActions = useHMSActions(); const enablHlsStats = useHMSStore(selectAppData(APP_DATA.hlsStats)); - const isSFNEnabled = useIsFeatureEnabled(FEATURE_LIST.STARTS_FOR_NERDS); const [openModals, setOpenModals] = useState(new Set()); const { isHandRaised, isBRBOn, toggleHandRaise, toggleBRB } = useMyMetadata(); - const isHandRaiseEnabled = useIsFeatureEnabled(FEATURE_LIST.HAND_RAISE); - const isBRBEnabled = useIsFeatureEnabled(FEATURE_LIST.BRB); const showStreamingUI = useShowStreamingUI(); const isHlsViewer = useIsLocalPeerHLSViewer(); - const isPIPEnabled = useIsFeatureEnabled(FEATURE_LIST.PICTURE_IN_PICTURE); const isPipOn = PictureInPicture.isOn(); useDropdownList({ open: openModals.size > 0, name: 'MoreSettings' }); @@ -96,7 +91,7 @@ export const DesktopOptions = () => { }, }} > - {isHandRaiseEnabled && !(showStreamingUI || isHlsViewer) ? ( + {!(showStreamingUI || isHlsViewer) ? ( @@ -108,7 +103,7 @@ export const DesktopOptions = () => { ) : null} - {isBRBEnabled && !(showStreamingUI || isHlsViewer) ? ( + {!(showStreamingUI || isHlsViewer) ? ( @@ -120,11 +115,9 @@ export const DesktopOptions = () => { ) : null} - {(isBRBEnabled || isHandRaiseEnabled) && !(showStreamingUI || isHlsViewer) ? ( - - ) : null} + {!(showStreamingUI || isHlsViewer) ? : null} - {isPIPEnabled && !isHlsViewer ? ( + {!isHlsViewer ? ( { {FeatureFlags.enableStatsForNerds && - isSFNEnabled && (localPeerRole === 'hls-viewer' ? ( HMSHLSPlayer.isSupported() ? ( { const hmsActions = useHMSActions(); hmsActions.ignoreMessageTypes([LOWER_HAND]); const notification = useHMSNotifications(HMSNotificationTypes.NEW_MESSAGE); - const isChatEnabled = useIsFeatureEnabled(FEATURE_LIST.CHAT); const isNewMessageSubscribed = useSubscribedNotifications(SUBSCRIBED_NOTIFICATIONS.NEW_MESSAGE); const isHeadless = useIsHeadless(); const metadata = useMyMetadata(); @@ -25,11 +23,11 @@ export const MessageNotifications = () => { hmsActions.changeMetadata(newMetadata); } console.debug(`[${notification.type}]`, notification); - if (!isNewMessageSubscribed || notification.data?.ignored || !isChatEnabled) { + if (!isNewMessageSubscribed || notification.data?.ignored) { return; } ToastBatcher.showToast({ notification }); - }, [notification, isNewMessageSubscribed, isHeadless, isChatEnabled]); + }, [notification, isNewMessageSubscribed, isHeadless]); return null; }; diff --git a/packages/roomkit-react/src/Prebuilt/components/PIP/PIPComponent.jsx b/packages/roomkit-react/src/Prebuilt/components/PIP/PIPComponent.jsx index 4a5cfbd970..abdfee9511 100644 --- a/packages/roomkit-react/src/Prebuilt/components/PIP/PIPComponent.jsx +++ b/packages/roomkit-react/src/Prebuilt/components/PIP/PIPComponent.jsx @@ -13,8 +13,7 @@ import IconButton from '../../IconButton'; import { PictureInPicture } from './PIPManager'; import { MediaSession } from './SetupMediaSession'; import { usePinnedTrack } from '../AppData/useUISettings'; -import { useIsFeatureEnabled } from '../hooks/useFeatures'; -import { DEFAULT_HLS_VIEWER_ROLE, FEATURE_LIST } from '../../common/constants'; +import { DEFAULT_HLS_VIEWER_ROLE } from '../../common/constants'; /** * shows a button which when clicked shows some videos in PIP, clicking @@ -25,7 +24,6 @@ const PIPComponent = ({ content = null }) => { const [isPipOn, setIsPipOn] = useState(PictureInPicture.isOn()); const hmsActions = useHMSActions(); const store = useHMSVanillaStore(); - const isFeatureEnabled = useIsFeatureEnabled(FEATURE_LIST.PICTURE_IN_PICTURE); const onPipToggle = useCallback(() => { if (!isPipOn) { @@ -36,7 +34,7 @@ const PIPComponent = ({ content = null }) => { } }, [hmsActions, isPipOn, store]); - if (!PictureInPicture.isSupported() || localPeerRole === DEFAULT_HLS_VIEWER_ROLE || !isFeatureEnabled) { + if (!PictureInPicture.isSupported() || localPeerRole === DEFAULT_HLS_VIEWER_ROLE) { return null; } return ( diff --git a/packages/roomkit-react/src/Prebuilt/components/Playlist/Playlist.jsx b/packages/roomkit-react/src/Prebuilt/components/Playlist/Playlist.jsx index c7a9198992..d3bfa17aa7 100644 --- a/packages/roomkit-react/src/Prebuilt/components/Playlist/Playlist.jsx +++ b/packages/roomkit-react/src/Prebuilt/components/Playlist/Playlist.jsx @@ -5,9 +5,7 @@ import { Box, Dropdown, Flex, Text, Tooltip } from '../../../'; import IconButton from '../../IconButton'; import { AudioPlaylistControls } from './PlaylistControls'; import { PlaylistItem } from './PlaylistItem'; -import { useIsFeatureEnabled } from '../hooks/useFeatures'; import { usePlaylist } from '../hooks/usePlaylist'; -import { FEATURE_LIST } from '../../common/constants'; const BrowseAndPlayFromLocal = ({ type, actions }) => { return ( @@ -44,10 +42,7 @@ export const Playlist = ({ type }) => { const [open, setOpen] = useState(false); const [collapse, setCollapse] = useState(false); const isAllowedToPublish = useHMSStore(selectIsAllowedToPublish); - const isFeatureEnabled = useIsFeatureEnabled( - isAudioPlaylist ? FEATURE_LIST.AUDIO_PLAYLIST : FEATURE_LIST.VIDEO_PLAYLIST, - ); - if (!isAllowedToPublish.screen || playlist.length === 0 || !isFeatureEnabled) { + if (!isAllowedToPublish.screen || playlist.length === 0) { return null; } diff --git a/packages/roomkit-react/src/Prebuilt/components/RaiseHand.jsx b/packages/roomkit-react/src/Prebuilt/components/RaiseHand.jsx index 6927c5087e..c2433e385d 100644 --- a/packages/roomkit-react/src/Prebuilt/components/RaiseHand.jsx +++ b/packages/roomkit-react/src/Prebuilt/components/RaiseHand.jsx @@ -3,20 +3,13 @@ import { selectLocalPeer, selectPeerMetadata, useHMSStore } from '@100mslive/rea import { HandIcon } from '@100mslive/react-icons'; import { Tooltip } from '../../Tooltip'; import IconButton from '../IconButton'; -import { useIsFeatureEnabled } from './hooks/useFeatures'; import { useMyMetadata } from './hooks/useMetadata'; -import { FEATURE_LIST } from '../common/constants'; export const RaiseHand = () => { - const isHandRaiseEnabled = useIsFeatureEnabled(FEATURE_LIST.HAND_RAISE); const { toggleHandRaise } = useMyMetadata(); const localPeer = useHMSStore(selectLocalPeer); const isHandRaised = useHMSStore(selectPeerMetadata(localPeer.id))?.isHandRaised || false; - if (!isHandRaiseEnabled) { - return null; - } - return ( diff --git a/packages/roomkit-react/src/Prebuilt/components/TileMenu/TileMenu.jsx b/packages/roomkit-react/src/Prebuilt/components/TileMenu/TileMenu.jsx index 3e7801031b..936ac499d3 100644 --- a/packages/roomkit-react/src/Prebuilt/components/TileMenu/TileMenu.jsx +++ b/packages/roomkit-react/src/Prebuilt/components/TileMenu/TileMenu.jsx @@ -19,8 +19,6 @@ import { StyledMenuTile } from '../../../TileMenu'; import { ChangeNameModal } from '../MoreSettings/ChangeNameModal'; import { TileMenuContent } from './TileMenuContent'; import { useDropdownList } from '../hooks/useDropdownList'; -import { useIsFeatureEnabled } from '../hooks/useFeatures'; -import { FEATURE_LIST } from '../../common/constants'; /** * Taking peerID as peer won't necesarilly have tracks @@ -39,8 +37,7 @@ const TileMenu = ({ audioTrackID, videoTrackID, peerID, isScreenshare = false, c const uiMode = useHMSStore(selectTemplateAppData).uiMode; const isInset = uiMode === 'inset'; - const isPinEnabled = useIsFeatureEnabled(FEATURE_LIST.PIN_TILE); - const showPinAction = isPinEnabled && (audioTrackID || (videoTrackID && isPrimaryVideoTrack)) && !isInset; + const showPinAction = (audioTrackID || (videoTrackID && isPrimaryVideoTrack)) && !isInset; const track = useHMSStore(selectTrackByID(videoTrackID)); const hideSimulcastLayers = !track?.layerDefinitions?.length || track.degraded || !track.enabled; diff --git a/packages/roomkit-react/src/Prebuilt/components/TileMenu/TileMenuContent.jsx b/packages/roomkit-react/src/Prebuilt/components/TileMenu/TileMenuContent.jsx index b562d9f359..f836e145d2 100644 --- a/packages/roomkit-react/src/Prebuilt/components/TileMenu/TileMenuContent.jsx +++ b/packages/roomkit-react/src/Prebuilt/components/TileMenu/TileMenuContent.jsx @@ -28,8 +28,7 @@ import { StyledMenuTile } from '../../../TileMenu'; import { ToastManager } from '../Toast/ToastManager'; import { useSetAppDataByKey } from '../AppData/useUISettings'; import { useDropdownSelection } from '../hooks/useDropdownSelection'; -import { useIsFeatureEnabled } from '../hooks/useFeatures'; -import { APP_DATA, FEATURE_LIST, REMOTE_STOP_SCREENSHARE_TYPE, SESSION_STORE_KEY } from '../../common/constants'; +import { APP_DATA, REMOTE_STOP_SCREENSHARE_TYPE, SESSION_STORE_KEY } from '../../common/constants'; export const isSameTile = ({ trackId, videoTrackID, audioTrackID }) => trackId && ((videoTrackID && videoTrackID === trackId) || (audioTrackID && audioTrackID === trackId)); @@ -211,27 +210,23 @@ export const TileMenuContent = props => { type: REMOTE_STOP_SCREENSHARE_TYPE, }); - const isChangeNameEnabled = useIsFeatureEnabled(FEATURE_LIST.CHANGE_NAME); - return isLocal ? ( (showPinAction || canMinimise) && ( <> {showPinAction && } {showSpotlight && closeSheetOnClick()} />} {canMinimise && } - {isChangeNameEnabled ? ( - { - openNameChangeModal(); - closeSheetOnClick(); - }} - > - - - Change Name - - - ) : null} + { + openNameChangeModal(); + closeSheetOnClick(); + }} + > + + + Change Name + + ) ) : ( diff --git a/packages/roomkit-react/src/Prebuilt/components/hooks/useFeatures.js b/packages/roomkit-react/src/Prebuilt/components/hooks/useFeatures.js deleted file mode 100644 index d095184c9f..0000000000 --- a/packages/roomkit-react/src/Prebuilt/components/hooks/useFeatures.js +++ /dev/null @@ -1,22 +0,0 @@ -import { selectTemplateAppData, useHMSStore } from '@100mslive/react-sdk'; - -export const useFeatures = () => { - let features = useHMSStore(selectTemplateAppData)?.features; - return features && typeof features === 'string' ? features.split(',') : undefined; -}; - -export const useIsFeatureEnabled = key => { - let features = useFeatures(); - return features ? features.includes(key) : true; -}; - -export const useRolePreference = () => { - let preference = useHMSStore(selectTemplateAppData)?.rolePreference; - try { - preference = JSON.parse(preference || '{}'); - return preference; - } catch (e) { - console.log('role preference parse error', e); - return undefined; - } -}; diff --git a/packages/roomkit-react/src/Prebuilt/plugins/VirtualBackground/VirtualBackground.jsx b/packages/roomkit-react/src/Prebuilt/plugins/VirtualBackground/VirtualBackground.jsx index ea147e7ebc..2040c2a619 100644 --- a/packages/roomkit-react/src/Prebuilt/plugins/VirtualBackground/VirtualBackground.jsx +++ b/packages/roomkit-react/src/Prebuilt/plugins/VirtualBackground/VirtualBackground.jsx @@ -13,9 +13,7 @@ import { ActionTile } from '../../components/MoreSettings/ActionTile'; import { Loading } from '../../../Loading'; import { Tooltip } from '../../../Tooltip'; import IconButton from '../../IconButton'; -import { useIsFeatureEnabled } from '../../components/hooks/useFeatures'; import { getRandomVirtualBackground } from './vbutils'; -import { FEATURE_LIST } from '../../common/constants'; export const VirtualBackground = ({ asActionTile = false, @@ -32,7 +30,6 @@ export const VirtualBackground = ({ const [isVBOn, setIsVBOn] = useState(false); const localPeerVideoTrackID = useHMSStore(selectLocalVideoTrackID); const isVBPresent = useHMSStore(selectIsLocalVideoPluginPresent('HMSVB')); - const isFeatureEnabled = useIsFeatureEnabled(FEATURE_LIST.VIDEO_PLUGINS); async function createPlugin() { if (!pluginRef.current) { @@ -72,7 +69,7 @@ export const VirtualBackground = ({ } } - if (!isAllowedToPublish.video || !isVBSupported || !isFeatureEnabled) { + if (!isAllowedToPublish.video || !isVBSupported) { return null; } if (asActionTile) { diff --git a/packages/roomkit-react/src/Prebuilt/plugins/whiteboard/ToggleWhiteboard.jsx b/packages/roomkit-react/src/Prebuilt/plugins/whiteboard/ToggleWhiteboard.jsx index d462970c4e..9470342d08 100644 --- a/packages/roomkit-react/src/Prebuilt/plugins/whiteboard/ToggleWhiteboard.jsx +++ b/packages/roomkit-react/src/Prebuilt/plugins/whiteboard/ToggleWhiteboard.jsx @@ -4,9 +4,7 @@ import { PencilDrawIcon } from '@100mslive/react-icons'; import { Tooltip } from '../../../Tooltip'; import IconButton from '../../IconButton'; import { useHLSViewerRole } from '../../components/AppData/useUISettings'; -import { useIsFeatureEnabled } from '../../components/hooks/useFeatures'; import { useWhiteboardMetadata } from './useWhiteboardMetadata'; -import { FEATURE_LIST } from '../../common/constants'; export const ToggleWhiteboard = () => { const { @@ -17,9 +15,8 @@ export const ToggleWhiteboard = () => { } = useWhiteboardMetadata(); const hlsViewerRole = useHLSViewerRole(); const localPeerRole = useHMSStore(selectLocalPeerRoleName); - const isFeatureEnabled = useIsFeatureEnabled(FEATURE_LIST.WHITEBOARD); - if (!whiteboardEnabled || localPeerRole === hlsViewerRole || !isFeatureEnabled) { + if (!whiteboardEnabled || localPeerRole === hlsViewerRole) { return null; }