small cleanup and some custom video controls

5 files changed, 142 insertions, 82 deletions

diff --git a/server/src/routes/ui/style/js-player.css b/server/src/routes/ui/style/js-player.css
new file mode 100644
index 0000000..65fb770
--- /dev/null
+++ b/server/src/routes/ui/style/js-player.css
@@ -0,0 +1,22 @@
+/*
+    This file is part of jellything (https://codeberg.org/metamuffin/jellything)
+    which is licensed under the GNU Affero General Public License (version 3); see /COPYING.
+    Copyright (C) 2023 metamuffin <metamuffin.org>
+*/
+.js-player .controls {
+    position: absolute;
+    bottom: 0px;
+    left: 0px;
+    width: 100%;
+    height: 50px;
+    background-color: #1d1d1d99;
+    transition: opacity 0.2s;
+}
+
+.js-player .controls button {
+    padding: 0px;
+    width: 50px;
+    height: 100%;
+    border: none;
+    background-color: #ffffff10;
+}
diff --git a/server/src/routes/ui/style/js-player.js b/server/src/routes/ui/style/js-player.js
new file mode 100644
index 0000000..5f05c7e
--- /dev/null
+++ b/server/src/routes/ui/style/js-player.js
@@ -0,0 +1,75 @@
+/*
+    This file is part of jellything (https://codeberg.org/metamuffin/jellything)
+    which is licensed under the GNU Affero General Public License (version 3); see /COPYING.
+    Copyright (C) 2023 metamuffin <metamuffin.org>
+*/
+
+globalThis.addEventListener("load", () => {
+    for (const e of document.getElementsByTagName("video"))
+        patch_video(e)
+})
+
+function patch_video(e) {
+    // move the video to a div
+    const d = document.createElement("div")
+    const p = e.parentElement
+    p.removeChild(e)
+    d.appendChild(e)
+    p.prepend(d)
+
+    e.removeAttribute("controls")
+    d.classList.add("js-player")
+
+    const controls = document.createElement("div")
+    controls.classList.add("controls")
+
+    const pause_button = document.createElement("button")
+    pause_button.textContent = "|>"
+    const fullscreen_button = document.createElement("button")
+    fullscreen_button.style.float = "right"
+    fullscreen_button.textContent = "X"
+
+    controls.append(pause_button, fullscreen_button)
+    d.append(controls)
+
+    e.onplay = () => {
+        pause_button.textContent = "..."
+    }
+    e.onwaiting = () => {
+        pause_button.textContent = "..."
+    }
+    e.onplaying = () => {
+        pause_button.textContent = "||"
+    }
+    e.onpause = () => {
+        pause_button.textContent = "|>"
+    }
+
+    const toggle_playing = () => e.paused ? e.play() : e.pause()
+
+    mouse_idle(e, 1000, idle => {
+        controls.style.opacity = idle ? 0 : 1
+        e.style.cursor = idle ? "none" : "default"
+    })
+
+    e.addEventListener("click", toggle_playing)
+    pause_button.addEventListener("click", toggle_playing)
+    fullscreen_button.addEventListener("click", () => document.body.requestFullscreen())
+}
+
+function mouse_idle(e, timeout, cb) {
+    let ct;
+    let idle = false
+    e.onmouseleave = () => { clearTimeout(ct) }
+    e.onmousemove = () => {
+        clearTimeout(ct)
+        if (idle) {
+            idle = false
+            cb(idle)
+        }
+        ct = setTimeout(() => {
+            idle = true
+            cb(idle)
+        }, timeout)
+    }
+}
diff --git a/server/src/routes/ui/style/mod.rs b/server/src/routes/ui/style/mod.rs
index 93b6708..e1ba17b 100644
--- a/server/src/routes/ui/style/mod.rs
+++ b/server/src/routes/ui/style/mod.rs
@@ -5,86 +5,48 @@
     Copyright (C) 2023 tpart
 */
 use rocket::{get, http::ContentType};
-use std::{
-    fs::{read_to_string, File},
-    io::Read,
-    path::PathBuf,
-    str::FromStr,
-};
 
-fn css_bundle() -> String {
-    if cfg!(debug_assertions) {
-        [
-            "layout.css",
-            "player.css",
-            "itempage.css",
-            "directorypage.css",
-            "forms.css",
-        ]
-        .into_iter()
-        .map(|n| {
-            read_to_string(
-                PathBuf::from_str(file!())
-                    .unwrap()
-                    .parent()
+macro_rules! concat_files {
+    ($($files:literal),*) => {{
+        #[cfg(debug_assertions)]
+        {
+            use std::{fs::read_to_string, path::PathBuf, str::FromStr};
+            [ $($files),* ]
+                .into_iter()
+                .map(|n| {
+                    read_to_string(
+                        PathBuf::from_str(file!())
+                            .unwrap()
+                            .parent()
+                            .unwrap()
+                            .join(n),
+                    )
                     .unwrap()
-                    .join(n),
-            )
-            .unwrap()
-        })
-        .collect::<Vec<_>>()
-        .join("\n")
-    } else {
-        concat!(
-            include_str!("layout.css"),
-            include_str!("player.css"),
-            include_str!("itempage.css"),
-            include_str!("directorypage.css"),
-            include_str!("forms.css")
-        )
-        .to_string()
-    }
+                })
+                .collect::<Vec<_>>()
+                .join("\n")
+        }
+        #[cfg(not(debug_assertions))]
+        concat!($(include_str!($files)),*).to_string()
+    }};
 }
 
-fn font_bundle() -> Vec<u8> {
-    if cfg!(debug_assertions) {
-        let mut woff = Vec::new();
-
-        File::open(
-            PathBuf::from_str(file!())
-                .unwrap()
-                .parent()
-                .unwrap()
-                .join("cantarell.woff2"),
-        )
-        .unwrap()
-        .read_to_end(&mut woff)
-        .unwrap();
-        woff
-    } else {
-        include_bytes!("cantarell.woff2").to_vec()
-    }
+fn css_bundle() -> String {
+    concat_files!(
+        "layout.css",
+        "player.css",
+        "itempage.css",
+        "directorypage.css",
+        "js-player.css",
+        "forms.css"
+    )
 }
 
 fn js_bundle() -> String {
-    if cfg!(debug_assertions) {
-        ["transition.js"]
-            .into_iter()
-            .map(|n| {
-                read_to_string(
-                    PathBuf::from_str(file!())
-                        .unwrap()
-                        .parent()
-                        .unwrap()
-                        .join(n),
-                )
-                .unwrap()
-            })
-            .collect::<Vec<_>>()
-            .join("\n")
-    } else {
-        include_str!("transition.js").to_string()
-    }
+    concat_files!(
+        // "transition.js",
+        "js-player.js"
+    )
 }
 
 #[get("/assets/style.css")]
@@ -93,8 +55,8 @@ pub fn r_assets_style() -> (ContentType, String) {
 }
 
 #[get("/assets/cantarell.woff2")]
-pub fn r_assets_font() -> (ContentType, Vec<u8>) {
-    (ContentType::WOFF2, font_bundle())
+pub fn r_assets_font() -> (ContentType, &'static [u8]) {
+    (ContentType::WOFF2, include_bytes!("cantarell.woff2"))
 }
 
 #[get("/assets/bundle.js")]
diff --git a/server/src/routes/ui/style/player.css b/server/src/routes/ui/style/player.css
index bd65a4b..eb1a0a0 100644
--- a/server/src/routes/ui/style/player.css
+++ b/server/src/routes/ui/style/player.css
@@ -98,4 +98,5 @@ fieldset label:hover {
 .player video {
     width: 100vw;
     height: 100vh;
+    background-color: black;
 }
diff --git a/server/src/routes/ui/style/transition.js b/server/src/routes/ui/style/transition.js
index df09277..7d39176 100644
--- a/server/src/routes/ui/style/transition.js
+++ b/server/src/routes/ui/style/transition.js
@@ -6,14 +6,14 @@
 /// <reference lib="dom" />
 
 const duration = 0.2
-// globalThis.addEventListener("load", () => {
-//     patch_page()
-// })
+globalThis.addEventListener("load", () => {
+    patch_page()
+})
 
-// globalThis.addEventListener("popstate", (_e) => {
-//     transition_to(window.location.href, true)
-//     // transition_to(_e.state.href, true)
-// })
+globalThis.addEventListener("popstate", (_e) => {
+    transition_to(window.location.href, true)
+    // transition_to(_e.state.href, true)
+})
 
 function patch_page() {
     document.querySelectorAll("a").forEach(el => {