feature(Buttons): Update description of the generate icon function, and the version of MediaElementJS in the demo file

Author: Rosari Harlan

changelog.md

@@ -3,8 +3,8 @@
 ## *3.0.0 (2024/03/06)*
 ### QUALITY PLUGIN
 #### New Feature: Inline SVG icons for quality button
-* Using `iconSpritePath`: By setting the `iconSpritePath` option, you can specify the path to your SVG icon sprite. Once set, an inline SVG icon will be dynamically generated and displayed on the quality button. Further information can be found [here](docs/quality.md).
-* Default Behavior: If you choose not to utilize the `iconSpritePath` option, the quality button will continue to operate as before, displaying the default quality value as its text.
+* Using `iconPath`: By setting the `iconPath` option, you can specify the path to your SVG icon. Once set, an inline SVG icon will be dynamically generated and displayed on the quality button. Further information can be found [here](docs/quality.md).
+* Default Behavior: If you choose not to utilize the `iconPath` option, the quality button will continue to operate as before, displaying the default quality value as its text.
 
 ### A11Y PLUGIN
 #### New Feature: Inline SVG icons for audio and video description buttons

demo/a11y.html

@@ -8,7 +8,7 @@
     <link rel="icon" href="favicon.ico" type="image/x-icon">
 
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/5.0.1/mediaelementplayer.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/7.0.3/mediaelementplayer.css">
     <link rel="stylesheet" href="../dist/a11y/a11y.css">
     <link rel="stylesheet" href="demo.css">
 </head>

docs/quality.md

@@ -17,4 +17,4 @@ Parameter | Type | Default | Description
 defaultQuality | string | `null` | Initial media quality; if `null`, it will take the first available source
 qualityText | string | `null` | Title for Quality button for WARIA purposes
 qualityChangeCallback | callback |  | Action that will be executed as soon as the user change video quality; passes 3 arguments: media (the wrapper that mimics all the native events/properties/methods for all renderers), node (the original HTML video, audio or iframe tag where the media was loaded originally and string newQuality
-iconSpritePath | string | `mejs-quality-icon.svg` | Path for the SVG icon sprite file
+iconPath | string | `mejs-quality-icon.svg` | Path for the SVG icon file

src/a11y/a11y.js

@@ -95,11 +95,11 @@ Object.assign(MediaElementPlayer.prototype, {
     /**
      * Generates an HTML for an SVG icon. 
      * @private
-     * @param {String} id
-     * @param {String} classPrefix
-     * @param {String} iconSpritePath
-     * @param {String} iconId
-     * @returns {String}
+     * @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} 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) {
         return `<svg xmlns="http://www.w3.org/2000/svg" id="${id}" class="${classPrefix}${iconId}" aria-hidden="true" focusable="false">

src/quality/quality.js

@@ -37,10 +37,10 @@ Object.assign(mejs.MepDefaults, {
 	 */
 	qualityChangeCallback: null,
 	/**
-	 * The path where the icon sprite is located
+	 * The path where the icon file is located
 	 * @type {String}
 	 */
-	iconSpritePath: 'mejs-quality.svg',
+	iconPath: 'mejs-quality.svg',
 });
 
 Object.assign(MediaElementPlayer.prototype, {
@@ -157,11 +157,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.iconSpritePath}#default-icon"></use></svg>`;
+			<use xlink:href="${t.options.iconPath}#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.iconSpritePath ? iconHtml : defaultValue}</button>` +
+		${t.options.iconPath ? 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>`;