merge changes from phantasma

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()
         }
     })

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) {
                 </div>
             `)
         })
-        value.push('<div class="layer">' + html.join('\n') + '</div>')
+        var layerClass = ""
+        if (layerData.isSubtitles) {
+            layerClass = " is-subtitles"
+        }
+        value.push('<div class="layer'+layerClass+'">' + html.join('\n') + '</div>')
     })
     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

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) {
                 </div>
             `)
         })
-        value.push('<div class="layer">' + html.join('\n') + '</div>')
+        var layerClass = ""
+        if (layerData.isSubtitles) {
+            layerClass = " is-subtitles"
+        }
+        value.push('<div class="layer'+layerClass+'">' + html.join('\n') + '</div>')
     })
     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

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 => {

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)
     }