forked from 0x2620/pandora
merge /m view
This commit is contained in:
parent
2905774b10
commit
49187c8faf
8 changed files with 118 additions and 20 deletions
|
@ -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;
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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)
|
||||
})
|
||||
})
|
||||
|
|
|
@ -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>
|
||||
`
|
||||
|
|
|
@ -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
|
||||
data.byline = data.item.director ? data.item.director.join(', ') : ''
|
||||
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
|
||||
data.byline = data.item.director ? data.item.director.join(', ') : ''
|
||||
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
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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="comments"></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)
|
||||
}
|
||||
|
||||
|
|
|
@ -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);
|
||||
};
|
||||
|
||||
|
|
Loading…
Reference in a new issue