0x2620/pandora
2
1
Fork 1
Code Issues 1.3k Pull requests Releases Wiki Activity

merge /m view

Browse source
This commit is contained in:
j 2023-08-23 21:01:33 +02:00
parent 2905774b10
commit 49187c8faf
8 changed files with 118 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
static/mobile/css/style.css
View file

@ -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: rgb(144, 144, 144);
//color: rgb(0, 0, 0);
background: rgb(16, 16, 16);
color: rgb(240, 240, 240);
background: var(--bg);
color: var(--fg);
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;

4
static/mobile/js/VideoPlayer.js
View file

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

2
static/mobile/js/edits.js
View file

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

18
static/mobile/js/icons.js
View file

@ -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>
`

16
static/mobile/js/item.js
View file

@ -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

4
static/mobile/js/main.js
View file

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

39
static/mobile/js/render.js
View file

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

3
static/mobile/js/utils.js
View file

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