* Moving frontend to api along

THere's also some deps in there but i cb fucked to doc that

api/Cargo.toml

@@ -6,7 +6,8 @@ edition = "2018"
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
 
 [dependencies]
-rocket = "0.4"
+rocket = "0.5.0-rc.1"
+tokio = "1.0"
 serde = { version = "1.0", features = [ "derive" ] }
 base64 = "0.13.0"
 
@@ -14,3 +15,7 @@ base64 = "0.13.0"
 version = "0.4.10"
 default-features = false
 features = ["serve", "json"]
+
+[dependencies.rocket_dyn_templates]
+version = "0.1.0-rc.1"
+features = ["tera"]

api/src/main.rs

@@ -1,17 +1,20 @@
 #![feature(decl_macro)]
 #[macro_use] extern crate rocket;
 use std::env;
+use rocket_dyn_templates::Template;
 
-mod video;
+mod page;
 
-fn main() {
+#[tokio::main]
+async fn main() {
     // emoji's crash my terminal
-    env::set_var("ROCKET_CLI_COLORS", "off");
+    env::set_var("ROCKET_CLI_COLORS", "false");
     /*
      * Some of the target vars that we look for
      * CLIP_DIR
      */
-    let _ = rocket::ignite()
-        .mount("/api", routes![video::list_categories, video::list_videos])
-        .launch();
+    let _ = rocket::build()
+        .mount("/", routes![page::home, page::category, page::video, page::files])
+        .attach(Template::fairing())
+        .launch().await;
 }

api/src/page.rs

@@ -0,0 +1,36 @@
+use serde::Serialize;
+use rocket_dyn_templates::Template;
+use rocket::fs::NamedFile;
+use std::path::{Path, PathBuf};
+use std::collections::HashMap;
+
+
+#[get("/")]
+pub async fn home() -> Template {
+    // WARN: this is just to get the templates to behave but we're still
+    // doing everything the browser for the home page
+    let mut h: HashMap<&'static str, &'static str> = HashMap::new();
+    h.insert("script_src", "/js/index.js");
+    h.insert("page", "home");
+
+    return Template::render("list", &h);
+}
+
+#[get("/category/<cat>")]
+pub async fn category(cat: String) -> Template {
+    let mut h: HashMap<&'static str, &'static str> = HashMap::new();
+    h.insert("script_src", "/js/category.js");
+    h.insert("page", "category");
+
+    return Template::render("list", &h);
+}
+
+#[get("/clip/<id>")]
+pub async fn video(id: String) -> Template {
+    return Template::render("video", &{})
+}
+
+#[get("/<file..>")]
+pub async fn files(file: PathBuf) -> Option<NamedFile> {
+    NamedFile::open(Path::new("static/").join(file)).await.ok()
+}

api/static/favicon.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:0cfdedb04d45802c1c008c9610bda2df8e3482f195bd254c11ebe07205e2bd5d
+size 8560

api/static/js/collection.js

@@ -0,0 +1,50 @@
+"use strict";
+// This module takes care of pulling down videos for the given category
+class Video {
+    constructor(raw) {
+        this.title = raw['name'];
+        this.category = raw['category'];
+        this.thumbnail_b64 = raw['thumbnail'];
+    }
+    title_link() {
+        let container = document.createElement('h2');
+        let link = document.createElement('a');
+        link.href = `/video?c=${this.category}&v=${this.title}`;
+        link.text = this.title;
+        container.appendChild(link);
+        return container;
+    }
+}
+function get_category() {
+    // Used to modify the DOM
+    let params = (new URL(document.location.toString())).searchParams;
+    return params.get('c');
+}
+function base_url() {
+    const loc = document.location;
+    return loc.protocol + '//' + loc.host;
+}
+function fetch_videos() {
+    const category = get_category();
+    if (!category) {
+        return [];
+    }
+    const endpoint = base_url() + `/api/categories?c=${category}`;
+    let xml = new XMLHttpRequest();
+    xml.open('GET', endpoint, false); // sync request
+    xml.send(null); // no params required
+    if (xml.getResponseHeader('Content-Type') == 'application/json') {
+        let raw = JSON.parse(xml.responseText);
+        for (const vid of raw['videos']) {
+            console.log(vid);
+        }
+    }
+    return [];
+}
+function ready(e) {
+    if (document.readyState != 'complete') {
+        return e;
+    }
+    const video_data = fetch_videos();
+}
+document.addEventListener('readystatechange', ready);

api/static/js/index.js

@@ -0,0 +1,57 @@
+"use strict";
+class Category {
+    constructor(raw) {
+        this.name = raw['name'];
+        this.thumbnail_b64 = raw['thumbnail'];
+    }
+    title_link() {
+        let container = document.createElement('h2');
+        let link = document.createElement('a');
+        link.href = `/collection?c=${this.name}`;
+        link.text = this.name;
+        container.appendChild(link);
+        return container;
+    }
+    thumbnail_div() {
+        let nail = document.createElement('img');
+        nail.className = 'pure-img';
+        if (!(this.thumbnail_b64 == null || this.thumbnail_b64.length == 0)) {
+            nail.setAttribute('src', `data:image/jpg;base64,${this.thumbnail_b64}`);
+        }
+        else {
+            nail.setAttribute('src', '/cantfindshit.gif');
+        }
+        return nail;
+    }
+    as_div() {
+        let container = document.createElement('div');
+        container.className = 'video-block';
+        let title = this.title_link();
+        let thumbnail = this.thumbnail_div();
+        container.appendChild(title);
+        container.appendChild(thumbnail);
+        // Dump gallery onto the main page
+        document.getElementById('main-container').appendChild(container);
+        return container;
+    }
+}
+function ready_handler(e) {
+    // Only let this make a get request once we're ready on the page
+    if (document.readyState != 'complete') {
+        return e;
+    }
+    // All we do here is basically make a get request to /api/categories
+    const endpoint = 'http://localhost/api/categories';
+    let xml = new XMLHttpRequest();
+    xml.open('GET', endpoint, false); // sync request
+    xml.send(null); // nothing required for stuff
+    if (xml.getResponseHeader('Content-Type') == 'application/json') {
+        let raw = JSON.parse(xml.responseText);
+        for (const cat_raw of raw['categories']) {
+            let cat = new Category(cat_raw);
+            cat.as_div();
+        }
+    }
+    return e;
+}
+document.addEventListener('readystatechange', ready_handler);

api/templates/list.html.tera

@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en"><head>
+	<meta name="generator" content="Hugo 0.88.1" />
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<link rel="stylesheet" type="text/css" href="/css/style.css">
+	<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous">
+	<title>Shockrah&#39;s Clips</title>
+	<link rel="shortcut icon" type="image/png" href="/static/favicon.png"/>
+	{% if page == "category"  %}
+		<meta property="og:title" content="">
+		<meta property="og:site_name" content="">
+		<meta property="og:url" content="">
+		<meta property="og:description" content="">
+		<meta property="og:type" content="website">
+		<meta property="og:image" content="">
+	{# Otherwise we defautl to the home tags #}
+	{% else %}
+		<meta property="og:title" content="Shockrah&#39;s Clips">
+		<meta property="og:site_name" content="Clippable">
+		<meta property="og:url" content="https://clips.shockrah.xyz/">
+		<meta property="og:description" content="Clips I think are kinda kewl">
+		<meta property="og:type" content="website">
+		<meta property="og:image" content="/favicon.png">
+	{% endif %}
+	<script src="{{script_src}}"></script>
+</head>
+<body>
+	<div id="layout">
+		<div class="content">
+			<h1></h1>
+			<div class="video-gallery" id="main-container">
+			</div>
+		</div>
+	</div>
+</body>
+</html>