feat: initial subtitle support

components/video-player/Controls.tsx

@@ -8,10 +8,19 @@ import { getDefaultPlaySettings } from "@/utils/jellyfin/getDefaultPlaySettings"
 import { writeToLog } from "@/utils/log";
 import { formatTimeString, secondsToMs, ticksToMs } from "@/utils/time";
 import { Ionicons } from "@expo/vector-icons";
-import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
+import {
+  BaseItemDto,
+  type MediaStream,
+} from "@jellyfin/sdk/lib/generated-client";
 import { Image } from "expo-image";
 import { useRouter } from "expo-router";
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import {
   Dimensions,
   Platform,
@@ -34,6 +43,8 @@ import { Text } from "../common/Text";
 import { Loader } from "../Loader";
 import { VlcPlayerViewRef } from "@/modules/vlc-player/src/VlcPlayer.types";
 import { secondsToTicks } from "@/utils/secondsToTicks";
+import { VideoDebugInfo } from "../vlc/VideoDebugInfo";
+import * as DropdownMenu from "zeego/dropdown-menu";
 
 interface Props {
   item: BaseItemDto;
@@ -274,6 +285,14 @@ export const Controls: React.FC<Props> = ({
     setIgnoreSafeAreas((prev) => !prev);
   }, []);
 
+  const [selectedSubtitleTrack, setSelectedSubtitleTrack] = useState<
+    MediaStream | undefined
+  >(undefined);
+
+  const subtitleTracks = useMemo(() => {
+    return item.MediaStreams?.filter((stream) => stream.Type === "Subtitle");
+  }, [item]);
+
   return (
     <View
       style={[
@@ -286,6 +305,54 @@ export const Controls: React.FC<Props> = ({
         },
       ]}
     >
+      {/* <VideoDebugInfo playerRef={videoRef} /> */}
+
+      <View
+        style={{
+          position: "absolute",
+          top: insets.top,
+          left: insets.left,
+          zIndex: 1000,
+        }}
+        className="p-4"
+      >
+        <DropdownMenu.Root>
+          <DropdownMenu.Trigger>
+            <View className="aspect-square flex flex-col  rounded-xl items-center justify-center p-2">
+              <Ionicons
+                name="ellipsis-horizontal-circle-outline"
+                size={32}
+                color={"white"}
+              />
+            </View>
+          </DropdownMenu.Trigger>
+          <DropdownMenu.Content
+            loop={true}
+            side="bottom"
+            align="start"
+            alignOffset={0}
+            avoidCollisions={true}
+            collisionPadding={8}
+            sideOffset={8}
+          >
+            <DropdownMenu.Label>Subtitle tracks</DropdownMenu.Label>
+            {subtitleTracks?.map((sub, idx: number) => (
+              <DropdownMenu.Item
+                key={idx.toString()}
+                onSelect={() => {
+                  if (!sub.Index !== undefined && sub.Index !== null)
+                    videoRef.current?.setSubtitleTrack(sub.Index!);
+                }}
+              >
+                <DropdownMenu.ItemTitle>
+                  {sub.DisplayTitle}
+                </DropdownMenu.ItemTitle>
+              </DropdownMenu.Item>
+            ))}
+          </DropdownMenu.Content>
+        </DropdownMenu.Root>
+      </View>
+
       <View
         style={[
           {
@@ -372,7 +439,7 @@ export const Controls: React.FC<Props> = ({
           animatedTopStyles,
         ]}
         pointerEvents={showControls ? "auto" : "none"}
-        className={`flex flex-row items-center space-x-2 z-10 p-4`}
+        className={`flex flex-row items-center space-x-2 z-10 p-4 `}
       >
         <TouchableOpacity
           onPress={toggleIgnoreSafeAreas}

components/vlc/VideoDebugInfo.tsx

@@ -8,19 +8,13 @@ import { useState, useEffect } from "react";
 import { View, TouchableOpacity, ViewProps } from "react-native";
 import { Text } from "../common/Text";
 import React from "react";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 interface Props extends ViewProps {
-  playbackState: PlaybackStatePayload["nativeEvent"] | null;
-  progress: ProgressUpdatePayload["nativeEvent"] | null;
   playerRef: React.RefObject<VlcPlayerViewRef>;
 }
 
-export const VideoDebugInfo: React.FC<Props> = ({
-  playbackState,
-  progress,
-  playerRef,
-  ...props
-}) => {
+export const VideoDebugInfo: React.FC<Props> = ({ playerRef, ...props }) => {
   const [audioTracks, setAudioTracks] = useState<TrackInfo[] | null>(null);
   const [subtitleTracks, setSubtitleTracks] = useState<TrackInfo[] | null>(
     null
@@ -39,36 +33,30 @@ export const VideoDebugInfo: React.FC<Props> = ({
     fetchTracks();
   }, [playerRef]);
 
+  const insets = useSafeAreaInsets();
+
   return (
-    <View className="p-2.5 bg-black mt-2.5" {...props}>
+    <View
+      style={{
+        position: "absolute",
+        top: insets.top,
+        left: insets.left + 8,
+        zIndex: 100,
+      }}
+      {...props}
+    >
       <Text className="font-bold">Playback State:</Text>
-      {playbackState && (
-        <>
-          <Text>Type: {playbackState.type}</Text>
-          <Text>Current Time: {playbackState.currentTime}</Text>
-          <Text>Duration: {playbackState.duration}</Text>
-          <Text>Is Buffering: {playbackState.isBuffering ? "Yes" : "No"}</Text>
-          <Text>Target: {playbackState.target}</Text>
-        </>
-      )}
-      <Text className="font-bold mt-2.5">Progress:</Text>
-      {progress && (
-        <>
-          <Text>Current Time: {progress.currentTime}</Text>
-          <Text>Duration: {progress.duration.toFixed(2)}</Text>
-        </>
-      )}
       <Text className="font-bold mt-2.5">Audio Tracks:</Text>
       {audioTracks &&
-        audioTracks.map((track) => (
-          <Text key={track.index}>
+        audioTracks.map((track, index) => (
+          <Text key={index}>
             {track.name} (Index: {track.index})
           </Text>
         ))}
       <Text className="font-bold mt-2.5">Subtitle Tracks:</Text>
       {subtitleTracks &&
-        subtitleTracks.map((track) => (
-          <Text key={track.index}>
+        subtitleTracks.map((track, index) => (
+          <Text key={index}>
             {track.name} (Index: {track.index})
           </Text>
         ))}