merge /m view

static/mobile/css/style.css

@@ -1,16 +1,29 @@
+:root {
+    --bg: rgb(16, 16, 16);
+    --fg: #CCCCCC;
+    --title: rgb(240, 240, 240);
+}
+
 body {
     margin: 0;
-    //background: rgb(240, 240, 240);
+    background: var(--bg);
-    //background: rgb(144, 144, 144);
+    color: var(--fg);
-    //color: rgb(0, 0, 0);
-    background: rgb(16, 16, 16);
-    color: rgb(240, 240, 240);
     font-family: "Noto Sans", "Lucida Grande", "Segoe UI", "DejaVu Sans", "Lucida Sans Unicode", Helvetica, Arial, sans-serif;
     line-height: normal;
 }
 
+*, *::after, *::before {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+*:focus {
+    outline: none;
+}
+
 a {
-    color: rgb(128, 128, 255)
+    color: var(--fg)
 }
 iframe {
     max-width: 100%;
@@ -28,12 +41,19 @@ video, .poster {
     min-height: 100vh;
     max-width: 1000px;
     margin: auto;
+    padding-top: 16px;
+}
+.item-title {
+    color: var(--title);
+    text-decoration: underline;
+    padding-bottom: 0;
+    font-size: 16px;
+    text-wrap: balance;
 }
 .title {
-    padding-top: 16px;
     padding-bottom: 0;
     margin-bottom: 4px;
-    font-size: 14pt;
+    font-size: 18px;
     font-weight: bold;
     border-bottom: 1px solid pink;
     text-wrap: balance;
@@ -48,6 +68,7 @@ video, .poster {
     padding-bottom: 0px;
 }
 @media(max-width:768px) {
+    .item-title,
     .title,
     .byline {
         padding-left: 4px;
@@ -78,7 +99,14 @@ video, .poster {
     padding-top: 16px;
     padding-bottom: 16px;
     text-align: center;
-    font-size: 16pt;
+    font-size: 14px;
+}
+.more a {
+    color: rgb(144, 144, 144);
+}
+.more nav {
+    margin-top: 24px;
+    margin-bottom: 24px;
 }
 .layer.active {
     padding-top: 8px;

static/mobile/js/VideoPlayer.js

@@ -71,8 +71,8 @@ window.VideoPlayer = function(options) {
                     height: 64px;
                 }
                 .mx-controls .toggle .loading svg {
-                    width: 32px;
+                    width: 64px;
-                    height: 32px;
+                    height: 64px;
                 }
                 .mx-controls .controls .volume svg,
                 .mx-controls .controls .fullscreen-btn svg {

static/mobile/js/edits.js

@@ -175,7 +175,6 @@ async function loadEdit(id, args) {
             position += duration
         })
         Object.keys(clip.layers).forEach(layer => {
-            data.layers[layer] = data.layers[layer] || []
             clip.layers[layer].forEach(annotation => {
                 if (args.users && !args.users.includes(annotation.user)) {
                     return
@@ -193,6 +192,7 @@ async function loadEdit(id, args) {
                     clip['position'] + clip['duration'],
                     a.out - clip['in'] + clip['position']
                 );
+                data.layers[layer] = data.layers[layer] || []
                 data.layers[layer].push(a)
             })
         })

static/mobile/js/icons.js

@@ -123,6 +123,15 @@ icon.pause = `
 </svg>
 `
 icon.loading = `
+<svg width="512" height="512" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <path fill="none" stroke="#B1B1B1" stroke-dasharray="15" stroke-dashoffset="15" stroke-linecap="round" stroke-width="2" d="M12 3C16.9706 3 21 7.02944 21 12">
+        <animate fill="freeze" attributeName="stroke-dashoffset" dur="0.3s" values="15;0"/>
+        <animateTransform attributeName="transform" dur="1.5s" repeatCount="indefinite" type="rotate" values="0 12 12;360 12 12"/>
+    </path>
+</svg>
+`
+
+icon.loading_w = `
 <svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 256 256">
     <g transform="translate(128, 128)" stroke="#404040" stroke-linecap="round" stroke-width="28">
         <line x1="0" y1="-114" x2="0" y2="-70" transform="rotate(0)" opacity="1">
@@ -180,3 +189,12 @@ icon.down  = `
     <polygon points="32,56 224,56 128,248" fill="#808080"/>
 </svg>
 `
+
+icon.publishComment = `
+                    <svg width="512" height="512" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+    <g fill="#ef4444">
+        <path d="M12.354 4.354a.5.5 0 0 0-.708-.708L5 10.293L1.854 7.146a.5.5 0 1 0-.708.708l3.5 3.5a.5.5 0 0 0 .708 0l7-7zm-4.208 7l-.896-.897l.707-.707l.543.543l6.646-6.647a.5.5 0 0 1 .708.708l-7 7a.5.5 0 0 1-.708 0z"/>
+        <path d="m5.354 7.146l.896.897l-.707.707l-.897-.896a.5.5 0 1 1 .708-.708z"/>
+    </g>
+</svg>
+`

static/mobile/js/item.js

@@ -10,6 +10,7 @@ async function loadData(id, args) {
             "id",
             "title",
             "director",
+            "source",
             "summary",
             "streams",
             "duration",
@@ -39,7 +40,11 @@ async function loadData(id, args) {
     if (id.split('/').length == 1 || id.split('/')[1] == 'info') {
         data.view = 'info'
         data.title = data.item.title
+        if (data.item.source) {
+            data.byline = data.item.source
+        } else {
             data.byline = data.item.director ? data.item.director.join(', ') : ''
+        }
         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`
@@ -109,6 +114,13 @@ async function loadData(id, args) {
             ${layerData.title}
         </h3>`)
         data.layers[layer].forEach(annotation => {
+            if (pandora.url) {
+                annotation.value = annotation.value.replace(
+                    /src="\//g, `src="${pandora.url.origin}/`
+                ).replace(
+                    /href="\//g, `href="${pandora.url.origin}/`
+                )
+            }
             html.push(`
                 <div class="annotation ${layerData.type}" data-in="${annotation.in}" data-out="${annotation.out}">
                     ${annotation.value}
@@ -120,7 +132,11 @@ async function loadData(id, args) {
     data.value = value.join('\n')
 
     data.title = data.item.title
+    if (data.item.source) {
+        data.byline = data.item.source
+    } else {
         data.byline = data.item.director ? data.item.director.join(', ') : ''
+    }
     data.link = `${pandora.proto}://${data.site}/${data.item.id}/${data["in"]},${data.out}`
     data.poster = `${pandora.proto}://${data.site}/${data.item.id}/480p${data["in"]}.jpg`
     data.aspectratio = data.item.videoRatio

static/mobile/js/main.js

@@ -86,8 +86,8 @@ function render() {
 var loadingScreen = `
     <style>
         svg {
-            width: 32px;
+            width: 64px;
-            height: 32px;
+            height: 64px;
         }
     </style>
     <div style="margin: auto;width: 64px;height: 64px;">${icon.loading}</div>

static/mobile/js/render.js

@@ -3,7 +3,8 @@ function renderItemInfo(data) {
     div = document.createElement('div')
     div.className = "content"
     div.innerHTML = `
-        <div class="title">${data.title}</div>
+        <h1 class="item-title">${item.title}</h1>
+        <h2 class="title">${data.title}</h2>
         <div class="byline">${data.byline}</div>
         <figure>
             <img src="${data.icon}">
@@ -12,10 +13,14 @@ function renderItemInfo(data) {
             <a href="${data.link}">Open on ${data.site}</a>
         </div>
     `
+    if (!item.title) {
+        div.querySelector('item-title').remove()
+    }
     document.querySelector(".content").replaceWith(div)
 }
 
 function renderItem(data) {
+    window.item = window.item || {}
     if (data.error) {
         return renderError(data)
     }
@@ -25,17 +30,23 @@ function renderItem(data) {
     div = document.createElement('div')
     div.className = "content"
     div.innerHTML = `
-        <div class="title">${data.title}</div>
+        <h1 class="item-title">${item.title}</h1>
+        <h2 class="title">${data.title}</h2>
         <div class="byline">${data.byline}</div>
         <div class="player">
             <div class="video"></div>
         </div>
-        <div class="value">${data.value}</div>
+        <div class="value">
+            ${data.value}
             <div class="comments"></div>
+        </div>
         <div class="more">
             <a href="${data.link}">Open on ${data.site}</a>
         </div>
     `
+    if (!item.title) {
+        div.querySelector('.item-title').remove()
+    }
 
     var comments = div.querySelector('.comments')
     if (window.renderComments) {
@@ -98,6 +109,28 @@ function renderItem(data) {
         })
 
     })
+    if (item.next || item.previous) {
+        var nav = document.createElement('nav')
+        nav.classList.add('items')
+        if (item.previous) {
+            var a = document.createElement('a')
+            a.href = item.previous
+            a.innerText = '<< previous'
+            nav.appendChild(a)
+        }
+        if (item.previous && item.next) {
+            var e = document.createElement('span')
+            e.innerText = ' | '
+            nav.appendChild(e)
+        }
+        if (item.next) {
+            var a = document.createElement('a')
+            a.href = item.next
+            a.innerText = 'next >>'
+            nav.appendChild(a)
+        }
+        div.appendChild(nav)
+    }
     document.querySelector(".content").replaceWith(div)
 }
 

static/mobile/js/utils.js

@@ -155,6 +155,9 @@ const getVideoURL = function(id, resolution, part, track, streamId) {
             .replace('{resolution}', resolution)
             .replace('{uid}', uid)
             .replace('{uid42}', uid % 42);
+    if (!prefix) {
+        prefix = pandoraURL
+    }
     return prefix + '/' + getVideoURLName(id, resolution, part, track, streamId);
 };