videojs · gkatsev · Mar 2, 2017 · Feb 2, 2017 · Feb 16, 2017 · Feb 16, 2017
diff --git a/docs/examples/shared/example-captions-fr.vtt b/docs/examples/shared/example-captions-fr.vtt
@@ -0,0 +1,41 @@
+WEBVTT
+
+00:00.700 --> 00:04.110
+FR CAP Captions describe all relevant audio for the hearing impaired.
+FR CAP [ Heroic music playing for a seagull ]
+
+00:04.500 --> 00:05.000
+FR CAP [ Splash!!! ]
+
+00:05.100 --> 00:06.000
+FR CAP [ Sploosh!!! ]
+
+00:08.000 --> 00:09.225
+FR CAP [ Splash...splash...splash splash splash ]
+
+00:10.525 --> 00:11.255
+FR CAP [ Splash, Sploosh again ]
+
+00:13.500 --> 00:14.984
+FR CAP Dolphin: eeeEEEEEeeee!
+
+00:14.984 --> 00:16.984
+FR CAP Dolphin: Squawk! eeeEEE?
+
+00:25.000 --> 00:28.284
+FR CAP [ A whole ton of splashes ]
+
+00:29.500 --> 00:31.000
+FR CAP Mine. Mine. Mine.
+
+00:34.300 --> 00:36.000
+FR CAP Shark: Chomp
+
+00:36.800 --> 00:37.900
+FR CAP Shark: CHOMP!!!
+
+00:37.861 --> 00:41.193
+FR CAP EEEEEEOOOOOOOOOOWHALENOISE
+
+00:42.593 --> 00:45.611
+FR CAP [ BIG SPLASH ]
diff --git a/docs/examples/shared/example-subtitles-de.vtt b/docs/examples/shared/example-subtitles-de.vtt
@@ -0,0 +1,41 @@
+WEBVTT
+
+00:00.700 --> 00:04.110
+DE SUB Captions describe all relevant audio for the hearing impaired.
+DE SUB [ Heroic music playing for a seagull ]
+
+00:04.500 --> 00:05.000
+DE SUB [ Splash!!! ]
+
+00:05.100 --> 00:06.000
+DE SUB [ Sploosh!!! ]
+
+00:08.000 --> 00:09.225
+DE SUB [ Splash...splash...splash splash splash ]
+
+00:10.525 --> 00:11.255
+DE SUB [ Splash, Sploosh again ]
+
+00:13.500 --> 00:14.984
+DE SUB Dolphin: eeeEEEEEeeee!
+
+00:14.984 --> 00:16.984
+DE SUB Dolphin: Squawk! eeeEEE?
+
+00:25.000 --> 00:28.284
+DE SUB [ A whole ton of splashes ]
+
+00:29.500 --> 00:31.000
+DE SUB Mine. Mine. Mine.
+
+00:34.300 --> 00:36.000
+DE SUB Shark: Chomp
+
+00:36.800 --> 00:37.900
+DE SUB Shark: CHOMP!!!
+
+00:37.861 --> 00:41.193
+DE SUB EEEEEEOOOOOOOOOOWHALENOISE
+
+00:42.593 --> 00:45.611
+DE SUB [ BIG SPLASH ]
diff --git a/docs/examples/shared/example-subtitles-fr.vtt b/docs/examples/shared/example-subtitles-fr.vtt
@@ -0,0 +1,41 @@
+WEBVTT
+
+00:00.700 --> 00:04.110
+FR SUB Captions describe all relevant audio for the hearing impaired.
+FR SUB [ Heroic music playing for a seagull ]
+
+00:04.500 --> 00:05.000
+FR SUB [ Splash!!! ]
+
+00:05.100 --> 00:06.000
+FR SUB [ Sploosh!!! ]
+
+00:08.000 --> 00:09.225
+FR SUB [ Splash...splash...splash splash splash ]
+
+00:10.525 --> 00:11.255
+FR SUB [ Splash, Sploosh again ]
+
+00:13.500 --> 00:14.984
+FR SUB Dolphin: eeeEEEEEeeee!
+
+00:14.984 --> 00:16.984
+FR SUB Dolphin: Squawk! eeeEEE?
+
+00:25.000 --> 00:28.284
+FR SUB [ A whole ton of splashes ]
+
+00:29.500 --> 00:31.000
+FR SUB Mine. Mine. Mine.
+
+00:34.300 --> 00:36.000
+FR SUB Shark: Chomp
+
+00:36.800 --> 00:37.900
+FR SUB Shark: CHOMP!!!
+
+00:37.861 --> 00:41.193
+FR SUB EEEEEEOOOOOOOOOOWHALENOISE
+
+00:42.593 --> 00:45.611
+FR SUB [ BIG SPLASH ]
diff --git a/sandbox/combined-tracks.html b/sandbox/combined-tracks.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html lang="en-GB">
+<head>
+  <meta charset="utf-8" />
+  <title>Video.js Sandbox</title>
+
+  <!-- Add ES5 shim and sham for IE8 -->
+  <script src="../build/temp/ie8/videojs-ie8.js"></script>
+
+  <!-- Load the source files -->
+  <link href="../build/temp/video-js.css" rel="stylesheet" type="text/css">
+  <script src="../build/temp/video.js"></script>
+  <script src="../node_modules/videojs-flash/dist/videojs-flash.js"></script>
+
+  <!-- Set the location of the flash SWF -->
+  <script>
+    videojs.options.flash.swf = '../build/temp/video-js.swf';
+    videojs.addLanguage('de', {
+      'Captions settings': 'Amerikanisch',
+      'Subtitles settings': 'Global'
+    });
+  </script>
+  <style>
+  .video-js:lang(en-US) {
+    border: 3px solid red;
+  }
+  .vjs-control:focus {
+    box-shadow: inset 0 0 0 2px rgba(27,127,204,.8);
+    outline: none;
+  }
+  </style>
+</head>
+<body>
+  <div style="background-color:#eee; border: 1px solid #777; padding: 10px; margin-bottom: 20px; font-size: .8em; line-height: 1.5em; font-family: Verdana, sans-serif;">
+    <p>You can use /sandbox/ for writing and testing your own code. Nothing in /sandbox/ will get checked into the repo, except files that end in .example (so don't edit or add those files). To get started make a copy of index.html.example and rename it to index.html.</p>
+    <pre>cp sandbox/index.html.example sandbox/index.html</pre>
+    <pre>npm run start</pre>
+    <pre>open http://localhost:9999/sandbox/index.html</pre>
+  </div>
+
+  <video id="vid1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="264" poster="http://vjs.zencdn.net/v/oceans.png">
+    <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
+    <source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm">
+    <source src="http://vjs.zencdn.net/v/oceans.ogv" type="video/ogg">
+    <track kind="captions" src="../docs/examples/shared/example-captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->
+    <track kind="captions" src="../docs/examples/shared/example-captions-fr.vtt" srclang="fr" label="French"></track><!-- Tracks need an ending tag thanks to IE9 -->
+    <track kind="subtitles" src="../docs/examples/shared/example-subtitles-fr.vtt" srclang="fr" label="French"></track><!-- Tracks need an ending tag thanks to IE9 -->
+    <track kind="subtitles" src="../docs/examples/shared/example-subtitles-de.vtt" srclang="de" label="German"></track><!-- Tracks need an ending tag thanks to IE9 -->
+    <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
+  </video>
+
+  <script>
+    var vid = document.getElementById("vid1");
+    var player = videojs(vid, {
+      controlBar: {
+        children: [
+          'playToggle',
+          'volumePanel',
+          'currentTimeDisplay',
+          'timeDivider',
+          'durationDisplay',
+          'progressControl',
+          'liveDisplay',
+          'remainingTimeDisplay',
+          'customControlSpacer',
+          'playbackRateMenuButton',
+          'chaptersButton',
+          'descriptionsButton',
+          'subtitlesButton',
+          'captionsButton',
+          'subsCapsButton',
+          'audioTrackButton',
+          'fullscreenToggle'
+        ]
+      }
+    });
+    console.log(player.language());
+  </script>
+
+</body>
+</html>
diff --git a/src/css/components/_subs-caps.scss b/src/css/components/_subs-caps.scss
@@ -0,0 +1,22 @@
+// North America uses 'CC' icon
+.video-js:lang(en) .vjs-subs-caps-button .vjs-icon-placeholder,
+.video-js:lang(fr-CA) .vjs-subs-caps-button .vjs-icon-placeholder {
+  @extend .vjs-icon-captions;
+}
+
+// ROW uses 'subtitles'
+// Double selector because @extend puts these rules above the captions icon
+.video-js .vjs-subs-caps-button .vjs-icon-placeholder,
+.video-js.video-js:lang(en-GB) .vjs-subs-caps-button .vjs-icon-placeholder,
+.video-js.video-js:lang(en-IE) .vjs-subs-caps-button .vjs-icon-placeholder,
+.video-js.video-js:lang(en-AU) .vjs-subs-caps-button .vjs-icon-placeholder,
+.video-js.video-js:lang(en-NZ) .vjs-subs-caps-button .vjs-icon-placeholder {
+  @extend .vjs-icon-subtitles;
+}
+
+.video-js .vjs-subs-caps-button + .vjs-menu .vjs-captions-menu-item .vjs-menu-item-text:after {
+  content: " \f10d";
+  font-family: VideoJS;
+  vertical-align: bottom;
+  font-size: 1.5em;
+}
diff --git a/src/css/video-js.scss b/src/css/video-js.scss
@@ -36,6 +36,7 @@
 @import "components/chapters";
 @import "components/descriptions";
 @import "components/subtitles";
+@import "components/subs-caps";
 @import "components/audio";
 @import "components/adaptive";
 @import "components/captions-settings";

diff --git a/src/js/control-bar/control-bar.js b/src/js/control-bar/control-bar.js
@@ -17,6 +17,7 @@ import './text-track-controls/chapters-button.js';
 import './text-track-controls/descriptions-button.js';
 import './text-track-controls/subtitles-button.js';
 import './text-track-controls/captions-button.js';
+import './text-track-controls/subs-caps-button.js';
 import './audio-track-controls/audio-track-button.js';
 import './playback-rate-menu/playback-rate-menu-button.js';
 import './spacer-controls/custom-control-spacer.js';
@@ -66,8 +67,7 @@ ControlBar.prototype.options_ = {
     'playbackRateMenuButton',
     'chaptersButton',
     'descriptionsButton',
-    'subtitlesButton',
-    'captionsButton',
+    'subsCapsButton',
     'audioTrackButton',
     'fullscreenToggle'
   ]

diff --git a/src/js/control-bar/text-track-controls/off-text-track-menu-item.js b/src/js/control-bar/text-track-controls/off-text-track-menu-item.js
@@ -26,11 +26,21 @@ class OffTextTrackMenuItem extends TextTrackMenuItem {
     options.track = {
       player,
       kind: options.kind,
-      label: options.kind + ' off',
+      kinds: options.kinds,
       default: false,
       mode: 'disabled'
     };
 
+    if (!options.kinds) {
+      options.kinds = [options.kind];
+    }
+
+    if (options.label) {
+      options.track.label = options.label;
+    } else {
+      options.track.label = options.kinds.join(' and ') + ' off';
+    }
+
     // MenuItem is selectable
     options.selectable = true;
 
@@ -51,7 +61,7 @@ class OffTextTrackMenuItem extends TextTrackMenuItem {
     for (let i = 0, l = tracks.length; i < l; i++) {
       const track = tracks[i];
 
-      if (track.kind === this.track.kind && track.mode === 'showing') {
+      if ((this.options_.kinds.indexOf(track.kind) > -1) && track.mode === 'showing') {
         selected = false;
         break;
       }

diff --git a/src/js/control-bar/text-track-controls/subs-caps-button.js b/src/js/control-bar/text-track-controls/subs-caps-button.js
@@ -0,0 +1,102 @@
+/**
+ * @file tracks-button.js
+ */
+import TextTrackButton from './text-track-button.js';
+import Component from '../../component.js';
+import CaptionSettingsMenuItem from './caption-settings-menu-item.js';
+import toTitleCase from '../../utils/to-title-case.js';
+/**
+ * The button component for toggling and selecting captions
+ *
+ * @extends TextTrackButton
+ */
+class SubsCapsButton extends TextTrackButton {
+
+  constructor(player, options = {}) {
+    super(player, options);
+
+    // Although North America uses "captions" in most cases for
+    // "captions and subtitles" other locales use "subtitles"
+    this.label_ = 'subtitles';
+    if (['en', 'en-us', 'en-ca', 'fr-ca'].indexOf(this.player_.language_) > -1) {
+      this.label_ = 'captions';
+    }
+    this.menuButton_.controlText(toTitleCase(this.label_));
+
+  }
+
+  /**
+   * Builds the default DOM `className`.
+   *
+   * @return {string}
+   *         The DOM `className` for this object.
+   */
+  buildCSSClass() {
+    return `vjs-subs-caps-button ${super.buildCSSClass()}`;
+  }
+
+  /**
+   * Update caption menu items
+   *
+   * @param {EventTarget~Event} [event]
+   *        The `addtrack` or `removetrack` event that caused this function to be
+   *        called.
+   *
+   * @listens TextTrackList#addtrack
+   * @listens TextTrackList#removetrack
+   */
+  update(event) {
+    let threshold = 2;
+
+    super.update();
+
+    // if native, then threshold is 1 because no settings button
+    if (this.player().tech_ && this.player().tech_.featuresNativeTextTracks) {
+      threshold = 1;
+    }
+
+    if (this.items && this.items.length > threshold) {
+      this.show();
+    } else {
+      this.hide();
+    }
+  }
+
+  /**
+   * Create caption/subtitles menu items
+   *
+   * @return {CaptionSettingsMenuItem[]}
+   *         The array of current menu items.
+   */
+  createItems() {
+    let items = [];
+
+    if (!(this.player().tech_ && this.player().tech_.featuresNativeTextTracks)) {
+      items.push(new CaptionSettingsMenuItem(this.player_, {kind: this.label_}));
+    }
+
+    items = super.createItems(items);
+    return items;
+  }
+
+}
+
+/**
+ * `kind`s of TextTrack to look for to associate it with this menu.
+ *
+ * @type {array}
+ * @private
+ */
+SubsCapsButton.prototype.kinds_ = ['captions', 'subtitles'];
+
+/**
+ * The text that should display over the `SubsCapsButton`s controls.
+ *
+ *
+ * @type {string}
+ * @private
+ */
+SubsCapsButton.prototype.controlText_ = 'Subtitles';
+
+Component.registerComponent('SubsCapsButton', SubsCapsButton);
+export default SubsCapsButton;