Fix authorization tokens usage on the android player

front/packages/models/src/login.ts

@@ -24,6 +24,7 @@ import { Account, Token, TokenP, getCurrentApiUrl } from "./accounts";
 import { UserP } from "./resources";
 import { addAccount, getCurrentAccount, removeAccounts, updateAccount } from "./account-internal";
 import { Platform } from "react-native";
+import { useEffect, useRef, useState } from "react";
 
 type Result<A, B> =
 	| { ok: true; value: A; error?: undefined }
@@ -137,6 +138,31 @@ export const getTokenWJ = async (
 
 export const getToken = async (): Promise<string | null> => (await getTokenWJ())[0];
 
+export const useToken = () => {
+	const account = getCurrentAccount();
+	const refresher = useRef<NodeJS.Timeout | null>(null);
+	const [token, setToken] = useState(
+		account ? `${account.token.token_type} ${account.token.access_token}` : null,
+	);
+
+	useEffect(() => {
+		async function run() {
+			const nToken = await getTokenWJ();
+			setToken(nToken[0]);
+			if (refresher.current) clearTimeout(refresher.current);
+			if (nToken[1])
+				refresher.current = setTimeout(run, nToken[1].expire_at.getTime() - Date.now());
+		}
+		run();
+		return () => {
+			if (refresher.current) clearTimeout(refresher.current);
+		};
+	}, [account]);
+
+	if (!token) return null;
+	return token;
+};
+
 export const logout = () => {
 	removeAccounts((x) => x.selected);
 };

front/packages/ui/src/player/video.tsx

@@ -33,7 +33,7 @@ declare module "react-native-video" {
 
 export * from "react-native-video";
 
-import { Audio, Subtitle, getToken } from "@kyoo/models";
+import { Audio, Subtitle, getToken, useToken } from "@kyoo/models";
 import { IconButton, Menu } from "@kyoo/primitives";
 import { ComponentProps, forwardRef, useEffect, useRef } from "react";
 import { atom, useAtom, useAtomValue, useSetAtom } from "jotai";
@@ -67,20 +67,13 @@ const Video = forwardRef<VideoRef, VideoProps>(function Video(
 	ref,
 ) {
 	const { css } = useYoshiki();
-	const token = useRef<string | null>(null);
+	const token = useToken();
 	const setInfo = useSetAtom(infoAtom);
 	const [video, setVideo] = useAtom(videoAtom);
 	const audio = useAtomValue(audioAtom);
 	const subtitle = useAtomValue(subtitleAtom);
 	const mode = useAtomValue(playModeAtom);
 
-	useEffect(() => {
-		async function run() {
-			token.current = await getToken();
-		}
-		run();
-	}, [source]);
-
 	useEffect(() => {
 		if (mode === PlayMode.Hls) setVideo(-1);
 	}, [mode, setVideo]);
@@ -92,7 +85,7 @@ const Video = forwardRef<VideoRef, VideoProps>(function Video(
 				source={{
 					...source,
 					headers: {
-						Authorization: `Bearer: ${token.current}`,
+						...(token ? { Authorization: token } : {}),
 						"X-CLIENT-ID": clientId,
 					},
 				}}

front/packages/ui/src/player/video.web.tsx

@@ -70,7 +70,7 @@ const initHls = (): Hls => {
 	hls = new Hls({
 		xhrSetup: async (xhr) => {
 			const token = await getToken();
-			if (token) xhr.setRequestHeader("Authorization", `Bearer: ${token}`);
+			if (token) xhr.setRequestHeader("Authorization", token);
 			xhr.setRequestHeader("X-CLIENT-ID", client_id);
 		},
 		autoStartLoad: false,