@100mslive/react-native-room-kit 0.1.0 → 1.0.0

package/src/components/RoomSettingsModalDebugModeContent.tsx

@@ -13,10 +13,6 @@ import {
 } from '@100mslive/react-native-hms';
 import { useDispatch, useSelector } from 'react-redux';
 import Toast from 'react-native-simple-toast';
-import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
-import Ionicons from 'react-native-vector-icons/Ionicons';
-import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
-import EntypoIcons from 'react-native-vector-icons/Entypo';
 import { openSettings, requestNotifications } from 'react-native-permissions';
 
 import { COLORS } from '../utils/theme';
@@ -28,6 +24,7 @@ import {
   changeShowCustomHLSPlayerControls,
 } from '../redux/actions';
 import { ModalTypes, PipModes } from '../utils/types';
+import { useIsHLSViewer } from '../hooks-util';
 
 interface RoomSettingsModalDebugModeContentProps {
   newAudioMixingMode: HMSAudioMixingMode;
@@ -78,6 +75,7 @@ export const RoomSettingsModalDebugModeContent: React.FC<
   const showCustomHLSPlayerControls = useSelector(
     (state: RootState) => state.app.joinConfig.showCustomHLSPlayerControls
   );
+  const isHLSViewer = useIsHLSViewer();
 
   // CONSTANTS
   const isPipModeUnavailable = pipModeStatus === PipModes.NOT_AVAILABLE;
@@ -243,21 +241,17 @@ export const RoomSettingsModalDebugModeContent: React.FC<
 
   return (
     <ScrollView style={styles.container}>
-      {localPeerRole?.name?.includes('hls-') ? (
+      {isHLSViewer ? (
         <SettingItem
           onPress={handleHLSPlayerAspectRatio}
           text={'Change Aspect Ratio'}
-          IconType={MaterialCommunityIcons}
-          iconName={'aspect-ratio'}
         />
       ) : null}
 
-      {!localPeerRole?.name?.includes('hls-') ? (
+      {!isHLSViewer ? (
         <SettingItem
           onPress={handleLocalRemoteAudiosMute}
           text={`${muteAllTracksAudio ? 'Unmute' : 'Mute'} Room`}
-          IconType={Ionicons}
-          iconName={muteAllTracksAudio ? 'mic-off-outline' : 'mic-outline'}
         />
       ) : null}
 
@@ -265,26 +259,17 @@ export const RoomSettingsModalDebugModeContent: React.FC<
         <SettingItem
           onPress={handleHLSStreaming}
           text={`${isHLSStreaming === true ? 'Stop' : 'Start'} HLS Streaming`}
-          IconType={Ionicons}
-          iconName="radio-outline"
         />
       ) : null}
 
       {debugMode && localPeerRole?.permissions?.changeRole ? (
-        <SettingItem
-          onPress={changeBulkRole}
-          text="Bulk Role Change"
-          IconType={Ionicons}
-          iconName="people-outline"
-        />
+        <SettingItem onPress={changeBulkRole} text="Bulk Role Change" />
       ) : null}
 
       {debugMode && localPeerRole?.permissions?.mute ? (
         <SettingItem
           onPress={handleRemoteAudiosMute}
           text="Remote Mute All Audio Tracks"
-          IconType={Ionicons}
-          iconName="mic-off-outline"
         />
       ) : null}
 
@@ -294,38 +279,27 @@ export const RoomSettingsModalDebugModeContent: React.FC<
         <SettingItem
           onPress={changeTrackState}
           text="Change Track State For Role"
-          IconType={MaterialIcons}
-          iconName="track-changes"
         />
       ) : null}
 
       {localPeerRole?.publishSettings?.allowed?.includes('audio') ? (
-        <SettingItem
-          onPress={switchAudioOutput}
-          text="Switch Audio Output"
-          IconType={MaterialCommunityIcons}
-          iconName="cast-audio"
-        />
+        <SettingItem onPress={switchAudioOutput} text="Switch Audio Output" />
       ) : null}
 
       {!isPipModeUnavailable ? (
         <SettingItem
           onPress={enterPipMode}
           text="Picture in Picture (PIP) Mode"
-          IconType={MaterialCommunityIcons}
-          iconName="picture-in-picture-bottom-right"
         />
       ) : null}
 
       {debugMode ? (
         <>
-          {localPeerRole?.name?.includes('hls-') ? (
+          {isHLSViewer ? (
             <>
               <SettingItem
                 onPress={toggleShowHLSStats}
                 text={showHLSStats ? 'Hide HLS Stats' : 'Show HLS Stats'}
-                IconType={MaterialCommunityIcons}
-                iconName={'clipboard-pulse-outline'}
               />
 
               <SettingItem
@@ -335,8 +309,6 @@ export const RoomSettingsModalDebugModeContent: React.FC<
                     ? 'Disable HLS Player Controls'
                     : 'Enable HLS Player Controls'
                 }
-                IconType={Ionicons}
-                iconName={'ios-settings-outline'}
               />
 
               <SettingItem
@@ -346,18 +318,11 @@ export const RoomSettingsModalDebugModeContent: React.FC<
                     ? 'Hide Custom HLS Player Controls'
                     : 'Show Custom HLS Player Controls'
                 }
-                IconType={Ionicons}
-                iconName={'ios-settings-outline'}
               />
             </>
           ) : (
             <>
-              <SettingItem
-                onPress={showRTCStats}
-                text="Show RTC Stats"
-                IconType={MaterialCommunityIcons}
-                iconName={'clipboard-pulse-outline'}
-              />
+              <SettingItem onPress={showRTCStats} text="Show RTC Stats" />
             </>
           )}
 
@@ -369,29 +334,18 @@ export const RoomSettingsModalDebugModeContent: React.FC<
                 text={`${
                   audioDeviceListenerAdded ? 'Remove' : 'Set'
                 } Audio Output Change Listener`}
-                IconType={MaterialCommunityIcons}
-                iconName="video-input-component"
               />
 
               <SettingItem
                 onPress={handleAudioShare}
                 text={`${isAudioShared ? 'Stop' : 'Start'} Audioshare`}
-                IconType={Ionicons}
-                iconName="share-social-outline"
               />
 
-              <SettingItem
-                onPress={changeAudioMode}
-                text="Set Audio Mode"
-                IconType={MaterialCommunityIcons}
-                iconName="call-split"
-              />
+              <SettingItem onPress={changeAudioMode} text="Set Audio Mode" />
 
               <SettingItem
                 onPress={setAudioMixingMode}
                 text="Set Audio Mixing Mode"
-                IconType={EntypoIcons}
-                iconName="sound-mix"
               />
             </>
           ) : null}
@@ -404,20 +358,11 @@ export const RoomSettingsModalDebugModeContent: React.FC<
 interface SettingItemProps {
   onPress(): void;
   text: string;
-  iconName: string;
-  IconType: any;
 }
 
-const SettingItem: React.FC<SettingItemProps> = ({
-  onPress,
-  text,
-  iconName,
-  IconType,
-}) => {
+const SettingItem: React.FC<SettingItemProps> = ({ onPress, text }) => {
   return (
     <TouchableOpacity style={styles.button} onPress={onPress}>
-      <IconType name={iconName} size={24} style={styles.icon} />
-
       <Text style={styles.text}>{text}</Text>
     </TouchableOpacity>
   );
@@ -432,6 +377,7 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     marginVertical: 12,
+    marginHorizontal: 16,
   },
   text: {
     fontFamily: 'Inter-Medium',

package/src/components/StatusBar.tsx

@@ -1,22 +1,24 @@
 import * as React from 'react';
 import { StatusBar, Platform } from 'react-native';
+import type { StatusBarProps } from 'react-native';
 
 import { useShowLandscapeLayout } from '../hooks-util';
 
-type HMSStatusBarProps = {
+type HMSStatusBarProps = StatusBarProps & {
   hidden?: boolean;
 };
 
-export const HMSStatusBar: React.FC<HMSStatusBarProps> = ({ hidden }) => {
+export const HMSStatusBar: React.FC<HMSStatusBarProps> = ({ hidden, ...resetProps }) => {
   const showLandscapeLayout = useShowLandscapeLayout();
 
   return (
     <StatusBar
+      {...resetProps}
       hidden={(Platform.OS === 'ios' && hidden) || showLandscapeLayout} // use `hidden` prop to hide Status bar on iOS
       barStyle={
-        Platform.OS === 'android' && hidden ? 'dark-content' : 'default'
+        Platform.OS === 'android' && hidden ? 'dark-content' : resetProps.barStyle
       } // hack: use `dark-content` value to make StatusBar look like it's hidden
-      animated={true}
+      animated={resetProps.animated ?? true}
     />
   );
 };

package/src/components/StopRecordingModalContent.tsx

@@ -17,7 +17,9 @@ export const StopRecordingModalContent: React.FC<
 > = ({ dismissModal }) => {
   const dispatch = useDispatch();
   const hmsInstance = useHMSInstance();
-  const startingOrStoppingRecording = useSelector((state: RootState) => state.app.startingOrStoppingRecording);
+  const startingOrStoppingRecording = useSelector(
+    (state: RootState) => state.app.startingOrStoppingRecording
+  );
 
   const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
     headerText: {

package/src/components/StreamingQualityModalContent.tsx

@@ -13,12 +13,12 @@ import {
   HMSLayer,
   HMSSimulcastLayerDefinition,
 } from '@100mslive/react-native-hms';
-import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 
 import { CustomButton } from './CustomButton';
 import type { RootState } from '../redux';
 import { COLORS } from '../utils/theme';
 import { Menu, MenuItem } from './MenuModal';
+import { ChevronIcon } from '../Icons';
 
 interface PeerSettingsModalContentProps {
   track: HMSTrack;
@@ -111,10 +111,13 @@ export const StreamingQualityModalContent: React.FC<
               <Text style={styles.participantFilterText} numberOfLines={1}>
                 {selectedLayer}
               </Text>
-              <MaterialIcons
-                name={showQualityOptions ? 'arrow-drop-up' : 'arrow-drop-down'}
-                style={styles.participantFilterIcon}
-                size={24}
+              <ChevronIcon
+                direction={'down'}
+                style={{
+                  transform: [
+                    { rotateZ: showQualityOptions ? '180deg' : '0deg' },
+                  ],
+                }}
               />
             </TouchableOpacity>
           }
@@ -201,9 +204,6 @@ const styles = StyleSheet.create({
     marginRight: 12,
     textTransform: 'capitalize',
   },
-  participantFilterIcon: {
-    color: COLORS.TEXT.HIGH_EMPHASIS,
-  },
   roleChangeModalHeading: {
     color: COLORS.TEXT.HIGH_EMPHASIS,
     fontSize: 20,

package/src/components/TilesContainer.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { View, Dimensions } from 'react-native';
+import { useSelector } from 'react-redux';
 import type { ViewStyle } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import type { HMSView } from '@100mslive/react-native-hms';
@@ -8,6 +9,7 @@ import { Tile } from './Tile';
 import type { PeerTrackNode } from '../utils/types';
 import { useIsLandscapeOrientation } from '../utils/dimension';
 import { groupIntoPairs } from '../utils/functions';
+import type { RootState } from '../redux';
 
 interface TilesContainerProps {
   peerTrackNodes: PeerTrackNode[];
@@ -23,11 +25,15 @@ const _TilesContainer: React.FC<TilesContainerProps> = ({
   const { left, right } = useSafeAreaInsets();
   const isLandscapeOrientation = useIsLandscapeOrientation();
 
-  const stylesConfig = computeTileWidthAndHeight(
-    peerTrackNodes.length,
-    isLandscapeOrientation
+  const screenshareTilesAvailable = useSelector(
+    (state: RootState) => state.app.screensharePeerTrackNodes.length > 0
   );
 
+  const stylesConfig = computeTileWidthAndHeight(peerTrackNodes.length, {
+    isLandscapeOrientation,
+    type: screenshareTilesAvailable ? 'row' : 'default',
+  });
+
   // In this layout, Tile will take as much height and width as possible
   // Width and Height of Tile are independent of each other
   const growableTileLayout = peerTrackNodes.length <= 4;
@@ -36,7 +42,15 @@ const _TilesContainer: React.FC<TilesContainerProps> = ({
     <View
       style={[
         // If tile are growable, then we want whatever remaining space to be between them
-        { justifyContent: growableTileLayout ? 'space-between' : 'center' },
+        {
+          justifyContent:
+            screenshareTilesAvailable && peerTrackNodes.length === 1
+              ? 'center'
+              : growableTileLayout
+              ? 'space-between'
+              : 'center',
+          flexDirection: screenshareTilesAvailable ? 'row' : 'column',
+        },
         { width: Dimensions.get('window').width - left - right },
       ]}
     >
@@ -78,7 +92,7 @@ const _TilesContainer: React.FC<TilesContainerProps> = ({
                       : 'space-between',
                   flexDirection: 'row',
                   flex: growableTileLayout ? 1 : 0,
-                  marginTop: isFirstPairGroup ? 0 : 8,
+                  marginTop: isFirstPairGroup ? 0 : 4,
                 }}
               >
                 {peerTrackNodesPair.map((peerTrackNode) => {
@@ -112,11 +126,11 @@ export { TilesContainer };
 // Utility Functions
 
 const oneTileStyle = { width: '100%', height: '100%' }; // 1 Column Layout
-const twoTileStyle = { width: '100%', height: '49.4444%' }; // 1 Column Layout
-const threeTileStyle = { width: '100%', height: '32.6666%' }; // 1 Column Layout
+const twoTileStyle = { width: '100%', height: '49.7222%' }; // 1 Column Layout
+const threeTileStyle = { width: '100%', height: '33%' }; // 1 Column Layout
 
-const fourTileStyle = { width: '49%', height: '100%' }; // Grid Layout when Width and Height has no-correlatiom
-const fiveAndSixTileStyle = { width: '49%', aspectRatio: 1 }; // Grid Layout when width and Height as fixed aspectRatio
+const fourTileStyle = { width: '49.5%', height: '100%' }; // Grid Layout when Width and Height has no-correlatiom
+const fiveAndSixTileStyle = { width: '49.5%', aspectRatio: 1 }; // Grid Layout when width and Height as fixed aspectRatio
 
 const oneTileStyleLandscape = { width: '100%', height: '100%' };
 const twoTileStyleLandscape = { width: '50%', height: '100%' };
@@ -125,26 +139,42 @@ const fourTileStyleLandscape = { width: '50%', height: '50%' };
 
 function computeTileWidthAndHeight(
   totalTiles: number,
-  isLandscapeOrientation: boolean
+  config: {
+    type: 'row' | 'column' | 'default';
+    isLandscapeOrientation: boolean;
+  }
 ): {
   width?: ViewStyle['width'];
   height?: ViewStyle['height'];
   aspectRatio?: ViewStyle['aspectRatio'];
 } {
+  const { type, isLandscapeOrientation } = config || {
+    type: 'default',
+    isLandscapeOrientation: false,
+  };
+
+  if (isLandscapeOrientation) {
+    return (
+      [
+        oneTileStyleLandscape,
+        twoTileStyleLandscape,
+        threeTileStyleLandscape,
+        fourTileStyleLandscape,
+      ][Math.min(totalTiles - 1, 3)] || { width: '100%', height: '100%' }
+    );
+  }
+
+  if (type === 'row') {
+    return fiveAndSixTileStyle;
+  }
+
   return (
-    (isLandscapeOrientation
-      ? [
-          oneTileStyleLandscape,
-          twoTileStyleLandscape,
-          threeTileStyleLandscape,
-          fourTileStyleLandscape,
-        ][Math.min(totalTiles - 1, 3)]
-      : [
-          oneTileStyle,
-          twoTileStyle,
-          threeTileStyle,
-          fourTileStyle,
-          fiveAndSixTileStyle,
-        ][Math.min(totalTiles - 1, 4)]) || { width: '100%', height: '100%' }
+    [
+      oneTileStyle,
+      twoTileStyle,
+      threeTileStyle,
+      fourTileStyle,
+      fiveAndSixTileStyle,
+    ][Math.min(totalTiles - 1, 4)] || { width: '100%', height: '100%' }
   );
 }

package/src/components/WebrtcView.tsx

@@ -11,6 +11,8 @@ import PIPView from './PIPView';
 import { useIsPortraitOrientation } from '../utils/dimension';
 import { LocalPeerRegularVideoView } from './LocalPeerRegularVideoView';
 import { WelcomeInMeeting } from './WelcomeInMeeting';
+import { OverlayContainer } from './OverlayContainer';
+import { OverlayedViews } from './OverlayedViews';
 
 interface WebrtcViewProps {
   peerTrackNodes: Array<PeerTrackNode>;
@@ -30,43 +32,51 @@ export const WebrtcView = React.forwardRef<GridViewRefAttrs, WebrtcViewProps>(
       (state: RootState) => state.user.spotlightTrackId
     );
 
+    const screenshareTilesAvailable = useSelector(
+      (state: RootState) => state.app.screensharePeerTrackNodes.length > 0
+    );
+
     const pairedPeers = useMemo(
       () =>
         pairData(
           peerTrackNodes,
           isPortrait
-            ? MaxTilesInOnePage.IN_PORTRAIT
+            ? screenshareTilesAvailable
+              ? MaxTilesInOnePage.IN_PORTRAIT_WITH_SCREENSHARES
+              : MaxTilesInOnePage.IN_PORTRAIT
             : MaxTilesInOnePage.IN_LANDSCAPE,
           spotlightTrackId
         ),
-      [peerTrackNodes, spotlightTrackId, isPortrait]
+      [peerTrackNodes, screenshareTilesAvailable, spotlightTrackId, isPortrait]
     );
 
-    const canShowTiles = useSelector(
+    const showWelcomeBanner = useSelector(
       (state: RootState) =>
-        !!state.app.localPeerTrackNode || pairedPeers.length > 0
+        !state.app.localPeerTrackNode && pairedPeers.length === 0
     );
 
-    if (!canShowTiles) {
-      return <WelcomeInMeeting />;
-    }
-
     if (isPipModeActive) {
       return <PIPView pairedPeers={pairedPeers} />;
     }
 
-    if (pairedPeers.length > 0) {
-      return (
-        <GridView
-          ref={gridViewRef}
-          onPeerTileMorePress={handlePeerTileMorePress}
-          pairedPeers={pairedPeers}
-        />
-      );
-    }
-
     return (
-      <LocalPeerRegularVideoView onMoreOptionsPress={handlePeerTileMorePress} />
+      <OverlayContainer>
+        {showWelcomeBanner ? (
+          <WelcomeInMeeting />
+        ) : pairedPeers.length > 0 ? (
+          <GridView
+            ref={gridViewRef}
+            onPeerTileMorePress={handlePeerTileMorePress}
+            pairedPeers={pairedPeers}
+          />
+        ) : (
+          <LocalPeerRegularVideoView
+            onMoreOptionsPress={handlePeerTileMorePress}
+          />
+        )}
+
+        <OverlayedViews />
+      </OverlayContainer>
     );
   }
 );

package/src/components/WelcomeInMeeting.tsx

@@ -1,31 +1,15 @@
 import * as React from 'react';
-import { View, Text, StyleSheet } from 'react-native';
-
-import { useHMSRoomStyleSheet } from '../hooks-util';
+import { View, StyleSheet, Image } from 'react-native';
 
 export interface WelcomeInMeetingProps {}
 
 export const WelcomeInMeeting: React.FC<WelcomeInMeetingProps> = () => {
-  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
-    heading: {
-      fontFamily: `${typography.font_family}-Bold`,
-      color: theme.palette.on_surface_high,
-    },
-    description: {
-      fontFamily: `${typography.font_family}-Medium`,
-      color: theme.palette.on_surface_medium,
-    },
-  }));
-
   return (
     <View style={styles.container}>
-      <Text style={[styles.heading, hmsRoomStyles.heading]}>Welcome!</Text>
-      <Text style={[styles.description, hmsRoomStyles.description]}>
-        You're the first one here.
-      </Text>
-      <Text style={[styles.description, hmsRoomStyles.description]}>
-        Sit back and relax till the others join.
-      </Text>
+      <Image
+        source={require('../assets/welcome.png')}
+        style={{ width: 149, height: 152 }}
+      />
     </View>
   );
 };
@@ -36,17 +20,4 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
-  heading: {
-    fontSize: 28,
-    lineHeight: 36,
-    letterSpacing: 0.1,
-    textAlign: 'center',
-    paddingBottom: 32,
-  },
-  description: {
-    fontSize: 16,
-    lineHeight: 24,
-    letterSpacing: 0.15,
-    textAlign: 'center',
-  },
 });

package/src/components/index.ts

@@ -1,7 +1,4 @@
-export * from './ChatWindow';
 export * from './Preview';
-export * from './Picker';
-export * from './CustomInput';
 export * from './CustomButton';
 export * from './DefaultModal';
 export * from './MenuModal';

package/src/hooks-util-selectors.tsx

@@ -1,17 +1,56 @@
-import type { HMSPeer } from '@100mslive/react-native-hms';
+import type {
+  DefaultConferencingScreen,
+  HLSLiveStreamingScreen,
+  Layout,
+} from '@100mslive/types-prebuilt';
+import type { HMSRole } from '@100mslive/react-native-hms';
 import { JoinForm_JoinBtnType } from '@100mslive/types-prebuilt/elements/join_form';
 
 import type { RootState } from './redux';
 
-export const selectIsHLSViewer = (peer: HMSPeer | null | undefined) =>
-  peer?.role?.name?.includes('hls') ?? false;
+export const selectIsHLSViewer = (
+  role: HMSRole | null | undefined,
+  layoutConfig: Layout | null | undefined
+) => {
+  if (layoutConfig) {
+    return !!layoutConfig.screens?.conferencing?.hls_live_streaming;
+  }
+  return role?.name?.includes('hls-') ?? false;
+};
+
+export const selectLayoutConfigForRole = (
+  layoutConfig: Layout[] | null,
+  role: HMSRole | null
+): Layout | null => {
+  if (layoutConfig === null || layoutConfig.length <= 0) {
+    return null;
+  }
+
+  if (role === null) {
+    return layoutConfig[0] || null;
+  }
+
+  const selectedLayout = layoutConfig.find(
+    (layout) => layout.role === role.name
+  );
+
+  return selectedLayout || layoutConfig[0] || null;
+};
 
 export const selectShouldGoLive = (state: RootState) => {
-  const layoutConfig = state.hmsStates.layoutConfig;
-  const isHLSStreaming = state.hmsStates.room?.hlsStreamingState.running;
+  const currentRole = state.hmsStates.localPeer?.role || null;
+
+  const layoutConfig = selectLayoutConfigForRole(
+    state.hmsStates.layoutConfig,
+    currentRole
+  );
+
+  const isHLSStreaming =
+    state.hmsStates.room?.hlsStreamingState?.running ?? false;
 
   const joinButtonType =
-    layoutConfig?.screens?.preview?.default?.elements?.join_form?.join_btn_type;
+    layoutConfig?.screens?.preview?.default?.elements?.join_form
+      ?.join_btn_type ?? JoinForm_JoinBtnType.JOIN_BTN_TYPE_JOIN_ONLY;
 
   const canStartHLSStreaming =
     joinButtonType === JoinForm_JoinBtnType.JOIN_BTN_TYPE_JOIN_AND_GO_LIVE ||
@@ -23,3 +62,27 @@ export const selectShouldGoLive = (state: RootState) => {
 
   return canStartHLSStreaming && !isHLSStreaming;
 };
+
+export const selectChatLayoutConfig = (layoutConfig: Layout | null) => {
+  const conferencingConfig = layoutConfig?.screens?.conferencing;
+  const screenOptions = conferencingConfig
+    ? conferencingConfig.default || conferencingConfig.hls_live_streaming
+    : null;
+
+  return screenOptions?.elements?.chat ?? null;
+};
+
+export const selectVideoTileLayoutConfig = (layoutConfig: Layout | null) => {
+  return layoutConfig?.screens?.conferencing?.default?.elements
+    ?.video_tile_layout;
+};
+
+export const selectConferencingScreenConfig = (
+  layoutConfig: Layout | null
+): DefaultConferencingScreen | HLSLiveStreamingScreen | null => {
+  const conferencingConfig = layoutConfig?.screens?.conferencing;
+  return (
+    (conferencingConfig?.default || conferencingConfig?.hls_live_streaming) ??
+    null
+  );
+};