useBroadcastContext

import * as Broadcast from "@livepeer/react/broadcast";
import { useBroadcastContext, useStore } from "@livepeer/react/broadcast";

export default () => (
  <Broadcast.Root>
    {/** The `useBroadcastContext` hook can be used in any component,
    as long as it's inside the Broadcast.Root React Context provider */}
    <CustomComponent />
  </Broadcast.Root>
);

function CustomComponent({
  style,
  __scopeBroadcast,
}: Broadcast.BroadcastScopedProps<{}>) {
  const context = useBroadcastContext("CustomComponent", __scopeBroadcast);

  // use selectors with the Zustand store, to make sure your component doesn't render
  // on every store state change
  const { status } = useStore(context.store, ({ status }) => ({
    status,
  }));

  return status;
}

type BroadcastAriaText = {
  audioTrigger: string;
  start: string;
  screenshareTrigger: string;
  videoTrigger: string;
};

type MediaDeviceInfoExtended = Omit<MediaDeviceInfo, "label" | "toJSON"> & {
  /**
   * This is a convenience field added to MediaDeviceInfo to help easily add a device picker.
   *
   * For security reasons, the label field will blank unless an active media stream exists
   * or the user has granted persistent permission for media device access. The set of device labels
   * could otherwise be used as part of a fingerprinting mechanism to identify a user.
   *
   * When the label field is not blank, these are the same value. Otherwise, the value is a friendly default.
   */
  friendlyName: string;
  /**
   * For security reasons, the label field is blank unless an active media stream exists
   * or the user has granted persistent permission for media device access. The set of device labels
   * could otherwise be used as part of a fingerprinting mechanism to identify a user.
   *
   * We override it here to be null when it is blank, for easier developer usage.
   */
  label: string | null;
};

mediaDevices: MediaDeviceInfoExtended[] | null;

mediaStream: MediaStream | null;

peerConnection: RTCPeerConnection | null;

status: "live" | "pending" | "idle";

ingestUrl: string | null;

mediaDeviceIds: MediaDeviceIds;

__initialProps: InitialBroadcastProps;

type BroadcastDeviceInformation = {
  version: string;
  /** If the environment supports mediaDevices */
  isMediaDevicesSupported: boolean;
  /** If the environment supports RTCPeerConnection */
  isRTCPeerConnectionSupported: boolean;
  /** If the environment supports sharing display media */
  isDisplayMediaSupported: boolean;
};

__device: BroadcastDeviceInformation;

__controls: BroadcastControlsState;

__controlsFunctions: {
    requestDeviceListInfo: () => void;
    requestForceRenegotiate: () => void;
    requestMediaDeviceId: (deviceId: AudioDeviceId, type: keyof MediaDeviceIds) => void;
    rotateAudioSource: () => void;
    rotateVideoSource: () => void;
    setIngestUrl: (ingestUrl: string) => void;
    setInitialState: (ids: MediaDeviceIds, audio: boolean, video: boolean) => void;
    setPeerConnection: (peerConnection: RTCPeerConnection) => void;
    setStatus: (status: BroadcastStatus) => void;
    setMediaDeviceIds: (mediaDevices: Partial<MediaDeviceIds>) => void;
    toggleAudio: () => void;
    toggleDisplayMedia: () => void;
    toggleEnabled: () => void;
    toggleVideo: () => void;
    updateDeviceList: (mediaDevices: MediaDeviceInfo[]) => void;
    updateMediaStream: (mediaStream: MediaStream) => void;
};