Merge pull request #34 from piotrpdev/OKO-108-User-Accounts

Author: piotrpdev

backend/src/web.rs

@@ -1,11 +1,18 @@
 pub use app::App;
 pub use app::AppState;
-pub use app::ImageContainer;
 use serde::Deserialize;
 use serde::Serialize;
 
 use crate::CameraSettingNoMeta;
 
+#[derive(Serialize, Deserialize, Clone)]
+pub struct ImageContainer {
+    pub camera_id: i64,
+    pub timestamp: i64,
+    #[serde(with = "serde_bytes")]
+    pub image_bytes: Vec<u8>,
+}
+
 // TODO: Use single shared definition for both camera and backend
 #[derive(Serialize, Deserialize, Debug, Clone)]
 pub enum CameraMessage {

backend/src/web/app.rs

@@ -20,7 +20,6 @@ use opencv::{
     videoio::{VideoWriter, VideoWriterTrait},
 };
 use rust_embed::RustEmbed;
-use serde::{Deserialize, Serialize};
 use sqlx::{sqlite::SqliteConnectOptions, SqlitePool};
 use time::{Duration, OffsetDateTime};
 use tokio::{
@@ -55,7 +54,7 @@ use crate::{
     User, Video,
 };
 
-use super::MdnsChannelMessage;
+use super::{ImageContainer, MdnsChannelMessage};
 
 // TODO: Maybe use `std::future::pending::<()>();` instead of sleeping forever
 
@@ -74,16 +73,6 @@ const EMPTY_TASK_SLEEP_DURATION: tokio::time::Duration = tokio::time::Duration::
 #[folder = "static/"]
 struct EmbeddedAssets;
 
-// ? Maybe move this somewhere better
-// TODO: Probably change to Protobuf or bincode instead of JSON
-#[derive(Serialize, Deserialize, Clone)]
-pub struct ImageContainer {
-    pub camera_id: i64,
-    pub timestamp: i64,
-    #[serde(with = "serde_bytes")]
-    pub image_bytes: Vec<u8>,
-}
-
 pub struct AppState {
     pub images_tx: watch::Sender<ImageContainer>,
     pub video_path: PathBuf,
@@ -669,11 +658,11 @@ async fn handle_socket(
     });
 
     let api_channel = state.api_channel.clone();
+    let sender_mutex_clone = sender_mutex.clone();
     let mut first_received = false;
 
     let mut api_listener_task: JoinHandle<Result<(), Box<dyn std::error::Error + Send + Sync>>> =
         if is_camera {
-            let sender_mutex_clone = sender_mutex.clone();
             tokio::spawn(async move {
                 if let Some(some_camera_settings) = initial_camera_settings {
                     let some_initial_camera_settings = CameraSettingNoMeta {
@@ -757,14 +746,23 @@ async fn handle_socket(
                         #[allow(clippy::single_match)] // will change in the future
                         match api_msg {
                             // TODO: every user task performing this is wasteful, global camera list mutex shared with api would be better
-                            ApiChannelMessage::CameraListChanged(_) => {
+                            ApiChannelMessage::CameraListChanged(change) => {
                                 info!("API channel message received for camera list changed for {who}...");
 
                                 let Some(user_id_some) = user_id else {
                                     error!("Camera list changed but user was not found in auth_session. How is this even possible?");
                                     break;
                                 };
 
+                                if let Err(e) = sender_mutex_clone
+                                    .lock()
+                                    .await
+                                    .send(Message::Text(serde_json::to_string(&change)?))
+                                    .await
+                                {
+                                    error!("Error sending API WebSocket message to {who}: {e:?}");
+                                }
+
                                 let Ok(new_cameras) = Camera::list_accessible_to_user(
                                     &auth_session.backend.db,
                                     user_id_some,

frontend/src/lib/components/CameraAndVideos.svelte

@@ -8,14 +8,28 @@
   import { onDestroy, onMount } from "svelte";
   import * as Table from "$lib/components/ui/table/index.js";
   import { socket } from "$lib/stores/socketStore";
-  import { isImageContainer, type VideoCameraView } from "../../types";
-
-  export let cameraId: number;
-  export let cameraName: string;
+  import {
+    isImageContainer,
+    type ImageContainer,
+    type VideoCameraView,
+  } from "../../types";
 
   let frameCount = 0;
   let imgSrc: string = "";
 
+  export let cameraId: number;
+  export let cameraName: string;
+  export const processImage = (image_bytes: ImageContainer["image_bytes"]) => {
+    frameCount++;
+    const bytes = new Uint8Array(image_bytes);
+    const blob = new Blob([bytes], { type: "image/jpeg" });
+    const url = URL.createObjectURL(blob);
+    if (imgSrc !== "") {
+      URL.revokeObjectURL(imgSrc);
+    }
+    imgSrc = url;
+  };
+
   // Needed to reset the frame count and image source when the camera changes
   $: ((_cameraId) => {
     frameCount = 0;
@@ -37,39 +51,6 @@
       throw new Error("Failed to fetch videos");
     }
   }
-
-  function onMessage(event: MessageEvent) {
-    const data = event.data;
-
-    try {
-      const parsed_msg = JSON.parse(data);
-
-      if (isImageContainer(parsed_msg)) {
-        if (parsed_msg.camera_id !== cameraId) {
-          return;
-        }
-
-        frameCount++;
-        const bytes = new Uint8Array(parsed_msg.image_bytes);
-        const blob = new Blob([bytes], { type: "image/jpeg" });
-        const url = URL.createObjectURL(blob);
-        if (imgSrc !== "") {
-          URL.revokeObjectURL(imgSrc);
-        }
-        imgSrc = url;
-      }
-    } catch (e) {
-      console.error("Failed to parse WebSocket message JSON");
-    }
-  }
-
-  onMount(() => {
-    $socket?.addEventListener("message", onMessage);
-  });
-
-  onDestroy(() => {
-    $socket?.removeEventListener("message", onMessage);
-  });
 </script>
 
 <Card.Root>