clippable/ts/category.ts
2021-10-12 00:16:27 -07:00

107 lines
2.5 KiB
TypeScript

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) {
// remove the .jpg
let fname = this.name.substr(0, this.name.length - 4)
console.log(fname)
const parts = fname.split('.')
const extension = parts[parts.length -1]
if(extension == '.webm') {
fname = fname.substr(0, fname.length - 5)
} else {
fname = fname.substr(0, fname.length - 4)
}
link.href = `/clip/${fname}`
link.text = fname.replace('.', ' ').replace('-', ' ')
} 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)