refactor ascroll, use annotations from config or load from item/edit
This commit is contained in:
parent
42e7dfb980
commit
f265723500
1 changed files with 101 additions and 129 deletions
|
|
@ -201,6 +201,79 @@ function showOverlay(event) {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function renderAnnotation(config, video, ascroll, annotation) {
|
||||||
|
var div = document.createElement('div')
|
||||||
|
div.classList.add('annotation')
|
||||||
|
|
||||||
|
var color1 = `hsl(${annotation.color1.hue}, 70%, 75%)`
|
||||||
|
var color2 = `hsl(${annotation.color2.hue}, 70%, 75%)`
|
||||||
|
if (!config.first) {
|
||||||
|
config.first = annotation
|
||||||
|
config.info.style.background = color1
|
||||||
|
}
|
||||||
|
div.style.background = `linear-gradient(to bottom, ${color1}, ${color2})`;
|
||||||
|
var figcaption = ''
|
||||||
|
if (annotation.title) {
|
||||||
|
figcaption = `<figcaption><a href="${baseURL}/${annotation.id}" target="_blank">${annotation.title}</a></figcaption>`
|
||||||
|
}
|
||||||
|
div.innerHTML = `
|
||||||
|
<div class="frame">
|
||||||
|
<figure>
|
||||||
|
<img src="${baseURL}/${annotation.id.split('/')[0]}/${imageResolution}p${annotation.in}.jpg">
|
||||||
|
${figcaption}
|
||||||
|
</figure>
|
||||||
|
</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
|
||||||
|
if (config.edit) {
|
||||||
|
src = `${baseURL}/${annotation.id.split('/')[0]}/480p.webm`
|
||||||
|
}
|
||||||
|
if (config.loaded && visible) {
|
||||||
|
updatePlayer(video, frame, annotation['in'], annotation['out'], src)
|
||||||
|
}
|
||||||
|
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderAnnotations(config) {
|
||||||
|
var ascroll = document.querySelector('#ascroll')
|
||||||
|
config.loaded = false
|
||||||
|
var video = document.createElement('video')
|
||||||
|
video.classList.add('player')
|
||||||
|
video.playsinline = true
|
||||||
|
video.muted = true
|
||||||
|
if (config.item) {
|
||||||
|
setVideoSrc(video, `${baseURL}/${config.item}/480p.webm`)
|
||||||
|
}
|
||||||
|
video.addEventListener('timeupdate', timeupdate)
|
||||||
|
video.addEventListener('touchstart', showOverlay)
|
||||||
|
video.addEventListener('mouseover', showOverlay)
|
||||||
|
var box = document.createElement('div')
|
||||||
|
box.classList.add('vbox')
|
||||||
|
box.appendChild(video)
|
||||||
|
ascroll.appendChild(box)
|
||||||
|
|
||||||
|
config.info = formatInfo(config, ascroll)
|
||||||
|
config.annotations.forEach(annotation => {
|
||||||
|
renderAnnotation(config, video, ascroll, annotation)
|
||||||
|
})
|
||||||
|
config.loaded = true
|
||||||
|
if (config.first) {
|
||||||
|
let frame = ascroll.querySelector('.annotation .frame')
|
||||||
|
if (frame) {
|
||||||
|
var src
|
||||||
|
if (config.edit) {
|
||||||
|
src = `${baseURL}/${config.first.id.split('/')[0]}/480p.webm`
|
||||||
|
}
|
||||||
|
updatePlayer(video, frame, config.first['in'], config.first['out'], src)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
async function loadClips(annotations) {
|
async function loadClips(annotations) {
|
||||||
var items = annotations.map(annotation => annotation.id.split('/')[0])
|
var items = annotations.map(annotation => annotation.id.split('/')[0])
|
||||||
items = [...new Set(items)]
|
items = [...new Set(items)]
|
||||||
|
|
@ -229,142 +302,41 @@ async function loadClips(annotations) {
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
function loadItem(config) {
|
function loadAnnotations(config) {
|
||||||
pandoraAPI('get', {id: config.item, keys: [
|
if (config.item) {
|
||||||
'id', 'title', 'layers', 'hue', 'saturation', 'lightness'
|
pandoraAPI('get', {id: config.item, keys: ['layers']}).then(response => {
|
||||||
]}).then(response => {
|
var annotations = response.data.layers[config.layer].filter(annotation => {
|
||||||
//var color = `hsl(${response.data.hue}, ${response.data.saturation * 100}%, ${response.data.lightness * 100}%)`
|
return !(config.user && annotation.user != config.user)
|
||||||
var color = `hsl(${response.data.hue}, 70%, 50%)`
|
})
|
||||||
//document.body.style.background = color
|
loadClips(annotations).then(annotations => {
|
||||||
var ascroll = document.querySelector('#ascroll')
|
config.annotations = annotations
|
||||||
var loaded = false
|
renderAnnotations(config)
|
||||||
|
})
|
||||||
var video = document.createElement('video')
|
|
||||||
video.playsinline = true
|
|
||||||
video.classList.add('player')
|
|
||||||
video.muted = true
|
|
||||||
setVideoSrc(video, `${baseURL}/${config.item}/480p.webm`)
|
|
||||||
video.addEventListener('timeupdate', timeupdate)
|
|
||||||
video.addEventListener('touchstart', showOverlay)
|
|
||||||
video.addEventListener('mouseover', showOverlay)
|
|
||||||
var box = document.createElement('div')
|
|
||||||
box.classList.add('vbox')
|
|
||||||
box.appendChild(video)
|
|
||||||
ascroll.appendChild(box)
|
|
||||||
|
|
||||||
var first
|
|
||||||
var info = formatInfo(config, ascroll)
|
|
||||||
var annotations = response.data.layers[config.layer].filter(annotation => {
|
|
||||||
return !(config.user && annotation.user != config.user)
|
|
||||||
})
|
})
|
||||||
loadClips(annotations).then(annotations => {
|
} else {
|
||||||
annotations.forEach(annotation => {
|
pandoraAPI('getEdit', {id: config.edit, keys: []}).then(response => {
|
||||||
var div = document.createElement('div')
|
var annotations = []
|
||||||
div.classList.add('annotation')
|
response.data.clips.forEach(clip => {
|
||||||
|
clip.layers[config.layer].forEach(annotation => {
|
||||||
var color1 = `hsl(${annotation.color1.hue}, 70%, 75%)`
|
if (config.user && annotation.user != config.user) {
|
||||||
var color2 = `hsl(${annotation.color2.hue}, 70%, 75%)`
|
return
|
||||||
if (!first) {
|
|
||||||
first = annotation
|
|
||||||
info.style.background = color1
|
|
||||||
}
|
|
||||||
div.style.background = `linear-gradient(to bottom, ${color1}, ${color2})`;
|
|
||||||
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'], annotation['out'])
|
|
||||||
}
|
}
|
||||||
|
annotation.title = clip.title
|
||||||
}))
|
annotations.push(annotation)
|
||||||
|
})
|
||||||
})
|
})
|
||||||
loaded = true
|
loadClips(annotations).then(annotations => {
|
||||||
let frame = ascroll.querySelector('.annotation .frame')
|
config.annotations = annotations
|
||||||
if (frame) {
|
renderAnnotations(config)
|
||||||
updatePlayer(video, frame, first['in'], first['out'])
|
|
||||||
}
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}
|
|
||||||
function loadEdit(config) {
|
|
||||||
pandoraAPI('getEdit', {id: config.edit, keys: []}).then(response => {
|
|
||||||
var ascroll = document.querySelector('#ascroll')
|
|
||||||
var loaded = false
|
|
||||||
|
|
||||||
var video = document.createElement('video')
|
|
||||||
video.playsinline = true
|
|
||||||
video.classList.add('player')
|
|
||||||
video.muted = true
|
|
||||||
video.addEventListener('timeupdate', timeupdate)
|
|
||||||
ascroll.appendChild(video)
|
|
||||||
|
|
||||||
var first
|
|
||||||
var info = formatInfo(config, ascroll)
|
|
||||||
var previous
|
|
||||||
|
|
||||||
var annotations = []
|
|
||||||
|
|
||||||
response.data.clips.forEach(clip => {
|
|
||||||
clip.layers[config.layer].forEach(annotation => {
|
|
||||||
if (config.user && annotation.user != config.user) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
annotation.title = clip.title
|
|
||||||
annotations.push(annotation)
|
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
loadClips(annotations).then(annotations => {
|
}
|
||||||
annotations.forEach(annotation => {
|
|
||||||
var div = document.createElement('div')
|
|
||||||
div.classList.add('annotation')
|
|
||||||
|
|
||||||
var color1 = `hsl(${annotation.color1.hue}, 70%, 75%)`
|
|
||||||
var color2 = `hsl(${annotation.color2.hue}, 70%, 75%)`
|
|
||||||
if (!first) {
|
|
||||||
first = annotation
|
|
||||||
info.style.background = color1
|
|
||||||
}
|
|
||||||
div.style.background = `linear-gradient(to bottom, ${color1}, ${color2})`;
|
|
||||||
div.innerHTML = `
|
|
||||||
<div class="frame">
|
|
||||||
<figure>
|
|
||||||
<img src="${baseURL}/${annotation.id.split('/')[0]}/${imageResolution}p${annotation.in}.jpg">
|
|
||||||
<figcaption><a href="${baseURL}/${annotation.id}" target="_blank">${annotation.title}</a></figcaption>
|
|
||||||
</figure>
|
|
||||||
|
|
||||||
</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'], annotation['out'], src)
|
|
||||||
}
|
|
||||||
|
|
||||||
}))
|
|
||||||
})
|
|
||||||
})
|
|
||||||
loaded = true
|
|
||||||
let frame = ascroll.querySelector('.annotation .frame')
|
|
||||||
if (frame) {
|
|
||||||
var src = `${baseURL}/${first.id.split('/')[0]}/480p.webm`
|
|
||||||
updatePlayer(video, frame, first['in'], first['out'], src)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
|
|
||||||
config.layer = config.layer || layer
|
config.layer = config.layer || layer
|
||||||
|
|
||||||
if (config.item) {
|
if (config.annotations) {
|
||||||
loadItem(config)
|
renderAnnotations(config)
|
||||||
} else if (config.edit) {
|
} else {
|
||||||
loadEdit(config)
|
loadAnnotatoins(config)
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue