feat: Add optional "Cast" label element

README.md

@@ -68,6 +68,9 @@ at `window.videojs` and will throw an error if it does not exist.
      the Chromecast framework needs. If you use the `preloadWebComponents: true` option, you
      should make sure that this plugin is loaded before jQuery. Then include the Chromecast
      framework after this plugin as you normally would.
+   * **`showCastLabel`** (default: `false`) - By default, the Chromecast button component will
+    display an icon with no label. Setting `showCastLabel` to `true` will display a label titled
+    "Cast" alongside the default icon.
 
   **Note:** There is a caveat to using the `preloadWebComponents` setting.
   Because the Chromecast plugin uses the shadow DOM to create the
@@ -98,6 +101,7 @@ before the `<script>` tag to include the plugin.
 <script>
    window.SILVERMINE_VIDEOJS_CHROMECAST_CONFIG = {
       preloadWebComponents: true,
+      showCastLabel: true,
    };
 </script>
 <script src="path/to/silvermine-videojs-chromecast.js"></script>
@@ -230,14 +234,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 texts, 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

@@ -4,9 +4,10 @@
  *
  * @module ChromecastButton
  */
-module.exports = function(videojs) {
+module.exports = function(videojs, userOpts) {
 
-   var Button = videojs.getComponent('Button'),
+   var options = Object.assign({ showCastLabel: false }, userOpts),
+       Button = videojs.getComponent('Button'),
        ChromecastButton;
 
    /**
@@ -39,6 +40,15 @@ module.exports = function(videojs) {
          } else {
             this._onChromecastDevicesUnavailable();
          }
+
+         // Create an optional label element displaying 'Cast'
+         if (options.showCastLabel) {
+            this._labelEl = document.createElement('span');
+            this._labelEl.classList.add('vjs-chromecast-button-label');
+            this._labelEl.textContent = this._getLocalizedCastLabel();
+
+            this.el().appendChild(this._labelEl);
+         }
       },
 
       /**
@@ -115,6 +125,15 @@ module.exports = function(videojs) {
          }
          this.el_.className = this.buildCSSClass();
       },
+
+      /**
+       * Gets the localized text for the "Cast" label.
+       *
+       * @protected
+       */
+      _getLocalizedCastLabel: function() {
+         return this.localize('Cast');
+      },
    });
 
    /**

src/js/index.js

@@ -27,7 +27,7 @@ module.exports = function(videojs, userOpts) {
    }
 
    videojs = videojs || window.videojs;
-   createChromecastButton(videojs);
+   createChromecastButton(videojs, userOpts);
    createChromecastTech(videojs);
    enableChromecast(videojs);
 };

src/scss/_chromecastButton.scss

@@ -7,8 +7,16 @@ $icon-chromecast-casting--hover: 'images/ic_cast_connected_white_24dp.png' !defa
 // Sizes
 $chromecast-icon-size: 12px !default;
 
-.vjs-chromecast-button {
+.vjs-chromecast-button:not(.vjs-hidden) {
+   display: flex !important;
+   align-items: center;
+
+   .vjs-chromecast-button-label {
+      flex: 1;
+      padding: 0 4px;
+   }
    .vjs-icon-placeholder {
+      flex: 1;
       background: url($icon-chromecast--default) center center no-repeat;
       background-size: contain;
       display: inline-block;