From 42e7dfb980024d9e7a0508bc0697a5bc8d8c844a Mon Sep 17 00:00:00 2001 From: j Date: Fri, 22 Oct 2021 11:32:47 +0100 Subject: [PATCH 1/2] iOS wants playsinline --- app/static/js/ascroll.js | 2 ++ app/templates/film.html | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/app/static/js/ascroll.js b/app/static/js/ascroll.js index af3beb8..cd3f66a 100644 --- a/app/static/js/ascroll.js +++ b/app/static/js/ascroll.js @@ -240,6 +240,7 @@ function loadItem(config) { var loaded = false var video = document.createElement('video') + video.playsinline = true video.classList.add('player') video.muted = true setVideoSrc(video, `${baseURL}/${config.item}/480p.webm`) @@ -296,6 +297,7 @@ function loadEdit(config) { var loaded = false var video = document.createElement('video') + video.playsinline = true video.classList.add('player') video.muted = true video.addEventListener('timeupdate', timeupdate) diff --git a/app/templates/film.html b/app/templates/film.html index 192c48e..6bcf7b5 100644 --- a/app/templates/film.html +++ b/app/templates/film.html @@ -25,7 +25,7 @@
{{ film.data.date }}, {{ film.duration }}
- +

{{ film.data.summary|safe }}


{{ film.data.summary_zh|safe }}

From f265723500311332758d5047e08f1d5c2b8dfdef Mon Sep 17 00:00:00 2001 From: j Date: Fri, 22 Oct 2021 12:25:32 +0100 Subject: [PATCH 2/2] refactor ascroll, use annotations from config or load from item/edit --- app/static/js/ascroll.js | 230 +++++++++++++++++---------------------- 1 file changed, 101 insertions(+), 129 deletions(-) diff --git a/app/static/js/ascroll.js b/app/static/js/ascroll.js index cd3f66a..e81614f 100644 --- a/app/static/js/ascroll.js +++ b/app/static/js/ascroll.js @@ -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 = `
${annotation.title}
` + } + div.innerHTML = ` +
+
+ + ${figcaption} +
+
+
${annotation.value}
+ ` + 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) { var items = annotations.map(annotation => annotation.id.split('/')[0]) items = [...new Set(items)] @@ -229,142 +302,41 @@ async function loadClips(annotations) { }) } -function loadItem(config) { - pandoraAPI('get', {id: config.item, keys: [ - 'id', 'title', 'layers', 'hue', 'saturation', 'lightness' - ]}).then(response => { - //var color = `hsl(${response.data.hue}, ${response.data.saturation * 100}%, ${response.data.lightness * 100}%)` - var color = `hsl(${response.data.hue}, 70%, 50%)` - //document.body.style.background = color - var ascroll = document.querySelector('#ascroll') - var loaded = false - - 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) +function loadAnnotations(config) { + if (config.item) { + pandoraAPI('get', {id: config.item, keys: ['layers']}).then(response => { + var annotations = response.data.layers[config.layer].filter(annotation => { + return !(config.user && annotation.user != config.user) + }) + loadClips(annotations).then(annotations => { + config.annotations = annotations + renderAnnotations(config) + }) }) - 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 = ` -
-
${annotation.value}
- - ` - 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']) + } else { + pandoraAPI('getEdit', {id: config.edit, keys: []}).then(response => { + 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) + }) }) - loaded = true - let frame = ascroll.querySelector('.annotation .frame') - if (frame) { - 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 => { + config.annotations = annotations + renderAnnotations(config) }) }) - 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 = ` -
-
- -
${annotation.title}
-
- -
-
${annotation.value}
- - ` - 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 -if (config.item) { - loadItem(config) -} else if (config.edit) { - loadEdit(config) +if (config.annotations) { + renderAnnotations(config) +} else { + loadAnnotatoins(config) }