@100mslive/roomkit-react 0.1.0

package/src/Prebuilt/common/PeersSorter.js

@@ -0,0 +1,89 @@
+import { selectDominantSpeaker } from '@100mslive/hms-video-store';
+
+class PeersSorter {
+  listeners = new Set();
+  storeUnsubscribe;
+
+  constructor(store) {
+    this.store = store;
+    this.peers = new Map();
+    this.lruPeers = new Set();
+    this.speaker = undefined;
+  }
+
+  setPeersAndTilesPerPage = ({ peers, tilesPerPage }) => {
+    this.tilesPerPage = tilesPerPage;
+    const peerIds = new Set(peers.map(peer => peer.id));
+    // remove existing peers which are no longer provided
+    this.peers.forEach((_, key) => {
+      if (!peerIds.has(key)) {
+        this.peers.delete(key);
+      }
+    });
+    this.lruPeers = new Set([...this.lruPeers].filter(peerId => peerIds.has(peerId)));
+    peers.forEach(peer => {
+      this.peers.set(peer.id, peer);
+      if (this.lruPeers.size < tilesPerPage) {
+        this.lruPeers.add(peer.id);
+      }
+    });
+    if (!this.storeUnsubscribe) {
+      this.storeUnsubscribe = this.store.subscribe(this.onDominantSpeakerChange, selectDominantSpeaker);
+    }
+    this.moveSpeakerToFront(this.speaker);
+  };
+
+  onUpdate = cb => {
+    this.listeners.add(cb);
+  };
+
+  stop = () => {
+    this.updateListeners();
+    this.listeners.clear();
+    this.storeUnsubscribe?.();
+  };
+
+  moveSpeakerToFront = speaker => {
+    if (!speaker) {
+      this.updateListeners();
+      return;
+    }
+    if (this.lruPeers.has(speaker.id) && this.lruPeers.size <= this.tilesPerPage) {
+      this.updateListeners();
+      return;
+    }
+    // delete to insert at beginning
+    this.lruPeers.delete(speaker.id);
+    let lruPeerArray = Array.from(this.lruPeers);
+    while (lruPeerArray.length >= this.tilesPerPage) {
+      lruPeerArray.pop();
+    }
+    this.lruPeers = new Set([speaker.id, ...lruPeerArray]);
+    this.updateListeners();
+  };
+
+  onDominantSpeakerChange = speaker => {
+    if (speaker && speaker.id !== this?.speaker?.id) {
+      this.speaker = speaker;
+      this.moveSpeakerToFront(speaker);
+    }
+  };
+
+  updateListeners = () => {
+    const orderedPeers = [];
+    this.lruPeers.forEach(key => {
+      const peer = this.peers.get(key);
+      if (peer) {
+        orderedPeers.push(peer);
+      }
+    });
+    this.peers.forEach(peer => {
+      if (!this.lruPeers.has(peer.id) && peer) {
+        orderedPeers.push(peer);
+      }
+    });
+    this.listeners.forEach(listener => listener?.(orderedPeers));
+  };
+}
+
+export default PeersSorter;

package/src/Prebuilt/common/constants.js

