alteropen/streamyfin
1
0
Fork 0
mirror of https://github.com/streamyfin/streamyfin.git synced 2026-06-12 17:00:23 +01:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

wip: working small + full with transition

Browse Source
This commit is contained in:
Fredrik Burmester
2024-09-15 08:56:54 +02:00
parent 7cb67d73ec
commit 409e2de6c8
1 changed files with 526 additions and 308 deletions
Download Patch File Download Diff File Expand all files Collapse all files

834
components/CurrentlyPlayingBar.tsx
View File

@@ -1,27 +1,39 @@
import { apiAtom, userAtom } from "@/providers/JellyfinProvider"; import { apiAtom } from "@/providers/JellyfinProvider";
import { usePlayback } from "@/providers/PlaybackProvider"; import { usePlayback } from "@/providers/PlaybackProvider";
import { getBackdropUrl } from "@/utils/jellyfin/image/getBackdropUrl"; import { getBackdropUrl } from "@/utils/jellyfin/image/getBackdropUrl";
import { getAuthHeaders } from "@/utils/jellyfin/jellyfin"; import { getAuthHeaders } from "@/utils/jellyfin/jellyfin";
import { writeToLog } from "@/utils/log"; import { writeToLog } from "@/utils/log";
import { runtimeTicksToMinutes, runtimeTicksToSeconds } from "@/utils/time";
import { Ionicons } from "@expo/vector-icons"; import { Ionicons } from "@expo/vector-icons";
import { BlurView } from "expo-blur"; import { BlurView } from "expo-blur";
import { useRouter, useSegments } from "expo-router"; import { useRouter, useSegments } from "expo-router";
import { useAtom } from "jotai"; import { useAtom } from "jotai";
import { useEffect, useMemo, useRef, useState } from "react"; import { useEffect, useMemo, useRef, useState } from "react";
import { Alert, Platform, TouchableOpacity, View } from "react-native"; import {
Alert,
Dimensions,
Pressable,
TouchableOpacity,
View,
} from "react-native";
import { Slider } from "react-native-awesome-slider";
import "react-native-gesture-handler";
import Animated, { import Animated, {
interpolate,
interpolateColor,
useAnimatedStyle, useAnimatedStyle,
useSharedValue, useSharedValue,
withDecay,
withTiming, withTiming,
} from "react-native-reanimated"; } from "react-native-reanimated";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import Video from "react-native-video"; import Video from "react-native-video";
import { Text } from "./common/Text"; import { Text } from "./common/Text";
import { Loader } from "./Loader"; import { Loader } from "./Loader";
import { Dimensions } from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context"; const PADDING = 8;
import { Bubble, Slider } from "react-native-awesome-slider"; const BAR_HEIGHT = 70;
import { runtimeTicksToMinutes } from "@/utils/time"; const CONTENT_HEIGHT = BAR_HEIGHT - PADDING * 2;
const COLORS = ["#262626", "#000000"];
export const CurrentlyPlayingBar: React.FC = () => { export const CurrentlyPlayingBar: React.FC = () => {
const segments = useSegments(); const segments = useSegments();
@@ -43,67 +55,147 @@ export const CurrentlyPlayingBar: React.FC = () => {
const [api] = useAtom(apiAtom); const [api] = useAtom(apiAtom);
const [size, setSize] = useState<"full" | "small">("small"); const [size, setSize] = useState<"full" | "small">("small");
const animationProgress = useSharedValue(0);
const controlsOpacity = useSharedValue(1);
const screenHeight = Dimensions.get("window").height; const screenHeight = Dimensions.get("window").height;
const screenWiidth = Dimensions.get("window").width; const screenWiidth = Dimensions.get("window").width;
const BOTTOM_HEIGHT = useMemo(() => insets.bottom + 48, [insets.bottom]);
const from = useMemo(() => segments[2], [segments]); const from = useMemo(() => segments[2], [segments]);
const backgroundValues = useSharedValue({ const animatedBackgroundStyle = useAnimatedStyle(() => {
bottom: 70, const progress = animationProgress.value;
height: 80, return {
padding: 0, bottom: interpolate(progress, [0, 1], [BOTTOM_HEIGHT, 0]),
width: screenWiidth - 100, width: interpolate(
left: 50, progress,
}); [0, 1],
[screenWiidth - PADDING * 2 - insets.left - insets.right, screenWiidth]
const videoValues = useSharedValue({ ),
bottom: 90, height: interpolate(progress, [0, 1], [BAR_HEIGHT, screenHeight]),
height: 70, padding: interpolate(progress, [0, 1], [PADDING, 0]),
width: 125, left: interpolate(progress, [0, 1], [insets.left + PADDING, 0]),
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(() => { const animatedTextStyle = useAnimatedStyle(() => {
const progress = animationProgress.value;
return { return {
bottom: withTiming(textValues.value.bottom, { duration: 500 }), bottom: interpolate(
left: withTiming(textValues.value.left, { duration: 500 }), progress,
height: withTiming(textValues.value.height, { duration: 500 }), [0, 1],
width: withTiming(textValues.value.width, { duration: 500 }), [BOTTOM_HEIGHT, insets.bottom + PADDING * 5]
),
left: interpolate(
progress,
[0, 1],
[
(CONTENT_HEIGHT * 16) / 9 + 16 + 8 + insets.left,
PADDING * 4 + insets.left,
]
),
height: interpolate(progress, [0, 1], [BAR_HEIGHT, 64]),
width: interpolate(progress, [0, 1], [140, 140]),
}; };
}); });
const animatedButtonStyle = useAnimatedStyle(() => { const animatedButtonStyle = useAnimatedStyle(() => {
const progress = animationProgress.value;
return { return {
bottom: withTiming(buttonsValues.value.bottom, { duration: 500 }), bottom: interpolate(
opacity: withTiming(buttonsValues.value.opacity, { duration: 500 }), progress,
right: withTiming(buttonsValues.value.right, { duration: 500 }), [0, 1],
[BOTTOM_HEIGHT, screenHeight - insets.top - insets.bottom - PADDING * 5]
),
right: interpolate(
progress,
[0, 1],
[16 + insets.right, 16 + insets.right + PADDING]
),
height: interpolate(progress, [0, 1], [BAR_HEIGHT, BAR_HEIGHT]),
}; };
}); });
const animatedBackgroundStyle = useAnimatedStyle(() => { const animatedVideoStyle = useAnimatedStyle(() => {
const progress = animationProgress.value;
return { return {
bottom: withTiming(backgroundValues.value.bottom, { duration: 500 }), bottom: interpolate(progress, [0, 1], [BOTTOM_HEIGHT + PADDING, 0]),
width: withTiming(backgroundValues.value.width, { duration: 500 }), height: interpolate(progress, [0, 1], [CONTENT_HEIGHT, screenHeight]),
height: withTiming(backgroundValues.value.height, { duration: 500 }), width: interpolate(
padding: withTiming(backgroundValues.value.padding, { duration: 500 }), progress,
left: withTiming(backgroundValues.value.left, { duration: 500 }), [0, 1],
[(CONTENT_HEIGHT * 16) / 9, screenWiidth - insets.right - insets.left]
),
left: interpolate(
progress,
[0, 1],
[PADDING * 2 + insets.left, insets.left]
),
opacity:
size === "small"
? 1
: interpolate(
controlsOpacity.value,
[0, 1],
[1, 0.5] // 100% opacity when controls are hidden, 50% when visible
),
}; };
}); });
const animatedColorStyle = useAnimatedStyle(() => {
const progress = animationProgress.value;
return {
backgroundColor: interpolateColor(
progress,
[0, 1],
[COLORS[0], COLORS[1]]
),
};
});
const animatedSliderStyle = useAnimatedStyle(() => {
const progress = animationProgress.value;
return {
opacity: interpolate(progress, [0, 0.1], [0, 1]),
display: progress > 0 ? "flex" : "none",
};
});
const showControls = () => {
controlsOpacity.value = withTiming(1, { duration: 300 });
};
const hideControls = () => {
controlsOpacity.value = withTiming(0, { duration: 300 });
};
const animatedControlsStyle = useAnimatedStyle(() => {
return {
opacity: controlsOpacity.value,
};
});
// const PAN_GESTURE_EXTENT = screenHeight * 4; // Adjust this value as needed
// const panGesture = Gesture.Pan()
// .onStart(() => {
// animationProgress.value = size === "small" ? 0 : 1;
// })
// .onUpdate((event) => {
// const delta = -event.translationY / PAN_GESTURE_EXTENT;
// const newProgress = animationProgress.value + delta;
// animationProgress.value = Math.max(0, Math.min(1, newProgress));
// })
// .onEnd(() => {
// if (animationProgress.value > 0.5) {
// animationProgress.value = withTiming(1, { duration: 300 });
// size = "full";
// } else {
// animationProgress.value = withTiming(0, { duration: 300 });
// size = "small";
// }
// });
const poster = useMemo(() => { const poster = useMemo(() => {
if (currentlyPlaying?.item.Type === "Audio") if (currentlyPlaying?.item.Type === "Audio")
return `${api?.basePath}/Items/${currentlyPlaying.item.AlbumId}/Images/Primary?tag=${currentlyPlaying.item.AlbumPrimaryImageTag}&quality=90&maxHeight=200&maxWidth=200`; return `${api?.basePath}/Items/${currentlyPlaying.item.AlbumId}/Images/Primary?tag=${currentlyPlaying.item.AlbumPrimaryImageTag}&quality=90&maxHeight=200&maxWidth=200`;
@@ -149,68 +241,90 @@ export const CurrentlyPlayingBar: React.FC = () => {
}; };
}, [currentlyPlaying, startPosition, api, poster]); }, [currentlyPlaying, startPosition, api, poster]);
const animatedVideoStyle = useAnimatedStyle(() => { // useEffect(() => {
return { // const BOTTOM_HEIGHT = insets.bottom + 48;
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(() => { // backgroundValues.value = {
if (size === "full") { // bottom: interpolate(animationProgress.value, [0, 1], [BOTTOM_HEIGHT, 0]),
backgroundValues.value = { // height: interpolate(
bottom: 0, // animationProgress.value,
height: screenHeight, // [0, 1],
padding: 0, // [BAR_HEIGHT, screenHeight]
width: screenWiidth, // ),
left: 0, // padding: interpolate(animationProgress.value, [0, 1], [PADDING, 0]),
}; // width: interpolate(
buttonsValues.value = { // animationProgress.value,
bottom: screenHeight - insets.top - 38, // [0, 1],
opacity: 1, // [screenWiidth - PADDING * 2, screenWiidth]
right: 16, // ),
}; // left: interpolate(animationProgress.value, [0, 1], [8, 0]),
videoValues.value = { // };
bottom: 0,
height: screenHeight, // buttonsValues.value = {
width: screenWiidth, // bottom: interpolate(
left: 0, // animationProgress.value,
}; // [0, 1],
textValues.value = { // [BOTTOM_HEIGHT, screenHeight - insets.top - 48]
bottom: 78, // ),
height: 64, // right: interpolate(
left: 16, // animationProgress.value,
width: 140, // [0, 1],
}; // [16, 16 + insets.right]
} else { // ),
backgroundValues.value = { // height: interpolate(
bottom: 70, // animationProgress.value,
height: 80, // [0, 1],
padding: 0, // [BAR_HEIGHT, BAR_HEIGHT]
width: screenWiidth - 16, // ),
left: 8, // };
};
buttonsValues.value = { // videoValues.value = {
bottom: 90, // bottom: interpolate(
opacity: 1, // animationProgress.value,
right: 16, // [0, 1],
}; // [BOTTOM_HEIGHT + PADDING, 0]
videoValues.value = { // ),
bottom: 78, // height: interpolate(
height: 64, // animationProgress.value,
width: 113, // [0, 1],
left: 16, // [CONTENT_HEIGHT, screenHeight]
}; // ),
textValues.value = { // width: interpolate(
bottom: 78, // animationProgress.value,
height: 64, // [0, 1],
left: 141, // [(CONTENT_HEIGHT * 16) / 9, screenWiidth - insets.right - insets.left]
width: 140, // ),
}; // left: interpolate(animationProgress.value, [0, 1], [16, insets.left]),
} // };
}, [size, screenHeight, insets]);
// textValues.value = {
// bottom: interpolate(
// animationProgress.value,
// [0, 1],
// [BOTTOM_HEIGHT, BOTTOM_HEIGHT]
// ),
// height: interpolate(animationProgress.value, [0, 1], [BAR_HEIGHT, 64]),
// left: interpolate(
// animationProgress.value,
// [0, 1],
// [(CONTENT_HEIGHT * 16) / 9 + 16 + 8, PADDING * 2 + insets.left]
// ),
// width: interpolate(animationProgress.value, [0, 1], [140, 140]),
// };
// colorProgress.value = withTiming(animationProgress.value, {
// duration: 500,
// });
// }, [
// animationProgress.value,
// screenHeight,
// screenWiidth,
// insets.bottom,
// insets.top,
// insets.right,
// insets.left,
// controlsVisible,
// ]);
const progress = useSharedValue(0); const progress = useSharedValue(0);
const min = useSharedValue(0); const min = useSharedValue(0);
@@ -221,229 +335,333 @@ export const CurrentlyPlayingBar: React.FC = () => {
max.value = currentlyPlaying?.item.RunTimeTicks || 0; max.value = currentlyPlaying?.item.RunTimeTicks || 0;
}, [currentlyPlaying?.item.RunTimeTicks]); }, [currentlyPlaying?.item.RunTimeTicks]);
const hideControlsTimerRef = useRef<NodeJS.Timeout | null>(null);
const showControlsAndResetTimer = () => {
showControls();
if (size === "full") {
resetHideControlsTimer();
}
};
const resetHideControlsTimer = () => {
if (hideControlsTimerRef.current) {
clearTimeout(hideControlsTimerRef.current);
}
hideControlsTimerRef.current = setTimeout(() => {
hideControls();
}, 3000);
};
useEffect(() => {
if (size === "full" && controlsOpacity.value > 0) {
resetHideControlsTimer();
}
return () => {
if (hideControlsTimerRef.current) {
clearTimeout(hideControlsTimerRef.current);
}
};
}, [controlsOpacity.value, size]);
if (!api || !currentlyPlaying) return null; if (!api || !currentlyPlaying) return null;
return ( return (
<> <View>
<Animated.View <View>
className={`bg-neutral-800 rounded-lg absolute`} <Animated.View
style={[animatedBackgroundStyle]} className={`rounded-lg absolute`}
></Animated.View> style={[animatedBackgroundStyle, animatedColorStyle]}
></Animated.View>
<Animated.View className={` absolute`} style={[animatedTextStyle]}> <Animated.View
<View className="shrink text-xs flex flex-col justify-center h-full"> className={`absolute z-10`}
<TouchableOpacity style={[animatedTextStyle, animatedControlsStyle]}
onPress={() => { >
if (currentlyPlaying.item?.Type === "Audio") { <View className="shrink flex flex-col justify-center h-full">
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 <TouchableOpacity
onPress={() => { onPress={() => {
router.push( if (currentlyPlaying.item?.Type === "Audio") {
// @ts-ignore router.push(
`/(auth)/(tabs)/${from}/series/${currentlyPlaying.item.SeriesId}` // @ts-ignore
); `/(auth)/(tabs)/${from}/albums/${currentlyPlaying.item.AlbumId}`
);
} else {
router.push(
// @ts-ignore
`/(auth)/(tabs)/${from}/items/page?id=${currentlyPlaying.item?.Id}`
);
}
}} }}
className="text-xs opacity-50"
> >
<Text>{currentlyPlaying.item.SeriesName}</Text> <Text className="text-xs">{currentlyPlaying.item?.Name}</Text>
</TouchableOpacity> </TouchableOpacity>
)} {currentlyPlaying.item?.Type === "Episode" && (
{currentlyPlaying.item?.Type === "Movie" && ( <TouchableOpacity
<View> onPress={() => {
router.push(
// @ts-ignore
`/(auth)/(tabs)/${from}/series/${currentlyPlaying.item.SeriesId}`
);
}}
>
<Text className="text-xs opacity-50">
{currentlyPlaying.item.SeriesName}
</Text>
</TouchableOpacity>
)}
{currentlyPlaying.item?.Type === "Movie" && (
<Text className="text-xs opacity-50"> <Text className="text-xs opacity-50">
{currentlyPlaying.item?.ProductionYear} {currentlyPlaying.item?.ProductionYear}
</Text> </Text>
</View> )}
)} {currentlyPlaying.item?.Type === "Audio" && (
{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={`absolute z-10`}
style={[animatedButtonStyle, animatedControlsStyle]}
>
<View className="flex flex-row items-center h-full">
<TouchableOpacity <TouchableOpacity
onPress={() => { onPress={() => {
router.push(`/albums/${currentlyPlaying.item?.AlbumId}`); if (size === "small") {
animationProgress.value = withTiming(1, { duration: 300 });
setSize("full");
hideControls();
} else {
animationProgress.value = withTiming(0, { duration: 300 });
setSize("small");
showControls();
}
}} }}
className="aspect-square rounded flex flex-col items-center justify-center p-2"
> >
<Text className="text-xs opacity-50"> <Ionicons name="expand" size={20} color="white" />
{currentlyPlaying.item?.Album}
</Text>
</TouchableOpacity> </TouchableOpacity>
)} <TouchableOpacity
</View> onPress={() => {
</Animated.View> if (isPlaying) {
pauseVideo();
} else {
playVideo();
}
}}
className="aspect-square rounded flex flex-col items-center justify-center p-2"
>
<Ionicons
name={isPlaying ? "pause" : "play"}
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>
</View>
</Animated.View>
<Animated.View <Animated.View
className={`flex flex-row items-center z-10`} style={[animatedVideoStyle]}
style={[ className={` rounded-md absolute overflow-hidden flex flex-col items-center justify-center pointer-events-none z-0 object-contain`}
{ 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" /> <Pressable
</TouchableOpacity> onPress={() => {
<TouchableOpacity if (size === "small") return;
onPress={() => { if (controlsOpacity.value > 0) {
stopPlayback(); hideControls();
}} } else {
className="aspect-square rounded flex flex-col items-center justify-center p-2" showControlsAndResetTimer();
>
<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) => { className="w-full h-full"
setVolume(e.volume); >
}} {videoSource && (
progressUpdateInterval={4000} <Video
onError={(e) => { ref={videoRef}
console.log(e); allowsExternalPlayback
writeToLog("ERROR", "Video playback error: " + JSON.stringify(e)); style={{
Alert.alert("Error", "Cannot play this video file."); width: "100%",
setIsPlaying(false); height: "100%",
// setCurrentlyPlaying(null); }}
}} resizeMode="contain"
renderLoader={ playWhenInactive={true}
currentlyPlaying.item?.Type !== "Audio" && ( playInBackground={true}
<View className="flex flex-col items-center justify-center h-full"> showNotificationControls={true}
<Loader /> ignoreSilentSwitch="ignore"
</View> controls={false}
) pictureInPicture={true}
} debug={{
/> enable: true,
)} thread: true,
</Animated.View> }}
{size === "full" && ( onProgress={(e) => {
<View if (sliding.current === true) return;
style={{ onProgress(e);
borderRadius: 100, progress.value = e.currentTime * 10000000;
position: "absolute", }}
bottom: insets.bottom + 16, subtitleStyle={{
left: 16, fontSize: 16,
width: screenWiidth - 32, }}
}} source={videoSource}
> onRestoreUserInterfaceForPictureInPictureStop={() => {
<Slider setTimeout(() => {
theme={{ presentFullscreenPlayer();
maximumTrackTintColor: "rgba(1,1,1,0.2)", }, 300);
minimumTrackTintColor: "#fff", }}
cacheTrackTintColor: "#333", onFullscreenPlayerDidDismiss={() => {}}
bubbleBackgroundColor: "#fff", onFullscreenPlayerDidPresent={() => {}}
bubbleTextColor: "#000", onPlaybackStateChanged={(e) => {
heartbeatColor: "#999", if (e.isPlaying === true) {
}} playVideo(false);
onSlidingStart={() => { } else if (e.isPlaying === false) {
sliding.current = true; pauseVideo(false);
}} }
onSlidingComplete={(val) => { }}
const tick = Math.floor(val); onVolumeChange={(e) => {
videoRef.current?.seek(tick / 10000000); setVolume(e.volume);
sliding.current = false; }}
}} progressUpdateInterval={4000}
onValueChange={(val) => { onError={(e) => {
const tick = Math.floor(val); console.log(e);
progress.value = tick; writeToLog(
}} "ERROR",
containerStyle={{ "Video playback error: " + JSON.stringify(e)
borderRadius: 100, );
}} Alert.alert("Error", "Cannot play this video file.");
bubble={(s) => runtimeTicksToMinutes(s)} setIsPlaying(false);
sliderHeight={12} // setCurrentlyPlaying(null);
thumbWidth={0} }}
progress={progress} renderLoader={
minimumValue={min} currentlyPlaying.item?.Type !== "Audio" && (
maximumValue={max} <View className="flex flex-col items-center justify-center h-full">
/> <Loader />
<Text className="mt-2 text-xs text-neutral-500"> </View>
{runtimeTicksToMinutes(progress.value)} )
</Text> }
</View> />
)} )}
</Pressable>
</Animated.View>
{/* <Animated.View <Animated.View
style={[ style={[
{ {
height: "100%", borderRadius: 100,
width: "100%", position: "absolute",
display: "flex", bottom: insets.bottom + 8,
flexDirection: "row", left: insets.left + PADDING * 4,
alignItems: "center", width: screenWiidth - insets.left - insets.right - PADDING * 8,
justifyContent: "space-between", },
overflow: "hidden", animatedSliderStyle,
}, animatedControlsStyle,
animatedInnerStyle, ]}
]}
>
<View
className={`flex flex-row w-full h-full items-center space-x-4 shrink bg-neutral-800 rounded-lg p-2`}
> >
<BlurView
</View> intensity={100}
</Animated.View> */} className="flex flex-row bg-neutral-800 items-center space-x-6 rounded-full py-1.5 pl-4 pr-4 z-10 overflow-hidden"
</> >
<View className="flex flex-row items-center space-x-2">
<Ionicons name="play-skip-back" size={18} color="white" />
<TouchableOpacity
onPress={async () => {
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 (isPlaying) pauseVideo();
else playVideo();
resetHideControlsTimer();
}}
>
<Ionicons
name={isPlaying ? "pause" : "play"}
size={24}
color="white"
/>
</TouchableOpacity>
<TouchableOpacity
onPress={async () => {
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>
<Ionicons name="play-skip-forward" size={18} color="white" />
</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={() => {
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;
resetHideControlsTimer();
}}
containerStyle={{
borderRadius: 100,
}}
bubble={(s) => runtimeTicksToMinutes(s)}
sliderHeight={8}
thumbWidth={0}
progress={progress}
minimumValue={min}
maximumValue={max}
/>
<Text className="text-[10px] text-neutral-500">
{runtimeTicksToSeconds(progress.value)}
</Text>
</View>
</BlurView>
</Animated.View>
</View>
</View>
); );
}; };