From 757edd214f841e8d95e4c5430d7ead7a0e8fecbb Mon Sep 17 00:00:00 2001
From: Jokler <jokler@protonmail.com>
Date: Thu, 30 Jan 2020 15:55:41 +0100
Subject: Spawn actix-web server with access to the bot

Additionally replace all Mutexes with RwLocks.
Hopefully this makes it possible for the web server to
serve many requests at once since they would just hold read locks.
---
 src/web_server.rs | 60 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 60 insertions(+)
 create mode 100644 src/web_server.rs

(limited to 'src/web_server.rs')

diff --git a/src/web_server.rs b/src/web_server.rs
new file mode 100644
index 0000000..1edbc50
--- /dev/null
+++ b/src/web_server.rs
@@ -0,0 +1,60 @@
+use std::sync::Arc;
+
+use actix::{Actor, Addr, Handler, Message, SyncArbiter, SyncContext};
+use actix_web::{get, middleware::Logger, web, App, HttpResponse, HttpServer, Responder};
+
+use crate::bot::MasterBot;
+
+struct GetNames;
+
+impl Message for GetNames {
+    type Result = Result<Vec<String>, ()>;
+}
+
+#[get("/")]
+async fn index(bot: web::Data<Addr<BotExecutor>>) -> impl Responder {
+    let names = bot.send(GetNames).await.unwrap().unwrap();
+    HttpResponse::Ok().body(&format!("Music bots connected: {}", names.join(", ")))
+}
+
+pub struct WebServerArgs {
+    pub domain: String,
+    pub bind_address: String,
+    pub bot: Arc<MasterBot>,
+}
+
+#[actix_rt::main]
+pub async fn start(args: WebServerArgs) -> std::io::Result<()> {
+    let cbot = args.bot.clone();
+    let bot_addr: Addr<BotExecutor> = SyncArbiter::start(4, move || BotExecutor(cbot.clone()));
+
+    HttpServer::new(move || {
+        App::new()
+            .data(bot_addr.clone())
+            .wrap(Logger::default())
+            .service(index)
+    })
+    .bind(args.bind_address)?
+    .run()
+    .await?;
+
+    args.bot.quit(String::from("Stopping"));
+
+    Ok(())
+}
+
+pub struct BotExecutor(pub Arc<MasterBot>);
+
+impl Actor for BotExecutor {
+    type Context = SyncContext<Self>;
+}
+
+impl Handler<GetNames> for BotExecutor {
+    type Result = Result<Vec<String>, ()>;
+
+    fn handle(&mut self, _: GetNames, _: &mut Self::Context) -> Self::Result {
+        let bot = &self.0;
+
+        Ok(bot.names())
+    }
+}
-- 
cgit v1.2.3-70-g09d2


From 2831c2b60cb61a14c7efee4ab5c0389eb3ad5469 Mon Sep 17 00:00:00 2001
From: Jokler <jokler@protonmail.com>
Date: Sun, 2 Feb 2020 19:50:33 +0100
Subject: Add a very basic template using available info

---
 Cargo.lock          | 123 ++++++++++++++++++++++++++++++++++++++++++++++++++--
 Cargo.toml          |   8 ++--
 src/audio_player.rs |  29 ++++++++++++-
 src/bot/master.rs   |  22 +++++++---
 src/bot/music.rs    |  32 +++++++++++++-
 src/playlist.rs     |  10 +++++
 src/web_server.rs   |  63 +++++++++++++++++++--------
 src/youtube_dl.rs   |  28 ++++++++++++
 static/.gitkeep     |   0
 templates/base.htm  |  14 ++++++
 templates/index.htm |  27 ++++++++++++
 templates/song.htm  |  10 +++++
 12 files changed, 334 insertions(+), 32 deletions(-)
 create mode 100644 static/.gitkeep
 create mode 100644 templates/base.htm
 create mode 100644 templates/index.htm
 create mode 100644 templates/song.htm

(limited to 'src/web_server.rs')

diff --git a/Cargo.lock b/Cargo.lock
index e5b821c..13ef6a1 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -59,6 +59,26 @@ dependencies = [
  "trust-dns-resolver 0.18.0-alpha.2",
 ]
 
+[[package]]
+name = "actix-files"
+version = "0.2.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "301482841d3d74483a446ead63cb7d362e187d2c8b603f13d91995621ea53c46"
+dependencies = [
+ "actix-http",
+ "actix-service",
+ "actix-web",
+ "bitflags",
+ "bytes 0.5.3",
+ "derive_more 0.99.2",
+ "futures 0.3.1",
+ "log",
+ "mime",
+ "mime_guess",
+ "percent-encoding 2.1.0",
+ "v_htmlescape",
+]
+
 [[package]]
 name = "actix-http"
 version = "1.0.1"
@@ -391,6 +411,54 @@ version = "0.5.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "cff77d8686867eceff3105329d4698d96c2391c176d5d03adc90c7389162b5b8"
 
+[[package]]
+name = "askama"
+version = "0.9.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "10a1fb9e41eb366cbcd267da2094be5b7e62fdbca9f82091e7503e80f885050d"
+dependencies = [
+ "actix-web",
+ "askama_derive",
+ "askama_escape",
+ "askama_shared",
+ "bytes 0.5.3",
+ "futures 0.3.1",
+ "mime",
+ "mime_guess",
+]
+
+[[package]]
+name = "askama_derive"
+version = "0.9.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e1012c270085fa35ece6a48a569544fde85b6d9ee41074c7b706cc912a03f939"
+dependencies = [
+ "askama_shared",
+ "nom 5.1.0",
+ "proc-macro2 1.0.7",
+ "quote 1.0.2",
+ "syn 1.0.13",
+]
+
+[[package]]
+name = "askama_escape"
+version = "0.3.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7a577aeba5fec1aafb9f195d98cfcc38a78b588e4ebf9b15f62ca1c7aa33795a"
+
+[[package]]
+name = "askama_shared"
+version = "0.9.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8ee517f4e33c27b129928e71d8a044d54c513e72e0b72ec5c4f5f1823e9de353"
+dependencies = [
+ "askama_escape",
+ "humansize",
+ "num-traits",
+ "serde",
+ "toml",
+]
+
 [[package]]
 name = "async-trait"
 version = "0.1.22"
@@ -1571,6 +1639,12 @@ version = "1.3.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "cd179ae861f0c2e53da70d892f5f3029f9594be0c41dc5269cd371691b1dc2f9"
 
+[[package]]
+name = "humansize"
+version = "1.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b6cab2627acfc432780848602f3f558f7e9dd427352224b0d9324025796d2a5e"
+
 [[package]]
 name = "humantime"
 version = "1.3.0"
@@ -1972,6 +2046,16 @@ dependencies = [
  "version_check 0.1.5",
 ]
 
+[[package]]
+name = "nom"
+version = "5.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c433f4d505fe6ce7ff78523d2fa13a0b9f2690e181fc26168bcbe5ccc5d14e07"
+dependencies = [
+ "memchr",
+ "version_check 0.1.5",
+]
+
 [[package]]
 name = "num-bigint"
 version = "0.2.4"
