New API methods (fixes #77), Fix for non strict mode (fixes #78)

sampotts · May 17, 2015 · 7ccbfad · 7ccbfad
1 parent 91f8a15
commit 7ccbfad
Show file tree

Hide file tree

Showing 6 changed files with 92 additions and 20 deletions.
diff --git a/dist/plyr.js b/dist/plyr.js
diff --git a/docs/error.html b/docs/error.html
@@ -6,7 +6,7 @@
  <meta name="viewport" content="width=device-width, initial-scale=1">
 
  <!-- Docs styles -->
- <link rel="stylesheet" href="//cdn.plyr.io/1.1.5/docs.css">
+ <link rel="stylesheet" href="//cdn.plyr.io/1.1.6/docs.css">
  </head>
  <body>
  <main>

diff --git a/docs/index.html b/docs/index.html
@@ -8,10 +8,10 @@
  <meta name="viewport" content="width=device-width, initial-scale=1">
 
  <!-- Styles -->
- <link rel="stylesheet" href="https://cdn.plyr.io/1.1.5/plyr.css">
+ <link rel="stylesheet" href="https://cdn.plyr.io/1.1.6/plyr.css">
 
  <!-- Docs styles -->
- <link rel="stylesheet" href="https://cdn.plyr.io/1.1.5/docs.css">
+ <link rel="stylesheet" href="https://cdn.plyr.io/1.1.6/docs.css">
  </head>
  <body>
  <header>
@@ -79,13 +79,13 @@ <h1>Plyr</h1>
  b.insertBefore(c, b.childNodes[0]);
  }
  }
- })(document, "https://cdn.plyr.io/1.1.5/sprite.svg");
+ })(document, "https://cdn.plyr.io/1.1.6/sprite.svg");
  </script>
 
  <!-- Plyr core script -->
- <script src="https://cdn.plyr.io/1.1.5/plyr.js"></script>
+ <script src="https://cdn.plyr.io/1.1.6/plyr.js"></script>
 
  <!-- Docs script -->
- <script src="https://cdn.plyr.io/1.1.5/docs.js"></script>
+ <script src="https://cdn.plyr.io/1.1.6/docs.js"></script>
  </body>
 </html>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "plyr",
- "version": "1.1.5",
+ "version": "1.1.6",
  "description": "A simple HTML5 media player using custom controls",
  "homepage": "http://plyr.io",
  "main": "gulpfile.js",

diff --git a/readme.md b/readme.md
@@ -37,7 +37,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.1.5/plyr.js` to `https://cdn.plyr.io/1.1.5/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.1.6/plyr.js` to `https://cdn.plyr.io/1.1.6/plyr.js`
 
 ### Bower
 If bower is your thang, you can grab Plyr using:
@@ -57,11 +57,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.1.5/plyr.css">
-<script src="https://cdn.plyr.io/1.1.5/plyr.js"></script>
+<link rel="stylesheet" href="https://cdn.plyr.io/1.1.6/plyr.css">
+<script src="https://cdn.plyr.io/1.1.6/plyr.js"></script>
 ```
 
-You can also access the `sprite.svg` file at `https://cdn.plyr.io/1.1.5/sprite.svg`.
+You can also access the `sprite.svg` file at `https://cdn.plyr.io/1.1.6/sprite.svg`.
 
 ### CSS
 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. 
@@ -346,6 +346,16 @@ Here's a list of the methods supported:
  <td>String</td>
  <td>Set the poster url. This is supported for the <code>video</code> element only.</td>
  </tr>
+ <tr>
+ <td><code>destroy()</code></td>
+ <td>&mdash;</td>
+ <td>Destroys the plyr UI and any media event listeners, effectively restoring to the previous state before <code>setup()</code> was called.</td>
+ </tr>
+ <tr>
+ <td><code>restore()</code></td>
+ <td>&mdash;</td>
+ <td>Reverses the effects of the <code>destroy()</code> method, restoring the UI and listeners.</td>
+ </tr>
  </tbody>
 </table>
 

diff --git 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
  }
  }