From 091a8ff6c3dcba7b8fee1f897fca053eb560e7fe Mon Sep 17 00:00:00 2001
From: Fredrik Burmester <fredrik.burmester@gmail.com>
Date: Fri, 11 Oct 2024 22:24:23 +0200
Subject: [PATCH] fix: show more info in debug component

---
 app/(auth)/(tabs)/(home)/index.tsx | 97 +++++++++++++++++++++++-------
 1 file changed, 74 insertions(+), 23 deletions(-)

diff --git a/app/(auth)/(tabs)/(home)/index.tsx b/app/(auth)/(tabs)/(home)/index.tsx
index a4ddce6a..157e9709 100644
--- a/app/(auth)/(tabs)/(home)/index.tsx
+++ b/app/(auth)/(tabs)/(home)/index.tsx
@@ -4,10 +4,11 @@ import { VlcPlayerView } from "@/modules/vlc-player";
 import {
   PlaybackStatePayload,
   ProgressUpdatePayload,
+  TrackInfo,
   VlcPlayerViewRef,
 } from "@/modules/vlc-player/src/VlcPlayer.types";
 import React, { useEffect, useRef, useState } from "react";
-import { Button, ScrollView, View } from "react-native";
+import { Button, ScrollView, TouchableOpacity, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 export default function index() {
@@ -70,7 +71,11 @@ export default function index() {
           progressUpdateInterval={2000}
           onVideoStateChange={onPlaybackStateChanged}
         />
-        <VideoDebugInfo playbackState={playbackState} progress={progress} />
+        <VideoDebugInfo
+          playbackState={playbackState}
+          progress={progress}
+          playerRef={videoRef}
+        />
       </View>
       <Button
         title="pause"
@@ -97,24 +102,70 @@ export default function index() {
 const VideoDebugInfo: React.FC<{
   playbackState: PlaybackStatePayload["nativeEvent"] | null;
   progress: ProgressUpdatePayload["nativeEvent"] | null;
-}> = ({ playbackState, progress }) => (
-  <View className="p-2.5 bg-black mt-2.5">
-    <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>
-      </>
-    )}
-  </View>
-);
+  playerRef: React.RefObject<VlcPlayerViewRef>;
+}> = ({ playbackState, progress, playerRef }) => {
+  const [audioTracks, setAudioTracks] = useState<TrackInfo[] | null>(null);
+  const [subtitleTracks, setSubtitleTracks] = useState<TrackInfo[] | null>(
+    null
+  );
+
+  useEffect(() => {
+    const fetchTracks = async () => {
+      if (playerRef.current) {
+        const audio = await playerRef.current.getAudioTracks();
+        const subtitles = await playerRef.current.getSubtitleTracks();
+        setAudioTracks(audio);
+        setSubtitleTracks(subtitles);
+      }
+    };
+
+    fetchTracks();
+  }, [playerRef]);
+
+  return (
+    <View className="p-2.5 bg-black mt-2.5">
+      <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}>
+            {track.name} (Index: {track.index})
+          </Text>
+        ))}
+      <Text className="font-bold mt-2.5">Subtitle Tracks:</Text>
+      {subtitleTracks &&
+        subtitleTracks.map((track) => (
+          <Text key={track.index}>
+            {track.name} (Index: {track.index})
+          </Text>
+        ))}
+      <TouchableOpacity
+        className="mt-2.5 bg-blue-500 p-2 rounded"
+        onPress={() => {
+          if (playerRef.current) {
+            playerRef.current.getAudioTracks().then(setAudioTracks);
+            playerRef.current.getSubtitleTracks().then(setSubtitleTracks);
+          }
+        }}
+      >
+        <Text className="text-white text-center">Refresh Tracks</Text>
+      </TouchableOpacity>
+    </View>
+  );
+};