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

Move android specific code to android specific file

Browse Source
This commit is contained in:
Zoe Roux 2023-07-16 19:12:29 +09:00
parent 479d3e9f07
commit 1e55b7bf50
2 changed files with 28 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -18,12 +18,11 @@
* along with Kyoo. If not, see <https://www.gnu.org/licenses/>. * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
*/ */
import { Track, WatchItem, Font, getToken } from "@kyoo/models"; import { Track, WatchItem, Font } from "@kyoo/models";
import { atom, useAtom, useAtomValue, useSetAtom } from "jotai"; import { atom, useAtom, useAtomValue, useSetAtom } from "jotai";
import { ElementRef, memo, useEffect, useLayoutEffect, useRef, useState } from "react"; import { ElementRef, memo, useEffect, useLayoutEffect, useRef, useState } from "react";
import NativeVideo, { VideoProperties as VideoProps } from "./video"; import NativeVideo, { VideoProperties as VideoProps } from "./video";
import { Platform } from "react-native"; import { Platform } from "react-native";
import uuid from "react-native-uuid";
export const playAtom = atom(true); export const playAtom = atom(true);
export const loadAtom = atom(false); export const loadAtom = atom(false);
@ -75,8 +74,6 @@ const privateFullscreen = atom(false);
export const subtitleAtom = atom<Track | null>(null); export const subtitleAtom = atom<Track | null>(null);
let clientId = uuid.v4() as string;
export const Video = memo(function _Video({ export const Video = memo(function _Video({
links, links,
setError, setError,
@ -88,7 +85,6 @@ export const Video = memo(function _Video({
fonts?: Font[]; fonts?: Font[];
} & Partial<VideoProps>) { } & Partial<VideoProps>) {
const ref = useRef<ElementRef<typeof NativeVideo> | null>(null); const ref = useRef<ElementRef<typeof NativeVideo> | null>(null);
const token = useRef<string | null>(null);
const [isPlaying, setPlay] = useAtom(playAtom); const [isPlaying, setPlay] = useAtom(playAtom);
const setLoad = useSetAtom(loadAtom); const setLoad = useSetAtom(loadAtom);
const [source, setSource] = useState<string | null>(null); const [source, setSource] = useState<string | null>(null);
@ -112,13 +108,6 @@ export const Video = memo(function _Video({
setPlay(true); setPlay(true);
}, [mode, links, setLoad, setPrivateProgress, setPublicProgress, setPlay]); }, [mode, links, setLoad, setPrivateProgress, setPublicProgress, setPlay]);
useEffect(() => {
async function run() {
token.current = await getToken();
}
run();
}, [links]);
const volume = useAtomValue(volumeAtom); const volume = useAtomValue(volumeAtom);
const isMuted = useAtomValue(mutedAtom); const isMuted = useAtomValue(mutedAtom);
@ -142,10 +131,6 @@ export const Video = memo(function _Video({
source={{ source={{
uri: source, uri: source,
...links, ...links,
headers: {
Authorization: `Bearer: ${token.current}`,
"X-CLIENT-ID": clientId,
},
}} }}
paused={!isPlaying} paused={!isPlaying}
muted={isMuted} muted={isMuted}
@ -167,16 +152,16 @@ export const Video = memo(function _Video({
selectedTextTrack={ selectedTextTrack={
subtitle subtitle
? { ? {
type: "index", type: "index",
value: subtitle.trackIndex, value: subtitle.trackIndex,
} }
: { type: "disabled" } : { type: "disabled" }
} }
fonts={fonts} fonts={fonts}
onMediaUnsupported={() => { onMediaUnsupported={() => {
if (mode == PlayMode.Direct) setPlayMode(PlayMode.Hls); if (mode == PlayMode.Direct) setPlayMode(PlayMode.Hls);
}} }}
// TODO: textTracks: external subtitles // TODO: textTracks: external subtitles
/> />
); );
}); });

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

@ -31,29 +31,47 @@ declare module "react-native-video" {
export * from "react-native-video"; export * from "react-native-video";
import { Font } from "@kyoo/models"; import { Font, getToken } from "@kyoo/models";
import { IconButton, Menu } from "@kyoo/primitives"; import { IconButton, Menu } from "@kyoo/primitives";
import { ComponentProps, forwardRef } from "react"; import { ComponentProps, forwardRef, useEffect, useRef } from "react";
import { atom, useAtom, useAtomValue, useSetAtom } from "jotai"; import { atom, useAtom, useAtomValue, useSetAtom } from "jotai";
import NativeVideo, { OnLoadData } from "react-native-video"; import NativeVideo, { OnLoadData, VideoProps } from "react-native-video";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { PlayMode, playModeAtom } from "./state"; import { PlayMode, playModeAtom } from "./state";
import uuid from "react-native-uuid";
const infoAtom = atom<OnLoadData | null>(null); const infoAtom = atom<OnLoadData | null>(null);
const videoAtom = atom(0); const videoAtom = atom(0);
const audioAtom = atom(0); const audioAtom = atom(0);
const Video = forwardRef<NativeVideo, ComponentProps<typeof NativeVideo>>(function _NativeVideo( const clientId = uuid.v4() as string;
{ onLoad, ...props },
const Video = forwardRef<NativeVideo, VideoProps>(function _NativeVideo(
{ onLoad, source, ...props },
ref, ref,
) { ) {
const token = useRef<string | null>(null);
const setInfo = useSetAtom(infoAtom); const setInfo = useSetAtom(infoAtom);
const video = useAtomValue(videoAtom); const video = useAtomValue(videoAtom);
const audio = useAtomValue(audioAtom); const audio = useAtomValue(audioAtom);
useEffect(() => {
async function run() {
token.current = await getToken();
}
run();
}, [source]);
return ( return (
<NativeVideo <NativeVideo
ref={ref} ref={ref}
source={{
...source,
headers: {
Authorization: `Bearer: ${token.current}`,
"X-CLIENT-ID": clientId,
}
}}
onLoad={(info) => { onLoad={(info) => {
setInfo(info); setInfo(info);
onLoad?.(info); onLoad?.(info);