useMediaContext

import * as Player from "@livepeer/react/player";
import { useMediaContext, useStore } from "@livepeer/react/player";

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

function CustomComponent({ __scopeMedia }: MediaScopedProps) {
  const context = useMediaContext("CustomComponent", __scopeMedia);

  const { currentSource } = useStore(context.store, ({ currentSource }) => ({
    currentSource,
  }));

  return currentSource?.type ?? null;
}

type AriaText = {
  progress: string;
  pictureInPicture: string;
  fullscreen: string;
  playPause: string;
  clip: string | null;
  time: string;
};

aria: AriaText;

buffered: number;

bufferedPercent: number;

type Src =
  | AudioSrc
  | HlsSrc
  | VideoSrc
  | Base64Src
  | WebRTCSrc
  | ImageSrc
  | VideoTextTrackSrc;

currentSource: Src | null;

currentUrl: string | null;

duration: number;

type PlaybackError = {
  type: "offline" | "access-control" | "fallback" | "permissions" | "unknown";
  message: string;
};

error: PlaybackError | null;

errorCount: number;

type PlaybackRate = number | "constant";

playbackRate: PlaybackRate;

poster: string | null;

progress: number;

sortedSources: Src[] | string | null;

volume: number;

type VideoQuality =
  | "1080p"
  | "720p"
  | "480p"
  | "360p"
  | "240p"
  | "144p"
  | "auto";

videoQuality: VideoQuality;

__controlsFunctions: {
  setHidden: (hidden: boolean) => void;
  onCanPlay: () => void;
  onDurationChange: (duration: number) => void;
  onEnded: () => void;
  onError: (error: Error | null) => void;
  onFinalUrl: (url: string | null) => void;
  onLoading: () => void;
  onPause: () => void;
  onPlay: () => void;
  onProgress: (time: number) => void;
  onStalled: () => void;
  onWaiting: () => void;
  requestClip: () => void;
  requestMeasure: () => void;
  requestSeek: (time: number) => void;
  requestSeekBack: (difference?: number) => void;
  requestSeekDiff: (difference: number) => void;
  requestSeekForward: (difference?: number) => void;
  requestToggleFullscreen: () => void;
  requestToggleMute: () => void;
  requestTogglePictureInPicture: () => void;
  requestVolume: (volume: number) => void;
  setAutohide: (autohide: number) => void;
  setFullscreen: (fullscreen: boolean) => void;
  setHlsConfig: (hlsConfig: any) => void;
  setLive: (live: boolean) => void;
  setMounted: () => void;
  setPictureInPicture: (pictureInPicture: boolean) => void;
  setPlaybackRate: (rate: number | string) => void;
  setPoster: (poster: string | null) => void;
  setVideoQuality: (videoQuality: VideoQuality) => void;
  setSize: (size: Partial<MediaSizing>) => void;
  setVolume: (volume: number) => void;
  setWebsocketMetadata: (metadata: Metadata) => void;
  togglePlay: (force?: boolean) => void;
  updateBuffered: (buffered: number) => void;
  updateLastInteraction: () => void;
  updatePlaybackOffsetMs: (offset: number) => void;
};

type DeviceInformation = {
  version: string;
  isMobile: boolean;
  isIos: boolean;
  isAndroid: boolean;
  userAgent: string;
  screenWidth: number | null;
  /** If the media supports changing the volume */
  isVolumeChangeSupported: boolean;
  /** If the media supports PiP */
  isPictureInPictureSupported: boolean;
  /** If the media supports fullscreen */
  isFullscreenSupported: boolean;
  /** If the media supports HLS playback */
  isHlsSupported: boolean;
  /** If the media supports WebRTC */
  isWebRTCSupported: boolean;
};

__device: DeviceInformation;

__controls: ControlsState;

__initialProps: InitialProps;

type Metadata = {
  bframes?: number;
  bufferWindow?: number;
};

__metadata: Metadata | null;