Skip to content

Commit 18e582b

Browse files
author
Rosari Harlan
committed
feature(Buttons): Add inline SVG icons for quality, audio and video description buttons
1 parent 9acdae4 commit 18e582b

11 files changed

Lines changed: 81 additions & 36 deletions

File tree

‎changelog.md‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,16 @@
11
# Version History
22

3+
## *3.0.0 (2024/03/06)*
4+
### QUALITY PLUGIN
5+
#### New Feature: Inline SVG icons for quality button
6+
* 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).
7+
* 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.
8+
9+
### A11Y PLUGIN
10+
#### New Feature: Inline SVG icons for audio and video description buttons
11+
* Setting `iconSpritePath`: This option enables you to define the path to your SVG icon sprite. When specified, it allows for dynamic generation of inline SVG icons, which will be displayed on the audio and/or video description buttons. Further information can be found [here](docs/a11y.md).
12+
* Important CSS Adjustment: If you're planning to use `iconSpritePath` and your current setup includes background icons defined in CSS, you'll need to make a small but crucial update to your CSS file. Please remove any CSS rules that apply background icons to these buttons. This step is necessary to prevent the display of both SVG and background icons simultaneously.
13+
314
## *2.6.7 (2023/08/02)*
415
### QUALITY PLUGIN
516
* The `cleanMediaSource` function was updated to avoid captions being

‎demo/a11y.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
<link rel="icon" href="favicon.ico" type="image/x-icon">
99

1010
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
11-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/4.2.9/mediaelementplayer.css">
11+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/5.0.1/mediaelementplayer.css">
1212
<link rel="stylesheet" href="../dist/a11y/a11y.css">
1313
<link rel="stylesheet" href="demo.css">
1414
</head>

‎demo/mejs-a11y-icons.svg‎

Lines changed: 9 additions & 0 deletions
Loading

‎demo/mejs-quality.svg‎

Lines changed: 20 additions & 0 deletions
Loading

‎docs/a11y.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ Parameter | Type | Default | Description
1414
`data-video-description` | array | null | An array of video source objects like `{ src: "description.mp4", type: "video/mp4" }`. This plugin will evaluate the best matching type out of the array.
1515
`data-audio-description` | array | null | An array of audio description source objects like `{ src: "description.mp3", type: "audio/mp3" }`. This plugin will evaluate the best matching type out of the array.
1616
`data-audio-description-voiceover` | boolean | false | If set as data attribute only or with value `true` audio description will be started in voice-over mode.
17+
`iconSpritePath` | string | `mejs-a11y-icons.svg` | Path for the SVG icon sprite file.
1718

1819
#### Audio-description node
1920
The Audio description node is bound to the MediaElement.js object at `mejs.audioDescription.node`, like the original node is bound under `mejs.node`.

‎docs/quality.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,4 +16,5 @@ Parameter | Type | Default | Description
1616
------ | --------- | ------- | --------
1717
defaultQuality | string | `null` | Initial media quality; if `null`, it will take the first available source
1818
qualityText | string | `null` | Title for Quality button for WARIA purposes
19-
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
19+
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
20+
iconSpritePath | string | `mejs-quality-icon.svg` | Path for the SVG icon sprite file

