single mode
This commit is contained in:
parent
081bdfb690
commit
a27e1d4686
2 changed files with 78 additions and 5 deletions
|
@ -19,7 +19,7 @@ function updatePlayer(video, frame, currentTime, out, src, config) {
|
||||||
//console.log('update player', currentTime, out, src)
|
//console.log('update player', currentTime, out, src)
|
||||||
var top, rect = frame.getBoundingClientRect();
|
var top, rect = frame.getBoundingClientRect();
|
||||||
video.style.opacity = 0
|
video.style.opacity = 0
|
||||||
if (config.root) {
|
if (config.root && config.mode != "single") {
|
||||||
var root_rect = config.root.getBoundingClientRect();
|
var root_rect = config.root.getBoundingClientRect();
|
||||||
//console.log('rect.top', rect.top, 'window.scrollY', window.scrollY, 'root_rect.top', root_rect.top)
|
//console.log('rect.top', rect.top, 'window.scrollY', window.scrollY, 'root_rect.top', root_rect.top)
|
||||||
top = rect.top - root_rect.top
|
top = rect.top - root_rect.top
|
||||||
|
@ -40,6 +40,11 @@ function updatePlayer(video, frame, currentTime, out, src, config) {
|
||||||
video.dataset.out = out
|
video.dataset.out = out
|
||||||
video._root = config.root
|
video._root = config.root
|
||||||
video._frame = frame
|
video._frame = frame
|
||||||
|
if (config.mode == "single") {
|
||||||
|
video._text = frame.parentElement.querySelector('.text')
|
||||||
|
} else {
|
||||||
|
video._text = null
|
||||||
|
}
|
||||||
const show = event => {
|
const show = event => {
|
||||||
video.style.opacity = 1
|
video.style.opacity = 1
|
||||||
video.muted = muted
|
video.muted = muted
|
||||||
|
@ -54,6 +59,19 @@ function timeupdate(event) {
|
||||||
if (event.target.dataset.out && event.target.dataset.in) {
|
if (event.target.dataset.out && event.target.dataset.in) {
|
||||||
var in_= parseFloat(event.target.dataset.in)
|
var in_= parseFloat(event.target.dataset.in)
|
||||||
var out_= parseFloat(event.target.dataset.out)
|
var out_= parseFloat(event.target.dataset.out)
|
||||||
|
var currentTime = event.target.currentTime
|
||||||
|
if (event.target._text) {
|
||||||
|
event.target._text.querySelectorAll('.annotation').forEach(annot => {
|
||||||
|
var ain = parseFloat(annot.dataset.in)
|
||||||
|
var aout = parseFloat(annot.dataset.out)
|
||||||
|
if (ain <= currentTime && aout > currentTime) {
|
||||||
|
annot.style.display = ''
|
||||||
|
} else {
|
||||||
|
annot.style.display = 'none'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
}
|
||||||
if (event.target.currentTime >= out_) {
|
if (event.target.currentTime >= out_) {
|
||||||
/*
|
/*
|
||||||
var next
|
var next
|
||||||
|
@ -330,6 +348,56 @@ async function loadAnnotations(config) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function renderSingleMode(config) {
|
||||||
|
var src
|
||||||
|
config.annotations.forEach(annotation => {
|
||||||
|
src = annotation.src = `${streamPrefix}/${annotation.id.split('/')[0]}/480p.webm`
|
||||||
|
})
|
||||||
|
var div = document.createElement('div')
|
||||||
|
var annotation = config.annotations[0].annotations[0]
|
||||||
|
var figcaption = ''
|
||||||
|
div.classList.add('single-node')
|
||||||
|
div.classList.add('annotation')
|
||||||
|
div.innerHTML = `
|
||||||
|
<div class="frame">
|
||||||
|
<figure>
|
||||||
|
<img src="${streamPrefix}/${annotation.id.split('/')[0]}/${imageResolution}p${annotation.in}.jpg">
|
||||||
|
${figcaption}
|
||||||
|
</figure>
|
||||||
|
</div>
|
||||||
|
<div class="text"></div>
|
||||||
|
`
|
||||||
|
config.root.appendChild(div)
|
||||||
|
var frame = div.querySelector('.frame')
|
||||||
|
var text = div.querySelector('.text')
|
||||||
|
document.addEventListener('scroll', onVisibilityChange(div.querySelector('.frame'), function(visible) {
|
||||||
|
console.log('scroll', config.loaded, visible)
|
||||||
|
if (config.loaded && visible) {
|
||||||
|
updatePlayer(config.video, frame, config['in'], config['out'], src, config)
|
||||||
|
}
|
||||||
|
}))
|
||||||
|
config.annotations.forEach(clip => {
|
||||||
|
var values = []
|
||||||
|
clip.annotations.forEach(a => {
|
||||||
|
values.push(a.value.replace(/src="\//g, `src="${streamPrefix}/`).replace(/href="\//g, `href="${pandoraURL}/`))
|
||||||
|
})
|
||||||
|
values = values.join('<br><br>')
|
||||||
|
var annot = document.createElement('div')
|
||||||
|
annot.classList.add('annotation')
|
||||||
|
annot.innerHTML = values
|
||||||
|
console.log(clip)
|
||||||
|
annot.dataset['in'] = clip.annotations[0]['in']
|
||||||
|
annot.dataset['out'] = clip.annotations[0]['out']
|
||||||
|
annot.style.display = 'none'
|
||||||
|
text.appendChild(annot)
|
||||||
|
})
|
||||||
|
if (frame) {
|
||||||
|
updatePlayer(config.video, frame, config['in'], config['out'], src, config)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
config.layer = config.layer || layer
|
config.layer = config.layer || layer
|
||||||
|
|
||||||
if (false && config.annotations) {
|
if (false && config.annotations) {
|
||||||
|
|
|
@ -84,10 +84,15 @@ class PandoraScroll extends HTMLElement {
|
||||||
config.root = this.shadowRoot.querySelector('.pandora-scroll')
|
config.root = this.shadowRoot.querySelector('.pandora-scroll')
|
||||||
config.video = document.querySelector('video')
|
config.video = document.querySelector('video')
|
||||||
loadAnnotations(config).then(config => {
|
loadAnnotations(config).then(config => {
|
||||||
|
config.loaded = true
|
||||||
|
if (config.mode == "single") {
|
||||||
|
renderSingleMode(config)
|
||||||
|
} else {
|
||||||
config.annotations.forEach(annotation => {
|
config.annotations.forEach(annotation => {
|
||||||
annotation.src = `${streamPrefix}/${annotation.id.split('/')[0]}/480p.webm`
|
annotation.src = `${streamPrefix}/${annotation.id.split('/')[0]}/480p.webm`
|
||||||
renderAnnotation(window.config, config.video, config.root, annotation)
|
renderAnnotation(window.config, config.video, config.root, annotation)
|
||||||
})
|
})
|
||||||
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue