@stream-io/video-react-native-sdk 0.6.2 → 0.6.3

package/src/components/Livestream/HostLivestream/HostLivestream.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { StyleSheet, SafeAreaView } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 import InCallManager from 'react-native-incall-manager';
 
 import { useTheme } from '../../../contexts';
@@ -15,6 +15,17 @@ import {
   LivestreamLayout as DefaultLivestreamLayout,
   LivestreamLayoutProps,
 } from '../LivestreamLayout';
+import { Z_INDEX } from '../../../constants';
+import {
+  FloatingParticipantView as DefaultFloatingParticipantView,
+  FloatingParticipantViewProps,
+} from '../../Participant/FloatingParticipantView';
+import { useCallStateHooks } from '@stream-io/video-react-bindings';
+import { SfuModels, StreamVideoParticipant } from '@stream-io/video-client';
+import {
+  ScreenShareOverlay as DefaultScreenShaerOverlay,
+  ScreenShareOverlayProps,
+} from '../../utility/ScreenShareOverlay';
 
 /**
  * Props for the HostLivestream component.
@@ -33,12 +44,28 @@ export type HostLivestreamProps = HostLivestreamTopViewProps &
      * Component to customize the bottom view controls at the host's live stream.
      */
     HostLivestreamControls?: React.ComponentType<HostLivestreamControlsProps> | null;
+    /**
+     * Component to customize the FloatingParticipantView when screen is shared.
+     */
+    FloatingParticipantView?: React.ComponentType<FloatingParticipantViewProps> | null;
+    /**
+     * Component to customize the ScreenShareOverlay.
+     */
+    ScreenShareOverlay?: React.ComponentType<ScreenShareOverlayProps> | null;
     /**
      * Enable HTTP live streaming
      */
     hls?: boolean;
+    /**
+     * Should the published streams be stopped if the host end the livestream.
+     * @default true
+     */
+    stopPublishedStreamsOnEndStream?: boolean;
   };
 
+const hasVideoTrack = (p?: StreamVideoParticipant) =>
+  p?.publishedTracks.includes(SfuModels.TrackType.VIDEO);
+
 /**
  * The HostLivestream component displays the UI for the Host's live stream.
  */
@@ -46,6 +73,8 @@ export const HostLivestream = ({
   HostLivestreamTopView = DefaultHostLivestreamTopView,
   HostLivestreamControls = DefaultHostLivestreamControls,
   LivestreamLayout = DefaultLivestreamLayout,
+  FloatingParticipantView = DefaultFloatingParticipantView,
+  ScreenShareOverlay = DefaultScreenShaerOverlay,
   LiveIndicator,
   FollowerCount,
   DurationBadge,
@@ -54,35 +83,74 @@ export const HostLivestream = ({
   onEndStreamHandler,
   onStartStreamHandler,
   hls = false,
+  stopPublishedStreamsOnEndStream = true,
 }: HostLivestreamProps) => {
   const {
     theme: { colors, hostLivestream },
   } = useTheme();
 
+  const { useParticipants, useHasOngoingScreenShare } = useCallStateHooks();
+  const [currentSpeaker] = useParticipants();
+  const hasOngoingScreenShare = useHasOngoingScreenShare();
+  const floatingParticipant =
+    hasOngoingScreenShare && hasVideoTrack(currentSpeaker) && currentSpeaker;
+
   // Automatically route audio to speaker devices as relevant for watching videos.
   useEffect(() => {
     InCallManager.start({ media: 'video' });
     return () => InCallManager.stop();
   }, []);
 
+  const [topViewHeight, setTopViewHeight] = React.useState<number>();
+  const [controlsHeight, setControlsHeight] = React.useState<number>();
+
   const topViewProps: HostLivestreamTopViewProps = {
     LiveIndicator,
     FollowerCount,
     DurationBadge,
+    onLayout: (event) => {
+      setTopViewHeight(event.nativeEvent.layout.height);
+    },
   };
 
   return (
-    <SafeAreaView
+    <View
       style={[
         styles.container,
         {
-          backgroundColor: colors.static_grey,
+          backgroundColor: colors.dark_gray,
         },
         hostLivestream.container,
       ]}
     >
-      {HostLivestreamTopView && <HostLivestreamTopView {...topViewProps} />}
-      {LivestreamLayout && <LivestreamLayout />}
+      {HostLivestreamTopView && (
+        <View
+          style={styles.topViewContainer}
+          onLayout={(event) => {
+            setTopViewHeight(event.nativeEvent.layout.height);
+          }}
+        >
+          <HostLivestreamTopView {...topViewProps} />
+        </View>
+      )}
+      {FloatingParticipantView &&
+        floatingParticipant &&
+        topViewHeight &&
+        controlsHeight && (
+          <FloatingParticipantView
+            participant={floatingParticipant}
+            draggableContainerStyle={[
+              StyleSheet.absoluteFill,
+              {
+                top: topViewHeight,
+                bottom: controlsHeight,
+              },
+            ]}
+          />
+        )}
+      {LivestreamLayout && (
+        <LivestreamLayout ScreenShareOverlay={ScreenShareOverlay} />
+      )}
       {HostLivestreamControls && (
         <HostLivestreamControls
           onEndStreamHandler={onEndStreamHandler}
@@ -90,9 +158,13 @@ export const HostLivestream = ({
           HostStartStreamButton={HostStartStreamButton}
           LivestreamMediaControls={LivestreamMediaControls}
           hls={hls}
+          onLayout={(event) => {
+            setControlsHeight(event.nativeEvent.layout.height);
+          }}
+          stopPublishedStreamsOnEndStream={stopPublishedStreamsOnEndStream}
         />
       )}
-    </SafeAreaView>
+    </View>
   );
 };
 
@@ -100,4 +172,18 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
   },
+  topViewContainer: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    zIndex: Z_INDEX.IN_FRONT,
+  },
+  controlsViewContainer: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    zIndex: Z_INDEX.IN_FRONT,
+  },
 });

