@100mslive/roomkit-react 0.4.3-alpha.2 → 0.4.3-alpha.4

package/src/Prebuilt/common/constants.ts

@@ -1,151 +0,0 @@
-import { parsedUserAgent } from '@100mslive/react-sdk';
-
-export const QUERY_PARAM_SKIP_PREVIEW = 'skip_preview';
-export const QUERY_PARAM_SKIP_PREVIEW_HEADFUL = 'skip_preview_headful';
-export const QUERY_PARAM_NAME = 'name';
-export const QUERY_PARAM_VIEW_MODE = 'ui_mode';
-export const QUERY_PARAM_PREVIEW_AS_ROLE = 'preview_as_role';
-export const UI_MODE_GRID = 'grid';
-export const MAX_TOASTS = 5;
-export const RTMP_RECORD_RESOLUTION_MIN = 480;
-export const RTMP_RECORD_RESOLUTION_MAX = 1280;
-export const RTMP_RECORD_DEFAULT_RESOLUTION = {
-  width: 1280,
-  height: 720,
-};
-export const EMOJI_REACTION_TYPE = 'EMOJI_REACTION';
-
-export const CHAT_SELECTOR = {
-  PEER: 'peer',
-  ROLE: 'role',
-  EVERYONE: 'Everyone',
-};
-
-export const APP_DATA = {
-  uiSettings: 'uiSettings',
-  chatOpen: 'chatOpen',
-  chatSelector: 'chatSelector',
-  chatDraft: 'chatDraft',
-  appConfig: 'appConfig',
-  sidePane: 'sidePane',
-  hlsStats: 'hlsStats',
-  subscribedNotifications: 'subscribedNotifications',
-  logo: 'logo',
-  hlsStarted: 'hlsStarted',
-  rtmpStarted: 'rtmpStarted',
-  recordingStarted: 'recordingStarted',
-  embedConfig: 'embedConfig',
-  pinnedTrackId: 'pinnedTrackId',
-  dropdownList: 'dropdownList',
-  authToken: 'authToken',
-  pdfConfig: 'pdfConfig',
-  minimiseInset: 'minimiseInset',
-  activeScreensharePeerId: 'activeScreensharePeerId',
-  disableNotifications: 'disableNotifications',
-  pollState: 'pollState',
-  background: 'background',
-  sheet: 'sheet',
-  caption: 'caption',
-  loadingEffects: 'loadingEffects',
-  noiseCancellation: 'noiseCancellation',
-};
-
-export const UI_SETTINGS = {
-  isAudioOnly: 'isAudioOnly',
-  maxTileCount: 'maxTileCount',
-  uiViewMode: 'uiViewMode',
-  layoutMode: 'layoutMode',
-  showStatsOnTiles: 'showStatsOnTiles',
-  enableAmbientMusic: 'enableAmbientMusic',
-  mirrorLocalVideo: 'mirrorLocalVideo',
-};
-
-export const SIDE_PANE_OPTIONS = {
-  PARTICIPANTS: 'Participants',
-  CHAT: 'Chat',
-  STREAMING: 'STREAMING',
-  POLLS: 'POLLS',
-  VB: 'VB',
-  ROOM_DETAILS: 'ROOM_DETAILS',
-};
-
-export type SidePaneOption = (typeof SIDE_PANE_OPTIONS)[keyof typeof SIDE_PANE_OPTIONS];
-
-export const SHEET_OPTIONS = {
-  ROOM_DETAILS: 'ROOM_DETAILS',
-};
-
-export const POLL_STATE = {
-  pollInView: 'pollInView',
-  view: 'view',
-};
-
-export const POLL_VIEWS = {
-  CREATE_POLL_QUIZ: 'CREATE_POLL_QUIZ',
-  CREATE_QUESTIONS: 'CREATE_QUESTIONS',
-  VOTE: 'VOTE',
-  RESULTS: 'RESULTS',
-};
-
-export const CAPTION_TOAST = {
-  captionToast: 'captionToast',
-};
-export const SUBSCRIBED_NOTIFICATIONS = {
-  PEER_JOINED: 'PEER_JOINED',
-  PEER_LEFT: 'PEER_LEFT',
-  METADATA_UPDATED: 'METADATA_UPDATED',
-  NEW_MESSAGE: 'NEW_MESSAGE',
-  ERROR: 'ERROR',
-};
-
-export const CREATE_ROOM_DOC_URL = 'https://github.com/100mslive/100ms-web/wiki/Creating-and-joining-a-room';
-export const HLS_TIMED_METADATA_DOC_URL =
-  'https://www.100ms.live/docs/javascript/v2/how--to-guides/record-and-live-stream/hls/hls-timed-metadata';
-
-export const REMOTE_STOP_SCREENSHARE_TYPE = 'REMOTE_STOP_SCREENSHARE';
-
-export const isChrome = parsedUserAgent.getBrowser()?.name?.toLowerCase() === 'chrome';
-export const isFirefox = parsedUserAgent.getBrowser()?.name?.toLowerCase() === 'firefox';
-export const isSafari = parsedUserAgent.getBrowser()?.name?.toLowerCase() === 'safari';
-export const isIOS = parsedUserAgent.getOS()?.name?.toLowerCase() === 'ios';
-export const isMacOS = parsedUserAgent.getOS()?.name?.toLowerCase() === 'macos';
-export const isAndroid = parsedUserAgent.getOS()?.name?.toLowerCase() === 'android';
-export const isIPadOS = false;
-// typeof navigator !== "undefined" &&
-// navigator?.maxTouchPoints &&
-// navigator?.maxTouchPoints > 2 &&
-// navigator?.userAgent?.match(/Mac/);
-
-export enum SESSION_STORE_KEY {
-  TRANSCRIPTION_STATE = 'transcriptionState',
-  PINNED_MESSAGES = 'pinnedMessages',
-  SPOTLIGHT = 'spotlight',
-  CHAT_PEER_BLACKLIST = 'chatPeerBlacklist',
-  CHAT_MESSAGE_BLACKLIST = 'chatMessageBlacklist',
-  CHAT_STATE = 'chatState',
-}
-
-export enum INTERACTION_TYPE {
-  POLL = 'Poll',
-  QUIZ = 'Quiz',
-}
-
-export enum QUESTION_TYPE_TITLE {
-  'single-choice' = 'Single Choice',
-  'multiple-choice' = 'Multiple Choice',
-  // 'short-answer' = 'Short Answer',
-  // 'long-answer' = 'Long Answer',
-}
-
-export enum QUESTION_TYPE {
-  SINGLE_CHOICE = 'single-choice',
-  MULTIPLE_CHOICE = 'multiple-choice',
-  // SHORT_ANSWER = 'short-answer',
-  // LONG_ANSWER = 'long-answer',
-}
-
-export const ROLE_CHANGE_DECLINED = 'role_change_declined';
-
-export const DEFAULT_PORTAL_CONTAINER = '.prebuilt-container';
-
-export const TEST_AUDIO_URL = 'https://100ms.live/test-audio.wav';

package/src/Prebuilt/common/hooks.ts

@@ -1,257 +0,0 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { useMedia } from 'react-use';
-import { HMSHLSPlayer } from '@100mslive/hls-player';
-import { JoinForm_JoinBtnType } from '@100mslive/types-prebuilt/elements/join_form';
-import {
-  HMSPeer,
-  HMSRecording,
-  parsedUserAgent,
-  selectAvailableRoleNames,
-  selectIsAllowedToPublish,
-  selectIsConnectedToRoom,
-  selectLocalPeerRole,
-  selectPeerCount,
-  selectPeerMetadata,
-  selectPeers,
-  selectPeersByRoles,
-  selectRecordingState,
-  selectRemotePeers,
-  selectRolesMap,
-  useHMSActions,
-  useHMSStore,
-  useHMSVanillaStore,
-} from '@100mslive/react-sdk';
-// @ts-ignore: No implicit any
-import { ToastManager } from '../components/Toast/ToastManager';
-import { config } from '../../Theme';
-import { useRoomLayout } from '../provider/roomLayoutProvider';
-// @ts-ignore
-import { useSetAppDataByKey } from '../components/AppData/useUISettings';
-import { useRoomLayoutConferencingScreen } from '../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
-// @ts-ignore: No implicit any
-import { isScreenshareSupported } from '../common/utils';
-import { APP_DATA, CHAT_SELECTOR, RTMP_RECORD_DEFAULT_RESOLUTION } from './constants';
-/**
- * Hook to execute a callback when alone in room(after a certain 5d of time)
- * @param {number} thresholdMs The threshold(in ms) after which the callback is executed,
- * starting from the instant when alone in room.
- * note: the cb is not called when another peer joins during this period.
- */
-export const useWhenAloneInRoom = (thresholdMs = 5 * 60 * 1000) => {
-  const isConnected = useHMSStore(selectIsConnectedToRoom);
-  const peerCount = useHMSStore(selectPeerCount);
-  const [aloneForLong, setAloneForLong] = useState(false);
-  const cbTimeout = useRef(null);
-  const alone = isConnected && peerCount === 1;
-
-  useEffect(() => {
-    if (alone && !cbTimeout.current) {
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      cbTimeout.current = setTimeout(() => {
-        setAloneForLong(true);
-      }, thresholdMs);
-    } else if (!alone) {
-      cbTimeout.current && clearTimeout(cbTimeout.current);
-      cbTimeout.current = null;
-      setAloneForLong(false);
-    }
-  }, [alone, thresholdMs]);
-
-  useEffect(() => {
-    return () => {
-      if (cbTimeout.current) {
-        clearTimeout(cbTimeout.current);
-      }
-    };
-  }, []);
-
-  return { alone, aloneForLong };
-};
-
-export const useFilteredRoles = () => {
-  const { elements } = useRoomLayoutConferencingScreen();
-  return elements?.chat?.roles_whitelist || [];
-};
-
-export const useDefaultChatSelection = () => {
-  const { elements } = useRoomLayoutConferencingScreen();
-  const roles = useFilteredRoles();
-  // default is everyone for public chat
-  if (elements?.chat?.public_chat_enabled) {
-    return CHAT_SELECTOR.EVERYONE;
-  }
-  // sending first role as default
-  if (roles.length > 0) {
-    return roles[0];
-  }
-  // sending empty
-  return '';
-};
-
-export const useShowStreamingUI = () => {
-  const layout = useRoomLayout();
-  const { join_form } = layout?.screens?.preview?.default?.elements || {};
-  return join_form?.join_btn_type === JoinForm_JoinBtnType.JOIN_BTN_TYPE_JOIN_AND_GO_LIVE;
-};
-
-// The search results should not have role name matches
-export const useParticipants = (params?: { metadata?: { isHandRaised?: boolean }; role?: string; search?: string }) => {
-  const isConnected = useHMSStore(selectIsConnectedToRoom);
-  const peerCount = useHMSStore(selectPeerCount);
-  const availableRoles = useHMSStore(selectAvailableRoleNames);
-  let participantList = useHMSStore(isConnected ? selectPeers : selectRemotePeers);
-  const rolesWithParticipants = Array.from(new Set(participantList.map(peer => peer.roleName)));
-  const vanillaStore = useHMSVanillaStore();
-  if (params?.metadata?.isHandRaised) {
-    participantList = participantList.filter(peer => {
-      return vanillaStore.getState(selectPeerMetadata(peer.id)).isHandRaised;
-    });
-  }
-  if (params?.role && availableRoles.includes(params.role)) {
-    participantList = participantList.filter(peer => peer.roleName === params.role);
-  }
-  if (params?.search) {
-    const search = params.search;
-    // Removed peer.roleName?.toLowerCase().includes(search)
-    participantList = participantList.filter(peer => peer.name.toLowerCase().includes(search));
-  }
-  return { participants: participantList, isConnected, peerCount, rolesWithParticipants };
-};
-
-export const useIsLandscape = () => {
-  const isMobile = parsedUserAgent.getDevice().type === 'mobile';
-  const isLandscape = useMedia(config.media.ls);
-  return isMobile && isLandscape;
-};
-
-export const useLandscapeHLSStream = () => {
-  const isLandscape = useIsLandscape();
-  const { screenType } = useRoomLayoutConferencingScreen();
-  return isLandscape && screenType === 'hls_live_streaming';
-};
-
-export const useMobileHLSStream = () => {
-  const isMobile = useMedia(config.media.md);
-  const { screenType } = useRoomLayoutConferencingScreen();
-  return isMobile && screenType === 'hls_live_streaming';
-};
-
-export const useKeyboardHandler = (isPaused: boolean, hlsPlayer: HMSHLSPlayer) => {
-  const handleKeyEvent = useCallback(
-    async (event: KeyboardEvent) => {
-      switch (event.key) {
-        case ' ':
-          if (isPaused) {
-            await hlsPlayer?.play();
-          } else {
-            hlsPlayer?.pause();
-          }
-          break;
-        case 'ArrowRight':
-          hlsPlayer?.seekTo(hlsPlayer?.getVideoElement().currentTime + 10);
-          break;
-        case 'ArrowLeft':
-          hlsPlayer?.seekTo(hlsPlayer?.getVideoElement().currentTime - 10);
-          break;
-      }
-    },
-    [hlsPlayer, isPaused],
-  );
-
-  return handleKeyEvent;
-};
-export interface RTMPRecordingResolution {
-  width: number;
-  height: number;
-}
-export const useRecordingHandler = () => {
-  const hmsActions = useHMSActions();
-  const recordingState: HMSRecording = useHMSStore(selectRecordingState);
-  const [isRecordingLoading, setIsRecordingLoading] = useState(false);
-  const [recordingStarted, setRecordingState] = useSetAppDataByKey(APP_DATA.recordingStarted);
-  useEffect(() => {
-    if (recordingState.browser.error && recordingStarted) {
-      setRecordingState(false);
-    }
-  }, [recordingStarted, recordingState.browser.error, setRecordingState]);
-  const startRecording = useCallback(
-    async (resolution: RTMPRecordingResolution | null = null) => {
-      try {
-        setRecordingState(true);
-        setIsRecordingLoading(true);
-        await hmsActions.startRTMPOrRecording({
-          resolution: getResolution(resolution),
-          record: true,
-        });
-      } catch (error) {
-        const err = error as Error;
-        if (err.message.includes('stream already running')) {
-          ToastManager.addToast({
-            title: 'Recording already running',
-            variant: 'error',
-          });
-        } else {
-          ToastManager.addToast({
-            title: err.message,
-            variant: 'error',
-          });
-        }
-        setRecordingState(false);
-      }
-      setIsRecordingLoading(false);
-    },
-    [hmsActions, setRecordingState],
-  );
-  return {
-    recordingStarted,
-    startRecording,
-    isRecordingLoading,
-  };
-};
-
-export function getResolution(
-  recordingResolution: RTMPRecordingResolution | null,
-): RTMPRecordingResolution | undefined {
-  if (!recordingResolution) {
-    return undefined;
-  }
-  const resolution: RTMPRecordingResolution = RTMP_RECORD_DEFAULT_RESOLUTION;
-  if (recordingResolution.width) {
-    resolution.width = recordingResolution.width;
-  }
-  if (recordingResolution.height) {
-    resolution.height = recordingResolution.height;
-  }
-  return resolution;
-}
-
-export interface WaitingRoomInfo {
-  isNotAllowedToPublish: boolean;
-  isScreenOnlyPublishParams: boolean;
-  hasSubscribedRolePublishing: boolean;
-}
-export function useWaitingRoomInfo(): WaitingRoomInfo {
-  const localPeerRole = useHMSStore(selectLocalPeerRole);
-  const { video, audio, screen } = useHMSStore(selectIsAllowedToPublish);
-  const isScreenShareAllowed = isScreenshareSupported();
-  const roles = useHMSStore(selectRolesMap);
-  const peersByRoles = useHMSStore(selectPeersByRoles(localPeerRole?.subscribeParams.subscribeToRoles || []));
-  // show no publish as screenshare in mweb is not possible
-  const isNotAllowedToPublish = !(video || audio || (screen && isScreenShareAllowed));
-  const isScreenOnlyPublishParams: boolean = screen && !(video || audio);
-  const hasSubscribedRolePublishing: boolean = useMemo(() => {
-    return peersByRoles.some((peer: HMSPeer) => {
-      if (peer.roleName && roles[peer.roleName] && !peer.isLocal) {
-        return !!roles[peer.roleName].publishParams?.allowed.length;
-      }
-      return false;
-    });
-  }, [peersByRoles, roles]);
-
-  return {
-    isNotAllowedToPublish,
-    isScreenOnlyPublishParams,
-    hasSubscribedRolePublishing,
-  };
-}

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