WIP

component/video/camera.tsx

@@ -1,6 +1,12 @@
+import { ApolloClient, useApolloClient } from "@apollo/client";
 import { useIsFocused } from "@react-navigation/native";
-import React, { useCallback, useRef, useState } from "react";
+import * as gql from "railbird-gql";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 import { Button, StyleSheet, Text, View } from "react-native";
+import Upload, {
+	CompletedData,
+	ErrorData,
+} from "react-native-background-upload";
 import {
 	Camera,
 	CameraRuntimeError,
@@ -14,16 +20,78 @@ import {
 import { RecordingButton } from "./capture-button";
 import { useIsForeground } from "./is-foreground";
 
+type Dictionary<KeyType extends string | number | symbol, ValueType> = {
+	[key in KeyType]: ValueType;
+};
+
+class StreamUploadManager<TCacheShape> {
+	client: ApolloClient<TCacheShape>;
+	videoId: number;
+	nextUploadIdToRequest: number;
+	highestUploadLinkObtained: number;
+	prefetchedUploadLinks: Dictionary<number, string>;
+
+	constructor(client: ApolloClient<TCacheShape>, streamId: number) {
+		this.client = client;
+		this.videoId = streamId;
+		this.highestUploadLinkObtained = -1;
+		this.prefetchedUploadLinks = {};
+	}
+
+	async uploadChunk({ filepath, index }: { filepath: string; index: number }) {
+		const uploadUrl = await this.getUploadLink(index);
+		const uploadId = await Upload.startUpload({
+			url: uploadUrl,
+			path: filepath,
+			method: "PUT",
+		}).catch((err) => console.log("Upload error!", err));
+		// @ts-ignore
+		Upload.addListener("error", uploadId, (data: ErrorData) => {
+			console.log(`Error on: ${data}% ${index}%`);
+		});
+		// @ts-ignore
+		Upload.addListener("completed", uploadId, (data: CompletedData) => {
+			console.log(`Chunk ${index} completed ${JSON.stringify(data)}`);
+		});
+	}
+
+	async getUploadLink(chunkId: number): Promise<string> {
+		return this.requestUploadLink(chunkId);
+	}
+
+	async requestUploadLink(chunkId: number): Promise<string> {
+		console.log(`Requesting ${chunkId}`);
+		const result = await this.client.mutate({
+			mutation: gql.GetUploadLinkDocument,
+			variables: { videoId: this.videoId, chunkIndex: chunkId },
+		});
+		console.log(JSON.stringify(result.data));
+		return result.data.getUploadLink.uploadUrl;
+	}
+}
+
 export default function CameraScreen({
 	route,
 	navigation,
 }): React.ReactElement {
-	// TODO: #73 Does this need to be passed to Camera component?
-	// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
-	const { gameType, tableSize, tags, location } = route.params;
-	// LOG for params -- Remove when no longer needed
-	// Note: camelCased value being passed, change on record.tsx if you want a different value format
-	console.log(gameType, tableSize, tags, location);
+	const apolloClient = useApolloClient();
+	const [createUpload, { data, loading, error }] =
+		gql.useCreateUploadStreamMutation();
+
+	const [uploadManager, setUploadManager] = useState(null);
+
+	useEffect(() => {
+		if (
+			data &&
+			data.createUploadStream &&
+			data.createUploadStream.videoId &&
+			!uploadManager
+		) {
+			const newVideoId = data.createUploadStream.videoId;
+			console.log(`VideoId: ${newVideoId}`);
+			setUploadManager(new StreamUploadManager(apolloClient, newVideoId));
+		}
+	}, [data, uploadManager]);
 
 	const camera = useRef<Camera>(null);
 	const { hasPermission, requestPermission } = useCameraPermission();
@@ -41,15 +109,22 @@ export default function CameraScreen({
 	const onInitialized = useCallback(() => {
 		console.log("Camera initialized!");
 		setIsCameraInitialized(true);
+		createUpload({ variables: { videoName: "Test" } });
 	}, []);
 
 	const onMediaCaptured = useCallback((media: PhotoFile | VideoFile) => {
 		console.log(`Media captured! ${JSON.stringify(media)}`);
 	}, []);
 
-	const onVideoChunkReady = useCallback((event) => {
-		console.log(`Chunk ready in react-native`, event.nativeEvent);
-	}, []);
+	const onVideoChunkReady = useCallback(
+		(event) => {
+			console.log(
+				`Chunk ready in react-native ${JSON.stringify(event.nativeEvent)}`,
+			);
+			uploadManager.uploadChunk(event.nativeEvent);
+		},
+		[uploadManager],
+	);
 
 	if (!hasPermission) {
 		requestPermission();
@@ -60,15 +135,14 @@ export default function CameraScreen({
 	const format = useCameraFormat(device, [
 		{ videoResolution: { width: 3048, height: 2160 } },
 		{ fps: 60 },
-	]); // this sets as a target
+	]);
 
-	//Orientation detection
+	// TODO(#60): setOrientation should be called when changes are detected
 	const [orientation, setOrientation] = useState<Orientation>("portrait");
 
 	const toggleOrientation = () => {
-		setOrientation(
-			(currentOrientation) =>
-				currentOrientation === "landscape-left" ? "portrait" : "landscape-left", // Can adjust this and the type to match what we want
+		setOrientation((currentOrientation) =>
+			currentOrientation === "landscape-left" ? "portrait" : "landscape-left",
 		);
 	};
 
@@ -94,7 +168,7 @@ export default function CameraScreen({
 					// @ts-ignore
 					onVideoChunkReady={onVideoChunkReady}
 					video={true}
-					orientation={orientation} // TODO: #60
+					orientation={orientation}
 					isActive={isActive}
 				/>
 				<View