diff --git a/app/static/css/partials/_player.scss b/app/static/css/partials/_player.scss index 74405cc..e22a687 100644 --- a/app/static/css/partials/_player.scss +++ b/app/static/css/partials/_player.scss @@ -36,22 +36,43 @@ } } - .vbox { - max-width: var(--container-width); - margin: auto; - text-align: center; - } - .player { - width: 100%; - height: auto; - max-width: var(--container-width); - max-height: 80vh; - margin: auto; - } - .annotation { - display: none; - text-align: center; - max-width: 90%; - margin: auto; + .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; + margin-top: 0; + width: 100%; + .player { + width: 100%; + height: auto; + max-width: var(--container-width); + 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; + margin: auto; + } + } } } diff --git a/app/static/js/play.js b/app/static/js/play.js index 9313455..d43e8fb 100644 --- a/app/static/js/play.js +++ b/app/static/js/play.js @@ -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 }