@@ -0,0 +1,208 @@
+import { parsedUserAgent } from '@100mslive/react-sdk';
+
+export const defaultAudioList = [
+  {
+    name: 'Audio1',
+    id: 'audio1',
+    metadata: {
+      description: 'Artist1',
+    },
+    url: 'https://bc-public-static-assets.s3.ap-south-1.amazonaws.com/webapp/playlist/audio1.mp3',
+    type: 'audio',
+  },
+  {
+    name: 'Audio2',
+    id: 'audio2',
+    metadata: {
+      description: 'Artist2',
+    },
+    url: 'https://bc-public-static-assets.s3.ap-south-1.amazonaws.com/webapp/playlist/audio2.mp3',
+    type: 'audio',
+  },
+  {
+    name: 'Audio3',
+    id: 'audio3',
+    metadata: {
+      description: 'Artist3',
+    },
+    url: 'https://bc-public-static-assets.s3.ap-south-1.amazonaws.com/webapp/playlist/audio3.mp3',
+    type: 'audio',
+  },
+  {
+    name: 'Audio4',
+    id: 'audio4',
+    metadata: {
+      description: 'Artist4',
+    },
+    url: 'https://bc-public-static-assets.s3.ap-south-1.amazonaws.com/webapp/playlist/audio4.mp3',
+    type: 'audio',
+  },
+  {
+    name: 'Audio5',
+    id: 'audio5',
+    metadata: {
+      description: 'Artist5',
+    },
+    url: 'https://bc-public-static-assets.s3.ap-south-1.amazonaws.com/webapp/playlist/audio5.mp3',
+    type: 'audio',
+  },
+  {
+    name: 'Audio6',
+    id: 'audio6',
+    metadata: {
+      description: 'Artist6',
+    },
+    url: 'https://bc-public-static-assets.s3.ap-south-1.amazonaws.com/webapp/playlist/audio6.mp3',
+    type: 'audio',
+  },
+];
+
+export const defaultVideoList = [
+  {
+    name: 'Video1',
+    id: 'video1',
+    metadata: {
+      description: 'Artist1',
+    },
+    url: 'https://bc-public-static-assets.s3.ap-south-1.amazonaws.com/webapp/playlist/video1.mp4',
+    type: 'video',
+  },
+  {
+    name: 'Video2',
+    id: 'video2',
+    metadata: {
+      description: 'Artist2',
+    },
+    url: 'https://bc-public-static-assets.s3.ap-south-1.amazonaws.com/webapp/playlist/video2.mp4',
+    type: 'video',
+  },
+  {
+    name: 'Video3',
+    id: 'video3',
+    metadata: {
+      description: 'Artist2',
+    },
+    url: 'https://bc-public-static-assets.s3.ap-south-1.amazonaws.com/webapp/playlist/video3.mp4',
+    type: 'video',
+  },
+];
+
+export const DEFAULT_HLS_ROLE_KEY = 'HLS_VIEWER_ROLE';
+export const DEFAULT_HLS_VIEWER_ROLE = 'hls-viewer';
+export const DEFAULT_WAITING_VIEWER_ROLE = 'waiting-room';
+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_AUTH_TOKEN = 'auth_token';
+export const QUERY_PARAM_PREVIEW_AS_ROLE = 'preview_as_role';
+export const UI_MODE_ACTIVE_SPEAKER = 'activespeaker';
+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_ID: 'peer_id',
+  ROLE: 'role',
+};
+
+export const APP_DATA = {
+  uiSettings: 'uiSettings',
+  chatOpen: 'chatOpen',
+  chatSelector: 'chatSelector',
+  chatDraft: 'chatDraft',
+  appConfig: 'appConfig',
+  recordingUrl: 'recordingUrl',
+  sidePane: 'sidePane',
+  hlsStats: 'hlsStats',
+  hlsViewerRole: 'hlsViewerRole',
+  waitingViewerRole: 'waitingViewerRole',
+  subscribedNotifications: 'subscribedNotifications',
+  logo: 'logo',
+  tokenEndpoint: 'tokenEndpoint',
+  appLayout: 'appLayout',
+  hlsStarted: 'hlsStarted',
+  rtmpStarted: 'rtmpStarted',
+  recordingStarted: 'recordingStarted',
+  embedConfig: 'embedConfig',
+  pinnedTrackId: 'pinnedTrackId',
+  dropdownList: 'dropdownList',
+  authToken: 'authToken',
+  pdfConfig: 'pdfConfig',
+};
+export const UI_SETTINGS = {
+  isAudioOnly: 'isAudioOnly',
+  isHeadless: 'isHeadless',
+  maxTileCount: 'maxTileCount',
+  uiViewMode: 'uiViewMode',
+  showStatsOnTiles: 'showStatsOnTiles',
+  enableAmbientMusic: 'enableAmbientMusic',
+  mirrorLocalVideo: 'mirrorLocalVideo',
+  activeSpeakerSorting: 'activeSpeakerSorting',
+  hideLocalVideo: 'hideLocalVideo',
+};
+
+export const SIDE_PANE_OPTIONS = {
+  PARTICIPANTS: 'Participants',
+  CHAT: 'Chat',
+  STREAMING: 'STREAMING',
+  TILES: 'TILES',
+  SCREEN_TILES: 'SCREEN_TILES',
+};
+
+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() === 'mac os';
+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 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',
+  SPOTLIGHT: 'spotlight',
+};

package/src/Prebuilt/common/hooks.js

