Updated track styles and make subtitles button work.

design/video-js.css

@@ -52,11 +52,12 @@ body.vjs-full-window {
 }
 
 /* Text Track Styles */
-.video-js .vjs-text-track-display {
+/* Overall track holder for both captions and subtitles */
-  text-align: center; position: absolute; bottom: 4em; left: 1em; right: 1em;
+.video-js .vjs-text-track-display { text-align: center; position: absolute; bottom: 4em; left: 1em; right: 1em; }
-}
+/* Individual tracks */
 .video-js .vjs-text-track {
   display: none; color: #fff; font-size: 1.4em; text-align: center; margin-bottom: 0.1em;
+  /* Transparent black background, or fallback to all black (IE6) */
   background: rgb(0, 0, 0); background: rgba(0, 0, 0, 0.50);
 }
 .video-js .vjs-subtitles { color: #fff; }
@@ -165,6 +166,8 @@ so you can upgrade to newer versions easier. You can remove all these styles by
   background: -o-linear-gradient(top, #333, #666);
   background: -ms-linear-gradient(top, #333, #666);
   background: linear-gradient(top, #333, #666);
+
+  border: 1px solid #000;
 }
 .vjs-default-skin .vjs-volume-level {
   position: absolute; top: 0; left: 0; height: 0.6em;
@@ -434,11 +437,13 @@ div.vjs-loading-spinner .ball7 { opacity: 0.87; position:absolute; left: 0px; to
 div.vjs-loading-spinner .ball8 { opacity: 1.00; position:absolute; left: 6px; top: 6px; width: 13px; height: 13px; background: #fff;
   border-radius: 13px; -webkit-border-radius: 13px; -moz-border-radius: 13px; border: 1px solid #ccc; }
 
-/* Captions Button
+/* Feature Buttons (Captions/Subtitles/etc.)
 -------------------------------------------------------------------------------- */
-.vjs-default-skin .vjs-captions-control { 
+.vjs-default-skin .vjs-feature-button { 
-  float: right; margin: 0.2em 1em 0 0; padding: 0; width: 3em; height: 2em; cursor: pointer !important;
+  float: right; margin: 0.2em 0.5em 0 0; padding: 0; width: 3em; height: 2em; cursor: pointer !important;
+
   border: 1px solid #111; -moz-border-radius: 0.3em; -webkit-border-radius: 0.3em; border-radius: 0.3em; 
+
   background: #4d4d4d;
   background: -moz-linear-gradient(top,  #4d4d4d 0%, #3f3f3f 50%, #333333 50%, #252525 100%);
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d4d4d), color-stop(50%,#3f3f3f), color-stop(50%,#333333), color-stop(100%,#252525));
@@ -447,17 +452,16 @@ div.vjs-loading-spinner .ball8 { opacity: 1.00; position:absolute; left: 6px; to
   background: -ms-linear-gradient(top,  #4d4d4d 0%,#3f3f3f 50%,#333333 50%,#252525 100%);
   background: linear-gradient(top,  #4d4d4d 0%,#3f3f3f 50%,#333333 50%,#252525 100%);
 }
-/* Play Icon */
+/* Button Icon */
-.vjs-default-skin .vjs-captions-control div { background: url('video-js.png') 0px -75px; width: 16px; height: 16px; margin: 0.2em auto 0; padding: 0; }
+.vjs-default-skin .vjs-feature-button div { background: url('video-js.png') 0px -75px no-repeat; width: 16px; height: 16px; margin: 0.2em auto 0; padding: 0; }
 
-.vjs-default-skin .vjs-captions-control ul { 
+/* Button Pop-up Menu */
-  display: none; /* Start hidden. Hover will show. */
+.vjs-default-skin .vjs-feature-button ul { display: none; /* Start hidden. Hover will show. */ }
-}
+.vjs-default-skin .vjs-feature-button:hover ul {
-.vjs-default-skin .vjs-captions-control:hover ul {
   display: block;
   opacity: 0.8;
   list-style: none; padding: 0; margin: 0;
-  position: absolute; width: 10em; height: 10em; bottom: 2em; 
+  position: absolute; width: 10em; bottom: 2em; 
   left: -3.5em; /* Width of menu - width of button / 2 */
   background-color: #111;
   border: 2px solid #333;
@@ -465,5 +469,8 @@ div.vjs-loading-spinner .ball8 { opacity: 1.00; position:absolute; left: 6px; to
   -webkit-box-shadow: 0 2px 4px 0 #000; -moz-box-shadow: 0 2px 4px 0 #000; box-shadow: 0 2px 4px 0 #000;
   overflow: auto;
 }
-.vjs-default-skin .vjs-captions-control ul li { list-style: none; margin: 0 0 2px 0; padding: 0; line-height: 1.5em; font-size: 1.4em; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; background-color: #333; }
+.vjs-default-skin .vjs-feature-button ul li { list-style: none; margin: 0 0 2px 0; padding: 0; line-height: 1.5em; font-size: 1.4em; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; background-color: #333; }
-.vjs-default-skin .vjs-captions-control ul li:hover { background-color: #ccc; color: #333; }
+.vjs-default-skin .vjs-feature-button ul li:hover { background-color: #ccc; color: #333; }
+
+/* Subtitles Button */
+.vjs-default-skin .vjs-captions-button div { background-position: -25px -75px; }

src/component.js

@@ -157,7 +157,7 @@ _V_.Component = _V_.Class.extend({
   /* Events
   ================================================================================ */
   addEvent: function(type, fn, uid){
-    return _V_.addEvent(this.el, type, _V_.proxy(this, fn, uid));
+    return _V_.addEvent(this.el, type, _V_.proxy(this, fn));
   },
   removeEvent: function(type, fn){
     return _V_.removeEvent(this.el, type, fn);
@@ -211,6 +211,6 @@ _V_.Component = _V_.Class.extend({
   extend: function(obj){ _V_.merge(this, obj) },
 
   // More easily attach 'this' to functions
-  proxy: function(fn){  return _V_.proxy(this, fn); }
+  proxy: function(fn, uid){  return _V_.proxy(this, fn, uid); }
 
 });

src/controls.js

@@ -234,8 +234,7 @@ _V_.ControlBar = _V_.Component.extend({
       "remainingTimeDisplay": {},
       "progressControl": {},
       "volumeControl": {},
-      "muteToggle": {},
+      "muteToggle": {}
-      "captionsButton": {}
     }
   },
 

src/lib.js

@@ -200,24 +200,20 @@ _V_.extend({
      It also stores a unique id on the function so it can be easily removed from events
   ================================================================================ */
   proxy: function(context, fn, uid) {
+    // Make sure the function has a unique ID
+    if (!fn.guid) { fn.guid = _V_.guid++; }
+
     // Create the new function that changes the context
     var ret = function() {
       return fn.apply(context, arguments);
-    },
+    }
-
-    // Make sure the function has a unique ID
-    guid = fn.guid || _V_.guid++;
 
     // Allow for the ability to individualize this function
-    // Needed in the case where multiple items might share the same prototype function
+    // Needed in the case where multiple objects might share the same prototype
     // IF both items add an event listener with the same function, then you try to remove just one
     // it will remove both because they both have the same guid.
-    // when using this, you need to use the proxy method both times.
+    // when using this, you need to use the proxy method when you remove the listener as well.
-    if (uid) { guid = uid + "_" + guid }
+    ret.guid = (uid) ? uid + "_" + fn.guid : fn.guid;
-
-    // Give the new function the same ID
-    // (so that they are equivalent and can be easily removed)
-    ret.guid = guid;
 
     return ret;
   },

src/tracks.js

@@ -465,8 +465,6 @@ _V_.TextTrackDisplay = _V_.Component.extend({
 ================================================================================ */
 _V_.TextTrackButton = _V_.Button.extend({
 
-  buttonText: "Captions",
-
   init: function(player, options){
     this._super(player, options);
 
@@ -480,7 +478,7 @@ _V_.TextTrackButton = _V_.Button.extend({
     _V_.addEvent(off, "click", this.proxy(this.turnOff));
 
     this.each(this.player.textTracks, function(track){
-      if (track.kind === "captions") {
+      if (track.kind === this.kind) {
         count++;
 
         li = _V_.createElement("li", { innerHTML: track.label });
@@ -517,10 +515,6 @@ _V_.TextTrackButton = _V_.Button.extend({
 
   },
 
-  buildCSSClass: function(){
-    return "vjs-captions-control " + this._super();
-  },
-
   turnOn: function(lang, label){
     var tracks = this.player.textTracks,
         i=0, j=tracks.length,
@@ -528,7 +522,7 @@ _V_.TextTrackButton = _V_.Button.extend({
 
     for (;i<j;i++) {
       track = tracks[i];
-      if (track.kind == "captions") {
+      if (track.kind == this.kind) {
         if (track.language == lang && track.label == label) {
           track.show();
         } else if (track.mode > 0) {
@@ -545,17 +539,34 @@ _V_.TextTrackButton = _V_.Button.extend({
 
     for (;i<j;i++) {
       track = tracks[i];
-      if (track.kind == "captions" && track.mode > 0) {
+      if (track.kind == this.kind && track.mode > 0) {
         track.disable();
       }
     }
+  },
+
+  buildCSSClass: function(){
+    return this.className + " vjs-feature-button " + this._super();
   }
 
 });
 
-_V_.CaptionsButton = _V_.Button.extend({
+_V_.CaptionsButton = _V_.TextTrackButton.extend({
   kind: "captions",
-  buttonText: "Captions"
+  buttonText: "Captions",
+  className: "vjs-captions-button"
+});
+
+_V_.SubtitlesButton = _V_.TextTrackButton.extend({
+  kind: "subtitles",
+  buttonText: "Subtitles",
+  className: "vjs-subtitles-button"
+});
+
+// Add Buttons to controlBar
+_V_.merge(_V_.ControlBar.prototype.options.components, {
+  "subtitlesButton": {},
+  "captionsButton": {}
 });
 
 // _V_.Cue = _V_.Component.extend({