ProximaEntertainment/plyr
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Colored strip indicating looped area

Browse Source
This commit is contained in:
Chrysa Papadopoulou 2017-02-15 17:41:04 +02:00
parent 054c243416
commit dcbf59bd89
2 changed files with 27 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
dist/plyr.js vendored
View File

File diff suppressed because one or more lines are too long

26
src/js/plyr.js
View File

@ -40,6 +40,8 @@
loop: false, loop: false,
loopin: 0, loopin: 0,
loopout: null, loopout: null,
loopinPositionPercentage: 0,
loopoutPositionPercentage: 0,
seekTime: 10, seekTime: 10,
volume: 10, volume: 10,
volumeMin: 0, volumeMin: 0,
@ -98,7 +100,8 @@
progress: { progress: {
container: '.plyr__progress', container: '.plyr__progress',
buffer: '.plyr__progress--buffer', buffer: '.plyr__progress--buffer',
played: '.plyr__progress--played' played: '.plyr__progress--played',
looped: '.plyr__progress-loop'
}, },
captions: '.plyr__captions', captions: '.plyr__captions',
currentTime: '.plyr__time--current', currentTime: '.plyr__time--current',
@ -897,6 +900,7 @@
/* beautify ignore:start */ /* beautify ignore:start */
html.push( html.push(
'<span class="plyr__progress">', '<span class="plyr__progress">',
'<div class="plyr__progress-loop"></div>',
'<label for="seek-{id}" class="plyr__sr-only">Seek</label>', '<label for="seek-{id}" class="plyr__sr-only">Seek</label>',
'<input id="seek-{id}" class="plyr__progress--seek" type="range" min="0" max="100" step="0.1" value="0" data-plyr="seek">', '<input id="seek-{id}" class="plyr__progress--seek" type="range" min="0" max="100" step="0.1" value="0" data-plyr="seek">',
'<progress class="plyr__progress--played" max="100" value="0" role="presentation"></progress>', '<progress class="plyr__progress--played" max="100" value="0" role="presentation"></progress>',
@ -2475,16 +2479,20 @@
config.loopout = null; config.loopout = null;
} }
config.loopin = currentTime; config.loopin = currentTime;
config.loopinPositionPercentage = plyr.progress.played.value;
break; break;
case 'loopout': case 'loopout':
if (config.loopin >= currentTime) { if (config.loopin >= currentTime) {
return; return;
} }
config.loopout = currentTime; config.loopout = currentTime;
config.loopoutPositionPercentage = plyr.progress.played.value;
break; break;
case 'loopall': case 'loopall':
config.loopin = 0; config.loopin = 0;
config.loopout = plyr.media.duration - 2; config.loopout = plyr.media.duration - 2;
config.loopinPositionPercentage = 0;
config.loopoutPositionPercentage = 100;
break; break;
default: default:
config.loopin = 0; config.loopin = 0;
@ -2502,6 +2510,22 @@
document.querySelector('[data-menu="loop"]').innerHTML = config.i18n.loopclear; document.querySelector('[data-menu="loop"]').innerHTML = config.i18n.loopclear;
} }
displayLoopBar();
}
function displayLoopBar() {
if (config.loop) {
getElement(config.selectors.progress.looped).style.position = 'absolute';
getElement(config.selectors.progress.looped).style.left = config.loopinPositionPercentage + '%';
getElement(config.selectors.progress.looped).style.width = (config.loopoutPositionPercentage - config.loopinPositionPercentage) + '%';
getElement(config.selectors.progress.looped).style.background = '#ffbb00';
getElement(config.selectors.progress.looped).style.height = '3px';
getElement(config.selectors.progress.looped).style.top = '3px';
getElement(config.selectors.progress.looped).style['border-radius'] = '100px';
} else {
getElement(config.selectors.progress.looped).style.width = '0px';
}
} }
// Speed-up // Speed-up