agora-appbuilder-core 4.0.35 → 4.1.0-beta-2

package/template/src/atoms/CustomIcon.tsx

@@ -152,4 +152,5 @@ export interface IconsInterface {
   'recording-status': string;
   fullscreen: string;
   add_reaction: string;
+  spotlight: string;
 }

package/template/src/atoms/ImageIcon.tsx

@@ -31,6 +31,7 @@ export interface ImageIconProps {
   // hoverEffect?: boolean;
   // hoverEffectStyle?: ViewStyle;
   showWarningIcon?: boolean;
+  iconParentContainerStyle?: ViewStyle;
 }
 
 const ImageIcon = (props: ImageIconProps) => {
@@ -46,6 +47,7 @@ const ImageIcon = (props: ImageIconProps) => {
     base64TintColor = '',
     iconType = 'round',
     iconContainerStyle,
+    iconParentContainerStyle = {},
     isHovered,
   } = props;
   return (
@@ -57,6 +59,7 @@ const ImageIcon = (props: ImageIconProps) => {
             ? {backgroundColor: props.iconBackgroundColor}
             : {}
           : {backgroundColor: 'transparent', borderRadius: 0},
+        iconParentContainerStyle,
       ]}>
       <View
         style={[

package/template/src/atoms/ToolbarItem.tsx

@@ -21,8 +21,6 @@ const ToolbarItem = (props: ToolbarItemProps) => {
   const {isHorizontal, position} = useToolbar();
   //isHorizontal true -> top/bottom bar
   //isHorizontal false -> left/right bar
-  // todo hari - first item shouldnot contain the margin right
-  // todo hari - last item shouldnot contain the margin right
 
   //action sheet
   if (isMobileUA() && position === ToolbarPosition.bottom) {

package/template/src/components/ChatContext.ts

@@ -15,6 +15,7 @@ import {createContext, SetStateAction} from 'react';
 
 import {ChatMessageType, Reaction} from './chat-messages/useChatMessages';
 import {createHook} from 'customization-implementation';
+import {ViewStyle} from 'react-native';
 
 export interface ChatBubbleProps {
   isLocal: boolean;
@@ -35,6 +36,12 @@ export interface ChatBubbleProps {
   scrollOffset?: number;
   replyToMsgId?: string;
   isLastMsg?: boolean;
+  remoteUIConfig?: {
+    username?: string; // Custom username for remote user
+    avatarIcon?: string;
+    bubbleStyleLayer1?: ViewStyle;
+    bubbleStyleLayer2?: ViewStyle;
+  };
 
   render?: (
     isLocal: boolean,

package/template/src/components/Controls.tsx

@@ -1029,7 +1029,12 @@ export const RaiseHandToolbarItem = props => {
 export const LocalAudioToolbarItem = props => {
   return (
     <ToolbarItem testID="localAudio-btn" toolbarProps={props}>
-      <LocalAudioMute showToolTip={true} />
+      <LocalAudioMute
+        showToolTip={true}
+        iconBGColor={props?.iconBGColor}
+        iconSize={props?.iconSize}
+        containerStyle={props?.containerStyle}
+      />
     </ToolbarItem>
   );
 };

package/template/src/components/ErrorBoundary.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import {logger, LogSource} from '../logger/AppBuilderLogger';
+
+class ErrorBoundary extends React.Component<{fallback: JSX.Element}> {
+  constructor(props) {
+    super(props);
+    this.state = {hasError: false};
+  }
+
+  static getDerivedStateFromError(error) {
+    // Update state so the next render will show the fallback UI.
+    return {hasError: true};
+  }
+
+  componentDidCatch(error, info) {
+    logger.error(
+      LogSource.Internals,
+      'VIDEO_CALL_ROOM',
+      'Application crashed',
+      {
+        errorMessage: error?.message,
+        errorStack: info?.componentStack,
+      },
+    );
+  }
+
+  render() {
+    if (this.state.hasError) {
+      // You can render any custom fallback UI
+      return this.props.fallback;
+    }
+
+    return this.props.children;
+  }
+}
+
+export default ErrorBoundary;

package/template/src/components/ErrorBoundaryFallback.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import {Text, View, StyleSheet, ScrollView} from 'react-native';
+import Card from '../atoms/Card';
+import ThemeConfig from '../theme';
+
+export const ErrorBoundaryFallback = () => {
+  return (
+    <View style={style.root}>
+      <ScrollView contentContainerStyle={style.main}>
+        <Card>
+          <View>
+            <Text style={style.text}>
+              An unexpected error occurred. Please try again.
+            </Text>
+          </View>
+        </Card>
+      </ScrollView>
+    </View>
+  );
+};
+
+const style = StyleSheet.create({
+  logoContainerStyle: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  root: {
+    flex: 1,
+  },
+  main: {
+    flexGrow: 1,
+    flexDirection: 'row',
+    justifyContent: 'center',
+  },
+  text: {
+    fontSize: ThemeConfig.FontSize.large,
+    fontWeight: '400',
+    lineHeight: ThemeConfig.FontSize.large,
+    color: $config.FONT_COLOR,
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    opacity: ThemeConfig.EmphasisOpacity.high,
+  },
+});

package/template/src/components/RTMConfigure.tsx

@@ -114,29 +114,34 @@ const RtmConfigure = (props: any) => {
   }, [defaultContent]);
 
   React.useEffect(() => {
-    const handBrowserClose = ev => {
-      ev.preventDefault();
-      return (ev.returnValue = 'Are you sure you want to exit?');
-    };
-    const logoutRtm = () => {
-      engine.current.leaveChannel(rtcProps.channel);
-    };
-
-    if (!isWebInternal()) return;
-    window.addEventListener(
-      'beforeunload',
-      isWeb() && !isSDK() ? handBrowserClose : () => {},
-    );
-
-    window.addEventListener('pagehide', logoutRtm);
-    // cleanup this component
-    return () => {
-      window.removeEventListener(
+    if (!$config.ENABLE_CONVERSATIONAL_AI) {
+      const handBrowserClose = ev => {
+        ev.preventDefault();
+        window.setTimeout(function () {
+          window.location = `${window.location.origin}/create`;
+        }, 0);
+        return false;
+      };
+      const logoutRtm = () => {
+        engine.current.leaveChannel(rtcProps.channel);
+      };
+
+      if (!isWebInternal()) return;
+      window.addEventListener(
         'beforeunload',
         isWeb() && !isSDK() ? handBrowserClose : () => {},
       );
-      window.removeEventListener('pagehide', logoutRtm);
-    };
+
+      window.addEventListener('pagehide', logoutRtm);
+      // cleanup this component
+      return () => {
+        window.removeEventListener(
+          'beforeunload',
+          isWeb() && !isSDK() ? handBrowserClose : () => {},
+        );
+        window.removeEventListener('pagehide', logoutRtm);
+      };
+    }
   }, []);
 
   const doLoginAndSetupRTM = async () => {

package/template/src/components/participants/Participant.tsx

@@ -42,6 +42,7 @@ import {
   useLayout,
   useContent,
   useSidePanel,
+  useSpotlight,
 } from 'customization-api';
 import {getPinnedLayoutName} from '../../pages/video-call/DefaultLayouts';
 import UserActionMenuOptionsOptions from './UserActionMenuOptions';
@@ -96,6 +97,7 @@ const Participant = (props: ParticipantInterface) => {
   const showModal = () => {
     setActionMenuVisible(state => !state);
   };
+  const {setSpotlightUid, spotlightUid} = useSpotlight();
 
   return (
     <>
@@ -105,6 +107,8 @@ const Participant = (props: ParticipantInterface) => {
         user={props.user}
         btnRef={moreIconRef}
         from={'partcipant'}
+        spotlightUid={spotlightUid}
+        setSpotlightUid={setSpotlightUid}
       />
       <PlatformWrapper showModal={showModal} setIsHovered={setIsHovered}>
         <View style={styles.container} ref={usercontainerRef}>

package/template/src/components/participants/UserActionMenuOptions.tsx

@@ -57,6 +57,7 @@ import {
   moreBtnRemoveFromRoom,
   moreBtnRemoveFromTop,
   moreBtnRemoveScreenShare,
+  moreBtnSpotlight,
   moreBtnStopScreenShare,
   moreBtnVideo,
   moreBtnViewInLarge,
@@ -64,6 +65,7 @@ import {
   userRemovedFromTheRoomToastHeading,
 } from '../../language/default-labels/videoCallScreenLabels';
 import {isAndroid, isIOS} from '../../utils/common';
+import {EventNames} from '../../rtm-events';
 
 interface UserActionMenuOptionsOptionsProps {
   user: ContentInterface;
@@ -71,6 +73,8 @@ interface UserActionMenuOptionsOptionsProps {
   setActionMenuVisible: (actionMenuVisible: boolean) => void;
   btnRef: any;
   from: 'partcipant' | 'screenshare-participant' | 'video-tile';
+  spotlightUid?: UidType;
+  setSpotlightUid?: (uid: UidType) => void;
 }
 export default function UserActionMenuOptionsOptions(
   props: UserActionMenuOptionsOptionsProps,
@@ -85,7 +89,7 @@ export default function UserActionMenuOptionsOptions(
     useState(false);
   const [actionMenuitems, setActionMenuitems] = useState<ActionMenuItem[]>([]);
   const {setSidePanel} = useSidePanel();
-  const {user, actionMenuVisible, setActionMenuVisible} = props;
+  const {user, actionMenuVisible, setActionMenuVisible, spotlightUid} = props;
   const {currentLayout} = useLayout();
   const {pinnedUid, activeUids, customContent, secondaryPinnedUid} =
     useContent();
@@ -122,6 +126,7 @@ export default function UserActionMenuOptionsOptions(
   const stopScreenShareLabel = useString(moreBtnStopScreenShare)();
   const removeScreenShareLabel = useString(moreBtnRemoveScreenShare)();
   const removeFromRoomLabel = useString(moreBtnRemoveFromRoom)();
+  const moreBtnSpotlightLabel = useString(moreBtnSpotlight);
 
   useEffect(() => {
     customEvents.on('DisableChat', data => {
@@ -212,6 +217,33 @@ export default function UserActionMenuOptionsOptions(
       }
     }
 
+    if ($config.ENABLE_SPOTLIGHT && isHost && user.type === 'rtc') {
+      items.push({
+        icon: 'spotlight',
+        title: moreBtnSpotlightLabel(user.uid == props?.spotlightUid),
+        iconColor: $config.SECONDARY_ACTION_COLOR,
+        textColor: $config.SECONDARY_ACTION_COLOR,
+        onPress: () => {
+          if (user.uid == props?.spotlightUid) {
+            props?.setSpotlightUid(0);
+            events.send(
+              EventNames.SPOTLIGHT_USER_CHANGED,
+              JSON.stringify({user_id: 0}),
+              PersistanceLevel.Session,
+            );
+          } else {
+            props?.setSpotlightUid(user.uid);
+            events.send(
+              EventNames.SPOTLIGHT_USER_CHANGED,
+              JSON.stringify({user_id: user.uid}),
+              PersistanceLevel.Session,
+            );
+          }
+          setActionMenuVisible(false);
+        },
+      });
+    }
+
     /**
      * Below menu items for remote user with type rtc(not for screenshare)
      */
@@ -399,6 +431,7 @@ export default function UserActionMenuOptionsOptions(
     disableChatUids,
     secondaryPinnedUid,
     currentLayout,
+    spotlightUid,
   ]);
 
   const {width: globalWidth, height: globalHeight} = useWindowDimensions();

package/template/src/components/precall/PermissionHelper.tsx

@@ -44,8 +44,11 @@ const PermissionHelper = () => {
       ),
     ])
       .then(([cameraResult, micResult]) => {
+        const conditionCheck = $config.AUDIO_ROOM
+          ? micResult.state !== 'granted'
+          : cameraResult.state !== 'granted' || micResult.state !== 'granted';
         // Chrome
-        if (cameraResult.state !== 'granted' || micResult.state !== 'granted') {
+        if (conditionCheck) {
           setShowPopup(true);
           const onChangeFunc = () => {
             if (
@@ -59,15 +62,15 @@ const PermissionHelper = () => {
         }
       })
       .catch(e => {
-        // Firefox
-        setTimeout(() => {
-          setShowPopup(true);
-        }, 1000);
+        // Firefox and chrome
+        setShowPopup(true);
       });
     //If permission already given it will take few milliseconds to resolve the promise. it will show the popup which not required. so added timeout
-    // setTimeout(() => {
-    //   setShowPopup(true);
-    // }, 1000);
+    setTimeout(() => {
+      if (permissionStatus === PermissionState.REQUESTED) {
+        setShowPopup(true);
+      }
+    }, 1000);
   }, []);
   //todo hari update the modal message based the veritical
   return (

package/template/src/language/default-labels/videoCallScreenLabels.ts

@@ -267,6 +267,7 @@ export const moreBtnRemoveFromLarge = 'moreBtnRemoveFromLarge';
 export const moreBtnPinToTop = 'moreBtnPinToTop';
 export const moreBtnRemoveFromTop = 'moreBtnRemoveFromTop';
 export const moreBtnMessagePrivately = 'moreBtnMessagePrivately';
+export const moreBtnSpotlight = 'moreBtnSpotlight';
 
 export const moreBtnAudio = 'moreBtnAudio';
 export const moreBtnVideo = 'moreBtnVideo';
@@ -380,6 +381,8 @@ export const livestreamPromoteAsCoHostToastHeading =
 export const livestreamRequestAlreadyProcessed =
   'livestreamRequestAlreadyProcessed';
 
+export const videoRoomInTheSpotlightText =
+  `video${room}InTheSpotlightText` as const;
 export const videoRoomUserFallbackText =
   `video${room}UserFallbackText` as const;
 
@@ -682,6 +685,8 @@ export interface I18nVideoCallScreenLabelsInterface {
   [moreBtnChangeName]?: I18nBaseType;
   [moreBtnStopScreenShare]?: I18nBaseType;
   [moreBtnRemoveScreenShare]?: I18nBaseType;
+  [moreBtnSpotlight]?: I18nConditionalType;
+  [videoRoomInTheSpotlightText]?: I18nBaseType;
 
   [muteAllConfirmationPopoverContent]?: I18nBaseType<I18nMuteType>;
   [muteAllConfirmationPopoverPrimaryBtnText]?: I18nBaseType;
@@ -1080,6 +1085,9 @@ export const VideoCallScreenLabels: I18nVideoCallScreenLabelsInterface = {
   [moreBtnChangeName]: 'Change Name',
   [moreBtnStopScreenShare]: 'Stop Screenshare',
   [moreBtnRemoveScreenShare]: 'Remove Screenshare',
+  [moreBtnSpotlight]: spotlightOn =>
+    spotlightOn ? 'Remove Spotlight' : 'Spotlight',
+  [videoRoomInTheSpotlightText]: 'In the Spotlight',
 
   [muteAllConfirmationPopoverContent]: (type: I18nMuteType) =>
     `Mute everyone's ${type} on the call?`,

package/template/src/logger/AppBuilderLogger.tsx

@@ -105,7 +105,10 @@ type LogType = {
     | 'recordings_get'
     | 'recording_delete';
   [LogSource.Events]: 'CUSTOM_EVENTS' | 'RTM_EVENTS';
-  [LogSource.CustomizationAPI]: 'Log';
+  [LogSource.CustomizationAPI]:
+    | 'Log'
+    | 'AI_AGENT_CUSTOMIZATION'
+    | 'EXTERNAL_CUSTOMIZATION';
   [LogSource.SDK]: 'Log' | 'Event';
 };
 

package/template/src/pages/Create.tsx

@@ -22,6 +22,7 @@ import {
   maxInputLimit,
   isMobileUA,
   trimText,
+  isValidReactComponent,
 } from '../utils/common';
 import {useCustomization} from 'customization-implementation';
 import {useString} from '../utils/useString';
@@ -62,24 +63,22 @@ import {
   createRoomSuccessToastSubHeading,
 } from '../language/default-labels/createScreenLabels';
 import {LogSource, logger} from '../logger/AppBuilderLogger';
-import {backendErrorCode} from 'src/utils/BackendErrorCode';
 
 const Create = () => {
   const {CreateComponent} = useCustomization(data => {
     let components: {
       CreateComponent?: React.ElementType;
     } = {};
-    // commented for v1 release
-    // if (
-    //   data?.components?.create &&
-    //   typeof data?.components?.create !== 'object'
-    // ) {
-    //   if (
-    //     data?.components?.create &&
-    //     isValidReactComponent(data?.components?.create)
-    //   )
-    //     components.CreateComponent = data?.components?.create;
-    // }
+    if (
+      data?.components?.create &&
+      typeof data?.components?.create !== 'object'
+    ) {
+      if (
+        data?.components?.create &&
+        isValidReactComponent(data?.components?.create)
+      )
+        components.CreateComponent = data?.components?.create;
+    }
     return components;
   });
 

package/template/src/pages/VideoCall.tsx

@@ -398,6 +398,7 @@ const VideoCall: React.FC = () => {
     //   }
     // },
     EndCall: () => {
+      debugger;
       clearState('join');
       setTimeout(() => {
         // TODO: These callbacks are being called twice

package/template/src/pages/video-call/ActionSheet.tsx

@@ -47,7 +47,7 @@ const ActionSheet = props => {
       }
     }
   });
-  const {snapPointsMinMax = [100, 400]} = props;
+  const {snapPointsMinMax = [100, 400], hideDefaultActionSheet = false} = props;
   const {setActionSheetVisible} = useToast();
   const [isExpanded, setIsExpanded] = React.useState(false);
   const [isChatOpen, setIsChatOpen] = React.useState(false);
@@ -74,7 +74,7 @@ const ActionSheet = props => {
   const {sidePanel, setSidePanel} = useSidePanel();
   const [showOverlay, setShowOverlay] = React.useState(false);
   const handleSheetChanges = useCallback((index: number) => {
-    bottomSheetRef.current?.snapTo(({snapPoints}) => snapPoints[index]);
+    bottomSheetRef?.current?.snapTo(({snapPoints}) => snapPoints[index]);
     index === 0 ? setIsExpanded(false) : setIsExpanded(true);
   }, []);
 
@@ -161,7 +161,7 @@ const ActionSheet = props => {
   };
   const handleSpringEnd = (event: SpringEvent) => {
     if (event.type == 'SNAP') {
-      const isMinmized = bottomSheetRef.current.height === 100;
+      const isMinmized = bottomSheetRef?.current?.height === 100;
       isMinmized && setShowOverlay(false);
       if (event.source === 'dragging') {
         if (isMinmized) {
@@ -203,32 +203,36 @@ const ActionSheet = props => {
       <View>
         {/* Controls Action Sheet */}
 
-        <BottomSheet
-          scrollLocking={false}
-          ref={bottomSheetRef}
-          open={true}
-          onSpringStart={handleSpringStart}
-          onSpringEnd={handleSpringEnd}
-          // skipInitialTransition={true}
-          expandOnContentDrag={true}
-          snapPoints={({maxHeight}) => snapPointsMinMax}
-          defaultSnap={({lastSnap, snapPoints}) =>
-            lastSnap ?? Math.min(...snapPoints)
-          }
-          header={
-            <>
-              <ActionSheetHandle sidePanel={SidePanelType.None} />
-              <Spacer size={12} />
-            </>
-          }
-          blocking={false}>
-          <ActionSheetContent
-            handleSheetChanges={handleSheetChanges}
-            isExpanded={isExpanded}
-            native={false}
-            {...props}
-          />
-        </BottomSheet>
+        {!hideDefaultActionSheet ? (
+          <BottomSheet
+            scrollLocking={false}
+            ref={bottomSheetRef}
+            open={true}
+            onSpringStart={handleSpringStart}
+            onSpringEnd={handleSpringEnd}
+            // skipInitialTransition={true}
+            expandOnContentDrag={true}
+            snapPoints={({maxHeight}) => snapPointsMinMax}
+            defaultSnap={({lastSnap, snapPoints}) =>
+              lastSnap ?? Math.min(...snapPoints)
+            }
+            header={
+              <>
+                <ActionSheetHandle sidePanel={SidePanelType.None} />
+                <Spacer size={12} />
+              </>
+            }
+            blocking={false}>
+            <ActionSheetContent
+              handleSheetChanges={handleSheetChanges}
+              isExpanded={isExpanded}
+              native={false}
+              {...props}
+            />
+          </BottomSheet>
+        ) : (
+          <></>
+        )}
         {/* Chat  Action Sheet */}
         <BottomSheet
           sibling={ToastComponentRender}

package/template/src/pages/video-call/SidePanelHeader.tsx

@@ -22,7 +22,7 @@ import {numFormatter} from '../../utils';
 import ChatContext from '../../components/ChatContext';
 import {useCaption} from '../../subComponents/caption/useCaption';
 import ActionMenu, {ActionMenuItem} from '../../atoms/ActionMenu';
-import {calculatePosition} from '../../utils/common';
+import {calculatePosition, isMobileUA} from '../../utils/common';
 import LanguageSelectorPopup from '../../subComponents/caption/LanguageSelectorPopup';
 import useSTTAPI from '../../subComponents/caption/useSTTAPI';
 import useGetName from '../../utils/useGetName';
@@ -56,7 +56,13 @@ export const SettingsHeader = props => {
       centerComponent={
         <Text style={SidePanelStyles.heading}>{settingsLabel}</Text>
       }
-      trailingIconName="close"
+      trailingIconName={
+        $config.ENABLE_CONVERSATIONAL_AI
+          ? isMobileUA()
+            ? 'close'
+            : ''
+          : 'close'
+      }
       trailingIconOnPress={() => {
         props.handleClose && props.handleClose();
         setSidePanel(SidePanelType.None);
@@ -119,7 +125,6 @@ export const ChatHeader = () => {
   return (
     <SidePanelHeader
       isChat={true}
-      showTintedOverlay={showEmojiPicker}
       leadingIconName={isPrivateActive ? 'back-btn' : null}
       leadingIconOnPress={
         isPrivateActive

package/template/src/pages/video-call/SpotlightHighlighter.tsx

@@ -0,0 +1,91 @@
+import React from 'react';
+import {View, StyleSheet, Text} from 'react-native';
+import ThemeConfig from '../../theme';
+import ImageIcon from '../../atoms/ImageIcon';
+import {useLayout, useContent} from 'customization-api';
+import {isMobileUA, isWeb} from '../../utils/common';
+import {getGridLayoutName} from './DefaultLayouts';
+import hexadecimalTransparency from '../../utils/hexadecimalTransparency';
+import {useString} from '../../utils/useString';
+
+const SpotlightHighligher = () => {
+  const {activeUids, customContent} = useContent();
+  const {currentLayout} = useLayout();
+  const activeUidsLen = activeUids?.filter(i => !customContent[i])?.length;
+  const reduceSpace =
+    isMobileUA() &&
+    activeUids.length > 4 &&
+    currentLayout === getGridLayoutName();
+  const spotlightText = useString('videoRoomInTheSpotlightText')();
+
+  return (
+    <View
+      style={[
+        style.container,
+        reduceSpace ? {left: 2, bottom: 2} : {},
+        reduceSpace && activeUidsLen > 12 ? {padding: 2} : {},
+      ]}>
+      <ImageIcon
+        iconType="plain"
+        name={'spotlight'}
+        tintColor={$config.PRIMARY_ACTION_BRAND_COLOR}
+        iconSize={20}
+      />
+      <PlatformWrapper>
+        <Text
+          numberOfLines={1}
+          textBreakStrategy="simple"
+          ellipsizeMode="tail"
+          style={[style.name]}>
+          {spotlightText}
+        </Text>
+      </PlatformWrapper>
+    </View>
+  );
+};
+const PlatformWrapper = ({children}) => {
+  return isWeb() ? (
+    <div
+      style={{
+        userSelect: 'none',
+        MozUserSelect: 'none',
+        WebkitUserSelect: 'none',
+        msUserSelect: 'none',
+        alignSelf: 'center',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        color: $config.VIDEO_AUDIO_TILE_TEXT_COLOR,
+      }}>
+      {children}
+    </div>
+  ) : (
+    <>{children}</>
+  );
+};
+
+const style = StyleSheet.create({
+  container: {
+    backgroundColor:
+      $config.VIDEO_AUDIO_TILE_OVERLAY_COLOR + hexadecimalTransparency['25%'],
+    position: 'absolute',
+    alignItems: 'center',
+    padding: 8,
+    top: 8,
+    left: 8,
+    borderRadius: 4,
+    flexDirection: 'row',
+    zIndex: 999,
+    elevation: 5,
+  },
+  name: {
+    color: $config.VIDEO_AUDIO_TILE_TEXT_COLOR,
+    fontSize: ThemeConfig.FontSize.small,
+    fontWeight: '600',
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    flexShrink: 1,
+    marginLeft: 4,
+    marginRight: 2,
+  },
+});
+
+export default SpotlightHighligher;