pandora/static/mobile/js/render.js
2023-08-23 21:01:33 +02:00

154 lines
4.5 KiB
JavaScript

function renderItemInfo(data) {
div = document.createElement('div')
div.className = "content"
div.innerHTML = `
<h1 class="item-title">${item.title}</h1>
<h2 class="title">${data.title}</h2>
<div class="byline">${data.byline}</div>
<figure>
<img src="${data.icon}">
</figure>
<div class="more">
<a href="${data.link}">Open on ${data.site}</a>
</div>
`
if (!item.title) {
div.querySelector('item-title').remove()
}
document.querySelector(".content").replaceWith(div)
}
function renderItem(data) {
window.item = window.item || {}
if (data.error) {
return renderError(data)
}
if (data.view == "info") {
return renderItemInfo(data)
}
div = document.createElement('div')
div.className = "content"
div.innerHTML = `
<h1 class="item-title">${item.title}</h1>
<h2 class="title">${data.title}</h2>
<div class="byline">${data.byline}</div>
<div class="player">
<div class="video"></div>
</div>
<div class="value">
${data.value}
<div class="comments"></div>
</div>
<div class="more">
<a href="${data.link}">Open on ${data.site}</a>
</div>
`
if (!item.title) {
div.querySelector('.item-title').remove()
}
var comments = div.querySelector('.comments')
if (window.renderComments) {
renderComments(comments, data)
} else {
comments.remove()
}
div.querySelectorAll('.layer a').forEach(a => {
a.addEventListener("click", clickLink)
})
div.querySelectorAll('.layer').forEach(layer => {
layer.querySelector('h3').addEventListener("click", event => {
var img = layer.querySelector('h3 .icon')
if (layer.classList.contains("collapsed")) {
layer.classList.remove("collapsed")
img.innerHTML = icon.down
} else {
layer.classList.add("collapsed")
img.innerHTML = icon.right
}
})
})
var video = window.video = VideoPlayer({
items: data.videos,
poster: data.poster,
position: data["in"] || 0,
duration: data.duration,
aspectratio: data.aspectratio
})
div.querySelector('.video').replaceWith(video)
video.classList.add('video')
video.addEventListener("loadedmetadata", event => {
//
})
video.addEventListener("timeupdate", event => {
var currentTime = video.currentTime()
if (currentTime >= data['out']) {
if (!video.paused) {
video.pause()
}
video.currentTime(data['in'])
}
div.querySelectorAll('.annotation').forEach(annot => {
var now = currentTime
var start = parseFloat(annot.dataset.in)
var end = parseFloat(annot.dataset.out)
if (now >= start && now <= end) {
annot.classList.add("active")
annot.parentElement.classList.add('active')
} else {
annot.classList.remove("active")
if (!annot.parentElement.querySelector('.active')) {
annot.parentElement.classList.remove('active')
}
}
})
})
if (item.next || item.previous) {
var nav = document.createElement('nav')
nav.classList.add('items')
if (item.previous) {
var a = document.createElement('a')
a.href = item.previous
a.innerText = '<< previous'
nav.appendChild(a)
}
if (item.previous && item.next) {
var e = document.createElement('span')
e.innerText = ' | '
nav.appendChild(e)
}
if (item.next) {
var a = document.createElement('a')
a.href = item.next
a.innerText = 'next >>'
nav.appendChild(a)
}
div.appendChild(nav)
}
document.querySelector(".content").replaceWith(div)
}
function renderError(data) {
var link = '/' + document.location.hash.slice(1)
div = document.createElement('div')
div.className = "content"
div.innerHTML = `
<style>
svg {
width: 32px;
height: 32px;
}
</style>
<div style="margin: auto">
Page not found<br>
<a href="${link}">Open on ${data.site}</a>
</div>
`
document.querySelector(".content").replaceWith(div)
}