Merge pull request #252 from mediaelement/fix/display-quality-icon-after-quality-change

Quality icon remains visible after quality change

Author: digitas-git

src/a11y/a11y.js

@@ -56,7 +56,7 @@ Object.assign(mejs.MepDefaults, {
 	 * The path where the icon sprite is located
 	 * @type {String}
 	 */
-	iconSpritePath: 'mejs-a11y-icons.svg',
+	iconSpritePathA11y: 'mejs-a11y-icons.svg',
 });
 
 
@@ -97,13 +97,13 @@ Object.assign(MediaElementPlayer.prototype, {
      * @private
      * @param {String} id - ID of the MediaElement player
      * @param {String} classPrefix - Prefix for the class attribute
-     * @param {String} iconSpritePath - Path to the SVG sprite containing icons
+     * @param {String} iconSpritePathA11y - Path to the SVG sprite containing icons
      * @param {String} iconId - Specific ID of the icon within the SVG sprite
      * @returns {String} The complete HTML string for the SVG element
      */
-    _generateIconHtml(id, classPrefix, iconSpritePath, iconId) {
+    _generateIconHtml(id, classPrefix, iconSpritePathA11y, iconId) {
         return `<svg xmlns="http://www.w3.org/2000/svg" id="${id}" class="${classPrefix}${iconId}" aria-hidden="true" focusable="false">
-            <use xlink:href="${iconSpritePath}#${iconId}"></use></svg>`;
+            <use xlink:href="${iconSpritePathA11y}#${iconId}"></use></svg>`;
     },
 
     /**
@@ -113,7 +113,7 @@ Object.assign(MediaElementPlayer.prototype, {
      */
     _createAudioDescription() {
         const t = this;
-        const iconHtml = t._generateIconHtml(t.id, t.options.classPrefix, t.options.iconSpritePath, 'icon-audio');
+        const iconHtml = t._generateIconHtml(t.id, t.options.classPrefix, t.options.iconSpritePathA11y, 'icon-audio');
         const audioDescriptionTitle = mejs.i18n.t('mejs.a11y-audio-description');
         const audioDescriptionButton = document.createElement('div');
         audioDescriptionButton.className = `${t.options.classPrefix}button ${t.options.classPrefix}audio-description-button`;
@@ -136,7 +136,7 @@ Object.assign(MediaElementPlayer.prototype, {
      */
     _createVideoDescription() {
         const t = this;
-        const iconHtml = t._generateIconHtml(t.id, t.options.classPrefix, t.options.iconSpritePath, 'icon-video');
+        const iconHtml = t._generateIconHtml(t.id, t.options.classPrefix, t.options.iconSpritePathA11y, 'icon-video');
         const videoDescriptionTitle = mejs.i18n.t('mejs.a11y-video-description');
         const videoDescriptionButton = document.createElement('div');
         videoDescriptionButton.className = `${t.options.classPrefix}button ${t.options.classPrefix}video-description-button`;

src/quality/quality.js

@@ -40,7 +40,7 @@ Object.assign(mejs.MepDefaults, {
 	 * The path where the icon file is located
 	 * @type {String}
 	 */
-	iconPath: 'mejs-quality.svg',
+	iconPathQuality: 'mejs-quality.svg',
 });
 
 Object.assign(MediaElementPlayer.prototype, {
@@ -130,6 +130,7 @@ Object.assign(MediaElementPlayer.prototype, {
 
 		t.generateQualityButton(t, player, media, qualityMap, currentQuality);
 	},
+
 	generateQualityButton (t, player, media, qualityMap, currentQuality) {
 		t.cleanquality(player);
 
@@ -157,11 +158,11 @@ Object.assign(MediaElementPlayer.prototype, {
 		// Get initial quality
 		const generateId = Math.floor(Math.random() * 100);
 		const iconHtml = `<svg xmlns="http://www.w3.org/2000/svg" id="${generateId}" class="${t.options.classPrefix}" aria-hidden="true" focusable="false">
-			<use xlink:href="${t.options.iconPath}#default-icon"></use></svg>`;
+			<use xlink:href="${t.options.iconPathQuality}#default-icon"></use></svg>`;
 		player.qualitiesContainer = document.createElement('div');
 		player.qualitiesContainer.className = `${t.options.classPrefix}button ${t.options.classPrefix}qualities-button`;
 		player.qualitiesContainer.innerHTML = `<button type="button" title="${qualityTitle}" aria-label="${qualityTitle}" aria-controls="qualitieslist-${generateId}" aria-expanded="false">
-		${t.options.iconPath ? iconHtml : defaultValue}</button>` +
+		${t.options.iconPathQuality ? iconHtml : defaultValue}</button>` +
 			`<div class="${t.options.classPrefix}qualities-selector ${t.options.classPrefix}offscreen">` +
 			`<ul class="${t.options.classPrefix}qualities-selector-list" id="qualitieslist-${generateId}" tabindex="-1"></ul></div>`;
 
@@ -436,7 +437,6 @@ Object.assign(MediaElementPlayer.prototype, {
 		const
 			newQuality = self.value
 		;
-
 		const formerSelected = player.qualitiesContainer.querySelectorAll(`.${t.options.classPrefix}qualities-selected`);
 		for (let i = 0, total = formerSelected.length; i < total; i++) {
 			mejs.Utils.removeClass(formerSelected[i], `${t.options.classPrefix}qualities-selected`);
@@ -450,7 +450,10 @@ Object.assign(MediaElementPlayer.prototype, {
 			currentSelected[j].parentElement.querySelector('input').classList.add(`${t.options.classPrefix}qualities-selected-input`);
 		}
 
-		player.qualitiesContainer.querySelector('button').innerHTML = newQuality;
+		if (!t.options.iconPathQuality) {
+			player.qualitiesContainer.querySelector('button').innerHTML = newQuality;
+		}
+
 		return newQuality;
 	},