diff --git a/static/mobile/js/VideoPlayer.js b/static/mobile/js/VideoPlayer.js index 93e4a2f22..af219c547 100644 --- a/static/mobile/js/VideoPlayer.js +++ b/static/mobile/js/VideoPlayer.js @@ -18,6 +18,9 @@ window.VideoPlayer = function(options) { self.controls = document.createElement('div') self.controls.classList.add('mx-controls') + if (options.poster) { + self.controls.classList.add('poster') + } //self.controls.style.display = "none" if (self.options.controls) { var ratio = `aspect-ratio: ${self.options.aspectratio};` @@ -45,6 +48,13 @@ window.VideoPlayer = function(options) { margin: auto; } + .mx-controls.poster { + background-image: url(${self.options.poster}); + background-repeat: no-repeat; + background-size: contain; + background-blend-mode: overlay; + } + .mx-controls .toggle { display: flex; flex: 1; @@ -160,6 +170,7 @@ window.VideoPlayer = function(options) { event.preventDefault() event.stopPropagation() if (that.paused) { + self.controls.classList.remove('poster') that.play() } else { that.pause() @@ -193,6 +204,7 @@ window.VideoPlayer = function(options) { }) } if (that.paused && !failed) { + self.controls.classList.remove('poster') that.play() } } else { @@ -314,6 +326,7 @@ window.VideoPlayer = function(options) { toggle.querySelector('div').innerHTML = icon.pause self.controls.style.opacity = '0' unblock.remove() + self.controls.classList.remove('poster') that.play() } }) diff --git a/static/mobile/js/edits.js b/static/mobile/js/edits.js index cdf7df1fb..1d1487736 100644 --- a/static/mobile/js/edits.js +++ b/static/mobile/js/edits.js @@ -90,6 +90,21 @@ async function sortClips(edit, sort) { } } +function getClip(edit, position) { + const response = {} + let pos = 0 + edit.clips.forEach(function(clip) { + if (clip.position < position && clip.position + clip.duration > position) { + response.item = clip.item + response.position = position - clip.position + if (clip['in']) { + response.position += clip['in'] + } + } + }); + return response +} + async function loadEdit(id, args) { var data = window.data = {} data.id = id @@ -107,7 +122,7 @@ async function loadEdit(id, args) { } } data.edit = response['data'] - if (['public', 'featured'].indexOf(data.edit) == -1) { + if (data.edit.status !== 'public') { return { site: data.site, error: { @@ -197,6 +212,15 @@ async function loadEdit(id, args) { }) }) }) + if (data.layers[pandora.subtitleLayer]) { + var previous; + data.layers[pandora.subtitleLayer].forEach(annotation => { + if (previous) { + previous.out = annotation['in'] + } + previous = annotation + }) + } var value = [] pandora.layerKeys.forEach(layer => { if (!data.layers[layer]) { @@ -215,14 +239,26 @@ async function loadEdit(id, args) { `) }) - value.push('
' + html.join('\n') + '
') + var layerClass = "" + if (layerData.isSubtitles) { + layerClass = " is-subtitles" + } + value.push('
' + html.join('\n') + '
') }) data.value = value.join('\n') data.title = data.edit.name data.byline = data.edit.description data.link = `${pandora.proto}://${data.site}/edits/${data.edit.id}` - data.poster = data.videos[0].src.split('/' + pandora.resolution)[0] + `/${pandora.resolution}p${data.videos[0].in}.jpg` + let poster = data.edit.posterFrames[0] + if (args.parts[2] && args.parts[2].indexOf(':') > -1) { + poster = getClip(data.edit, parseDuration(args.parts[2])) + } + if (poster && poster.item) { + data.poster = `${pandora.proto}://${data.site}/${poster.item}/${pandora.resolution}${poster.position.toFixed(3)}.jpg` + } else { + data.poster = data.videos[0].src.split('/48')[0] + `/${pandora.resolution}p${data.videos[0].in.toFixed(3)}.jpg` + } data.aspectratio = data.edit.clips[0].videoRatio data.duration = data.edit.duration return data diff --git a/static/mobile/js/item.js b/static/mobile/js/item.js index 9e1a6d731..0cc3dcf1e 100644 --- a/static/mobile/js/item.js +++ b/static/mobile/js/item.js @@ -10,6 +10,8 @@ async function loadData(id, args) { "id", "title", "director", + "year", + "date", "source", "summary", "streams", @@ -45,6 +47,11 @@ async function loadData(id, args) { } else { data.byline = data.item.director ? data.item.director.join(', ') : '' } + if (data.item.year) { + data.byline += ' (' + data.item.year + ')' + } else if (data.item.date) { + data.byline += ' (' + data.item.date.split('-')[0] + ')' + } data.link = `${pandora.proto}://${data.site}/${data.item.id}/info` let poster = pandora.site.user.ui.icons == 'posters' ? 'poster' : 'icon' data.icon = `${pandora.proto}://${data.site}/${data.item.id}/${poster}.jpg` @@ -105,6 +112,15 @@ async function loadData(id, args) { duration: duration }) }) + if (data.layers[pandora.subtitleLayer]) { + var previous; + data.layers[pandora.subtitleLayer].forEach(annotation => { + if (previous) { + previous.out = annotation['in'] + } + previous = annotation + }) + } var value = [] Object.keys(data.layers).forEach(layer => { var html = [] @@ -127,7 +143,11 @@ async function loadData(id, args) { `) }) - value.push('
' + html.join('\n') + '
') + var layerClass = "" + if (layerData.isSubtitles) { + layerClass = " is-subtitles" + } + value.push('
' + html.join('\n') + '
') }) data.value = value.join('\n') @@ -137,6 +157,11 @@ async function loadData(id, args) { } else { data.byline = data.item.director ? data.item.director.join(', ') : '' } + if (data.item.year) { + data.byline += ' (' + data.item.year + ')' + } else if (data.item.date) { + data.byline += ' (' + data.item.date.split('-')[0] + ')' + } data.link = `${pandora.proto}://${data.site}/${data.item.id}/${data["in"]},${data.out}` data.poster = `${pandora.proto}://${data.site}/${data.item.id}/${pandora.resolution}p${data["in"]}.jpg` data.aspectratio = data.item.videoRatio diff --git a/static/mobile/js/main.js b/static/mobile/js/main.js index 9d0f3c42c..ebd9b8100 100644 --- a/static/mobile/js/main.js +++ b/static/mobile/js/main.js @@ -109,6 +109,7 @@ pandoraAPI("init").then(response => { if (subtitleLayer) { layerKeys.push(subtitleLayer.id) } + pandora.subtitleLayer = subtitleLayer.id pandora.site.layers.map(layer => { return layer.id }).filter(layer => { diff --git a/static/mobile/js/render.js b/static/mobile/js/render.js index 307c5d2fd..d8097f869 100644 --- a/static/mobile/js/render.js +++ b/static/mobile/js/render.js @@ -20,7 +20,6 @@ function renderItemInfo(data) { } function renderItem(data) { - window.item = window.item || {} if (data.error) { return renderError(data) }