mirror of
https://github.com/streamyfin/streamyfin.git
synced 2025-08-20 18:37:18 +02:00
450 lines
13 KiB
TypeScript
450 lines
13 KiB
TypeScript
import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
|
|
import { usePlayback } from "@/providers/PlaybackProvider";
|
|
import { getBackdropUrl } from "@/utils/jellyfin/image/getBackdropUrl";
|
|
import { getAuthHeaders } from "@/utils/jellyfin/jellyfin";
|
|
import { writeToLog } from "@/utils/log";
|
|
import { Ionicons } from "@expo/vector-icons";
|
|
import { BlurView } from "expo-blur";
|
|
import { useRouter, useSegments } from "expo-router";
|
|
import { useAtom } from "jotai";
|
|
import { useEffect, useMemo, useRef, useState } from "react";
|
|
import { Alert, Platform, TouchableOpacity, View } from "react-native";
|
|
import Animated, {
|
|
useAnimatedStyle,
|
|
useSharedValue,
|
|
withDecay,
|
|
withTiming,
|
|
} from "react-native-reanimated";
|
|
import Video from "react-native-video";
|
|
import { Text } from "./common/Text";
|
|
import { Loader } from "./Loader";
|
|
import { Dimensions } from "react-native";
|
|
import { useSafeAreaInsets } from "react-native-safe-area-context";
|
|
import { Bubble, Slider } from "react-native-awesome-slider";
|
|
import { runtimeTicksToMinutes } from "@/utils/time";
|
|
|
|
export const CurrentlyPlayingBar: React.FC = () => {
|
|
const segments = useSegments();
|
|
const {
|
|
currentlyPlaying,
|
|
pauseVideo,
|
|
playVideo,
|
|
stopPlayback,
|
|
setVolume,
|
|
setIsPlaying,
|
|
isPlaying,
|
|
videoRef,
|
|
presentFullscreenPlayer,
|
|
onProgress,
|
|
} = usePlayback();
|
|
const router = useRouter();
|
|
const insets = useSafeAreaInsets();
|
|
|
|
const [api] = useAtom(apiAtom);
|
|
|
|
const [size, setSize] = useState<"full" | "small">("small");
|
|
|
|
const screenHeight = Dimensions.get("window").height;
|
|
const screenWiidth = Dimensions.get("window").width;
|
|
|
|
const from = useMemo(() => segments[2], [segments]);
|
|
|
|
const backgroundValues = useSharedValue({
|
|
bottom: 70,
|
|
height: 80,
|
|
padding: 0,
|
|
width: screenWiidth - 100,
|
|
left: 50,
|
|
});
|
|
|
|
const videoValues = useSharedValue({
|
|
bottom: 90,
|
|
height: 70,
|
|
width: 125,
|
|
left: 16,
|
|
});
|
|
|
|
const buttonsValues = useSharedValue({
|
|
bottom: 90,
|
|
opacity: 1,
|
|
right: 16,
|
|
});
|
|
|
|
const textValues = useSharedValue({
|
|
height: 70,
|
|
bottom: 90,
|
|
left: 149,
|
|
width: 140,
|
|
});
|
|
|
|
const animatedTextStyle = useAnimatedStyle(() => {
|
|
return {
|
|
bottom: withTiming(textValues.value.bottom, { duration: 500 }),
|
|
left: withTiming(textValues.value.left, { duration: 500 }),
|
|
height: withTiming(textValues.value.height, { duration: 500 }),
|
|
width: withTiming(textValues.value.width, { duration: 500 }),
|
|
};
|
|
});
|
|
|
|
const animatedButtonStyle = useAnimatedStyle(() => {
|
|
return {
|
|
bottom: withTiming(buttonsValues.value.bottom, { duration: 500 }),
|
|
opacity: withTiming(buttonsValues.value.opacity, { duration: 500 }),
|
|
right: withTiming(buttonsValues.value.right, { duration: 500 }),
|
|
};
|
|
});
|
|
|
|
const animatedBackgroundStyle = useAnimatedStyle(() => {
|
|
return {
|
|
bottom: withTiming(backgroundValues.value.bottom, { duration: 500 }),
|
|
width: withTiming(backgroundValues.value.width, { duration: 500 }),
|
|
height: withTiming(backgroundValues.value.height, { duration: 500 }),
|
|
padding: withTiming(backgroundValues.value.padding, { duration: 500 }),
|
|
left: withTiming(backgroundValues.value.left, { duration: 500 }),
|
|
};
|
|
});
|
|
|
|
const poster = useMemo(() => {
|
|
if (currentlyPlaying?.item.Type === "Audio")
|
|
return `${api?.basePath}/Items/${currentlyPlaying.item.AlbumId}/Images/Primary?tag=${currentlyPlaying.item.AlbumPrimaryImageTag}&quality=90&maxHeight=200&maxWidth=200`;
|
|
else
|
|
return getBackdropUrl({
|
|
api,
|
|
item: currentlyPlaying?.item,
|
|
quality: 70,
|
|
width: 200,
|
|
});
|
|
}, [currentlyPlaying?.item.Id, api]);
|
|
|
|
const startPosition = useMemo(
|
|
() =>
|
|
currentlyPlaying?.item?.UserData?.PlaybackPositionTicks
|
|
? Math.round(
|
|
currentlyPlaying?.item.UserData.PlaybackPositionTicks / 10000
|
|
)
|
|
: 0,
|
|
[currentlyPlaying?.item]
|
|
);
|
|
|
|
const videoSource = useMemo(() => {
|
|
if (!api || !currentlyPlaying || !poster) return null;
|
|
return {
|
|
uri: currentlyPlaying.url,
|
|
isNetwork: true,
|
|
startPosition,
|
|
headers: getAuthHeaders(api),
|
|
metadata: {
|
|
artist: currentlyPlaying.item?.AlbumArtist
|
|
? currentlyPlaying.item?.AlbumArtist
|
|
: undefined,
|
|
title: currentlyPlaying.item?.Name || "Unknown",
|
|
description: currentlyPlaying.item?.Overview
|
|
? currentlyPlaying.item?.Overview
|
|
: undefined,
|
|
imageUri: poster,
|
|
subtitle: currentlyPlaying.item?.Album
|
|
? currentlyPlaying.item?.Album
|
|
: undefined,
|
|
},
|
|
};
|
|
}, [currentlyPlaying, startPosition, api, poster]);
|
|
|
|
const animatedVideoStyle = useAnimatedStyle(() => {
|
|
return {
|
|
height: withTiming(videoValues.value.height, { duration: 500 }),
|
|
width: withTiming(videoValues.value.width, { duration: 500 }),
|
|
bottom: withTiming(videoValues.value.bottom, { duration: 500 }),
|
|
left: withTiming(videoValues.value.left, { duration: 500 }),
|
|
};
|
|
});
|
|
|
|
useEffect(() => {
|
|
if (size === "full") {
|
|
backgroundValues.value = {
|
|
bottom: 0,
|
|
height: screenHeight,
|
|
padding: 0,
|
|
width: screenWiidth,
|
|
left: 0,
|
|
};
|
|
buttonsValues.value = {
|
|
bottom: screenHeight - insets.top - 38,
|
|
opacity: 1,
|
|
right: 16,
|
|
};
|
|
videoValues.value = {
|
|
bottom: 0,
|
|
height: screenHeight,
|
|
width: screenWiidth,
|
|
left: 0,
|
|
};
|
|
textValues.value = {
|
|
bottom: 78,
|
|
height: 64,
|
|
left: 16,
|
|
width: 140,
|
|
};
|
|
} else {
|
|
backgroundValues.value = {
|
|
bottom: 70,
|
|
height: 80,
|
|
padding: 0,
|
|
width: screenWiidth - 16,
|
|
left: 8,
|
|
};
|
|
buttonsValues.value = {
|
|
bottom: 90,
|
|
opacity: 1,
|
|
right: 16,
|
|
};
|
|
videoValues.value = {
|
|
bottom: 78,
|
|
height: 64,
|
|
width: 113,
|
|
left: 16,
|
|
};
|
|
textValues.value = {
|
|
bottom: 78,
|
|
height: 64,
|
|
left: 141,
|
|
width: 140,
|
|
};
|
|
}
|
|
}, [size, screenHeight, insets]);
|
|
|
|
const progress = useSharedValue(0);
|
|
const min = useSharedValue(0);
|
|
const max = useSharedValue(currentlyPlaying?.item.RunTimeTicks || 0);
|
|
const sliding = useRef(false);
|
|
|
|
useEffect(() => {
|
|
max.value = currentlyPlaying?.item.RunTimeTicks || 0;
|
|
}, [currentlyPlaying?.item.RunTimeTicks]);
|
|
|
|
if (!api || !currentlyPlaying) return null;
|
|
|
|
return (
|
|
<>
|
|
<Animated.View
|
|
className={`bg-neutral-800 rounded-lg absolute`}
|
|
style={[animatedBackgroundStyle]}
|
|
></Animated.View>
|
|
|
|
<Animated.View className={` absolute`} style={[animatedTextStyle]}>
|
|
<View className="shrink text-xs flex flex-col justify-center h-full">
|
|
<TouchableOpacity
|
|
onPress={() => {
|
|
if (currentlyPlaying.item?.Type === "Audio") {
|
|
router.push(
|
|
// @ts-ignore
|
|
`/(auth)/(tabs)/${from}/albums/${currentlyPlaying.item.AlbumId}`
|
|
);
|
|
} else {
|
|
router.push(
|
|
// @ts-ignore
|
|
`/(auth)/(tabs)/${from}/items/page?id=${currentlyPlaying.item?.Id}`
|
|
);
|
|
}
|
|
}}
|
|
>
|
|
<Text>{currentlyPlaying.item?.Name}</Text>
|
|
</TouchableOpacity>
|
|
{currentlyPlaying.item?.Type === "Episode" && (
|
|
<TouchableOpacity
|
|
onPress={() => {
|
|
router.push(
|
|
// @ts-ignore
|
|
`/(auth)/(tabs)/${from}/series/${currentlyPlaying.item.SeriesId}`
|
|
);
|
|
}}
|
|
className="text-xs opacity-50"
|
|
>
|
|
<Text>{currentlyPlaying.item.SeriesName}</Text>
|
|
</TouchableOpacity>
|
|
)}
|
|
{currentlyPlaying.item?.Type === "Movie" && (
|
|
<View>
|
|
<Text className="text-xs opacity-50">
|
|
{currentlyPlaying.item?.ProductionYear}
|
|
</Text>
|
|
</View>
|
|
)}
|
|
{currentlyPlaying.item?.Type === "Audio" && (
|
|
<TouchableOpacity
|
|
onPress={() => {
|
|
router.push(`/albums/${currentlyPlaying.item?.AlbumId}`);
|
|
}}
|
|
>
|
|
<Text className="text-xs opacity-50">
|
|
{currentlyPlaying.item?.Album}
|
|
</Text>
|
|
</TouchableOpacity>
|
|
)}
|
|
</View>
|
|
</Animated.View>
|
|
|
|
<Animated.View
|
|
className={`flex flex-row items-center z-10`}
|
|
style={[
|
|
{ position: "absolute", borderWidth: 1, borderColor: "blue" },
|
|
animatedButtonStyle,
|
|
]}
|
|
>
|
|
<TouchableOpacity
|
|
onPress={() => {
|
|
if (size === "small") setSize("full");
|
|
else setSize("small");
|
|
}}
|
|
className="aspect-square rounded flex flex-col items-center justify-center p-2"
|
|
>
|
|
<Ionicons name="expand" size={24} color="white" />
|
|
</TouchableOpacity>
|
|
<TouchableOpacity
|
|
onPress={() => {
|
|
stopPlayback();
|
|
}}
|
|
className="aspect-square rounded flex flex-col items-center justify-center p-2"
|
|
>
|
|
<Ionicons name="close" size={24} color="white" />
|
|
</TouchableOpacity>
|
|
</Animated.View>
|
|
|
|
<Animated.View
|
|
style={[animatedVideoStyle]}
|
|
className={` rounded-md absolute overflow-hidden flex flex-col items-center justify-center pointer-events-none z-0 object-contain`}
|
|
>
|
|
{videoSource && (
|
|
<Video
|
|
ref={videoRef}
|
|
allowsExternalPlayback
|
|
style={{
|
|
width: "100%",
|
|
height: "100%",
|
|
}}
|
|
resizeMode="contain"
|
|
playWhenInactive={true}
|
|
playInBackground={true}
|
|
showNotificationControls={true}
|
|
ignoreSilentSwitch="ignore"
|
|
controls={false}
|
|
pictureInPicture={true}
|
|
debug={{
|
|
enable: true,
|
|
thread: true,
|
|
}}
|
|
onProgress={(e) => {
|
|
if (sliding.current === true) return;
|
|
onProgress(e);
|
|
progress.value = e.currentTime * 10000000;
|
|
}}
|
|
subtitleStyle={{
|
|
fontSize: 16,
|
|
}}
|
|
source={videoSource}
|
|
onRestoreUserInterfaceForPictureInPictureStop={() => {
|
|
setTimeout(() => {
|
|
presentFullscreenPlayer();
|
|
}, 300);
|
|
}}
|
|
onFullscreenPlayerDidDismiss={() => {}}
|
|
onFullscreenPlayerDidPresent={() => {}}
|
|
onPlaybackStateChanged={(e) => {
|
|
if (e.isPlaying === true) {
|
|
playVideo(false);
|
|
} else if (e.isPlaying === false) {
|
|
pauseVideo(false);
|
|
}
|
|
}}
|
|
onVolumeChange={(e) => {
|
|
setVolume(e.volume);
|
|
}}
|
|
progressUpdateInterval={4000}
|
|
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>
|
|
)
|
|
}
|
|
/>
|
|
)}
|
|
</Animated.View>
|
|
{size === "full" && (
|
|
<View
|
|
style={{
|
|
borderRadius: 100,
|
|
position: "absolute",
|
|
bottom: insets.bottom + 16,
|
|
left: 16,
|
|
width: screenWiidth - 32,
|
|
}}
|
|
>
|
|
<Slider
|
|
theme={{
|
|
maximumTrackTintColor: "rgba(1,1,1,0.2)",
|
|
minimumTrackTintColor: "#fff",
|
|
cacheTrackTintColor: "#333",
|
|
bubbleBackgroundColor: "#fff",
|
|
bubbleTextColor: "#000",
|
|
heartbeatColor: "#999",
|
|
}}
|
|
onSlidingStart={() => {
|
|
sliding.current = true;
|
|
}}
|
|
onSlidingComplete={(val) => {
|
|
const tick = Math.floor(val);
|
|
videoRef.current?.seek(tick / 10000000);
|
|
sliding.current = false;
|
|
}}
|
|
onValueChange={(val) => {
|
|
const tick = Math.floor(val);
|
|
progress.value = tick;
|
|
}}
|
|
containerStyle={{
|
|
borderRadius: 100,
|
|
}}
|
|
bubble={(s) => runtimeTicksToMinutes(s)}
|
|
sliderHeight={12}
|
|
thumbWidth={0}
|
|
progress={progress}
|
|
minimumValue={min}
|
|
maximumValue={max}
|
|
/>
|
|
<Text className="mt-2 text-xs text-neutral-500">
|
|
{runtimeTicksToMinutes(progress.value)}
|
|
</Text>
|
|
</View>
|
|
)}
|
|
|
|
{/* <Animated.View
|
|
style={[
|
|
{
|
|
height: "100%",
|
|
width: "100%",
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
justifyContent: "space-between",
|
|
overflow: "hidden",
|
|
},
|
|
animatedInnerStyle,
|
|
]}
|
|
>
|
|
|
|
<View
|
|
className={`flex flex-row w-full h-full items-center space-x-4 shrink bg-neutral-800 rounded-lg p-2`}
|
|
>
|
|
|
|
</View>
|
|
</Animated.View> */}
|
|
</>
|
|
);
|
|
};
|