Add token and client id on the android player

front/apps/mobile/package.json

@@ -45,6 +45,7 @@
 		"react-native-safe-area-context": "4.5.0",
 		"react-native-screens": "~3.20.0",
 		"react-native-svg": "13.4.0",
+		"react-native-uuid": "^2.0.1",
 		"react-native-video": "^6.0.0-alpha.5",
 		"yoshiki": "1.2.2"
 	},

front/packages/ui/package.json

@@ -10,6 +10,7 @@
 	"devDependencies": {
 		"@shopify/flash-list": "^1.4.1",
 		"@types/react": "^18.0.28",
+		"react-native-uuid": "^2.0.1",
 		"typescript": "^4.9.5"
 	},
 	"peerDependencies": {

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

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

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

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

front/yarn.lock

@@ -2315,6 +2315,7 @@ __metadata:
     "@kyoo/primitives": "workspace:^"
     "@shopify/flash-list": ^1.4.1
     "@types/react": ^18.0.28
+    react-native-uuid: ^2.0.1
     typescript: ^4.9.5
   peerDependencies:
     "@material-symbols/svg-400": "*"
@@ -10345,6 +10346,7 @@ __metadata:
     react-native-screens: ~3.20.0
     react-native-svg: 13.4.0
     react-native-svg-transformer: ^1.0.0
+    react-native-uuid: ^2.0.1
     react-native-video: ^6.0.0-alpha.5
     typescript: ^4.9.5
     yoshiki: 1.2.2
@@ -11758,6 +11760,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-native-uuid@npm:^2.0.1":
+  version: 2.0.1
+  resolution: "react-native-uuid@npm:2.0.1"
+  checksum: 2fae6e2ee6cef108a31ae9d5be661a1947a86f4c6a812c7386b57d970861b364dc887bc4fe3225227aeea7925ccdc24d4478ff30193305abc283eb4a30ee2138
+  languageName: node
+  linkType: hard
+
 "react-native-video@npm:^6.0.0-alpha.5":
   version: 6.0.0-alpha.5
   resolution: "react-native-video@npm:6.0.0-alpha.5"