From 7ccbfad6adf721799869a9b826778199116f63ed Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Sun, 17 May 2015 17:23:09 +1000 Subject: New API methods (fixes #77), Fix for non strict mode (fixes #78) --- src/js/plyr.js | 78 ++++++++++++++++++++++++++++++++++++++++++++++++++++------ 1 file changed, 70 insertions(+), 8 deletions(-) (limited to 'src/js/plyr.js') diff --git a/src/js/plyr.js b/src/js/plyr.js index bf4b3e44..59847333 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -1,6 +1,6 @@ // ========================================================================== // Plyr -// plyr.js v1.1.5 +// plyr.js v1.1.6 // https://github.com/selz/plyr // License: The MIT License (MIT) // ========================================================================== @@ -366,12 +366,28 @@ // append it to the parent. if (sibling) { parent.insertBefore(child, sibling); - } else { + } + else { parent.appendChild(child); } } } + // Unwrap an element + // http://plainjs.com/javascript/manipulation/unwrap-a-dom-element-35/ + function _unwrap(wrapper) { + // Get the element's parent node + var parent = wrapper.parentNode; + + // Move all children out of the element + while (wrapper.firstChild) { + parent.insertBefore(wrapper.firstChild, wrapper); + } + + // Remove the empty element + parent.removeChild(wrapper); + } + // Remove an element function _remove(element) { element.parentNode.removeChild(element); @@ -404,7 +420,7 @@ // Toggle event function _toggleHandler(element, events, callback, toggle) { - events = events.split(" "); + var eventList = events.split(" "); // If a nodelist is passed, call itself on each node if(element instanceof NodeList) { @@ -417,8 +433,8 @@ } // If a single node is passed, bind the event listener - for (var i = 0; i < events.length; i++) { - element[toggle ? "addEventListener" : "removeEventListener"](events[i], callback, false); + for (var i = 0; i < eventList.length; i++) { + element[toggle ? "addEventListener" : "removeEventListener"](eventList[i], callback, false); } } @@ -1512,7 +1528,47 @@ } } + // Destroy an instance + function _destroy() { + // Bail if the element is not initialized + if(!player.init) { + return null; + } + + // Event listeners are removed when elements are removed + // http://stackoverflow.com/questions/12528049/if-a-dom-element-is-removed-are-its-listeners-also-removed-from-memory + + // Remove controls + _remove(_getElement(config.selectors.controls)); + + // If video, we need to remove some more + if(player.type === "video") { + // Remove captions + _remove(_getElement(config.selectors.captions)); + + // Remove video wrapper + _unwrap(player.videoContainer); + } + + // Restore native video controls + player.media.setAttribute("controls", ""); + + // Clone the media element to remove listeners + // http://stackoverflow.com/questions/19469881/javascript-remove-all-event-listeners-of-specific-type + var clone = player.media.cloneNode(true); + player.media.parentNode.replaceChild(clone, player.media); + + // Remove init flag + player.init = false; + } + + // Setup a player function _init() { + // Bail if the element is initialized + if(player.init) { + return null; + } + // Setup the fullscreen api fullscreen = _fullscreen(); @@ -1571,10 +1627,14 @@ } // Successful setup - return true; + player.init = true; } - if(!_init()) { + // Initialize instance + _init(); + + // If init failed, return an empty object + if(!player.init) { return {}; } @@ -1593,7 +1653,9 @@ toggleCaptions: _toggleCaptions, toggleFullscreen: _toggleFullscreen, isFullscreen: function() { return player.isFullscreen || false; }, - support: function(mimeType) { return _supportMime(player, mimeType); } + support: function(mimeType) { return _supportMime(player, mimeType); }, + destroy: _destroy, + restore: _init } } -- cgit v1.2.3 From d627454b2a31042508d9b8545c2b927e3bd5d93d Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Sun, 17 May 2015 17:33:46 +1000 Subject: Restore classname on destroy --- src/js/plyr.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) (limited to 'src/js/plyr.js') diff --git a/src/js/plyr.js b/src/js/plyr.js index 59847333..0200024b 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -1,6 +1,6 @@ // ========================================================================== // Plyr -// plyr.js v1.1.6 +// plyr.js v1.1.7 // https://github.com/selz/plyr // License: The MIT License (MIT) // ========================================================================== @@ -1535,6 +1535,9 @@ return null; } + // Reset container classname + player.container.setAttribute("class", config.selectors.container.replace(".", "")); + // Event listeners are removed when elements are removed // http://stackoverflow.com/questions/12528049/if-a-dom-element-is-removed-are-its-listeners-also-removed-from-memory -- cgit v1.2.3 From ceace2a6789abd525c31933dda9b88df64ff3c39 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Mon, 18 May 2015 13:50:44 +1000 Subject: setVolume() API method improvements (Fixes #83) --- src/js/plyr.js | 63 ++++++++++++++++++++++++++++------------------------------ 1 file changed, 30 insertions(+), 33 deletions(-) (limited to 'src/js/plyr.js') diff --git a/src/js/plyr.js b/src/js/plyr.js index 0200024b..3f5109ec 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -1,6 +1,6 @@ // ========================================================================== // Plyr -// plyr.js v1.1.7 +// plyr.js v1.1.8 // https://github.com/selz/plyr // License: The MIT License (MIT) // ========================================================================== @@ -1146,40 +1146,27 @@ // Set volume function _setVolume(volume) { - // Bail if there's no volume element - if(!player.volume) { - return; - } - - // Use default if needed + // Use default if no value specified if(typeof volume === "undefined") { if(config.storage.enabled && _storage().supported) { volume = window.localStorage[config.storage.key] || config.volume; } else { volume = config.volume; - } + } } + // Maximum is 10 if(volume > 10) { volume = 10; } - - // If the controls are there - if(player.supported.full) { - player.volume.value = volume; + // Minimum is 0 + if(volume < 0) { + volume = 0; } // Set the player volume player.media.volume = parseFloat(volume / 10); - - // Update the UI - _checkMute(); - - // Store the volume in storage - if(config.storage.enabled && _storage().supported) { - window.localStorage.setItem(config.storage.key, volume); - } } // Mute @@ -1189,16 +1176,31 @@ muted = !player.media.muted; } - // If the controls are there - if(player.supported.full) { - player.buttons.mute.checked = muted; - } - // Set mute on the player player.media.muted = muted; + } + + // Update volume UI and storage + function _updateVolume() { + // Get the current volume + var volume = player.media.muted ? 0 : (player.media.volume * 10); + + // Update the if present + if(player.supported.full && player.volume) { + player.volume.value = volume; + } + // Update mute button state + if(player.supported.full && player.buttons.mute) { + player.buttons.mute.checked = player.media.muted; + } - // Update UI - _checkMute(); + // Store the volume in storage + if(config.storage.enabled && _storage().supported) { + window.localStorage.setItem(config.storage.key, volume); + } + + // Toggle class if muted + _toggleClass(player.container, config.classes.muted, volume === 0); } // Toggle captions @@ -1217,11 +1219,6 @@ _toggleClass(player.container, config.classes.captions.active, show); } - // Check mute state - function _checkMute() { - _toggleClass(player.container, config.classes.muted, (player.media.volume === 0 || player.media.muted)); - } - // Check if media is loading function _checkLoading(event) { var loading = (event.type === "waiting"); @@ -1493,7 +1490,7 @@ _on(player.media, "playing", _updateProgress); // Handle native mute - _on(player.media, "volumechange", _checkMute); + _on(player.media, "volumechange", _updateVolume); // Handle native play/pause _on(player.media, "play pause", _checkPlaying); -- cgit v1.2.3 From 19d7522722846ce84075c3769ecad3bea93fcaab Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Mon, 18 May 2015 14:43:45 +1000 Subject: Fixes bug with 1.1.8 volume --- src/js/plyr.js | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) (limited to 'src/js/plyr.js') diff --git a/src/js/plyr.js b/src/js/plyr.js index 3f5109ec..2ac56656 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -1,6 +1,6 @@ // ========================================================================== // Plyr -// plyr.js v1.1.8 +// plyr.js v1.1.9 // https://github.com/selz/plyr // License: The MIT License (MIT) // ========================================================================== @@ -1167,6 +1167,11 @@ // Set the player volume player.media.volume = parseFloat(volume / 10); + + // Toggle muted state + if(player.media.muted && volume > 0) { + _toggleMute(); + } } // Mute @@ -1189,10 +1194,6 @@ if(player.supported.full && player.volume) { player.volume.value = volume; } - // Update mute button state - if(player.supported.full && player.buttons.mute) { - player.buttons.mute.checked = player.media.muted; - } // Store the volume in storage if(config.storage.enabled && _storage().supported) { @@ -1200,7 +1201,8 @@ } // Toggle class if muted - _toggleClass(player.container, config.classes.muted, volume === 0); + _toggleClass(player.container, config.classes.muted, (volume === 0)); + player.buttons.mute.checked = (volume === 0); } // Toggle captions -- cgit v1.2.3 From 224b612ae74fb1579dab1fc7a1e997969d61c595 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Mon, 18 May 2015 14:46:21 +1000 Subject: Bug fix --- src/js/plyr.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) (limited to 'src/js/plyr.js') diff --git a/src/js/plyr.js b/src/js/plyr.js index 2ac56656..2a047c39 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -1202,7 +1202,11 @@ // Toggle class if muted _toggleClass(player.container, config.classes.muted, (volume === 0)); - player.buttons.mute.checked = (volume === 0); + + // Update checkbox for mute state + if(player.supported.full && player.buttons.mute) { + player.buttons.mute.checked = (volume === 0); + } } // Toggle captions -- cgit v1.2.3 From 7161378da108c594e7a1d60ea88543b3d8da347c Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Mon, 18 May 2015 15:10:40 +1000 Subject: Bug fix --- src/js/plyr.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) (limited to 'src/js/plyr.js') diff --git a/src/js/plyr.js b/src/js/plyr.js index 2a047c39..ba3d09b2 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -1,6 +1,6 @@ // ========================================================================== // Plyr -// plyr.js v1.1.9 +// plyr.js v1.1.10 // https://github.com/selz/plyr // License: The MIT License (MIT) // ========================================================================== @@ -1156,6 +1156,8 @@ } } + _log(volume); + // Maximum is 10 if(volume > 10) { volume = 10; @@ -1624,6 +1626,7 @@ // Set volume _setVolume(); + _updateVolume(); // Setup fullscreen _setupFullscreen(); -- cgit v1.2.3 From 4c17f985208c147294cff0f05c39617d13e61efd Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Sun, 7 Jun 2015 23:00:26 +1000 Subject: TogglePlay API method (Fixes #86), Volume border (Fixes #87), Chrome Subs (Fixes #90) --- src/js/plyr.js | 24 +++++++++++++++++++++--- 1 file changed, 21 insertions(+), 3 deletions(-) (limited to 'src/js/plyr.js') diff --git a/src/js/plyr.js b/src/js/plyr.js index ba3d09b2..757bae40 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -1,6 +1,6 @@ // ========================================================================== // Plyr -// plyr.js v1.1.10 +// plyr.js v1.1.11 // https://github.com/selz/plyr // License: The MIT License (MIT) // ========================================================================== @@ -901,13 +901,14 @@ // Enable UI _showCaptions(player); - // If IE 10/11 or Firefox 31+ or Safari 7+, don"t use native captioning (still doesn"t work although they claim it"s now supported) + // Disable unsupported browsers than report false positive if ((player.browser.name === "IE" && player.browser.version === 10) || (player.browser.name === "IE" && player.browser.version === 11) || (player.browser.name === "Firefox" && player.browser.version >= 31) || + (player.browser.name === "Chrome" && player.browser.version === 43) || (player.browser.name === "Safari" && player.browser.version >= 7)) { // Debugging - _log("Detected IE 10/11 or Firefox 31+ or Safari 7+."); + _log("Detected unsupported browser for HTML5 captions. Using fallback."); // Set to false so skips to "manual" captioning player.usingTextTracks = false; @@ -1027,6 +1028,22 @@ player.media.pause(); } + // Toggle playback + function _togglePlay(toggle) { + // Play + if(toggle === true) { + _play(); + } + // Pause + else if(toggle === false) { + _pause(); + } + // True toggle + else { + player.media[player.media.paused ? "play" : "pause"](); + } + } + // Rewind function _rewind(seekTime) { // Use default if needed @@ -1658,6 +1675,7 @@ source: _parseSource, poster: _updatePoster, setVolume: _setVolume, + togglePlay: _togglePlay, toggleMute: _toggleMute, toggleCaptions: _toggleCaptions, toggleFullscreen: _toggleFullscreen, -- cgit v1.2.3 From f398266206e10b945cccdacc7edc4b5eb3308442 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Sun, 7 Jun 2015 23:20:33 +1000 Subject: Chrome Canary Fix --- src/js/plyr.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/js/plyr.js') diff --git a/src/js/plyr.js b/src/js/plyr.js index 757bae40..abec626d 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -905,7 +905,7 @@ if ((player.browser.name === "IE" && player.browser.version === 10) || (player.browser.name === "IE" && player.browser.version === 11) || (player.browser.name === "Firefox" && player.browser.version >= 31) || - (player.browser.name === "Chrome" && player.browser.version === 43) || + (player.browser.name === "Chrome" && player.browser.version >= 43) || (player.browser.name === "Safari" && player.browser.version >= 7)) { // Debugging _log("Detected unsupported browser for HTML5 captions. Using fallback."); -- cgit v1.2.3 From f41854ebe72e4ba44c7b66464205b966f5b2f3d2 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Mon, 8 Jun 2015 21:43:49 +1000 Subject: Minor tweak to hiding controls in fullscreen --- src/js/plyr.js | 52 +++++++++++++++++++++++++++++++++++++--------------- 1 file changed, 37 insertions(+), 15 deletions(-) (limited to 'src/js/plyr.js') diff --git a/src/js/plyr.js b/src/js/plyr.js index abec626d..350c1899 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -1,6 +1,6 @@ // ========================================================================== // Plyr -// plyr.js v1.1.11 +// plyr.js v1.1.13 // https://github.com/selz/plyr // License: The MIT License (MIT) // ========================================================================== @@ -902,11 +902,10 @@ _showCaptions(player); // Disable unsupported browsers than report false positive - if ((player.browser.name === "IE" && player.browser.version === 10) || - (player.browser.name === "IE" && player.browser.version === 11) || - (player.browser.name === "Firefox" && player.browser.version >= 31) || - (player.browser.name === "Chrome" && player.browser.version >= 43) || - (player.browser.name === "Safari" && player.browser.version >= 7)) { + if ((player.browser.name === "IE" && player.browser.version >= 10) || + (player.browser.name === "Firefox" && player.browser.version >= 31) || + (player.browser.name === "Chrome" && player.browser.version >= 43) || + (player.browser.name === "Safari" && player.browser.version >= 7)) { // Debugging _log("Detected unsupported browser for HTML5 captions. Using fallback."); @@ -1147,9 +1146,39 @@ // Set class hook _toggleClass(player.container, config.classes.fullscreen.active, player.isFullscreen); - // Remove hover class because mouseleave doesn't occur - if (player.isFullscreen) { + // Toggle controls visibility based on mouse movement and location + var hoverTimer, isMouseOver = false; + + // Show the player controls + function _showControls() { + // Set shown class + _toggleClass(player.controls, config.classes.hover, true); + + // Clear timer every movement + window.clearTimeout(hoverTimer); + + // If the mouse is not over the controls, set a timeout to hide them + if(!isMouseOver) { + hoverTimer = window.setTimeout(function() { + _toggleClass(player.controls, config.classes.hover, false); + }, 2000); + } + } + + // Check mouse is over the controls + function _setMouseOver (event) { + isMouseOver = (event.type === "mouseenter"); + } + + if(config.fullscreen.hideControls) { + // Hide on entering full screen _toggleClass(player.controls, config.classes.hover, false); + + // Keep an eye on the mouse location in relation to controls + _toggleHandler(player.controls, "mouseenter mouseleave", _setMouseOver, player.isFullscreen); + + // Show the controls on mouse move + _toggleHandler(player.container, "mousemove", _showControls, player.isFullscreen); } } @@ -1541,13 +1570,6 @@ } }); } - - // Bind to mouse hover - if(config.fullscreen.hideControls) { - _on(player.controls, "mouseenter mouseleave", function(event) { - _toggleClass(player.controls, config.classes.hover, (event.type === "mouseenter")); - }); - } } // Destroy an instance -- cgit v1.2.3 From 73c3888309bee1bfbf4f76d87c1e3e39c07301bb Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Mon, 8 Jun 2015 21:50:04 +1000 Subject: Removed log --- src/js/plyr.js | 2 -- 1 file changed, 2 deletions(-) (limited to 'src/js/plyr.js') diff --git a/src/js/plyr.js b/src/js/plyr.js index 350c1899..adb35c12 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -1202,8 +1202,6 @@ } } - _log(volume); - // Maximum is 10 if(volume > 10) { volume = 10; -- cgit v1.2.3