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

attempt side-by-side video/text

Browse source
This commit is contained in:
j 2022-01-28 18:48:26 +00:00
parent e27bd125ac
commit 0c73e90751
2 changed files with 46 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
app/static/css/partials/_player.scss
View file

@ -36,11 +36,20 @@
}
}
.stage {
display: flex;
flex-direction: row;
margin: 8px;
@media (max-aspect-ratio: 4 / 3) {
margin-left: 0px;
margin-right: 0px;
flex-direction: column;
}
.vbox {
max-width: var(--container-width);
margin: auto;
text-align: center;
}
margin-top: 0;
width: 100%;
.player {
width: 100%;
height: auto;
@ -48,10 +57,22 @@
max-height: 80vh;
margin: auto;
}
}
.annotations {
width: 100%;
margin-top: auto;
@media (max-aspect-ratio: 4 / 3) {
max-width: 90%;
text-align: center;
}
height: 100%;
b {
font-weight: bold;
}
.annotation {
display: none;
text-align: center;
max-width: 90%;
margin: auto;
}
}
}
}

10
app/static/js/play.js
View file

@ -208,12 +208,18 @@ function renderPlayer(config) {
box.classList.add('vbox')
box.appendChild(video)
config.info = formatInfo(config, player)
player.appendChild(box)
var stage = document.createElement('div')
stage.classList.add('stage')
stage.appendChild(box)
var div = document.createElement('div')
div.classList.add('annotations')
config.annotations.forEach(annotation => {
renderAnnotation(config, video, player, annotation)
renderAnnotation(config, video, div, annotation)
})
stage.appendChild(div)
player.appendChild(stage)
config.loaded = true
}