The ul here is meant to serve as a quick way to check what videos are being served as well as removing videos + category::VideoMeta::as_li built for admin video list This is basically how we spit this out onto the DOM
126 lines
3.2 KiB
TypeScript
126 lines
3.2 KiB
TypeScript
export class VideoMeta {
|
|
name: string|null
|
|
thumbnail: string|null
|
|
category: string
|
|
basename: string|null
|
|
href: string
|
|
|
|
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
|
|
|
|
this.href = `/clip/${this.category}/${this.basename}`
|
|
}
|
|
|
|
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 = this.href
|
|
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
|
|
}
|
|
|
|
public as_li() : HTMLElement {
|
|
const li = document.createElement('li')
|
|
li.className = 'align-left list-group-item'
|
|
|
|
const link = document.createElement('a')
|
|
link.href = `/clip/${this.category}/${this.name}`
|
|
link.target = '_blank'
|
|
link.textContent = this.name
|
|
link.className = 'admin-video-li btn'
|
|
li.appendChild(link)
|
|
|
|
const thumbnail_link = document.createElement('a')
|
|
thumbnail_link.href = `/thumbnail/${this.category}/${this.name}.jpg`
|
|
link.target = '_blank'
|
|
thumbnail_link.innerHTML = '<i class="fa-solid fa-image"></i>'
|
|
thumbnail_link.className = 'admin-video-li btn'
|
|
li.appendChild(thumbnail_link)
|
|
|
|
const delete_btn = document.createElement('button')
|
|
delete_btn.type = 'button'
|
|
delete_btn.className = 'btn btn-danger'
|
|
delete_btn.innerHTML = '<i class="fa-solid fa-trash"></i>'
|
|
li.appendChild(delete_btn)
|
|
|
|
return li
|
|
}
|
|
}
|
|
|
|
export async function fetch_category_videos(name?: string) : Promise<Array<VideoMeta>> {
|
|
const category = name ? name : window.location.pathname
|
|
const endpoint = window.location.origin + `/api/category/${category}`
|
|
let videos: Array<VideoMeta> = []
|
|
const response = await fetch(endpoint)
|
|
if(response.headers.get('Content-Type') == 'application/json') {
|
|
const raw = JSON.parse(await response.text())
|
|
for(const vid_raw of raw) {
|
|
videos.push(new VideoMeta(vid_raw))
|
|
}
|
|
}
|
|
return videos
|
|
}
|
|
|