Cutlery/Kyoo
1
0
Fork 0
mirror of https://github.com/zoriya/Kyoo.git synced 2025-05-24 02:02:36 -04:00
Code Issues Packages Projects Releases Wiki Activity

Fix react native video new props

Browse Source
This commit is contained in:
Zoe Roux 2024-05-20 00:09:56 +02:00
parent f0b5b55b13
commit 5049ad25b5
No known key found for this signature in database
4 changed files with 75 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
front/packages/ui/src/player/index.tsx
View File

@ -39,7 +39,6 @@ import { episodeDisplayNumber } from "../details/episode";
import { ErrorView } from "../errors";
import { Back, Hover, LoadingIndicator } from "./components/hover";
import { useVideoKeyboard } from "./keyboard";
import { MediaSessionManager } from "./media-session";
import { Video, durationAtom, fullscreenAtom } from "./state";
import { WatchStatusObserver } from "./watch-status-observer";
@ -90,6 +89,15 @@ export const Player = ({
data && data.type === "episode" && data.nextEpisode
? `/watch/${data.nextEpisode.slug}?t=0`
: undefined;
const title =
data &&
(data.type === "movie"
? data.name
: `${data.show!.name} ${episodeDisplayNumber({
seasonNumber: data.seasonNumber,
episodeNumber: data.episodeNumber,
absoluteNumber: data.absoluteNumber,
})}`);
useVideoKeyboard(info?.subtitles, info?.fonts, previous, next);
@ -119,26 +127,7 @@ export const Player = ({
return (
<>
{data && (
<Head
title={
data.type === "movie"
? data.name
: `${data.show!.name} ${episodeDisplayNumber({
seasonNumber: data.seasonNumber,
episodeNumber: data.episodeNumber,
absoluteNumber: data.absoluteNumber,
})}`
}
description={data.overview}
/>
)}
<MediaSessionManager
title={data?.name ?? t("show.episodeNoMetadata")}
image={data?.thumbnail?.high}
next={next}
previous={previous}
/>
<Head title={title} description={data?.overview} />
{data && info && (
<WatchStatusObserver type={type} slug={data.slug} duration={info.durationSeconds} />
)}
@ -150,6 +139,13 @@ export const Player = ({
})}
>
<Video
metadata={{
title: title ?? t("show.episodeNoMetadata"),
description: data?.overview ?? undefined,
imageUri: data?.thumbnail?.high,
next: next,
previous: previous,
}}
links={data?.links}
audios={info?.audios}
subtitles={info?.subtitles}

12
front/packages/ui/src/player/state.tsx
View File

@ -104,6 +104,7 @@ export const Video = memo(function Video({
setError,
fonts,
startTime: startTimeP,
metadata,
...props
}: {
links?: Episode["links"];
@ -113,6 +114,13 @@ export const Video = memo(function Video({
setError: (error: string | undefined) => void;
fonts?: string[];
startTime?: number | null;
metadata: {
title?: string;
description?: string;
imageUri?: string;
previous?: string;
next?: string;
};
} & Partial<VideoProps>) {
const ref = useRef<ElementRef<typeof NativeVideo> | null>(null);
const [isPlaying, setPlay] = useAtom(playAtom);
@ -220,8 +228,12 @@ export const Video = memo(function Video({
source={{
uri: source,
startPosition: startTime.current ? startTime.current * 1000 : undefined,
metadata: metadata,
...links,
}}
showNotificationControls
playInBackground
playWhenInactive
paused={!isPlaying}
muted={isMuted}
volume={volume}

5
front/packages/ui/src/player/video.tsx
View File

@ -19,6 +19,7 @@
*/
import "react-native-video";
import type { ReactVideoSourceProperties } from "react-native-video";
declare module "react-native-video" {
interface ReactVideoProps {
@ -27,7 +28,7 @@ declare module "react-native-video" {
onMediaUnsupported?: () => void;
}
export type VideoProps = Omit<ReactVideoProps, "source"> & {
source: { uri: string; hls: string | null; startPosition?: number };
source: ReactVideoSourceProperties & { hls: string | null };
};
}
@ -120,7 +121,7 @@ const Video = forwardRef<VideoRef, VideoProps>(function Video(
type: SelectedTrackType.INDEX,
value: subtitles?.indexOf(subtitle),
}
: { type: SelectedTrackType.DISABLED }
: { type: SelectedTrackType.DISABLED, value: "" }
}
{...props}
/>

82
front/packages/ui/src/player/video.web.tsx
View File

@ -38,6 +38,7 @@ import toVttBlob from "srt-webvtt";
import { useForceRerender, useYoshiki } from "yoshiki";
import { useDisplayName } from "../utils";
import { PlayMode, audioAtom, playAtom, playModeAtom, progressAtom, subtitleAtom } from "./state";
import { MediaSessionManager } from "./media-session";
let hls: Hls | null = null;
@ -208,46 +209,49 @@ const Video = forwardRef<{ seek: (value: number) => void }, VideoProps>(function
const setProgress = useSetAtom(progressAtom);
return (
<video
ref={ref}
src={source.uri}
muted={muted}
autoPlay={!paused}
controls={false}
playsInline
onCanPlay={() => onBuffer?.call(null, { isBuffering: false })}
onWaiting={() => onBuffer?.call(null, { isBuffering: true })}
onDurationChange={() => {
if (!ref.current) return;
onLoad?.call(null, { duration: ref.current.duration } as any);
}}
onTimeUpdate={() => {
if (!ref.current) return;
onProgress?.call(null, {
currentTime: ref.current.currentTime,
playableDuration: ref.current.buffered.length
? ref.current.buffered.end(ref.current.buffered.length - 1)
: 0,
seekableDuration: 0,
});
}}
onError={() => {
if (ref?.current?.error?.code === MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED)
onMediaUnsupported?.call(undefined);
else {
onError?.call(null, {
error: { errorString: ref.current?.error?.message ?? "Unknown error" },
<>
<MediaSessionManager {...source.metadata} />
<video
ref={ref}
src={source.uri}
muted={muted}
autoPlay={!paused}
controls={false}
playsInline
onCanPlay={() => onBuffer?.call(null, { isBuffering: false })}
onWaiting={() => onBuffer?.call(null, { isBuffering: true })}
onDurationChange={() => {
if (!ref.current) return;
onLoad?.call(null, { duration: ref.current.duration } as any);
}}
onTimeUpdate={() => {
if (!ref.current) return;
onProgress?.call(null, {
currentTime: ref.current.currentTime,
playableDuration: ref.current.buffered.length
? ref.current.buffered.end(ref.current.buffered.length - 1)
: 0,
seekableDuration: 0,
});
}
}}
onLoadedMetadata={() => {
if (source.startPosition) setProgress(source.startPosition / 1000);
}}
onPlay={() => onPlaybackStateChanged?.({ isPlaying: true })}
onPause={() => onPlaybackStateChanged?.({ isPlaying: false })}
onEnded={onEnd}
{...css({ width: "100%", height: "100%", objectFit: "contain" })}
/>
}}
onError={() => {
if (ref?.current?.error?.code === MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED)
onMediaUnsupported?.call(undefined);
else {
onError?.call(null, {
error: { errorString: ref.current?.error?.message ?? "Unknown error" },
});
}
}}
onLoadedMetadata={() => {
if (source.startPosition) setProgress(source.startPosition / 1000);
}}
onPlay={() => onPlaybackStateChanged?.({ isPlaying: true })}
onPause={() => onPlaybackStateChanged?.({ isPlaying: false })}
onEnded={onEnd}
{...css({ width: "100%", height: "100%", objectFit: "contain" })}
/>
</>
);
});