forked from Ninjalama/streamyfin_mirror
657 lines
21 KiB
TypeScript
657 lines
21 KiB
TypeScript
import { useAdjacentEpisodes } from "@/hooks/useAdjacentEpisodes";
|
|
import { useNavigationBarVisibility } from "@/hooks/useNavigationBarVisibility";
|
|
import { useTrickplay } from "@/hooks/useTrickplay";
|
|
import { apiAtom } 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 { runtimeTicksToSeconds } from "@/utils/time";
|
|
import { Ionicons } from "@expo/vector-icons";
|
|
import { Image } from "expo-image";
|
|
import { useRouter, useSegments } from "expo-router";
|
|
import { useAtom } from "jotai";
|
|
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
|
import {
|
|
Alert,
|
|
Dimensions,
|
|
Pressable,
|
|
TouchableOpacity,
|
|
View,
|
|
} from "react-native";
|
|
import { Slider } from "react-native-awesome-slider";
|
|
import "react-native-gesture-handler";
|
|
import Animated, {
|
|
useAnimatedStyle,
|
|
useSharedValue,
|
|
withTiming,
|
|
} from "react-native-reanimated";
|
|
import { useSafeAreaInsets } from "react-native-safe-area-context";
|
|
import Video from "react-native-video";
|
|
import { Text } from "./common/Text";
|
|
import { itemRouter } from "./common/TouchableItemRouter";
|
|
import { Loader } from "./Loader";
|
|
import { useQuery } from "@tanstack/react-query";
|
|
import { secondsToTicks } from "@/utils/secondsToTicks";
|
|
|
|
export const CurrentlyPlayingBar: React.FC = () => {
|
|
const {
|
|
currentlyPlaying,
|
|
pauseVideo,
|
|
playVideo,
|
|
stopPlayback,
|
|
setVolume,
|
|
setIsPlaying,
|
|
isPlaying,
|
|
videoRef,
|
|
presentFullscreenPlayer,
|
|
progressTicks,
|
|
onProgress,
|
|
isBuffering: _isBuffering,
|
|
setIsBuffering,
|
|
} = usePlayback();
|
|
const insets = useSafeAreaInsets();
|
|
const segments = useSegments();
|
|
const router = useRouter();
|
|
|
|
useNavigationBarVisibility(isPlaying);
|
|
|
|
const [api] = useAtom(apiAtom);
|
|
|
|
const from = useMemo(() => segments[2], [segments]);
|
|
|
|
const [ignoreSafeArea, setIgnoreSafeArea] = useState(false);
|
|
|
|
const screenHeight = Dimensions.get("window").height;
|
|
const screenWidth = Dimensions.get("window").width;
|
|
|
|
const controlsOpacity = useSharedValue(1);
|
|
|
|
const progress = useSharedValue(progressTicks || 0);
|
|
const min = useSharedValue(0);
|
|
const max = useSharedValue(currentlyPlaying?.item.RunTimeTicks || 0);
|
|
const sliding = useRef(false);
|
|
const localIsBuffering = useSharedValue(false);
|
|
// const hideControlsTimerRef = useRef<NodeJS.Timeout | null>(null);
|
|
|
|
const toggleIgnoreSafeArea = () => {
|
|
setIgnoreSafeArea((prev) => !prev);
|
|
};
|
|
|
|
const showControls = () => {
|
|
controlsOpacity.value = 1;
|
|
};
|
|
|
|
const hideControls = () => {
|
|
controlsOpacity.value = 0;
|
|
};
|
|
|
|
const animatedControlsStyle = useAnimatedStyle(() => {
|
|
return {
|
|
opacity: withTiming(controlsOpacity.value > 0 ? 1 : 0, {
|
|
duration: 300,
|
|
}),
|
|
};
|
|
});
|
|
|
|
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 ?? undefined,
|
|
title: currentlyPlaying.item?.Name || "Unknown",
|
|
description: currentlyPlaying.item?.Overview ?? undefined,
|
|
imageUri: poster,
|
|
subtitle: currentlyPlaying.item?.Album ?? undefined, // Change here
|
|
},
|
|
};
|
|
}, [currentlyPlaying, startPosition, api, poster]);
|
|
|
|
const showControlsAndResetTimer = () => {
|
|
showControls();
|
|
// resetHideControlsTimer();
|
|
};
|
|
|
|
// const resetHideControlsTimer = () => {
|
|
// if (hideControlsTimerRef.current) {
|
|
// clearTimeout(hideControlsTimerRef.current);
|
|
// }
|
|
// hideControlsTimerRef.current = setTimeout(() => {
|
|
// hideControls();
|
|
// }, 3000);
|
|
// };
|
|
|
|
// useEffect(() => {
|
|
// if (controlsOpacity.value > 0) {
|
|
// resetHideControlsTimer();
|
|
// }
|
|
|
|
// return () => {
|
|
// if (hideControlsTimerRef.current) {
|
|
// clearTimeout(hideControlsTimerRef.current);
|
|
// }
|
|
// };
|
|
// }, [controlsOpacity.value]);
|
|
|
|
useEffect(() => {
|
|
max.value = currentlyPlaying?.item.RunTimeTicks || 0;
|
|
}, [currentlyPlaying?.item.RunTimeTicks]);
|
|
|
|
const videoContainerStyle = {
|
|
position: "absolute" as const,
|
|
top: 0,
|
|
bottom: 0,
|
|
left: ignoreSafeArea ? 0 : insets.left,
|
|
right: ignoreSafeArea ? 0 : insets.right,
|
|
width: ignoreSafeArea
|
|
? screenWidth
|
|
: screenWidth - (insets.left + insets.right),
|
|
};
|
|
|
|
const animatedLoaderStyle = useAnimatedStyle(() => {
|
|
return {
|
|
opacity: withTiming(localIsBuffering.value === true ? 1 : 0, {
|
|
duration: 300,
|
|
}),
|
|
};
|
|
});
|
|
|
|
const animatedVideoContainerStyle = useAnimatedStyle(() => {
|
|
return {
|
|
opacity: withTiming(
|
|
controlsOpacity.value > 0 || localIsBuffering.value === true ? 0.5 : 1,
|
|
{
|
|
duration: 300,
|
|
}
|
|
),
|
|
};
|
|
});
|
|
|
|
const trickplayInfo = useMemo(() => {
|
|
if (!currentlyPlaying?.item.Id || !currentlyPlaying?.item.Trickplay) {
|
|
return null;
|
|
}
|
|
|
|
const mediaSourceId = currentlyPlaying.item.Id;
|
|
const trickplayData = currentlyPlaying.item.Trickplay[mediaSourceId];
|
|
|
|
if (!trickplayData) {
|
|
return null;
|
|
}
|
|
|
|
// Get the first available resolution
|
|
const firstResolution = Object.keys(trickplayData)[0];
|
|
return firstResolution
|
|
? {
|
|
resolution: firstResolution,
|
|
aspectRatio:
|
|
trickplayData[firstResolution].Width! /
|
|
trickplayData[firstResolution].Height!,
|
|
data: trickplayData[firstResolution],
|
|
}
|
|
: null;
|
|
}, [currentlyPlaying]);
|
|
|
|
const { trickPlayUrl, calculateTrickplayUrl } = useTrickplay();
|
|
const { previousItem, nextItem } = useAdjacentEpisodes({
|
|
api,
|
|
currentlyPlaying,
|
|
});
|
|
|
|
const { data: introTimestamps } = useQuery({
|
|
queryKey: ["introTimestamps", currentlyPlaying?.item.Id],
|
|
queryFn: async () => {
|
|
if (!currentlyPlaying?.item.Id) {
|
|
console.log("No item id");
|
|
return null;
|
|
}
|
|
|
|
console.log("Getting intro timestamps");
|
|
const res = await api?.axiosInstance.get(
|
|
`${api.basePath}/Episode/${currentlyPlaying.item.Id}/IntroTimestamps`,
|
|
{
|
|
headers: getAuthHeaders(api),
|
|
}
|
|
);
|
|
|
|
if (res?.status !== 200) {
|
|
return null;
|
|
}
|
|
|
|
return res?.data as {
|
|
EpisodeId: string;
|
|
HideSkipPromptAt: number;
|
|
IntroEnd: number;
|
|
IntroStart: number;
|
|
ShowSkipPromptAt: number;
|
|
Valid: boolean;
|
|
};
|
|
},
|
|
enabled: !!currentlyPlaying?.item.Id,
|
|
});
|
|
|
|
const animatedIntroSkipperStyle = useAnimatedStyle(() => {
|
|
const showButtonAt = secondsToTicks(introTimestamps?.ShowSkipPromptAt || 0);
|
|
const hideButtonAt = secondsToTicks(introTimestamps?.HideSkipPromptAt || 0);
|
|
const showButton =
|
|
progress.value > showButtonAt && progress.value < hideButtonAt;
|
|
return {
|
|
opacity: withTiming(
|
|
localIsBuffering.value === false &&
|
|
controlsOpacity.value > 0 &&
|
|
showButton
|
|
? 1
|
|
: 0,
|
|
{
|
|
duration: 300,
|
|
}
|
|
),
|
|
};
|
|
});
|
|
|
|
const skipIntro = useCallback(async () => {
|
|
if (!introTimestamps) return;
|
|
videoRef.current?.seek(introTimestamps.IntroEnd);
|
|
}, [introTimestamps]);
|
|
|
|
useEffect(() => {
|
|
console.log({ introTimestamps });
|
|
}, [introTimestamps]);
|
|
|
|
if (!api || !currentlyPlaying) return null;
|
|
|
|
return (
|
|
<View style={{ width: screenWidth, height: screenHeight }}>
|
|
<View style={{ width: "100%", height: "100%", backgroundColor: "black" }}>
|
|
<Animated.View
|
|
style={[
|
|
{
|
|
position: "absolute",
|
|
top: insets.top,
|
|
right: insets.right + 20,
|
|
height: 70,
|
|
zIndex: 10,
|
|
},
|
|
animatedControlsStyle,
|
|
]}
|
|
>
|
|
<View className="flex flex-row items-center h-full">
|
|
<TouchableOpacity
|
|
onPress={() => {
|
|
if (controlsOpacity.value === 0) return;
|
|
toggleIgnoreSafeArea();
|
|
}}
|
|
className="aspect-square rounded flex flex-col items-center justify-center p-2"
|
|
>
|
|
<Ionicons
|
|
name={ignoreSafeArea ? "contract-outline" : "expand"}
|
|
size={24}
|
|
color="white"
|
|
/>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity
|
|
onPress={() => {
|
|
if (controlsOpacity.value === 0) return;
|
|
stopPlayback();
|
|
}}
|
|
className="aspect-square rounded flex flex-col items-center justify-center p-2"
|
|
>
|
|
<Ionicons name="close" size={24} color="white" />
|
|
</TouchableOpacity>
|
|
</View>
|
|
</Animated.View>
|
|
|
|
<Animated.View
|
|
style={[
|
|
{
|
|
position: "absolute",
|
|
bottom: insets.bottom + 8 * 7,
|
|
right: insets.right + 32,
|
|
zIndex: 10,
|
|
},
|
|
animatedIntroSkipperStyle,
|
|
]}
|
|
>
|
|
<View className="flex flex-row items-center h-full">
|
|
<TouchableOpacity
|
|
onPress={() => {
|
|
if (controlsOpacity.value === 0) return;
|
|
skipIntro();
|
|
}}
|
|
className="flex flex-col items-center justify-center px-2 py-1.5 bg-purple-600 rounded-full"
|
|
>
|
|
<Text>Skip intro</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</Animated.View>
|
|
|
|
<Animated.View
|
|
style={[videoContainerStyle, animatedVideoContainerStyle]}
|
|
>
|
|
<Pressable
|
|
onPress={() => {
|
|
if (controlsOpacity.value > 0) {
|
|
hideControls();
|
|
} else {
|
|
showControlsAndResetTimer();
|
|
}
|
|
}}
|
|
style={{
|
|
width: "100%",
|
|
height: "100%",
|
|
}}
|
|
>
|
|
{videoSource && (
|
|
<Video
|
|
ref={videoRef}
|
|
allowsExternalPlayback
|
|
style={{
|
|
width: "100%",
|
|
height: "100%",
|
|
}}
|
|
resizeMode="contain"
|
|
playWhenInactive={true}
|
|
playInBackground={true}
|
|
showNotificationControls={true}
|
|
ignoreSilentSwitch="ignore"
|
|
controls={false}
|
|
pictureInPicture={true}
|
|
onProgress={(e) => {
|
|
// Set buffering state
|
|
if (e.playableDuration === 0) {
|
|
setIsBuffering(true);
|
|
localIsBuffering.value = true;
|
|
} else {
|
|
setIsBuffering(false);
|
|
localIsBuffering.value = false;
|
|
}
|
|
|
|
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={1000}
|
|
onError={(e) => {
|
|
console.log(e);
|
|
writeToLog(
|
|
"ERROR",
|
|
"Video playback error: " + JSON.stringify(e)
|
|
);
|
|
Alert.alert("Error", "Cannot play this video file.");
|
|
setIsPlaying(false);
|
|
}}
|
|
/>
|
|
)}
|
|
</Pressable>
|
|
</Animated.View>
|
|
|
|
<Animated.View
|
|
style={[
|
|
{
|
|
position: "absolute",
|
|
bottom: insets.bottom + 8,
|
|
left: insets.left + 32,
|
|
width: screenWidth - insets.left - insets.right - 64,
|
|
borderRadius: 100,
|
|
},
|
|
animatedControlsStyle,
|
|
]}
|
|
>
|
|
<View className="shrink flex flex-col justify-center h-full mb-2">
|
|
<Text className="font-bold">{currentlyPlaying.item?.Name}</Text>
|
|
{currentlyPlaying.item?.Type === "Episode" && (
|
|
<Text className="opacity-50">
|
|
{currentlyPlaying.item.SeriesName}
|
|
</Text>
|
|
)}
|
|
{currentlyPlaying.item?.Type === "Movie" && (
|
|
<Text className="text-xs opacity-50">
|
|
{currentlyPlaying.item?.ProductionYear}
|
|
</Text>
|
|
)}
|
|
{currentlyPlaying.item?.Type === "Audio" && (
|
|
<Text className="text-xs opacity-50">
|
|
{currentlyPlaying.item?.Album}
|
|
</Text>
|
|
)}
|
|
</View>
|
|
<View className="flex flex-row items-center space-x-6 rounded-full py-1.5 pl-4 pr-4 z-10 bg-neutral-800">
|
|
<View className="flex flex-row items-center space-x-2">
|
|
<TouchableOpacity
|
|
disabled={!previousItem}
|
|
style={{
|
|
opacity: !previousItem ? 0.5 : 1,
|
|
}}
|
|
onPress={() => {
|
|
if (controlsOpacity.value === 0) return;
|
|
if (!previousItem || !from) return;
|
|
const url = itemRouter(previousItem, from);
|
|
stopPlayback();
|
|
// @ts-ignore
|
|
router.push(url);
|
|
}}
|
|
>
|
|
<Ionicons name="play-skip-back" size={18} color="white" />
|
|
</TouchableOpacity>
|
|
<TouchableOpacity
|
|
onPress={async () => {
|
|
if (controlsOpacity.value === 0) return;
|
|
const curr = await videoRef.current?.getCurrentPosition();
|
|
if (!curr) return;
|
|
videoRef.current?.seek(Math.max(0, curr - 15));
|
|
// resetHideControlsTimer();
|
|
}}
|
|
>
|
|
<Ionicons
|
|
name="refresh-outline"
|
|
size={22}
|
|
color="white"
|
|
style={{
|
|
transform: [{ scaleY: -1 }, { rotate: "180deg" }],
|
|
}}
|
|
/>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity
|
|
onPress={() => {
|
|
if (controlsOpacity.value === 0) return;
|
|
if (isPlaying) pauseVideo();
|
|
else playVideo();
|
|
// resetHideControlsTimer();
|
|
}}
|
|
>
|
|
<Ionicons
|
|
name={isPlaying ? "pause" : "play"}
|
|
size={24}
|
|
color="white"
|
|
/>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity
|
|
onPress={async () => {
|
|
if (controlsOpacity.value === 0) return;
|
|
const curr = await videoRef.current?.getCurrentPosition();
|
|
if (!curr) return;
|
|
videoRef.current?.seek(Math.max(0, curr + 15));
|
|
// resetHideControlsTimer();
|
|
}}
|
|
>
|
|
<Ionicons name="refresh-outline" size={22} color="white" />
|
|
</TouchableOpacity>
|
|
<TouchableOpacity
|
|
disabled={!nextItem}
|
|
style={{
|
|
opacity: !nextItem ? 0.5 : 1,
|
|
}}
|
|
onPress={() => {
|
|
if (controlsOpacity.value === 0) return;
|
|
if (!nextItem || !from) return;
|
|
const url = itemRouter(nextItem, from);
|
|
stopPlayback();
|
|
// @ts-ignore
|
|
router.push(url);
|
|
}}
|
|
>
|
|
<Ionicons name="play-skip-forward" size={18} color="white" />
|
|
</TouchableOpacity>
|
|
</View>
|
|
<View className="flex flex-col w-full shrink">
|
|
<Slider
|
|
theme={{
|
|
maximumTrackTintColor: "rgba(255,255,255,0.2)",
|
|
minimumTrackTintColor: "#fff",
|
|
cacheTrackTintColor: "#333",
|
|
bubbleBackgroundColor: "#fff",
|
|
bubbleTextColor: "#000",
|
|
heartbeatColor: "#999",
|
|
}}
|
|
onSlidingStart={() => {
|
|
if (controlsOpacity.value === 0) return;
|
|
sliding.current = true;
|
|
}}
|
|
onSlidingComplete={(val) => {
|
|
if (controlsOpacity.value === 0) return;
|
|
const tick = Math.floor(val);
|
|
videoRef.current?.seek(tick / 10000000);
|
|
sliding.current = false;
|
|
}}
|
|
onValueChange={(val) => {
|
|
if (controlsOpacity.value === 0) return;
|
|
const tick = Math.floor(val);
|
|
progress.value = tick;
|
|
calculateTrickplayUrl(
|
|
trickplayInfo,
|
|
progress,
|
|
api,
|
|
currentlyPlaying.item.Id!
|
|
);
|
|
|
|
// resetHideControlsTimer();
|
|
}}
|
|
containerStyle={{
|
|
borderRadius: 100,
|
|
}}
|
|
renderBubble={() => {
|
|
if (!trickPlayUrl || !trickplayInfo) {
|
|
return null;
|
|
}
|
|
const { x, y, url } = trickPlayUrl;
|
|
|
|
const tileWidth = 150;
|
|
const tileHeight = 150 / trickplayInfo.aspectRatio!;
|
|
return (
|
|
<View
|
|
style={{
|
|
width: tileWidth,
|
|
height: tileHeight,
|
|
marginLeft: -tileWidth / 4,
|
|
marginTop: -tileHeight / 4 - 60,
|
|
}}
|
|
className=" bg-neutral-800 overflow-hidden"
|
|
>
|
|
<Image
|
|
style={{
|
|
width: 150 * trickplayInfo?.data.TileWidth!,
|
|
height:
|
|
(150 / trickplayInfo.aspectRatio!) *
|
|
trickplayInfo?.data.TileHeight!,
|
|
transform: [
|
|
{ translateX: -x * tileWidth },
|
|
{ translateY: -y * tileHeight },
|
|
],
|
|
}}
|
|
source={{ uri: url }}
|
|
contentFit="cover"
|
|
/>
|
|
</View>
|
|
);
|
|
}}
|
|
sliderHeight={8}
|
|
thumbWidth={0}
|
|
progress={progress}
|
|
minimumValue={min}
|
|
maximumValue={max}
|
|
/>
|
|
<View className="flex flex-row items-center justify-between">
|
|
<Text className="text-[10px] text-neutral-400">
|
|
{runtimeTicksToSeconds(progress.value)}
|
|
</Text>
|
|
<Text className="text-[10px] text-neutral-400">
|
|
-{runtimeTicksToSeconds(max.value - progress.value)}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</Animated.View>
|
|
|
|
<Animated.View
|
|
pointerEvents="none"
|
|
style={[
|
|
{
|
|
position: "absolute" as const,
|
|
top: 0,
|
|
bottom: 0,
|
|
left: ignoreSafeArea ? 0 : insets.left,
|
|
right: ignoreSafeArea ? 0 : insets.right,
|
|
width: ignoreSafeArea
|
|
? screenWidth
|
|
: screenWidth - (insets.left + insets.right),
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
zIndex: 10,
|
|
},
|
|
animatedLoaderStyle,
|
|
]}
|
|
>
|
|
<Loader />
|
|
</Animated.View>
|
|
</View>
|
|
</View>
|
|
);
|
|
};
|