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

package/src/Prebuilt/components/AppData/AppData.tsx

@@ -1,208 +0,0 @@
-import React, { useEffect, useMemo, useRef } from 'react';
-import { useMedia } from 'react-use';
-import {
-  HMSRoomState,
-  selectFullAppData,
-  selectHLSState,
-  selectRoomState,
-  selectRTMPState,
-  useAVToggle,
-  useHMSActions,
-  useHMSStore,
-  useRecordingStreaming,
-} from '@100mslive/react-sdk';
-import { config as cssConfig } from '../../../Theme';
-import { LayoutMode } from '../Settings/LayoutSettings';
-import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
-//@ts-ignore
-import { UserPreferencesKeys, useUserPreferences } from '../hooks/useUserPreferences';
-// @ts-ignore
-import { useIsSidepaneTypeOpen, useSidepaneToggle } from './useSidepane';
-// @ts-ignore
-import { useSetAppDataByKey, useSetNoiseCancellation } from './useUISettings';
-import {
-  APP_DATA,
-  CHAT_SELECTOR,
-  POLL_STATE,
-  SIDE_PANE_OPTIONS,
-  UI_MODE_GRID,
-  UI_SETTINGS,
-} from '../../common/constants';
-import { DEFAULT_TILES_IN_VIEW } from '../MoreSettings/constants';
-
-const initialAppData = {
-  [APP_DATA.uiSettings]: {
-    [UI_SETTINGS.isAudioOnly]: false,
-    [UI_SETTINGS.maxTileCount]: 9,
-    [UI_SETTINGS.showStatsOnTiles]: false,
-    [UI_SETTINGS.enableAmbientMusic]: false,
-    [UI_SETTINGS.uiViewMode]: UI_MODE_GRID,
-    [UI_SETTINGS.mirrorLocalVideo]: true,
-    [UI_SETTINGS.layoutMode]: LayoutMode.GALLERY,
-  },
-  [APP_DATA.subscribedNotifications]: {
-    PEER_JOINED: false,
-    PEER_LEFT: false,
-    NEW_MESSAGE: true,
-    ERROR: true,
-    METADATA_UPDATED: true,
-  },
-  [APP_DATA.chatOpen]: false,
-  [APP_DATA.chatSelector]: {
-    [CHAT_SELECTOR.ROLE]: '',
-    [CHAT_SELECTOR.PEER]: {},
-  },
-  [APP_DATA.chatDraft]: '',
-  [APP_DATA.sidePane]: '',
-  [APP_DATA.sheet]: '',
-  [APP_DATA.hlsStarted]: false,
-  [APP_DATA.rtmpStarted]: false,
-  [APP_DATA.recordingStarted]: false,
-  [APP_DATA.dropdownList]: [],
-  [APP_DATA.authToken]: '',
-  [APP_DATA.minimiseInset]: false,
-  [APP_DATA.activeScreensharePeerId]: '',
-  [APP_DATA.disableNotifications]: false,
-  [APP_DATA.loadingEffects]: false,
-  [APP_DATA.background]: 'none',
-  [APP_DATA.pollState]: {
-    [POLL_STATE.pollInView]: '',
-    [POLL_STATE.view]: '',
-  },
-  // by default on because of on demand now, for beam disabled
-  [APP_DATA.caption]: false,
-  [APP_DATA.noiseCancellation]: false,
-};
-
-export const AppData = React.memo(() => {
-  const hmsActions = useHMSActions();
-  const [preferences = {}] = useUserPreferences(UserPreferencesKeys.UI_SETTINGS);
-  const appData = useHMSStore(selectFullAppData);
-  const { elements } = useRoomLayoutConferencingScreen();
-  const toggleVB = useSidepaneToggle(SIDE_PANE_OPTIONS.VB);
-  const { isLocalVideoEnabled } = useAVToggle();
-  const sidepaneOpenedRef = useRef(false);
-  const [, setNoiseCancellationEnabled] = useSetNoiseCancellation();
-  const isMobile = useMedia(cssConfig.media.md);
-
-  useEffect(() => {
-    if (elements?.noise_cancellation?.enabled_by_default) {
-      setNoiseCancellationEnabled(true);
-    }
-  }, [elements?.noise_cancellation?.enabled_by_default, setNoiseCancellationEnabled]);
-
-  const defaultMediaURL = useMemo(() => {
-    const media = elements?.virtual_background?.background_media || [];
-    for (let i = 0; i < media.length; i++) {
-      if (media[i].default && media[i].url) {
-        return media[i].url;
-      }
-    }
-    return '';
-  }, [elements?.virtual_background?.background_media]);
-
-  useEffect(() => {
-    hmsActions.initAppData({
-      ...initialAppData,
-      ...appData,
-    });
-    // @ts-ignore
-    hmsActions.setFrameworkInfo({
-      type: 'react-web',
-      isPrebuilt: true,
-      version: React.version,
-    });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [hmsActions]);
-
-  useEffect(() => {
-    const uiSettings = preferences || {};
-    const updatedSettings = {
-      ...uiSettings,
-      [UI_SETTINGS.isAudioOnly]: undefined,
-      [UI_SETTINGS.uiViewMode]: uiSettings.uiViewMode || UI_MODE_GRID,
-    };
-    hmsActions.setAppData(APP_DATA.uiSettings, updatedSettings, true);
-  }, [hmsActions, preferences]);
-
-  useEffect(() => {
-    hmsActions.setAppData(
-      APP_DATA.uiSettings,
-      {
-        [UI_SETTINGS.maxTileCount]: isMobile
-          ? DEFAULT_TILES_IN_VIEW.MWEB
-          : Number(elements?.video_tile_layout?.grid?.tiles_in_view) || DEFAULT_TILES_IN_VIEW.DESKTOP,
-      },
-      true,
-    );
-  }, [hmsActions, isMobile, elements?.video_tile_layout?.grid?.tiles_in_view]);
-
-  useEffect(() => {
-    if (!preferences.subscribedNotifications) {
-      return;
-    }
-    hmsActions.setAppData(APP_DATA.subscribedNotifications, preferences.subscribedNotifications, true);
-  }, [preferences.subscribedNotifications, hmsActions]);
-
-  useEffect(() => {
-    if (defaultMediaURL && !sidepaneOpenedRef.current && isLocalVideoEnabled) {
-      hmsActions.setAppData(APP_DATA.background, defaultMediaURL);
-      sidepaneOpenedRef.current = true;
-      toggleVB();
-    }
-  }, [hmsActions, toggleVB, isLocalVideoEnabled, defaultMediaURL]);
-
-  return <ResetStreamingStart />;
-});
-
-/**
- * reset hlsStarted, rtmpStarted values when streaming starts
- */
-const ResetStreamingStart = () => {
-  const { isHLSRunning, isRTMPRunning, isBrowserRecordingOn } = useRecordingStreaming();
-  const hlsError = useHMSStore(selectHLSState).error;
-  const rtmpError = useHMSStore(selectRTMPState).error;
-  const roomState = useHMSStore(selectRoomState);
-  const [hlsStarted, setHLSStarted] = useSetAppDataByKey(APP_DATA.hlsStarted);
-  const [recordingStarted, setRecordingStarted] = useSetAppDataByKey(APP_DATA.recordingStarted);
-  const [rtmpStarted, setRTMPStarted] = useSetAppDataByKey(APP_DATA.rtmpStarted);
-  const toggleStreaming = useSidepaneToggle(SIDE_PANE_OPTIONS.STREAMING);
-  const isStreamingOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.STREAMING);
-
-  useEffect(() => {
-    if (isBrowserRecordingOn && recordingStarted) {
-      setRecordingStarted(false);
-    }
-  }, [isBrowserRecordingOn, recordingStarted, setRecordingStarted]);
-  /**
-   * Reset on leave
-   */
-  useEffect(() => {
-    if (roomState === HMSRoomState.Disconnected) {
-      setHLSStarted(false);
-      setRecordingStarted(false);
-      setRTMPStarted(false);
-    }
-  }, [roomState, setHLSStarted, setRTMPStarted, setRecordingStarted]);
-  useEffect(() => {
-    if (isHLSRunning || hlsError) {
-      if (hlsStarted) {
-        setHLSStarted(false);
-        if (isStreamingOpen) {
-          toggleStreaming();
-        }
-      }
-    }
-  }, [isHLSRunning, hlsStarted, setHLSStarted, hlsError, isStreamingOpen, toggleStreaming]);
-  useEffect(() => {
-    if (isRTMPRunning || rtmpError || isBrowserRecordingOn) {
-      if (rtmpStarted) {
-        setRTMPStarted(false);
-        if (isStreamingOpen) {
-          toggleStreaming();
-        }
-      }
-    }
-  }, [isRTMPRunning, setRTMPStarted, rtmpStarted, rtmpError, isBrowserRecordingOn, isStreamingOpen, toggleStreaming]);
-  return null;
-};

