Skip to content

Commit d5bf8f9

Browse files
digitas-gitdigitas-git
authored
Merge pull request mediaelement#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.

0 commit comments

Comments
 (0)