From 32fa639d4afddb8fe0bad9eaf1c74cac9489cb9c Mon Sep 17 00:00:00 2001
From: Zoe Roux <zoe.roux@zoriya.dev>
Date: Sat, 15 Jul 2023 19:11:36 +0900
Subject: [PATCH] Add token and client id on the android player

---
 front/apps/mobile/package.json             |  1 +
 front/packages/ui/package.json             |  1 +
 front/packages/ui/src/player/state.tsx     | 22 ++++++++++++++++++++--
 front/packages/ui/src/player/video.web.tsx |  2 +-
 front/yarn.lock                            |  9 +++++++++
 5 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/front/apps/mobile/package.json b/front/apps/mobile/package.json
index 1d9dd8e5..cc7be89c 100644
--- a/front/apps/mobile/package.json
+++ b/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"
 	},
diff --git a/front/packages/ui/package.json b/front/packages/ui/package.json
index 57e1e824..fdd8e71d 100644
--- a/front/packages/ui/package.json
+++ b/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": {
diff --git a/front/packages/ui/src/player/state.tsx b/front/packages/ui/src/player/state.tsx
index ff61d7f9..d1b5ad28 100644
--- a/front/packages/ui/src/player/state.tsx
+++ b/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}
diff --git a/front/packages/ui/src/player/video.web.tsx b/front/packages/ui/src/player/video.web.tsx
index 7658c86d..2b1efcfe 100644
--- a/front/packages/ui/src/player/video.web.tsx
+++ b/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,
diff --git a/front/yarn.lock b/front/yarn.lock
index 08b3ccb2..d91149aa 100644
--- a/front/yarn.lock
+++ b/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"