package/src/Prebuilt/components/AppData/useChatState.js

@@ -1,18 +0,0 @@
-import { useCallback } from 'react';
-import { selectAppData, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
-import { APP_DATA } from '../../common/constants';
-
-export const useChatDraftMessage = () => {
-  const hmsActions = useHMSActions();
-  let chatDraftMessage = useHMSStore(selectAppData(APP_DATA.chatDraft));
-  if (chatDraftMessage === undefined || chatDraftMessage === null) {
-    chatDraftMessage = '';
-  }
-  const setDraftMessage = useCallback(
-    message => {
-      hmsActions.setAppData(APP_DATA.chatDraft, message, true);
-    },
-    [hmsActions],
-  );
-  return [chatDraftMessage, setDraftMessage];
-};

package/src/Prebuilt/components/AppData/useSheet.ts

@@ -1,33 +0,0 @@
-import { useCallback } from 'react';
-import { selectAppData, useHMSActions, useHMSStore, useHMSVanillaStore } from '@100mslive/react-sdk';
-import { APP_DATA } from '../../common/constants';
-
-export const useIsSheetTypeOpen = (sheetType: string) => {
-  if (!sheetType) {
-    throw Error('Pass one of the sheet options');
-  }
-  return useHMSStore(selectAppData(APP_DATA.sheet)) === sheetType;
-};
-
-export const useSheetState = () => {
-  const sheet = useHMSStore(selectAppData(APP_DATA.sheet));
-  return sheet;
-};
-
-export const useSheetToggle = (sheetType: string) => {
-  const hmsActions = useHMSActions();
-  const vanillaStore = useHMSVanillaStore();
-  const toggleSheet = useCallback(() => {
-    const isOpen = vanillaStore.getState(selectAppData(APP_DATA.sheet)) === sheetType;
-    hmsActions.setAppData(APP_DATA.sheet, !isOpen ? sheetType : '');
-  }, [vanillaStore, hmsActions, sheetType]);
-  return toggleSheet;
-};
-
-export const useSheetReset = () => {
-  const hmsActions = useHMSActions();
-  const resetSheet = useCallback(() => {
-    hmsActions.setAppData(APP_DATA.sheet, '');
-  }, [hmsActions]);
-  return resetSheet;
-};

package/src/Prebuilt/components/AppData/useSidepane.js

@@ -1,99 +0,0 @@
-import { useCallback } from 'react';
-import { match, P } from 'ts-pattern';
-import { selectAppData, useHMSActions, useHMSStore, useHMSVanillaStore } from '@100mslive/react-sdk';
-import { usePollViewState } from './useUISettings';
-import { APP_DATA, POLL_STATE, POLL_VIEWS, SIDE_PANE_OPTIONS } from '../../common/constants';
-
-/**
- * Gives a boolean value if the sidepaneType matches current sidepane value in store
- * @param {string} sidepaneType
- * @returns {boolean} - if the sidepaneType is passed returns boolean else the current value
- */
-export const useIsSidepaneTypeOpen = sidepaneType => {
-  if (!sidepaneType) {
-    throw Error('Pass one of the side pane options');
-  }
-  return useHMSStore(selectAppData(APP_DATA.sidePane)) === sidepaneType;
-};
-
-/**
- * Gives the current value of sidepane in store
- * @returns {string} - if the sidepaneType is passed returns boolean else the current value
- */
-export const useSidepaneState = () => {
-  const sidePane = useHMSStore(selectAppData(APP_DATA.sidePane));
-  return sidePane;
-};
-
-/**
- * Toggle the sidepane value between passed sidePaneType and '';
- * @param {string} sidepaneType
- */
-export const useSidepaneToggle = sidepaneType => {
-  const hmsActions = useHMSActions();
-  const vanillaStore = useHMSVanillaStore();
-  const toggleSidepane = useCallback(() => {
-    const isOpen = vanillaStore.getState(selectAppData(APP_DATA.sidePane)) === sidepaneType;
-    hmsActions.setAppData(APP_DATA.sidePane, !isOpen ? sidepaneType : '');
-  }, [vanillaStore, hmsActions, sidepaneType]);
-  return toggleSidepane;
-};
-
-export const usePollViewToggle = () => {
-  const hmsActions = useHMSActions();
-  const { view, setPollState } = usePollViewState();
-  const isOpen = useSidepaneState() === SIDE_PANE_OPTIONS.POLLS;
-
-  const togglePollView = useCallback(
-    id => {
-      match({ id, isOpen, view })
-        .with(
-          {
-            id: P.string,
-          },
-          () => {
-            setPollState({
-              [POLL_STATE.pollInView]: id,
-              [POLL_STATE.view]: POLL_VIEWS.VOTE,
-            });
-            hmsActions.setAppData(APP_DATA.sidePane, SIDE_PANE_OPTIONS.POLLS);
-          },
-        )
-        .with(
-          {
-            isOpen: true,
-            view: P.when(view => !!view),
-          },
-          () => {
-            setPollState({
-              [POLL_STATE.pollInView]: undefined,
-              [POLL_STATE.view]: null,
-            });
-            hmsActions.setAppData(APP_DATA.sidePane, '');
-          },
-        )
-        .otherwise(() => {
-          setPollState({
-            [POLL_STATE.pollInView]: undefined,
-            [POLL_STATE.view]: POLL_VIEWS.CREATE_POLL_QUIZ,
-          });
-          hmsActions.setAppData(APP_DATA.sidePane, SIDE_PANE_OPTIONS.POLLS);
-        });
-    },
-    [hmsActions, view, setPollState, isOpen],
-  );
-
-  return togglePollView;
-};
-
-/**
- * resets the sidepane value
- */
-export const useSidepaneReset = () => {
-  const hmsActions = useHMSActions();
-  const resetSidepane = useCallback(() => {
-    hmsActions.setAppData(APP_DATA.sidePane, '');
-    hmsActions.setAppData(APP_DATA.pollInView, '');
-  }, [hmsActions]);
-  return resetSidepane;
-};

package/src/Prebuilt/components/AppData/useSidepaneResetOnLayoutUpdate.tsx

@@ -1,22 +0,0 @@
-import { useEffect } from 'react';
-import { DefaultConferencingScreen_Elements } from '@100mslive/types-prebuilt';
-import { selectAppData, useHMSStore } from '@100mslive/react-sdk';
-import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
-// @ts-ignore
-import { useSidepaneReset } from './useSidepane';
-import { APP_DATA, SidePaneOption } from '../../common/constants';
-
-// Closes the sidepane if an element is removed from the layout via the customiser
-export const useSidepaneResetOnLayoutUpdate = (
-  layoutKey: keyof DefaultConferencingScreen_Elements,
-  sidepaneOption: SidePaneOption,
-) => {
-  const { elements } = useRoomLayoutConferencingScreen();
-  const sidepane = useHMSStore(selectAppData(APP_DATA.sidePane));
-  const resetSidePane = useSidepaneReset();
-  useEffect(() => {
-    if (sidepane === sidepaneOption && !elements?.[layoutKey]) {
-      resetSidePane();
-    }
-  }, [elements, elements?.[layoutKey], resetSidePane, sidepane, layoutKey, sidepaneOption]);
-};

package/src/Prebuilt/components/AppData/useUISettings.js

@@ -1,212 +0,0 @@
-import { useCallback, useMemo } from 'react';
-import {
-  selectAppData,
-  selectAppDataByPath,
-  selectAudioTrackByPeerID,
-  selectPermissions,
-  selectPolls,
-  selectSessionStore,
-  selectTrackByID,
-  selectVideoTrackByPeerID,
-  useHMSActions,
-  useHMSStore,
-  useHMSVanillaStore,
-} from '@100mslive/react-sdk';
-import { UserPreferencesKeys, useUserPreferences } from '../hooks/useUserPreferences';
-import { APP_DATA, POLL_STATE, SESSION_STORE_KEY, UI_SETTINGS } from '../../common/constants';
-
-/**
- * fields saved related to UI settings in store's app data can be
- * accessed using this hook. key is optional if not passed
- * the whole UI settings object is returned. Usage -
- * 1. val = useUiSettings("isAudioOnly");
- *    console.log(val); // false
- * 2. val = useUISettings();
- *    console.log(val); // {isAudioOnly: false}
- * @param {string | undefined} uiSettingKey
- */
-export const useUISettings = uiSettingKey => {
-  const uiSettings = useHMSStore(selectAppDataByPath(APP_DATA.uiSettings, uiSettingKey));
-  return uiSettings;
-};
-
-/**
- * fields saved related to UI settings in store's app data can be
- * accessed using this hook. key is optional if not passed
- * the whole UI settings object is returned. Usage -
- * [val, setVal] = useUiSettings("isAudioOnly");
- * console.log(val); // false
- * setVal(true);
- * @param {string} uiSettingKey
- */
-export const useSetUiSettings = uiSettingKey => {
-  const value = useUISettings(uiSettingKey);
-  const setValue = useSetAppData({
-    key1: APP_DATA.uiSettings,
-    key2: uiSettingKey,
-  });
-  return [value, setValue];
-};
-
-export const useIsHLSStartedFromUI = () => {
-  return useHMSStore(selectAppData(APP_DATA.hlsStarted));
-};
-
-export const useIsRTMPStartedFromUI = () => {
-  return useHMSStore(selectAppData(APP_DATA.rtmpStarted));
-};
-
-export const useAuthToken = () => {
-  return useHMSStore(selectAppData(APP_DATA.authToken));
-};
-
-export const useUrlToEmbed = () => {
-  return useHMSStore(selectAppData(APP_DATA.embedConfig))?.url;
-};
-
-export const usePDFConfig = () => {
-  return useHMSStore(selectAppData(APP_DATA.pdfConfig));
-};
-
-export const useResetPDFConfig = () => {
-  const [, setPDFConfig] = useSetAppDataByKey(APP_DATA.pdfConfig);
-  return useCallback(() => setPDFConfig(), [setPDFConfig]);
-};
-
-export const useResetEmbedConfig = () => {
-  const [, setEmbedConfig] = useSetAppDataByKey(APP_DATA.embedConfig);
-  return () => setEmbedConfig();
-};
-export const usePinnedTrack = () => {
-  const pinnedTrackId = useHMSStore(selectAppData(APP_DATA.pinnedTrackId));
-  const spotlightPeerId = useHMSStore(selectSessionStore(SESSION_STORE_KEY.SPOTLIGHT));
-  const spotlightVideoTrackId = useHMSStore(selectVideoTrackByPeerID(spotlightPeerId))?.id;
-  const spotlightAudioTrackId = useHMSStore(selectAudioTrackByPeerID(spotlightPeerId))?.id;
-  return useHMSStore(selectTrackByID(pinnedTrackId || spotlightVideoTrackId || spotlightAudioTrackId));
-};
-
-export const useSubscribedNotifications = notificationKey => {
-  const notificationPreference = useHMSStore(selectAppDataByPath(APP_DATA.subscribedNotifications, notificationKey));
-  return notificationPreference;
-};
-
-export const useIsNotificationDisabled = () => {
-  const notificationPreference = useHMSStore(selectAppDataByPath(APP_DATA.disableNotifications));
-  return notificationPreference;
-};
-
-export const useSetSubscribedNotifications = notificationKey => {
-  const value = useSubscribedNotifications(notificationKey);
-  const setValue = useSetAppData({
-    key1: APP_DATA.subscribedNotifications,
-    key2: notificationKey,
-  });
-  return [value, setValue];
-};
-
-export const useIsCaptionEnabled = () => {
-  const isCaptionEnabled = useHMSStore(selectAppDataByPath(APP_DATA.caption));
-  return isCaptionEnabled;
-};
-
-export const useSetIsCaptionEnabled = () => {
-  const [value, setValue] = useSetAppDataByKey(APP_DATA.caption);
-  return [value, setValue];
-};
-
-export const useSubscribeChatSelector = chatSelectorKey => {
-  const chatSelectorPreference = useHMSStore(selectAppDataByPath(APP_DATA.chatSelector, chatSelectorKey));
-  return chatSelectorPreference;
-};
-
-export const useSetSubscribedChatSelector = chatSelectorKey => {
-  const value = useSubscribeChatSelector(chatSelectorKey);
-  const setValue = useSetAppData({
-    key1: APP_DATA.chatSelector,
-    key2: chatSelectorKey,
-  });
-  return [value, setValue];
-};
-
-export const useSetAppDataByKey = appDataKey => {
-  const value = useHMSStore(selectAppData(appDataKey));
-  const actions = useHMSActions();
-  const setValue = useCallback(
-    value => {
-      actions.setAppData(appDataKey, value);
-    },
-    [actions, appDataKey],
-  );
-  return [value, setValue];
-};
-
-const useSetAppData = ({ key1, key2 }) => {
-  const actions = useHMSActions();
-  const store = useHMSVanillaStore();
-  const [, setPreferences] = useUserPreferences(UserPreferencesKeys.UI_SETTINGS);
-  const setValue = useCallback(
-    value => {
-      if (!key1) {
-        return;
-      }
-      actions.setAppData(
-        key1,
-        key2
-          ? {
-              [key2]: value,
-            }
-          : value,
-        true,
-      );
-      const appData = store.getState(selectAppData());
-      setPreferences({
-        ...appData.uiSettings,
-        [UI_SETTINGS.isAudioOnly]: undefined,
-        subscribedNotifications: appData.subscribedNotifications,
-      });
-    },
-    [actions, key1, key2, store, setPreferences],
-  );
-  return setValue;
-};
-
-export const useShowPolls = () => {
-  const permissions = useHMSStore(selectPermissions);
-  const polls = useHMSStore(selectPolls);
-
-  const showPolls = useMemo(() => {
-    return permissions?.pollWrite || (permissions?.pollRead && polls?.length > 0);
-  }, [permissions?.pollRead, permissions?.pollWrite, polls?.length]);
-
-  return { showPolls };
-};
-
-export const usePollViewState = () => {
-  const [pollState, setPollState] = useSetAppDataByKey(APP_DATA.pollState);
-
-  const setPollView = useCallback(
-    view => {
-      setPollState({
-        [POLL_STATE.pollInView]: pollState?.pollInView,
-        [POLL_STATE.view]: view,
-      });
-    },
-    [pollState?.pollInView, setPollState],
-  );
-
-  return {
-    setPollState,
-    setPollView,
-    pollInView: pollState?.pollInView,
-    view: pollState?.view,
-  };
-};
-
-export const useIsNoiseCancellationEnabled = () => {
-  const isNoiseCancellationEnabled = useHMSStore(selectAppDataByPath(APP_DATA.noiseCancellation));
-  return isNoiseCancellationEnabled;
-};
-export const useSetNoiseCancellation = () => {
-  const [isNoiseCancellationEnabled, setNoiseCancellationEnabled] = useSetAppDataByKey(APP_DATA.noiseCancellation);
-  return [isNoiseCancellationEnabled, setNoiseCancellationEnabled];
-};