From 7725ff5e1d02df17b74e922eaaa4129031fb3bb3 Mon Sep 17 00:00:00 2001 From: shockrah Date: Mon, 11 Oct 2021 23:38:26 -0700 Subject: [PATCH] * Frontend caught up to videos api --- ts/category.ts | 95 ++++++++++++++++++++++++++++++++++++++++++++++++++ ts/index.ts | 1 - 2 files changed, 95 insertions(+), 1 deletion(-) create mode 100644 ts/category.ts diff --git a/ts/category.ts b/ts/category.ts new file mode 100644 index 0000000..2652ced --- /dev/null +++ b/ts/category.ts @@ -0,0 +1,95 @@ +class VideoMeta { + name: string|null + mime_type: string|null + thumbnail_b64: string|null + + constructor(raw: any) { + this.name = raw['name'] + if(this.name) { + const parts = this.name.split('.') + const extension = parts[parts.length - 1] + if(extension == 'jpg') { + this.mime_type = 'image/jpg' + } else { + this.mime_type = null + } + } else { + this.mime_type = null + } + this.thumbnail_b64 = raw['thumbnail'] + } + + title_link() : HTMLHeadingElement { + let container = document.createElement('h2') + + let link = document.createElement('a') + if(this.name) { + link.href = `/category/${this.name}` + link.text = this.name + } else { + link.href = '#' + link.text = 'this nigga eatin beans' + } + + container.appendChild(link) + + + return container + } + + thumbnail_div() : HTMLImageElement { + let nail = document.createElement('img') + nail.className = 'pure-img' + + // Modern browser's should be able to cache this request + 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 + } + + public 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 category_ready_handler(e?: Event) : Event { + if(document.readyState != 'complete') { return e } + + let xml = new XMLHttpRequest() + const endpoint = window.location.origin + '/api' + window.location.pathname + xml.open('GET', endpoint, false) + xml.send() + + if(xml.getResponseHeader('Content-Type') == 'application/json') { + let raw = JSON.parse(xml.responseText) + console.log(raw) + for(const cat_raw of raw) { + let cat = new VideoMeta(cat_raw) + cat.as_div() + console.log(cat) + } + } else { + console.log(xml.getResponseHeader('Content-Type')) + } + + + return e +} +document.addEventListener('readystatechange', category_ready_handler) + diff --git a/ts/index.ts b/ts/index.ts index 0457f48..2377c55 100644 --- a/ts/index.ts +++ b/ts/index.ts @@ -72,7 +72,6 @@ function ready_handler(e?: Event) : Event { xml.send(null) // nothing required for stuff if(xml.getResponseHeader('Content-Type') == 'application/json') { let raw = JSON.parse(xml.responseText) - console.log(raw) for(const cat_raw of raw) { let cat = new Category(cat_raw) cat.as_div()