wip

components/vlc/VideoDebugInfo.tsx

@@ -0,0 +1,88 @@
+import {
+  PlaybackStatePayload,
+  ProgressUpdatePayload,
+  VlcPlayerViewRef,
+  TrackInfo,
+} from "@/modules/vlc-player/src/VlcPlayer.types";
+import { useState, useEffect } from "react";
+import { View, TouchableOpacity, ViewProps } from "react-native";
+import { Text } from "../common/Text";
+import React from "react";
+
+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
+}) => {
+  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" {...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}>
+            {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>
+  );
+};