Create a Streaming App with React Native and GetStream

import React, { useEffect } from "react";
import { StyleSheet } from "react-native";
import InCallManager from "react-native-incall-manager";
import { useCallStateHooks } from "@stream-io/video-react-bindings";
import { hasVideo } from "@stream-io/video-client";
import {
  DurationBadge,
  FloatingParticipantView,
  FollowerCount,
  LiveIndicator,
  LivestreamLayout,
  useTheme,
  ViewerLivestreamProps,
  ViewerLivestreamTopViewProps,
} from "@stream-io/video-react-native-sdk";
import { Layout } from "components";
import { ViewerLivestreamTopView } from "./ViewerLivestreamTopView";
import { ViewerLivestreamControls } from "./ViewerLivestreamControls";

type ViewerLivestreamViewProps = {} & ViewerLivestreamProps;

export const ViewerLivestreamView: React.FC<ViewerLivestreamViewProps> = ({
  onLeaveStreamHandler,
}) => {
  const {
    theme: { viewerLivestream }, // Get the theme for viewer livestream
  } = useTheme();
  const { useHasOngoingScreenShare, useParticipants } = useCallStateHooks(); // Hooks for call state management
  const hasOngoingScreenShare = useHasOngoingScreenShare(); // Check if there is an ongoing screen share
  const [currentSpeaker] = useParticipants(); // Get the current speaker from participants
  const floatingParticipant =
    hasOngoingScreenShare &&
    currentSpeaker &&
    hasVideo(currentSpeaker) && // Check if the current speaker has video
    currentSpeaker;

  const [topViewHeight, setTopViewHeight] = React.useState<number>(); // State for the height of the top view
  const [controlsHeight, setControlsHeight] = React.useState<number>(); // State for the height of the controls

  // Automatically route audio to speaker devices as relevant for watching videos
  useEffect(() => {
    InCallManager.start({ media: "video" }); // Start the in-call manager for video
    return () => InCallManager.stop(); // Stop the in-call manager when the component unmounts
  }, []);

  // Props for the top view of the livestream
  const topViewProps: ViewerLivestreamTopViewProps = {
    LiveIndicator,
    FollowerCount,
    DurationBadge,
    onLayout: (event) => {
      setTopViewHeight(event.nativeEvent.layout.height); // Set the height of the top view
    },
  };

  return (
    <Layout style={viewerLivestream.container}>
      {" "}
      {/* Main layout for the viewer livestream */}
      <ViewerLivestreamTopView {...topViewProps} />{" "}
      {/* Render the top view with props */}
      {floatingParticipant && ( // Render floating participant if available
        <FloatingParticipantView
          participant={floatingParticipant} // Pass the floating participant
          draggableContainerStyle={[
            StyleSheet.absoluteFill, // Fill the container absolutely
            {
              top: topViewHeight, // Position based on top view height
              bottom: controlsHeight, // Position based on controls height
            },
          ]}
        />
      )}
      <LivestreamLayout /> {/* Render the main livestream layout */}
      <ViewerLivestreamControls
        onLeaveStreamHandler={onLeaveStreamHandler} // Pass handler for leaving the stream
        onLayout={(event) => {
          setControlsHeight(event.nativeEvent.layout.height); // Set the height of the controls
        }}
      />
    </Layout>
  );
};