0x2620/njpma
2
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

first pass at pandora-scroll element

Browse source
This commit is contained in:
j 2022-09-02 13:54:53 +02:00
commit a1eec24f17
5 changed files with 337 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

96
app/static/js/ascroll.js
View file

@ -29,10 +29,17 @@ function resize() {
}
}
function updatePlayer(video, frame, currentTime, out, src) {
var rect = frame.getBoundingClientRect();
function updatePlayer(video, frame, currentTime, out, src, config) {
var top, rect = frame.getBoundingClientRect();
video.style.opacity = 0
video.style.top = (rect.top + window.scrollY) + 'px'
if (config.root) {
var root_rect = config.root.getBoundingClientRect();
//console.log('rect.top', rect.top, 'window.scrollY', window.scrollY, 'root_rect.top', root_rect.top)
top = rect.top - root_rect.top
} else {
top = rect.top + window.scrollY
}
video.style.top = top + 'px'
video.style.display = 'block';
if (src) {
setVideoSrc(video, src)
@ -129,16 +136,22 @@ function timeupdate(event) {
function formatInfo(config, ascroll) {
var info = document.createElement('div')
var h1 = document.createElement('h1')
h1.innerHTML = config.title
info.appendChild(h1)
var h2 = document.createElement('h2')
h2.innerHTML = config.byline
info.appendChild(h2)
var div = document.createElement('div')
div.classList.add('intro')
div.innerHTML = config.body
info.appendChild(div)
if (config.title) {
var h1 = document.createElement('h1')
h1.innerHTML = config.title
info.appendChild(h1)
}
if (config.byline) {
var h2 = document.createElement('h2')
h2.innerHTML = config.byline
info.appendChild(h2)
}
if (config.body) {
var div = document.createElement('div')
div.classList.add('intro')
div.innerHTML = config.body
info.appendChild(div)
}
ascroll.appendChild(info)
return info
}
@ -170,7 +183,9 @@ function showOverlay(event) {
overlay.innerHTML = on
}
overlay.addEventListener('click', event=> {
video.muted = !video.muted
const muted = video.muted
document.querySelectorAll('pandora-scroll').forEach(el => el.mute() )
video.muted = !muted
if (video.muted) {
overlay.innerHTML = off
} else {
@ -193,6 +208,7 @@ function showOverlay(event) {
}
function renderAnnotation(config, video, ascroll, clip) {
console.log("renderAnnotation", clip)
var div = document.createElement('div')
div.classList.add('annotation')
var annotation = clip.annotations[0]
@ -231,14 +247,15 @@ function renderAnnotation(config, video, ascroll, clip) {
src = `${streamPrefix}/${annotation.id.split('/')[0]}/480p.webm`
}
if (config.loaded && visible) {
updatePlayer(video, frame, annotation['in'], annotation['out'], src)
updatePlayer(video, frame, annotation['in'], annotation['out'], src, config)
}
}))
}
function renderAnnotations(config) {
var ascroll = document.querySelector('#ascroll')
console.log('renderAnnotations', config.item, config.annotations.length)
var ascroll = config.root ? config.root : document.querySelector('#ascroll')
config.loaded = false
var video = document.createElement('video')
video.classList.add('player')
@ -270,14 +287,27 @@ function renderAnnotations(config) {
if (config.edit) {
src = `${streamPrefix}/${config.first.id.split('/')[0]}/480p.webm`
}
updatePlayer(video, frame, config.first['in'], config.first['out'], src)
updatePlayer(video, frame, config.first['in'], config.first['out'], src, config)
}
}
}
function isInside(config, annotation) {
if (!config['in'] && !config['out']) {
return true
}
if (annotation['in'] < config['out'] && annotation['out'] > config['in']) {
annotation['in'] = Math.min(annotation['in'], config['in'])
annotation['out'] = Math.min(annotation['out'], config['out'])
return true
}
return false
}
async function loadClips(annotations) {
var items = annotations.map(annotation => annotation.id.split('/')[0])
items = [...new Set(items)]
console.log('loadClips', annotations, items)
return pandoraAPI('findClips', {itemsQuery: {
conditions: [{key: 'id', operator: '&', value: items}]
}, range: [0, 10000], keys: [
@ -319,23 +349,45 @@ async function loadClips(annotations) {
}
function loadAnnotations(config) {
var layers = config.layer
var layers = config.layer || config.layers || []
if (!Array.isArray(layers)) {
layers = [layers]
}
if (config.item) {
if (config.item && !layers.length) {
// load player only view
config.annotations = [
{
"in": config["in"],
"out": config["out"],
"id": config["item"] + "/" + config["in"].toFixed(3) + '-'+ config.out.toFixed(3),
"annotations": [{
"id": config["item"] + "/" + config["in"].toFixed(3) + '-'+ config.out.toFixed(3),
"value": "",
"in": config["in"],
"out": config["out"],
}],
"color1": "",
"color2": "",
}
]
renderAnnotations(config)
} else if (config.item) {
pandoraAPI('get', {id: config.item, keys: [
'layers'
]}).then(response => {
var annotations = []
layers.forEach(layer => {
response.data.layers[layer].forEach(annotation => {
if (!(config.user && annotation.user != config.user)) {
if (!response.data.layers[layer]) {
console.log("ERROR", config.item, layer, "missing", config.root)
}
response.data.layers[layer] && response.data.layers[layer].forEach(annotation => {
if (!(config.user && annotation.user != config.user) && isInside(config, annotation)) {
annotations.push(annotation)
}
})
})
loadClips(annotations).then(annotations => {
console.log('got', annotations)
config.annotations = annotations.filter(annotation => {
if (config.only_e) {
if (annotation.value.slice(0, 2) == 'E:') {
@ -394,7 +446,7 @@ function loadAnnotations(config) {
config.annotations = []
}
renderAnnotations(config)
}
}
}
}