package/src/components/Livestream/LivestreamControls/HostLivestreamControls.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { StyleSheet, View } from 'react-native';
+import { StyleSheet, View, ViewProps } from 'react-native';
 import {
   HostStartStreamButton as DefaultHostStartStreamButton,
   HostStartStreamButtonProps,
@@ -27,6 +27,11 @@ export type HostLivestreamControlsProps = HostStartStreamButtonProps & {
    * Enable HTTP live streaming
    */
   hls?: boolean;
+  onLayout?: ViewProps['onLayout'];
+  /**
+   * Should the published streams be stopped if the host end the livestream.
+   */
+  stopPublishedStreamsOnEndStream: boolean;
 };
 
 /**
@@ -38,6 +43,8 @@ export const HostLivestreamControls = ({
   onEndStreamHandler,
   onStartStreamHandler,
   hls = false,
+  stopPublishedStreamsOnEndStream,
+  onLayout,
 }: HostLivestreamControlsProps) => {
   const {
     theme: { colors, hostLivestreamControls },
@@ -49,6 +56,7 @@ export const HostLivestreamControls = ({
         { backgroundColor: colors.static_overlay },
         hostLivestreamControls.container,
       ]}
+      onLayout={onLayout}
     >
       <View style={[styles.leftElement, hostLivestreamControls.leftElement]}>
         {HostStartStreamButton && (
@@ -56,6 +64,7 @@ export const HostLivestreamControls = ({
             onEndStreamHandler={onEndStreamHandler}
             onStartStreamHandler={onStartStreamHandler}
             hls={hls}
+            stopPublishedStreamsOnEndStream={stopPublishedStreamsOnEndStream}
           />
         )}
       </View>

package/src/components/Livestream/LivestreamControls/HostStartStreamButton.tsx

@@ -13,18 +13,19 @@ import {
 } from 'react-native';
 import { useTheme } from '../../../contexts';
 import { EndBroadcastIcon, StartStreamIcon } from '../../../icons';
+import { SfuModels } from '@stream-io/video-client';
 
 /**
  * Props for the HostStartStreamButton component.
  */
 export type HostStartStreamButtonProps = {
   /**
-   * Handler to be called when the Start Stream button is pressed.
+   * Handler to be called after the Start Stream button is pressed.
    * @returns void
    */
   onStartStreamHandler?: () => void;
   /**
-   * Handler to be called when the End Stream button is pressed.
+   * Handler to be called after the End Stream button is pressed.
    * @returns void
    */
   onEndStreamHandler?: () => void;
@@ -32,6 +33,10 @@ export type HostStartStreamButtonProps = {
    * Enable HTTP live streaming
    */
   hls?: boolean;
+  /**
+   * Should the published streams be stopped if the host end the livestream.
+   */
+  stopPublishedStreamsOnEndStream: boolean;
 };
 
 /**
@@ -41,6 +46,7 @@ export const HostStartStreamButton = ({
   onEndStreamHandler,
   onStartStreamHandler,
   hls,
+  stopPublishedStreamsOnEndStream,
 }: HostStartStreamButtonProps) => {
   const [isAwaitingResponse, setIsAwaitingResponse] = useState(false);
   const { useIsCallLive, useIsCallHLSBroadcastingInProgress } =
@@ -62,10 +68,6 @@ export const HostStartStreamButton = ({
   const liveOrBroadcasting = isCallLive || isCallBroadcasting;
 
   const onStartStreamButtonPress = async () => {
-    if (onStartStreamHandler) {
-      onStartStreamHandler();
-      return;
-    }
     try {
       setIsAwaitingResponse(true);
       await call?.goLive();
@@ -73,18 +75,21 @@ export const HostStartStreamButton = ({
         await call?.startHLS();
       }
       setIsAwaitingResponse(false);
+      if (onStartStreamHandler) {
+        onStartStreamHandler();
+      }
     } catch (error) {
       console.error('Error starting livestream', error);
     }
   };
 
   const onEndStreamButtonPress = async () => {
-    if (onEndStreamHandler) {
-      onEndStreamHandler();
-      return;
-    }
     try {
       setIsAwaitingResponse(true);
+      if (stopPublishedStreamsOnEndStream) {
+        await call?.stopPublish(SfuModels.TrackType.VIDEO);
+        await call?.stopPublish(SfuModels.TrackType.SCREEN_SHARE);
+      }
       if (hls) {
         await call?.stopHLS();
       } else {
@@ -92,6 +97,9 @@ export const HostStartStreamButton = ({
       }
 
       setIsAwaitingResponse(false);
+      if (onEndStreamHandler) {
+        onEndStreamHandler();
+      }
     } catch (error) {
       console.error('Error stopping livestream', error);
     }

package/src/components/Livestream/LivestreamControls/LivestreamScreenShareToggleButton.tsx

@@ -0,0 +1,161 @@
+import React, { useEffect } from 'react';
+import { useTheme } from '../../../contexts/ThemeContext';
+import {
+  NativeModules,
+  Platform,
+  Pressable,
+  StyleSheet,
+  View,
+  findNodeHandle,
+} from 'react-native';
+import { ScreenShare } from '../../../icons/ScreenShare';
+import { StopScreenShare } from '../../../icons/StopScreenShare';
+import { ScreenCapturePickerView } from '@stream-io/react-native-webrtc';
+import { SfuModels } from '@stream-io/video-client';
+import { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';
+import { useIsIosScreenshareBroadcastStarted } from '../../../hooks/useIsIosScreenshareBroadcastStarted';
+import { usePrevious } from '../../../utils/hooks/usePrevious';
+
+export type LivestreamScreenShareToggleButtonProps = {};
+
+// ios >= 14.0 or android - platform restrictions
+const CanDeviceScreenShare =
+  (Platform.OS === 'ios' &&
+    // @ts-ignore
+    Number.parseInt(Platform.Version.split('.')[0], 10) >= 14) ||
+  Platform.OS === 'android';
+
+/**
+ * The LivestreamVideoControlButton controls the screenshare stream publish/unpublish while in the livestream for the host.
+ */
+export const LivestreamScreenShareToggleButton = () => {
+  const {
+    theme: {
+      colors,
+      variants: { iconSizes, buttonSizes },
+      livestreamScreenShareToggleButton,
+    },
+  } = useTheme();
+
+  const call = useCall();
+  const { useLocalParticipant, useCallSettings } = useCallStateHooks();
+  const callSettings = useCallSettings();
+  const isScreenSharingEnabledInCall = callSettings?.screensharing.enabled;
+
+  const iosScreenShareStartedFromSystem = useIsIosScreenshareBroadcastStarted();
+  const prevIosScreenShareStartedFromSystem = usePrevious(
+    iosScreenShareStartedFromSystem,
+  );
+
+  const localParticipant = useLocalParticipant();
+  const hasPublishedScreenShare = localParticipant?.publishedTracks.includes(
+    SfuModels.TrackType.SCREEN_SHARE,
+  );
+
+  // listens to iOS screen share broadcast started event from the system
+  useEffect(() => {
+    const run = async () => {
+      if (Platform.OS !== 'ios') {
+        return;
+      }
+      if (
+        iosScreenShareStartedFromSystem &&
+        !prevIosScreenShareStartedFromSystem
+      ) {
+        const media = await navigator.mediaDevices.getDisplayMedia({
+          // @ts-ignore
+          deviceId: 'broadcast',
+          video: true,
+          audio: true,
+        });
+        await call?.publishScreenShareStream(media);
+      } else if (
+        !iosScreenShareStartedFromSystem &&
+        prevIosScreenShareStartedFromSystem
+      ) {
+        await call?.stopPublish(SfuModels.TrackType.SCREEN_SHARE);
+      }
+    };
+    run();
+  }, [
+    call,
+    iosScreenShareStartedFromSystem,
+    prevIosScreenShareStartedFromSystem,
+  ]);
+
+  const screenCapturePickerViewiOSRef = React.useRef(null);
+
+  const onPress = async () => {
+    if (!hasPublishedScreenShare) {
+      if (Platform.OS === 'ios') {
+        const reactTag = findNodeHandle(screenCapturePickerViewiOSRef.current);
+        await NativeModules.ScreenCapturePickerViewManager.show(reactTag);
+        // After this the iOS screen share broadcast started/stopped event will be triggered
+        // and the useEffect listener will handle the rest
+      } else {
+        try {
+          const media = await navigator.mediaDevices.getDisplayMedia({
+            video: true,
+            audio: true,
+          });
+          await call?.publishScreenShareStream(media);
+        } catch (e) {
+          // ignored.. user didnt allow the screen share in the popup
+        }
+      }
+    } else if (hasPublishedScreenShare) {
+      await call?.stopPublish(SfuModels.TrackType.SCREEN_SHARE);
+    }
+  };
+
+  if (!isScreenSharingEnabledInCall || !CanDeviceScreenShare) {
+    return null;
+  }
+
+  return (
+    <Pressable
+      onPress={onPress}
+      style={[
+        styles.container,
+        {
+          backgroundColor: hasPublishedScreenShare
+            ? colors.error
+            : colors.dark_gray,
+          height: buttonSizes.xs,
+          width: buttonSizes.xs,
+        },
+        livestreamScreenShareToggleButton.container,
+      ]}
+    >
+      <View
+        style={[
+          styles.icon,
+          {
+            height: iconSizes.sm,
+            width: iconSizes.sm,
+          },
+          livestreamScreenShareToggleButton.icon,
+        ]}
+      >
+        {hasPublishedScreenShare ? (
+          <StopScreenShare color={colors.static_white} />
+        ) : (
+          <ScreenShare color={colors.static_white} />
+        )}
+      </View>
+      {Platform.OS === 'ios' && (
+        <ScreenCapturePickerView ref={screenCapturePickerViewiOSRef} />
+      )}
+    </Pressable>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginHorizontal: 4,
+    borderRadius: 4,
+  },
+  icon: {},
+});

package/src/components/Livestream/LivestreamControls/ViewerLivestreamControls.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { StyleSheet, View } from 'react-native';
+import { StyleSheet, View, ViewProps } from 'react-native';
 
 import {
   ViewerLeaveStreamButton as DefaultViewerLeaveStreamButton,
@@ -16,6 +16,7 @@ export type ViewerLivestreamControlsProps = ViewerLeaveStreamButtonProps & {
    * Component to customize the leave stream button on the viewer's end live stream.
    */
   ViewerLeaveStreamButton?: React.ComponentType<ViewerLeaveStreamButtonProps> | null;
+  onLayout?: ViewProps['onLayout'];
 };
 
 /**
@@ -24,6 +25,7 @@ export type ViewerLivestreamControlsProps = ViewerLeaveStreamButtonProps & {
 export const ViewerLivestreamControls = ({
   ViewerLeaveStreamButton = DefaultViewerLeaveStreamButton,
   onLeaveStreamHandler,
+  onLayout,
 }: ViewerLivestreamControlsProps) => {
   const {
     theme: { colors, viewerLivestreamControls },
@@ -38,6 +40,7 @@ export const ViewerLivestreamControls = ({
         },
         viewerLivestreamControls.container,
       ]}
+      onLayout={onLayout}
     >
       <View style={[styles.leftElement, viewerLivestreamControls.leftElement]}>
         {ViewerLeaveStreamButton && (

package/src/components/Livestream/LivestreamControls/index.ts

@@ -1,5 +1,8 @@
 export * from './HostLivestreamControls';
-export * from './LivestreamMediaControls';
 export * from './HostStartStreamButton';
 export * from './LivestreamAudioControlButton';
+export * from './LivestreamMediaControls';
 export * from './LivestreamVideoControlButton';
+export * from './ViewerLeaveStreamButton';
+export * from './ViewerLivestreamControls';
+export * from './LivestreamScreenShareToggleButton';

package/src/components/Livestream/LivestreamLayout/LivestreamLayout.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { SfuModels, StreamVideoParticipant } from '@stream-io/video-client';
 import { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';
 import { StyleSheet, View, ViewStyle } from 'react-native';
@@ -8,6 +8,8 @@ import {
   VideoRenderer as DefaultVideoRenderer,
   VideoRendererProps,
 } from '../../Participant';
+import { ScreenShareOverlayProps } from '../../utility/ScreenShareOverlay';
+import { VideoDimension } from '@stream-io/video-client/dist/src/gen/video/sfu/models/models';
 
 /**
  * Props for the LivestreamLayout component.
@@ -22,6 +24,10 @@ export type LivestreamLayoutProps = {
    * Component to customize the video component of the participant.
    */
   VideoRenderer?: React.ComponentType<VideoRendererProps> | null;
+  /**
+   * Component to customize the ScreenShareOverlay.
+   */
+  ScreenShareOverlay?: React.ComponentType<ScreenShareOverlayProps> | null;
 };
 
 const hasScreenShare = (p?: StreamVideoParticipant) =>
@@ -33,6 +39,7 @@ const hasScreenShare = (p?: StreamVideoParticipant) =>
 export const LivestreamLayout = ({
   landscape,
   VideoRenderer = DefaultVideoRenderer,
+  ScreenShareOverlay,
 }: LivestreamLayoutProps) => {
   const { useParticipants, useHasOngoingScreenShare } = useCallStateHooks();
   const call = useCall();
@@ -47,6 +54,23 @@ export const LivestreamLayout = ({
 
   usePaginatedLayoutSortPreset(call);
 
+  const [objectFit, setObjectFit] =
+    useState<
+      React.ComponentProps<NonNullable<typeof VideoRenderer>>['objectFit']
+    >();
+
+  // no need to pass object fit for local participant as the dimensions are for remote tracks
+  const objectFitToBeSet = currentSpeaker?.isLocalParticipant
+    ? undefined
+    : objectFit;
+
+  const onDimensionsChange = useCallback((d: VideoDimension | undefined) => {
+    if (d) {
+      const isWidthWide = d.width > d.height;
+      setObjectFit(isWidthWide ? 'contain' : 'cover');
+    }
+  }, []);
+
   const landScapeStyles: ViewStyle = {
     flexDirection: landscape ? 'row' : 'column',
   };
@@ -56,20 +80,56 @@ export const LivestreamLayout = ({
       style={[
         styles.container,
         landScapeStyles,
-        { backgroundColor: colors.dark_gray },
+        { backgroundColor: colors.static_grey },
         livestreamLayout.container,
       ]}
     >
-      {VideoRenderer && hasOngoingScreenShare && presenter && (
-        <VideoRenderer trackType="screenShareTrack" participant={presenter} />
-      )}
+      <RemoteVideoTrackDimensionsRenderLessComponent
+        onDimensionsChange={onDimensionsChange}
+      />
+      {VideoRenderer &&
+        hasOngoingScreenShare &&
+        presenter &&
+        (ScreenShareOverlay ? (
+          <ScreenShareOverlay />
+        ) : (
+          <VideoRenderer trackType="screenShareTrack" participant={presenter} />
+        ))}
       {VideoRenderer && !hasOngoingScreenShare && currentSpeaker && (
-        <VideoRenderer participant={currentSpeaker} trackType="videoTrack" />
+        <VideoRenderer
+          participant={currentSpeaker}
+          objectFit={objectFitToBeSet}
+          trackType="videoTrack"
+        />
       )}
     </View>
   );
 };
 
+const RemoteVideoTrackDimensionsRenderLessComponent = ({
+  onDimensionsChange,
+}: {
+  onDimensionsChange: (d: VideoDimension | undefined) => void;
+}) => {
+  const [dimension, setDimension] = useState<VideoDimension>();
+  const { useCallStatsReport } = useCallStateHooks();
+  const statsReport = useCallStatsReport();
+  const highestFrameHeight = statsReport?.subscriberStats?.highestFrameHeight;
+  const highestFrameWidth = statsReport?.subscriberStats?.highestFrameWidth;
+
+  useEffect(() => {
+    if (highestFrameHeight && highestFrameWidth) {
+      setDimension({ height: highestFrameHeight, width: highestFrameWidth });
+    }
+  }, [highestFrameHeight, highestFrameWidth]);
+
+  useEffect(() => {
+    onDimensionsChange(dimension);
+  }, [dimension, onDimensionsChange]);
+
+  return null;
+};
+
 const styles = StyleSheet.create({
   container: {
     flex: 1,

package/src/components/Livestream/LivestreamTopView/HostLivestreamTopView.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { StyleSheet, View } from 'react-native';
+import { StyleSheet, View, ViewProps } from 'react-native';
 import {
   DurationBadge as DefaultDurationBadge,
   DurationBadgeProps,
@@ -32,6 +32,7 @@ export type HostLivestreamTopViewProps = {
    * Component to customize the Follower count indicator on the host's live stream's top view.
    */
   FollowerCount?: React.ComponentType<FollowerCountProps> | null;
+  onLayout?: ViewProps['onLayout'];
 };
 
 /**
@@ -41,6 +42,7 @@ export const HostLivestreamTopView = ({
   DurationBadge = DefaultDurationBadge,
   LiveIndicator = DefaultLiveIndicator,
   FollowerCount = DefaultFollowerCount,
+  onLayout,
 }: HostLivestreamTopViewProps) => {
   const { useIsCallLive, useIsCallHLSBroadcastingInProgress } =
     useCallStateHooks();
@@ -58,6 +60,7 @@ export const HostLivestreamTopView = ({
         { backgroundColor: colors.static_overlay },
         hostLivestreamTopView.container,
       ]}
+      onLayout={onLayout}
     >
       <View style={[styles.leftElement, hostLivestreamTopView.leftElement]}>
         {DurationBadge && <DurationBadge mode="host" />}

package/src/components/Livestream/LivestreamTopView/ViewerLivestreamTopView.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { StyleSheet, View } from 'react-native';
+import { StyleSheet, View, ViewProps } from 'react-native';
 import {
   DurationBadge as DefaultDurationBadge,
   DurationBadgeProps,
@@ -31,6 +31,7 @@ export type ViewerLivestreamTopViewProps = {
    * Component to customize the Follower count indicator on the viewer's live stream's top view.
    */
   FollowerCount?: React.ComponentType<FollowerCountProps> | null;
+  onLayout?: ViewProps['onLayout'];
 };
 
 /**
@@ -40,6 +41,7 @@ export const ViewerLivestreamTopView = ({
   DurationBadge = DefaultDurationBadge,
   LiveIndicator = DefaultLiveIndicator,
   FollowerCount = DefaultFollowerCount,
+  onLayout,
 }: ViewerLivestreamTopViewProps) => {
   const {
     theme: { colors, viewerLivestreamTopView },
@@ -52,6 +54,7 @@ export const ViewerLivestreamTopView = ({
         { backgroundColor: colors.static_overlay },
         viewerLivestreamTopView.container,
       ]}
+      onLayout={onLayout}
     >
       <View style={[styles.leftElement, viewerLivestreamTopView.leftElement]}>
         <View style={[styles.liveInfo, viewerLivestreamTopView.liveInfo]}>

package/src/components/Livestream/LivestreamTopView/index.ts

@@ -2,3 +2,4 @@ export * from './DurationBadge';
 export * from './FollowerCount';
 export * from './LiveIndicator';
 export * from './HostLivestreamTopView';
+export * from './ViewerLivestreamTopView';