@@ -0,0 +1,47 @@
+// @ts-check
+import { useEffect, useRef, useState } from 'react';
+import { selectAvailableRoleNames, selectIsConnectedToRoom, selectPeerCount, useHMSStore } from '@100mslive/react-sdk';
+import { isInternalRole } from './utils';
+
+/**
+ * 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 roles = useHMSStore(selectAvailableRoleNames).filter(role => !isInternalRole(role));
+  return roles;
+};

package/src/Prebuilt/common/roles.js

@@ -0,0 +1,4 @@
+export const ROLES = {
+  TEACHER: 'teacher',
+  STUDENT: 'student',
+};

package/src/Prebuilt/common/useSortedPeers.js

@@ -0,0 +1,28 @@
+import { useEffect, useRef, useState } from 'react';
+import { useHMSVanillaStore } from '@100mslive/react-sdk';
+import PeersSorter from './PeersSorter';
+import { useActiveSpeakerSorting } from '../components/AppData/useUISettings';
+
+function useSortedPeers({ peers, maxTileCount = 9 }) {
+  const [sortedPeers, setSortedPeers] = useState([]);
+  const store = useHMSVanillaStore();
+  const activeSpeakerSorting = useActiveSpeakerSorting();
+  const peerSortedRef = useRef(new PeersSorter(store));
+  peerSortedRef.current.onUpdate(setSortedPeers);
+
+  useEffect(() => {
+    const peersSorter = peerSortedRef.current;
+    if (peers?.length > 0 && maxTileCount && activeSpeakerSorting) {
+      peersSorter.setPeersAndTilesPerPage({
+        peers,
+        tilesPerPage: maxTileCount,
+      });
+    } else if (!activeSpeakerSorting) {
+      peersSorter.stop();
+    }
+  }, [maxTileCount, peers, activeSpeakerSorting]);
+
+  return activeSpeakerSorting ? sortedPeers : peers;
+}
+
+export default useSortedPeers;

package/src/Prebuilt/common/utils.js

@@ -0,0 +1,91 @@
+import { QUERY_PARAM_SKIP_PREVIEW } 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 getDefaultMeetingUrl = () => {
+  return `${window.location.href.replace('meeting', 'preview')}?${QUERY_PARAM_SKIP_PREVIEW}=true`;
+};
+
+export const getRoutePrefix = () => {
+  return window.location.pathname.startsWith('/streaming') ? '/streaming' : '';
+};
+
+export const isStreamingKit = () => {
+  return window.location.pathname.startsWith('/streaming');
+};
+
+export const isInternalRole = role => role && role.startsWith('__internal');
+
+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`;
+};

package/src/Prebuilt/components/AppData/AppData.jsx

@@ -0,0 +1,189 @@
+import React, { useEffect } from 'react';
+import { useSearchParam } from 'react-use';
+import {
+  HMSRoomState,
+  selectAvailableRoleNames,
+  selectHLSState,
+  selectIsConnectedToRoom,
+  selectLocalPeerRoleName,
+  selectRolesMap,
+  selectRoomState,
+  selectRTMPState,
+  useHMSActions,
+  useHMSStore,
+  useRecordingStreaming,
+} from '@100mslive/react-sdk';
+import { normalizeAppPolicyConfig } from '../init/initUtils';
+import { UserPreferencesKeys, useUserPreferences } from '../hooks/useUserPreferences';
+import { useIsSidepaneTypeOpen, useSidepaneReset, useSidepaneState, useSidepaneToggle } from './useSidepane';
+import { useSetAppDataByKey } from './useUISettings';
+import { getMetadata } from '../../common/utils';
+import {
+  APP_DATA,
+  CHAT_SELECTOR,
+  DEFAULT_HLS_ROLE_KEY,
+  DEFAULT_HLS_VIEWER_ROLE,
+  DEFAULT_WAITING_VIEWER_ROLE,
+  QUERY_PARAM_VIEW_MODE,
+  SIDE_PANE_OPTIONS,
+  UI_MODE_ACTIVE_SPEAKER,
+  UI_MODE_GRID,
+  UI_SETTINGS,
+} from '../../common/constants';
+
+export const getAppDetails = appDetails => {
+  try {
+    return !appDetails ? {} : JSON.parse(appDetails);
+  } catch (error) {
+    return {};
+  }
+};
+
+const initialAppData = {
+  [APP_DATA.uiSettings]: {
+    [UI_SETTINGS.isAudioOnly]: false,
+    [UI_SETTINGS.isHeadless]: 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.activeSpeakerSorting]: process.env.REACT_APP_ENV === 'qa',
+    [UI_SETTINGS.hideLocalVideo]: false,
+  },
+  [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_ID]: '',
+  },
+  [APP_DATA.chatDraft]: '',
+  [APP_DATA.sidePane]: '',
+  [APP_DATA.hlsStarted]: false,
+  [APP_DATA.rtmpStarted]: false,
+  [APP_DATA.recordingStarted]: false,
+  [APP_DATA.hlsViewerRole]: DEFAULT_HLS_VIEWER_ROLE,
+  [APP_DATA.waitingViewerRole]: DEFAULT_WAITING_VIEWER_ROLE,
+  [APP_DATA.dropdownList]: [],
+  [APP_DATA.authToken]: '',
+};
+
+export const AppData = React.memo(({ appDetails, logo, recordingUrl, tokenEndpoint }) => {
+  const hmsActions = useHMSActions();
+  const isConnected = useHMSStore(selectIsConnectedToRoom);
+  const sidePane = useSidepaneState();
+  const resetSidePane = useSidepaneReset();
+  const [preferences = {}] = useUserPreferences(UserPreferencesKeys.UI_SETTINGS);
+  const roleNames = useHMSStore(selectAvailableRoleNames);
+  const rolesMap = useHMSStore(selectRolesMap);
+  const localPeerRole = useHMSStore(selectLocalPeerRoleName);
+  const isDefaultModeActiveSpeaker = useSearchParam(QUERY_PARAM_VIEW_MODE) === UI_MODE_ACTIVE_SPEAKER;
+
+  useEffect(() => {
+    if (!isConnected && sidePane && sidePane !== SIDE_PANE_OPTIONS.PARTICIPANTS) {
+      resetSidePane();
+    }
+  }, [isConnected, sidePane, resetSidePane]);
+
+  useEffect(() => {
+    hmsActions.initAppData(initialAppData);
+  }, [hmsActions]);
+
+  useEffect(() => {
+    const uiSettings = preferences || {};
+    const updatedSettings = {
+      ...uiSettings,
+      [UI_SETTINGS.uiViewMode]: isDefaultModeActiveSpeaker
+        ? UI_MODE_ACTIVE_SPEAKER
+        : uiSettings.uiViewMode || UI_MODE_GRID,
+    };
+    hmsActions.setAppData(APP_DATA.uiSettings, updatedSettings, true);
+  }, [preferences, isDefaultModeActiveSpeaker, hmsActions]);
+
+  useEffect(() => {
+    const appData = {
+      [APP_DATA.recordingUrl]: recordingUrl,
+      [APP_DATA.tokenEndpoint]: tokenEndpoint,
+      [APP_DATA.logo]: logo,
+      [APP_DATA.hlsViewerRole]: getMetadata(appDetails)[DEFAULT_HLS_ROLE_KEY] || DEFAULT_HLS_VIEWER_ROLE,
+      [APP_DATA.appConfig]: getAppDetails(appDetails),
+    };
+    for (const key in appData) {
+      hmsActions.setAppData([key], appData[key]);
+    }
+  }, [appDetails, logo, recordingUrl, tokenEndpoint, hmsActions]);
+
+  useEffect(() => {
+    if (!preferences.subscribedNotifications) {
+      return;
+    }
+    hmsActions.setAppData(APP_DATA.subscribedNotifications, preferences.subscribedNotifications, true);
+  }, [preferences.subscribedNotifications, hmsActions]);
+
+  useEffect(() => {
+    if (localPeerRole) {
+      const config = normalizeAppPolicyConfig(roleNames, rolesMap);
+      hmsActions.setAppData(APP_DATA.appLayout, config[localPeerRole]);
+    }
+  }, [roleNames, rolesMap, localPeerRole, hmsActions]);
+
+  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/useAppConfig.js

@@ -0,0 +1,7 @@
+import { selectAppDataByPath, useHMSStore } from '@100mslive/react-sdk';
+import { APP_DATA } from '../../common/constants';
+
+export const useAppConfig = (...path) => {
+  const appConfig = useHMSStore(selectAppDataByPath(APP_DATA.appConfig, ...path));
+  return appConfig;
+};

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

@@ -0,0 +1,6 @@
+import { selectAppDataByPath, useHMSStore } from '@100mslive/react-sdk';
+import { APP_DATA } from '../../common/constants';
+
+export const useAppLayout = path => {
+  return useHMSStore(selectAppDataByPath(APP_DATA.appLayout, path));
+};

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

@@ -0,0 +1,18 @@
+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];
+};