clippable/ts/category.ts
shockrah f8052a6ecf * Fixing url generation on thumbnails
This is mostly to remove the extensions which mess with OpenGraph meta fetching
Most services like Discord/Twitter/Facebook/Linkedin will not bother using the
Available opengraph metadata if an extension is detected as its assumed to be
a plain file
2022-01-31 15:09:55 -08:00

105 lines
2.4 KiB
TypeScript

class VideoMeta {
name: string|null
thumbnail: string|null
category: string
basename: string|null
constructor(raw: any) {
this.name = raw['name']
this.thumbnail = raw['thumbnail']
let path = window.location.pathname
this.category = path.substring(path.lastIndexOf('/')+1)
this.basename = this.name ?
this.name.slice(0, this.name.lastIndexOf('.')) :
null
}
private clean_link(link: string) : string {
// NOTE: no need to url encode since browser does that anyway
for(const part of ['.', '-', '_', 'mp4', 'mkv', 'webm']) {
link = link.replace(part, ' ')
}
return link
}
title_link() : HTMLHeadingElement {
let container = document.createElement('h2')
let link = document.createElement('a')
if(this.name) {
link.href = `/clip/${this.category}/${this.basename}`
link.text = this.clean_link(this.name)
} 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.basename}`
} 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)