From ea30ad949407c7bc2a744d03bab4d99da6c2df45 Mon Sep 17 00:00:00 2001 From: Chrysa Papadopoulou Date: Tue, 31 Jan 2017 17:21:33 +0200 Subject: Playback speed control settings --- src/js/plyr.js | 48 ++++++++++++++++++++++++++++++++++++------------ 1 file changed, 36 insertions(+), 12 deletions(-) (limited to 'src/js') diff --git a/src/js/plyr.js b/src/js/plyr.js index c2000234..346bfb7e 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -85,7 +85,8 @@ fullscreen: '[data-plyr="fullscreen"]', settings: '[data-plyr="settings"]', pip: '[data-plyr="pip"]', - airplay: '[data-plyr="airplay"]' + airplay: '[data-plyr="airplay"]', + speed: '[data-plyr="speed"]' }, volume: { input: '[data-plyr="volume"]', @@ -987,7 +988,7 @@ '
  • ', '', '
    • ', '
  • ', @@ -1013,7 +1014,7 @@ '
    • ', '', '', - '', + '', '', '', + '', '', '', '' @@ -1278,6 +1331,35 @@ } } + // Setup Loop + function setupLoop() { + if (!plyr.supported.full) { + return; + } + + if ((plyr.type !== 'audio' || config.fullscreen.allowAudio) && config.fullscreen.enabled) { + // Check for native support + var nativeSupport = support.fullscreen; + + if (nativeSupport || (config.fullscreen.fallback && !inFrame())) { + log((nativeSupport ? 'Native' : 'Fallback') + ' fullscreen enabled'); + + // Add styling hook + toggleClass(plyr.container, config.classes.fullscreen.enabled, true); + } else { + log('Fullscreen not supported and fallback disabled'); + } + + // Toggle state + if (plyr.buttons && plyr.buttons.fullscreen) { + toggleState(plyr.buttons.fullscreen, false); + } + + // Setup focus trap + focusTrap(); + } + } + // Display active caption if it contains text function setActiveCue(track) { // Get the track from the event if needed @@ -1715,7 +1797,11 @@ fullscreen: getElement(config.selectors.buttons.fullscreen), settings: getElement(config.selectors.buttons.settings), pip: getElement(config.selectors.buttons.pip), - speed: document.querySelectorAll(config.selectors.buttons.speed) + speed: document.querySelectorAll(config.selectors.buttons.speed), + loopin: document.querySelectorAll(config.selectors.buttons.loopin), + loopout: document.querySelectorAll(config.selectors.buttons.loopout), + loopall: document.querySelectorAll(config.selectors.buttons.loopall), + loopclear: document.querySelectorAll(config.selectors.buttons.loopclear) }; // Inputs @@ -2410,6 +2496,50 @@ return toggle; } + // Toggle loop + function toggleLoop(toggle) { + if (['loopin', 'loopout', 'loopall'].indexOf(toggle) === -1) { + toggle = 'loopclear'; + } + + var currentTime = Number(plyr.media.currentTime); + + switch(toggle) { + case 'loopin': + if (config.loopout && config.loopout <= currentTime) { + config.loopout = null; + } + config.loopin = currentTime; + break; + case 'loopout': + if (config.loopin >= currentTime) { + return; + } + config.loopout = currentTime; + break; + case 'loopall': + config.loopin = 0; + config.loopout = plyr.media.duration - 2; + break; + default: + config.loopin = 0; + config.loopout = null; + break; + } + + //check if can loop + config.loop = is.number(config.loopin) && is.number(config.loopout); + + var loopin = updateTimeDisplay(config.loopin, document.querySelector('[data-loop__value="loopin"]')); + var loopout = is.number(config.loopout) ? updateTimeDisplay(config.loopout, document.querySelector('[data-loop__value="loopout"]')) : null; + if (config.loop) { + document.querySelector('[data-menu="loop"]').innerHTML = loopin + ' - ' + loopout; + } else { + document.querySelector('[data-menu="loop"]').innerHTML = config.i18n.loopclear; + } + + } + // Speed-up function setSpeed(speed) { // Load speed from storage or default value @@ -2776,6 +2906,36 @@ } } + + // Update volume UI and storage + function updateLoop() { + // Get the current volume + var volume = plyr.media.muted ? 0 : (plyr.media.volume * config.volumeMax); + + // Update the if present + if (plyr.supported.full) { + if (plyr.volume.input) { + plyr.volume.input.value = volume; + } + if (plyr.volume.display) { + plyr.volume.display.value = volume; + } + } + + // Update the volume in storage + updateStorage({ + volume: volume + }); + + // Toggle class if muted + toggleClass(plyr.container, config.classes.muted, (volume === 0)); + + // Update checkbox for mute state + if (plyr.supported.full && plyr.buttons.mute) { + toggleState(plyr.buttons.mute, (volume === 0)); + } + } + // Toggle captions function toggleCaptions(show) { // If there's no full support, or there's no caption toggle @@ -2885,7 +3045,10 @@ } } - // Set values + if (is.number(config.loopin) && is.number(config.loopout) && plyr.media.currentTime >= config.loopout) { + seek(config.loopin); + } + setProgress(progress, value); } @@ -2945,8 +3108,10 @@ plyr.secs = ('0' + plyr.secs).slice(-2); plyr.mins = ('0' + plyr.mins).slice(-2); + var txt = (displayHours ? plyr.hours + ':' : '') + plyr.mins + ':' + plyr.secs; // Render - element.innerHTML = (displayHours ? plyr.hours + ':' : '') + plyr.mins + ':' + plyr.secs; + element.innerHTML = txt; + return txt; } // Show the duration on metadataloaded @@ -3577,6 +3742,20 @@ // Fullscreen proxy(plyr.buttons.fullscreen, 'click', config.listeners.fullscreen, toggleFullscreen); + // Loop + proxy(plyr.buttons.loopall, 'click', config.listeners.loopall, function () { + toggleLoop('loopall'); + }); + proxy(plyr.buttons.loopin, 'click', config.listeners.loopin, function(){ + toggleLoop('loopin'); + }); + proxy(plyr.buttons.loopout, 'click', config.listeners.loopout, function () { + toggleLoop('loopout'); + }); + proxy(plyr.buttons.loopclear, 'click', config.listeners.loopclear, function () { + toggleLoop('loopclear'); + }); + // Handle user exiting fullscreen by escaping etc if (support.fullscreen) { on(document, fullscreen.eventType, toggleFullscreen); @@ -4019,6 +4198,10 @@ // Set playback speed setSpeed(); + + // Set loop + toggleLoop(); + // Reset time display timeUpdate(); @@ -4061,12 +4244,16 @@ isPaused: function() { return plyr.media.paused; }, + isLooping: function() { + return config.loopin && config.loopout; + }, on: function(event, callback) { on(plyr.container, event, callback); return this; }, play: play, pause: pause, + loop: toggleLoop, stop: function() { pause(); seek(); -- cgit v1.2.3 From 1bcdbe4c005968954813783af44dc6240e06e0ed Mon Sep 17 00:00:00 2001 From: Chrysa Papadopoulou Date: Thu, 2 Feb 2017 11:38:08 +0200 Subject: Refactored loop event buttons + on 'No Loop' cleared displayed timing --- src/js/plyr.js | 42 +++++++++++++----------------------------- 1 file changed, 13 insertions(+), 29 deletions(-) (limited to 'src/js') diff --git a/src/js/plyr.js b/src/js/plyr.js index 3b849d4f..903fa88f 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -89,10 +89,7 @@ pip: '[data-plyr="pip"]', airplay: '[data-plyr="airplay"]', speed: '[data-plyr="speed"]', - loopin: '[data-plyr="loopin"]', - loopout: '[data-plyr="loopout"]', - loopall: '[data-plyr="loopall"]', - loopclear: '[data-plyr="loopclear"]', + loop: '[data-plyr="loop"]' }, volume: { input: '[data-plyr="volume"]', @@ -205,10 +202,7 @@ captions: null, fullscreen: null, speed: null, - loopin: null, - loopout: null, - loopall: null, - loopclear: null + loop: null }, // Events to watch on HTML5 media elements events: ['ready', 'ended', 'progress', 'stalled', 'playing', 'waiting', 'canplay', 'canplaythrough', 'loadstart', 'loadeddata', 'loadedmetadata', 'timeupdate', 'volumechange', 'play', 'pause', 'error', 'seeking', 'seeked', 'emptied'], @@ -1133,25 +1127,25 @@ '', '', '
  • ', - '', '
    • ', '
  • ', - '', '
    • ', '
  • ', - '', '
    • ', '
  • ', - '', '
    • ', @@ -1798,10 +1792,7 @@ settings: getElement(config.selectors.buttons.settings), pip: getElement(config.selectors.buttons.pip), speed: document.querySelectorAll(config.selectors.buttons.speed), - loopin: document.querySelectorAll(config.selectors.buttons.loopin), - loopout: document.querySelectorAll(config.selectors.buttons.loopout), - loopall: document.querySelectorAll(config.selectors.buttons.loopall), - loopclear: document.querySelectorAll(config.selectors.buttons.loopclear) + loop: document.querySelectorAll(config.selectors.buttons.loop) }; // Inputs @@ -2529,9 +2520,8 @@ //check if can loop config.loop = is.number(config.loopin) && is.number(config.loopout); - var loopin = updateTimeDisplay(config.loopin, document.querySelector('[data-loop__value="loopin"]')); - var loopout = is.number(config.loopout) ? updateTimeDisplay(config.loopout, document.querySelector('[data-loop__value="loopout"]')) : null; + var loopout = is.number(config.loopout) ? updateTimeDisplay(config.loopout + 2, document.querySelector('[data-loop__value="loopout"]')) : document.querySelector('[data-loop__value="loopout"]').innerHTML = ''; if (config.loop) { document.querySelector('[data-menu="loop"]').innerHTML = loopin + ' - ' + loopout; } else { @@ -3743,17 +3733,11 @@ proxy(plyr.buttons.fullscreen, 'click', config.listeners.fullscreen, toggleFullscreen); // Loop - proxy(plyr.buttons.loopall, 'click', config.listeners.loopall, function () { - toggleLoop('loopall'); - }); - proxy(plyr.buttons.loopin, 'click', config.listeners.loopin, function(){ - toggleLoop('loopin'); - }); - proxy(plyr.buttons.loopout, 'click', config.listeners.loopout, function () { - toggleLoop('loopout'); - }); - proxy(plyr.buttons.loopclear, 'click', config.listeners.loopclear, function () { - toggleLoop('loopclear'); + proxy(plyr.buttons.loop, 'click', config.listeners.loop, function (event) { + var loopValue = event.target.getAttribute('data-loop__value') || event.target.getAttribute('data-loop__type'); + if (['loopin', 'loopout', 'loopall', 'loopclear'].indexOf(loopValue) > -1) { + toggleLoop(loopValue); + } }); // Handle user exiting fullscreen by escaping etc -- cgit v1.2.3 From afcdf17a72ffe8dc8f431765d867b97e0f57cbb1 Mon Sep 17 00:00:00 2001 From: Chrysa Papadopoulou Date: Fri, 3 Feb 2017 14:52:38 +0200 Subject: Removed not needed functions + reverted demo.js to previous --- src/js/plyr.js | 61 +--------------------------------------------------------- 1 file changed, 1 insertion(+), 60 deletions(-) (limited to 'src/js') diff --git a/src/js/plyr.js b/src/js/plyr.js index 903fa88f..88fcd548 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -46,7 +46,7 @@ volumeMax: 10, volumeStep: 1, defaultSpeed: 1.0, - currentSpeed: 1.0, + currentSpeed: 1, speeds: [0.5, 1.0, 1.5, 2.0], duration: null, displayDuration: true, @@ -1325,35 +1325,6 @@ } } - // Setup Loop - function setupLoop() { - if (!plyr.supported.full) { - return; - } - - if ((plyr.type !== 'audio' || config.fullscreen.allowAudio) && config.fullscreen.enabled) { - // Check for native support - var nativeSupport = support.fullscreen; - - if (nativeSupport || (config.fullscreen.fallback && !inFrame())) { - log((nativeSupport ? 'Native' : 'Fallback') + ' fullscreen enabled'); - - // Add styling hook - toggleClass(plyr.container, config.classes.fullscreen.enabled, true); - } else { - log('Fullscreen not supported and fallback disabled'); - } - - // Toggle state - if (plyr.buttons && plyr.buttons.fullscreen) { - toggleState(plyr.buttons.fullscreen, false); - } - - // Setup focus trap - focusTrap(); - } - } - // Display active caption if it contains text function setActiveCue(track) { // Get the track from the event if needed @@ -2896,36 +2867,6 @@ } } - - // Update volume UI and storage - function updateLoop() { - // Get the current volume - var volume = plyr.media.muted ? 0 : (plyr.media.volume * config.volumeMax); - - // Update the if present - if (plyr.supported.full) { - if (plyr.volume.input) { - plyr.volume.input.value = volume; - } - if (plyr.volume.display) { - plyr.volume.display.value = volume; - } - } - - // Update the volume in storage - updateStorage({ - volume: volume - }); - - // Toggle class if muted - toggleClass(plyr.container, config.classes.muted, (volume === 0)); - - // Update checkbox for mute state - if (plyr.supported.full && plyr.buttons.mute) { - toggleState(plyr.buttons.mute, (volume === 0)); - } - } - // Toggle captions function toggleCaptions(show) { // If there's no full support, or there's no caption toggle -- cgit v1.2.3