lug/invidious
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improve mobile user interface for video player

Browse Source
This commit is contained in:
syeopite 2021-04-10 23:12:35 -07:00
parent 06b27d932d
commit 1924d75c2b
No known key found for this signature in database
GPG Key ID: 6FA616E5A5294A82
2 changed files with 73 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
assets/css/player.css
View File

@ -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 { ul.vjs-menu-content::-webkit-scrollbar {
display: none; display: none;
} }
@ -104,7 +96,7 @@ ul.vjs-menu-content::-webkit-scrollbar {
.video-js .vjs-play-progress { .video-js .vjs-play-progress {
background-color: rgba(0, 182, 240, 1); background-color: rgba(0, 182, 240, 1);
} }
vjs-menu-content
/* Overlay */ /* Overlay */
.video-js .vjs-overlay { .video-js .vjs-overlay {
background-color: rgba(35, 35, 35, 0.75); background-color: rgba(35, 35, 35, 0.75);
@ -176,3 +168,30 @@ video.video-js {
margin-top: -0.81666em; margin-top: -0.81666em;
margin-left: -1.5em; 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;
}
}

47
assets/js/player.js
View File

@ -74,9 +74,52 @@ if (location.pathname.startsWith('/embed/')) {
} }
// Detect mobile users and initalize mobileUi for better UX // Detect mobile users and initalize mobileUi for better UX
// Detection code taken from https://stackoverflow.com/a/24600597 // Detection code taken from https://stackoverflow.com/a/20293441
if (/Mobi|Android/i.test(navigator.userAgent)) {
function isMobile() {
try{ document.createEvent("TouchEvent"); return true; }
catch(e){ return false; }
}
if (isMobile()) {
player.mobileUi(); 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) { player.on('error', function (event) {