alteropen/streamyfin
1
0
Fork 0
mirror of https://github.com/streamyfin/streamyfin.git synced 2026-01-15 23:59:08 +00:00
Code Issues Actions 6 Packages Projects Releases Wiki Activity

fix: show more info in debug component

Browse Source
This commit is contained in:
Fredrik Burmester
2024-10-11 22:24:23 +02:00
parent cab5693ced
commit 091a8ff6c3
1 changed files with 74 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
app/(auth)/(tabs)/(home)/index.tsx
View File

@@ -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>
);
};