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

Add keyboard input for the player on the web

Browse Source
This commit is contained in:
Zoe Roux 2022-12-22 14:45:06 +09:00
parent 7a1bde1b73
commit 7315d5f5a1
3 changed files with 11 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
front/packages/models/src/query.tsx
View File

@ -41,6 +41,7 @@ const queryFn = async <Data,>(
: typeof window === "undefined" : typeof window === "undefined"
? process.env.KYOO_URL ?? "http://localhost:5000" ? process.env.KYOO_URL ?? "http://localhost:5000"
: "/api"; : "/api";
console.log(process.env.PUBLIC_BACK_URL)
if (!kyooUrl) console.error("Kyoo's url is not defined."); if (!kyooUrl) console.error("Kyoo's url is not defined.");
let resp; let resp;

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

@ -81,7 +81,7 @@ export const Player: QueryPage<{ slug: string }> = ({ slug }) => {
// const { playerRef, videoProps, onVideoClick } = useVideoController(data?.link); // const { playerRef, videoProps, onVideoClick } = useVideoController(data?.link);
// useSubtitleController(playerRef, data?.subtitles, data?.fonts); // useSubtitleController(playerRef, data?.subtitles, data?.fonts);
// useVideoKeyboard(data?.subtitles, data?.fonts, previous, next); useVideoKeyboard(data?.subtitles, data?.fonts, previous, next);
const router = useRouter(); const router = useRouter();
const [isFullscreen, setFullscreen] = useAtom(fullscreenAtom); const [isFullscreen, setFullscreen] = useAtom(fullscreenAtom);

16
front/packages/ui/src/player/keyboard.tsx
View File

@ -43,6 +43,7 @@ type Action =
| { type: "subtitle"; subtitles: Track[]; fonts: Font[] }; | { type: "subtitle"; subtitles: Track[]; fonts: Font[] };
export const reducerAtom = atom<null, Action>(null, (get, set, action) => { export const reducerAtom = atom<null, Action>(null, (get, set, action) => {
const duration = get(durationAtom);
switch (action.type) { switch (action.type) {
case "play": case "play":
set(playAtom, !get(playAtom)); set(playAtom, !get(playAtom));
@ -54,16 +55,17 @@ export const reducerAtom = atom<null, Action>(null, (get, set, action) => {
set(fullscreenAtom, !get(fullscreenAtom)); set(fullscreenAtom, !get(fullscreenAtom));
break; break;
case "seek": case "seek":
set(progressAtom, get(progressAtom) + action.value); if (duration)
set(progressAtom, Math.max(0, Math.min(get(progressAtom) + action.value, duration)));
break; break;
case "seekTo": case "seekTo":
set(progressAtom, action.value); set(progressAtom, action.value);
break; break;
case "seekPercent": case "seekPercent":
set(progressAtom, (get(durationAtom) * action.value) / 100); if (duration) set(progressAtom, (duration * action.value) / 100);
break; break;
case "volume": case "volume":
set(volumeAtom, get(volumeAtom) + action.value); set(volumeAtom, Math.max(0, Math.min(get(volumeAtom) + action.value, 100)));
break; break;
case "subtitle": case "subtitle":
const subtitle = get(subtitleAtom); const subtitle = get(subtitleAtom);
@ -108,17 +110,17 @@ export const useVideoKeyboard = (
break; break;
case "ArrowLeft": case "ArrowLeft":
reducer({ type: "seek", value: -5 }); reducer({ type: "seek", value: -5000 });
break; break;
case "ArrowRight": case "ArrowRight":
reducer({ type: "seek", value: +5 }); reducer({ type: "seek", value: +5000 });
break; break;
case "j": case "j":
reducer({ type: "seek", value: -10 }); reducer({ type: "seek", value: -10_000 });
break; break;
case "l": case "l":
reducer({ type: "seek", value: +10 }); reducer({ type: "seek", value: +10_000 });
break; break;
case "ArrowUp": case "ArrowUp":