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

fix: remove unused react-native-video

Browse Source
This commit is contained in:
Fredrik Burmester
2025-03-08 08:27:28 +01:00
parent 81535894e1
commit ef355b1f04
1 changed files with 80 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

219
components/video-player/controls/Controls.tsx
View File

@@ -1,44 +1,43 @@
import {Text} from "@/components/common/Text"; import { Text } from "@/components/common/Text";
import {Loader} from "@/components/Loader"; import { Loader } from "@/components/Loader";
import {useAdjacentItems} from "@/hooks/useAdjacentEpisodes"; import { useAdjacentItems } from "@/hooks/useAdjacentEpisodes";
import {useCreditSkipper} from "@/hooks/useCreditSkipper"; import { useCreditSkipper } from "@/hooks/useCreditSkipper";
import {useHaptic} from "@/hooks/useHaptic"; import { useHaptic } from "@/hooks/useHaptic";
import {useIntroSkipper} from "@/hooks/useIntroSkipper"; import { useIntroSkipper } from "@/hooks/useIntroSkipper";
import {useTrickplay} from "@/hooks/useTrickplay"; import { useTrickplay } from "@/hooks/useTrickplay";
import {TrackInfo, VlcPlayerViewRef,} from "@/modules/VlcPlayer.types"; import { TrackInfo, VlcPlayerViewRef } from "@/modules/VlcPlayer.types";
import {apiAtom} from "@/providers/JellyfinProvider";
import {useSettings, VideoPlayer} from "@/utils/atoms/settings";
import {getDefaultPlaySettings,} from "@/utils/jellyfin/getDefaultPlaySettings";
import {getItemById} from "@/utils/jellyfin/user-library/getItemById";
import {writeToLog} from "@/utils/log";
import {formatTimeString, msToTicks, secondsToMs, ticksToMs, ticksToSeconds,} from "@/utils/time";
import {Ionicons, MaterialIcons} from "@expo/vector-icons";
import {BaseItemDto, MediaSourceInfo,} from "@jellyfin/sdk/lib/generated-client";
import {Image} from "expo-image";
import {useLocalSearchParams, useRouter} from "expo-router";
import * as ScreenOrientation from "@/packages/expo-screen-orientation"; import * as ScreenOrientation from "@/packages/expo-screen-orientation";
import {useAtom} from "jotai"; import { apiAtom } from "@/providers/JellyfinProvider";
import {debounce} from "lodash"; import { useSettings, VideoPlayer } from "@/utils/atoms/settings";
import React, {useCallback, useEffect, useRef, useState} from "react"; import { getDefaultPlaySettings } from "@/utils/jellyfin/getDefaultPlaySettings";
import {Platform, TouchableOpacity, useWindowDimensions, View,} from "react-native"; import { getItemById } from "@/utils/jellyfin/user-library/getItemById";
import {Slider} from "react-native-awesome-slider"; import { writeToLog } from "@/utils/log";
import {runOnJS, SharedValue, useAnimatedReaction, useSharedValue,} from "react-native-reanimated"; import { formatTimeString, msToTicks, secondsToMs, ticksToMs, ticksToSeconds } from "@/utils/time";
import {useSafeAreaInsets} from "react-native-safe-area-context"; import { Ionicons, MaterialIcons } from "@expo/vector-icons";
import {VideoRef} from "react-native-video"; import { BaseItemDto, MediaSourceInfo } from "@jellyfin/sdk/lib/generated-client";
import { Image } from "expo-image";
import { useLocalSearchParams, useRouter } from "expo-router";
import { useAtom } from "jotai";
import { debounce } from "lodash";
import React, { useCallback, useEffect, useRef, useState } from "react";
import { Platform, TouchableOpacity, useWindowDimensions, View } from "react-native";
import { Slider } from "react-native-awesome-slider";
import { runOnJS, SharedValue, useAnimatedReaction, useSharedValue } from "react-native-reanimated";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import AudioSlider from "./AudioSlider"; import AudioSlider from "./AudioSlider";
import BrightnessSlider from "./BrightnessSlider"; import BrightnessSlider from "./BrightnessSlider";
import {ControlProvider} from "./contexts/ControlContext"; import { ControlProvider } from "./contexts/ControlContext";
import {VideoProvider} from "./contexts/VideoContext"; import { VideoProvider } from "./contexts/VideoContext";
import DropdownView from "./dropdown/DropdownView"; import DropdownView from "./dropdown/DropdownView";
import {EpisodeList} from "./EpisodeList"; import { EpisodeList } from "./EpisodeList";
import NextEpisodeCountDownButton from "./NextEpisodeCountDownButton"; import NextEpisodeCountDownButton from "./NextEpisodeCountDownButton";
import SkipButton from "./SkipButton"; import SkipButton from "./SkipButton";
import {useControlsTimeout} from "./useControlsTimeout"; import { useControlsTimeout } from "./useControlsTimeout";
import {VideoTouchOverlay} from "./VideoTouchOverlay"; import { VideoTouchOverlay } from "./VideoTouchOverlay";
interface Props { interface Props {
item: BaseItemDto; item: BaseItemDto;
videoRef: React.MutableRefObject<VlcPlayerViewRef | VideoRef | null>; videoRef: React.MutableRefObject<VlcPlayerViewRef | null>;
isPlaying: boolean; isPlaying: boolean;
isSeeking: SharedValue<boolean>; isSeeking: SharedValue<boolean>;
cacheProgress: SharedValue<number>; cacheProgress: SharedValue<number>;
@@ -68,32 +67,32 @@ interface Props {
const CONTROLS_TIMEOUT = 4000; const CONTROLS_TIMEOUT = 4000;
export const Controls: React.FC<Props> = ({ export const Controls: React.FC<Props> = ({
item, item,
seek, seek,
startPictureInPicture, startPictureInPicture,
play, play,
pause, pause,
togglePlay, togglePlay,
isPlaying, isPlaying,
isSeeking, isSeeking,
progress, progress,
isBuffering, isBuffering,
cacheProgress, cacheProgress,
showControls, showControls,
setShowControls, setShowControls,
ignoreSafeAreas, ignoreSafeAreas,
setIgnoreSafeAreas, setIgnoreSafeAreas,
mediaSource, mediaSource,
isVideoLoaded, isVideoLoaded,
getAudioTracks, getAudioTracks,
getSubtitleTracks, getSubtitleTracks,
setSubtitleURL, setSubtitleURL,
setSubtitleTrack, setSubtitleTrack,
setAudioTrack, setAudioTrack,
offline = false, offline = false,
enableTrickplay = true, enableTrickplay = true,
isVlc = false, isVlc = false,
}) => { }) => {
const [settings] = useSettings(); const [settings] = useSettings();
const router = useRouter(); const router = useRouter();
const insets = useSafeAreaInsets(); const insets = useSafeAreaInsets();
@@ -107,12 +106,10 @@ export const Controls: React.FC<Props> = ({
const { height: screenHeight, width: screenWidth } = useWindowDimensions(); const { height: screenHeight, width: screenWidth } = useWindowDimensions();
const { previousItem, nextItem } = useAdjacentItems({ item }); const { previousItem, nextItem } = useAdjacentItems({ item });
const { const { trickPlayUrl, calculateTrickplayUrl, trickplayInfo, prefetchAllTrickplayImages } = useTrickplay(
trickPlayUrl, item,
calculateTrickplayUrl, !offline && enableTrickplay
trickplayInfo, );
prefetchAllTrickplayImages,
} = useTrickplay(item, !offline && enableTrickplay);
const [currentTime, setCurrentTime] = useState(0); const [currentTime, setCurrentTime] = useState(0);
const [remainingTime, setRemainingTime] = useState(Infinity); const [remainingTime, setRemainingTime] = useState(Infinity);
@@ -134,9 +131,7 @@ export const Controls: React.FC<Props> = ({
progress.value = isVlc progress.value = isVlc
? ticksToMs(item?.UserData?.PlaybackPositionTicks) ? ticksToMs(item?.UserData?.PlaybackPositionTicks)
: item?.UserData?.PlaybackPositionTicks || 0; : item?.UserData?.PlaybackPositionTicks || 0;
max.value = isVlc max.value = isVlc ? ticksToMs(item.RunTimeTicks || 0) : item.RunTimeTicks || 0;
? ticksToMs(item.RunTimeTicks || 0)
: item.RunTimeTicks || 0;
} }
}, [item, isVlc]); }, [item, isVlc]);
@@ -146,13 +141,7 @@ export const Controls: React.FC<Props> = ({
subtitleIndex: string; subtitleIndex: string;
}>(); }>();
const { showSkipButton, skipIntro } = useIntroSkipper( const { showSkipButton, skipIntro } = useIntroSkipper(offline ? undefined : item.Id, currentTime, seek, play, isVlc);
offline ? undefined : item.Id,
currentTime,
seek,
play,
isVlc
);
const { showSkipCreditButton, skipCredit } = useCreditSkipper( const { showSkipCreditButton, skipCredit } = useCreditSkipper(
offline ? undefined : item.Id, offline ? undefined : item.Id,
@@ -177,12 +166,7 @@ export const Controls: React.FC<Props> = ({
mediaSource: newMediaSource, mediaSource: newMediaSource,
audioIndex: defaultAudioIndex, audioIndex: defaultAudioIndex,
subtitleIndex: defaultSubtitleIndex, subtitleIndex: defaultSubtitleIndex,
} = getDefaultPlaySettings( } = getDefaultPlaySettings(item, settings, previousIndexes, mediaSource ?? undefined);
item,
settings,
previousIndexes,
mediaSource ?? undefined
);
const queryParams = new URLSearchParams({ const queryParams = new URLSearchParams({
itemId: item.Id ?? "", itemId: item.Id ?? "",
@@ -220,9 +204,7 @@ export const Controls: React.FC<Props> = ({
const updateTimes = useCallback( const updateTimes = useCallback(
(currentProgress: number, maxValue: number) => { (currentProgress: number, maxValue: number) => {
const current = isVlc ? currentProgress : ticksToSeconds(currentProgress); const current = isVlc ? currentProgress : ticksToSeconds(currentProgress);
const remaining = isVlc const remaining = isVlc ? maxValue - currentProgress : ticksToSeconds(maxValue - currentProgress);
? maxValue - currentProgress
: ticksToSeconds(maxValue - currentProgress);
setCurrentTime(current); setCurrentTime(current);
setRemainingTime(remaining); setRemainingTime(remaining);
@@ -384,13 +366,8 @@ export const Controls: React.FC<Props> = ({
cachePolicy={"memory-disk"} cachePolicy={"memory-disk"}
style={{ style={{
width: 150 * trickplayInfo?.data.TileWidth!, width: 150 * trickplayInfo?.data.TileWidth!,
height: height: (150 / trickplayInfo.aspectRatio!) * trickplayInfo?.data.TileHeight!,
(150 / trickplayInfo.aspectRatio!) * transform: [{ translateX: -x * tileWidth }, { translateY: -y * tileHeight }],
trickplayInfo?.data.TileHeight!,
transform: [
{ translateX: -x * tileWidth },
{ translateY: -y * tileHeight },
],
resizeMode: "cover", resizeMode: "cover",
}} }}
source={{ uri: url }} source={{ uri: url }}
@@ -403,9 +380,9 @@ export const Controls: React.FC<Props> = ({
fontSize: 16, fontSize: 16,
}} }}
> >
{`${time.hours > 0 ? `${time.hours}:` : ""}${ {`${time.hours > 0 ? `${time.hours}:` : ""}${time.minutes < 10 ? `0${time.minutes}` : time.minutes}:${
time.minutes < 10 ? `0${time.minutes}` : time.minutes time.seconds < 10 ? `0${time.seconds}` : time.seconds
}:${time.seconds < 10 ? `0${time.seconds}` : time.seconds}`} }`}
</Text> </Text>
</View> </View>
); );
@@ -413,24 +390,14 @@ export const Controls: React.FC<Props> = ({
const onClose = async () => { const onClose = async () => {
lightHapticFeedback(); lightHapticFeedback();
await ScreenOrientation.lockAsync( await ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.PORTRAIT_UP);
ScreenOrientation.OrientationLock.PORTRAIT_UP
);
router.back(); router.back();
}; };
return ( return (
<ControlProvider <ControlProvider item={item} mediaSource={mediaSource} isVideoLoaded={isVideoLoaded}>
item={item}
mediaSource={mediaSource}
isVideoLoaded={isVideoLoaded}
>
{episodeView ? ( {episodeView ? (
<EpisodeList <EpisodeList item={item} close={() => setEpisodeView(false)} goToItem={goToItem} />
item={item}
close={() => setEpisodeView(false)}
goToItem={goToItem}
/>
) : ( ) : (
<> <>
<VideoTouchOverlay <VideoTouchOverlay
@@ -445,9 +412,7 @@ export const Controls: React.FC<Props> = ({
position: "absolute", position: "absolute",
top: settings?.safeAreaInControlsEnabled ? insets.top : 0, top: settings?.safeAreaInControlsEnabled ? insets.top : 0,
right: settings?.safeAreaInControlsEnabled ? insets.right : 0, right: settings?.safeAreaInControlsEnabled ? insets.right : 0,
width: settings?.safeAreaInControlsEnabled width: settings?.safeAreaInControlsEnabled ? screenWidth - insets.left - insets.right : screenWidth,
? screenWidth - insets.left - insets.right
: screenWidth,
opacity: showControls ? 1 : 0, opacity: showControls ? 1 : 0,
}, },
]} ]}
@@ -516,11 +481,7 @@ export const Controls: React.FC<Props> = ({
onPress={toggleIgnoreSafeAreas} onPress={toggleIgnoreSafeAreas}
className="aspect-square flex flex-col rounded-xl items-center justify-center p-2" className="aspect-square flex flex-col rounded-xl items-center justify-center p-2"
> >
<Ionicons <Ionicons name={ignoreSafeAreas ? "contract-outline" : "expand"} size={24} color="white" />
name={ignoreSafeAreas ? "contract-outline" : "expand"}
size={24}
color="white"
/>
</TouchableOpacity> </TouchableOpacity>
{/* )} */} {/* )} */}
<TouchableOpacity <TouchableOpacity
@@ -679,34 +640,14 @@ export const Controls: React.FC<Props> = ({
</Text> </Text>
)} )}
<Text className="font-bold text-xl">{item?.Name}</Text> <Text className="font-bold text-xl">{item?.Name}</Text>
{item?.Type === "Movie" && ( {item?.Type === "Movie" && <Text className="text-xs opacity-50">{item?.ProductionYear}</Text>}
<Text className="text-xs opacity-50"> {item?.Type === "Audio" && <Text className="text-xs opacity-50">{item?.Album}</Text>}
{item?.ProductionYear}
</Text>
)}
{item?.Type === "Audio" && (
<Text className="text-xs opacity-50">{item?.Album}</Text>
)}
</View> </View>
<View className="flex flex-row space-x-2"> <View className="flex flex-row space-x-2">
<SkipButton <SkipButton showButton={showSkipButton} onPress={skipIntro} buttonText="Skip Intro" />
showButton={showSkipButton} <SkipButton showButton={showSkipCreditButton} onPress={skipCredit} buttonText="Skip Credits" />
onPress={skipIntro}
buttonText="Skip Intro"
/>
<SkipButton
showButton={showSkipCreditButton}
onPress={skipCredit}
buttonText="Skip Credits"
/>
<NextEpisodeCountDownButton <NextEpisodeCountDownButton
show={ show={!nextItem ? false : isVlc ? remainingTime < 10000 : remainingTime < 10}
!nextItem
? false
: isVlc
? remainingTime < 10000
: remainingTime < 10
}
onFinish={goToNextItem} onFinish={goToNextItem}
onPress={goToNextItem} onPress={goToNextItem}
/> />