Allow downloaded items to be played

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,
 			)}
 		>
 			<P {...css({ textAlign: "center" }, "text")}>{text}</P>

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
 		}
 	}
 }

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 (
 		<PressableFeedback
-			onPress={() => play?.()}
+			onPress={() => play?.(router)}
 			{...css(
 				{
 					alignItems: "center",

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;
 };

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: