diff options
| author | Chrysa Papadopoulou <papadopoulou.chrysa@gmail.com> | 2017-02-15 17:41:04 +0200 |
|---|---|---|
| committer | Chrysa Papadopoulou <papadopoulou.chrysa@gmail.com> | 2017-02-15 17:41:04 +0200 |
| commit | dcbf59bd8914c23d6d760fffe9605e6b6f4cff15 (patch) | |
| tree | b9b5a3c96af5af05e76f0f54262a02ce12bcf8be /src | |
| parent | 054c243416efa090ec98dcd57d7efd6a6f4baf85 (diff) | |
| download | plyr-dcbf59bd8914c23d6d760fffe9605e6b6f4cff15.tar.lz plyr-dcbf59bd8914c23d6d760fffe9605e6b6f4cff15.tar.xz plyr-dcbf59bd8914c23d6d760fffe9605e6b6f4cff15.zip | |
Colored strip indicating looped area
Diffstat (limited to 'src')
| -rw-r--r-- | src/js/plyr.js | 26 |
1 files changed, 25 insertions, 1 deletions
diff --git a/src/js/plyr.js b/src/js/plyr.js index f44dc4dc..3b4a4efe 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -40,6 +40,8 @@ loop: false, loopin: 0, loopout: null, + loopinPositionPercentage: 0, + loopoutPositionPercentage: 0, seekTime: 10, volume: 10, volumeMin: 0, @@ -98,7 +100,8 @@ progress: { container: '.plyr__progress', buffer: '.plyr__progress--buffer', - played: '.plyr__progress--played' + played: '.plyr__progress--played', + looped: '.plyr__progress-loop' }, captions: '.plyr__captions', currentTime: '.plyr__time--current', @@ -897,6 +900,7 @@ /* beautify ignore:start */ html.push( '<span class="plyr__progress">', + '<div class="plyr__progress-loop"></div>', '<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">', '<progress class="plyr__progress--played" max="100" value="0" role="presentation"></progress>', @@ -2475,16 +2479,20 @@ config.loopout = null; } config.loopin = currentTime; + config.loopinPositionPercentage = plyr.progress.played.value; break; case 'loopout': if (config.loopin >= currentTime) { return; } config.loopout = currentTime; + config.loopoutPositionPercentage = plyr.progress.played.value; break; case 'loopall': config.loopin = 0; config.loopout = plyr.media.duration - 2; + config.loopinPositionPercentage = 0; + config.loopoutPositionPercentage = 100; break; default: config.loopin = 0; @@ -2502,6 +2510,22 @@ 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 |