- - - +

+ + + +

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