* Frontend caught up to videos api
This commit is contained in:
parent
b9c4cb7c6b
commit
7725ff5e1d
95
ts/category.ts
Normal file
95
ts/category.ts
Normal file
@ -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)
|
||||||
|
|
@ -72,7 +72,6 @@ function ready_handler(e?: Event) : Event {
|
|||||||
xml.send(null) // nothing required for stuff
|
xml.send(null) // nothing required for stuff
|
||||||
if(xml.getResponseHeader('Content-Type') == 'application/json') {
|
if(xml.getResponseHeader('Content-Type') == 'application/json') {
|
||||||
let raw = JSON.parse(xml.responseText)
|
let raw = JSON.parse(xml.responseText)
|
||||||
console.log(raw)
|
|
||||||
for(const cat_raw of raw) {
|
for(const cat_raw of raw) {
|
||||||
let cat = new Category(cat_raw)
|
let cat = new Category(cat_raw)
|
||||||
cat.as_div()
|
cat.as_div()
|
||||||
|
Loading…
Reference in New Issue
Block a user