MDL-76340 VideoJS: Fixed the menu item not being displayed as expected

moodle · Nov 24, 2022 · 8e195ad · 8e195ad
1 parent 91de19a
commit 8e195ad
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 43 deletions.
diff --git a/media/player/videojs/amd/build/video-lazy.min.js b/media/player/videojs/amd/build/video-lazy.min.js
diff --git a/media/player/videojs/amd/build/video-lazy.min.js.map b/media/player/videojs/amd/build/video-lazy.min.js.map
diff --git a/media/player/videojs/amd/src/video-lazy.js b/media/player/videojs/amd/src/video-lazy.js
@@ -18040,22 +18040,20 @@
     var _proto = MenuItem.prototype;
 
     _proto.createEl = function createEl(type, props, attrs) {
-      var el = _ClickableComponent.prototype.createEl.call(this, type, props, attrs);
-      var parentSpan = _ClickableComponent.prototype.createEl.call(this, 'li', assign({
+      // The control is textual, not just an icon
+      this.nonIconControl = true;
+      var el = _ClickableComponent.prototype.createEl.call(this, 'li', assign({
         className: 'vjs-menu-item',
         tabIndex: -1
       }, props), attrs);
 
-      parentSpan.appendChild(_ClickableComponent.prototype.createEl.call(this, 'span', {
-        className: 'vjs-icon-placeholder'
-      }, {
-        'aria-hidden': true
-      }));
-      parentSpan.appendChild(_ClickableComponent.prototype.createEl.call(this, 'span', {
-        className: 'vjs-control-text',
-        textContent: this.localize(this.options_.label)
-      }));
-
+      var iconplaceholder = el.querySelector('.vjs-icon-placeholder');
+      if (typeof iconplaceholder === 'object' && iconplaceholder !== null) {
+        el.replaceChild(_ClickableComponent.prototype.createEl.call(this, 'span', {
+          className: 'vjs-menu-item-text',
+          textContent: this.localize(this.options_.label)
+        }), iconplaceholder);
+      }
       return el;
     }
     /**
@@ -19120,23 +19118,19 @@
     var _proto = SubsCapsMenuItem.prototype;
 
     _proto.createEl = function createEl(type, props, attrs) {
-      var el = _TextTrackMenuItem.prototype.createEl.call(this, type, props, attrs);
-
-      var parentSpan = el.querySelector('.vjs-menu-item-text');
+      var el = _TextTrackMenuItem.prototype.createEl.call(this, 'li', assign({
+        className: 'vjs-menu-item',
+        tabIndex: -1
+      }, props), attrs);
 
-      if (this.options_.track.kind === 'captions') {
-        parentSpan.appendChild(createEl('span', {
-          className: 'vjs-icon-placeholder'
-        }, {
-          'aria-hidden': true
-        }));
-        parentSpan.appendChild(createEl('span', {
-          className: 'vjs-control-text',
-          // space added as the text will visually flow with the
-          // label
-          textContent: " " + this.localize('Captions')
-        }));
+      const menuitem = el.querySelector('.vjs-menu-item-text');
+      if (this.options_.track.kind === 'captions' && menuitem) {
+        const icon = document.createElement("span");
+        icon.className = 'vjs-icon-placeholder';
+        menuitem.appendChild(icon);
+        el.appendChild(menuitem);
       }
+      return el;
     };
 
     return SubsCapsMenuItem;
@@ -19285,20 +19279,17 @@
     var _proto = AudioTrackMenuItem.prototype;
 
     _proto.createEl = function createEl(type, props, attrs) {
-      var el = _MenuItem.prototype.createEl.call(this, type, props, attrs);
-
-      var parentSpan = el.querySelector('.vjs-menu-item-text');
+      var el = _MenuItem.prototype.createEl.call(this, 'li', assign({
+        className: 'vjs-menu-item',
+        tabIndex: -1
+      }, props), attrs);
 
-      if (this.options_.track.kind === 'main-desc') {
-        parentSpan.appendChild(_MenuItem.prototype.createEl.call(this, 'span', {
-          className: 'vjs-icon-placeholder'
-        }, {
-          'aria-hidden': true
-        }));
-        parentSpan.appendChild(_MenuItem.prototype.createEl.call(this, 'span', {
-          className: 'vjs-control-text',
-          textContent: this.localize('Descriptions')
-        }));
+      const menuitem = el.querySelector('.vjs-menu-item-text');
+      if (this.options_.track.kind === 'main' && menuitem) {
+        const icon = document.createElement("span");
+        icon.className = 'vjs-icon-placeholder';
+        menuitem.appendChild(icon);
+        el.appendChild(menuitem);
       }
 
       return el;

diff --git a/media/player/videojs/readme_moodle.txt b/media/player/videojs/readme_moodle.txt
@@ -67,4 +67,5 @@ Changes:
 In order to improve the validation, a couple of minor changes have been added to the video-lazy.js:
 1. Partial upgrade from VideoJS 7.17.0 for 'Subtitles' label check in 18043 - 18059
 2. Partial upgrade from VideoJS 7.17.0 for 'Captions' label check from 19123 - 19138
-3. Partial upgrade from VideoJS 7.17.0 for 'Description' label check from 19288 - 19302
+3. Partial upgrade from VideoJS 7.17.0 for 'Description' label check from 19288 - 19302
+4. Fixed the menu item not being displayed as expected