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

package/src/Prebuilt/common/utils.js

@@ -1,185 +0,0 @@
-import { QUESTION_TYPE } from './constants';
-
-// eslint-disable-next-line complexity
-export function shadeColor(color, percent) {
-  let R = parseInt(color.substring(1, 3), 16);
-  let G = parseInt(color.substring(3, 5), 16);
-  let B = parseInt(color.substring(5, 7), 16);
-
-  R = Math.floor((R * (100 + percent)) / 100);
-  G = Math.floor((G * (100 + percent)) / 100);
-  B = Math.floor((B * (100 + percent)) / 100);
-
-  R = R < 255 ? R : 255;
-  G = G < 255 ? G : 255;
-  B = B < 255 ? B : 255;
-
-  const RR = R.toString(16).length === 1 ? `0${R.toString(16)}` : R.toString(16);
-  const GG = G.toString(16).length === 1 ? `0${G.toString(16)}` : G.toString(16);
-  const BB = B.toString(16).length === 1 ? `0${B.toString(16)}` : B.toString(16);
-
-  return `#${RR}${GG}${BB}`;
-}
-
-/**
- * TODO: this is currently an O(N**2) function, don't use with peer lists, it's currently
- * being used to find intersection between list of role names where the complexity shouldn't matter much.
- */
-export const arrayIntersection = (a, b) => {
-  if (a === undefined || b === undefined) {
-    return [];
-  }
-  // ensure "a" is the bigger array
-  if (b.length > a.length) {
-    let t = b;
-    b = a;
-    a = t;
-  }
-  return a.filter(function (e) {
-    return b.indexOf(e) > -1;
-  });
-};
-
-export const getMetadata = metadataString => {
-  try {
-    return !metadataString ? {} : JSON.parse(metadataString);
-  } catch (error) {
-    return {};
-  }
-};
-
-export const metadataProps = function (peer) {
-  return {
-    isHandRaised: getMetadata(peer.metadata)?.isHandRaised,
-  };
-};
-
-export const isScreenshareSupported = () => {
-  return typeof navigator.mediaDevices.getDisplayMedia !== 'undefined';
-};
-
-export const metadataPayloadParser = payload => {
-  try {
-    const data = window.atob(payload);
-    const parsedData = JSON.parse(data);
-    return parsedData;
-  } catch (e) {
-    return { payload };
-  }
-};
-
-// For bottom action sheet, returns updated height based on drag
-export const getUpdatedHeight = (e, MINIMUM_HEIGHT) => {
-  const heightToPercentage = 100 - ((e?.touches?.[0] || e).pageY / window.innerHeight) * 100;
-  // Snap to top if height > 80%, should be at least 40vh
-  const sheetHeightInVH = Math.max(MINIMUM_HEIGHT, heightToPercentage > 80 ? 100 : heightToPercentage);
-  return `${sheetHeightInVH}vh`;
-};
-
-export const getFormattedCount = num => {
-  const formatter = new Intl.NumberFormat('en', { notation: 'compact', maximumFractionDigits: 2 });
-  const formattedNum = formatter.format(num);
-  return formattedNum;
-};
-
-export const formatTime = timeInSeconds => {
-  timeInSeconds = Math.floor(timeInSeconds / 1000);
-  const hours = Math.floor(timeInSeconds / 3600);
-  const minutes = Math.floor((timeInSeconds % 3600) / 60);
-  const seconds = timeInSeconds % 60;
-  const hour = hours !== 0 ? `${hours < 10 ? '0' : ''}${hours}:` : '';
-  return `${hour}${minutes < 10 ? '0' : ''}${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
-};
-
-const compareArrays = (a, b) => {
-  if (a.length !== b.length) return false;
-  else {
-    // Comparing each element of your array
-    for (var i = 0; i < a.length; i++) {
-      if (a[i] !== b[i]) {
-        return false;
-      }
-    }
-    return true;
-  }
-};
-
-export const checkCorrectAnswer = (answer, localPeerResponse, type) => {
-  if (type === QUESTION_TYPE.SINGLE_CHOICE) {
-    return answer?.option === localPeerResponse?.option;
-  } else if (type === QUESTION_TYPE.MULTIPLE_CHOICE) {
-    return answer?.options && localPeerResponse?.options && compareArrays(answer?.options, localPeerResponse?.options);
-  }
-};
-
-export const isValidTextInput = (text, minLength = 1, maxLength = 1024) => {
-  return text && text.length >= minLength && text.length <= maxLength;
-};
-
-export const calculateAvatarAndAttribBoxSize = (calculatedWidth, calculatedHeight) => {
-  if (!calculatedWidth || !calculatedHeight) {
-    return [undefined, undefined];
-  }
-
-  let avatarSize = 'large';
-  if (calculatedWidth <= 150 || calculatedHeight <= 150) {
-    avatarSize = 'small';
-  } else if (calculatedWidth <= 300 || calculatedHeight <= 300) {
-    avatarSize = 'medium';
-  }
-
-  let attribBoxSize = 'medium';
-  if (calculatedWidth <= 180 || calculatedHeight <= 180) {
-    attribBoxSize = 'small';
-  }
-
-  return [avatarSize, attribBoxSize];
-};
-
-export const isMobileUserAgent = /Mobi|Android|iPhone/i.test(navigator.userAgent);
-
-export const getPeerResponses = (questions, peerid, userid) => {
-  return questions.map(question =>
-    question.responses?.filter(
-      response =>
-        response && (response.peer?.peerid === peerid || response.peer?.userid === userid) && !response.skipped,
-    ),
-  );
-};
-
-export const getIndexToShow = responses => {
-  let lastAttemptedIndex = 0;
-
-  Object.keys(responses).forEach(key => {
-    const keyNum = parseInt(key);
-    if (keyNum > lastAttemptedIndex && responses[key]) {
-      lastAttemptedIndex = keyNum;
-    }
-  });
-
-  return lastAttemptedIndex + 1;
-};
-
-export const getPeerParticipationSummary = (poll, localPeerID, localCustomerUserID) => {
-  let correctResponses = 0;
-  let score = 0;
-  const questions = poll.questions || [];
-  const peerResponses = getPeerResponses(questions, localPeerID, localCustomerUserID);
-  let totalResponses = peerResponses.length || 0;
-
-  peerResponses.forEach(peerResponse => {
-    if (!peerResponse?.[0]) {
-      return;
-    }
-    const isCorrect = checkCorrectAnswer(
-      questions[peerResponse[0].questionIndex - 1].answer,
-      peerResponse[0],
-      questions[peerResponse[0].questionIndex - 1].type,
-    );
-    if (isCorrect) {
-      score += questions[peerResponse[0].questionIndex - 1]?.weight || 0;
-      correctResponses++;
-    }
-  });
-  return { totalResponses, correctResponses, score };
-};

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