fix merge conflicts

This commit is contained in:
imohkay 2021-10-22 17:21:58 +05:30
commit de2b0d9064
2 changed files with 103 additions and 129 deletions

View file

@ -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,140 +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.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.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)
} }

View file

@ -33,7 +33,7 @@ body {
</div> </div>
<div class="video-block"> <div class="video-block">
<video src="{{ settings.TIMELINE_PREFIX }}{{ film.padma_id }}/loop.mp4" autoplay loop muted></video> <video src="{{ settings.TIMELINE_PREFIX }}{{ film.padma_id }}/loop.mp4" autoplay loop muted playsinline></video>
</div> </div>
<div class="summary-block"> <div class="summary-block">
<p>{{ film.data.summary|safe }}</p> <p>{{ film.data.summary|safe }}</p>