From 213d5b74b552cbc6b7758de57d4d31bc92baaedd Mon Sep 17 00:00:00 2001 From: Zoe Roux Date: Mon, 18 Dec 2023 22:29:59 +0100 Subject: [PATCH] Allow downloaded items to be played --- front/packages/primitives/src/button.tsx | 4 ++-- front/packages/ui/package.json | 7 +++++- front/packages/ui/src/downloads/page.tsx | 4 +++- front/packages/ui/src/downloads/state.tsx | 27 ++++++++++++++++++----- front/yarn.lock | 8 ++++++- 5 files changed, 39 insertions(+), 11 deletions(-) diff --git a/front/packages/primitives/src/button.tsx b/front/packages/primitives/src/button.tsx index d38cca8d..444ffe95 100644 --- a/front/packages/primitives/src/button.tsx +++ b/front/packages/primitives/src/button.tsx @@ -35,6 +35,7 @@ export const Button = ({ {...css( { flexGrow: 0, + overflow: "hidden", p: ts(0.5), borderRadius: ts(5), borderColor: (theme) => theme.accent, @@ -44,8 +45,7 @@ export const Button = ({ text: { color: (theme: Theme) => theme.colors.white }, }, }, - // @ts-ignore ?? - props, + props as any, )} >

{text}

diff --git a/front/packages/ui/package.json b/front/packages/ui/package.json index 63a747ce..d7a662d0 100644 --- a/front/packages/ui/package.json +++ b/front/packages/ui/package.json @@ -20,6 +20,7 @@ "@tanstack/react-query": "*", "expo-file-system": "*", "expo-linear-gradient": "*", + "expo-router": "*", "i18next": "*", "moti": "*", "react": "*", @@ -31,11 +32,15 @@ }, "optionalDependencies": { "@kesha-antonov/react-native-background-downloader": "^2.10.0", - "expo-file-system": "^15.6.0" + "expo-file-system": "^15.6.0", + "expo-router": "^2.0.14" }, "peerDependenciesMeta": { "@kesha-antonov/react-native-background-downloader": { "optional": true + }, + "expo-router": { + "optional": true } } } diff --git a/front/packages/ui/src/downloads/page.tsx b/front/packages/ui/src/downloads/page.tsx index 9eda0808..ff31a3db 100644 --- a/front/packages/ui/src/downloads/page.tsx +++ b/front/packages/ui/src/downloads/page.tsx @@ -45,6 +45,7 @@ import DownloadForOffline from "@material-symbols/svg-400/rounded/download_for_o import Downloading from "@material-symbols/svg-400/rounded/downloading.svg"; import Error from "@material-symbols/svg-400/rounded/error.svg"; import NotStarted from "@material-symbols/svg-400/rounded/not_started.svg"; +import { useRouter } from "expo-router"; const DownloadedItem = ({ name, @@ -62,11 +63,12 @@ const DownloadedItem = ({ }) => { const { css } = useYoshiki(); const { t } = useTranslation(); + const router = useRouter(); const { error, status, pause, resume, remove, play } = useAtomValue(statusAtom); return ( play?.()} + onPress={() => play?.(router)} {...css( { alignItems: "center", diff --git a/front/packages/ui/src/downloads/state.tsx b/front/packages/ui/src/downloads/state.tsx index 715d7bc1..3f4b11a8 100644 --- a/front/packages/ui/src/downloads/state.tsx +++ b/front/packages/ui/src/downloads/state.tsx @@ -36,6 +36,8 @@ import { atom, useSetAtom, PrimitiveAtom, useStore } from "jotai"; import { getCurrentAccount, storage } from "@kyoo/models/src/account-internal"; import { ReactNode, useEffect } from "react"; import { Platform, ToastAndroid } from "react-native"; +import { useQueryClient } from "@tanstack/react-query"; +import { Router } from "expo-router/build/types"; export type State = { status: "DOWNLOADING" | "PAUSED" | "DONE" | "FAILED" | "STOPPED"; @@ -46,7 +48,7 @@ export type State = { pause: (() => void) | null; resume: (() => void) | null; remove: () => void; - play: () => void; + play: (router: Router) => void; }; export const downloadAtom = atom< @@ -94,8 +96,7 @@ const setupDownloadTask = ( store.set(downloadAtom, (x) => x.filter((y) => y.data.id !== task.id)); }, play: () => { - // TODO: set useQuery cache - // TODO: move to the play page. + ToastAndroid.show("The file has not finished downloading", ToastAndroid.LONG); }, } as State); @@ -188,6 +189,7 @@ export const useDownloader = () => { export const DownloadProvider = ({ children }: { children: ReactNode }) => { const store = useStore(); + const queryClient = useQueryClient(); useEffect(() => { async function run() { @@ -210,8 +212,21 @@ export const DownloadProvider = ({ children }: { children: ReactNode }) => { availableSize: dl.state.availableSize, pause: null, resume: null, - play: () => { - // TODO: setup this + play: (router: Router) => { + dl.data.links.direct = dl.path; + queryClient.setQueryData( + toQueryKey(Player.query(dl.data.kind, dl.data.slug)), + dl.data, + ); + queryClient.setQueryData( + toQueryKey(Player.infoQuery(dl.data.kind, dl.data.slug)), + dl.info, + ); + router.push( + dl.data.kind === "episode" + ? { pathname: "/watch/[slug]", params: { slug: dl.data.slug } } + : { pathname: "/movie/[slug]/watch", params: { slug: dl.data.slug } }, + ); }, remove: () => { deleteAsync(dl.path); @@ -228,7 +243,7 @@ export const DownloadProvider = ({ children }: { children: ReactNode }) => { RNBackgroundDownloader.ensureDownloadsAreRunning(); } run(); - }, [store]); + }, [store, queryClient]); return children; }; diff --git a/front/yarn.lock b/front/yarn.lock index ac017f68..597ae40a 100644 --- a/front/yarn.lock +++ b/front/yarn.lock @@ -2950,6 +2950,7 @@ __metadata: "@shopify/flash-list": ^1.6.3 "@types/react": 18.2.39 expo-file-system: ^15.6.0 + expo-router: ^2.0.14 react-native-uuid: ^2.0.1 typescript: ^5.3.2 peerDependencies: @@ -2959,6 +2960,7 @@ __metadata: "@tanstack/react-query": "*" expo-file-system: "*" expo-linear-gradient: "*" + expo-router: "*" i18next: "*" moti: "*" react: "*" @@ -2972,9 +2974,13 @@ __metadata: optional: true expo-file-system: optional: true + expo-router: + optional: true peerDependenciesMeta: "@kesha-antonov/react-native-background-downloader": optional: true + expo-router: + optional: true languageName: unknown linkType: soft @@ -8088,7 +8094,7 @@ __metadata: languageName: node linkType: hard -"expo-router@npm:2.0.14": +"expo-router@npm:2.0.14, expo-router@npm:^2.0.14": version: 2.0.14 resolution: "expo-router@npm:2.0.14" dependencies: