feat: Add optional "Cast" label to button component

README.md

@@ -162,6 +162,9 @@ player.chromecast(); // initializes the Chromecast plugin
      the last child of the control bar. A value less than 0 puts the button at the specified
      position from the end of the control bar. Note that it's likely not all child components
      of the control bar are visible.
+   * **`plugins.chromecast.addCastLabelToButton`** (default: `false`) - by default, the Chromecast
+    button component will display only an icon. Setting `addCastLabelToButton` to `true` will
+    display a label titled `"Cast"` alongside the default icon.
 
 ##### Chromecast Tech configuration
 
@@ -230,14 +233,17 @@ options = {
 
 ##### Localization
 
-The `ChromecastButton` component has one translated string: "Open Chromecast menu". The
-"Open Chromecast menu" string appears in both of the standard places for Button component
-accessibility text: inside the `.vjs-control-text` span and as the `<button>` element's
-`title` attribute.
+The `ChromecastButton` component has two translated strings: "Open Chromecast menu" and "Cast".
 
-To localize the Chromecast button text, follow the steps in the
-[Video.js Languages tutorial][videojs-translation] to add an `"Open Chromecast menu"` key
-to the map of translation strings.
+   * The "Open Chromecast menu" string appears in both of the standard places for Button
+    component accessibility text: inside the `.vjs-control-text` span and as the `<button>`
+    element's `title` attribute.
+   * The "Cast" string appears in an optional label within the Button component: inside the
+    `.vjs-chromecast-button-label` span.
+
+To localize the Chromecast button strings, follow the steps in the
+[Video.js Languages tutorial][videojs-translation] to add `"Open Chromecast menu"`
+and `"Cast"` keys to the map of translation strings.
 
 ### Using the npm module
 

src/js/components/ChromecastButton.js

@@ -25,16 +25,14 @@ ChromecastButton = {
     * @extends external:Button
     * @param player {Player} the video.js player instance
     */
-   constructor: function(player) {
+   constructor: function(player, options) {
       this.constructor.super_.apply(this, arguments);
 
       player.on('chromecastConnected', this._onChromecastConnected.bind(this));
       player.on('chromecastDisconnected', this._onChromecastDisconnected.bind(this));
       player.on('chromecastDevicesAvailable', this._onChromecastDevicesAvailable.bind(this));
       player.on('chromecastDevicesUnavailable', this._onChromecastDevicesUnavailable.bind(this));
 
-      this.controlText('Open Chromecast menu');
-
       // Use the initial state of `hasAvailableDevices` to call the corresponding event
       // handlers because the corresponding events may have already been emitted before
       // binding the listeners above.
@@ -43,6 +41,18 @@ ChromecastButton = {
       } else {
          this._onChromecastDevicesUnavailable();
       }
+
+      if (options.addCastLabelToButton) {
+         this.el().classList.add('vjs-chromecast-button-lg');
+
+         this._labelEl = document.createElement('span');
+         this._labelEl.classList.add('vjs-chromecast-button-label');
+         this._labelEl.textContent = this.localize('Cast');
+
+         this.el().appendChild(this._labelEl);
+      } else {
+         this.controlText('Open Chromecast menu');
+      }
    },
 
    /**

src/scss/_chromecastButton.scss

@@ -6,6 +6,7 @@ $icon-chromecast-casting--hover: 'images/ic_cast_connected_white_24dp.png' !defa
 
 // Sizes
 $chromecast-icon-size: 12px !default;
+$chromecast-button-spacing: 4px !default;
 
 .vjs-chromecast-button {
    .vjs-icon-placeholder {
@@ -30,3 +31,18 @@ $chromecast-icon-size: 12px !default;
       }
    }
 }
+
+.vjs-chromecast-button.vjs-chromecast-button-lg:not(.vjs-hidden) {
+   // Fits both the icon and the label on the same control
+   display: flex;
+   align-items: center;
+   width: auto;
+   padding: 0 $chromecast-button-spacing;
+   .vjs-chromecast-button-label {
+      flex-grow: 1;
+      margin-left: $chromecast-button-spacing;
+   }
+   .vjs-icon-placeholder {
+      flex-grow: 1;
+   }
+}