From 0c73e90751c23b21c059ff1d894d7209025e1c49 Mon Sep 17 00:00:00 2001
From: j <j@mailb.org>
Date: Fri, 28 Jan 2022 18:48:26 +0000
Subject: [PATCH] attempt side-by-side video/text

---
 app/static/css/partials/_player.scss | 55 +++++++++++++++++++---------
 app/static/js/play.js                | 10 ++++-
 2 files changed, 46 insertions(+), 19 deletions(-)

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
 }