Merge pull request #2008 from syeopite/mobile-ui
Improve player controls for mobile devicespull/2101/head
TheFrenchGhosty
4 years ago
committed by
GitHub
commit
75e5b49c3a
@ -0,0 +1,250 @@
|
|||||||
|
/* Youtube player style */
|
||||||
|
.video-js.player-style-youtube .vjs-progress-control {
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-js.player-style-youtube .vjs-progress-control .vjs-progress-holder, .video-js.player-style-youtube .vjs-progress-control {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-js.player-style-youtube .vjs-control-bar {
|
||||||
|
background: linear-gradient(rgba(0,0,0,0.1), rgba(0, 0, 0,0.5));
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-js.player-style-youtube .vjs-slider {
|
||||||
|
background-color: rgba(255,255,255,0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-js.player-style-youtube .vjs-load-progress > div {
|
||||||
|
background-color: rgba(255,255,255,0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-js.player-style-youtube .vjs-play-progress {
|
||||||
|
background-color: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-js.player-style-youtube .vjs-progress-control:hover .vjs-progress-holder {
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-js.player-style-youtube .vjs-control-bar > .vjs-spacer {
|
||||||
|
flex: 1;
|
||||||
|
order: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-js.player-style-youtube .vjs-play-progress .vjs-time-tooltip {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-js.player-style-youtube .vjs-play-progress::before {
|
||||||
|
color: red;
|
||||||
|
font-size: 0.85em;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-js.player-style-youtube .vjs-progress-holder:hover .vjs-play-progress::before {
|
||||||
|
display: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-js.player-style-youtube .vjs-control-bar {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-js.player-style-youtube .vjs-big-play-button {
|
||||||
|
/*
|
||||||
|
Styles copied from video-js.min.css, definition of
|
||||||
|
.vjs-big-play-centered .vjs-big-play-button
|
||||||
|
*/
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
margin-top: -0.81666em;
|
||||||
|
margin-left: -1.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-js.player-style-youtube .vjs-menu-button-popup .vjs-menu {
|
||||||
|
margin-bottom: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.vjs-menu-content::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vjs-user-inactive {
|
||||||
|
cursor: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-js .vjs-text-track-display > div > div > div {
|
||||||
|
background-color: rgba(0, 0, 0, 0.75) !important;
|
||||||
|
border-radius: 9px !important;
|
||||||
|
padding: 5px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vjs-play-control,
|
||||||
|
.vjs-volume-panel,
|
||||||
|
.vjs-current-time,
|
||||||
|
.vjs-time-control,
|
||||||
|
.vjs-duration,
|
||||||
|
.vjs-progress-control,
|
||||||
|
.vjs-remaining-time {
|
||||||
|
order: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vjs-captions-button {
|
||||||
|
order: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vjs-quality-selector,
|
||||||
|
.video-js .vjs-http-source-selector {
|
||||||
|
order: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vjs-playback-rate {
|
||||||
|
order: 4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vjs-share-control {
|
||||||
|
order: 5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vjs-fullscreen-control {
|
||||||
|
order: 6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vjs-playback-rate > .vjs-menu {
|
||||||
|
width: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vjs-control-bar {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
scrollbar-width: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vjs-control-bar::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-js .vjs-icon-cog {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-js .vjs-control-bar,
|
||||||
|
.vjs-menu-button-popup .vjs-menu .vjs-menu-content {
|
||||||
|
background-color: rgba(35, 35, 35, 0.75);
|
||||||
|
}
|
||||||
|
|
||||||
|
.vjs-menu li.vjs-menu-item:focus,
|
||||||
|
.vjs-menu li.vjs-menu-item:hover {
|
||||||
|
background-color: rgba(255, 255, 255, 0.75);
|
||||||
|
color: rgba(49, 49, 51, 0.75);
|
||||||
|
}
|
||||||
|
|
||||||
|
.vjs-menu li.vjs-selected,
|
||||||
|
.vjs-menu li.vjs-selected:focus,
|
||||||
|
.vjs-menu li.vjs-selected:hover {
|
||||||
|
background-color: rgba(0, 182, 240, 0.75);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Progress Bar */
|
||||||
|
.video-js .vjs-slider {
|
||||||
|
background-color: rgba(15, 15, 15, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-js .vjs-load-progress,
|
||||||
|
.video-js .vjs-load-progress div {
|
||||||
|
background: rgba(87, 87, 88, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-js .vjs-slider:hover,
|
||||||
|
.video-js button:hover {
|
||||||
|
color: rgba(0, 182, 240, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-js.player-style-invidious .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);
|
||||||
|
color: rgba(255, 255, 255, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ProgressBar marker */
|
||||||
|
.vjs-marker {
|
||||||
|
background-color: rgba(255, 255, 255, 1);
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Big "Play" Button */
|
||||||
|
.video-js .vjs-big-play-button {
|
||||||
|
background-color: rgba(35, 35, 35, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-js:hover .vjs-big-play-button {
|
||||||
|
background-color: rgba(35, 35, 35, 0.75);
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-js .vjs-current-time,
|
||||||
|
.video-js .vjs-time-divider,
|
||||||
|
.video-js .vjs-duration {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-js .vjs-time-divider {
|
||||||
|
min-width: 0px;
|
||||||
|
padding-left: 0px;
|
||||||
|
padding-right: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-js .vjs-poster {
|
||||||
|
background-size: cover;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.player-dimensions.vjs-fluid {
|
||||||
|
padding-top: 82vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
video.video-js {
|
||||||
|
position: absolute;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#player-container {
|
||||||
|
position: relative;
|
||||||
|
padding-bottom: 82vh;
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
/**
|
||||||
|
* videojs-mobile-ui
|
||||||
|
* @version 0.5.2
|
||||||
|
* @copyright 2021 mister-ben <git@misterben.me>
|
||||||
|
* @license MIT
|
||||||
|
*/
|
||||||
|
@keyframes fadeAndScale{0%{opacity:0}25%{opacity:1}100%{opacity:0}}.video-js.vjs-has-started .vjs-touch-overlay{position:absolute;pointer-events:auto;top:0}.video-js .vjs-touch-overlay{display:block;width:100%;height:100%;pointer-events:none}.video-js .vjs-touch-overlay.skip{opacity:0;animation:fadeAndScale 0.6s linear;background-repeat:no-repeat;background-position:80% center;background-size:10%;background-image:url('data:image/svg+xml;utf8,<svg fill="%23FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M4 18l8.5-6L4 6v12zm9-12v12l8.5-6L13 6z"/><path d="M0 0h24v24H0z" fill="none"/></svg>')}.video-js .vjs-touch-overlay.skip.reverse{background-position:20% center;background-image:url('data:image/svg+xml;utf8,<svg fill="%23FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M11 18V6l-8.5 6 8.5 6zm.5-6l8.5 6V6l-8.5 6z"/><path d="M0 0h24v24H0z" fill="none"/></svg>')}.video-js .vjs-touch-overlay .vjs-play-control{top:50%;left:50%;transform:translate(-50%, -50%);position:absolute;width:30%;height:80%;pointer-events:none;opacity:0;transition:opacity 0.3s ease}.video-js .vjs-touch-overlay .vjs-play-control .vjs-icon-placeholder::before{content:'';background-size:60%;background-position:center center;background-repeat:no-repeat;background-image:url('data:image/svg+xml;utf8,<svg fill="%23FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/><path d="M0 0h24v24H0z" fill="none"/></svg>')}.video-js .vjs-touch-overlay .vjs-play-control.vjs-paused .vjs-icon-placeholder::before{content:'';background-image:url('data:image/svg+xml;utf8,<svg fill="%23FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M8 5v14l11-7z"/><path d="M0 0h24v24H0z" fill="none"/></svg>')}.video-js .vjs-touch-overlay .vjs-play-control.vjs-ended .vjs-icon-placeholder::before{content:'';background-image:url('data:image/svg+xml;utf8,<svg fill="%23FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z"/></svg>')}.video-js .vjs-touch-overlay.show-play-toggle .vjs-play-control{opacity:1;pointer-events:auto}.video-js.vjs-mobile-ui-disable-end.vjs-ended .vjs-touch-overlay{display:none}
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
/**
|
||||||
|
* videojs-mobile-ui
|
||||||
|
* @version 0.5.2
|
||||||
|
* @copyright 2021 mister-ben <git@misterben.me>
|
||||||
|
* @license MIT
|
||||||
|
*/
|
||||||
|
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("video.js"),require("global/window")):"function"==typeof define&&define.amd?define(["video.js","global/window"],t):e.videojsMobileUi=t(e.videojs,e.window)}(this,function(e,t){"use strict";e=e&&e.hasOwnProperty("default")?e.default:e,t=t&&t.hasOwnProperty("default")?t.default:t;var n=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},o=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t},i=e.getComponent("Component"),r=e.dom||e,a=function(e){function i(t,r){n(this,i);var a=o(this,e.call(this,t,r));return a.seekSeconds=r.seekSeconds,a.tapTimeout=r.tapTimeout,a.addChild("playToggle",{}),t.on(["playing","userinactive"],function(e){a.removeClass("show-play-toggle")}),0===a.player_.options_.inactivityTimeout&&(a.player_.options_.inactivityTimeout=5e3),a.enable(),a}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(i,e),i.prototype.createEl=function(){return r.createEl("div",{className:"vjs-touch-overlay",tabIndex:-1})},i.prototype.handleTap=function(e){var n=this;e.target===this.el_&&(e.preventDefault(),this.firstTapCaptured?(this.firstTapCaptured=!1,this.timeout&&t.clearTimeout(this.timeout),this.handleDoubleTap(e)):(this.firstTapCaptured=!0,this.timeout=t.setTimeout(function(){n.firstTapCaptured=!1,n.handleSingleTap(e)},this.tapTimeout)))},i.prototype.handleSingleTap=function(e){this.removeClass("skip"),this.toggleClass("show-play-toggle")},i.prototype.handleDoubleTap=function(e){var n=this,o=this.el_.getBoundingClientRect(),i=e.changedTouches[0].clientX-o.left;if(i<.4*o.width)this.player_.currentTime(Math.max(0,this.player_.currentTime()-this.seekSeconds)),this.addClass("reverse");else{if(!(i>o.width-.4*o.width))return;this.player_.currentTime(Math.min(this.player_.duration(),this.player_.currentTime()+this.seekSeconds)),this.removeClass("reverse")}this.removeClass("show-play-toggle"),this.removeClass("skip"),t.requestAnimationFrame(function(){n.addClass("skip")})},i.prototype.enable=function(){this.firstTapCaptured=!1,this.on("touchend",this.handleTap)},i.prototype.disable=function(){this.off("touchend",this.handleTap)},i}(i);i.registerComponent("TouchOverlay",a);var s={fullscreen:{enterOnRotate:!0,exitOnRotate:!0,lockOnRotate:!0,iOS:!1},touchControls:{seekSeconds:10,tapTimeout:300,disableOnEnd:!1}},l=t.screen,u=function(n,o){n.addClass("vjs-mobile-ui"),(o.touchControls.disableOnEnd||"function"==typeof n.endscreen)&&n.addClass("vjs-mobile-ui-disable-end"),o.fullscreen.iOS&&e.browser.IS_IOS&&e.browser.IOS_VERSION>9&&!n.el_.ownerDocument.querySelector(".bc-iframe")&&(n.tech_.el_.setAttribute("playsinline","playsinline"),n.tech_.supportsFullScreen=function(){return!1});var i=void 0,r=e.VERSION.split("."),a=parseInt(r[0],10),s=parseInt(r[1],10);i=a<7||7===a&&s<7?Array.prototype.indexOf.call(n.el_.children,n.getChild("ControlBar").el_):n.children_.indexOf(n.getChild("ControlBar")),n.addChild("TouchOverlay",o.touchControls,i);var u=!1,c=function(){var i="number"==typeof t.orientation?t.orientation:l&&l.orientation&&l.orientation.angle?t.orientation:(e.log("angle unknown"),0);90!==i&&270!==i&&-90!==i||!o.enterOnRotate||!1===n.paused()&&(n.requestFullscreen(),o.fullscreen.lockOnRotate&&l.orientation&&l.orientation.lock&&l.orientation.lock("landscape").then(function(){u=!0}).catch(function(){e.log("orientation lock not allowed")})),0!==i&&180!==i||!o.exitOnRotate||n.isFullscreen()&&n.exitFullscreen()};e.browser.IS_IOS?t.addEventListener("orientationchange",c):l.orientation&&(l.orientation.onchange=c),n.on("ended",function(e){!0===u&&(l.orientation.unlock(),u=!1)})},c=function(){var t=this,n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};(n.forceForTesting||e.browser.IS_ANDROID||e.browser.IS_IOS)&&this.ready(function(){u(t,e.mergeOptions(s,n))})};return(e.registerPlugin||e.plugin)("mobileUi",c),c.VERSION="0.5.2",c});
|
||||||
Loading…
Reference in New Issue