+ admin::populate_video_list now populates t he video list

The ul here is meant to serve as a quick
way to check what videos are being served
as well as removing videos

+ category::VideoMeta::as_li built for admin video list
This is basically how we spit this out onto
the DOM

api/src/category.rs

@@ -56,6 +56,8 @@ pub fn get_category_thumbnail(category: &str) -> std::io::Result<String> {
     })
 }
 
+/// Returns a List of categories
+/// Primarily used on the main page
 /// WARN: misconfigured servers are just going to get shafted and serve up
 /// a tonne of 500's
 #[get("/categories")]

ts/admin.ts

@@ -1,8 +1,8 @@
 // This module serves as convenience for admin users to upload/remove videos 
 // from their clippable instance. There are no fancy tricks as this is meant
 // purely to be a UX thing.
-//import { fetch_category_videos } from './category'
-//import { fetch_categories } from './index'
+import { fetch_category_videos, VideoMeta } from './category'
+import { fetch_categories } from './index'
 
 
 let UID: null|string = null
@@ -79,7 +79,6 @@ export function populate_meta_form() {
 	let file = document.getElementById('video-file') as HTMLInputElement
 
 	// When we remove the file this array becomes 0 so the check is required
-	console.log('files found', file.files.length)
 	if(file.files.length == 0) {
 		document.getElementById('video-meta').hidden = true
 	} else {
@@ -93,6 +92,24 @@ export function populate_meta_form() {
 	}
 }
 
+async function populate_video_list() {
+	const categories = await fetch_categories()
+	let videos: Array<VideoMeta> = []
+
+	for(const cat of categories) {
+		const vids = await fetch_category_videos(cat.name)
+		for(const v of vids) {
+			videos.push(v)
+		}
+	}
+
+	const list_ref = document.getElementById("videos-list")
+	for(const video of videos) {
+		list_ref.appendChild(video.as_li())
+	}
+}
+
+
 document.addEventListener('DOMContentLoaded', () => {
 	/*
 	 * Setting up hooks required for functionality
@@ -100,4 +117,7 @@ document.addEventListener('DOMContentLoaded', () => {
 	document.getElementById('video-file').onchange = populate_meta_form
 	document.getElementById('verify-login-btn').onclick = confirm_auth
 	document.getElementById('confirm-upload-btn').onclick = upload_video
+	populate_video_list()
+	.then(value => console.log('succesful list population: ', value))
+	.catch(reason => console.log('Failure in populate_video_list', reason))
 })

ts/category.ts

@@ -1,8 +1,9 @@
-class VideoMeta {
+export class VideoMeta {
 	name: string|null
 	thumbnail: string|null
 	category: string
 	basename: string|null
+	href: string
 
 	constructor(raw: any) {
 		this.name = raw['name']
@@ -14,6 +15,8 @@ class VideoMeta {
 		this.basename = this.name ?
 			this.name.slice(0, this.name.lastIndexOf('.')) :
 			null
+
+		this.href = `/clip/${this.category}/${this.basename}`
 	}
 
 	private clean_link(link: string) : string {
@@ -28,7 +31,7 @@ class VideoMeta {
 		let container = document.createElement('h2')
 		let link = document.createElement('a')
 		if(this.name) {
-			link.href = `/clip/${this.category}/${this.basename}`
+			link.href = this.href
 			link.text = this.clean_link(this.name)
 		} else  {
 			link.href = '#'
@@ -77,10 +80,38 @@ class VideoMeta {
 
 		return container
 	}
+
+	public as_li() : HTMLElement {
+		const li = document.createElement('li')
+		li.className = 'align-left list-group-item'
+
+		const link = document.createElement('a')
+		link.href = `/clip/${this.category}/${this.name}`
+		link.target = '_blank'
+		link.textContent = this.name
+		link.className = 'admin-video-li btn'
+		li.appendChild(link)
+
+		const thumbnail_link = document.createElement('a')
+		thumbnail_link.href = `/thumbnail/${this.category}/${this.name}.jpg`
+		link.target = '_blank'
+		thumbnail_link.innerHTML = '<i class="fa-solid fa-image"></i>'
+		thumbnail_link.className = 'admin-video-li btn'
+		li.appendChild(thumbnail_link)
+
+		const delete_btn = document.createElement('button')
+		delete_btn.type = 'button'
+		delete_btn.className = 'btn btn-danger'
+		delete_btn.innerHTML = '<i class="fa-solid fa-trash"></i>'
+		li.appendChild(delete_btn)
+
+		return li
+	}
 }
 
-export async function fetch_category_videos() : Promise<Array<VideoMeta>> {
-	const endpoint = window.location.origin + '/api' + window.location.pathname
+export async function fetch_category_videos(name?: string) : Promise<Array<VideoMeta>> {
+	const category = name ? name : window.location.pathname
+	const endpoint = window.location.origin + `/api/category/${category}`
 	let videos: Array<VideoMeta> = []
 	const response = await fetch(endpoint)
 	if(response.headers.get('Content-Type') == 'application/json') {