Change video layout, add alignment button for Discord activity

The button to snap the video to the left or right instead of the
default center is because mobile Discord shows the user's avatar as a
little floating window over the activity. This can infringe on the
video if we're unlucky vis-a-vis screen aspect ratio and video aspect
ratio; in practice we can often save ourselves by changing the
video alignment so as to create a greater region of unused space in
which the avatar can reside.

Making this work required changes to how we set video dimensions.
Previously we set the player's container to 100% width and height
(technically 100svw and 100svh respectively), let video.js fill the
container, and let it draw the actual video in the center of this area
by itself. But this gives us no control over where the video is drawn,
so we couldn't implement snapping.

Any attempt to change this runs into the difficulty that it's really
hard to substantively control video.js player dimensions without
knowing the aspect ratio, which we don't. (Yes, I tried
object-fit: contain; it didn't seem to do anything.) The solution is
to default to 100% width and height on page load, and set them to
better values once we load enough video metadata to know the aspect
ratio. (This is all responsive using CSS media queries.)

2 files changed, 97 insertions, 6 deletions

diff --git a/priv/static/main.css b/priv/static/main.css
index 85906c6..9841b35 100644
--- a/priv/static/main.css
+++ b/priv/static/main.css
@@ -1,3 +1,13 @@
+:root {
+  box-sizing: border-box;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
+
 body {
   background-color: black;
   color: white;
@@ -8,7 +18,35 @@ input {
   font-family: inherit;
 }
 
-div#playerContainer {
-  width: 100svw;
-  height: 100svh;
+@font-face {
+  font-family: "FontAwesomeSolid";
+  src: url("/static/fontawesome-free-6.6.0-web/webfonts/fa-solid-900.woff2") format("woff2");
+}
+
+.icon-home,
+.icon-users,
+.icon-left,
+.icon-right,
+.icon-left-right {
+  font-family: "FontAwesomeSolid";
+}
+
+.icon-home::before {
+  content: "\f015";
+}
+
+.icon-users::before {
+  content: "\f0c0";
+}
+
+.icon-left::before {
+  content: "\f30a";
+}
+
+.icon-right::before {
+  content: "\f30b";
+}
+
+.icon-left-right::before {
+  content: "\f337";
 }
diff --git a/priv/static/room/main.js b/priv/static/room/main.js
index 9a0b2ec..8e46f66 100644
--- a/priv/static/room/main.js
+++ b/priv/static/room/main.js
@@ -26,6 +26,21 @@
     }
   };
 
+  const setPlayerDimensions = (player) => {
+    document.querySelector("style#extra-styles").textContent = `
+      div#playerContainer {
+        height: 100svh;
+        width: calc(100svh * ${player.videoWidth() / player.videoHeight()});
+      }
+      @media (orientation: portrait) {
+        div#playerContainer {
+          width: 100svw;
+          height: calc(100svw * ${player.videoHeight() / player.videoWidth()});
+        }
+      }
+    `;
+  };
+
   const player = videojs("player", {
     controls: true,
     experimentalSvgIcons: true,
@@ -37,6 +52,14 @@
   player.ready(() => {
     setControlsEnabled(player, false);
 
+    if (player.readyState() >= 1) {
+      setPlayerDimensions(player);
+    } else {
+      player.on("loadedmetadata", () => {
+        setPlayerDimensions(player);
+      });
+    }
+
     {
       let customIconPosition = 1;
       const Button = videojs.getComponent("Button");
@@ -52,16 +75,46 @@
       }
 
       const stateButton = new Button(player, {
-        clickHandler: (event) => {
+        clickHandler: (_) => {
           const stateButtonEl = stateButton.el();
-          const id = stateButtonEl.getAttribute("id");
-          stateButtonEl.setAttribute("id", id ? "" : "state-button-active");
+          stateButtonEl.id = stateButtonEl.id ? "" : "state-button-active";
         },
       });
       stateButton.el().setAttribute("data-text", STATE_ELEMENT_INITIAL_TEXT);
       stateButton.addClass("icon-users state-element");
       stateButton.controlText("Viewers");
       player.controlBar.addChild(stateButton, {}, customIconPosition++);
+
+      if (SHOW_SNAP_BUTTON) {
+        const SNAP_NEXT_L = "icon-left";
+        const SNAP_NEXT_R = "icon-right";
+        const SNAP_NEXT_LR = "icon-left-right";
+        const SNAP_TITLE_L = "Snap Video To Left";
+        const SNAP_TITLE_R = "Snap Video To Right";
+        const SNAP_TITLE_LR = "Snap Video To Center";
+        const snapButton = new Button(player, {
+          clickHandler: (_) => {
+            const snapButtonEl = snapButton.el();
+            if (snapButtonEl.classList.contains(SNAP_NEXT_L)) {
+              snapButtonEl.classList.remove(SNAP_NEXT_L);
+              snapButtonEl.classList.add(SNAP_NEXT_R);
+              snapButtonEl.title = SNAP_TITLE_R;
+            } else if (snapButtonEl.classList.contains(SNAP_NEXT_R)) {
+              snapButtonEl.classList.remove(SNAP_NEXT_R);
+              snapButtonEl.classList.add(SNAP_NEXT_LR);
+              snapButtonEl.title = SNAP_TITLE_LR;
+            } else {
+              snapButtonEl.classList.remove(SNAP_NEXT_LR);
+              snapButtonEl.classList.add(SNAP_NEXT_L);
+              snapButtonEl.title = SNAP_TITLE_L;
+            }
+          },
+        });
+        snapButton.el().id = "snap-button";
+        snapButton.addClass(SNAP_NEXT_L);
+        snapButton.controlText(SNAP_TITLE_L);
+        player.controlBar.addChild(snapButton, {}, customIconPosition++);
+      }
     }
 
     const updatePlaybackState = (latestReceivedState, nowMilliseconds) => {