Fix for event listeners being duplicated on source change

changelog.md

@@ -1,5 +1,8 @@
 # Changelog
 
+## v1.5.1
+- Fix for event listeners being duplicated on source change 
+
 # v1.5.0
 - Vimeo support (fixes #8)
 - New options for initialization (you can now pass a selector, HTMLElement or NodeList) (fixes #118)

docs/src/js/docs.js

@@ -33,6 +33,10 @@ shr.setup({
  buttons[i].addEventListener('click', newSource);
  }
 
+ window.addEventListener('popstate', function(event) {
+ console.log(event);
+ });
+
  function toggleClass(element, className, state) {
  if (element) {
  if (element.classList) {
@@ -113,6 +117,10 @@ shr.setup({
  break;
  }
 
+ if (window.history && window.history.pushState) {
+ history.pushState({ 'type': type }, '', '#' + type);
+ }
+
  for (var x = buttons.length - 1; x >= 0; x--) {
  toggleClass(buttons[x].parentElement, 'active', false);
  }

package.json

@@ -1,6 +1,6 @@
 {
  "name": "plyr",
- "version": "1.5.0",
+ "version": "1.5.1",
  "description": "A simple HTML5 media player using custom controls",
  "homepage": "http://plyr.io",
  "main": "gulpfile.js",

readme.md

@@ -39,7 +39,7 @@ If you have any cool ideas or features, please let me know by [creating an issue
 
 Check `docs/index.html` and `docs/dist/docs.js` for an example setup.
 
-**Heads up:** the example `index.html` file needs to be served from a webserver (such as Apache, Nginx, IIS or similar) unless you change the file sources to include http or https. e.g. change `//cdn.plyr.io/1.5.0/plyr.js` to `https://cdn.plyr.io/1.5.0/plyr.js`
+**Heads up:** the example `index.html` file needs to be served from a webserver (such as Apache, Nginx, IIS or similar) unless you change the file sources to include http or https. e.g. change `//cdn.plyr.io/1.5.1/plyr.js` to `https://cdn.plyr.io/1.5.1/plyr.js`
 
 ### Bower
 If bower is your thang, you can grab Plyr using:
@@ -59,11 +59,11 @@ More info is on [npm](https://www.npmjs.com/package/ember-cli-plyr) and [GitHub]
 If you want to use our CDN, you can use the following:
 
 ```html
-<link rel="stylesheet" href="https://cdn.plyr.io/1.5.0/plyr.css">
-<script src="https://cdn.plyr.io/1.5.0/plyr.js"></script>
+<link rel="stylesheet" href="https://cdn.plyr.io/1.5.1/plyr.css">
+<script src="https://cdn.plyr.io/1.5.1/plyr.js"></script>
 ```
 
-You can also access the `sprite.svg` file at `https://cdn.plyr.io/1.5.0/sprite.svg`.
+You can also access the `sprite.svg` file at `https://cdn.plyr.io/1.5.1/sprite.svg`.
 
 ### CSS & Styling
 If you want to use the default css, add the `plyr.css` file from `/dist` into your head, or even better use `plyr.less` or `plyr.sass` file included in `/src` in your build to save a request.
@@ -155,7 +155,7 @@ More info on CORS here:
 Here's an example of a default setup:
 
 ```html
-<script src="https://cdn.plyr.io/1.5.0/plyr.js"></script>
+<script src="https://cdn.plyr.io/1.5.1/plyr.js"></script>
 <script>plyr.setup();</script>
 ```
 

src/js/plyr.js

@@ -2196,13 +2196,15 @@
  }
  }
 
- // Listen for events
- function _listeners() {
+ // Listen for control events
+ function _controlListeners() {
  // IE doesn't support input event, so we fallback to change
  var inputEvent = (plyr.browser.name == 'IE' ? 'change' : 'input');
 
  // Click play/pause helper
- function _togglePlay(play) {
+ function _togglePlay() {
+ var play = plyr.media.paused;
+
  // Toggle playback
  if (play) {
  _play();
@@ -2264,10 +2266,10 @@
  }
 
  // Play
- _proxyHandler(plyr.buttons.play, 'click', config.handlers.play, function() { _togglePlay(true); });
+ _proxyHandler(plyr.buttons.play, 'click', config.handlers.play, _togglePlay);
 
  // Pause
- _proxyHandler(plyr.buttons.pause, 'click', config.handlers.pause, function() { _togglePlay(); });
+ _proxyHandler(plyr.buttons.pause, 'click', config.handlers.pause, _togglePlay);
 
  // Restart
  _proxyHandler(plyr.buttons.restart, 'click', config.handlers.restart, _seek);
@@ -2297,6 +2299,28 @@
  _on(document, fullscreen.fullScreenEventName, _toggleFullscreen);
  }
 
+ // Captions
+ _on(plyr.buttons.captions, 'click', _toggleCaptions);
+
+ // Click video
+ if (plyr.type === 'video' && config.click) {
+ _on(plyr.videoContainer, 'click', function() {
+ if (plyr.media.paused) {
+ _play();
+ }
+ else if (plyr.media.ended) {
+ _seek();
+ _play();
+ }
+ else {
+ _pause();
+ }
+ });
+ }
+ }
+
+ // Listen for media events
+ function _mediaListeners() {
  // Time change on media
  _on(plyr.media, 'timeupdate seeking', _timeUpdate);
 
@@ -2306,9 +2330,6 @@
  // Display duration
  _on(plyr.media, 'loadedmetadata', _displayDuration);
 
- // Captions
- _on(plyr.buttons.captions, 'click', _toggleCaptions);
-
  // Handle the media finishing
  _on(plyr.media, 'ended', function() {
  // Clear
@@ -2331,22 +2352,6 @@
 
  // Loading
  _on(plyr.media, 'waiting canplay seeked', _checkLoading);
-
- // Click video
- if (plyr.type === 'video' && config.click) {
- _on(plyr.videoContainer, 'click', function() {
- if (plyr.media.paused) {
- _play();
- }
- else if (plyr.media.ended) {
- _seek();
- _play();
- }
- else {
- _pause();
- }
- });
- }
  }
 
  // Destroy an instance
@@ -2482,26 +2487,32 @@
  return;
  }
 
- // Inject custom controls
- if (!_getElements(config.selectors.controls.wrapper).length) {
+ // Inject custom controls if not present
+ var controlsMissing = !_getElements(config.selectors.controls.wrapper).length;
+ if (controlsMissing) {
  // Inject custom controls
  _injectControls();
  }
 
- // Remove native controls
- _toggleControls();
-
  // Find the elements
  if (!_findElements()) {
  return;
  }
 
+ // If the controls are injected, re-bind listeners for controls
+ if (controlsMissing) {
+ _controlListeners();
+ }
+
+ // Media element listeners
+ _mediaListeners();
+
+ // Remove native controls
+ _toggleControls();
+
  // Setup fullscreen
  _setupFullscreen();
 
- // Listeners
- _listeners();
-
  // Captions
  _setupCaptions();