feat: Add an Audio Description icon to an audio track name in the tra…

…ck menu if it is "main-desc" kind. (#4599)

src/css/components/_audio.scss

@@ -1,3 +1,17 @@
 .video-js .vjs-audio-button .vjs-icon-placeholder {
   @extend .vjs-icon-audio;
 }
+
+.video-js .vjs-audio-button + .vjs-menu .vjs-main-desc-menu-item .vjs-menu-item-text .vjs-icon-placeholder {
+  vertical-align: middle;
+  display: inline-block;
+  margin-bottom: -0.1em;
+}
+
+// Mark a main-desc-menu-item (main + description) item with a trailing Audio Description icon
+.video-js .vjs-audio-button + .vjs-menu .vjs-main-desc-menu-item .vjs-menu-item-text .vjs-icon-placeholder:before {
+  font-family: VideoJS;
+  content: " \f11d";
+  font-size: 1.5em;
+  line-height: inherit;
+}

src/js/control-bar/audio-track-controls/audio-track-menu-item.js

@@ -3,6 +3,7 @@
  */
 import MenuItem from '../../menu/menu-item.js';
 import Component from '../../component.js';
+import {assign} from '../../utils/obj';
 
 /**
  * An {@link AudioTrack} {@link MenuItem}
@@ -32,6 +33,8 @@ class AudioTrackMenuItem extends MenuItem {
 
     this.track = track;
 
+    this.addClass(`vjs-${track.kind}-menu-item`);
+
     const changeHandler = (...args) => {
       this.handleTracksChange.apply(this, args);
     };
@@ -42,6 +45,25 @@ class AudioTrackMenuItem extends MenuItem {
     });
   }
 
+  createEl(type, props, attrs) {
+    let innerHTML = `<span class="vjs-menu-item-text">${this.localize(this.options_.label)}`;
+
+    if (this.options_.track.kind === 'main-desc') {
+      innerHTML += `
+        <span aria-hidden="true" class="vjs-icon-placeholder"></span>
+        <span class="vjs-control-text"> ${this.localize('Descriptions')}</span>
+      `;
+    }
+
+    innerHTML += '</span>';
+
+    const el = super.createEl(type, assign({
+      innerHTML
+    }, props), attrs);
+
+    return el;
+  }
+
   /**
    * This gets called when an `AudioTrackMenuItem is "clicked". See {@link ClickableComponent}
    * for more detailed information on what a click can be.