alteropen/streamyfin
1
0
Fork 0
mirror of https://github.com/streamyfin/streamyfin.git synced 2026-04-22 00:34:43 +01:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

wip

Browse Source
This commit is contained in:
Fredrik Burmester
2024-09-13 12:23:59 +03:00
parent 5a1f555703
commit 778447c1fd
4 changed files with 254 additions and 269 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -273,47 +273,47 @@ export default function index() {
mediaListCollections, mediaListCollections,
]); ]);
if (isConnected === false) { // if (isConnected === false) {
return ( // return (
<View className="flex flex-col items-center justify-center h-full -mt-6 px-8"> // <View className="flex flex-col items-center justify-center h-full -mt-6 px-8">
<Text className="text-3xl font-bold mb-2">No Internet</Text> // <Text className="text-3xl font-bold mb-2">No Internet</Text>
<Text className="text-center opacity-70"> // <Text className="text-center opacity-70">
No worries, you can still watch{"\n"}downloaded content. // No worries, you can still watch{"\n"}downloaded content.
</Text> // </Text>
<View className="mt-4"> // <View className="mt-4">
<Button // <Button
color="purple" // color="purple"
onPress={() => router.push("/(auth)/downloads")} // onPress={() => router.push("/(auth)/downloads")}
justify="center" // justify="center"
iconRight={ // iconRight={
<Ionicons name="arrow-forward" size={20} color="white" /> // <Ionicons name="arrow-forward" size={20} color="white" />
} // }
> // >
Go to downloads // Go to downloads
</Button> // </Button>
<Button // <Button
color="black" // color="black"
onPress={() => { // onPress={() => {
checkConnection(); // checkConnection();
}} // }}
justify="center" // justify="center"
className="mt-2" // className="mt-2"
iconRight={ // iconRight={
loadingRetry ? null : ( // loadingRetry ? null : (
<Ionicons name="refresh" size={20} color="white" /> // <Ionicons name="refresh" size={20} color="white" />
) // )
} // }
> // >
{loadingRetry ? ( // {loadingRetry ? (
<ActivityIndicator size={"small"} color={"white"} /> // <ActivityIndicator size={"small"} color={"white"} />
) : ( // ) : (
"Retry" // "Retry"
)} // )}
</Button> // </Button>
</View> // </View>
</View> // </View>
); // );
} // }
const insets = useSafeAreaInsets(); const insets = useSafeAreaInsets();

BIN
bun.lockb
View File

Binary file not shown.

440
components/CurrentlyPlayingBar.tsx
View File

