From bb6f406b690751df683479494e3bdf706a751fd6 Mon Sep 17 00:00:00 2001 From: Kasper Moskwiak Date: Thu, 20 Aug 2015 18:05:19 +0200 Subject: [PATCH] lib update --- index.html | 5 ++-- .../lib/videojs-resolution-switcher.css | 20 ++++++++++++--- .../lib/videojs-resolution-switcher.js | 25 +++++++++++++++---- package.json | 5 +++- 4 files changed, 44 insertions(+), 11 deletions(-) diff --git a/index.html b/index.html index 6f620bc..63abdc1 100644 --- a/index.html +++ b/index.html @@ -69,7 +69,8 @@ fluid: true, plugins: { videoJsResolutionSwitcher: { - default: 'low' // Default resolution [{Number}, 'low', 'high'] + default: 'low', // Default resolution [{Number}, 'low', 'high'], + dynamicLabel: true } } }, function(){ @@ -92,7 +93,7 @@ player.on('resolutionchange', function(){ console.info('Source changed to %s', player.src()) }) - }).videoJsResolutionSwitcher(); + }) diff --git a/node_modules/videojs-resolution-switcher/lib/videojs-resolution-switcher.css b/node_modules/videojs-resolution-switcher/lib/videojs-resolution-switcher.css index 57bafa1..d82c8d6 100644 --- a/node_modules/videojs-resolution-switcher/lib/videojs-resolution-switcher.css +++ b/node_modules/videojs-resolution-switcher/lib/videojs-resolution-switcher.css @@ -1,10 +1,24 @@ .vjs-resolution-button { color: #ccc; - font-family: VideoJS + font-family: VideoJS; } -.vjs-resolution-button:before { - content: '\f110' +.vjs-resolution-button .vjs-resolution-button-staticlabel:before { + content: '\f110'; + font-size: 1.8em; + line-height: 1.67; +} + +.vjs-resolution-button .vjs-resolution-button-label { + font-size: 1.2em; + line-height: 2.50em; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + text-align: center; + box-sizing: inherit; } .vjs-resolution-button ul.vjs-menu-content { diff --git a/node_modules/videojs-resolution-switcher/lib/videojs-resolution-switcher.js b/node_modules/videojs-resolution-switcher/lib/videojs-resolution-switcher.js index 9ca2a3c..00d319c 100644 --- a/node_modules/videojs-resolution-switcher/lib/videojs-resolution-switcher.js +++ b/node_modules/videojs-resolution-switcher/lib/videojs-resolution-switcher.js @@ -14,7 +14,10 @@ */ videoJsResolutionSwitcher = function(options) { var settings = videojs.mergeOptions(defaults, options), - player = this; + player = this, + label = document.createElement('span'); + + label.classList.add('vjs-resolution-button-label') /* * Resolution menu item @@ -36,6 +39,8 @@ // Remember player state var currentTime = player.currentTime() var isPaused = player.paused() + // Change menu button label + label.innerHTML = this.options_.label; // Change player source and wait for loadedmetadata event, then play video player.src({src: this.src, type: this.type}).one( 'loadedmetadata', function() { player.currentTime(currentTime) @@ -54,7 +59,15 @@ constructor: function(player, options){ this.sources = options.sources; MenuButton.call(this, player, options); - this.controlText('Quality') + this.controlText('Quality'); + + if(settings.dynamicLabel){ + this.el().appendChild(label) + }else{ + var staticLabel = document.createElement('span') + staticLabel.classList.add('vjs-resolution-button-staticlabel') + this.el().appendChild(staticLabel) + } }, createItems: function(){ var sources = this.sources; @@ -79,13 +92,15 @@ player.controlBar.resolutionSwitcher.dispose() delete player.controlBar.resolutionSwitcher } - //Sort sourcec + //Sort sources src = src.sort(compareResolutions) groupedSrc = bucketSources(src) var menuButton = new ResolutionMenuButton(player, { sources: src }); menuButton.el().classList.add('vjs-resolution-button') player.controlBar.resolutionSwitcher = player.controlBar.addChild(menuButton) - player.src(chooseSrc(src)); + var newSource = chooseSrc(src) + label.innerHTML = newSource.label + player.src(newSource); } /** @@ -130,7 +145,7 @@ if(settings.default === 'low'){ return src[src.length - 1] } if(settings.default === 'high'){ return src[0] } if(groupedSrc.res[settings.default]){ return groupedSrc.res[settings.default][0] } - return src + return src[src.length - 1] } // Create resolution switcher for videos form tag inside