683dcffd6f
*! Async requests for category pictures With async requests in place HTTP2 should be defaulted more often now It is recommended now however to enable it with the reverse proxy of choice
96 lines
2.2 KiB
TypeScript
96 lines
2.2 KiB
TypeScript
class VideoMeta {
|
|
name: string|null
|
|
thumbnail: string|null
|
|
category: string
|
|
|
|
constructor(raw: any) {
|
|
this.name = raw['name']
|
|
this.thumbnail = raw['thumbnail']
|
|
|
|
let path = window.location.pathname
|
|
this.category = path.substring(path.lastIndexOf('/')+1)
|
|
}
|
|
title_link() : HTMLHeadingElement {
|
|
let container = document.createElement('h2')
|
|
|
|
let link = document.createElement('a')
|
|
if(this.name) {
|
|
const file_name = this.name.slice(0, this.name.lastIndexOf('.'))
|
|
link.href = `/clip/${this.category}/${file_name}`
|
|
link.text = this.name
|
|
for(const chars of ['.', '-', '_', 'mp4', 'mkv', 'webm']) {
|
|
link.text = link.text.replace(chars, ' ')
|
|
}
|
|
} else {
|
|
link.href = '#'
|
|
link.text = this.name + 'ft. No thumbnail'
|
|
}
|
|
|
|
container.appendChild(link)
|
|
|
|
|
|
return container
|
|
}
|
|
|
|
thumbnail_div() : HTMLAnchorElement {
|
|
let nail = document.createElement('img')
|
|
nail.className = 'img-fluid'
|
|
|
|
// Modern browser's should be able to cache this request
|
|
if(!(this.thumbnail == null || this.thumbnail.length == 0)) {
|
|
nail.setAttribute('src', this.thumbnail)
|
|
} else{
|
|
nail.setAttribute('src', '/cantfindshit.gif')
|
|
}
|
|
let link = document.createElement('a')
|
|
if(this.name) {
|
|
link.href = `/clip/${this.category}/${this.name}`
|
|
} else {
|
|
link.href = '#'
|
|
}
|
|
link.appendChild(nail)
|
|
|
|
return link
|
|
}
|
|
|
|
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()
|
|
|
|
xml.onload = function() {
|
|
if(this.getResponseHeader('Content-Type') == 'application/json') {
|
|
let raw = JSON.parse(this.responseText)
|
|
for(const cat_raw of raw) {
|
|
let cat = new VideoMeta(cat_raw)
|
|
cat.as_div()
|
|
}
|
|
}
|
|
}
|
|
|
|
const endpoint = window.location.origin + '/api' + window.location.pathname
|
|
xml.open('GET', endpoint, true)
|
|
xml.send()
|
|
|
|
return e
|
|
}
|
|
document.addEventListener('readystatechange', category_ready_handler)
|
|
|