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

loop clips

Browse source
This commit is contained in:
j 2021-10-10 16:46:19 +01:00
parent b4529aaab3
commit ffb7948fff
1 changed files with 23 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -25,13 +25,7 @@ async function pandoraAPI(action, data) {
return cache[key] return cache[key]
} }
function updatePlayerPosition(video, lastKnownScrollPosition) { function updatePlayer(video, frame, currentTime, out, src) {
console.log('update', lastKnownScrollPosition)
video.style.top = lastKnownScrollPosition + 'px'
video.style.display = 'block';
}
function updatePlayer(video, frame, currentTime, src) {
var rect = frame.getBoundingClientRect(); var rect = frame.getBoundingClientRect();
video.style.opacity = 0 video.style.opacity = 0
console.log('update player', rect) console.log('update player', rect)
@ -42,6 +36,8 @@ function updatePlayer(video, frame, currentTime, src) {
} }
//video.poster = frame.querySelector('img').src //video.poster = frame.querySelector('img').src
video.currentTime = currentTime video.currentTime = currentTime
video.dataset.in = currentTime
video.dataset.out = out
video.controls = true video.controls = true
video.play() video.play()
video.style.opacity = 1 video.style.opacity = 1
@ -70,6 +66,16 @@ function onVisibilityChange(el, callback) {
} }
} }
function timeupdate(event) {
if (event.target.dataset.out && event.target.dataset.in) {
var in_= parseFloat(event.target.dataset.in)
var out_= parseFloat(event.target.dataset.out)
if (event.target.currentTime >= out_) {
event.target.currentTime = in_
}
}
}
function loadItem(config) { function loadItem(config) {
pandoraAPI('get', {id: config.item, keys: ['id', 'title', 'layers']}).then(response => { pandoraAPI('get', {id: config.item, keys: ['id', 'title', 'layers']}).then(response => {
var ascroll = document.querySelector('#ascroll') var ascroll = document.querySelector('#ascroll')
@ -79,9 +85,11 @@ function loadItem(config) {
video.classList.add('player') video.classList.add('player')
video.muted = true video.muted = true
video.src = `${baseURL}/${config.item}/480p.webm` video.src = `${baseURL}/${config.item}/480p.webm`
video.addEventListener('timeupdate', timeupdate)
ascroll.appendChild(video) ascroll.appendChild(video)
var h1 = document.createElement('h1') var h1 = document.createElement('h1')
var first
h1.innerHTML = response.data.title h1.innerHTML = response.data.title
ascroll.appendChild(h1) ascroll.appendChild(h1)
@ -89,6 +97,9 @@ function loadItem(config) {
if (config.user && annotation.user != config.user) { if (config.user && annotation.user != config.user) {
return return
} }
if (!first) {
first = annotation
}
var div = document.createElement('div') var div = document.createElement('div')
div.classList.add('annotation') div.classList.add('annotation')
div.innerHTML = ` div.innerHTML = `
@ -100,14 +111,14 @@ function loadItem(config) {
var frame = div.querySelector('.frame') var frame = div.querySelector('.frame')
document.addEventListener('scroll', onVisibilityChange(div.querySelector('.frame'), function(visible) { document.addEventListener('scroll', onVisibilityChange(div.querySelector('.frame'), function(visible) {
if (loaded && visible) if (loaded && visible)
updatePlayer(video, frame, annotation['in']) updatePlayer(video, frame, annotation['in'], annotation['out'])
})) }))
}) })
loaded = true loaded = true
let frame = ascroll.querySelector('.annotation .frame') let frame = ascroll.querySelector('.annotation .frame')
if (frame) { if (frame) {
updatePlayer(video, frame, 0) updatePlayer(video, frame, first['in'], first['out'])
} }
/* /*
@ -135,9 +146,7 @@ function loadEdit(config) {
var video = document.createElement('video') var video = document.createElement('video')
video.classList.add('player') video.classList.add('player')
video.muted = true video.muted = true
/* video.addEventListener('timeupdate', timeupdate)
video.src = `${baseURL}/${config.item}/480p.webm`
*/
ascroll.appendChild(video) ascroll.appendChild(video)
var h1 = document.createElement('h1') var h1 = document.createElement('h1')
@ -171,7 +180,7 @@ function loadEdit(config) {
document.addEventListener('scroll', onVisibilityChange(div.querySelector('.frame'), function(visible) { document.addEventListener('scroll', onVisibilityChange(div.querySelector('.frame'), function(visible) {
var src = `${baseURL}/${annotation.id.split('/')[0]}/480p.webm` var src = `${baseURL}/${annotation.id.split('/')[0]}/480p.webm`
if (loaded && visible) if (loaded && visible)
updatePlayer(video, frame, annotation['in'], src) updatePlayer(video, frame, annotation['in'], annotation['out'], src)
})) }))
}) })
@ -180,23 +189,8 @@ function loadEdit(config) {
let frame = ascroll.querySelector('.annotation .frame') let frame = ascroll.querySelector('.annotation .frame')
if (frame) { if (frame) {
var src = `${baseURL}/${first.id.split('/')[0]}/480p.webm` var src = `${baseURL}/${first.id.split('/')[0]}/480p.webm`
updatePlayer(video, frame, first['in'], src) updatePlayer(video, frame, first['in'], first['out'], src)
} }
/*
document.addEventListener('scroll', function(e) {
lastKnownScrollPosition = window.scrollY;
if (!ticking) {
window.requestAnimationFrame(function() {
updatePlayerPosition(video, lastKnownScrollPosition);
ticking = false;
});
ticking = true;
}
})
*/
}) })
} }