Merge pull request #357 from Northeastern-Electric-Racing/Uploadable-Playbackable-Videos

Uploadable playbackable videos

Author: Peyton-McKee

.gitignore

@@ -5,6 +5,7 @@
 **/.env
 scylla-server-typescript/src/prisma/mydatabase.db
 scylla-server-typescript/src/prisma/mydatabase.db-journal
+scylla-server/files
 
 # Xcode
 #

angular-client/src/api/urls.ts

@@ -23,6 +23,11 @@ const getAllRuns = () => `${baseURL}/runs`;
 const getLatestRun = () => `${baseURL}/runs/latest`;
 const startNewRun = () => `${baseURL}/runs/new`;
 
+/* Videos */
+const getAllVideos = () => `${baseURL}/videos`;
+const getVideo = (fileName: string) => `${getAllVideos()}/${encodeURIComponent(fileName)}`;
+const updateVideos = () => `${getAllVideos()}/update`;
+
 export const urls = {
   getAllDatatypes,
 
@@ -34,5 +39,9 @@ export const urls = {
   getAllRuns,
   getLatestRun,
   getRunById,
-  startNewRun
+  startNewRun,
+
+  getAllVideos,
+  getVideo,
+  updateVideos
 };

angular-client/src/api/video.api.ts

@@ -0,0 +1,17 @@
+import { urls } from './urls';
+
+/**
+ * Fetches all videos from the server
+ * @returns A promise containing the response from the server
+ */
+export const getAllVideos = (): Promise<Response> => {
+  return fetch(urls.getAllVideos());
+};
+
+/**
+ * Requests Scylla to update its videos
+ * @returns A promise containing the response from scylla
+ */
+export const updateVideos = (): Promise<Response> => {
+  return fetch(urls.updateVideos(), { method: 'POST' });
+};

angular-client/src/pages/camera-page/camera-page.component.css

@@ -0,0 +1,18 @@
+.background {
+  position: relative;
+}
+
+.top-right {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  display: flex;
+  gap: 10px; /* Adds spacing between the elements */
+  align-items: center; /* Aligns elements vertically */
+  z-index: 10;
+}
+
+.video-container {
+  width: 100%;
+  height: 90vh;
+}

angular-client/src/pages/camera-page/camera-page.component.html

@@ -1,5 +1,28 @@
 @if (this.urlAvailable) {
-  <video #remoteVideo controls autoplay muted style="width: 100%; height: 90vh"></video>
+  <div class="background">
+    <div class="top-right">
+      <p-select
+        [options]="videoUrls"
+        [(ngModel)]="selectedVideoName"
+        placeholder="Select a Video"
+        (onChange)="onDropdownChange($event)"
+        [style]="{ padding: '5px' }"
+      />
+
+      <argos-button label="Update Videos" [onClick]="onUpdateVideosPressed" class="top-right-button" />
+    </div>
+
+    <div class="video-container">
+      @if (this.liveStream) {
+        <video #remoteVideo controls autoplay muted style="width: 100%; height: 90vh"></video>
+      } @else {
+        <video #playbackVideo controls autoplay muted style="width: 100%; height: 90vh">
+          <source [src]="playbackVideoUrl" type="video/mp4" />
+          Your browser does not support the video tag.
+        </video>
+      }
+    </div>
+  </div>
 } @else {
   <div style="display: flex; justify-content: center; align-items: center; height: 100%">
     <typography content="Camera Not Reachable" variant="xx-large-title" additionalStyles="color: red" />

angular-client/src/pages/camera-page/camera-page.component.spec.ts

@@ -1,33 +1,95 @@
-import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
+import { Component, ElementRef, inject, OnInit, ViewChild } from '@angular/core';
+import { MessageService } from 'primeng/api';
+import { SelectChangeEvent } from 'primeng/select';
+import { urls } from 'src/api/urls';
+import { getAllVideos, updateVideos } from 'src/api/video.api';
+import APIService from 'src/services/api.service';
 import MediaMTXWebRTCReader from 'src/utils/MediaMTXReader';
 @Component({
   selector: 'camera-page',
   templateUrl: './camera-page.component.html',
   styleUrl: './camera-page.component.css'
 })
 export class CameraPageComponent implements OnInit {
+  private serverService = inject(APIService);
+  private messageService = inject(MessageService);
+
   url = 'http://192.168.100.11:8889/frontcam/';
   urlAvailable = false;
+  liveStream = true;
+
+  selectedVideoName: string = 'Live Stream';
+  playbackVideoUrl?: string;
+  videoUrls: string[] = ['Live Stream'];
+  videoUrlsIsLoading: boolean = true;
 
   @ViewChild('remoteVideo') remoteVideo?: ElementRef<HTMLVideoElement>;
+  @ViewChild('playbackVideo', { static: false }) playbackVideoRef!: ElementRef<HTMLVideoElement>;
 
   async ngOnInit(): Promise<void> {
     this.urlAvailable = await this.checkConnection();
-    console.log(window.location.href);
     new MediaMTXWebRTCReader({
       url: new URL('whep', this.url),
       onError: console.log,
       onTrack: (e) => {
-        console.log(e);
         if (this.remoteVideo) {
           [this.remoteVideo.nativeElement.srcObject] = e.streams;
         }
       }
     });
+
+    const videosQueryResponse = this.serverService.query<string[]>(() => getAllVideos(), { queryKey: ['videos'] });
+    videosQueryResponse.error.subscribe((error) => {
+      error && this.messageService.add({ severity: 'error', summary: 'Error', detail: error.message });
+    });
+    videosQueryResponse.isLoading.subscribe((isLoading) => {
+      this.videoUrlsIsLoading = isLoading;
+    });
+    videosQueryResponse.data.subscribe((data) => {
+      if (data) this.videoUrls = data.concat('Live Stream');
+    });
   }
 
   checkConnection = (): Promise<boolean> =>
     fetch(this.url, { method: 'HEAD' })
       .then(() => true)
       .catch(() => false);
+
+  onVideoSelected = (videoName: string) => {
+    this.playbackVideoUrl = urls.getVideo(videoName);
+    this.selectedVideoName = videoName;
+    this.liveStream = false;
+    // Wait for Angular to update the DOM
+    setTimeout(() => {
+      const videoEl = this.playbackVideoRef.nativeElement;
+      videoEl.load(); // This reloads the new <source> inside the <video>
+      videoEl.play();
+    });
+  };
+
+  onLiveStreamSelected = () => {
+    this.selectedVideoName = 'Live Stream';
+    this.playbackVideoUrl = undefined;
+    this.liveStream = true;
+  };
+
+  onDropdownChange = (event: SelectChangeEvent) => {
+    if (event.value === 'Live Stream') {
+      this.onLiveStreamSelected();
+    } else {
+      this.onVideoSelected(event.value);
+    }
+  };
+
+  onUpdateVideosPressed = () => {
+    const updateVideoQueryResponse = this.serverService.query(() => updateVideos(), { invalidates: ['videos'] });
+    this.messageService.add({
+      severity: 'success',
+      summary: 'Update Videos',
+      detail: 'A request was made for scylla to update its videos, this may take a minute, please refresh in a moment'
+    });
+    updateVideoQueryResponse.error.subscribe((error) => {
+      error && this.messageService.add({ severity: 'error', summary: 'Error', detail: error.message });
+    });
+  };
 }

angular-client/src/pages/camera-page/camera-page.component.ts

@@ -6,18 +6,20 @@ use axum_macros::debug_handler;
 use chrono::DateTime;
 use protobuf::CodedInputStream;
 use rangemap::RangeInclusiveMap;
-use tokio::sync::mpsc;
+use tokio::{fs, sync::mpsc};
 use tracing::{debug, info, trace, warn};
 
 use crate::{
     error::ScyllaError, proto::playback_data, services::run_service, ClientData, PoolHandle,
 };
 
-/// Inserts a file using http multipart
+use super::OutputDirectory;
+
+/// Inserts a logger file using http multipart
 /// This file is parsed and clientdata values are extracted, the run ID of each variable is inferred, and then data is batch uploaded
 // super cool: adding this tag tells you what variable is misbehaving in cases of axum Send+Sync Handler fails
 #[debug_handler]
-pub async fn insert_file(
+pub async fn insert_logger_file(
     State(pool): State<PoolHandle>,
     Extension(batcher): Extension<mpsc::Sender<Vec<ClientData>>>,
     mut multipart: Multipart,
@@ -50,7 +52,7 @@ pub async fn insert_file(
     while let Ok(Some(field)) = multipart.next_field().await {
         // round up all of the protobuf segments as a giant list
         let Ok(data) = field.bytes().await else {
-            warn!("Could not decode file insert, perhaps it was interrupted!");
+            warn!("Could not decode logger file insert, perhaps it was interrupted!");
             continue;
         };
         let mut count_bad_run = 0usize;
@@ -91,9 +93,38 @@ pub async fn insert_file(
             count_bad_run
         );
         if let Err(err) = batcher.send(insertable_data).await {
-            warn!("Error sending file insert data to batcher! {}", err);
+            warn!("Error sending logger file insert data to batcher! {}", err);
         };
     }
-    info!("Finished file insert request!");
+    info!("Finished logger file insert request!");
     Ok("Successfully sent all to batcher!".to_string())
 }
+
+/// Writes the files in the multipart to a file on the server named with the multipart file name
+pub async fn insert_file(
+    Extension(output_directory): Extension<OutputDirectory>,
+    mut multipart: Multipart,
+) -> Result<String, ScyllaError> {
+    while let Ok(Some(field)) = multipart.next_field().await {
+        let name = field.name().map(|s| s.to_string());
+
+        let Ok(data) = field.bytes().await else {
+            warn!("Could not decode file insert");
+            continue;
+        };
+
+        let Some(name) = name else {
+            warn!("Could not get name");
+            continue;
+        };
+
+        info!("Inserting file: {}", name);
+
+        fs::write(format!("{}/{}", output_directory.0, name), data)
+            .await
+            .map_err(|e| ScyllaError::FileError(format!("Failed to write file {}", e)))?;
+    }
+
+    info!("Finished file insert request!");
+    Ok("Successfully wrote data to files".to_string())
+}

scylla-server/src/controllers/file_insertion_controller.rs

@@ -6,3 +6,10 @@ pub mod data_type_controller;
 pub mod run_controller;
 
 pub mod file_insertion_controller;
+pub mod video_streamer_controller;
+
+#[derive(Clone)]
+pub struct VideoSuffix(pub String);
+
+#[derive(Clone)]
+pub struct OutputDirectory(pub String);