Add detected video viewer

360tetsu360 · May 4, 2024 · 271c093 · 271c093
1 parent d36457a
commit 271c093
Show file tree

Hide file tree

Showing 5 changed files with 79 additions and 9 deletions.
diff --git a/assets/index.html b/assets/index.html
@@ -24,6 +24,21 @@
                 <button id="reboot" class="button">Reboot</button>
             </div>
         </dialog>
+        <dialog id="video-dialog" class="dialog">
+            <div class="control-panel">
+                <div class="one-line-title">
+                    <p id="video-dialog-title"></p>
+                    <button id="video-dialog-close" class="dialog-close">X</button>
+                </div>
+            </div>
+            <video controls id="videoframe" style="width: 960px;" preload="none"></video>
+            <div class="control-panel">
+                <div class="one-line-sub">
+                    Download
+                    <a id="download" class="button">Download</a>
+                </div>
+            </div>
+        </dialog>
         <div class="left">
             <div class="control-panel">
                 <div class="one-line-sub">
@@ -44,6 +59,10 @@
                     Apply
                     <button id="app-msk" class="button">Apply</button>
                 </div>
+                <div class="one-line-sub">
+                    Clear
+                    <button id="clear-msk" class="button">Clear</button>
+                </div>
             </div>
             <div class="control-panel">
                 <div class="one-line">

diff --git a/assets/script.js b/assets/script.js
@@ -85,11 +85,15 @@ connection.onmessage = function(event) {
             var oneline = document.createElement("div");
             oneline.className = "one-line";
             oneline.textContent = `[${timestamp}] Meteor Detected`;
-            var download = document.createElement("a");
-            download.href = `/download?filename=${record_path}`;
-            download.textContent = "Download";
-            oneline.appendChild(download);
+
             new_item.appendChild(oneline);
+            new_item.onclick = () => {
+                document.getElementById("video-dialog-title").textContent = `[${timestamp}] Meteor Detected`;
+                document.getElementById("videoframe").src = `/view?filename=${record_path}`;
+                document.getElementById("download").href = `/download?filename=${record_path}`;
+                const dialog = document.getElementById("video-dialog");
+                dialog.showModal();
+            };
 
             if (log_box.firstChild) {
                 log_box.insertBefore(new_item, log_box.firstChild);
@@ -139,11 +143,14 @@ connection.onmessage = function(event) {
                 var oneline = document.createElement("div");
                 oneline.className = "one-line";
                 oneline.textContent = `[${timestamp}] Meteor Detected`;
-                var download = document.createElement("a");
-                download.href = `/download?filename=${record_path}`;
-                download.textContent = "Download";
-                oneline.appendChild(download);
                 new_item.appendChild(oneline);
+                new_item.onclick = () => {
+                    document.getElementById("video-dialog-title").textContent = `[${timestamp}] Meteor Detected`;
+                    document.getElementById("videoframe").src = `/view?filename=${record_path}`;
+                    document.getElementById("download").href = `/download?filename=${record_path}`;
+                    const dialog = document.getElementById("video-dialog");
+                    dialog.showModal();
+                };
 
                 if (log_box.firstChild) {
                     log_box.insertBefore(new_item, log_box.firstChild);
@@ -180,6 +187,11 @@ document.getElementById("wifi-dialog-close").onclick = () => {
     dialog.close();
 }
 
+document.getElementById("video-dialog-close").onclick = () => {
+    const dialog = document.getElementById("video-dialog");
+    dialog.close();
+}
+
 document.getElementById("shw_msk").onchange = () => {
     let checked = document.getElementById("shw_msk").checked; 
     var elements = document.getElementsByClassName("grid-item");
@@ -192,6 +204,18 @@ document.getElementById("app-msk").onclick = () => {
     connection.send(grid_state.buffer);
 }
 
+document.getElementById("clear-msk").onclick = () => {
+    for (let row = 0; row < rows; row++) {
+        for (let col = 0; col < columns; col++) {
+            if (grid_state[row * columns + col] === 1) {
+                let grid = document.getElementById(`grid-${row}-${col}`);
+                grid.style.backgroundColor = "rgba(0, 0, 0, 0.1)";
+                grid_state[row * columns + col] = 0;
+            }
+        }
+    }
+}
+
 document.getElementById("det").onchange= () => {
     let checked = document.getElementById("det").checked;
     connection.send(`det,${checked? "on":"off"}`);

diff --git a/assets/style.css b/assets/style.css
@@ -348,4 +348,4 @@ dialog .toggle .slider {
 .styled-input:focus {
     border-color: #3498db;
     outline: none;
-}
+}
diff --git a/atom-skygaze/src/download.rs b/atom-skygaze/src/download.rs
@@ -48,3 +48,28 @@ pub async fn download_file(query: Query<FileQuery>) -> Result<Response<Body>, St
 
     Ok((headers, body).into_response())
 }
+
+pub async fn view_file(query: Query<FileQuery>) -> Result<Response<Body>, StatusCode> {
+    let filename = &query.filename;
+    let file_path = PathBuf::from(format!("/media/mmc/records/detected/{}", filename));
+
+    if !file_path.exists() {
+        return Err(StatusCode::NOT_FOUND);
+    }
+
+    let file = File::open(&file_path)
+        .await
+        .map_err(|_| StatusCode::INTERNAL_SERVER_ERROR)?;
+
+    let stream = ReaderStream::new(file);
+    let body = Body::from_stream(stream);
+
+    let mut headers = HeaderMap::new();
+    headers.insert(
+        header::CONTENT_TYPE,
+        "video/mp4".parse().unwrap(),
+    );
+    headers.insert("Accept-Ranges", "bytes".parse().unwrap());
+
+    Ok((headers, body).into_response())
+}
diff --git a/atom-skygaze/src/main.rs b/atom-skygaze/src/main.rs
@@ -20,6 +20,7 @@ use std::thread;
 use std::{net::SocketAddr, path::PathBuf};
 use tokio::sync::watch;
 use tower_http::services::ServeDir;
+use crate::download::view_file;
 
 mod config;
 mod detection;
@@ -230,6 +231,7 @@ async fn main() {
         .fallback_service(ServeDir::new(assets_dir).append_index_html_on_directories(true))
         .route("/ws", get(handler))
         .route("/download", get(download_file))
+        .route("/view", get(view_file))
         .with_state((rx, app_state_common, atomconf_common, logrx, flag));
 
     // run it with hyper