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

ascroll for item/edits

Browse source
This commit is contained in:
j 2021-10-10 16:06:43 +01:00
commit 21db49fe48
19 changed files with 348 additions and 75 deletions
Download patch file Download diff file Expand all files Collapse all files

14
app/static/css/partials/_film.scss
View file

@ -2,8 +2,10 @@
.films {
width: 100vw;
margin: 8px;
.film {
width: 100vw;
margin-bottom: 16px;
display: flex;
flex-direction: row;
.left, .right {
@ -34,3 +36,15 @@
}
}
.film {
.info {
margin: 8px;
}
.play {
text-align: center;
margin: 8px;
margin-top: 16px;
margin-bottom: 16px;
}
}

8
app/static/css/partials/_text.scss Normal file
View file

@ -0,0 +1,8 @@
.texts {
.text {
margin: 8px;
}
}

1
app/static/css/style.scss
View file

@ -2,4 +2,5 @@
@import "partials/layout";
@import "partials/burger";
@import "partials/film";
@import "partials/text";
@import "partials/ascroll";

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

@ -31,12 +31,15 @@ function updatePlayerPosition(video, lastKnownScrollPosition) {
video.style.display = 'block';
}
function updatePlayer(video, frame, currentTime) {
function updatePlayer(video, frame, currentTime, src) {
var rect = frame.getBoundingClientRect();
video.style.opacity = 0
console.log('update player', rect)
video.style.top = (rect.top + window.scrollY) + 'px'
video.style.display = 'block';
if (src) {
video.src = src
}
//video.poster = frame.querySelector('img').src
video.currentTime = currentTime
video.controls = true
@ -67,55 +70,132 @@ function onVisibilityChange(el, callback) {
}
}
function loadItem(config) {
pandoraAPI('get', {id: config.item, keys: ['id', 'title', 'layers']}).then(response => {
var ascroll = document.querySelector('#ascroll')
var loaded = false
pandoraAPI('get', {id: film.id, keys: ['id', 'title', 'layers']}).then(response => {
var ascroll = document.querySelector('#ascroll')
var loaded = false
var video = document.createElement('video')
video.classList.add('player')
video.muted = true
video.src = `${baseURL}/${config.item}/480p.webm`
ascroll.appendChild(video)
var video = document.createElement('video')
video.classList.add('player')
video.muted = true
video.src = `${baseURL}/${film.id}/480p.webm`
ascroll.appendChild(video)
var h1 = document.createElement('h1')
h1.innerHTML = response.data.title
ascroll.appendChild(h1)
var h1 = document.createElement('h1')
h1.innerHTML = response.data.title
ascroll.appendChild(h1)
response.data.layers[layer].forEach(annotation => {
if (config.user && annotation.user != config.user) {
return
}
var div = document.createElement('div')
div.classList.add('annotation')
div.innerHTML = `
<div class="frame"><img src="${baseURL}/${annotation.id.split('/')[0]}/${imageResolution}p${annotation.in}.jpg"></div>
<div class="text">${annotation.value}</div>
response.data.layers[layer].forEach(annotation => {
var div = document.createElement('div')
div.classList.add('annotation')
div.innerHTML = `
<div class="frame"><img src="${baseURL}/${annotation.id.split('/')[0]}/${imageResolution}p${annotation.in}.jpg"></div>
<div class="text">${annotation.value}</div>
`
ascroll.appendChild(div)
var frame = div.querySelector('.frame')
document.addEventListener('scroll', onVisibilityChange(div.querySelector('.frame'), function(visible) {
if (loaded && visible)
updatePlayer(video, frame, annotation['in'])
`
ascroll.appendChild(div)
var frame = div.querySelector('.frame')
document.addEventListener('scroll', onVisibilityChange(div.querySelector('.frame'), function(visible) {
if (loaded && visible)
updatePlayer(video, frame, annotation['in'])
}))
})
loaded = true
let frame = ascroll.querySelector('.annotation .frame')
if (frame) {
updatePlayer(video, frame, 0)
}
}))
/*
document.addEventListener('scroll', function(e) {
lastKnownScrollPosition = window.scrollY;
if (!ticking) {
window.requestAnimationFrame(function() {
updatePlayerPosition(video, lastKnownScrollPosition);
ticking = false;
});
ticking = true;
}
})
*/
})
loaded = true
let frame = ascroll.querySelector('.annotation .frame')
if (frame) {
updatePlayer(video, frame, 0)
}
}
function loadEdit(config) {
pandoraAPI('getEdit', {id: config.edit, keys: []}).then(response => {
console.log(response)
var ascroll = document.querySelector('#ascroll')
var loaded = false
/*
document.addEventListener('scroll', function(e) {
lastKnownScrollPosition = window.scrollY;
var video = document.createElement('video')
video.classList.add('player')
video.muted = true
/*
video.src = `${baseURL}/${config.item}/480p.webm`
*/
ascroll.appendChild(video)
if (!ticking) {
window.requestAnimationFrame(function() {
updatePlayerPosition(video, lastKnownScrollPosition);
ticking = false;
});
var h1 = document.createElement('h1')
var first
h1.innerHTML = response.data.name
ascroll.appendChild(h1)
ticking = true;
}
response.data.clips.forEach(clip => {
clip.layers[layer].forEach(annotation => {
if (config.user && annotation.user != config.user) {
return
}
if (!first) {
first = annotation
}
var div = document.createElement('div')
div.classList.add('annotation')
div.innerHTML = `
<div class="frame"><img src="${baseURL}/${annotation.id.split('/')[0]}/${imageResolution}p${annotation.in}.jpg"></div>
<div class="text">${annotation.value}</div>
`
ascroll.appendChild(div)
var frame = div.querySelector('.frame')
document.addEventListener('scroll', onVisibilityChange(div.querySelector('.frame'), function(visible) {
var src = `${baseURL}/${annotation.id.split('/')[0]}/480p.webm`
if (loaded && visible)
updatePlayer(video, frame, annotation['in'], src)
}))
})
})
loaded = true
let frame = ascroll.querySelector('.annotation .frame')
if (frame) {
var src = `${baseURL}/${ifrst.id.split('/')[0]}/480p.webm`
updatePlayer(video, frame, first['in'], src)
}
/*
document.addEventListener('scroll', function(e) {
lastKnownScrollPosition = window.scrollY;
if (!ticking) {
window.requestAnimationFrame(function() {
updatePlayerPosition(video, lastKnownScrollPosition);
ticking = false;
});
ticking = true;
}
})
*/
})
*/
})
}
if (config.item) {
loadItem(config)
} else if (config.edit) {
loadEdit(config)
}