add fancy frontend player

src/main.rs

@@ -1,16 +1,108 @@
 mod state;
 mod streamer;
 
-use axum::{routing::get, Router};
+use axum::{response::IntoResponse, routing::get, Router};
+use maud::{html, Markup, DOCTYPE};
+use reqwest::header;
 use state::AppState;
 use std::sync::Arc;
 
+async fn index() -> Markup {
+    html! {
+        (DOCTYPE)
+        html lang="en" {
+            head {
+                meta charset="utf-8";
+                meta name="viewport" content="user-scalable=no";
+                title { "Ö1 Morgenjournal" }
+                link rel="stylesheet" href="/styles.css";
+            }
+            body {
+                // Top Info
+                div #title {
+                    span #track {}
+                    div #timer { "0:00" }
+                    div #duration { "0:00" }
+                }
+
+                // Controls
+                div .controlsOuter {
+                    div .controlsInner {
+                        div #loading {}
+                        div .btn #playBtn {}
+                        div .btn #pauseBtn {}
+                        div .btn #prevBtn {}
+                        div .btn #nextBtn {}
+                    }
+                    div .btn #playlistBtn {}
+                    div .btn #volumeBtn {}
+                }
+
+                // Progress
+                div #waveform {}
+                div #bar {}
+                div #progress {}
+
+                // Playlist
+                div #playlist {
+                    div #list {}
+                }
+
+                // Volume
+                div #volume .fadeout {
+                    div #barFull .bar {}
+                    div #barEmpty .bar {}
+                    div #sliderBtn {}
+                }
+
+                // Scripts
+                script src="/howler.core.min.js" {}
+                script src="/siriwave.js" {}
+                script src="/player.js" {}
+            }
+        }
+    }
+}
+
+async fn styles() -> impl IntoResponse {
+    (
+        [(header::CONTENT_TYPE, "text/css")],
+        include_str!("../static/styles.css"),
+    )
+}
+
+async fn howler() -> impl IntoResponse {
+    (
+        [(header::CONTENT_TYPE, "text/javascript")],
+        include_str!("../static/howler.core.min.js").to_string(),
+    )
+}
+
+async fn player() -> impl IntoResponse {
+    (
+        [(header::CONTENT_TYPE, "text/javascript")],
+        include_str!("../static/player.js").to_string(),
+    )
+}
+
+async fn siriwave() -> impl IntoResponse {
+    (
+        [(header::CONTENT_TYPE, "text/javascript")],
+        include_str!("../static/siriwave.js").to_string(),
+    )
+}
+
 #[tokio::main]
 async fn main() -> Result<(), Box<dyn std::error::Error>> {
     let state = Arc::new(AppState::new());
 
     let app = Router::new()
-        .route("/", get(streamer::stream_handler))
+        .route("/", get(index))
+        .route("/stream", get(streamer::stream_handler))
+        .route("/howler.core.min.js", get(howler))
+        .route("/styles.css", get(styles))
+        .route("/player.js", get(player))
+        .route("/siriwave.js", get(siriwave))
         .with_state(state);
 
     println!("Streaming server running on http://localhost:3029");