@@ -7,16 +7,19 @@ 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 } from "react"; import { useEffect, useMemo, useState } from "react";
import { Alert, Platform, TouchableOpacity, View } from "react-native"; import { Alert, Platform, TouchableOpacity, View } from "react-native";
import Animated, { import Animated, {
useAnimatedStyle, useAnimatedStyle,
useSharedValue, useSharedValue,
withDecay,
withTiming, withTiming,
} from "react-native-reanimated"; } from "react-native-reanimated";
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";
export const CurrentlyPlayingBar: React.FC = () => { export const CurrentlyPlayingBar: React.FC = () => {
const segments = useSegments(); const segments = useSegments();
@@ -32,79 +35,55 @@ export const CurrentlyPlayingBar: React.FC = () => {
presentFullscreenPlayer, presentFullscreenPlayer,
onProgress, onProgress,
} = usePlayback(); } = usePlayback();
const router = useRouter();
const insets = useSafeAreaInsets();
const [api] = useAtom(apiAtom); const [api] = useAtom(apiAtom);
const aBottom = useSharedValue(0); const [size, setSize] = useState<"full" | "small">("small");
const aPadding = useSharedValue(0);
const aHeight = useSharedValue(100); const screenHeight = Dimensions.get("window").height;
const router = useRouter(); const screenWiidth = Dimensions.get("window").width;
const animatedOuterStyle = useAnimatedStyle(() => {
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 animatedButtonStyle = useAnimatedStyle(() => {
return { return {
bottom: withTiming(aBottom.value, { duration: 500 }), bottom: withTiming(buttonsValues.value.bottom, { duration: 500 }),
height: withTiming(aHeight.value, { duration: 500 }), opacity: withTiming(buttonsValues.value.opacity, { duration: 500 }),
padding: withTiming(aPadding.value, { duration: 500 }), right: withTiming(buttonsValues.value.right, { duration: 500 }),
}; };
}); });
const aPaddingBottom = useSharedValue(30); const animatedBackgroundStyle = useAnimatedStyle(() => {
const aPaddingInner = useSharedValue(12);
const aBorderRadiusBottom = useSharedValue(12);
const animatedInnerStyle = useAnimatedStyle(() => {
return { return {
padding: withTiming(aPaddingInner.value, { duration: 500 }), bottom: withTiming(backgroundValues.value.bottom, { duration: 500 }),
paddingBottom: withTiming(aPaddingBottom.value, { duration: 500 }), width: withTiming(backgroundValues.value.width, { duration: 500 }),
borderBottomLeftRadius: withTiming(aBorderRadiusBottom.value, { height: withTiming(backgroundValues.value.height, { duration: 500 }),
duration: 500, padding: withTiming(backgroundValues.value.padding, { duration: 500 }),
}), left: withTiming(backgroundValues.value.left, { duration: 500 }),
borderBottomRightRadius: withTiming(aBorderRadiusBottom.value, {
duration: 500,
}),
}; };
}); });
const from = useMemo(() => segments[2], [segments]);
useEffect(() => {
if (segments.find((s) => s.includes("tabs"))) {
// Tab screen - i.e. home
aBottom.value = Platform.OS === "ios" ? 78 : 50;
aHeight.value = 80;
aPadding.value = 8;
aPaddingBottom.value = 8;
aPaddingInner.value = 8;
} else {
// Inside a normal screen
aBottom.value = Platform.OS === "ios" ? 0 : 0;
aHeight.value = Platform.OS === "ios" ? 110 : 80;
aPadding.value = Platform.OS === "ios" ? 0 : 8;
aPaddingInner.value = Platform.OS === "ios" ? 12 : 8;
aPaddingBottom.value = Platform.OS === "ios" ? 40 : 12;
}
}, [segments]);
const startPosition = useMemo(
() =>
currentlyPlaying?.item?.UserData?.PlaybackPositionTicks
? Math.round(
currentlyPlaying?.item.UserData.PlaybackPositionTicks / 10000
)
: 0,
[currentlyPlaying?.item]
);
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 videoSource = useMemo(() => { const videoSource = useMemo(() => {
if (!api || !currentlyPlaying || !poster) return null; if (!api || !currentlyPlaying || !poster) return null;
return { return {
@@ -128,179 +107,184 @@ export const CurrentlyPlayingBar: React.FC = () => {
}; };
}, [currentlyPlaying, startPosition, api, poster]); }, [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 }),
};
});
const animatedValues = useSharedValue({
paddingBottom: 0,
paddingInner: 0,
borderRadiusBottom: 0,
});
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,
};
} 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,
};
}
}, [size, screenHeight, insets]);
if (!api || !currentlyPlaying) return null; if (!api || !currentlyPlaying) return null;
return ( return (
<Animated.View <>
style={[animatedOuterStyle]} <Animated.View
className="absolute left-0 w-screen" className={`bg-black rounded-lg absolute`}
> style={[animatedBackgroundStyle]}
<BlurView ></Animated.View>
intensity={Platform.OS === "android" ? 60 : 100}
experimentalBlurMethod={Platform.OS === "android" ? "none" : undefined} <Animated.View
className={`h-full w-full rounded-xl overflow-hidden ${ className={`flex flex-row items-center z-10`}
Platform.OS === "android" && "bg-black" style={[
}`} { position: "absolute", borderWidth: 1, borderColor: "blue" },
animatedButtonStyle,
]}
> >
<Animated.View <TouchableOpacity
style={[ onPress={() => {
{ padding: 8, borderTopLeftRadius: 12, borderTopEndRadius: 12 }, if (size === "small") setSize("full");
animatedInnerStyle, else setSize("small");
]} }}
className="h-full w-full flex flex-row items-center justify-between overflow-hidden" className="aspect-square rounded flex flex-col items-center justify-center p-2"
> >
<View className="flex flex-row items-center space-x-4 shrink"> <Ionicons name="expand" size={24} color="white" />
<TouchableOpacity </TouchableOpacity>
onPress={() => { <TouchableOpacity
videoRef.current?.presentFullscreenPlayer(); 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`}
>
<View className="">
{videoSource && (
<Video
ref={videoRef}
allowsExternalPlayback
style={{ width: "100%", height: "100%" }}
playWhenInactive={true}
playInBackground={true}
showNotificationControls={true}
ignoreSilentSwitch="ignore"
controls={false}
pictureInPicture={true}
debug={{
enable: true,
thread: true,
}} }}
className={`relative h-full bg-neutral-800 rounded-md overflow-hidden onProgress={(e) => onProgress(e)}
${ subtitleStyle={{
currentlyPlaying.item?.Type === "Audio" fontSize: 16,
? "aspect-square" }}
: "aspect-video" source={videoSource}
onRestoreUserInterfaceForPictureInPictureStop={() => {
setTimeout(() => {
presentFullscreenPlayer();
}, 300);
}}
onFullscreenPlayerDidDismiss={() => {}}
onFullscreenPlayerDidPresent={() => {}}
onPlaybackStateChanged={(e) => {
if (e.isPlaying === true) {
playVideo(false);
} else if (e.isPlaying === false) {
pauseVideo(false);
} }
`}
>
{videoSource && (
<Video
ref={videoRef}
allowsExternalPlayback
style={{ width: "100%", height: "100%" }}
playWhenInactive={true}
playInBackground={true}
showNotificationControls={true}
ignoreSilentSwitch="ignore"
controls={false}
pictureInPicture={true}
poster={
poster && currentlyPlaying.item?.Type === "Audio"
? poster
: undefined
}
debug={{
enable: true,
thread: true,
}}
onProgress={(e) => onProgress(e)}
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>
)
}
/>
)}
</TouchableOpacity>
<View className="shrink text-xs">
<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>
</View>
<View className="flex flex-row items-center space-x-2">
<TouchableOpacity
onPress={() => {
if (isPlaying) pauseVideo();
else playVideo();
}} }}
className="aspect-square rounded flex flex-col items-center justify-center p-2" onVolumeChange={(e) => {
> setVolume(e.volume);
{isPlaying ? (
<Ionicons name="pause" size={24} color="white" />
) : (
<Ionicons name="play" size={24} color="white" />
)}
</TouchableOpacity>
<TouchableOpacity
onPress={() => {
stopPlayback();
}} }}
className="aspect-square rounded flex flex-col items-center justify-center p-2" progressUpdateInterval={4000}
> onError={(e) => {
<Ionicons name="close" size={24} color="white" /> console.log(e);
</TouchableOpacity> writeToLog(
</View> "ERROR",
</Animated.View> "Video playback error: " + JSON.stringify(e)
</BlurView> );
</Animated.View> 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>
)
}
/>
)}
</View>
</Animated.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> */}
</>
); );
}; };

1
package.json
View File

@@ -59,6 +59,7 @@
"react": "18.2.0", "react": "18.2.0",
"react-dom": "18.2.0", "react-dom": "18.2.0",
"react-native": "0.74.5", "react-native": "0.74.5",
"react-native-awesome-slider": "^2.5.3",
"react-native-circular-progress": "^1.4.0", "react-native-circular-progress": "^1.4.0",
"react-native-compressor": "^1.8.25", "react-native-compressor": "^1.8.25",
"react-native-gesture-handler": "~2.16.1", "react-native-gesture-handler": "~2.16.1",