feat: audio and subtitle picker

app/(auth)/items/[id]/page.tsx

@@ -31,6 +31,7 @@ import { chromecastProfile } from "@/utils/profiles/chromecast";
 import ios12 from "@/utils/profiles/ios12";
 import { currentlyPlayingItemAtom } from "@/components/CurrentlyPlayingBar";
 import { AudioTrackSelector } from "@/components/AudioTrackSelector";
+import { SubtitleTrackSelector } from "@/components/SubtitleTrackSelector";
 
 const page: React.FC = () => {
   const local = useLocalSearchParams();
@@ -42,14 +43,14 @@ const page: React.FC = () => {
   const castDevice = useCastDevice();
 
   const chromecastReady = useMemo(() => !!castDevice?.deviceId, [castDevice]);
-
+  const [selectedAudioStream, setSelectedAudioStream] = useState<number>(-1);
+  const [selectedSubtitleStream, setSelectedSubtitleStream] =
+    useState<number>(0);
   const [maxBitrate, setMaxBitrate] = useState<Bitrate>({
     key: "Max",
     value: undefined,
   });
 
-  const [selectedAudioStream, setSelectedAudioStream] = useState<number>(0);
-
   const { data: item, isLoading: l1 } = useQuery({
     queryKey: ["item", id],
     queryFn: async () =>
@@ -94,7 +95,13 @@ const page: React.FC = () => {
   });
 
   const { data: playbackUrl } = useQuery({
-    queryKey: ["playbackUrl", item?.Id, maxBitrate, castDevice],
+    queryKey: [
+      "playbackUrl",
+      item?.Id,
+      maxBitrate,
+      castDevice,
+      selectedAudioStream,
+    ],
     queryFn: async () => {
       if (!api || !user?.Id || !sessionData) return null;
 
@@ -106,8 +113,12 @@ const page: React.FC = () => {
         maxStreamingBitrate: maxBitrate.value,
         sessionData,
         deviceProfile: castDevice?.deviceId ? chromecastProfile : ios12,
+        audioStreamIndex: selectedAudioStream,
+        subtitleStreamIndex: selectedSubtitleStream,
       });
 
+      console.log("Transcode URL: ", url);
+
       return url;
     },
     enabled: !!sessionData,
@@ -240,7 +251,7 @@ const page: React.FC = () => {
         <Text>{item.Overview}</Text>
       </View>
       <View className="flex flex-col p-4">
-        <View className="flex flex-row items-center space-x-4 w-full">
+        <View className="flex flex-row items-center space-x-2 w-full">
           <BitrateSelector
             onChange={(val) => setMaxBitrate(val)}
             selected={maxBitrate}
@@ -250,6 +261,11 @@ const page: React.FC = () => {
             onChange={setSelectedAudioStream}
             selected={selectedAudioStream}
           />
+          <SubtitleTrackSelector
+            item={item}
+            onChange={setSelectedSubtitleStream}
+            selected={selectedSubtitleStream}
+          />
         </View>
         <PlayButton item={item} chromecastReady={false} onPress={onPressPlay} />
       </View>