dynamic label

README.md

@@ -12,7 +12,13 @@ Setup sources dynamically:
 <script src="videojs-resolution-switcher.js"></script>
 <script>
   videojs('video', {
-    controls: true
+    controls: true,
+    plugins: {
+        videoJsResolutionSwitcher: {
+          default: 'high',
+          dynamicLabel: true
+        }
+      }
   }, function(){
   
     // Add dynamically sources via updateSrc method
@@ -33,7 +39,7 @@ Setup sources dynamically:
         console.info('Source changed to %s', player.src())
       })
       
-  }).videoJsResolutionSwitcher();
+  })
 </script>
 ```
 
@@ -77,7 +83,8 @@ videojs('video', {
     })
 ```
 ### Avalible options:
-* default - `{Number}|'low'|'high'` - default resolution. If any `Number` is passed plugin will try to choose source based on `res` parameter. If `low` or `high` is passed, plugin will choose respectively worse or best resolution (if `res` parameter is specified). If `res` parameter is not specified plugin assumes that sources array is sorted from best to worse. 
+* default - `{Number}|'low'|'high'` - default resolution. If any `Number` is passed plugin will try to choose source based on `res` parameter. If `low` or `high` is passed, plugin will choose respectively worse or best resolution (if `res` parameter is specified). If `res` parameter is not specified plugin assumes that sources array is sorted from best to worse.
+* dynamicLabel - `{Boolean}` - if `true` current label will be displayed in control bar. By default gear icon is displayed.
 
 ## Example
 

example.html

@@ -38,11 +38,11 @@
     </p>
   </div>
 
-  <video id="video_1" class="video-js vjs-default-skin" width="1000" controls data-setup='{}'>
+  <video id="video_1" class="video-js vjs-default-skin" width="1000" controls data-setup='{}' muted>
-   <source src="http://mirrorblender.top-ix.org/movies/sintel-1024-surround.mp4" type='video/mp4' label='SD' res='480' />
+    <source src="http://mirrorblender.top-ix.org/movies/sintel-1024-surround.mp4?480" type='video/mp4' label='SD' res='480' />
-   <source src="http://media.xiph.org/mango/tears_of_steel_1080p.webm" type='video/webm' label='HD' res='1080'/>
+    <source src="http://media.xiph.org/mango/tears_of_steel_1080p.webm?1080" type='video/webm' label='HD' res='1080'/>
-    <source src="http://media.xiph.org/mango/tears_of_steel_1080p.webm" type='video/webm' label='phone' res='144'/>
+    <source src="http://media.xiph.org/mango/tears_of_steel_1080p.webm?144" type='video/webm' label='phone' res='144'/>
-    <source src="http://media.xiph.org/mango/tears_of_steel_1080p.webm" type='video/webm' label='4k' res='2160'/>
+    <source src="http://media.xiph.org/mango/tears_of_steel_1080p.webm?2160" type='video/webm' label='4k' res='2160'/>
   </video>
 
   <script src="node_modules/video.js/dist/video.js"></script>
@@ -55,7 +55,8 @@
       width: 1000,
       plugins: {
         videoJsResolutionSwitcher: {
-          default: 'high' // Default resolution [{Number}, 'low', 'high']
+          default: 'high', // Default resolution [{Number}, 'low', 'high'],
+          dynamicLabel: true // Display dynamic labels or gear symbol
         }
       }
     }, function(){

lib/videojs-resolution-switcher.css

@@ -1,10 +1,24 @@
 .vjs-resolution-button {
   color: #ccc;
-  font-family: VideoJS
+  font-family: VideoJS;
 }
 
-.vjs-resolution-button:before {
+.vjs-resolution-button .vjs-resolution-button-staticlabel:before {
-  content: '\f110'
+  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 {

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
@@ -31,11 +34,17 @@
         this.on('touchstart', this.onClick)
       },
       onClick: function(){
+        console.log(this.el().parentNode.children)
+        this.el().parentNode.children.forEach(function(el){
+          el.classList.remove('vjs-selected')
+        })
         // Hide bigPlayButton
         player.bigPlayButton.hide()
         // 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 +63,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 +96,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,11 +149,12 @@
       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 <source> tag inside <video>
     if(player.options_.sources.length > 1){
+      console.log(player.options_.sources)
       player.updateSrc(player.options_.sources)
     }