streamyfin/components/video-player/controls/contexts/VideoContext.tsx

import { TrackInfo } from "@/modules/vlc-player";
import {
  BaseItemDto,
  MediaSourceInfo,
} from "@jellyfin/sdk/lib/generated-client";
import React, {
  createContext,
  useContext,
  useState,
  ReactNode,
  useEffect,
} from "react";
import { useControlContext } from "./ControlContext";

interface VideoContextProps {
  audioTracks: TrackInfo[] | null;
  subtitleTracks: TrackInfo[] | null;
  setAudioTrack: ((index: number) => void) | undefined;
  setSubtitleTrack: ((index: number) => void) | undefined;
  setSubtitleURL: ((url: string, customName: string) => void) | undefined;
}

const VideoContext = createContext<VideoContextProps | undefined>(undefined);

interface VideoProviderProps {
  children: ReactNode;
  getAudioTracks:
    | (() => Promise<TrackInfo[] | null>)
    | (() => TrackInfo[])
    | undefined;
  getSubtitleTracks:
    | (() => Promise<TrackInfo[] | null>)
    | (() => TrackInfo[])
    | undefined;
  setAudioTrack: ((index: number) => void) | undefined;
  setSubtitleTrack: ((index: number) => void) | undefined;
  setSubtitleURL: ((url: string, customName: string) => void) | undefined;
}

export const VideoProvider: React.FC<VideoProviderProps> = ({
  children,
  getSubtitleTracks,
  getAudioTracks,
  setSubtitleTrack,
  setSubtitleURL,
  setAudioTrack,
}) => {
  const [audioTracks, setAudioTracks] = useState<TrackInfo[] | null>(null);
  const [subtitleTracks, setSubtitleTracks] = useState<TrackInfo[] | null>(
    null
  );

  const ControlContext = useControlContext();
  const isVideoLoaded = ControlContext?.isVideoLoaded;

  useEffect(() => {
    const fetchTracks = async () => {
      if (
        getSubtitleTracks &&
        (subtitleTracks === null || subtitleTracks.length === 0)
      ) {
        const subtitles = await getSubtitleTracks();
        console.log("Getting embeded subtitles...", subtitles);
        setSubtitleTracks(subtitles);
      }
      if (
        getAudioTracks &&
        (audioTracks === null || audioTracks.length === 0)
      ) {
        const audio = await getAudioTracks();
        setAudioTracks(audio);
      }
    };
    fetchTracks();
  }, [isVideoLoaded, getAudioTracks, getSubtitleTracks]);

  return (
    <VideoContext.Provider
      value={{
        audioTracks,
        subtitleTracks,
        setSubtitleTrack,
        setSubtitleURL,
        setAudioTrack,
      }}
    >
      {children}
    </VideoContext.Provider>
  );
};

export const useVideoContext = () => {
  const context = useContext(VideoContext);
  if (context === undefined) {
    throw new Error("useVideoContext must be used within a VideoProvider");
  }
  return context;
};