@@ -2272,8 +2356,10 @@ name = "pokebot"
 version = "0.1.1"
 dependencies = [
  "actix",
+ "actix-files",
  "actix-rt",
  "actix-web",
+ "askama",
  "byte-slice-cast",
  "futures 0.1.29",
  "futures-preview",
@@ -3077,7 +3163,7 @@ version = "0.1.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "58898aa9e9462043aa48c62021ba284a6906d210bde13602e65be8329c364d33"
 dependencies = [
- "nom",
+ "nom 4.2.3",
  "proc-macro2 0.4.30",
  "quote 0.6.13",
  "syn 0.15.44",
@@ -3645,7 +3731,7 @@ dependencies = [
  "bytes 0.4.12",
  "derive_more 0.14.1",
  "failure",
- "nom",
+ "nom 4.2.3",
  "num-derive",
  "num-traits",
  "rental",
@@ -3796,6 +3882,37 @@ dependencies = [
  "rand 0.6.5",
 ]
 
+[[package]]
+name = "v_escape"
+version = "0.7.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "660b101c07b5d0863deb9e7fb3138777e858d6d2a79f9e6049a27d1cc77c6da6"
+dependencies = [
+ "v_escape_derive",
+]
+
+[[package]]
+name = "v_escape_derive"
+version = "0.5.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c2ca2a14bc3fc5b64d188b087a7d3a927df87b152e941ccfbc66672e20c467ae"
+dependencies = [
+ "nom 4.2.3",
+ "proc-macro2 1.0.7",
+ "quote 1.0.2",
+ "syn 1.0.13",
+]
+
+[[package]]
+name = "v_htmlescape"
+version = "0.4.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e33e939c0d8cf047514fb6ba7d5aac78bc56677a6938b2ee67000b91f2e97e41"
+dependencies = [
+ "cfg-if",
+ "v_escape",
+]
+
 [[package]]
 name = "vcpkg"
 version = "0.2.8"
@@ -3926,7 +4043,7 @@ version = "0.10.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "3bb43f70885151e629e2a19ce9e50bd730fd436cfd4b666894c9ce4de9141164"
 dependencies = [
- "nom",
+ "nom 4.2.3",
 ]
 
 [[package]]
diff --git a/Cargo.toml b/Cargo.toml
index 1fdb258..15b80f7 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -34,7 +34,9 @@ gstreamer-audio = "0.15.0"
 byte-slice-cast = "0.3.5"
 serde_json = "1.0.44"
 serde = "1.0.104"
-rand = { version = "0.7.3", features = ["small_rng"] }
-actix-web = "2.0.0"
-actix-rt = "1.0.0"
 actix = "0.9.0"
+actix-rt = "1.0.0"
+actix-web = "2.0.0"
+actix-files = "0.2.1"
+askama = { version = "0.9.0", features = ["with-actix-web"] }
+rand = { version = "0.7.3", features = ["small_rng"] }
diff --git a/src/audio_player.rs b/src/audio_player.rs
index cdb04d7..4df213f 100644
--- a/src/audio_player.rs
+++ b/src/audio_player.rs
@@ -13,6 +13,8 @@ use log::{debug, error, info, warn};
 use std::sync::{Arc, RwLock};
 use tokio02::sync::mpsc::UnboundedSender;
 
+use crate::youtube_dl::AudioMetadata;
+
 static GST_INIT: Once = Once::new();
 
 #[derive(Copy, Clone, Debug)]
@@ -33,8 +35,10 @@ pub struct AudioPlayer {
     bus: gst::Bus,
     http_src: gst::Element,
 
+    volume_f64: RwLock<f64>,
     volume: gst::Element,
     sender: Arc<RwLock<UnboundedSender<MusicBotMessage>>>,
+    currently_playing: RwLock<Option<AudioMetadata>>,
 }
 
 fn make_element(factoryname: &str, display_name: &str) -> Result<gst::Element, AudioPlayerError> {
@@ -111,8 +115,10 @@ impl AudioPlayer {
             bus,
             http_src,
 
+            volume_f64: RwLock::new(0.0),
             volume,
             sender,
+            currently_playing: RwLock::new(None),
         })
     }
 
@@ -173,7 +179,16 @@ impl AudioPlayer {
         Ok((audio_bin, volume, ghost_pad))
     }
 
-    pub fn set_source_url(&self, location: String) -> Result<(), AudioPlayerError> {
+    pub fn set_metadata(&self, data: AudioMetadata) -> Result<(), AudioPlayerError> {
+        self.set_source_url(data.url.clone())?;
+
+        let mut currently_playing = self.currently_playing.write().unwrap();
+        *currently_playing = Some(data);
+
+        Ok(())
+    }
+
+    fn set_source_url(&self, location: String) -> Result<(), AudioPlayerError> {
         info!("Setting location URI: {}", location);
         self.http_src.set_property("location", &location)?;
 
@@ -181,6 +196,7 @@ impl AudioPlayer {
     }
 
     pub fn set_volume(&self, volume: f64) -> Result<(), AudioPlayerError> {
+        *self.volume_f64.write().unwrap() = volume;
         let db = 50.0 * volume.log10();
         info!("Setting volume: {} -> {} dB", volume, db);
 
@@ -203,9 +219,20 @@ impl AudioPlayer {
         }
     }
 
+    pub fn volume(&self) -> f64 {
+        *self.volume_f64.read().unwrap()
+    }
+
+    pub fn currently_playing(&self) -> Option<AudioMetadata> {
+        self.currently_playing.read().unwrap().clone()
+    }
+
     pub fn reset(&self) -> Result<(), AudioPlayerError> {
         info!("Setting pipeline state to null");
 
+        let mut currently_playing = self.currently_playing.write().unwrap();
+        *currently_playing = None;
+
         self.pipeline.set_state(gst::State::Null)?;
 
         Ok(())
diff --git a/src/bot/master.rs b/src/bot/master.rs
index bc38cca..10a7572 100644
--- a/src/bot/master.rs
+++ b/src/bot/master.rs
@@ -213,14 +213,24 @@ impl MasterBot {
         Ok(())
     }
 
-    pub fn names(&self) -> Vec<String> {
+    pub fn bot_datas(&self) -> Vec<crate::web_server::BotData> {
         let music_bots = self.music_bots.read().unwrap();
 
-        music_bots
-            .connected_bots
-            .iter()
-            .map(|(_, b)| b.name().to_owned())
-            .collect()
+        let len = music_bots.connected_bots.len();
+        let mut result = Vec::with_capacity(len);
+        for (name, bot) in &music_bots.connected_bots {
+            let bot_data = crate::web_server::BotData {
+                name: name.clone(),
+                state: bot.state(),
+                volume: bot.volume(),
+                currently_playing: bot.currently_playing(),
+                playlist: bot.playlist_to_vec(),
+            };
+
+            result.push(bot_data);
+        }
+
+        result
     }
 
     pub fn quit(&self, reason: String) {
diff --git a/src/bot/music.rs b/src/bot/music.rs
index 920f1cb..d53e4a8 100644
--- a/src/bot/music.rs
+++ b/src/bot/music.rs
@@ -44,7 +44,7 @@ fn parse_seek(mut amount: &str) -> Result<Seek, ()> {
     }
 }
 
-#[derive(Debug, PartialEq, Eq)]
+#[derive(Debug, PartialEq, Eq, Clone, Copy)]
 pub enum State {
     Playing,
     Paused,
@@ -52,6 +52,18 @@ pub enum State {
     EndOfStream,
 }
 
+impl std::fmt::Display for State {
+    fn fmt(&self, fmt: &mut std::fmt::Formatter) -> Result<(), std::fmt::Error> {
+        match self {
+            State::Playing => write!(fmt, "Playing"),
+            State::Paused => write!(fmt, "Paused"),
+            State::Stopped | State::EndOfStream => write!(fmt, "Stopped"),
+        }?;
+
+        Ok(())
+    }
+}
+
 #[derive(Debug)]
 pub enum MusicBotMessage {
     TextMessage(Message),
@@ -176,7 +188,7 @@ impl MusicBot {
         self.send_message(&format!("Playing {}", ts::underline(&metadata.title)));
         self.set_description(&format!("Currently playing '{}'", metadata.title));
         self.player.reset().unwrap();
-        self.player.set_source_url(metadata.url).unwrap();
+        self.player.set_metadata(metadata).unwrap();
         self.player.play().unwrap();
     }
 
@@ -211,6 +223,22 @@ impl MusicBot {
         &self.name
     }
 
+    pub fn state(&self) -> State {
+        *self.state.read().expect("RwLock was not poisoned")
+    }
+
+    pub fn volume(&self) -> f64 {
+        self.player.volume()
+    }
+
+    pub fn currently_playing(&self) -> Option<AudioMetadata> {
+        self.player.currently_playing()
+    }
+
+    pub fn playlist_to_vec(&self) -> Vec<AudioMetadata> {
+        self.playlist.read().unwrap().to_vec()
+    }
+
     pub fn my_channel(&self) -> ChannelId {
         self.teamspeak
             .as_ref()
diff --git a/src/playlist.rs b/src/playlist.rs
index 87c1c98..445f8a5 100644
--- a/src/playlist.rs
+++ b/src/playlist.rs
@@ -28,6 +28,16 @@ impl Playlist {
         res
     }
 
+    pub fn to_vec(&self) -> Vec<AudioMetadata> {
+        let (a, b) = self.data.as_slices();
+
+        let mut res = a.to_vec();
+        res.extend_from_slice(b);
+        res.reverse();
+
+        res
+    }
+
     pub fn is_empty(&self) -> bool {
         self.data.is_empty()
     }
diff --git a/src/web_server.rs b/src/web_server.rs
index 1edbc50..94f043a 100644
--- a/src/web_server.rs
+++ b/src/web_server.rs
@@ -1,21 +1,12 @@
 use std::sync::Arc;
 
 use actix::{Actor, Addr, Handler, Message, SyncArbiter, SyncContext};
-use actix_web::{get, middleware::Logger, web, App, HttpResponse, HttpServer, Responder};
+use actix_web::{get, middleware::Logger, web, App, HttpServer, Responder};
+use askama::actix_web::TemplateIntoResponse;
+use askama::Template;
 
 use crate::bot::MasterBot;
-
-struct GetNames;
-
-impl Message for GetNames {
-    type Result = Result<Vec<String>, ()>;
-}
-
-#[get("/")]
-async fn index(bot: web::Data<Addr<BotExecutor>>) -> impl Responder {
-    let names = bot.send(GetNames).await.unwrap().unwrap();
-    HttpResponse::Ok().body(&format!("Music bots connected: {}", names.join(", ")))
-}
+use crate::youtube_dl::AudioMetadata;
 
 pub struct WebServerArgs {
     pub domain: String,
@@ -33,6 +24,7 @@ pub async fn start(args: WebServerArgs) -> std::io::Result<()> {
             .data(bot_addr.clone())
             .wrap(Logger::default())
             .service(index)
+            .service(actix_files::Files::new("/static", "static/"))
     })
     .bind(args.bind_address)?
     .run()
@@ -49,12 +41,49 @@ impl Actor for BotExecutor {
     type Context = SyncContext<Self>;
 }
 
-impl Handler<GetNames> for BotExecutor {
-    type Result = Result<Vec<String>, ()>;
+impl Handler<PlaylistRequest> for BotExecutor {
+    type Result = Result<Vec<BotData>, ()>;
 
-    fn handle(&mut self, _: GetNames, _: &mut Self::Context) -> Self::Result {
+    fn handle(&mut self, _: PlaylistRequest, _: &mut Self::Context) -> Self::Result {
         let bot = &self.0;
 
-        Ok(bot.names())
+        Ok(bot.bot_datas())
+    }
+}
+
+struct PlaylistRequest;
+
+impl Message for PlaylistRequest {
+    type Result = Result<Vec<BotData>, ()>;
+}
+
+#[derive(Template)]
+#[template(path = "index.htm")]
+struct PlaylistTemplate<'a> {
+    bots: &'a [BotData],
+}
+
+#[derive(Debug)]
+pub struct BotData {
+    pub name: String,
+    pub state: crate::bot::State,
+    pub volume: f64,
+    pub currently_playing: Option<AudioMetadata>,
+    pub playlist: Vec<AudioMetadata>,
+}
+
+#[get("/")]
+async fn index(bot: web::Data<Addr<BotExecutor>>) -> impl Responder {
+    let bot_datas = match bot.send(PlaylistRequest).await.unwrap() {
+        Ok(data) => data,
+        Err(_) => {
+            //error!("Playlist error: {}", e);
+            Vec::with_capacity(0)
+        }
+    };
+
+    PlaylistTemplate {
+        bots: &bot_datas[..],
     }
+    .into_response()
 }
diff --git a/src/youtube_dl.rs b/src/youtube_dl.rs
index b62d4b3..99e50e7 100644
--- a/src/youtube_dl.rs
+++ b/src/youtube_dl.rs
@@ -1,3 +1,5 @@
+use std::time::Duration;
+
 use futures::compat::Future01CompatExt;
 use std::process::{Command, Stdio};
 use tokio_process::CommandExt;
@@ -9,7 +11,33 @@ use log::debug;
 #[derive(Serialize, Deserialize, Clone, Debug)]
 pub struct AudioMetadata {
     pub url: String,
+    pub webpage_url: String,
     pub title: String,
+    pub thumbnail: Option<String>,
+    #[serde(default, deserialize_with = "duration_deserialize")]
+    #[serde(serialize_with = "duration_serialize")]
+    pub duration: Option<Duration>,
+    #[serde(skip)]
+    pub added_by: String,
+}
+
+fn duration_serialize<S>(d: &Option<Duration>, s: S) -> Result<S::Ok, S::Error>
+where
+    S: serde::Serializer,
+{
+    match d {
+        Some(d) => s.serialize_some(&d.as_secs_f64()),
+        None => s.serialize_none(),
+    }
+}
+
+fn duration_deserialize<'de, D>(deserializer: D) -> Result<Option<Duration>, D::Error>
+where
+    D: serde::Deserializer<'de>,
+{
+    let dur: Option<f64> = Deserialize::deserialize(deserializer)?;
+
+    Ok(dur.map(|v| Duration::from_secs_f64(v)))
 }
 
 pub async fn get_audio_download_url(uri: String) -> Result<AudioMetadata, String> {
diff --git a/static/.gitkeep b/static/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/templates/base.htm b/templates/base.htm
new file mode 100644
index 0000000..7810f21
--- /dev/null
+++ b/templates/base.htm
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>{% block title %}{{ title }} - PokeBot{% endblock %}</title>
+  </head>
+  <body>
+    <main>
+      {% block content %}{% endblock %}
+    </main>
+  </body>
+</html>
diff --git a/templates/index.htm b/templates/index.htm
new file mode 100644
index 0000000..2584603
--- /dev/null
+++ b/templates/index.htm
@@ -0,0 +1,27 @@
+{% extends "base.htm" %}
+
+{% block title %}Overview{% endblock %}
+
+{% block content %}
+<h1>Bots</h1>
+<ul>
+  {% for bot in bots %}
+    <h2>{{ bot.name }}</h1>
+    <div>State: {{ bot.state }}</div>
+    <div>Volume: {{ bot.volume * 100.0 }}%</div>
+    {% match bot.currently_playing %}
+      {% when Some with (current) %}
+        <span>Currently playing:</span>
+        {% let item = current %}
+        {% include "song.htm" %}
+      {% when None %}
+    {% endmatch %}
+
+    {% for item in bot.playlist %}
+      <li>
+        {% include "song.htm" %}
+      </li>
+    {% endfor %}
+  {% endfor %}
+</ul>
+{% endblock %}
diff --git a/templates/song.htm b/templates/song.htm
new file mode 100644
index 0000000..93f4fec
--- /dev/null
+++ b/templates/song.htm
@@ -0,0 +1,10 @@
+<a href="{{ item.webpage_url }}">{{ item.title }}</a>
+{% match item.duration %}
+  {% when Some with (duration) %}
+    {% let secs = duration.as_secs() %}
+    {% let mins = secs / 60 %}
+    {% let submin_secs = secs % 60 %}
+    <span>({{ "{:02}"|format(mins) }}:{{ "{:02}"|format(submin_secs) }})</span>
+  {% when None %}
+    <span>(--:--)</span>
+{% endmatch %}
-- 
cgit v1.2.3-70-g09d2


From 5eea11a03c11551091b2c72f48590aec7f5410f0 Mon Sep 17 00:00:00 2001
From: Jokler <jokler@protonmail.com>
Date: Mon, 3 Feb 2020 01:14:05 +0100
Subject: Add a json /api/bots endpoint for data retrieval

---
 Cargo.lock        |  1 +
 Cargo.toml        |  1 +
 src/bot/master.rs | 14 +++++++++
 src/bot/music.rs  |  3 +-
 src/web_server.rs | 90 ++++++++++++++++++++++++++++++++++++++++++++++---------
 5 files changed, 94 insertions(+), 15 deletions(-)

(limited to 'src/web_server.rs')

diff --git a/Cargo.lock b/Cargo.lock
index 13ef6a1..9117117 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -2361,6 +2361,7 @@ dependencies = [
  "actix-web",
  "askama",
  "byte-slice-cast",
+ "derive_more 0.99.2",
  "futures 0.1.29",
  "futures-preview",
  "futures-util",
diff --git a/Cargo.toml b/Cargo.toml
index 15b80f7..d271d7f 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -40,3 +40,4 @@ actix-web = "2.0.0"
 actix-files = "0.2.1"
 askama = { version = "0.9.0", features = ["with-actix-web"] }
 rand = { version = "0.7.3", features = ["small_rng"] }
+derive_more = "0.99.2"
diff --git a/src/bot/master.rs b/src/bot/master.rs
index 10a7572..67867ef 100644
--- a/src/bot/master.rs
+++ b/src/bot/master.rs
@@ -213,6 +213,20 @@ impl MasterBot {
         Ok(())
     }
 
+    pub fn bot_data(&self, name: String) -> Option<crate::web_server::BotData> {
+        let music_bots = self.music_bots.read().unwrap();
+
+        let bot = music_bots.connected_bots.get(&name)?;
+
+        Some(crate::web_server::BotData {
+            name: name,
+            state: bot.state(),
+            volume: bot.volume(),
+            currently_playing: bot.currently_playing(),
+            playlist: bot.playlist_to_vec(),
+        })
+    }
+
     pub fn bot_datas(&self) -> Vec<crate::web_server::BotData> {
         let music_bots = self.music_bots.read().unwrap();
 
diff --git a/src/bot/music.rs b/src/bot/music.rs
index d53e4a8..0def280 100644
--- a/src/bot/music.rs
+++ b/src/bot/music.rs
@@ -5,6 +5,7 @@ use std::thread;
 
 use humantime;
 use log::{debug, info};
+use serde::Serialize;
 use structopt::StructOpt;
 use tokio02::sync::mpsc::UnboundedSender;
 use tsclientlib::{data, ChannelId, ClientId, ConnectOptions, Identity, Invoker, MessageTarget};
@@ -44,7 +45,7 @@ fn parse_seek(mut amount: &str) -> Result<Seek, ()> {
     }
 }
 
-#[derive(Debug, PartialEq, Eq, Clone, Copy)]
+#[derive(Debug, PartialEq, Eq, Clone, Copy, Serialize)]
 pub enum State {
     Playing,
     Paused,
diff --git a/src/web_server.rs b/src/web_server.rs
index 94f043a..02c57e7 100644
--- a/src/web_server.rs
+++ b/src/web_server.rs
@@ -1,9 +1,13 @@
 use std::sync::Arc;
 
 use actix::{Actor, Addr, Handler, Message, SyncArbiter, SyncContext};
-use actix_web::{get, middleware::Logger, web, App, HttpServer, Responder};
+use actix_web::{
+    get, middleware::Logger, web, App, HttpResponse, HttpServer, Responder, ResponseError,
+};
 use askama::actix_web::TemplateIntoResponse;
 use askama::Template;
+use derive_more::Display;
+use serde::Serialize;
 
 use crate::bot::MasterBot;
 use crate::youtube_dl::AudioMetadata;
@@ -24,6 +28,7 @@ pub async fn start(args: WebServerArgs) -> std::io::Result<()> {
             .data(bot_addr.clone())
             .wrap(Logger::default())
             .service(index)
+            .service(web::scope("/api").service(get_bot_list).service(get_bot))
             .service(actix_files::Files::new("/static", "static/"))
     })
     .bind(args.bind_address)?
@@ -41,29 +46,47 @@ impl Actor for BotExecutor {
     type Context = SyncContext<Self>;
 }
 
-impl Handler<PlaylistRequest> for BotExecutor {
+struct BotDataListRequest;
+
+impl Message for BotDataListRequest {
+    // A plain Vec does not work for some reason
+    type Result = Result<Vec<BotData>, ()>;
+}
+
+impl Handler<BotDataListRequest> for BotExecutor {
     type Result = Result<Vec<BotData>, ()>;
 
-    fn handle(&mut self, _: PlaylistRequest, _: &mut Self::Context) -> Self::Result {
+    fn handle(&mut self, _: BotDataListRequest, _: &mut Self::Context) -> Self::Result {
         let bot = &self.0;
 
         Ok(bot.bot_datas())
     }
 }
 
-struct PlaylistRequest;
+struct BotDataRequest(String);
 
-impl Message for PlaylistRequest {
-    type Result = Result<Vec<BotData>, ()>;
+impl Message for BotDataRequest {
+    type Result = Option<BotData>;
+}
+
+impl Handler<BotDataRequest> for BotExecutor {
+    type Result = Option<BotData>;
+
+    fn handle(&mut self, r: BotDataRequest, _: &mut Self::Context) -> Self::Result {
+        let name = r.0;
+        let bot = &self.0;
+
+        bot.bot_data(name)
+    }
 }
 
 #[derive(Template)]
 #[template(path = "index.htm")]
-struct PlaylistTemplate<'a> {
+struct OverviewTemplate<'a> {
     bots: &'a [BotData],
 }
 
-#[derive(Debug)]
+#[derive(Debug, Serialize)]
 pub struct BotData {
     pub name: String,
     pub state: crate::bot::State,
@@ -74,16 +97,55 @@ pub struct BotData {
 
 #[get("/")]
 async fn index(bot: web::Data<Addr<BotExecutor>>) -> impl Responder {
-    let bot_datas = match bot.send(PlaylistRequest).await.unwrap() {
+    let bot_datas = match bot.send(BotDataListRequest).await.unwrap() {
         Ok(data) => data,
-        Err(_) => {
-            //error!("Playlist error: {}", e);
-            Vec::with_capacity(0)
-        }
+        Err(_) => Vec::with_capacity(0),
     };
 
-    PlaylistTemplate {
+    OverviewTemplate {
         bots: &bot_datas[..],
     }
     .into_response()
 }
+
+#[get("/bots")]
+async fn get_bot_list(bot: web::Data<Addr<BotExecutor>>) -> impl Responder {
+    let bot_datas = match bot.send(BotDataListRequest).await.unwrap() {
+        Ok(data) => data,
+        Err(_) => Vec::with_capacity(0),
+    };
+
+    web::Json(bot_datas)
+}
+
+#[derive(Serialize)]
+struct ApiError {
+    error: String,
+    description: String,
+}
+
+#[derive(Debug, Display)]
+enum ApiErrorKind {
+    #[display(fmt = "Not Found")]
+    NotFound,
+}
+
+impl ResponseError for ApiErrorKind {
+    fn error_response(&self) -> HttpResponse {
+        match *self {
+            ApiErrorKind::NotFound => HttpResponse::NotFound().json(ApiError {
+                error: self.to_string(),
+                description: String::from("The requested resource was not found"),
+            }),
+        }
+    }
+}
+
+#[get("/bots/{name}")]
+async fn get_bot(bot: web::Data<Addr<BotExecutor>>, name: web::Path<String>) -> impl Responder {
+    if let Some(bot_data) = bot.send(BotDataRequest(name.into_inner())).await.unwrap() {
+        Ok(web::Json(bot_data))
+    } else {
+        Err(ApiErrorKind::NotFound)
+    }
+}
-- 
cgit v1.2.3-70-g09d2


From 84804836f5c1e782c77f1bbf676177151558e008 Mon Sep 17 00:00:00 2001
From: Jokler <jokler@protonmail.com>
Date: Sat, 22 Feb 2020 22:46:06 +0100
Subject: Add tmtu mode as a front-end

---
 src/audio_player.rs                |   6 ++
 src/bot/master.rs                  |  18 +++++
 src/bot/music.rs                   |  16 ++--
 src/web_server.rs                  | 104 +++++++++++++++++++++++++-
 src/web_server/front_end_cookie.rs |  60 +++++++++++++++
 templates/index.htm                |   5 ++
 templates/song.htm                 |  11 +--
 templates/tmtu/index.htm           | 145 +++++++++++++++++++++++++++++++++++++
 8 files changed, 350 insertions(+), 15 deletions(-)
 create mode 100644 src/web_server/front_end_cookie.rs
 create mode 100644 templates/tmtu/index.htm

(limited to 'src/web_server.rs')

diff --git a/src/audio_player.rs b/src/audio_player.rs
index 4df213f..4bcab56 100644
--- a/src/audio_player.rs
+++ b/src/audio_player.rs
@@ -223,6 +223,12 @@ impl AudioPlayer {
         *self.volume_f64.read().unwrap()
     }
 
+    pub fn position(&self) -> Option<Duration> {
+        self.pipeline
+            .query_position::<gst::ClockTime>()
+            .and_then(|t| t.0.map(|v| Duration::from_nanos(v)))
+    }
+
     pub fn currently_playing(&self) -> Option<AudioMetadata> {
         self.currently_playing.read().unwrap().clone()
     }
diff --git a/src/bot/master.rs b/src/bot/master.rs
index 67867ef..9b33744 100644
--- a/src/bot/master.rs
+++ b/src/bot/master.rs
@@ -222,6 +222,7 @@ impl MasterBot {
             name: name,
             state: bot.state(),
             volume: bot.volume(),
+            position: bot.position(),
             currently_playing: bot.currently_playing(),
             playlist: bot.playlist_to_vec(),
         })
@@ -237,6 +238,7 @@ impl MasterBot {
                 name: name.clone(),
                 state: bot.state(),
                 volume: bot.volume(),
+                position: bot.position(),
                 currently_playing: bot.currently_playing(),
                 playlist: bot.playlist_to_vec(),
             };
@@ -247,6 +249,18 @@ impl MasterBot {
         result
     }
 
+    pub fn bot_names(&self) -> Vec<String> {
+        let music_bots = self.music_bots.read().unwrap();
+
+        let len = music_bots.connected_bots.len();
+        let mut result = Vec::with_capacity(len);
+        for (name, _) in &music_bots.connected_bots {
+            result.push(name.clone());
+        }
+
+        result
+    }
+
     pub fn quit(&self, reason: String) {
         let music_bots = self.music_bots.read().unwrap();
         for (_, bot) in &music_bots.connected_bots {
@@ -267,6 +281,8 @@ pub struct MasterArgs {
     pub channel: Option<String>,
     #[serde(default = "default_verbose")]
     pub verbose: u8,
+    pub domain: String,
+    pub bind_address: String,
     pub names: Vec<String>,
     pub id: Identity,
     pub ids: Vec<Identity>,
@@ -301,6 +317,8 @@ impl MasterArgs {
             ids: self.ids,
             local,
             address,
+            domain: self.domain,
+            bind_address: self.bind_address,
             id: self.id,
             channel,
             verbose,
diff --git a/src/bot/music.rs b/src/bot/music.rs
index 0def280..41976e5 100644
--- a/src/bot/music.rs
+++ b/src/bot/music.rs
@@ -2,6 +2,7 @@ use std::future::Future;
 use std::io::BufRead;
 use std::sync::{Arc, RwLock};
 use std::thread;
+use std::time::Duration;
 
 use humantime;
 use log::{debug, info};
@@ -193,9 +194,10 @@ impl MusicBot {
         self.player.play().unwrap();
     }
 
-    pub async fn add_audio(&self, url: String) {
+    pub async fn add_audio(&self, url: String, user: String) {
         match crate::youtube_dl::get_audio_download_url(url).await {
-            Ok(metadata) => {
+            Ok(mut metadata) => {
+                metadata.added_by = user;
                 info!("Found audio url: {}", metadata.url);
 
                 let mut playlist = self.playlist.write().expect("RwLock was not poisoned");
@@ -232,6 +234,10 @@ impl MusicBot {
         self.player.volume()
     }
 
+    pub fn position(&self) -> Option<Duration> {
+        self.player.position()
+    }
+
     pub fn currently_playing(&self) -> Option<AudioMetadata> {
         self.player.currently_playing()
     }
@@ -278,7 +284,7 @@ impl MusicBot {
             let tokens = msg[1..].split_whitespace().collect::<Vec<_>>();
 
             match Command::from_iter_safe(&tokens) {
-                Ok(args) => self.on_command(args).await?,
+                Ok(args) => self.on_command(args, message.invoker).await?,
                 Err(e) if e.kind == structopt::clap::ErrorKind::HelpDisplayed => {
                     self.send_message(&format!("\n{}", e.message));
                 }
@@ -289,7 +295,7 @@ impl MusicBot {
         Ok(())
     }
 
-    async fn on_command(&self, command: Command) -> Result<(), AudioPlayerError> {
+    async fn on_command(&self, command: Command, invoker: Invoker) -> Result<(), AudioPlayerError> {
         match command {
             Command::Play => {
                 let playlist = self.playlist.read().expect("RwLock was not poisoned");
@@ -306,7 +312,7 @@ impl MusicBot {
                 // strip bbcode tags from url
                 let url = url.replace("[URL]", "").replace("[/URL]", "");
 
-                self.add_audio(url.to_string()).await;
+                self.add_audio(url.to_string(), invoker.name).await;
             }
             Command::Pause => {
                 self.player.pause()?;
diff --git a/src/web_server.rs b/src/web_server.rs
index 02c57e7..80c914c 100644
--- a/src/web_server.rs
+++ b/src/web_server.rs
@@ -1,17 +1,22 @@
 use std::sync::Arc;
+use std::time::Duration;
 
 use actix::{Actor, Addr, Handler, Message, SyncArbiter, SyncContext};
 use actix_web::{
-    get, middleware::Logger, web, App, HttpResponse, HttpServer, Responder, ResponseError,
+    get, http::header, middleware::Logger, post, web, App, Error, HttpResponse, HttpServer,
+    Responder, ResponseError,
 };
 use askama::actix_web::TemplateIntoResponse;
 use askama::Template;
 use derive_more::Display;
-use serde::Serialize;
+use serde::{Deserialize, Serialize};
 
 use crate::bot::MasterBot;
 use crate::youtube_dl::AudioMetadata;
 
+mod front_end_cookie;
+use front_end_cookie::FrontEnd;
+
 pub struct WebServerArgs {
     pub domain: String,
     pub bind_address: String,
@@ -28,6 +33,8 @@ pub async fn start(args: WebServerArgs) -> std::io::Result<()> {
             .data(bot_addr.clone())
             .wrap(Logger::default())
             .service(index)
+            .service(tmtu_bot)
+            .service(post_front_end)
             .service(web::scope("/api").service(get_bot_list).service(get_bot))
             .service(actix_files::Files::new("/static", "static/"))
     })
@@ -46,6 +53,34 @@ impl Actor for BotExecutor {
     type Context = SyncContext<Self>;
 }
 
+#[derive(Deserialize)]
+#[serde(rename_all = "kebab-case")]
+struct FrontEndForm {
+    front_end: FrontEnd,
+}
+
+#[post("/front-end")]
+async fn post_front_end(form: web::Form<FrontEndForm>) -> Result<HttpResponse, Error> {
+    front_end_cookie::set_front_end(form.into_inner().front_end).await
+}
+
+struct BotNameListRequest;
+
+impl Message for BotNameListRequest {
+    // A plain Vec does not work for some reason
+    type Result = Result<Vec<String>, ()>;
+}
+
+impl Handler<BotNameListRequest> for BotExecutor {
+    type Result = Result<Vec<String>, ()>;
+
+    fn handle(&mut self, _: BotNameListRequest, _: &mut Self::Context) -> Self::Result {
+        let bot = &self.0;
+
+        Ok(bot.bot_names())
+    }
+}
+
 struct BotDataListRequest;
 
 impl Message for BotDataListRequest {
@@ -86,17 +121,32 @@ struct OverviewTemplate<'a> {
     bots: &'a [BotData],
 }
 
+#[derive(Template)]
+#[template(path = "tmtu/index.htm")]
+struct TmtuTemplate {
+    bot_names: Vec<String>,
+    bot: Option<BotData>,
+}
+
 #[derive(Debug, Serialize)]
 pub struct BotData {
     pub name: String,
     pub state: crate::bot::State,
     pub volume: f64,
+    pub position: Option<Duration>,
     pub currently_playing: Option<AudioMetadata>,
     pub playlist: Vec<AudioMetadata>,
 }
 
 #[get("/")]
-async fn index(bot: web::Data<Addr<BotExecutor>>) -> impl Responder {
+async fn index(bot: web::Data<Addr<BotExecutor>>, front: FrontEnd) -> Result<HttpResponse, Error> {
+    match front {
+        FrontEnd::Lazy => lazy_index(bot).await,
+        FrontEnd::Tmtu => tmtu_index(bot).await,
+    }
+}
+
+async fn lazy_index(bot: web::Data<Addr<BotExecutor>>) -> Result<HttpResponse, Error> {
     let bot_datas = match bot.send(BotDataListRequest).await.unwrap() {
         Ok(data) => data,
         Err(_) => Vec::with_capacity(0),
@@ -108,6 +158,38 @@ async fn index(bot: web::Data<Addr<BotExecutor>>) -> impl Responder {
     .into_response()
 }
 
+async fn tmtu_index(bot: web::Data<Addr<BotExecutor>>) -> Result<HttpResponse, Error> {
+    let bot_names = bot.send(BotNameListRequest).await.unwrap().unwrap();
+
+    TmtuTemplate {
+        bot_names,
+        bot: None,
+    }
+    .into_response()
+}
+
+#[get("/tmtu/{name}")]
+async fn tmtu_bot(
+    bot: web::Data<Addr<BotExecutor>>,
+    name: web::Path<String>,
+    front: FrontEnd,
+) -> Result<HttpResponse, Error> {
+    if front != FrontEnd::Tmtu {
+        return Ok(HttpResponse::Found().header(header::LOCATION, "/").finish());
+    }
+
+    let bot_names = bot.send(BotNameListRequest).await.unwrap().unwrap();
+    if let Some(bot) = bot.send(BotDataRequest(name.into_inner())).await.unwrap() {
+        TmtuTemplate {
+            bot_names,
+            bot: Some(bot),
+        }
+        .into_response()
+    } else {
+        Ok(HttpResponse::Found().header(header::LOCATION, "/").finish())
+    }
+}
+
 #[get("/bots")]
 async fn get_bot_list(bot: web::Data<Addr<BotExecutor>>) -> impl Responder {
     let bot_datas = match bot.send(BotDataListRequest).await.unwrap() {
@@ -149,3 +231,19 @@ async fn get_bot(bot: web::Data<Addr<BotExecutor>>, name: web::Path<String>) ->
         Err(ApiErrorKind::NotFound)
     }
 }
+
+mod filters {
+    use std::time::Duration;
+
+    pub fn fmt_duration(duration: &Option<Duration>) -> Result<String, askama::Error> {
+        if let Some(duration) = duration {
+            let secs = duration.as_secs();
+            let mins = secs / 60;
+            let submin_secs = secs % 60;
+
+            Ok(format!("{:02}:{:02}", mins, submin_secs))
+        } else {
+            Ok(String::from("--:--"))
+        }
+    }
+}
diff --git a/src/web_server/front_end_cookie.rs b/src/web_server/front_end_cookie.rs
new file mode 100644
index 0000000..0207933
--- /dev/null
+++ b/src/web_server/front_end_cookie.rs
@@ -0,0 +1,60 @@
+use futures::future::{ok, Ready};
+
+use actix_web::{
+    dev::Payload,
+    http::header::{COOKIE, LOCATION, SET_COOKIE},
+    FromRequest, HttpRequest, HttpResponse,
+};
+use serde::Deserialize;
+
+#[derive(PartialEq, Deserialize)]
+#[serde(rename_all = "lowercase")]
+pub enum FrontEnd {
+    Lazy,
+    Tmtu,
+}
+
+impl FrontEnd {
+    const COOKIE_NAME: &'static str = "front-end";
+
+    fn cookie(&self) -> String {
+        let name = match self {
+            FrontEnd::Lazy => "lazy",
+            FrontEnd::Tmtu => "tmtu",
+        };
+
+        format!("{}={}", Self::COOKIE_NAME, name)
+    }
+}
+
+impl FromRequest for FrontEnd {
+    type Error = ();
+    type Future = Ready<Result<Self, ()>>;
+    type Config = ();
+
+    fn from_request(req: &HttpRequest, _payload: &mut Payload) -> Self::Future {
+        for header in req.headers().get_all(COOKIE) {
+            if let Ok(value) = header.to_str() {
+                for c in value.split(';').map(|s| s.trim()) {
+                    let mut split = c.split('=');
+                    if Some(Self::COOKIE_NAME) == split.next() {
+                        match split.next() {
+                            Some("lazy") => return ok(FrontEnd::Lazy),
+                            Some("tmtu") => return ok(FrontEnd::Tmtu),
+                            _ => (),
+                        }
+                    }
+                }
+            }
+        }
+
+        ok(FrontEnd::Lazy)
+    }
+}
+
+pub fn set_front_end(front: FrontEnd) -> HttpResponse {
+    HttpResponse::Found()
+        .header(SET_COOKIE, front.cookie())
+        .header(LOCATION, "/")
+        .finish()
+}
diff --git a/templates/index.htm b/templates/index.htm
index 2584603..3183b52 100644
--- a/templates/index.htm
+++ b/templates/index.htm
@@ -4,6 +4,11 @@
 
 {% block content %}
 <h1>Bots</h1>
+<form action="/front-end" method="POST">
+  <input type="hidden" placeholder="Enter front end" name="front-end" value="tmtu">
+  <button type="submit">tmtu-mode</button>
+</form>
+
 <ul>
   {% for bot in bots %}
     <h2>{{ bot.name }}</h1>
diff --git a/templates/song.htm b/templates/song.htm
index 93f4fec..072567a 100644
--- a/templates/song.htm
+++ b/templates/song.htm
@@ -1,10 +1,7 @@
 <a href="{{ item.webpage_url }}">{{ item.title }}</a>
-{% match item.duration %}
-  {% when Some with (duration) %}
-    {% let secs = duration.as_secs() %}
-    {% let mins = secs / 60 %}
-    {% let submin_secs = secs % 60 %}
-    <span>({{ "{:02}"|format(mins) }}:{{ "{:02}"|format(submin_secs) }})</span>
+<span>({{ item.duration|fmt_duration }})</span>
+{% match item.thumbnail %}
+  {% when Some with (thumbnail) %}
+    <img src="{{ thumbnail }}" height="128">
   {% when None %}
-    <span>(--:--)</span>
 {% endmatch %}
diff --git a/templates/tmtu/index.htm b/templates/tmtu/index.htm
new file mode 100644
index 0000000..e7d1922
--- /dev/null
+++ b/templates/tmtu/index.htm
@@ -0,0 +1,145 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>tmtu mode</title>
+    <style type="text/css">
+      body {
+        margin: 16px;
+      }
+      td {
+        padding-right: 16px;
+        padding-top: 1px;
+        padding-bottom: : 1px;
+      }
+      td, th {
+        vertical-align:top;
+      }
+      .tableheader td {
+        color: gray;
+        border-bottom: 1px solid gray;
+      }
+      .stat {
+        color: gray;
+        text-align: right;
+        white-space: nowrap;
+        padding-left: 8px
+      }
+      .tracktable {
+        border-left: 1px solid gray;
+      }
+      .tracktable tr:hover {
+        background-color: #E0E0E0;
+      }
+      .bottable tr:hover {
+        background-color: #E0E0E0;
+      }
+      #test:hover {
+        background: 2px solid red;
+      }
+      a {
+        color: teal;
+      }
+      a:hover {
+        color: red;
+      }
+      a[visited] {
+        color: navy
+      }
+      .addedby {
+        color: darkorange;
+      }
+      .botname {
+      }
+      .selected {
+        font-weight: 700;
+      }
+      .playing {
+        background: PaleGreen;
+      }
+    </style>
+  </head>
+  <body>
+    <table>
+      <tr>
+        <td colspan="2">
+          <h1>PokeBot</h1>
+          <p>A web interface for inspecting currently playing audio in PokeBot. Select an instance of the bot to view it's playlist and history.</p>
+          <nav style="display: inline-block;">
+            <ol>
+                {% let bot_name %}
+                {% match bot %}
+                  {% when Some with (bot) %}
+                    {% let bot_name = bot.name.clone() %}
+                  {% when None %}
+                    {% let bot_name = "".to_owned() %}
+                {% endmatch %}
+              {% for name in bot_names %}
+                {% if name.clone() == bot_name %}
+                  <li><a href="/tmtu/{{ name }}" class="botname selected">{{ name }}</a></li>
+                {% else %}
+                  <li><a href="/tmtu/{{ name }}" class="botname">{{ name }}</a></li>
+                {% endif %}
+              {% endfor %}
+            </ol>
+          </nav>
+        </td>
+      </tr>
+      {% match bot %}
+        {% when Some with (bot) %}
+          <tr>
+            <td colspan="2">
+              <h2>Status</h2>
+              <div class="{{ bot.state|lower }}" style="padding: 5px;">
+                {% match bot.currently_playing %}
+                  {% when Some with (current) %}
+                  <p>Currently playing: <a href="{{ current.webpage_url }}">{{ current.title }}</a></p>
+                  <p><strong>{{ bot.position|fmt_duration }} / {{ current.duration|fmt_duration }}</strong>
+                    {% match current.duration %}
+                      {% when Some with (duration) %}
+                        {% let position %}
+                        {% match bot.position %}
+                          {% when Some with (pos) %}
+                            {% let position = pos.as_secs_f64() %}
+                          {% when None %}
+                            {% let position = 0.0 %}
+                        {% endmatch %}
+                        {% let progress = position / duration.as_secs_f64() %}
+                        {% let percent = progress * 100.0 %}
+                        <progress value="{{ percent }}" max="100" title="test"></progress></p>
+                      {% when None %}
+                        <progress value="0" max="100" title="test"></progress></p>
+                    {% endmatch %}
+                  {% when None %}
+                {% endmatch %}
+              </div>
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <h2>Playlist</h2>
+              <table class="tracktable" cellspacing="0" cellpadding="0">
+                <tr class="tableheader">
+                  <td class="stat">#</td>
+                  <td>track</td>
+                  <td>length</td>
+                  <td>added by</td>
+                </tr>
+                {% for item in bot.playlist %}
+                  <tr>
+                    <td class="stat">{{ loop.index }}</td>
+                    <td><a href="{{ item.webpage_url }}">{{ item.title }}</a></td>
+                    <td>
+                      {% let duration = item.duration %}
+                      {{ duration|fmt_duration }}
+                    </td>
+                    <td>{{ item.added_by }}</td>
+                  </tr>
+                {% endfor %}
+              </table>
+            </td>
+          </tr>
+        {% when None %}
+        {% endmatch %}
+    </table>
+  </body>
+</html>
-- 
cgit v1.2.3-70-g09d2


From 2273403d5f7c0e8994d7cefcfe641475e76f1d87 Mon Sep 17 00:00:00 2001
From: Jokler <jokler@protonmail.com>
Date: Sun, 9 Feb 2020 18:52:36 +0100
Subject: Split web_server module into separate components

---
 src/bot/master.rs                  |   1 -
 src/web_server.rs                  | 185 +++++--------------------------------
 src/web_server/api.rs              |  48 ++++++++++
 src/web_server/bot_executor.rs     |  63 +++++++++++++
 src/web_server/default.rs          |  24 +++++
 src/web_server/front_end_cookie.rs |   8 +-
 src/web_server/tmtu.rs             |  41 ++++++++
 src/youtube_dl.rs                  |  11 ---
 templates/tmtu/index.htm           |   4 +-
 9 files changed, 205 insertions(+), 180 deletions(-)
 create mode 100644 src/web_server/api.rs
 create mode 100644 src/web_server/bot_executor.rs
 create mode 100644 src/web_server/default.rs
 create mode 100644 src/web_server/tmtu.rs

(limited to 'src/web_server.rs')

diff --git a/src/bot/master.rs b/src/bot/master.rs
index 9b33744..755aaa1 100644
--- a/src/bot/master.rs
+++ b/src/bot/master.rs
@@ -215,7 +215,6 @@ impl MasterBot {
 
     pub fn bot_data(&self, name: String) -> Option<crate::web_server::BotData> {
         let music_bots = self.music_bots.read().unwrap();
-
         let bot = music_bots.connected_bots.get(&name)?;
 
         Some(crate::web_server::BotData {
diff --git a/src/web_server.rs b/src/web_server.rs
index 80c914c..0342a38 100644
--- a/src/web_server.rs
+++ b/src/web_server.rs
@@ -1,20 +1,21 @@
 use std::sync::Arc;
 use std::time::Duration;
 
-use actix::{Actor, Addr, Handler, Message, SyncArbiter, SyncContext};
+use actix::{Addr, SyncArbiter};
 use actix_web::{
-    get, http::header, middleware::Logger, post, web, App, Error, HttpResponse, HttpServer,
-    Responder, ResponseError,
+    get, http::header, middleware::Logger, post, web, App, HttpResponse, HttpServer, Responder,
 };
-use askama::actix_web::TemplateIntoResponse;
-use askama::Template;
-use derive_more::Display;
 use serde::{Deserialize, Serialize};
 
 use crate::bot::MasterBot;
 use crate::youtube_dl::AudioMetadata;
 
+mod api;
+mod bot_executor;
+mod default;
 mod front_end_cookie;
+mod tmtu;
+pub use bot_executor::*;
 use front_end_cookie::FrontEnd;
 
 pub struct WebServerArgs {
@@ -33,9 +34,13 @@ pub async fn start(args: WebServerArgs) -> std::io::Result<()> {
             .data(bot_addr.clone())
             .wrap(Logger::default())
             .service(index)
-            .service(tmtu_bot)
+            .service(get_bot)
             .service(post_front_end)
-            .service(web::scope("/api").service(get_bot_list).service(get_bot))
+            .service(
+                web::scope("/api")
+                    .service(api::get_bot_list)
+                    .service(api::get_bot),
+            )
             .service(actix_files::Files::new("/static", "static/"))
     })
     .bind(args.bind_address)?
@@ -47,12 +52,6 @@ pub async fn start(args: WebServerArgs) -> std::io::Result<()> {
     Ok(())
 }
 
-pub struct BotExecutor(pub Arc<MasterBot>);
-
-impl Actor for BotExecutor {
-    type Context = SyncContext<Self>;
-}
-
 #[derive(Deserialize)]
 #[serde(rename_all = "kebab-case")]
 struct FrontEndForm {
@@ -60,74 +59,10 @@ struct FrontEndForm {
 }
 
 #[post("/front-end")]
-async fn post_front_end(form: web::Form<FrontEndForm>) -> Result<HttpResponse, Error> {
+async fn post_front_end(form: web::Form<FrontEndForm>) -> impl Responder {
     front_end_cookie::set_front_end(form.into_inner().front_end).await
 }
 
-struct BotNameListRequest;
-
-impl Message for BotNameListRequest {
-    // A plain Vec does not work for some reason
-    type Result = Result<Vec<String>, ()>;
-}
-
-impl Handler<BotNameListRequest> for BotExecutor {
-    type Result = Result<Vec<String>, ()>;
-
-    fn handle(&mut self, _: BotNameListRequest, _: &mut Self::Context) -> Self::Result {
-        let bot = &self.0;
-
-        Ok(bot.bot_names())
-    }
-}
-
-struct BotDataListRequest;
-
-impl Message for BotDataListRequest {
-    // A plain Vec does not work for some reason
-    type Result = Result<Vec<BotData>, ()>;
-}
-
-impl Handler<BotDataListRequest> for BotExecutor {
-    type Result = Result<Vec<BotData>, ()>;
-
-    fn handle(&mut self, _: BotDataListRequest, _: &mut Self::Context) -> Self::Result {
-        let bot = &self.0;
-
-        Ok(bot.bot_datas())
-    }
-}
-
-struct BotDataRequest(String);
-
-impl Message for BotDataRequest {
-    type Result = Option<BotData>;
-}
-
-impl Handler<BotDataRequest> for BotExecutor {
-    type Result = Option<BotData>;
-
-    fn handle(&mut self, r: BotDataRequest, _: &mut Self::Context) -> Self::Result {
-        let name = r.0;
-        let bot = &self.0;
-
-        bot.bot_data(name)
-    }
-}
-
-#[derive(Template)]
-#[template(path = "index.htm")]
-struct OverviewTemplate<'a> {
-    bots: &'a [BotData],
-}
-
-#[derive(Template)]
-#[template(path = "tmtu/index.htm")]
-struct TmtuTemplate {
-    bot_names: Vec<String>,
-    bot: Option<BotData>,
-}
-
 #[derive(Debug, Serialize)]
 pub struct BotData {
     pub name: String,
@@ -139,96 +74,22 @@ pub struct BotData {
 }
 
 #[get("/")]
-async fn index(bot: web::Data<Addr<BotExecutor>>, front: FrontEnd) -> Result<HttpResponse, Error> {
+async fn index(bot: web::Data<Addr<BotExecutor>>, front: FrontEnd) -> impl Responder {
     match front {
-        FrontEnd::Lazy => lazy_index(bot).await,
-        FrontEnd::Tmtu => tmtu_index(bot).await,
-    }
-}
-
-async fn lazy_index(bot: web::Data<Addr<BotExecutor>>) -> Result<HttpResponse, Error> {
-    let bot_datas = match bot.send(BotDataListRequest).await.unwrap() {
-        Ok(data) => data,
-        Err(_) => Vec::with_capacity(0),
-    };
-
-    OverviewTemplate {
-        bots: &bot_datas[..],
-    }
-    .into_response()
-}
-
-async fn tmtu_index(bot: web::Data<Addr<BotExecutor>>) -> Result<HttpResponse, Error> {
-    let bot_names = bot.send(BotNameListRequest).await.unwrap().unwrap();
-
-    TmtuTemplate {
-        bot_names,
-        bot: None,
+        FrontEnd::Default => default::index(bot).await,
+        FrontEnd::Tmtu => tmtu::index(bot).await,
     }
-    .into_response()
 }
 
-#[get("/tmtu/{name}")]
-async fn tmtu_bot(
+#[get("/bot/{name}")]
+async fn get_bot(
     bot: web::Data<Addr<BotExecutor>>,
     name: web::Path<String>,
     front: FrontEnd,
-) -> Result<HttpResponse, Error> {
-    if front != FrontEnd::Tmtu {
-        return Ok(HttpResponse::Found().header(header::LOCATION, "/").finish());
-    }
-
-    let bot_names = bot.send(BotNameListRequest).await.unwrap().unwrap();
-    if let Some(bot) = bot.send(BotDataRequest(name.into_inner())).await.unwrap() {
-        TmtuTemplate {
-            bot_names,
-            bot: Some(bot),
-        }
-        .into_response()
-    } else {
-        Ok(HttpResponse::Found().header(header::LOCATION, "/").finish())
-    }
-}
-
-#[get("/bots")]
-async fn get_bot_list(bot: web::Data<Addr<BotExecutor>>) -> impl Responder {
-    let bot_datas = match bot.send(BotDataListRequest).await.unwrap() {
-        Ok(data) => data,
-        Err(_) => Vec::with_capacity(0),
-    };
-
-    web::Json(bot_datas)
-}
-
-#[derive(Serialize)]
-struct ApiError {
-    error: String,
-    description: String,
-}
-
-#[derive(Debug, Display)]
-enum ApiErrorKind {
-    #[display(fmt = "Not Found")]
-    NotFound,
-}
-
-impl ResponseError for ApiErrorKind {
-    fn error_response(&self) -> HttpResponse {
-        match *self {
-            ApiErrorKind::NotFound => HttpResponse::NotFound().json(ApiError {
-                error: self.to_string(),
-                description: String::from("The requested resource was not found"),
-            }),
-        }
-    }
-}
-
-#[get("/bots/{name}")]
-async fn get_bot(bot: web::Data<Addr<BotExecutor>>, name: web::Path<String>) -> impl Responder {
-    if let Some(bot_data) = bot.send(BotDataRequest(name.into_inner())).await.unwrap() {
-        Ok(web::Json(bot_data))
-    } else {
-        Err(ApiErrorKind::NotFound)
+) -> impl Responder {
+    match front {
+        FrontEnd::Tmtu => tmtu::get_bot(bot, name.into_inner()).await,
+        FrontEnd::Default => Ok(HttpResponse::Found().header(header::LOCATION, "/").finish()),
     }
 }
 
diff --git a/src/web_server/api.rs b/src/web_server/api.rs
new file mode 100644
index 0000000..4deedad
--- /dev/null
+++ b/src/web_server/api.rs
@@ -0,0 +1,48 @@
+use actix::Addr;
+use actix_web::{get, web, HttpResponse, Responder, ResponseError};
+use derive_more::Display;
+use serde::Serialize;
+
+use crate::web_server::{BotDataListRequest, BotDataRequest, BotExecutor};
+
+#[get("/bots")]
+pub async fn get_bot_list(bot: web::Data<Addr<BotExecutor>>) -> impl Responder {
+    let bot_datas = match bot.send(BotDataListRequest).await.unwrap() {
+        Ok(data) => data,
+        Err(_) => Vec::with_capacity(0),
+    };
+
+    web::Json(bot_datas)
+}
+
+#[get("/bots/{name}")]
+pub async fn get_bot(bot: web::Data<Addr<BotExecutor>>, name: web::Path<String>) -> impl Responder {
+    if let Some(bot_data) = bot.send(BotDataRequest(name.into_inner())).await.unwrap() {
+        Ok(web::Json(bot_data))
+    } else {
+        Err(ApiErrorKind::NotFound)
+    }
+}
+
+#[derive(Serialize)]
+struct ApiError {
+    error: String,
+    description: String,
+}
+
+#[derive(Debug, Display)]
+enum ApiErrorKind {
+    #[display(fmt = "Not Found")]
+    NotFound,
+}
+
+impl ResponseError for ApiErrorKind {
+    fn error_response(&self) -> HttpResponse {
+        match *self {
+            ApiErrorKind::NotFound => HttpResponse::NotFound().json(ApiError {
+                error: self.to_string(),
+                description: String::from("The requested resource was not found"),
+            }),
+        }
+    }
+}
diff --git a/src/web_server/bot_executor.rs b/src/web_server/bot_executor.rs
new file mode 100644
index 0000000..fde3c08
--- /dev/null
+++ b/src/web_server/bot_executor.rs
@@ -0,0 +1,63 @@
+use std::sync::Arc;
+
+use actix::{Actor, Handler, Message, SyncContext};
+
+use crate::bot::MasterBot;
+use crate::web_server::BotData;
+
+pub struct BotExecutor(pub Arc<MasterBot>);
+
+impl Actor for BotExecutor {
+    type Context = SyncContext<Self>;
+}
+
+pub struct BotNameListRequest;
+
+impl Message for BotNameListRequest {
+    // A plain Vec does not work for some reason
+    type Result = Result<Vec<String>, ()>;
+}
+
+impl Handler<BotNameListRequest> for BotExecutor {
+    type Result = Result<Vec<String>, ()>;
+
+    fn handle(&mut self, _: BotNameListRequest, _: &mut Self::Context) -> Self::Result {
+        let bot = &self.0;
+
+        Ok(bot.bot_names())
+    }
+}
+
+pub struct BotDataListRequest;
+
+impl Message for BotDataListRequest {
+    // A plain Vec does not work for some reason
+    type Result = Result<Vec<BotData>, ()>;
+}
+
+impl Handler<BotDataListRequest> for BotExecutor {
+    type Result = Result<Vec<BotData>, ()>;
+
+    fn handle(&mut self, _: BotDataListRequest, _: &mut Self::Context) -> Self::Result {
+        let bot = &self.0;
+
+        Ok(bot.bot_datas())
+    }
+}
+
+pub struct BotDataRequest(pub String);
+
+impl Message for BotDataRequest {
+    type Result = Option<BotData>;
+}
+
+impl Handler<BotDataRequest> for BotExecutor {
+    type Result = Option<BotData>;
+
+    fn handle(&mut self, r: BotDataRequest, _: &mut Self::Context) -> Self::Result {
+        let name = r.0;
+        let bot = &self.0;
+
+        bot.bot_data(name)
+    }
+}
diff --git a/src/web_server/default.rs b/src/web_server/default.rs
new file mode 100644
index 0000000..b3c8291
--- /dev/null
+++ b/src/web_server/default.rs
@@ -0,0 +1,24 @@
+use actix::Addr;
+use actix_web::{web, Error, HttpResponse};
+use askama::actix_web::TemplateIntoResponse;
+use askama::Template;
+
+use crate::web_server::{filters, BotData, BotDataListRequest, BotExecutor};
+
+#[derive(Template)]
+#[template(path = "index.htm")]
+struct OverviewTemplate<'a> {
+    bots: &'a [BotData],
+}
+
+pub async fn index(bot: web::Data<Addr<BotExecutor>>) -> Result<HttpResponse, Error> {
+    let bot_datas = match bot.send(BotDataListRequest).await.unwrap() {
+        Ok(data) => data,
+        Err(_) => Vec::with_capacity(0),
+    };
+
+    OverviewTemplate {
+        bots: &bot_datas[..],
+    }
+    .into_response()
+}
diff --git a/src/web_server/front_end_cookie.rs b/src/web_server/front_end_cookie.rs
index 0207933..4812d0d 100644
--- a/src/web_server/front_end_cookie.rs
+++ b/src/web_server/front_end_cookie.rs
@@ -10,7 +10,7 @@ use serde::Deserialize;
 #[derive(PartialEq, Deserialize)]
 #[serde(rename_all = "lowercase")]
 pub enum FrontEnd {
-    Lazy,
+    Default,
     Tmtu,
 }
 
@@ -19,7 +19,7 @@ impl FrontEnd {
 
     fn cookie(&self) -> String {
         let name = match self {
-            FrontEnd::Lazy => "lazy",
+            FrontEnd::Default => "default",
             FrontEnd::Tmtu => "tmtu",
         };
 
@@ -39,7 +39,7 @@ impl FromRequest for FrontEnd {
                     let mut split = c.split('=');
                     if Some(Self::COOKIE_NAME) == split.next() {
                         match split.next() {
-                            Some("lazy") => return ok(FrontEnd::Lazy),
+                            Some("default") => return ok(FrontEnd::Default),
                             Some("tmtu") => return ok(FrontEnd::Tmtu),
                             _ => (),
                         }
@@ -48,7 +48,7 @@ impl FromRequest for FrontEnd {
             }
         }
 
-        ok(FrontEnd::Lazy)
+        ok(FrontEnd::Default)
     }
 }
 
diff --git a/src/web_server/tmtu.rs b/src/web_server/tmtu.rs
new file mode 100644
index 0000000..0645ee4
--- /dev/null
+++ b/src/web_server/tmtu.rs
@@ -0,0 +1,41 @@
+use actix::Addr;
+use actix_web::{http::header, web, Error, HttpResponse};
+use askama::actix_web::TemplateIntoResponse;
+use askama::Template;
+
+use crate::web_server::{filters, BotData, BotDataRequest, BotExecutor, BotNameListRequest};
+
+#[derive(Template)]
+#[template(path = "tmtu/index.htm")]
+struct TmtuTemplate {
+    bot_names: Vec<String>,
+    bot: Option<BotData>,
+}
+
+pub async fn index(bot: web::Data<Addr<BotExecutor>>) -> Result<HttpResponse, Error> {
+    let bot_names = bot.send(BotNameListRequest).await.unwrap().unwrap();
+
+    TmtuTemplate {
+        bot_names,
+        bot: None,
+    }
+    .into_response()
+}
+
+pub async fn get_bot(
+    bot: web::Data<Addr<BotExecutor>>,
+    name: String,
+) -> Result<HttpResponse, Error> {
+    let bot_names = bot.send(BotNameListRequest).await.unwrap().unwrap();
+
+    if let Some(bot) = bot.send(BotDataRequest(name)).await.unwrap() {
+        TmtuTemplate {
+            bot_names,
+            bot: Some(bot),
+        }
+        .into_response()
+    } else {
+        // TODO to 404 or not to 404
+        Ok(HttpResponse::Found().header(header::LOCATION, "/").finish())
+    }
+}
diff --git a/src/youtube_dl.rs b/src/youtube_dl.rs
index 99e50e7..89b1477 100644
--- a/src/youtube_dl.rs
+++ b/src/youtube_dl.rs
@@ -15,22 +15,11 @@ pub struct AudioMetadata {
     pub title: String,
     pub thumbnail: Option<String>,
     #[serde(default, deserialize_with = "duration_deserialize")]
-    #[serde(serialize_with = "duration_serialize")]
     pub duration: Option<Duration>,
     #[serde(skip)]
     pub added_by: String,
 }
 
-fn duration_serialize<S>(d: &Option<Duration>, s: S) -> Result<S::Ok, S::Error>
-where
-    S: serde::Serializer,
-{
-    match d {
-        Some(d) => s.serialize_some(&d.as_secs_f64()),
-        None => s.serialize_none(),
-    }
-}
-
 fn duration_deserialize<'de, D>(deserializer: D) -> Result<Option<Duration>, D::Error>
 where
     D: serde::Deserializer<'de>,
diff --git a/templates/tmtu/index.htm b/templates/tmtu/index.htm
index e7d1922..785e653 100644
--- a/templates/tmtu/index.htm
+++ b/templates/tmtu/index.htm
@@ -75,9 +75,9 @@
                 {% endmatch %}
               {% for name in bot_names %}
                 {% if name.clone() == bot_name %}
-                  <li><a href="/tmtu/{{ name }}" class="botname selected">{{ name }}</a></li>
+                  <li><a href="/bot/{{ name }}" class="botname selected">{{ name }}</a></li>
                 {% else %}
-                  <li><a href="/tmtu/{{ name }}" class="botname">{{ name }}</a></li>
+                  <li><a href="/bot/{{ name }}" class="botname">{{ name }}</a></li>
                 {% endif %}
               {% endfor %}
             </ol>
-- 
cgit v1.2.3-70-g09d2


From 1e0fb0a8fab5c9f2f8a58c2637830522863ef04f Mon Sep 17 00:00:00 2001
From: Jokler <jokler@protonmail.com>
Date: Sun, 9 Feb 2020 22:19:38 +0100
Subject: Webserver: Add API documentation and basic css

---
 src/web_server.rs      |  12 +++++
 static/fonts/.gitkeep  |   0
 static/style.css       |  63 +++++++++++++++++++++++++
 templates/base.htm     |   1 +
 templates/docs/api.htm | 126 +++++++++++++++++++++++++++++++++++++++++++++++++
 templates/index.htm    |   4 ++
 6 files changed, 206 insertions(+)
 create mode 100644 static/fonts/.gitkeep
 create mode 100644 static/style.css
 create mode 100644 templates/docs/api.htm

(limited to 'src/web_server.rs')

diff --git a/src/web_server.rs b/src/web_server.rs
index 0342a38..0097fb1 100644
--- a/src/web_server.rs
+++ b/src/web_server.rs
@@ -5,6 +5,8 @@ use actix::{Addr, SyncArbiter};
 use actix_web::{
     get, http::header, middleware::Logger, post, web, App, HttpResponse, HttpServer, Responder,
 };
+use askama::actix_web::TemplateIntoResponse;
+use askama::Template;
 use serde::{Deserialize, Serialize};
 
 use crate::bot::MasterBot;
@@ -41,6 +43,7 @@ pub async fn start(args: WebServerArgs) -> std::io::Result<()> {
                     .service(api::get_bot_list)
                     .service(api::get_bot),
             )
+            .service(web::scope("/docs").service(get_api_docs))
             .service(actix_files::Files::new("/static", "static/"))
     })
     .bind(args.bind_address)?
@@ -93,6 +96,15 @@ async fn get_bot(
     }
 }
 
+#[derive(Template)]
+#[template(path = "docs/api.htm")]
+struct ApiDocsTemplate;
+
+#[get("/api")]
+async fn get_api_docs() -> impl Responder {
+    ApiDocsTemplate.into_response()
+}
+
 mod filters {
     use std::time::Duration;
 
diff --git a/static/fonts/.gitkeep b/static/fonts/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/static/style.css b/static/style.css
new file mode 100644
index 0000000..09a985c
--- /dev/null
+++ b/static/style.css
@@ -0,0 +1,63 @@
+@font-face {
+  font-family: 'roboto-regular';
+  src: url('fonts/Roboto-Regular.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'roboto-light';
+  src: url('fonts/Roboto-Light.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'roboto-bold';
+  src: url('fonts/Roboto-Bold.ttf') format('truetype');
+}
+
+body {
+  background-color: #151515;
+}
+
+main {
+  margin: auto;
+  max-width: 800px;
+  padding: 1em;
+  background-color: #202020;
+  color: #eee;
+  font-family: 'roboto-regular', Arial;
+}
+
+nav > a {
+  font-size: 1.4rem;
+}
+
+a, a:visited {
+  color: #eee;
+}
+
+a:hover {
+  color: #ccc;
+}
+
+pre {
+  font-size: 0.9rem;
+  font-family: monospace;
+  background-color: #151515;
+  overflow: auto;
+  padding: 1em;
+}
+
+.code-background {
+  background-color: #151515;
+}
+
+.code-normal {
+  color: #c0c5ce;
+}
+
+.code-string {
+  color:#a3be8c;
+}
+
+.code-number {
+  color: #d08770;
+}
diff --git a/templates/base.htm b/templates/base.htm
index 7810f21..b8b2f49 100644
--- a/templates/base.htm
+++ b/templates/base.htm
@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link href="/static/style.css" rel="stylesheet">
     <title>{% block title %}{{ title }} - PokeBot{% endblock %}</title>
   </head>
   <body>
diff --git a/templates/docs/api.htm b/templates/docs/api.htm
new file mode 100644
index 0000000..a973272
--- /dev/null
+++ b/templates/docs/api.htm
@@ -0,0 +1,126 @@
+{% extends "base.htm" %}
+
+{% block title %}API Documentation{% endblock %}
+
+{% block content %}
+<h1>API Documentation</h1>
+<nav>
+  <a href="/">Bots</a>
+  <a href="/docs/api">API</a>
+</nav>
+
+<h2>Bot list</h2>
+<p>Show a list of all bots.</p>
+
+<p><b>URL</b>: <span class="code-background">/api/bots</span></p>
+<p><b>Method</b>: <span class="code-background">GET</span></p>
+<p><b>Auth required</b>: <span class="code-background">NO</span></p>
+
+<h3>Success Response</h3>
+
+<p><b>Code</b>: <span class="code-background">200 OK</span></p>
+
+<h3>Content example</h3>
+
+<!-- Generated with syntect and adjusted -->
+<pre>
+<span class="code-normal">[
+</span><span class="code-normal">  {
+</span><span class="code-normal">    &quot;</span><span class="code-string">name</span><span class="code-normal">&quot;: &quot;</span><span class="code-string">MusicBot</span><span class="code-normal">&quot;,
+</span><span class="code-normal">    &quot;</span><span class="code-string">state</span><span class="code-normal">&quot;: &quot;</span><span class="code-string">Playing</span><span class="code-normal">&quot;,
+</span><span class="code-normal">    &quot;</span><span class="code-string">volume</span><span class="code-normal">&quot;: </span><span class="code-number">0.5</span><span class="code-normal">,
+</span><span class="code-normal">    &quot;</span><span class="code-string">position</span><span class="code-normal">&quot;: {
+</span><span class="code-normal">      &quot;</span><span class="code-string">secs</span><span class="code-normal">&quot;: </span><span class="code-number">10</span><span class="code-normal">,
+</span><span class="code-normal">      &quot;</span><span class="code-string">nanos</span><span class="code-normal">&quot;: </span><span class="code-number">63573687
+</span><span class="code-normal">    },
+</span><span class="code-normal">    &quot;</span><span class="code-string">currently_playing</span><span class="code-normal">&quot;: {
+</span><span class="code-normal">      &quot;</span><span class="code-string">url</span><span class="code-normal">&quot;: &quot;</span><span class="code-string">&lt;temp_url&gt;</span><span class="code-normal">&quot;,
+</span><span class="code-normal">      &quot;</span><span class="code-string">webpage_url</span><span class="code-normal">&quot;: &quot;</span><span class="code-string">https://www.youtube.com/watch?v=dQw4w9WgXcQ</span><span class="code-normal">&quot;,
+</span><span class="code-normal">      &quot;</span><span class="code-string">title</span><span class="code-normal">&quot;: &quot;</span><span class="code-string">Rick Astley - Never Gonna Give You Up (Video)</span><span class="code-normal">&quot;,
+</span><span class="code-normal">      &quot;</span><span class="code-string">thumbnail</span><span class="code-normal">&quot;: &quot;</span><span class="code-string">https://i.ytimg.com/vi/dQw4w9WgXcQ/maxresdefault.jpg</span><span class="code-normal">&quot;,
+</span><span class="code-normal">      &quot;</span><span class="code-string">duration</span><span class="code-normal">&quot;: {
+</span><span class="code-normal">        &quot;</span><span class="code-string">secs</span><span class="code-normal">&quot;: </span><span class="code-number">212</span><span class="code-normal">,
+</span><span class="code-normal">        &quot;</span><span class="code-string">nanos</span><span class="code-normal">&quot;: </span><span class="code-number">0
+</span><span class="code-normal">      }
+</span><span class="code-normal">    },
+</span><span class="code-normal">    &quot;</span><span class="code-string">playlist</span><span class="code-normal">&quot;: [
+</span><span class="code-normal">      {
+</span><span class="code-normal">        &quot;</span><span class="code-string">url</span><span class="code-normal">&quot;: &quot;</span><span class="code-string">&lt;temp_url&gt;</span><span class="code-normal">&quot;,
+</span><span class="code-normal">        &quot;</span><span class="code-string">webpage_url</span><span class="code-normal">&quot;: &quot;</span><span class="code-string">https://www.youtube.com/watch?v=dQw4w9WgXcQ</span><span class="code-normal">&quot;,
+</span><span class="code-normal">        &quot;</span><span class="code-string">title</span><span class="code-normal">&quot;: &quot;</span><span class="code-string">Rick Astley - Never Gonna Give You Up (Video)</span><span class="code-normal">&quot;,
+</span><span class="code-normal">        &quot;</span><span class="code-string">thumbnail</span><span class="code-normal">&quot;: &quot;</span><span class="code-string">https://i.ytimg.com/vi/dQw4w9WgXcQ/maxresdefault.jpg</span><span class="code-normal">&quot;,
+</span><span class="code-normal">        &quot;</span><span class="code-string">duration</span><span class="code-normal">&quot;: {
+</span><span class="code-normal">          &quot;</span><span class="code-string">secs</span><span class="code-normal">&quot;: </span><span class="code-number">212</span><span class="code-normal">,
+</span><span class="code-normal">          &quot;</span><span class="code-string">nanos</span><span class="code-normal">&quot;: </span><span class="code-number">0
+</span><span class="code-normal">        }
+</span><span class="code-normal">      }
+</span><span class="code-normal">    ]
+</span><span class="code-normal">  }
+</span><span class="code-normal">]
+</span></pre>
+
+
+<h2>Show Bot</h2>
+<p>Show a specific bot.</p>
+
+<p><b>URL</b>: <span class="code-background">/api/bots/:botname</span></p>
+<p><b>Method</b>: <span class="code-background">GET</span></p>
+<p><b>Auth required</b>: <span class="code-background">NO</span></p>
+
+<h3>Success Response</h3>
+<p><b>Code</b>: <span class="code-background">200 OK</span></p>
+
+<h3>Content example</h3>
+
+<!-- Generated with syntect and adjusted -->
+<pre>
+<span class="code-normal">{
+</span><span class="code-normal">  &quot;</span><span class="code-string">name</span><span class="code-normal">&quot;: &quot;</span><span class="code-string">MusicBot</span><span class="code-normal">&quot;,
+</span><span class="code-normal">  &quot;</span><span class="code-string">state</span><span class="code-normal">&quot;: &quot;</span><span class="code-string">Playing</span><span class="code-normal">&quot;,
+</span><span class="code-normal">  &quot;</span><span class="code-string">volume</span><span class="code-normal">&quot;: </span><span class="code-number">0.5</span><span class="code-normal">,
+</span><span class="code-normal">  &quot;</span><span class="code-string">position</span><span class="code-normal">&quot;: {
+</span><span class="code-normal">    &quot;</span><span class="code-string">secs</span><span class="code-normal">&quot;: </span><span class="code-number">142</span><span class="code-normal">,
+</span><span class="code-normal">    &quot;</span><span class="code-string">nanos</span><span class="code-normal">&quot;: </span><span class="code-number">690911766
+</span><span class="code-normal">  },
+</span><span class="code-normal">  &quot;</span><span class="code-string">currently_playing</span><span class="code-normal">&quot;: {
+</span><span class="code-normal">    &quot;</span><span class="code-string">url</span><span class="code-normal">&quot;: &quot;</span><span class="code-string">&lt;temp_url&gt;</span><span class="code-normal">&quot;,
+</span><span class="code-normal">    &quot;</span><span class="code-string">webpage_url</span><span class="code-normal">&quot;: &quot;</span><span class="code-string">https://www.youtube.com/watch?v=dQw4w9WgXcQ</span><span class="code-normal">&quot;,
+</span><span class="code-normal">    &quot;</span><span class="code-string">title</span><span class="code-normal">&quot;: &quot;</span><span class="code-string">Rick Astley - Never Gonna Give You Up (Video)</span><span class="code-normal">&quot;,
+</span><span class="code-normal">    &quot;</span><span class="code-string">thumbnail</span><span class="code-normal">&quot;: &quot;</span><span class="code-string">https://i.ytimg.com/vi/dQw4w9WgXcQ/maxresdefault.jpg</span><span class="code-normal">&quot;,
+</span><span class="code-normal">    &quot;</span><span class="code-string">duration</span><span class="code-normal">&quot;: {
+</span><span class="code-normal">      &quot;</span><span class="code-string">secs</span><span class="code-normal">&quot;: </span><span class="code-number">212</span><span class="code-normal">,
+</span><span class="code-normal">      &quot;</span><span class="code-string">nanos</span><span class="code-normal">&quot;: </span><span class="code-number">0
+</span><span class="code-normal">    }
+</span><span class="code-normal">  },
+</span><span class="code-normal">  &quot;</span><span class="code-string">playlist</span><span class="code-normal">&quot;: [
+</span><span class="code-normal">    {
+</span><span class="code-normal">      &quot;</span><span class="code-string">url</span><span class="code-normal">&quot;: &quot;</span><span class="code-string">&lt;temp_url&gt;</span><span class="code-normal">&quot;,
+</span><span class="code-normal">      &quot;</span><span class="code-string">webpage_url</span><span class="code-normal">&quot;: &quot;</span><span class="code-string">https://www.youtube.com/watch?v=dQw4w9WgXcQ</span><span class="code-normal">&quot;,
+</span><span class="code-normal">      &quot;</span><span class="code-string">title</span><span class="code-normal">&quot;: &quot;</span><span class="code-string">Rick Astley - Never Gonna Give You Up (Video)</span><span class="code-normal">&quot;,
+</span><span class="code-normal">      &quot;</span><span class="code-string">thumbnail</span><span class="code-normal">&quot;: &quot;</span><span class="code-string">https://i.ytimg.com/vi/dQw4w9WgXcQ/maxresdefault.jpg</span><span class="code-normal">&quot;,
+</span><span class="code-normal">      &quot;</span><span class="code-string">duration</span><span class="code-normal">&quot;: {
+</span><span class="code-normal">        &quot;</span><span class="code-string">secs</span><span class="code-normal">&quot;: </span><span class="code-number">212</span><span class="code-normal">,
+</span><span class="code-normal">        &quot;</span><span class="code-string">nanos</span><span class="code-normal">&quot;: </span><span class="code-number">0
+</span><span class="code-normal">      }
+</span><span class="code-normal">    }
+</span><span class="code-normal">  ]
+</span><span class="code-normal">}
+</span></pre>
+
+<h3>Error Response</h3>
+
+<p><b>Condition</b>: If ':botname' is not connected to TeamSpeak.</p>
+
+<p><b>Code</b>: <span class="code-background">404 NOT FOUND</span></p>
+
+<b>Content</b>:
+
+<!-- Generated with syntect and adjusted -->
+<pre>
+<span class="code-normal">{
+</span><span class="code-normal">  &quot;</span><span class="code-string">error</span><span class="code-normal">&quot;: &quot;</span><span class="code-string">Not Found</span><span class="code-normal">&quot;,
+</span><span class="code-normal">  &quot;</span><span class="code-string">description</span><span class="code-normal">&quot;: &quot;</span><span class="code-string">The requested resource was not found</span><span class="code-normal">&quot;
+</span><span class="code-normal">}
+</span></pre>
+
+{% endblock %}
diff --git a/templates/index.htm b/templates/index.htm
index 3183b52..eed31f3 100644
--- a/templates/index.htm
+++ b/templates/index.htm
@@ -8,6 +8,10 @@
   <input type="hidden" placeholder="Enter front end" name="front-end" value="tmtu">
   <button type="submit">tmtu-mode</button>
 </form>
+<nav>
+  <a href="/">Bots</a>
+  <a href="/docs/api">API</a>
+</nav>
 
 <ul>
   {% for bot in bots %}
-- 
cgit v1.2.3-70-g09d2


From 326cfa543c6263818aad7dec4a869bc8139ec14c Mon Sep 17 00:00:00 2001
From: Jokler <jokler@protonmail.com>
Date: Sat, 22 Feb 2020 18:53:13 +0100
Subject: Move web server related files into a folder

---
 askama.toml                         |   3 +
 src/web_server.rs                   |   2 +-
 static/.gitkeep                     |   0
 static/fonts/.gitkeep               |   0
 static/style.css                    |  63 ----------------
 templates/base.htm                  |  15 ----
 templates/docs/api.htm              | 126 -------------------------------
 templates/index.htm                 |  36 ---------
 templates/song.htm                  |   7 --
 templates/tmtu/index.htm            | 145 ------------------------------------
 web_server/static/fonts/.gitkeep    |   0
 web_server/static/style.css         |  63 ++++++++++++++++
 web_server/templates/base.htm       |  15 ++++
 web_server/templates/docs/api.htm   | 126 +++++++++++++++++++++++++++++++
 web_server/templates/index.htm      |  36 +++++++++
 web_server/templates/song.htm       |   7 ++
 web_server/templates/tmtu/index.htm | 145 ++++++++++++++++++++++++++++++++++++
 17 files changed, 396 insertions(+), 393 deletions(-)
 create mode 100644 askama.toml
 delete mode 100644 static/.gitkeep
 delete mode 100644 static/fonts/.gitkeep
 delete mode 100644 static/style.css
 delete mode 100644 templates/base.htm
 delete mode 100644 templates/docs/api.htm
 delete mode 100644 templates/index.htm
 delete mode 100644 templates/song.htm
 delete mode 100644 templates/tmtu/index.htm
 create mode 100644 web_server/static/fonts/.gitkeep
 create mode 100644 web_server/static/style.css
 create mode 100644 web_server/templates/base.htm
 create mode 100644 web_server/templates/docs/api.htm
 create mode 100644 web_server/templates/index.htm
 create mode 100644 web_server/templates/song.htm
 create mode 100644 web_server/templates/tmtu/index.htm

(limited to 'src/web_server.rs')

diff --git a/askama.toml b/askama.toml
new file mode 100644
index 0000000..fceb790
--- /dev/null
+++ b/askama.toml
@@ -0,0 +1,3 @@
+[general]
+# Directories to search for templates, relative to the crate root.
+dirs = ["web_server/templates"]
diff --git a/src/web_server.rs b/src/web_server.rs
index 0097fb1..01233f2 100644
--- a/src/web_server.rs
+++ b/src/web_server.rs
@@ -44,7 +44,7 @@ pub async fn start(args: WebServerArgs) -> std::io::Result<()> {
                     .service(api::get_bot),
             )
             .service(web::scope("/docs").service(get_api_docs))
-            .service(actix_files::Files::new("/static", "static/"))
+            .service(actix_files::Files::new("/static", "web_server/static/"))
     })
     .bind(args.bind_address)?
     .run()
diff --git a/static/.gitkeep b/static/.gitkeep
deleted file mode 100644
index e69de29..0000000
diff --git a/static/fonts/.gitkeep b/static/fonts/.gitkeep
deleted file mode 100644
index e69de29..0000000
diff --git a/static/style.css b/static/style.css
deleted file mode 100644
index 09a985c..0000000
--- a/static/style.css
+++ /dev/null
@@ -1,63 +0,0 @@
-@font-face {
-  font-family: 'roboto-regular';
-  src: url('fonts/Roboto-Regular.ttf') format('truetype');
-}
-
-@font-face {
-  font-family: 'roboto-light';
-  src: url('fonts/Roboto-Light.ttf') format('truetype');
-}
-
-@font-face {
-  font-family: 'roboto-bold';
-  src: url('fonts/Roboto-Bold.ttf') format('truetype');
-}
-
-body {
-  background-color: #151515;
-}
-
-main {
-  margin: auto;
-  max-width: 800px;
-  padding: 1em;
-  background-color: #202020;
-  color: #eee;
-  font-family: 'roboto-regular', Arial;
-}
-
-nav > a {
-  font-size: 1.4rem;
-}
-
-a, a:visited {
-  color: #eee;
-}
-
-a:hover {
-  color: #ccc;
-}
-
-pre {
-  font-size: 0.9rem;
-  font-family: monospace;
-  background-color: #151515;
-  overflow: auto;
-  padding: 1em;
-}
-
-.code-background {
-  background-color: #151515;
-}
-
-.code-normal {
-  color: #c0c5ce;
-}
-
-.code-string {
-  color:#a3be8c;
-}
-
-.code-number {
-  color: #d08770;
-}
diff --git a/templates/base.htm b/templates/base.htm
deleted file mode 100644
index b8b2f49..0000000
--- a/templates/base.htm
+++ /dev/null
@@ -1,15 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <link href="/static/style.css" rel="stylesheet">
-    <title>{% block title %}{{ title }} - PokeBot{% endblock %}</title>
-  </head>
-  <body>
-    <main>
-      {% block content %}{% endblock %}
-    </main>
-  </body>
-</html>
diff --git a/templates/docs/api.htm b/templates/docs/api.htm
deleted file mode 100644
index a973272..0000000
--- a/templates/docs/api.htm
+++ /dev/null
@@ -1,126 +0,0 @@
-{% extends "base.htm" %}
-
-{% block title %}API Documentation{% endblock %}
-
-{% block content %}
-<h1>API Documentation</h1>
-<nav>
-  <a href="/">Bots</a>
-  <a href="/docs/api">API</a>
-</nav>
-
-<h2>Bot list</h2>
-<p>Show a list of all bots.</p>
-
-<p><b>URL</b>: <span class="code-background">/api/bots</span></p>
-<p><b>Method</b>: <span class="code-background">GET</span></p>
-<p><b>Auth required</b>: <span class="code-background">NO</span></p>
-
-<h3>Success Response</h3>
-
-<p><b>Code</b>: <span class="code-background">200 OK</span></p>
-
-<h3>Content example</h3>
-
-<!-- Generated with syntect and adjusted -->
-<pre>
-<span class="code-normal">[
-</span><span class="code-normal">  {
-</span><span class="code-normal">    &quot;</span><span class="code-string">name</span><span class="code-normal">&quot;: &quot;</span><span class="code-string">MusicBot</span><span class="code-normal">&quot;,
-</span><span class="code-normal">    &quot;</span><span class="code-string">state</span><span class="code-normal">&quot;: &quot;</span><span class="code-string">Playing</span><span class="code-normal">&quot;,
-</span><span class="code-normal">    &quot;</span><span class="code-string">volume</span><span class="code-normal">&quot;: </span><span class="code-number">0.5</span><span class="code-normal">,
-</span><span class="code-normal">    &quot;</span><span class="code-string">position</span><span class="code-normal">&quot;: {
-</span><span class="code-normal">      &quot;</span><span class="code-string">secs</span><span class="code-normal">&quot;: </span><span class="code-number">10</span><span class="code-normal">,
-</span><span class="code-normal">      &quot;</span><span class="code-string">nanos</span><span class="code-normal">&quot;: </span><span class="code-number">63573687
-</span><span class="code-normal">    },
-</span><span class="code-normal">    &quot;</span><span class="code-string">currently_playing</span><span class="code-normal">&quot;: {
-</span><span class="code-normal">      &quot;</span><span class="code-string">url</span><span class="code-normal">&quot;: &quot;</span><span class="code-string">&lt;temp_url&gt;</span><span class="code-normal">&quot;,
-</span><span class="code-normal">      &quot;</span><span class="code-string">webpage_url</span><span class="code-normal">&quot;: &quot;</span><span class="code-string">https://www.youtube.com/watch?v=dQw4w9WgXcQ</span><span class="code-normal">&quot;,
-</span><span class="code-normal">      &quot;</span><span class="code-string">title</span><span class="code-normal">&quot;: &quot;</span><span class="code-string">Rick Astley - Never Gonna Give You Up (Video)</span><span class="code-normal">&quot;,
-</span><span class="code-normal">      &quot;</span><span class="code-string">thumbnail</span><span class="code-normal">&quot;: &quot;</span><span class="code-string">https://i.ytimg.com/vi/dQw4w9WgXcQ/maxresdefault.jpg</span><span class="code-normal">&quot;,
-</span><span class="code-normal">      &quot;</span><span class="code-string">duration</span><span class="code-normal">&quot;: {
-</span><span class="code-normal">        &quot;</span><span class="code-string">secs</span><span class="code-normal">&quot;: </span><span class="code-number">212</span><span class="code-normal">,
-</span><span class="code-normal">        &quot;</span><span class="code-string">nanos</span><span class="code-normal">&quot;: </span><span class="code-number">0
-</span><span class="code-normal">      }
-</span><span class="code-normal">    },
-</span><span class="code-normal">    &quot;</span><span class="code-string">playlist</span><span class="code-normal">&quot;: [
-</span><span class="code-normal">      {
-</span><span class="code-normal">        &quot;</span><span class="code-string">url</span><span class="code-normal">&quot;: &quot;</span><span class="code-string">&lt;temp_url&gt;</span><span class="code-normal">&quot;,
-</span><span class="code-normal">        &quot;</span><span class="code-string">webpage_url</span><span class="code-normal">&quot;: &quot;</span><span class="code-string">https://www.youtube.com/watch?v=dQw4w9WgXcQ</span><span class="code-normal">&quot;,
-</span><span class="code-normal">        &quot;</span><span class="code-string">title</span><span class="code-normal">&quot;: &quot;</span><span class="code-string">Rick Astley - Never Gonna Give You Up (Video)</span><span class="code-normal">&quot;,
-</span><span class="code-normal">        &quot;</span><span class="code-string">thumbnail</span><span class="code-normal">&quot;: &quot;</span><span class="code-string">https://i.ytimg.com/vi/dQw4w9WgXcQ/maxresdefault.jpg</span><span class="code-normal">&quot;,
-</span><span class="code-normal">        &quot;</span><span class="code-string">duration</span><span class="code-normal">&quot;: {
-</span><span class="code-normal">          &quot;</span><span class="code-string">secs</span><span class="code-normal">&quot;: </span><span class="code-number">212</span><span class="code-normal">,
-</span><span class="code-normal">          &quot;</span><span class="code-string">nanos</span><span class="code-normal">&quot;: </span><span class="code-number">0
-</span><span class="code-normal">        }
-</span><span class="code-normal">      }
-</span><span class="code-normal">    ]
-</span><span class="code-normal">  }
-</span><span class="code-normal">]
-</span></pre>
-
-
-<h2>Show Bot</h2>
-<p>Show a specific bot.</p>
-
-<p><b>URL</b>: <span class="code-background">/api/bots/:botname</span></p>
-<p><b>Method</b>: <span class="code-background">GET</span></p>
-<p><b>Auth required</b>: <span class="code-background">NO</span></p>
-
-<h3>Success Response</h3>
-<p><b>Code</b>: <span class="code-background">200 OK</span></p>
-
-<h3>Content example</h3>
-
-<!-- Generated with syntect and adjusted -->
-<pre>
-<span class="code-normal">{
-</span><span class="code-normal">  &quot;</span><span class="code-string">name</span><span class="code-normal">&quot;: &quot;</span><span class="code-string">MusicBot</span><span class="code-normal">&quot;,
-</span><span class="code-normal">  &quot;</span><span class="code-string">state</span><span class="code-normal">&quot;: &quot;</span><span class="code-string">Playing</span><span class="code-normal">&quot;,
-</span><span class="code-normal">  &quot;</span><span class="code-string">volume</span><span class="code-normal">&quot;: </span><span class="code-number">0.5</span><span class="code-normal">,
-</span><span class="code-normal">  &quot;</span><span class="code-string">position</span><span class="code-normal">&quot;: {
-</span><span class="code-normal">    &quot;</span><span class="code-string">secs</span><span class="code-normal">&quot;: </span><span class="code-number">142</span><span class="code-normal">,
-</span><span class="code-normal">    &quot;</span><span class="code-string">nanos</span><span class="code-normal">&quot;: </span><span class="code-number">690911766
-</span><span class="code-normal">  },
-</span><span class="code-normal">  &quot;</span><span class="code-string">currently_playing</span><span class="code-normal">&quot;: {
-</span><span class="code-normal">    &quot;</span><span class="code-string">url</span><span class="code-normal">&quot;: &quot;</span><span class="code-string">&lt;temp_url&gt;</span><span class="code-normal">&quot;,
-</span><span class="code-normal">    &quot;</span><span class="code-string">webpage_url</span><span class="code-normal">&quot;: &quot;</span><span class="code-string">https://www.youtube.com/watch?v=dQw4w9WgXcQ</span><span class="code-normal">&quot;,
-</span><span class="code-normal">    &quot;</span><span class="code-string">title</span><span class="code-normal">&quot;: &quot;</span><span class="code-string">Rick Astley - Never Gonna Give You Up (Video)</span><span class="code-normal">&quot;,
-</span><span class="code-normal">    &quot;</span><span class="code-string">thumbnail</span><span class="code-normal">&quot;: &quot;</span><span class="code-string">https://i.ytimg.com/vi/dQw4w9WgXcQ/maxresdefault.jpg</span><span class="code-normal">&quot;,
-</span><span class="code-normal">    &quot;</span><span class="code-string">duration</span><span class="code-normal">&quot;: {
-</span><span class="code-normal">      &quot;</span><span class="code-string">secs</span><span class="code-normal">&quot;: </span><span class="code-number">212</span><span class="code-normal">,
-</span><span class="code-normal">      &quot;</span><span class="code-string">nanos</span><span class="code-normal">&quot;: </span><span class="code-number">0
-</span><span class="code-normal">    }
-</span><span class="code-normal">  },
-</span><span class="code-normal">  &quot;</span><span class="code-string">playlist</span><span class="code-normal">&quot;: [
-</span><span class="code-normal">    {
-</span><span class="code-normal">      &quot;</span><span class="code-string">url</span><span class="code-normal">&quot;: &quot;</span><span class="code-string">&lt;temp_url&gt;</span><span class="code-normal">&quot;,
-</span><span class="code-normal">      &quot;</span><span class="code-string">webpage_url</span><span class="code-normal">&quot;: &quot;</span><span class="code-string">https://www.youtube.com/watch?v=dQw4w9WgXcQ</span><span class="code-normal">&quot;,
-</span><span class="code-normal">      &quot;</span><span class="code-string">title</span><span class="code-normal">&quot;: &quot;</span><span class="code-string">Rick Astley - Never Gonna Give You Up (Video)</span><span class="code-normal">&quot;,
-</span><span class="code-normal">      &quot;</span><span class="code-string">thumbnail</span><span class="code-normal">&quot;: &quot;</span><span class="code-string">https://i.ytimg.com/vi/dQw4w9WgXcQ/maxresdefault.jpg</span><span class="code-normal">&quot;,
-</span><span class="code-normal">      &quot;</span><span class="code-string">duration</span><span class="code-normal">&quot;: {
-</span><span class="code-normal">        &quot;</span><span class="code-string">secs</span><span class="code-normal">&quot;: </span><span class="code-number">212</span><span class="code-normal">,
-</span><span class="code-normal">        &quot;</span><span class="code-string">nanos</span><span class="code-normal">&quot;: </span><span class="code-number">0
-</span><span class="code-normal">      }
-</span><span class="code-normal">    }
-</span><span class="code-normal">  ]
-</span><span class="code-normal">}
-</span></pre>
-
-<h3>Error Response</h3>
-
-<p><b>Condition</b>: If ':botname' is not connected to TeamSpeak.</p>
-
-<p><b>Code</b>: <span class="code-background">404 NOT FOUND</span></p>
-
-<b>Content</b>:
-
-<!-- Generated with syntect and adjusted -->
-<pre>
-<span class="code-normal">{
-</span><span class="code-normal">  &quot;</span><span class="code-string">error</span><span class="code-normal">&quot;: &quot;</span><span class="code-string">Not Found</span><span class="code-normal">&quot;,
-</span><span class="code-normal">  &quot;</span><span class="code-string">description</span><span class="code-normal">&quot;: &quot;</span><span class="code-string">The requested resource was not found</span><span class="code-normal">&quot;
-</span><span class="code-normal">}
-</span></pre>
-
-{% endblock %}
diff --git a/templates/index.htm b/templates/index.htm
deleted file mode 100644
index eed31f3..0000000
--- a/templates/index.htm
+++ /dev/null
@@ -1,36 +0,0 @@
-{% extends "base.htm" %}
-
-{% block title %}Overview{% endblock %}
-
-{% block content %}
-<h1>Bots</h1>
-<form action="/front-end" method="POST">
-  <input type="hidden" placeholder="Enter front end" name="front-end" value="tmtu">
-  <button type="submit">tmtu-mode</button>
-</form>
-<nav>
-  <a href="/">Bots</a>
-  <a href="/docs/api">API</a>
-</nav>
-
-<ul>
-  {% for bot in bots %}
-    <h2>{{ bot.name }}</h1>
-    <div>State: {{ bot.state }}</div>
-    <div>Volume: {{ bot.volume * 100.0 }}%</div>
-    {% match bot.currently_playing %}
-      {% when Some with (current) %}
-        <span>Currently playing:</span>
-        {% let item = current %}
-        {% include "song.htm" %}
-      {% when None %}
-    {% endmatch %}
-
-    {% for item in bot.playlist %}
-      <li>
-        {% include "song.htm" %}
-      </li>
-    {% endfor %}
-  {% endfor %}
-</ul>
-{% endblock %}
diff --git a/templates/song.htm b/templates/song.htm
deleted file mode 100644
index 072567a..0000000
--- a/templates/song.htm
+++ /dev/null
@@ -1,7 +0,0 @@
-<a href="{{ item.webpage_url }}">{{ item.title }}</a>
-<span>({{ item.duration|fmt_duration }})</span>
-{% match item.thumbnail %}
-  {% when Some with (thumbnail) %}
-    <img src="{{ thumbnail }}" height="128">
-  {% when None %}
-{% endmatch %}
diff --git a/templates/tmtu/index.htm b/templates/tmtu/index.htm
deleted file mode 100644
index 785e653..0000000
--- a/templates/tmtu/index.htm
+++ /dev/null
@@ -1,145 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <title>tmtu mode</title>
-    <style type="text/css">
-      body {
-        margin: 16px;
-      }
-      td {
-        padding-right: 16px;
-        padding-top: 1px;
-        padding-bottom: : 1px;
-      }
-      td, th {
-        vertical-align:top;
-      }
-      .tableheader td {
-        color: gray;
-        border-bottom: 1px solid gray;
-      }
-      .stat {
-        color: gray;
-        text-align: right;
-        white-space: nowrap;
-        padding-left: 8px
-      }
-      .tracktable {
-        border-left: 1px solid gray;
-      }
-      .tracktable tr:hover {
-        background-color: #E0E0E0;
-      }
-      .bottable tr:hover {
-        background-color: #E0E0E0;
-      }
-      #test:hover {
-        background: 2px solid red;
-      }
-      a {
-        color: teal;
-      }
-      a:hover {
-        color: red;
-      }
-      a[visited] {
-        color: navy
-      }
-      .addedby {
-        color: darkorange;
-      }
-      .botname {
-      }
-      .selected {
-        font-weight: 700;
-      }
-      .playing {
-        background: PaleGreen;
-      }
-    </style>
-  </head>
-  <body>
-    <table>
-      <tr>
-        <td colspan="2">
-          <h1>PokeBot</h1>
-          <p>A web interface for inspecting currently playing audio in PokeBot. Select an instance of the bot to view it's playlist and history.</p>
-          <nav style="display: inline-block;">
-            <ol>
-                {% let bot_name %}
-                {% match bot %}
-                  {% when Some with (bot) %}
-                    {% let bot_name = bot.name.clone() %}
-                  {% when None %}
-                    {% let bot_name = "".to_owned() %}
-                {% endmatch %}
-              {% for name in bot_names %}
-                {% if name.clone() == bot_name %}
-                  <li><a href="/bot/{{ name }}" class="botname selected">{{ name }}</a></li>
-                {% else %}
-                  <li><a href="/bot/{{ name }}" class="botname">{{ name }}</a></li>
-                {% endif %}
-              {% endfor %}
-            </ol>
-          </nav>
-        </td>
-      </tr>
-      {% match bot %}
-        {% when Some with (bot) %}
-          <tr>
-            <td colspan="2">
-              <h2>Status</h2>
-              <div class="{{ bot.state|lower }}" style="padding: 5px;">
-                {% match bot.currently_playing %}
-                  {% when Some with (current) %}
-                  <p>Currently playing: <a href="{{ current.webpage_url }}">{{ current.title }}</a></p>
-                  <p><strong>{{ bot.position|fmt_duration }} / {{ current.duration|fmt_duration }}</strong>
-                    {% match current.duration %}
-                      {% when Some with (duration) %}
-                        {% let position %}
-                        {% match bot.position %}
-                          {% when Some with (pos) %}
-                            {% let position = pos.as_secs_f64() %}
-                          {% when None %}
-                            {% let position = 0.0 %}
-                        {% endmatch %}
-                        {% let progress = position / duration.as_secs_f64() %}
-                        {% let percent = progress * 100.0 %}
-                        <progress value="{{ percent }}" max="100" title="test"></progress></p>
-                      {% when None %}
-                        <progress value="0" max="100" title="test"></progress></p>
-                    {% endmatch %}
-                  {% when None %}
-                {% endmatch %}
-              </div>
-            </td>
-          </tr>
-          <tr>
-            <td>
-              <h2>Playlist</h2>
-              <table class="tracktable" cellspacing="0" cellpadding="0">
-                <tr class="tableheader">
-                  <td class="stat">#</td>
-                  <td>track</td>
-                  <td>length</td>
-                  <td>added by</td>
-                </tr>
-                {% for item in bot.playlist %}
-                  <tr>
-                    <td class="stat">{{ loop.index }}</td>
-                    <td><a href="{{ item.webpage_url }}">{{ item.title }}</a></td>
-                    <td>
-                      {% let duration = item.duration %}
-                      {{ duration|fmt_duration }}
-                    </td>
-                    <td>{{ item.added_by }}</td>
-                  </tr>
-                {% endfor %}
-              </table>
-            </td>
-          </tr>
-        {% when None %}
-        {% endmatch %}
-    </table>
-  </body>
-</html>
diff --git a/web_server/static/fonts/.gitkeep b/web_server/static/fonts/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/web_server/static/style.css b/web_server/static/style.css
new file mode 100644
index 0000000..09a985c
--- /dev/null
+++ b/web_server/static/style.css
@@ -0,0 +1,63 @@
+@font-face {
+  font-family: 'roboto-regular';
+  src: url('fonts/Roboto-Regular.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'roboto-light';
+  src: url('fonts/Roboto-Light.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'roboto-bold';
+  src: url('fonts/Roboto-Bold.ttf') format('truetype');
+}
+
+body {
+  background-color: #151515;
+}
+
+main {
+  margin: auto;
+  max-width: 800px;
+  padding: 1em;
+  background-color: #202020;
+  color: #eee;
+  font-family: 'roboto-regular', Arial;
+}
+
+nav > a {
+  font-size: 1.4rem;
+}
+
+a, a:visited {
+  color: #eee;
+}
+
+a:hover {
+  color: #ccc;
+}
+
+pre {
+  font-size: 0.9rem;
+  font-family: monospace;
+  background-color: #151515;
+  overflow: auto;
+  padding: 1em;
+}
+
+.code-background {
+  background-color: #151515;
+}
+
+.code-normal {
+  color: #c0c5ce;
+}
+
+.code-string {
+  color:#a3be8c;
+}
+
+.code-number {
+  color: #d08770;
+}
diff --git a/web_server/templates/base.htm b/web_server/templates/base.htm
new file mode 100644
index 0000000..b8b2f49
--- /dev/null
+++ b/web_server/templates/base.htm
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link href="/static/style.css" rel="stylesheet">
+    <title>{% block title %}{{ title }} - PokeBot{% endblock %}</title>
+  </head>
+  <body>
+    <main>
+      {% block content %}{% endblock %}
+    </main>
+  </body>
+</html>
diff --git a/web_server/templates/docs/api.htm b/web_server/templates/docs/api.htm
new file mode 100644
index 0000000..a973272
--- /dev/null
+++ b/web_server/templates/docs/api.htm
@@ -0,0 +1,126 @@
+{% extends "base.htm" %}
+
+{% block title %}API Documentation{% endblock %}
+
+{% block content %}
+<h1>API Documentation</h1>
+<nav>
+  <a href="/">Bots</a>
+  <a href="/docs/api">API</a>
+</nav>
+
+<h2>Bot list</h2>
+<p>Show a list of all bots.</p>
+
+<p><b>URL</b>: <span class="code-background">/api/bots</span></p>
+<p><b>Method</b>: <span class="code-background">GET</span></p>
+<p><b>Auth required</b>: <span class="code-background">NO</span></p>
+
+<h3>Success Response</h3>
+
+<p><b>Code</b>: <span class="code-background">200 OK</span></p>
+
+<h3>Content example</h3>
+
+<!-- Generated with syntect and adjusted -->
+<pre>
+<span class="code-normal">[
+</span><span class="code-normal">  {
+</span><span class="code-normal">    &quot;</span><span class="code-string">name</span><span class="code-normal">&quot;: &quot;</span><span class="code-string">MusicBot</span><span class="code-normal">&quot;,
+</span><span class="code-normal">    &quot;</span><span class="code-string">state</span><span class="code-normal">&quot;: &quot;</span><span class="code-string">Playing</span><span class="code-normal">&quot;,
+</span><span class="code-normal">    &quot;</span><span class="code-string">volume</span><span class="code-normal">&quot;: </span><span class="code-number">0.5</span><span class="code-normal">,
+</span><span class="code-normal">    &quot;</span><span class="code-string">position</span><span class="code-normal">&quot;: {
+</span><span class="code-normal">      &quot;</span><span class="code-string">secs</span><span class="code-normal">&quot;: </span><span class="code-number">10</span><span class="code-normal">,
+</span><span class="code-normal">      &quot;</span><span class="code-string">nanos</span><span class="code-normal">&quot;: </span><span class="code-number">63573687
+</span><span class="code-normal">    },
+</span><span class="code-normal">    &quot;</span><span class="code-string">currently_playing</span><span class="code-normal">&quot;: {
+</span><span class="code-normal">      &quot;</span><span class="code-string">url</span><span class="code-normal">&quot;: &quot;</span><span class="code-string">&lt;temp_url&gt;</span><span class="code-normal">&quot;,
+</span><span class="code-normal">      &quot;</span><span class="code-string">webpage_url</span><span class="code-normal">&quot;: &quot;</span><span class="code-string">https://www.youtube.com/watch?v=dQw4w9WgXcQ</span><span class="code-normal">&quot;,
+</span><span class="code-normal">      &quot;</span><span class="code-string">title</span><span class="code-normal">&quot;: &quot;</span><span class="code-string">Rick Astley - Never Gonna Give You Up (Video)</span><span class="code-normal">&quot;,
+</span><span class="code-normal">      &quot;</span><span class="code-string">thumbnail</span><span class="code-normal">&quot;: &quot;</span><span class="code-string">https://i.ytimg.com/vi/dQw4w9WgXcQ/maxresdefault.jpg</span><span class="code-normal">&quot;,
+</span><span class="code-normal">      &quot;</span><span class="code-string">duration</span><span class="code-normal">&quot;: {
+</span><span class="code-normal">        &quot;</span><span class="code-string">secs</span><span class="code-normal">&quot;: </span><span class="code-number">212</span><span class="code-normal">,
+</span><span class="code-normal">        &quot;</span><span class="code-string">nanos</span><span class="code-normal">&quot;: </span><span class="code-number">0
+</span><span class="code-normal">      }
+</span><span class="code-normal">    },
+</span><span class="code-normal">    &quot;</span><span class="code-string">playlist</span><span class="code-normal">&quot;: [
+</span><span class="code-normal">      {
+</span><span class="code-normal">        &quot;</span><span class="code-string">url</span><span class="code-normal">&quot;: &quot;</span><span class="code-string">&lt;temp_url&gt;</span><span class="code-normal">&quot;,
+</span><span class="code-normal">        &quot;</span><span class="code-string">webpage_url</span><span class="code-normal">&quot;: &quot;</span><span class="code-string">https://www.youtube.com/watch?v=dQw4w9WgXcQ</span><span class="code-normal">&quot;,
+</span><span class="code-normal">        &quot;</span><span class="code-string">title</span><span class="code-normal">&quot;: &quot;</span><span class="code-string">Rick Astley - Never Gonna Give You Up (Video)</span><span class="code-normal">&quot;,
+</span><span class="code-normal">        &quot;</span><span class="code-string">thumbnail</span><span class="code-normal">&quot;: &quot;</span><span class="code-string">https://i.ytimg.com/vi/dQw4w9WgXcQ/maxresdefault.jpg</span><span class="code-normal">&quot;,
+</span><span class="code-normal">        &quot;</span><span class="code-string">duration</span><span class="code-normal">&quot;: {
+</span><span class="code-normal">          &quot;</span><span class="code-string">secs</span><span class="code-normal">&quot;: </span><span class="code-number">212</span><span class="code-normal">,
+</span><span class="code-normal">          &quot;</span><span class="code-string">nanos</span><span class="code-normal">&quot;: </span><span class="code-number">0
+</span><span class="code-normal">        }
+</span><span class="code-normal">      }
+</span><span class="code-normal">    ]
+</span><span class="code-normal">  }
+</span><span class="code-normal">]
+</span></pre>
+
+
+<h2>Show Bot</h2>
+<p>Show a specific bot.</p>
+
+<p><b>URL</b>: <span class="code-background">/api/bots/:botname</span></p>
+<p><b>Method</b>: <span class="code-background">GET</span></p>
+<p><b>Auth required</b>: <span class="code-background">NO</span></p>
+
+<h3>Success Response</h3>
+<p><b>Code</b>: <span class="code-background">200 OK</span></p>
+
+<h3>Content example</h3>
+
+<!-- Generated with syntect and adjusted -->
+<pre>
+<span class="code-normal">{
+</span><span class="code-normal">  &quot;</span><span class="code-string">name</span><span class="code-normal">&quot;: &quot;</span><span class="code-string">MusicBot</span><span class="code-normal">&quot;,
+</span><span class="code-normal">  &quot;</span><span class="code-string">state</span><span class="code-normal">&quot;: &quot;</span><span class="code-string">Playing</span><span class="code-normal">&quot;,
+</span><span class="code-normal">  &quot;</span><span class="code-string">volume</span><span class="code-normal">&quot;: </span><span class="code-number">0.5</span><span class="code-normal">,
+</span><span class="code-normal">  &quot;</span><span class="code-string">position</span><span class="code-normal">&quot;: {
+</span><span class="code-normal">    &quot;</span><span class="code-string">secs</span><span class="code-normal">&quot;: </span><span class="code-number">142</span><span class="code-normal">,
+</span><span class="code-normal">    &quot;</span><span class="code-string">nanos</span><span class="code-normal">&quot;: </span><span class="code-number">690911766
+</span><span class="code-normal">  },
+</span><span class="code-normal">  &quot;</span><span class="code-string">currently_playing</span><span class="code-normal">&quot;: {
+</span><span class="code-normal">    &quot;</span><span class="code-string">url</span><span class="code-normal">&quot;: &quot;</span><span class="code-string">&lt;temp_url&gt;</span><span class="code-normal">&quot;,
+</span><span class="code-normal">    &quot;</span><span class="code-string">webpage_url</span><span class="code-normal">&quot;: &quot;</span><span class="code-string">https://www.youtube.com/watch?v=dQw4w9WgXcQ</span><span class="code-normal">&quot;,
+</span><span class="code-normal">    &quot;</span><span class="code-string">title</span><span class="code-normal">&quot;: &quot;</span><span class="code-string">Rick Astley - Never Gonna Give You Up (Video)</span><span class="code-normal">&quot;,
+</span><span class="code-normal">    &quot;</span><span class="code-string">thumbnail</span><span class="code-normal">&quot;: &quot;</span><span class="code-string">https://i.ytimg.com/vi/dQw4w9WgXcQ/maxresdefault.jpg</span><span class="code-normal">&quot;,
+</span><span class="code-normal">    &quot;</span><span class="code-string">duration</span><span class="code-normal">&quot;: {
+</span><span class="code-normal">      &quot;</span><span class="code-string">secs</span><span class="code-normal">&quot;: </span><span class="code-number">212</span><span class="code-normal">,
+</span><span class="code-normal">      &quot;</span><span class="code-string">nanos</span><span class="code-normal">&quot;: </span><span class="code-number">0
+</span><span class="code-normal">    }
+</span><span class="code-normal">  },
+</span><span class="code-normal">  &quot;</span><span class="code-string">playlist</span><span class="code-normal">&quot;: [
+</span><span class="code-normal">    {
+</span><span class="code-normal">      &quot;</span><span class="code-string">url</span><span class="code-normal">&quot;: &quot;</span><span class="code-string">&lt;temp_url&gt;</span><span class="code-normal">&quot;,
+</span><span class="code-normal">      &quot;</span><span class="code-string">webpage_url</span><span class="code-normal">&quot;: &quot;</span><span class="code-string">https://www.youtube.com/watch?v=dQw4w9WgXcQ</span><span class="code-normal">&quot;,
+</span><span class="code-normal">      &quot;</span><span class="code-string">title</span><span class="code-normal">&quot;: &quot;</span><span class="code-string">Rick Astley - Never Gonna Give You Up (Video)</span><span class="code-normal">&quot;,
+</span><span class="code-normal">      &quot;</span><span class="code-string">thumbnail</span><span class="code-normal">&quot;: &quot;</span><span class="code-string">https://i.ytimg.com/vi/dQw4w9WgXcQ/maxresdefault.jpg</span><span class="code-normal">&quot;,
+</span><span class="code-normal">      &quot;</span><span class="code-string">duration</span><span class="code-normal">&quot;: {
+</span><span class="code-normal">        &quot;</span><span class="code-string">secs</span><span class="code-normal">&quot;: </span><span class="code-number">212</span><span class="code-normal">,
+</span><span class="code-normal">        &quot;</span><span class="code-string">nanos</span><span class="code-normal">&quot;: </span><span class="code-number">0
+</span><span class="code-normal">      }
+</span><span class="code-normal">    }
+</span><span class="code-normal">  ]
+</span><span class="code-normal">}
+</span></pre>
+
+<h3>Error Response</h3>
+
+<p><b>Condition</b>: If ':botname' is not connected to TeamSpeak.</p>
+
+<p><b>Code</b>: <span class="code-background">404 NOT FOUND</span></p>
+
+<b>Content</b>:
+
+<!-- Generated with syntect and adjusted -->
+<pre>
+<span class="code-normal">{
+</span><span class="code-normal">  &quot;</span><span class="code-string">error</span><span class="code-normal">&quot;: &quot;</span><span class="code-string">Not Found</span><span class="code-normal">&quot;,
+</span><span class="code-normal">  &quot;</span><span class="code-string">description</span><span class="code-normal">&quot;: &quot;</span><span class="code-string">The requested resource was not found</span><span class="code-normal">&quot;
+</span><span class="code-normal">}
+</span></pre>
+
+{% endblock %}
diff --git a/web_server/templates/index.htm b/web_server/templates/index.htm
new file mode 100644
index 0000000..eed31f3
--- /dev/null
+++ b/web_server/templates/index.htm
@@ -0,0 +1,36 @@
+{% extends "base.htm" %}
+
+{% block title %}Overview{% endblock %}
+
+{% block content %}
+<h1>Bots</h1>
+<form action="/front-end" method="POST">
+  <input type="hidden" placeholder="Enter front end" name="front-end" value="tmtu">
+  <button type="submit">tmtu-mode</button>
+</form>
+<nav>
+  <a href="/">Bots</a>
+  <a href="/docs/api">API</a>
+</nav>
+
+<ul>
+  {% for bot in bots %}
+    <h2>{{ bot.name }}</h1>
+    <div>State: {{ bot.state }}</div>
+    <div>Volume: {{ bot.volume * 100.0 }}%</div>
+    {% match bot.currently_playing %}
+      {% when Some with (current) %}
+        <span>Currently playing:</span>
+        {% let item = current %}
+        {% include "song.htm" %}
+      {% when None %}
+    {% endmatch %}
+
+    {% for item in bot.playlist %}
+      <li>
+        {% include "song.htm" %}
+      </li>
+    {% endfor %}
+  {% endfor %}
+</ul>
+{% endblock %}
diff --git a/web_server/templates/song.htm b/web_server/templates/song.htm
new file mode 100644
index 0000000..072567a
--- /dev/null
+++ b/web_server/templates/song.htm
@@ -0,0 +1,7 @@
+<a href="{{ item.webpage_url }}">{{ item.title }}</a>
+<span>({{ item.duration|fmt_duration }})</span>
+{% match item.thumbnail %}
+  {% when Some with (thumbnail) %}
+    <img src="{{ thumbnail }}" height="128">
+  {% when None %}
+{% endmatch %}
diff --git a/web_server/templates/tmtu/index.htm b/web_server/templates/tmtu/index.htm
new file mode 100644
index 0000000..785e653
--- /dev/null
+++ b/web_server/templates/tmtu/index.htm
@@ -0,0 +1,145 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>tmtu mode</title>
+    <style type="text/css">
+      body {
+        margin: 16px;
+      }
+      td {
+        padding-right: 16px;
+        padding-top: 1px;
+        padding-bottom: : 1px;
+      }
+      td, th {
+        vertical-align:top;
+      }
+      .tableheader td {
+        color: gray;
+        border-bottom: 1px solid gray;
+      }
+      .stat {
+        color: gray;
+        text-align: right;
+        white-space: nowrap;
+        padding-left: 8px
+      }
+      .tracktable {
+        border-left: 1px solid gray;
+      }
+      .tracktable tr:hover {
+        background-color: #E0E0E0;
+      }
+      .bottable tr:hover {
+        background-color: #E0E0E0;
+      }
+      #test:hover {
+        background: 2px solid red;
+      }
+      a {
+        color: teal;
+      }
+      a:hover {
+        color: red;
+      }
+      a[visited] {
+        color: navy
+      }
+      .addedby {
+        color: darkorange;
+      }
+      .botname {
+      }
+      .selected {
+        font-weight: 700;
+      }
+      .playing {
+        background: PaleGreen;
+      }
+    </style>
+  </head>
+  <body>
+    <table>
+      <tr>
+        <td colspan="2">
+          <h1>PokeBot</h1>
+          <p>A web interface for inspecting currently playing audio in PokeBot. Select an instance of the bot to view it's playlist and history.</p>
+          <nav style="display: inline-block;">
+            <ol>
+                {% let bot_name %}
+                {% match bot %}
+                  {% when Some with (bot) %}
+                    {% let bot_name = bot.name.clone() %}
+                  {% when None %}
+                    {% let bot_name = "".to_owned() %}
+                {% endmatch %}
+              {% for name in bot_names %}
+                {% if name.clone() == bot_name %}
+                  <li><a href="/bot/{{ name }}" class="botname selected">{{ name }}</a></li>
+                {% else %}
+                  <li><a href="/bot/{{ name }}" class="botname">{{ name }}</a></li>
+                {% endif %}
+              {% endfor %}
+            </ol>
+          </nav>
+        </td>
+      </tr>
+      {% match bot %}
+        {% when Some with (bot) %}
+          <tr>
+            <td colspan="2">
+              <h2>Status</h2>
+              <div class="{{ bot.state|lower }}" style="padding: 5px;">
+                {% match bot.currently_playing %}
+                  {% when Some with (current) %}
+                  <p>Currently playing: <a href="{{ current.webpage_url }}">{{ current.title }}</a></p>
+                  <p><strong>{{ bot.position|fmt_duration }} / {{ current.duration|fmt_duration }}</strong>
+                    {% match current.duration %}
+                      {% when Some with (duration) %}
+                        {% let position %}
+                        {% match bot.position %}
+                          {% when Some with (pos) %}
+                            {% let position = pos.as_secs_f64() %}
+                          {% when None %}
+                            {% let position = 0.0 %}
+                        {% endmatch %}
+                        {% let progress = position / duration.as_secs_f64() %}
+                        {% let percent = progress * 100.0 %}
+                        <progress value="{{ percent }}" max="100" title="test"></progress></p>
+                      {% when None %}
+                        <progress value="0" max="100" title="test"></progress></p>
+                    {% endmatch %}
+                  {% when None %}
+                {% endmatch %}
+              </div>
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <h2>Playlist</h2>
+              <table class="tracktable" cellspacing="0" cellpadding="0">
+                <tr class="tableheader">
+                  <td class="stat">#</td>
+                  <td>track</td>
+                  <td>length</td>
+                  <td>added by</td>
+                </tr>
+                {% for item in bot.playlist %}
+                  <tr>
+                    <td class="stat">{{ loop.index }}</td>
+                    <td><a href="{{ item.webpage_url }}">{{ item.title }}</a></td>
+                    <td>
+                      {% let duration = item.duration %}
+                      {{ duration|fmt_duration }}
+                    </td>
+                    <td>{{ item.added_by }}</td>
+                  </tr>
+                {% endfor %}
+              </table>
+            </td>
+          </tr>
+        {% when None %}
+        {% endmatch %}
+    </table>
+  </body>
+</html>
-- 
cgit v1.2.3-70-g09d2