From 37db2ef91cb806a6ddd123bf7c1974d00699b86a Mon Sep 17 00:00:00 2001 From: Arjun Satarkar Date: Mon, 29 Jul 2024 20:07:17 +0530 Subject: 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.) --- priv/room.html.eex | 62 ++++++++++++++++++++++++++---------------------- priv/static/main.css | 44 +++++++++++++++++++++++++++++++--- priv/static/room/main.js | 59 ++++++++++++++++++++++++++++++++++++++++++--- 3 files changed, 130 insertions(+), 35 deletions(-) diff --git a/priv/room.html.eex b/priv/room.html.eex index 012ec0d..c3ae92e 100644 --- a/priv/room.html.eex +++ b/priv/room.html.eex @@ -2,15 +2,16 @@ <% import Mediasync.Constants -{video_info, websocket_path, state_url, home_button_url} = if in_discord_activity? do +{video_info, websocket_path, state_url, home_button_url, show_snap_button?} = if in_discord_activity? do { %{video_info | url: "/.proxy/room/#{room_id}/video?#{query_param_discord_activity_inner()}"}, "/.proxy/room/#{room_id}/websocket?#{query_param_discord_activity_inner()}", "/.proxy/room/#{room_id}/state.json?#{query_param_discord_activity_inner()}", - "/.proxy/?#{query_param_discord_activity_inner()}" + "/.proxy/?#{query_param_discord_activity_inner()}", + true } else - {video_info, "/room/#{room_id}/websocket", "/room/#{room_id}/state.json", nil} + {video_info, "/room/#{room_id}/websocket", "/room/#{room_id}/state.json", nil, false} end %> @@ -27,33 +28,31 @@ end margin: 0; } - @font-face { - font-family: "FontAwesomeSolid"; - src: url("/static/fontawesome-free-6.6.0-web/webfonts/fa-solid-900.woff2") format("woff2"); + div#outerContainer { + display: flex; + flex-direction: row; + align-items: center; + height: 100svh; + width: 100svw; } - .icon-home, .icon-users, .icon-left, .icon-right, .icon-left-right { - font-family: "FontAwesomeSolid"; + div#playerContainer { + /* Default values; JS will adjust depending on actual aspect ratio */ + height: 100svh; + width: 100svw; + /* We should be in the (horizontal) center by default */ + margin: 0 auto; } - .icon-home::before { - content: "\f015"; + div#playerContainer:has(#snap-button.icon-right) { + /* We should be on the left */ + margin-left: 0; } - .icon-users::before { - content: "\f0c0"; - } - - .icon-left::before { - content: "\f30a"; - } - - .icon-right::before { - content: "\f30b"; - } - - .icon-left-right::before { - content: "\f337"; + div#playerContainer:has(#snap-button.icon-left-right) { + /* We should be on the right */ + margin-left: auto; + margin-right: 0; } #state-button-active::after { @@ -67,14 +66,18 @@ end top: 0; } + + -
- - - +
+
+ + + +
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) => { -- cgit v1.2.3-57-g22cb