Skip to content

Commit d5bf8f9

Browse files
digitas-gitdigitas-git
authored
Merge pull request #264 from sebbayer/feature/add-svg-icons-to-seek-buttons
feature(Buttons): Add inline SVG icons for jump-forward and skip-back…
2 parents 5a30ab9 + da5bc78 commit d5bf8f9

28 files changed

+101
-96
lines changed

‎Gruntfile.js

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -118,12 +118,10 @@ module.exports = function (grunt) {
118118
'dist/airplay/airplay.css': 'src/airplay/airplay.css',
119119
'dist/chromecast/chromecast.css': 'src/chromecast/chromecast.css',
120120
'dist/context-menu/context-menu.css': 'src/context-menu/context-menu.css',
121-
'dist/jump-forward/jump-forward.css': 'src/jump-forward/jump-forward.css',
122121
'dist/loop/loop.css': 'src/loop/loop.css',
123122
'dist/playlist/playlist.css': 'src/playlist/playlist.css',
124123
'dist/postroll/postroll.css': 'src/postroll/postroll.css',
125124
'dist/quality/quality.css': 'src/quality/quality.css',
126-
'dist/skip-back/skip-back.css': 'src/skip-back/skip-back.css',
127125
'dist/source-chooser/source-chooser.css': 'src/source-chooser/source-chooser.css',
128126
'dist/speed/speed.css': 'src/speed/speed.css',
129127
'dist/stop/stop.css': 'src/stop/stop.css',
@@ -147,12 +145,10 @@ module.exports = function (grunt) {
147145
'dist/airplay/airplay.min.css': 'dist/airplay/airplay.css',
148146
'dist/chromecast/chromecast.min.css': 'dist/chromecast/chromecast.css',
149147
'dist/context-menu/context-menu.min.css': 'dist/context-menu/context-menu.css',
150-
'dist/jump-forward/jump-forward.min.css': 'dist/jump-forward/jump-forward.css',
151148
'dist/loop/loop.min.css': 'dist/loop/loop.css',
152149
'dist/playlist/playlist.min.css': 'dist/playlist/playlist.css',
153150
'dist/postroll/postroll.min.css': 'dist/postroll/postroll.css',
154151
'dist/quality/quality.min.css': 'dist/quality/quality.css',
155-
'dist/skip-back/skip-back.min.css': 'dist/skip-back/skip-back.css',
156152
'dist/source-chooser/source-chooser.min.css': 'dist/source-chooser/source-chooser.css',
157153
'dist/speed/speed.min.css': 'dist/speed/speed.css',
158154
'dist/stop/stop.min.css': 'dist/stop/stop.css',

‎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+
## *5.0.0 (2024/09/12)*
4+
### JUMP FORWARD PLUGIN
5+
#### New Feature: Inline SVG icon for jump forward button
6+
* Setting `iconSpritePathJumpForward`: 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 jump forward button. Further information can be found [here](docs/jump-forward.md).
7+
* Important CSS Adjustment: If you're planning to use `iconSpritePathJumpForward` 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.
8+
9+
### SKIP BACK PLUGIN
10+
#### New Feature: Inline SVG icon for skip back button
11+
* Setting `iconSpritePathSkipBack`: 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 skip back button. Further information can be found [here](docs/skip-back.md).
12+
* Important CSS Adjustment: If you're planning to use `iconSpritePathSkipBack` 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
## *4.0.1 (2024/09/09)*
415
### SPEED PLUGIN
516
* Fix always controlling the first player on the page via keyboard when multiple players exist.

‎demo/mejs-jump-forward.svg

Lines changed: 11 additions & 0 deletions
Loading

‎demo/mejs-skip-back.svg

Lines changed: 11 additions & 0 deletions
Loading

‎demo/multiple2.html

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,13 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6-
<title>MediaElement.js 3.0 - Multiple Plugins (2)</title>
6+
<title>MediaElement.js - Multiple Plugins (2)</title>
77
<meta name="viewport" content="width=device-width, initial-scale=1">
88
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
99
<link rel="icon" href="favicon.ico" type="image/x-icon">
1010

1111
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
12-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/4.2.6/mediaelementplayer.css">
13-
<link rel="stylesheet" href="../dist/jump-forward/jump-forward.css">
14-
<link rel="stylesheet" href="../dist/skip-back/skip-back.css">
12+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/7.0.5/mediaelementplayer.css">
1513
<link rel="stylesheet" href="../dist/speed/speed.css">
1614
<link rel="stylesheet" href="demo.css">
1715
</head>
@@ -133,7 +131,7 @@ <h3>API</h3>
133131
</tbody>
134132
</table>
135133
</div>
136-
<script src="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/4.2.6/mediaelement-and-player.min.js"></script>
134+
<script src="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/7.0.5/mediaelement-and-player.min.js"></script>
137135
<script src="../dist/jump-forward/jump-forward.js"></script>
138136
<script src="../dist/skip-back/skip-back.js"></script>
139137
<script src="../dist/speed/speed.js"></script>
@@ -151,4 +149,4 @@ <h3>API</h3>
151149
}
152150
</script>
153151
</body>
154-
</html>
152+
</html>

‎dist/jump-forward/jump-forward.css

Lines changed: 0 additions & 8 deletions
This file was deleted.

‎dist/jump-forward/jump-forward.js

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,9 @@ mejs.i18n.en['mejs.time-jump-forward'] = ['Jump forward 1 second', 'Jump forward
1616
Object.assign(mejs.MepDefaults, {
1717
jumpForwardInterval: 30,
1818

19-
jumpForwardText: null
19+
jumpForwardText: null,
20+
21+
iconSpritePathJumpForward: 'mejs-jump-forward.svg'
2022
});
2123

2224
Object.assign(MediaElementPlayer.prototype, {
@@ -28,7 +30,7 @@ Object.assign(MediaElementPlayer.prototype, {
2830
button = document.createElement('div');
2931

3032
button.className = t.options.classPrefix + 'button ' + t.options.classPrefix + 'jump-forward-button';
31-
button.innerHTML = '<button type="button" aria-controls="' + t.id + '" title="' + forwardTitle + '" aria-label="' + forwardTitle + '" tabindex="0">' + t.options.jumpForwardInterval + '</button>';
33+
button.innerHTML = mejs.Utils.generateControlButton(t.id, forwardTitle, forwardTitle, t.media.options.iconSpritePathJumpForward, ['icon-jump-forward'], t.options.classPrefix);
3234

3335
t.addControlElement(button, 'jumpforward');
3436

@@ -37,7 +39,6 @@ Object.assign(MediaElementPlayer.prototype, {
3739
if (duration) {
3840
var current = media.currentTime === Infinity ? 0 : media.currentTime;
3941
media.setCurrentTime(Math.min(current + t.options.jumpForwardInterval, duration));
40-
this.querySelector('button').blur();
4142
}
4243
});
4344
}

‎dist/jump-forward/jump-forward.min.css

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎dist/jump-forward/jump-forward.min.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/jump-forward/jumpforward.png

-1.22 KB
Binary file not shown.

‎dist/jump-forward/jumpforward.svg

Lines changed: 10 additions & 1 deletion
Loading

‎dist/skip-back/skip-back.css

Lines changed: 0 additions & 8 deletions
This file was deleted.

‎dist/skip-back/skip-back.js

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,9 @@ mejs.i18n.en['mejs.time-skip-back'] = ['Skip back 1 second', 'Skip back %1 secon
1616
Object.assign(mejs.MepDefaults, {
1717
skipBackInterval: 30,
1818

19-
skipBackText: null
19+
skipBackText: null,
20+
21+
iconSpritePathSkipBack: 'mejs-skip-back.svg'
2022
});
2123

2224
Object.assign(MediaElementPlayer.prototype, {
@@ -27,7 +29,7 @@ Object.assign(MediaElementPlayer.prototype, {
2729
button = document.createElement('div');
2830

2931
button.className = t.options.classPrefix + 'button ' + t.options.classPrefix + 'skip-back-button';
30-
button.innerHTML = '<button type="button" aria-controls="' + t.id + '" title="' + skipTitle + '" aria-label="' + skipTitle + '" tabindex="0">' + t.options.skipBackInterval + '</button>';
32+
button.innerHTML = mejs.Utils.generateControlButton(t.id, skipTitle, skipTitle, t.media.options.iconSpritePathSkipBack, ['icon-skip-back'], t.options.classPrefix);
3133

3234
t.addControlElement(button, 'skipback');
3335

@@ -36,7 +38,6 @@ Object.assign(MediaElementPlayer.prototype, {
3638
if (duration) {
3739
var current = media.currentTime === Infinity ? 0 : media.currentTime;
3840
media.setCurrentTime(Math.max(current - t.options.skipBackInterval, 0));
39-
this.querySelector('button').blur();
4041
}
4142
});
4243
}

‎dist/skip-back/skip-back.min.css

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎dist/skip-back/skip-back.min.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/skip-back/skipback.png

-410 Bytes
Binary file not shown.

‎dist/skip-back/skipback.svg

Lines changed: 7 additions & 16 deletions
Loading

‎docs/jump-forward.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,4 +16,5 @@ features: [..., 'jumpforward']
1616
Parameter | Type | Default | Description
1717
------ | --------- | ------- | --------
1818
jumpForwardInterval | number | `30` | Seconds to jump forward media
19-
jumpForwardText | string | `null` | Title for Jump Forward button for WARIA purposes
19+
jumpForwardText | string | `null` | Title for Jump Forward button for WARIA purposes
20+
iconSpritePathJumpForward | string | `mejs-jump-forward.svg` | Path for the SVG icon sprite file.

‎docs/skip-back.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,3 +17,4 @@ Parameter | Type | Default | Description
1717
------ | --------- | ------- | --------
1818
skipBackInterval | number | `30` | Seconds to skip back media
1919
skipBackText | string | `null` | Title for Skip Back button for WARIA purposes
20+
iconSpritePathSkipBack | string | `mejs-skip-back.svg` | Path for the SVG icon sprite file.

‎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": "4.0.1",
3+
"version": "5.0.0",
44
"repository": {
55
"type": "git",
66
"url": "https://github.com/mediaelement/mediaelement-plugins.git"

0 commit comments

Comments
 (0)