fix merge conflicts with About page
This commit is contained in:
commit
323a86a5e9
14 changed files with 326 additions and 266 deletions
|
|
@ -1,5 +1,3 @@
|
|||
|
||||
|
||||
.films {
|
||||
margin: var(--spacing-2);
|
||||
box-sizing: border-box;
|
||||
|
|
@ -33,24 +31,25 @@
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
main > .film {
|
||||
max-width: var(--container-width);
|
||||
margin: auto;
|
||||
.info {
|
||||
margin: var(--spacing) var(--spacing-2);
|
||||
margin-bottom: 32px;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
|
||||
h1 {
|
||||
font-size: 24px;
|
||||
margin: 24px 0;
|
||||
font-size: 20px;
|
||||
margin: 0 0 24px 0;
|
||||
}
|
||||
h2 {
|
||||
font-size: 18px;
|
||||
margin: 24px 0;
|
||||
}
|
||||
.details {
|
||||
font-size: 18px;
|
||||
margin-top: var(--spacing-2);
|
||||
}
|
||||
.bio {
|
||||
|
|
@ -60,14 +59,12 @@ main > .film {
|
|||
}
|
||||
}
|
||||
}
|
||||
video {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.play {
|
||||
text-align: center;
|
||||
margin: var(--spacing);
|
||||
margin-top: var(--spacing-2);
|
||||
margin-bottom: var(--spacing-2);
|
||||
max-width: 250px;
|
||||
|
||||
.texts {
|
||||
padding-top: var(--spacing-2);
|
||||
|
|
@ -85,3 +82,88 @@ main > .film {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.info-meta {
|
||||
display: inline-block;
|
||||
margin: 0 auto;
|
||||
position: absolute;
|
||||
max-width: 600px;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
animation: fade_in 1s linear 0.4s forwards;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.info-meta, .bio-block, .play, .summary-block {
|
||||
background: rgba(0, 0, 0, 0.55);
|
||||
border-radius: 2px;
|
||||
box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.6);
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: 20px;
|
||||
font-size: 18px;
|
||||
|
||||
a {
|
||||
color: var(--color-link);
|
||||
text-decoration: none;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
.summary-block {
|
||||
max-width: 1080px;
|
||||
margin-top: 350px;
|
||||
}
|
||||
|
||||
.bio-block {
|
||||
max-width: 1080px;
|
||||
margin-top: 30px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.video-block {
|
||||
height: 100vh;
|
||||
padding-bottom: 50px;
|
||||
padding-top: 50px;
|
||||
|
||||
video {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: -9999;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
object-fit: fill;
|
||||
//height: 100vh;
|
||||
//width: auto;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-play {
|
||||
color: #fff;
|
||||
border: 3px solid var(--color-link);
|
||||
border-radius: 50%;
|
||||
font-size: 32px;
|
||||
text-decoration: none;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.film-play-block {
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.film-play-spacer {
|
||||
padding: var(--spacing);
|
||||
margin-top: 4px;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
|
@ -4,6 +4,8 @@
|
|||
--bg-color-3: #ffff00;
|
||||
--bg-color-4: #ff3399;
|
||||
|
||||
--color-link: #ee0;
|
||||
|
||||
--spacing: 8px;
|
||||
--spacing-2: calc(var(--spacing) * 2);
|
||||
|
||||
|
|
@ -14,14 +16,23 @@
|
|||
@keyframes background_animation {
|
||||
0%,100% {
|
||||
background-position: 0 0;
|
||||
color: #ddd;
|
||||
}
|
||||
|
||||
50% {
|
||||
background-position: 100% 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes text_animation {
|
||||
0%,100% {
|
||||
color: #ddd;
|
||||
}
|
||||
|
||||
50% {
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
|
||||
body.animated {
|
||||
background: linear-gradient(to right, var(--bg-color-1), var(--bg-color-2) , var(--bg-color-3), var(--bg-color-4));
|
||||
//animation: background_animation 60s ease-in-out infinite;
|
||||
|
|
@ -29,6 +40,10 @@ body.animated {
|
|||
color: #ddd;
|
||||
}
|
||||
|
||||
body.animated-text {
|
||||
animation: text_animation 60s ease-in-out infinite;
|
||||
}
|
||||
|
||||
body {
|
||||
color: #ddd;
|
||||
font-family: "noto_sans", sans-serif;
|
||||
|
|
@ -63,3 +78,14 @@ nav {
|
|||
padding-left: var(--spacing-2);
|
||||
padding-right: var(--spacing-2);
|
||||
}
|
||||
|
||||
// Animations: Fade In
|
||||
@keyframes fade_in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
|
||||
.topnav {
|
||||
background-color: #333;
|
||||
background-color: #333e;
|
||||
position: relative;
|
||||
height: 68px;
|
||||
padding: var(--spacing-2);
|
||||
|
|
|
|||
|
|
@ -1,4 +1,9 @@
|
|||
|
||||
:root {
|
||||
--animated-title-color-1: #6666ff;
|
||||
--animated-title-color-2: #0099ff;
|
||||
--animated-title-color-3: #ffff00;
|
||||
--animated-title-color-4: #ff3399;
|
||||
}
|
||||
@keyframes animated_title_animation {
|
||||
0%,100% {
|
||||
background-position: 0 0;
|
||||
|
|
@ -11,8 +16,7 @@
|
|||
|
||||
.animated-title {
|
||||
.text {
|
||||
//background: linear-gradient(to right, #6666ff, #0099ff , #00ff00, #ff3399, #6666ff);
|
||||
background: linear-gradient(to right, var(--bg-color-1), var(--bg-color-2) , var(--bg-color-3), var(--bg-color-4));
|
||||
background: linear-gradient(to right, var(--animated-title-color-1), var(--animated-title-color-2) , var(--animated-title-color-3), var(--animated-title-color-4));
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
|
|
|
|||
|
|
@ -8,5 +8,5 @@ document.querySelectorAll('.animated-title').forEach(element => {
|
|||
var randomDuration = Math.random() * animationDuration;
|
||||
element.querySelectorAll('.text').forEach(text => {
|
||||
text.style.animationDelay = -randomDuration + 's';
|
||||
}
|
||||
})
|
||||
})
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ var cache = cache || {}
|
|||
var layer = 'descriptions'
|
||||
var baseURL = 'https://pad.ma'
|
||||
var imageResolution = 480
|
||||
var videoExtension
|
||||
|
||||
async function pandoraAPI(action, data) {
|
||||
var url = baseURL + '/api/'
|
||||
|
|
@ -21,13 +22,29 @@ async function pandoraAPI(action, data) {
|
|||
return cache[key]
|
||||
}
|
||||
|
||||
function setVideoSrc(video, src) {
|
||||
var ext
|
||||
if (!videoExtension) {
|
||||
[
|
||||
['video/mp4; codecs="avc1.42E01E, mp4a.40.2"', '.mp4'],
|
||||
['video/webm; codecs="vp8, vorbis"', '.webm'],
|
||||
].forEach(opt => {
|
||||
if (videoExtension) { return }
|
||||
if (video.canPlayType(opt[0]).replace('no', '')) {
|
||||
videoExtension = opt[1]
|
||||
}
|
||||
})
|
||||
}
|
||||
video.src = src.replace('.webm', videoExtension)
|
||||
}
|
||||
|
||||
function updatePlayer(video, frame, currentTime, out, src) {
|
||||
var rect = frame.getBoundingClientRect();
|
||||
video.style.opacity = 0
|
||||
video.style.top = (rect.top + window.scrollY) + 'px'
|
||||
video.style.display = 'block';
|
||||
if (src) {
|
||||
video.src = src
|
||||
setVideoSrc(video, src)
|
||||
}
|
||||
//video.poster = frame.querySelector('img').src
|
||||
var muted = video.muted
|
||||
|
|
@ -184,6 +201,79 @@ function showOverlay(event) {
|
|||
|
||||
}
|
||||
|
||||
function renderAnnotation(config, video, ascroll, annotation) {
|
||||
var div = document.createElement('div')
|
||||
div.classList.add('annotation')
|
||||
|
||||
var color1 = `hsl(${annotation.color1.hue}, 70%, 75%)`
|
||||
var color2 = `hsl(${annotation.color2.hue}, 70%, 75%)`
|
||||
if (!config.first) {
|
||||
config.first = annotation
|
||||
config.info.style.background = color1
|
||||
}
|
||||
div.style.background = `linear-gradient(to bottom, ${color1}, ${color2})`;
|
||||
var figcaption = ''
|
||||
if (annotation.title) {
|
||||
figcaption = `<figcaption><a href="${baseURL}/${annotation.id}" target="_blank">${annotation.title}</a></figcaption>`
|
||||
}
|
||||
div.innerHTML = `
|
||||
<div class="frame">
|
||||
<figure>
|
||||
<img src="${baseURL}/${annotation.id.split('/')[0]}/${imageResolution}p${annotation.in}.jpg">
|
||||
${figcaption}
|
||||
</figure>
|
||||
</div>
|
||||
<div class="text">${annotation.value}</div>
|
||||
`
|
||||
ascroll.appendChild(div)
|
||||
var frame = div.querySelector('.frame')
|
||||
document.addEventListener('scroll', onVisibilityChange(div.querySelector('.frame'), function(visible) {
|
||||
var src
|
||||
if (config.edit) {
|
||||
src = `${baseURL}/${annotation.id.split('/')[0]}/480p.webm`
|
||||
}
|
||||
if (config.loaded && visible) {
|
||||
updatePlayer(video, frame, annotation['in'], annotation['out'], src)
|
||||
}
|
||||
|
||||
}))
|
||||
}
|
||||
|
||||
function renderAnnotations(config) {
|
||||
var ascroll = document.querySelector('#ascroll')
|
||||
config.loaded = false
|
||||
var video = document.createElement('video')
|
||||
video.classList.add('player')
|
||||
video.playsinline = true
|
||||
video.muted = true
|
||||
if (config.item) {
|
||||
setVideoSrc(video, `${baseURL}/${config.item}/480p.webm`)
|
||||
}
|
||||
video.addEventListener('timeupdate', timeupdate)
|
||||
video.addEventListener('touchstart', showOverlay)
|
||||
video.addEventListener('mouseover', showOverlay)
|
||||
var box = document.createElement('div')
|
||||
box.classList.add('vbox')
|
||||
box.appendChild(video)
|
||||
ascroll.appendChild(box)
|
||||
|
||||
config.info = formatInfo(config, ascroll)
|
||||
config.annotations.forEach(annotation => {
|
||||
renderAnnotation(config, video, ascroll, annotation)
|
||||
})
|
||||
config.loaded = true
|
||||
if (config.first) {
|
||||
let frame = ascroll.querySelector('.annotation .frame')
|
||||
if (frame) {
|
||||
var src
|
||||
if (config.edit) {
|
||||
src = `${baseURL}/${config.first.id.split('/')[0]}/480p.webm`
|
||||
}
|
||||
updatePlayer(video, frame, config.first['in'], config.first['out'], src)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function loadClips(annotations) {
|
||||
var items = annotations.map(annotation => annotation.id.split('/')[0])
|
||||
items = [...new Set(items)]
|
||||
|
|
@ -212,140 +302,41 @@ async function loadClips(annotations) {
|
|||
})
|
||||
}
|
||||
|
||||
function loadItem(config) {
|
||||
pandoraAPI('get', {id: config.item, keys: [
|
||||
'id', 'title', 'layers', 'hue', 'saturation', 'lightness'
|
||||
]}).then(response => {
|
||||
//var color = `hsl(${response.data.hue}, ${response.data.saturation * 100}%, ${response.data.lightness * 100}%)`
|
||||
var color = `hsl(${response.data.hue}, 70%, 50%)`
|
||||
//document.body.style.background = color
|
||||
var ascroll = document.querySelector('#ascroll')
|
||||
var loaded = false
|
||||
|
||||
var video = document.createElement('video')
|
||||
video.classList.add('player')
|
||||
video.muted = true
|
||||
video.src = `${baseURL}/${config.item}/480p.webm`
|
||||
video.addEventListener('timeupdate', timeupdate)
|
||||
video.addEventListener('touchstart', showOverlay)
|
||||
video.addEventListener('mouseover', showOverlay)
|
||||
var box = document.createElement('div')
|
||||
box.classList.add('vbox')
|
||||
box.appendChild(video)
|
||||
ascroll.appendChild(box)
|
||||
|
||||
var first
|
||||
var info = formatInfo(config, ascroll)
|
||||
var annotations = response.data.layers[config.layer].filter(annotation => {
|
||||
return !(config.user && annotation.user != config.user)
|
||||
function loadAnnotations(config) {
|
||||
if (config.item) {
|
||||
pandoraAPI('get', {id: config.item, keys: ['layers']}).then(response => {
|
||||
var annotations = response.data.layers[config.layer].filter(annotation => {
|
||||
return !(config.user && annotation.user != config.user)
|
||||
})
|
||||
loadClips(annotations).then(annotations => {
|
||||
config.annotations = annotations
|
||||
renderAnnotations(config)
|
||||
})
|
||||
})
|
||||
loadClips(annotations).then(annotations => {
|
||||
annotations.forEach(annotation => {
|
||||
var div = document.createElement('div')
|
||||
div.classList.add('annotation')
|
||||
|
||||
var color1 = `hsl(${annotation.color1.hue}, 70%, 75%)`
|
||||
var color2 = `hsl(${annotation.color2.hue}, 70%, 75%)`
|
||||
if (!first) {
|
||||
first = annotation
|
||||
info.style.background = color1
|
||||
}
|
||||
div.style.background = `linear-gradient(to bottom, ${color1}, ${color2})`;
|
||||
div.innerHTML = `
|
||||
<div class="frame"><img src="${baseURL}/${annotation.id.split('/')[0]}/${imageResolution}p${annotation.in}.jpg"></div>
|
||||
<div class="text">${annotation.value}</div>
|
||||
|
||||
`
|
||||
ascroll.appendChild(div)
|
||||
var frame = div.querySelector('.frame')
|
||||
document.addEventListener('scroll', onVisibilityChange(div.querySelector('.frame'), function(visible) {
|
||||
if (loaded && visible) {
|
||||
updatePlayer(video, frame, annotation['in'], annotation['out'])
|
||||
} else {
|
||||
pandoraAPI('getEdit', {id: config.edit, keys: []}).then(response => {
|
||||
var annotations = []
|
||||
response.data.clips.forEach(clip => {
|
||||
clip.layers[config.layer].forEach(annotation => {
|
||||
if (config.user && annotation.user != config.user) {
|
||||
return
|
||||
}
|
||||
|
||||
}))
|
||||
annotation.title = clip.title
|
||||
annotations.push(annotation)
|
||||
})
|
||||
})
|
||||
loaded = true
|
||||
let frame = ascroll.querySelector('.annotation .frame')
|
||||
if (frame) {
|
||||
updatePlayer(video, frame, first['in'], first['out'])
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
function loadEdit(config) {
|
||||
pandoraAPI('getEdit', {id: config.edit, keys: []}).then(response => {
|
||||
var ascroll = document.querySelector('#ascroll')
|
||||
var loaded = false
|
||||
|
||||
var video = document.createElement('video')
|
||||
video.classList.add('player')
|
||||
video.muted = true
|
||||
video.addEventListener('timeupdate', timeupdate)
|
||||
ascroll.appendChild(video)
|
||||
|
||||
var first
|
||||
var info = formatInfo(config, ascroll)
|
||||
var previous
|
||||
|
||||
var annotations = []
|
||||
|
||||
response.data.clips.forEach(clip => {
|
||||
clip.layers[config.layer].forEach(annotation => {
|
||||
if (config.user && annotation.user != config.user) {
|
||||
return
|
||||
}
|
||||
annotation.title = clip.title
|
||||
annotations.push(annotation)
|
||||
loadClips(annotations).then(annotations => {
|
||||
config.annotations = annotations
|
||||
renderAnnotations(config)
|
||||
})
|
||||
})
|
||||
loadClips(annotations).then(annotations => {
|
||||
annotations.forEach(annotation => {
|
||||
var div = document.createElement('div')
|
||||
div.classList.add('annotation')
|
||||
|
||||
var color1 = `hsl(${annotation.color1.hue}, 70%, 75%)`
|
||||
var color2 = `hsl(${annotation.color2.hue}, 70%, 75%)`
|
||||
if (!first) {
|
||||
first = annotation
|
||||
info.style.background = color1
|
||||
}
|
||||
div.style.background = `linear-gradient(to bottom, ${color1}, ${color2})`;
|
||||
div.innerHTML = `
|
||||
<div class="frame">
|
||||
<figure>
|
||||
<img src="${baseURL}/${annotation.id.split('/')[0]}/${imageResolution}p${annotation.in}.jpg">
|
||||
<figcaption><a href="${baseURL}/${annotation.id}" target="_blank">${annotation.title}</a></figcaption>
|
||||
</figure>
|
||||
|
||||
</div>
|
||||
<div class="text">${annotation.value}</div>
|
||||
|
||||
`
|
||||
ascroll.appendChild(div)
|
||||
var frame = div.querySelector('.frame')
|
||||
document.addEventListener('scroll', onVisibilityChange(div.querySelector('.frame'), function(visible) {
|
||||
var src = `${baseURL}/${annotation.id.split('/')[0]}/480p.webm`
|
||||
if (loaded && visible) {
|
||||
updatePlayer(video, frame, annotation['in'], annotation['out'], src)
|
||||
}
|
||||
|
||||
}))
|
||||
})
|
||||
})
|
||||
loaded = true
|
||||
let frame = ascroll.querySelector('.annotation .frame')
|
||||
if (frame) {
|
||||
var src = `${baseURL}/${first.id.split('/')[0]}/480p.webm`
|
||||
updatePlayer(video, frame, first['in'], first['out'], src)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
config.layer = config.layer || layer
|
||||
|
||||
if (config.item) {
|
||||
loadItem(config)
|
||||
} else if (config.edit) {
|
||||
loadEdit(config)
|
||||
if (config.annotations) {
|
||||
renderAnnotations(config)
|
||||
} else {
|
||||
loadAnnotations(config)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,28 @@
|
|||
var videoExtension
|
||||
|
||||
function setVideoSrc(video, src) {
|
||||
var ext
|
||||
if (!videoExtension) {
|
||||
[
|
||||
['video/mp4; codecs="avc1.42E01E, mp4a.40.2"', '.mp4'],
|
||||
['video/webm; codecs="vp8, vorbis"', '.webm'],
|
||||
].forEach(opt => {
|
||||
if (videoExtension) { return }
|
||||
if (video.canPlayType(opt[0]).replace('no', '')) {
|
||||
videoExtension = opt[1]
|
||||
}
|
||||
})
|
||||
}
|
||||
video.src = src.replace('.webm', videoExtension)
|
||||
}
|
||||
|
||||
document.querySelector('a#play-fullscreen').addEventListener('click', event => {
|
||||
event.preventDefault()
|
||||
event.stopPropagation()
|
||||
var video = document.createElement('video')
|
||||
video.classList.add('player')
|
||||
video.src = 'https://pad.ma/' + film.id + '/480p.webm'
|
||||
setVideoSrc(video, 'https://pad.ma/' + film.id + '/480p.webm')
|
||||
console.log(video.src)
|
||||
video.controls = true
|
||||
document.querySelector('main').appendChild(video)
|
||||
video.style.display = 'none'
|
||||
|
|
@ -32,7 +53,4 @@ document.querySelector('a#play-fullscreen').addEventListener('click', event => {
|
|||
}
|
||||
});
|
||||
video.play()
|
||||
|
||||
event.preventDefault()
|
||||
event.stopPropagation()
|
||||
})
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue