Added key bindings for loop

This commit is contained in:
Chrysa Papadopoulou 2017-02-14 16:04:58 +02:00
parent 9c599884a8
commit 1fd742464d
3 changed files with 63 additions and 5 deletions

4
dist/plyr.js vendored

File diff suppressed because one or more lines are too long

View File

@ -672,7 +672,12 @@ player.source({
srclang:'en',
src: '/path/to/captions.vtt',
default: true
}]
}],
loopKeyEvents: {
toggleLoop: 76,
loopin: 73,
loopout: 79
}
});
```
@ -988,6 +993,21 @@ By default, a player will bind the following keyboard shortcuts when it has focu
<td></td>
<td>Toggle captions</td>
</tr>
<tr>
<td><code>l</code></td>
<td></td>
<td>Toggle Loop All/No Loop</td>
</tr>
<tr>
<td><code>i</code></td>
<td></td>
<td>Set the start marker of the loop</td>
</tr>
<tr>
<td><code>o</code></td>
<td></td>
<td>Set the end marker of the loop</td>
</tr>
</tbody>
</table>

View File

@ -40,6 +40,11 @@
loop: false,
loopin: 0,
loopout: null,
loopKeyEvents: {
toggleLoop: 76,
loopin: 73,
loopout: 79
},
seekTime: 10,
volume: 10,
volumeMin: 0,
@ -2463,7 +2468,7 @@
// Toggle loop
function toggleLoop(toggle) {
if (['loopin', 'loopout', 'loopall'].indexOf(toggle) === -1) {
if (['loopin', 'loopout', 'loopall', 'toggle'].indexOf(toggle) === -1) {
toggle = 'loopclear';
}
@ -2486,6 +2491,15 @@
config.loopin = 0;
config.loopout = plyr.media.duration - 2;
break;
case 'toggle':
if (config.loop) {
config.loopin = 0;
config.loopout = null;
} else {
config.loopin = 0;
config.loopout = plyr.media.duration - 2;
}
break;
default:
config.loopin = 0;
config.loopout = null;
@ -3528,8 +3542,9 @@
// Which keycodes should we prevent default
var preventDefault = [48, 49, 50, 51, 52, 53, 54, 56, 57, 32, 75, 38, 40, 77, 39, 37, 70, 67];
var checkFocus = [38, 40];
var loopKeyEventsValues = Object.values(config.loopKeyEvents);
if (inArray(checkFocus, code)) {
if (inArray(checkFocus, code) || inArray(loopKeyEventsValues, code)) {
var focused = getFocusElement();
if (is.htmlElement(focused) && getFocusElement().type === "radio") {
@ -3608,6 +3623,29 @@
break;
}
//Loop events
var loopKeyBindings = config.loopKeyEvents;
var hasBindedKey = loopKeyEventsValues.filter(function(el) {
return preventDefault.indexOf(el) > -1;
}).length >= 1;
if (hasBindedKey) {
loopKeyBindings = defaults.loopKeyEvents;
}
console.log(loopKeyBindings,'~~~loopKeyBindings')
switch (code) {
case loopKeyBindings.toggleLoop:
toggleLoop('toggle');
break;
case loopKeyBindings.loopin:
toggleLoop('loopin');
break;
case loopKeyBindings.loopout:
toggleLoop('loopout');
break;
}
// Escape is handle natively when in full screen
// So we only need to worry about non native
if (!support.fullscreen && plyr.isFullscreen && code === 27) {