0x2620/njpma
2
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

fix merge conflict, minor change to film

Browse source
This commit is contained in:
imohkay 2021-10-22 10:27:44 +05:30
commit 5dab8dad1c
21 changed files with 399 additions and 75 deletions
Download patch file Download diff file Expand all files Collapse all files

31
app/static/css/partials/_ascroll.scss
View file

@ -1,22 +1,31 @@
#ascroll {
font-family: "noto_sans";
width: 100%;
max-width: 1080px;
margin: auto;
color: #222;
h1 {
margin: 4px;
margin-top: 32px;
font-size: 24px;
padding: 4px;
padding-top: 32px;
font-size: 20px;
letter-spacing: 1px;
font-weight: bold;
max-width: 1080px;
margin: auto;
}
h2 {
margin: 4px;
padding: 4px;
max-width: 1080px;
margin: auto;
}
.intro {
margin: 4px;
margin-bottom: 64px;
padding: 4px;
padding-bottom: 64px;
max-width: 1080px;
margin: auto;
}
.vbox {
max-width: 1080px;
margin: auto;
}
.player {
position: absolute;
@ -31,6 +40,8 @@
.annotation {
min-height: 100vh;
.frame {
max-width: 1080px;
margin: auto;
img {
width: 100%;
height: auto;
@ -42,7 +53,9 @@
}
}
.text {
margin: 20px 20px;
max-width: 1080px;
margin: auto;
padding: 20px 20px;
font-size: 22px;
line-height: 26px;
}

7
app/static/css/partials/_layout.scss
View file

@ -19,11 +19,14 @@
//color: #000;
}
}
body {
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;
background-size: 400% 100%;
color: #eee;
}
body {
color: #ddd;
font-family: "noto_sans", sans-serif;
font-size: 20px;
overflow-x: hidden;

6
app/static/css/partials/_menu.scss
View file

@ -33,10 +33,6 @@
font-size: 17px;
margin-left: var(--spacing);
&:hover {
background-color: #ddd;
color: black;
}
@media screen and (max-width: 799px) {
&.title {
display: block;
@ -57,4 +53,4 @@
font-weight: 700;
padding-bottom: calc(var(--spacing) / 2);
}
}
}

18
app/static/css/partials/_text.scss
View file

@ -63,3 +63,21 @@ main > .texts {
}
}
}
main > .index {
text-align: center;
padding-top: 48px;
font-size: 26px;
line-height: 1.3;
}
main > .about {
line-height: 1.2;
margin: 16px;
p {
padding-bottom: 24px;
}
}

21
app/static/css/partials/_titleanimation.scss Normal file
View file

@ -0,0 +1,21 @@
@keyframes animated_title_animation {
0%,100% {
background-position: 0 0;
}
50% {
background-position: 100% 0;
}
}
.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-clip: text;
color: transparent;
animation: animated_title_animation 60s ease-in-out infinite;
background-size: 400% 100%;
}
}

1
app/static/css/style.scss
View file

@ -1,5 +1,6 @@
@import "partials/reset";
@import "partials/layout";
@import "partials/titleanimation";
@import "partials/menu";
@import "partials/film";
@import "partials/text";

12
app/static/js/animation.js Normal file
View file

@ -0,0 +1,12 @@
document.querySelectorAll('body.animated').forEach(element => {
var animationDuration = 60;
var randomDuration = Math.random() * animationDuration;
element.style.animationDelay = -randomDuration + 's';
})
document.querySelectorAll('.animated-title').forEach(element => {
var animationDuration = 60;
var randomDuration = Math.random() * animationDuration;
element.querySelectorAll('.text').forEach(text => {
text.style.animationDelay = -randomDuration + 's';
}
})

134
app/static/js/ascroll.js
View file

@ -120,16 +120,19 @@ function timeupdate(event) {
}
function formatInfo(config, ascroll) {
var info = document.createElement('div')
var h1 = document.createElement('h1')
h1.innerHTML = config.title
ascroll.appendChild(h1)
info.appendChild(h1)
var h2 = document.createElement('h2')
h2.innerHTML = config.byline
ascroll.appendChild(h2)
info.appendChild(h2)
var div = document.createElement('div')
div.classList.add('intro')
div.innerHTML = config.body
ascroll.appendChild(div)
info.appendChild(div)
ascroll.appendChild(info)
return info
}
function showOverlay(event) {
@ -181,6 +184,34 @@ function showOverlay(event) {
}
async function loadClips(annotations) {
var items = annotations.map(annotation => annotation.id.split('/')[0])
items = [...new Set(items)]
return pandoraAPI('findClips', {itemsQuery: {
conditions: [{key: 'id', operator: '&', value: items}]
}, range: [0, 10000], keys: [
'id', 'hue', 'saturation', 'lightness'
]}).then(response => {
var colors = {}
response.data.items.forEach(clip => {
colors[clip.id] = clip
})
var previous
annotations.forEach(annotation => {
var clipId = annotation.id.split('/')[0] + '/' + annotation.in.toFixed(3) + '-'+ annotation.out.toFixed(3)
annotation.color1 = colors[clipId]
if(previous) {
previous.color2 = annotation.color1
}
previous = annotation
})
if (annotations.length) {
annotations[annotations.length - 1].color2 = annotations[0].color1
}
return annotations
})
}
function loadItem(config) {
pandoraAPI('get', {id: config.item, keys: [
'id', 'title', 'layers', 'hue', 'saturation', 'lightness'
@ -198,39 +229,48 @@ function loadItem(config) {
video.addEventListener('timeupdate', timeupdate)
video.addEventListener('touchstart', showOverlay)
video.addEventListener('mouseover', showOverlay)
ascroll.appendChild(video)
var box = document.createElement('div')
box.classList.add('vbox')
box.appendChild(video)
ascroll.appendChild(box)
var first
formatInfo(config, ascroll)
response.data.layers[layer].forEach(annotation => {
if (config.user && annotation.user != config.user) {
return
}
if (!first) {
first = annotation
}
var div = document.createElement('div')
div.classList.add('annotation')
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'])
}
}))
var info = formatInfo(config, ascroll)
var annotations = response.data.layers[config.layer].filter(annotation => {
return !(config.user && annotation.user != config.user)
})
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'])
}
}))
})
loaded = true
let frame = ascroll.querySelector('.annotation .frame')
if (frame) {
updatePlayer(video, frame, first['in'], first['out'])
}
})
loaded = true
let frame = ascroll.querySelector('.annotation .frame')
if (frame) {
updatePlayer(video, frame, first['in'], first['out'])
}
})
}
function loadEdit(config) {
@ -245,23 +285,37 @@ function loadEdit(config) {
ascroll.appendChild(video)
var first
formatInfo(config, ascroll)
var info = formatInfo(config, ascroll)
var previous
var annotations = []
response.data.clips.forEach(clip => {
clip.layers[layer].forEach(annotation => {
clip.layers[config.layer].forEach(annotation => {
if (config.user && annotation.user != config.user) {
return
}
if (!first) {
first = annotation
}
annotation.title = clip.title
annotations.push(annotation)
})
})
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">${clip.title}</a></figcaption>
<figcaption><a href="${baseURL}/${annotation.id}" target="_blank">${annotation.title}</a></figcaption>
</figure>
</div>
@ -288,6 +342,8 @@ function loadEdit(config) {
})
}
config.layer = config.layer || layer
if (config.item) {
loadItem(config)
} else if (config.edit) {