This commit is contained in:
Fredrik Burmester
2024-08-20 19:59:10 +02:00
parent eed4df6a8a
commit e7fcf806b3
4 changed files with 83 additions and 56 deletions

View File

@@ -96,6 +96,17 @@
{
"motionPermission": "Allow Streamyfin to access your device motion for landscape video watching."
}
],
[
"react-native-vlc-media-player",
{
"ios": {
"includeVLCKit": false // should be true if react-native version < 0.61
},
"android": {
"legacyJetifier": false // should be true if react-native version < 0.71
}
}
]
],
"experiments": {

BIN
bun.lockb

Binary file not shown.

View File

@@ -17,6 +17,7 @@ import Animated, {
import Video from "react-native-video";
import { Text } from "./common/Text";
import { Loader } from "./Loader";
import { VLCPlayer, VlCPlayerView } from "react-native-vlc-media-player";
export const CurrentlyPlayingBar: React.FC = () => {
const segments = useSegments();
@@ -137,68 +138,82 @@ export const CurrentlyPlayingBar: React.FC = () => {
`}
>
{currentlyPlaying?.url && (
<Video
ref={videoRef}
allowsExternalPlayback
style={{ width: "100%", height: "100%" }}
playWhenInactive={true}
playInBackground={true}
showNotificationControls={true}
ignoreSilentSwitch="ignore"
controls={false}
pictureInPicture={true}
poster={
backdropUrl && currentlyPlaying.item?.Type === "Audio"
? backdropUrl
: undefined
}
debug={{
enable: true,
thread: true,
}}
paused={!isPlaying}
onProgress={(e) => onProgress(e)}
subtitleStyle={{
fontSize: 16,
// <Video
// ref={videoRef}
// allowsExternalPlayback
// style={{ width: "100%", height: "100%" }}
// playWhenInactive={true}
// playInBackground={true}
// showNotificationControls={true}
// ignoreSilentSwitch="ignore"
// controls={false}
// pictureInPicture={true}
// poster={
// backdropUrl && currentlyPlaying.item?.Type === "Audio"
// ? backdropUrl
// : undefined
// }
// debug={{
// enable: true,
// thread: true,
// }}
// paused={!isPlaying}
// onProgress={(e) => onProgress(e)}
// subtitleStyle={{
// fontSize: 16,
// }}
// source={{
// uri: currentlyPlaying.url,
// isNetwork: true,
// startPosition,
// headers: getAuthHeaders(api),
// }}
// onBuffer={(e) =>
// e.isBuffering ? console.log("Buffering...") : null
// }
// onFullscreenPlayerDidDismiss={() => {}}
// onFullscreenPlayerDidPresent={() => {}}
// onPlaybackStateChanged={(e) => {
// if (e.isPlaying) {
// setIsPlaying(true);
// } else if (e.isSeeking) {
// return;
// } else {
// setIsPlaying(false);
// }
// }}
// progressUpdateInterval={2000}
// onError={(e) => {
// console.log(e);
// writeToLog(
// "ERROR",
// "Video playback error: " + JSON.stringify(e)
// );
// Alert.alert("Error", "Cannot play this video file.");
// setIsPlaying(false);
// // setCurrentlyPlaying(null);
// }}
// renderLoader={
// currentlyPlaying.item?.Type !== "Audio" && (
// <View className="flex flex-col items-center justify-center h-full">
// <Loader />
// </View>
// )
// }
// />
<VLCPlayer
style={{
width: "100%",
height: "100%",
}}
videoAspectRatio="16:9"
source={{
uri: currentlyPlaying.url,
isNetwork: true,
startPosition,
headers: getAuthHeaders(api),
uri: encodeURIComponent(currentlyPlaying.url),
}}
onBuffer={(e) =>
e.isBuffering ? console.log("Buffering...") : null
}
onFullscreenPlayerDidDismiss={() => {}}
onFullscreenPlayerDidPresent={() => {}}
onPlaybackStateChanged={(e) => {
if (e.isPlaying) {
setIsPlaying(true);
} else if (e.isSeeking) {
return;
} else {
setIsPlaying(false);
}
}}
progressUpdateInterval={2000}
onError={(e) => {
console.log(e);
writeToLog(
"ERROR",
"Video playback error: " + JSON.stringify(e)
);
Alert.alert("Error", "Cannot play this video file.");
setIsPlaying(false);
// setCurrentlyPlaying(null);
}}
renderLoader={
currentlyPlaying.item?.Type !== "Audio" && (
<View className="flex flex-col items-center justify-center h-full">
<Loader />
</View>
)
}
key={"1"}
/>
)}
</TouchableOpacity>

View File

@@ -72,6 +72,7 @@
"react-native-url-polyfill": "^2.0.0",
"react-native-uuid": "^2.0.2",
"react-native-video": "^6.4.3",
"react-native-vlc-media-player": "^1.0.69",
"react-native-web": "~0.19.10",
"tailwindcss": "3.3.2",
"use-debounce": "^10.0.3",