From 1924d75c2b13a8962d612250eb9cbde0aa8542ab Mon Sep 17 00:00:00 2001 From: syeopite Date: Sat, 10 Apr 2021 23:12:35 -0700 Subject: [PATCH] Improve mobile user interface for video player --- assets/css/player.css | 37 +++++++++++++++++++++++++--------- assets/js/player.js | 47 +++++++++++++++++++++++++++++++++++++++++-- 2 files changed, 73 insertions(+), 11 deletions(-) diff --git a/assets/css/player.css b/assets/css/player.css index 9721c047..0583e327 100644 --- a/assets/css/player.css +++ b/assets/css/player.css @@ -1,11 +1,3 @@ -/* Control Bar */ -@media screen and (max-width: 640px) { - .video-js .vjs-control-bar, - .vjs-menu-button-popup .vjs-menu .vjs-menu-content { - overflow-x: scroll; - } -} - ul.vjs-menu-content::-webkit-scrollbar { display: none; } @@ -104,7 +96,7 @@ ul.vjs-menu-content::-webkit-scrollbar { .video-js .vjs-play-progress { background-color: rgba(0, 182, 240, 1); } - +vjs-menu-content /* Overlay */ .video-js .vjs-overlay { background-color: rgba(35, 35, 35, 0.75); @@ -176,3 +168,30 @@ video.video-js { margin-top: -0.81666em; margin-left: -1.5em; } + +.mobile-operations-bar { + display: flex; + position: absolute; + top: 0; + right: 1px !important; + left: initial !important; + width: initial !important; +} + +.mobile-operations-bar ul { + position: absolute !important; + bottom: unset !important; + top: 1.5em; +} + +@media screen and (max-width: 700px) { + .video-js .vjs-share { + justify-content: unset; + } +} + +@media screen and (max-width: 650px) { + .vjs-modal-dialog-content { + overflow-x: hidden; + } +} diff --git a/assets/js/player.js b/assets/js/player.js index 16fd767b..e6a6dbac 100644 --- a/assets/js/player.js +++ b/assets/js/player.js @@ -74,9 +74,52 @@ if (location.pathname.startsWith('/embed/')) { } // Detect mobile users and initalize mobileUi for better UX -// Detection code taken from https://stackoverflow.com/a/24600597 -if (/Mobi|Android/i.test(navigator.userAgent)) { +// Detection code taken from https://stackoverflow.com/a/20293441 + +function isMobile() { + try{ document.createEvent("TouchEvent"); return true; } + catch(e){ return false; } +} + +if (isMobile()) { player.mobileUi(); + + buttons = ["playToggle", "volumePanel", "captionsButton"]; + + if (video_data.params.quality !== 'dash') { + buttons.push("qualitySelector") + } + + // Create new control bar object for operation buttons + const ControlBar = videojs.getComponent("controlBar"); + let operations_bar = new ControlBar(player, { + children: [], + playbackRates: [0.25, 0.5, 0.75, 1.0, 1.25, 1.5, 1.75, 2.0] + }); + buttons.slice(1).forEach(child => operations_bar.addChild(child)) + + // Remove operation buttons from primary control bar + primary_control_bar = player.getChild("controlBar"); + buttons.forEach(child => primary_control_bar.removeChild(child)); + + operations_bar_element = operations_bar.el(); + operations_bar_element.className += " mobile-operations-bar" + player.addChild(operations_bar) + + // Playback menu doesn't work when its initalized outside of the primary control bar + playback_element = document.getElementsByClassName("vjs-playback-rate")[0] + operations_bar_element.append(playback_element) + + // The share and http source selector element can't be fetched till the players ready. + player.one("playing", () => { + share_element = document.getElementsByClassName("vjs-share-control")[0] + operations_bar_element.append(share_element) + + if (video_data.params.quality === 'dash') { + http_source_selector = document.getElementsByClassName("vjs-http-source-selector vjs-menu-button")[0] + operations_bar_element.append(http_source_selector) + } + }) } player.on('error', function (event) {