Update video-js skin

Signed-off-by: Julius Härtl <jus@bitgrid.net>

2 files changed, 139 insertions, 15 deletions

diff --git a/css/style.css b/css/style.css
index cec3b3b..1f93b1b 100755
--- a/css/style.css
+++ b/css/style.css
@@ -67,22 +67,140 @@
 }
 
 
-/* sublime skin */
+/* Video.js adjustments */
 
-.vjs-sublime-skin{color:#fff}.vjs-sublime-skin .vjs-poster:focus,.vjs-sublime-skin .vjs-control:focus{outline:none}.vjs-sublime-skin .vjs-big-play-button{line-height:50px;margin:-25px;opacity:1;position:absolute;top:50%;left:50%;height:50px;width:50px;-webkit-transition:opacity 100ms cubic-bezier(.455,.03,.515,.955);-moz-transition:opacity 100ms cubic-bezier(.455,.03,.515,.955);transition:opacity 100ms cubic-bezier(.455,.03,.515,.955);z-index:2}.vjs-sublime-skin .vjs-big-play-button:before{border-color:transparent transparent transparent #fff;border-style:solid;border-width:25px 0 25px 50px;content:"";display:block}.vjs-sublime-skin.vjs-controls-disabled .vjs-big-play-button,.vjs-sublime-skin.vjs-has-started .vjs-big-play-button,.vjs-sublime-skin.vjs-using-native-controls .vjs-big-play-button{opacity:0;pointer-events:none}.vjs-sublime-skin .vjs-control-bar{height:50px;opacity:0;pointer-events:none;position:absolute;right:0;bottom:0;left:0;z-index:2}.vjs-sublime-skin.vjs-has-started .vjs-control-bar{opacity:1;pointer-events:auto;-webkit-transition:opacity 100ms cubic-bezier(.455,.03,.515,.955);-moz-transition:opacity 100ms cubic-bezier(.455,.03,.515,.955);transition:opacity 100ms cubic-bezier(.455,.03,.515,.955)}.vjs-sublime-skin.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar{opacity:0;-webkit-transition:opacity 1s cubic-bezier(.455,.03,.515,.955);-moz-transition:opacity 1s cubic-bezier(.455,.03,.515,.955);transition:opacity 1s cubic-bezier(.455,.03,.515,.955)}.vjs-sublime-skin.vjs-has-started .vjs-poster,.vjs-sublime-skin.vjs-using-native-controls .vjs-control-bar,.vjs-sublime-skin.vjs-controls-disabled .vjs-control-bar{display:none}.vjs-sublime-skin .vjs-progress-control{position:absolute;top:0;right:95px;bottom:0;left:50px}.vjs-sublime-skin .vjs-progress-control .vjs-progress-holder{cursor:pointer;height:20px;margin-top:-10px;position:absolute;top:50%;right:0;left:0}.vjs-sublime-skin .vjs-progress-control .vjs-progress-holder:after{background-color:rgba(255,255,255,.3);border-radius:2px;content:"";display:block;height:4px;margin-top:-2px;position:absolute;top:50%;right:0;left:0}.vjs-sublime-skin .vjs-progress-control .vjs-play-progress{background-color:rgba(255,255,255,.7);border-radius:2px;height:4px;margin-top:-2px;position:absolute;top:50%;right:0;left:0}.vjs-sublime-skin .vjs-play-control{cursor:pointer;margin-top:-8px;position:absolute;top:50%;left:20px;height:16px;width:15px}.vjs-sublime-skin .vjs-play-control:before{border-color:transparent transparent transparent #fff;border-style:solid;border-width:8px 0 8px 15px;content:"";display:block}.vjs-sublime-skin.vjs-playing .vjs-play-control:before,.vjs-sublime-skin.vjs-playing .vjs-play-control:after{background-color:#fff;border:none;content:"";display:block;height:100%;position:absolute;top:0;bottom:0;left:0;width:6px}.vjs-sublime-skin.vjs-playing .vjs-play-control:after{left:auto;right:0}.vjs-sublime-skin .vjs-fullscreen-control{border:3px solid #fff;box-sizing:border-box;cursor:pointer;margin-top:-7px;position:absolute;top:50%;right:20px;height:14px;width:22px}.vjs-sublime-skin.vjs-fullscreen .vjs-fullscreen-control{background:#fff}.vjs-sublime-skin.vjs-fullscreen .vjs-fullscreen-control:after{background:#000;content:"";display:block;position:absolute;bottom:0;left:0;height:5px;width:5px}.vjs-sublime-skin .vjs-volume-control{cursor:pointer;margin-top:-7px;position:absolute;top:50%;right:55px;height:14px;width:22px}.vjs-sublime-skin .vjs-volume-bar{background:url("../img/vjs-volume-bar.png");background-size:22px 14px;height:100%;width:100%}.vjs-sublime-skin .vjs-volume-level{background:url("../img/vjs-volume-level.png");background-size:22px 14px;height:100%}.vjs-sublime-skin .vjs-current-time,.vjs-sublime-skin .vjs-time-divider,.vjs-sublime-skin .vjs-duration,.vjs-sublime-skin .vjs-remaining-time,.vjs-sublime-skin .vjs-load-progress,.vjs-sublime-skin .vjs-play-progress .vjs-control-text,.vjs-sublime-skin .vjs-play-control .vjs-control-content,.vjs-sublime-skin .vjs-fullscreen-control .vjs-control-text,.vjs-sublime-skin .vjs-slider-handle,.vjs-sublime-skin .vjs-volume-handle,.vjs-sublime-skin .vjs-live-controls,.vjs-sublime-skin .vjs-playback-rate,.vjs-sublime-skin .vjs-subtitles-button,.vjs-sublime-skin .vjs-captions-button,.vjs-sublime-skin .vjs-mute-control,.vjs-sublime-skin .vjs-hidden{display:none}.video-js{background-color:#000;padding:0;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle}.video-js .vjs-tech{position:absolute;top:0;left:0;height:100%;width:100%}.video-js:-moz-full-screen{position:absolute}.video-js.vjs-fullscreen{position:fixed;overflow:hidden;z-index:1000;left:0;top:0;bottom:0;right:0;width:100%!important;height:100%!important}.video-js:-webkit-full-screen{width:100%!important;height:100%!important}.video-js.vjs-fullscreen.vjs-user-inactive{cursor:none}body.vjs-full-window{height:100%;margin:0;overflow-y:auto;padding:0}.vjs-poster{background-repeat:no-repeat;background-position:50% 50%;background-size:contain;cursor:pointer;height:100%;margin:0;padding:0;position:relative;width:100%}.vjs-poster img{display:block;margin:0 auto;max-height:100%;padding:0;width:100%}.video-js.vjs-using-native-controls .vjs-poster{display:none}
+.video-js .vjs-menu-button-inline.vjs-slider-active,.video-js .vjs-menu-button-inline:focus,.video-js .vjs-menu-button-inline:hover,.video-js.vjs-no-flex .vjs-menu-button-inline {
+	width: 10em
+}
 
+.video-js .vjs-controls-disabled .vjs-big-play-button {
+	display: none!important
+}
 
-/* Video.js adjustments */
+.video-js .vjs-control {
+	width: 3em
+}
 
-/* add a gradient to the video controls */
-.vjs-control-bar:before {
-	content: "";
-	position: absolute;
-	left: 0;
-	right: 0;
-	top: 0;
-	bottom: 0;
-	background: linear-gradient(to bottom, rgba(76,76,76,0) 0%,rgba(19,19,19,0.5) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+.video-js .vjs-menu-button-inline:before {
+	width: 1.5em
+}
+
+.vjs-menu-button-inline .vjs-menu {
+	left: 3em
+}
+
+.vjs-paused.vjs-has-started.video-js .vjs-big-play-button,.video-js.vjs-ended .vjs-big-play-button,.video-js.vjs-paused .vjs-big-play-button {
+	display: block
+}
+
+.video-js .vjs-load-progress div,.vjs-seeking .vjs-big-play-button,.vjs-waiting .vjs-big-play-button {
+	display: none!important
+}
+
+.video-js .vjs-mouse-display:after,.video-js .vjs-play-progress:after {
+	padding: 0 .4em .3em
+}
+
+.video-js.vjs-ended .vjs-loading-spinner {
+	display: none;
+}
+
+.video-js.vjs-ended .vjs-big-play-button {
+	display: block !important;
+}
+
+video-js.vjs-ended .vjs-big-play-button,.video-js.vjs-paused .vjs-big-play-button,.vjs-paused.vjs-has-started.video-js .vjs-big-play-button {
+	display: block
+}
+
+.video-js .vjs-big-play-button {
+	top: 50%;
+	left: 50%;
+}
+
+.video-js.vjs-big-play-centered .vjs-big-play-button {
+	background-color: rgba(0,0,0,0.35);
+	font-size: 3em;
+	border-radius: 50%;
+	height: 2em !important;
+	line-height: 2em !important;
+	margin-top: -1em !important;
+	margin-left: -1em !important;
+}
+
+.video-js:hover .vjs-big-play-button,.video-js .vjs-big-play-button:focus,.video-js .vjs-big-play-button:active {
+	background-color: rgba(0,0,0,0.35)
+}
+
+.video-js .vjs-loading-spinner {
+	border-color: rgba(255,255,255,0.7)
+}
+
+.video-js .vjs-control-bar2 {
+	background-color: transparent
+}
+
+.video-js .vjs-control-bar {
+	background-color: rgba(0,0,0,0) !important;
+	color: #ffffff;
+	font-size: 18px
+}
+
+.video-js .vjs-play-progress,.video-js  .vjs-volume-level {
+	background-color: #2483d5
+}
+
+.video-js .vjs-big-play-button {
+	height: 2em !important;
+	width: 2em !important;
+	line-height: 1.9em !important;
+	margin-top: -1em !important;
+	margin-left: -1em;
+	border-width: 3px
+}
+
+.video-js .vjs-icon-play:before, .video-js .vjs-big-play-button:before {
+	font-size: 50px;
+}
+
+.video-js  .vjs-progress-holder {
+	font-size: 1.7em;
+	border-radius: 10px;
+}
+
+.video-js .vjs-progress-holder .vjs-play-progress, .video-js .vjs-progress-holder .vjs-load-progress, .video-js .vjs-progress-holder .vjs-load-progress div, .video-js .vjs-slider,.vjs-volume-level {
+	border-radius: 10px;
+}
+
+.video-js .vjs-load-progress {
+	background: rgba(255,255,255,0.5);
+}
+
+.video-js .vjs-big-play-button {
+	height: 2em !important;
+	width: 2em !important;
+	line-height: 1.9em !important;
+	margin-top: -1em !important;
+	margin-left: -1em;
+	border-width:3px
+}
+.video-js .vjs-icon-play:before, .video-js .vjs-big-play-button:before {
+	font-size: 50px;
+}
+.video-js  .vjs-progress-holder {
+	font-size: 1.7em;
+	border-radius: 10px;
+}
+.video-js .vjs-progress-holder .vjs-play-progress, .video-js .vjs-progress-holder .vjs-load-progress, .video-js .vjs-progress-holder .vjs-load-progress div, .video-js .vjs-slider,.vjs-volume-level {
+	border-radius: 10px;
+}
+.video-js .vjs-load-progress {
+	background: rgba(255,255,255,0.5);
+}
+
+.video-js button:active {
+	background: transparent !important;
+	color: #fff !important;
 }
 
 /* hide error icon */
diff --git a/src/viewer.js b/src/viewer.js
index 0a8715e..a639c4d 100755
--- a/src/viewer.js
+++ b/src/viewer.js
@@ -26,12 +26,15 @@ __webpack_nonce__ = btoa(OC.requestToken)
 __webpack_public_path__ = OC.filePath('files_videoplayer', '', 'js/')
 
 const loadVideoJSOnce = _.once(() => {
+	import('!style-loader!css-loader!video.js/dist/video-js.css')
 	return import(/* webpackChunkName: "videojs" */ 'video.js');
 });
 
+var videojs = null;
+
 var videoViewer = {
 	UI: {
-		playerTemplate: '<video id="my_video_1" class="video-js vjs-sublime-skin" controls preload="auto" width="100%" height="100%" poster="' + OC.filePath('files_videoplayer', '', 'img') + '/poster.png" data-setup=\'{"techOrder": ["html5"]}\'>' +
+		playerTemplate: '<video id="my_video_1" class="video-js vjs-fill vjs-big-play-centered" controls preload="auto" width="100%" height="100%" poster="' + OC.filePath('files_videoplayer', '', 'img') + '/poster.png" data-setup=\'{"techOrder": ["html5"]}\'>' +
 			'<source type="%type%" src="%src%" />' +
 			'</video>',
 		show: function () {
@@ -61,7 +64,9 @@ var videoViewer = {
 				$(videoViewer.inline).html(wrapper);
 			}
 			// initialize player
-			videojs("my_video_1").ready(function () {
+			videojs("my_video_1", {
+				fill: true,
+			}).ready(function () {
 				videoViewer.player = this;
 				if (videoViewer.inline === null) {
 					// append close button to video element
@@ -116,7 +121,8 @@ var videoViewer = {
 		videoViewer.showPlayer();
 	},
 	showPlayer: function () {
-		loadVideoJSOnce().then(() => {
+		loadVideoJSOnce().then((_videojs) => {
+			videojs = _videojs.default;
 			videoViewer.UI.show();
 		});
 	},