‎package-lock.json‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "mediaelement-plugins",
3-
"version": "2.6.7",
3+
"version": "3.0.0",
44
"repository": {
55
"type": "git",
66
"url": "https://github.com/mediaelement/mediaelement-plugins.git"

‎src/a11y/a11y.css‎

Lines changed: 0 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,3 @@
1-
.mejs-video-description-button > button,
2-
.mejs__video-description-button > button,
3-
.mejs-audio-description-button > button,
4-
.mejs__audio-description-button > button {
5-
background-repeat: no-repeat;
6-
background-size: contain;
7-
opacity: 0.7;
8-
}
9-
10-
.mejs-video-description-button.video-description-on > button,
11-
.mejs__video-description-button.video-description-on > button,
12-
.mejs-audio-description-button.audio-description-on > button,
13-
.mejs__audio-description-button.audio-description-on > button {
14-
opacity: 1;
15-
}
16-
17-
.mejs-video-description-button > button,
18-
.mejs__video-description-button > button {
19-
background-image: url('video-description-icon.svg');
20-
}
21-
22-
.mejs-audio-description-button > button,
23-
.mejs__audio-description-button > button {
24-
background-image: url('audio-description-icon.svg');
25-
}
26-
271
.mejs-volume-button.hidden,
282
.mejs__volume-button.hidden {
293
display: none;

‎src/a11y/a11y.js‎

Lines changed: 24 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,12 @@ Object.assign(mejs.MepDefaults, {
5151
* @type {Boolean}
5252
*/
5353
audioDescriptionCanPlay: false,
54+
55+
/**
56+
* The path where the icon sprite is located
57+
* @type {String}
58+
*/
59+
iconSpritePath: 'mejs-a11y-icons.svg',
5460
});
5561

5662

@@ -86,18 +92,32 @@ Object.assign(MediaElementPlayer.prototype, {
8692
return [...parentNode.childNodes].find(node => node.className.indexOf(className) > -1);
8793
},
8894

95+
/**
96+
* Generates an HTML for an SVG icon.
97+
* @private
98+
* @param {String} id
99+
* @param {String} classPrefix
100+
* @param {String} iconSpritePath
101+
* @param {String} iconId
102+
* @returns {String}
103+
*/
104+
_generateIconHtml(id, classPrefix, iconSpritePath, iconId) {
105+
return `<svg xmlns="http://www.w3.org/2000/svg" id="${id}" class="${classPrefix}${iconId}" aria-hidden="true" focusable="false">
106+
<use xlink:href="${iconSpritePath}#${iconId}"></use></svg>`;
107+
},
108+
89109
/**
90110
* Create audio description button and bind events
91111
* @private
92112
* @returns {Undefined}
93113
*/
94114
_createAudioDescription() {
95115
const t = this;
96-
116+
const iconHtml = t._generateIconHtml(t.id, t.options.classPrefix, t.options.iconSpritePath, 'icon-audio');
97117
const audioDescriptionTitle = mejs.i18n.t('mejs.a11y-audio-description');
98118
const audioDescriptionButton = document.createElement('div');
99119
audioDescriptionButton.className = `${t.options.classPrefix}button ${t.options.classPrefix}audio-description-button`;
100-
audioDescriptionButton.innerHTML = `<button type="button" aria-controls="${t.id}" title="${audioDescriptionTitle}" aria-label="${audioDescriptionTitle}" tabindex="0"></button>`;
120+
audioDescriptionButton.innerHTML = `<button type="button" aria-controls="${t.id}" title="${audioDescriptionTitle}" aria-label="${audioDescriptionTitle}" tabindex="0">${iconHtml}</button>`;
101121

102122
t.addControlElement(audioDescriptionButton, 'audio-description');
103123

@@ -116,10 +136,11 @@ Object.assign(MediaElementPlayer.prototype, {
116136
*/
117137
_createVideoDescription() {
118138
const t = this;
139+
const iconHtml = t._generateIconHtml(t.id, t.options.classPrefix, t.options.iconSpritePath, 'icon-video');
119140
const videoDescriptionTitle = mejs.i18n.t('mejs.a11y-video-description');
120141
const videoDescriptionButton = document.createElement('div');
121142
videoDescriptionButton.className = `${t.options.classPrefix}button ${t.options.classPrefix}video-description-button`;
122-
videoDescriptionButton.innerHTML = `<button type="button" aria-controls="${t.id}" title="${videoDescriptionTitle}" aria-label="${videoDescriptionTitle}" tabindex="0"></button>`;
143+
videoDescriptionButton.innerHTML = `<button type="button" aria-controls="${t.id}" title="${videoDescriptionTitle}" aria-label="${videoDescriptionTitle}" tabindex="0">${iconHtml}</button>`;
123144
t.addControlElement(videoDescriptionButton, 'video-description');
124145

125146
videoDescriptionButton.addEventListener('click', () => {

0 commit comments

Comments
 (0)