videojs-playlist-ui - npm Package Compare versions

Comparing version 3.2.0 to 3.2.1

CHANGELOG.md

@@ -0,1 +1,8 @@
+<a name="3.2.1"></a>
+## [3.2.1](https://github.com/brightcove/videojs-playlist-ui/compare/v3.2.0...v3.2.1) (2017-11-29)
+
+### Bug Fixes
+
+* Do not concatenate playlist items if the plugin is re-initialized. ([#53](https://github.com/brightcove/videojs-playlist-ui/issues/53)) ([7953ad6](https://github.com/brightcove/videojs-playlist-ui/commit/7953ad6))
+
 <a name="3.2.0"></a>
@@ -2,0 +9,0 @@ # [3.2.0](https://github.com/brightcove/videojs-playlist-ui/compare/v3.1.0...v3.2.0) (2017-11-29)

dist/videojs-playlist-ui.cjs.js

@@ -622,2 +622,30 @@ 'use strict';
 
+  // If the player is already using this plugin, remove the pre-existing
+  // PlaylistMenu, but retain the element and its location in the DOM because
+  // it will be re-used.
+  if (player.playlistMenu) {
+    var el = player.playlistMenu.el();
+
+    // Catch cases where the menu may have been disposed elsewhere or the
+    // element removed from the DOM.
+    if (el) {
+      var parentNode = el.parentNode;
+      var nextSibling = el.nextSibling;
+
+      // Disposing the menu will remove `el` from the DOM, but we need to
+      // empty it ourselves to be sure.
+      player.playlistMenu.dispose();
+      dom.emptyEl(el);
+
+      // Put the element back in its place.
+      if (nextSibling) {
+        parentNode.insertBefore(el, nextSibling);
+      } else {
+        parentNode.appendChild(el);
+      }
+
+      options.el = el;
+    }
+  }
+
   if (!dom.isEl(options.el)) {
@@ -624,0 +652,0 @@ options.el = findRoot(options.className);

dist/videojs-playlist-ui.es.js

@@ -618,2 +618,30 @@ import videojs from 'video.js';
 
+  // If the player is already using this plugin, remove the pre-existing
+  // PlaylistMenu, but retain the element and its location in the DOM because
+  // it will be re-used.
+  if (player.playlistMenu) {
+    var el = player.playlistMenu.el();
+
+    // Catch cases where the menu may have been disposed elsewhere or the
+    // element removed from the DOM.
+    if (el) {
+      var parentNode = el.parentNode;
+      var nextSibling = el.nextSibling;
+
+      // Disposing the menu will remove `el` from the DOM, but we need to
+      // empty it ourselves to be sure.
+      player.playlistMenu.dispose();
+      dom.emptyEl(el);
+
+      // Put the element back in its place.
+      if (nextSibling) {
+        parentNode.insertBefore(el, nextSibling);
+      } else {
+        parentNode.appendChild(el);
+      }
+
+      options.el = el;
+    }
+  }
+
   if (!dom.isEl(options.el)) {
@@ -620,0 +648,0 @@ options.el = findRoot(options.className);

dist/videojs-playlist-ui.js

 /**
  * videojs-playlist-ui
- * @version 3.2.0
+ * @version 3.2.1
  * @copyright 2017 Brightcove, Inc.
@@ -630,2 +630,30 @@ * @license Apache-2.0
 
+  // If the player is already using this plugin, remove the pre-existing
+  // PlaylistMenu, but retain the element and its location in the DOM because
+  // it will be re-used.
+  if (player.playlistMenu) {
+    var el = player.playlistMenu.el();
+
+    // Catch cases where the menu may have been disposed elsewhere or the
+    // element removed from the DOM.
+    if (el) {
+      var parentNode = el.parentNode;
+      var nextSibling = el.nextSibling;
+
+      // Disposing the menu will remove `el` from the DOM, but we need to
+      // empty it ourselves to be sure.
+      player.playlistMenu.dispose();
+      dom.emptyEl(el);
+
+      // Put the element back in its place.
+      if (nextSibling) {
+        parentNode.insertBefore(el, nextSibling);
+      } else {
+        parentNode.appendChild(el);
+      }
+
+      options.el = el;
+    }
+  }
+
   if (!dom.isEl(options.el)) {
@@ -632,0 +660,0 @@ options.el = findRoot(options.className);

dist/videojs-playlist-ui.min.js

 /**
  * videojs-playlist-ui
- * @version 3.2.0
+ * @version 3.2.1
  * @copyright 2017 Brightcove, Inc.
  * @license Apache-2.0
  */
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("video.js")):"function"==typeof define&&define.amd?define(["video.js"],t):e.videojsPlaylistUi=t(e.videojs)}(this,function(e){"use strict";e=e&&e.hasOwnProperty("default")?e["default"]:e;var t,i="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{},n={},l=(Object.freeze||Object)({"default":n}),s=l&&n||l,a=void 0!==i?i:"undefined"!=typeof window?window:{};"undefined"!=typeof document?t=document:(t=a["__GLOBAL_DOCUMENT_CACHE@4"])||(t=a["__GLOBAL_DOCUMENT_CACHE@4"]=s);var r=t,o=(function(){function e(e){this.value=e}function t(t){function i(l,s){try{var a=t[l](s),r=a.value;r instanceof e?Promise.resolve(r.value).then(function(e){i("next",e)},function(e){i("throw",e)}):n(a.done?"return":"normal",a.value)}catch(o){n("throw",o)}}function n(e,t){switch(e){case"return":l.resolve({value:t,done:!0});break;case"throw":l.reject(t);break;default:l.resolve({value:t,done:!1})}(l=l.next)?i(l.key,l.arg):s=null}var l,s;this._invoke=function(e,t){return new Promise(function(n,a){var r={key:e,arg:t,resolve:n,reject:a,next:null};s?s=s.next=r:(l=s=r,i(e,t))})},"function"!=typeof t["return"]&&(this["return"]=undefined)}"function"==typeof Symbol&&Symbol.asyncIterator&&(t.prototype[Symbol.asyncIterator]=function(){return this}),t.prototype.next=function(e){return this._invoke("next",e)},t.prototype["throw"]=function(e){return this._invoke("throw",e)},t.prototype["return"]=function(e){return this._invoke("return",e)}}(),function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}),p=function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)},u=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t},c=e.dom||e,d=e.registerPlugin||e.plugin,h={className:"vjs-playlist",playOnSelect:!1,supportsCssPointerEvents:function(){var e=r.createElement("x");return e.style.cssText="pointer-events:auto","auto"===e.style.pointerEvents}()},y=function(e){e.addClass("vjs-selected")},f=function(e){e.removeClass("vjs-selected"),e.thumbnail&&c.removeClass(e.thumbnail,"vjs-playlist-now-playing")},m=function(e){e.addClass("vjs-up-next")},v=function(e){e.removeClass("vjs-up-next")},w=e.getComponent("Component"),C=function(t){function i(e,n,l){if(o(this,i),!n.item)throw new Error("Cannot construct a PlaylistMenuItem without an item option");var s=u(this,t.call(this,e,n));return s.item=n.item,s.playOnSelect=l.playOnSelect,s.emitTapEvents(),s.on(["click","tap"],s.switchPlaylistItem_),s.on("keydown",s.handleKeyDown_),s}return p(i,t),i.prototype.handleKeyDown_=function(e){13!==e.which&&32!==e.which||this.switchPlaylistItem_()},i.prototype.switchPlaylistItem_=function(e){this.player_.playlist.currentItem(function(e,t){for(var i=0,n=e.length;i<n;i++)if(e[i]===t)return i;return-1}(this.player_.playlist(),this.item)),this.playOnSelect&&this.player_.play()},i.prototype.createEl=function(){var t=r.createElement("li"),i=this.options_.item;if(t.className="vjs-playlist-item",t.setAttribute("tabIndex",0),this.thumbnail=function(e){if(!e){var t=r.createElement("div");return t.className="vjs-playlist-thumbnail vjs-playlist-thumbnail-placeholder",t}var i=r.createElement("picture");if(i.className="vjs-playlist-thumbnail","string"==typeof e){var n=r.createElement("img");n.src=e,n.alt="",i.appendChild(n)}else{for(var l=0;l<e.length-1;l++){var s=e[l],a=r.createElement("source");for(var o in s)a[o]=s[o];i.appendChild(a)}var p=e[e.length-1],u=r.createElement("img");u.alt="";for(var c in p)u[c]=p[c];i.appendChild(u)}return i}(i.thumbnail),t.appendChild(this.thumbnail),i.duration){var n=r.createElement("time"),l=e.formatTime(i.duration);n.className="vjs-playlist-duration",n.setAttribute("datetime","PT0H0M"+i.duration+"S"),n.appendChild(r.createTextNode(l)),t.appendChild(n)}var s=r.createElement("span"),a=this.localize("Now Playing");s.className="vjs-playlist-now-playing-text",s.appendChild(r.createTextNode(a)),s.setAttribute("title",a),this.thumbnail.appendChild(s);var o=r.createElement("div");o.className="vjs-playlist-title-container",this.thumbnail.appendChild(o);var p=r.createElement("span"),u=this.localize("Up Next");p.className="vjs-up-next-text",p.appendChild(r.createTextNode(u)),p.setAttribute("title",u),o.appendChild(p);var c=r.createElement("cite"),d=i.name||this.localize("Untitled Video");return c.className="vjs-playlist-name",c.appendChild(r.createTextNode(d)),c.setAttribute("title",d),o.appendChild(c),t},i}(w),j=function(t){function i(n,l){if(o(this,i),!n.playlist)throw new Error("videojs-playlist is required for the playlist component");var s=u(this,t.call(this,n,l));return s.items=[],l.supportsCssPointerEvents&&s.addClass("vjs-csspointerevents"),s.createPlaylist_(),e.browser.TOUCH_ENABLED||s.addClass("vjs-mouse"),n.on(["loadstart","playlistchange","playlistsorted"],function(e){s.update()}),n.on("adstart",function(){s.addClass("vjs-ad-playing")}),n.on("adend",function(){s.removeClass("vjs-ad-playing")}),s}return p(i,t),i.prototype.createEl=function(){return c.createEl("div",{className:this.options_.className})},i.prototype.createPlaylist_=function(){var e=this.player_.playlist()||[],t=this.el_.querySelector(".vjs-playlist-item-list"),i=this.el_.querySelector(".vjs-playlist-ad-overlay");t||((t=r.createElement("ol")).className="vjs-playlist-item-list",this.el_.appendChild(t));for(var n=0;n<this.items.length;n++)t.removeChild(this.items[n].el_);this.items.length=0;for(var l=0;l<e.length;l++){var s=new C(this.player_,{item:e[l]},this.options_);this.items.push(s),t.appendChild(s.el_)}i?t.appendChild(i):((i=r.createElement("li")).className="vjs-playlist-ad-overlay",t.appendChild(i));var a=this.player_.playlist.currentItem();if(this.items.length&&a>=0){y(this.items[a]);var o=this.items[a].$(".vjs-playlist-thumbnail");o&&c.addClass(o,"vjs-playlist-now-playing")}},i.prototype.update=function(){var e=this.player_.playlist();if(this.items.length===e.length){for(var t=0;t<this.items.length;t++)if(this.items[t].item!==e[t])return void this.createPlaylist_();for(var i=this.player_.playlist.currentItem(),n=0;n<this.items.length;n++){var l=this.items[n];n===i?(y(l),r.activeElement!==l.el()&&c.addClass(l.thumbnail,"vjs-playlist-now-playing"),v(l)):n===i+1?(f(l),m(l)):(f(l),v(l))}}else this.createPlaylist_()},i}(w),_=function(e){for(var t=0;t<e.childNodes.length;t++)if(c.isEl(e.childNodes[t]))return!0;return!1},b=function(t){if(!this.playlist)throw new Error("videojs-playlist plugin is required by the videojs-playlist-ui plugin");c.isEl(t)&&(e.log.warn('videojs-playlist-ui: Passing an element directly to playlistUi() is deprecated, use the "el" option instead!'),t={el:t}),t=e.mergeOptions(h,t),c.isEl(t.el)||(t.el=function(e){for(var t=r.querySelectorAll("."+e),i=void 0,n=0;n<t.length;n++)if(!_(t[n])){i=t[n];break}return i}(t.className)),this.playlistMenu=new j(this,t)};return e.registerComponent("PlaylistMenu",j),e.registerComponent("PlaylistMenuItem",C),d("playlistUi",b),b});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("video.js")):"function"==typeof define&&define.amd?define(["video.js"],t):e.videojsPlaylistUi=t(e.videojs)}(this,function(e){"use strict";e=e&&e.hasOwnProperty("default")?e["default"]:e;var t,i="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{},n={},l=(Object.freeze||Object)({"default":n}),s=l&&n||l,a=void 0!==i?i:"undefined"!=typeof window?window:{};"undefined"!=typeof document?t=document:(t=a["__GLOBAL_DOCUMENT_CACHE@4"])||(t=a["__GLOBAL_DOCUMENT_CACHE@4"]=s);var r=t,o=(function(){function e(e){this.value=e}function t(t){function i(l,s){try{var a=t[l](s),r=a.value;r instanceof e?Promise.resolve(r.value).then(function(e){i("next",e)},function(e){i("throw",e)}):n(a.done?"return":"normal",a.value)}catch(o){n("throw",o)}}function n(e,t){switch(e){case"return":l.resolve({value:t,done:!0});break;case"throw":l.reject(t);break;default:l.resolve({value:t,done:!1})}(l=l.next)?i(l.key,l.arg):s=null}var l,s;this._invoke=function(e,t){return new Promise(function(n,a){var r={key:e,arg:t,resolve:n,reject:a,next:null};s?s=s.next=r:(l=s=r,i(e,t))})},"function"!=typeof t["return"]&&(this["return"]=undefined)}"function"==typeof Symbol&&Symbol.asyncIterator&&(t.prototype[Symbol.asyncIterator]=function(){return this}),t.prototype.next=function(e){return this._invoke("next",e)},t.prototype["throw"]=function(e){return this._invoke("throw",e)},t.prototype["return"]=function(e){return this._invoke("return",e)}}(),function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}),p=function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)},u=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t},c=e.dom||e,d=e.registerPlugin||e.plugin,h={className:"vjs-playlist",playOnSelect:!1,supportsCssPointerEvents:function(){var e=r.createElement("x");return e.style.cssText="pointer-events:auto","auto"===e.style.pointerEvents}()},y=function(e){e.addClass("vjs-selected")},f=function(e){e.removeClass("vjs-selected"),e.thumbnail&&c.removeClass(e.thumbnail,"vjs-playlist-now-playing")},m=function(e){e.addClass("vjs-up-next")},v=function(e){e.removeClass("vjs-up-next")},w=e.getComponent("Component"),C=function(t){function i(e,n,l){if(o(this,i),!n.item)throw new Error("Cannot construct a PlaylistMenuItem without an item option");var s=u(this,t.call(this,e,n));return s.item=n.item,s.playOnSelect=l.playOnSelect,s.emitTapEvents(),s.on(["click","tap"],s.switchPlaylistItem_),s.on("keydown",s.handleKeyDown_),s}return p(i,t),i.prototype.handleKeyDown_=function(e){13!==e.which&&32!==e.which||this.switchPlaylistItem_()},i.prototype.switchPlaylistItem_=function(e){this.player_.playlist.currentItem(function(e,t){for(var i=0,n=e.length;i<n;i++)if(e[i]===t)return i;return-1}(this.player_.playlist(),this.item)),this.playOnSelect&&this.player_.play()},i.prototype.createEl=function(){var t=r.createElement("li"),i=this.options_.item;if(t.className="vjs-playlist-item",t.setAttribute("tabIndex",0),this.thumbnail=function(e){if(!e){var t=r.createElement("div");return t.className="vjs-playlist-thumbnail vjs-playlist-thumbnail-placeholder",t}var i=r.createElement("picture");if(i.className="vjs-playlist-thumbnail","string"==typeof e){var n=r.createElement("img");n.src=e,n.alt="",i.appendChild(n)}else{for(var l=0;l<e.length-1;l++){var s=e[l],a=r.createElement("source");for(var o in s)a[o]=s[o];i.appendChild(a)}var p=e[e.length-1],u=r.createElement("img");u.alt="";for(var c in p)u[c]=p[c];i.appendChild(u)}return i}(i.thumbnail),t.appendChild(this.thumbnail),i.duration){var n=r.createElement("time"),l=e.formatTime(i.duration);n.className="vjs-playlist-duration",n.setAttribute("datetime","PT0H0M"+i.duration+"S"),n.appendChild(r.createTextNode(l)),t.appendChild(n)}var s=r.createElement("span"),a=this.localize("Now Playing");s.className="vjs-playlist-now-playing-text",s.appendChild(r.createTextNode(a)),s.setAttribute("title",a),this.thumbnail.appendChild(s);var o=r.createElement("div");o.className="vjs-playlist-title-container",this.thumbnail.appendChild(o);var p=r.createElement("span"),u=this.localize("Up Next");p.className="vjs-up-next-text",p.appendChild(r.createTextNode(u)),p.setAttribute("title",u),o.appendChild(p);var c=r.createElement("cite"),d=i.name||this.localize("Untitled Video");return c.className="vjs-playlist-name",c.appendChild(r.createTextNode(d)),c.setAttribute("title",d),o.appendChild(c),t},i}(w),j=function(t){function i(n,l){if(o(this,i),!n.playlist)throw new Error("videojs-playlist is required for the playlist component");var s=u(this,t.call(this,n,l));return s.items=[],l.supportsCssPointerEvents&&s.addClass("vjs-csspointerevents"),s.createPlaylist_(),e.browser.TOUCH_ENABLED||s.addClass("vjs-mouse"),n.on(["loadstart","playlistchange","playlistsorted"],function(e){s.update()}),n.on("adstart",function(){s.addClass("vjs-ad-playing")}),n.on("adend",function(){s.removeClass("vjs-ad-playing")}),s}return p(i,t),i.prototype.createEl=function(){return c.createEl("div",{className:this.options_.className})},i.prototype.createPlaylist_=function(){var e=this.player_.playlist()||[],t=this.el_.querySelector(".vjs-playlist-item-list"),i=this.el_.querySelector(".vjs-playlist-ad-overlay");t||((t=r.createElement("ol")).className="vjs-playlist-item-list",this.el_.appendChild(t));for(var n=0;n<this.items.length;n++)t.removeChild(this.items[n].el_);this.items.length=0;for(var l=0;l<e.length;l++){var s=new C(this.player_,{item:e[l]},this.options_);this.items.push(s),t.appendChild(s.el_)}i?t.appendChild(i):((i=r.createElement("li")).className="vjs-playlist-ad-overlay",t.appendChild(i));var a=this.player_.playlist.currentItem();if(this.items.length&&a>=0){y(this.items[a]);var o=this.items[a].$(".vjs-playlist-thumbnail");o&&c.addClass(o,"vjs-playlist-now-playing")}},i.prototype.update=function(){var e=this.player_.playlist();if(this.items.length===e.length){for(var t=0;t<this.items.length;t++)if(this.items[t].item!==e[t])return void this.createPlaylist_();for(var i=this.player_.playlist.currentItem(),n=0;n<this.items.length;n++){var l=this.items[n];n===i?(y(l),r.activeElement!==l.el()&&c.addClass(l.thumbnail,"vjs-playlist-now-playing"),v(l)):n===i+1?(f(l),m(l)):(f(l),v(l))}}else this.createPlaylist_()},i}(w),b=function(e){for(var t=0;t<e.childNodes.length;t++)if(c.isEl(e.childNodes[t]))return!0;return!1},_=function(t){if(!this.playlist)throw new Error("videojs-playlist plugin is required by the videojs-playlist-ui plugin");if(c.isEl(t)&&(e.log.warn('videojs-playlist-ui: Passing an element directly to playlistUi() is deprecated, use the "el" option instead!'),t={el:t}),t=e.mergeOptions(h,t),this.playlistMenu){var i=this.playlistMenu.el();if(i){var n=i.parentNode,l=i.nextSibling;this.playlistMenu.dispose(),c.emptyEl(i),l?n.insertBefore(i,l):n.appendChild(i),t.el=i}}c.isEl(t.el)||(t.el=function(e){for(var t=r.querySelectorAll("."+e),i=void 0,n=0;n<t.length;n++)if(!b(t[n])){i=t[n];break}return i}(t.className)),this.playlistMenu=new j(this,t)};return e.registerComponent("PlaylistMenu",j),e.registerComponent("PlaylistMenuItem",C),d("playlistUi",_),_});

package.json

 {
   "name": "videojs-playlist-ui",
-  "version": "3.2.0",
+  "version": "3.2.1",
   "author": "Brightcove, Inc.",
@@ -5,0 +5,0 @@ "description": "A playlist video picker for video.js",

src/plugin.js

@@ -407,2 +407,30 @@ import document from 'global/document';
 
+  // If the player is already using this plugin, remove the pre-existing
+  // PlaylistMenu, but retain the element and its location in the DOM because
+  // it will be re-used.
+  if (player.playlistMenu) {
+    const el = player.playlistMenu.el();
+
+    // Catch cases where the menu may have been disposed elsewhere or the
+    // element removed from the DOM.
+    if (el) {
+      const parentNode = el.parentNode;
+      const nextSibling = el.nextSibling;
+
+      // Disposing the menu will remove `el` from the DOM, but we need to
+      // empty it ourselves to be sure.
+      player.playlistMenu.dispose();
+      dom.emptyEl(el);
+
+      // Put the element back in its place.
+      if (nextSibling) {
+        parentNode.insertBefore(el, nextSibling);
+      } else {
+        parentNode.appendChild(el);
+      }
+
+      options.el = el;
+    }
+  }
+
   if (!dom.isEl(options.el)) {
@@ -409,0 +437,0 @@ options.el = findRoot(options.className);

test/dist/bundle.js

@@ -218,3 +218,3 @@ (function (QUnit,videojs) {
 // support VJS5 & VJS6 at the same time
-var dom = videojs.dom || videojs;
+var dom$1 = videojs.dom || videojs;
 var registerPlugin = videojs.registerPlugin || videojs.plugin;
@@ -256,3 +256,3 @@
   if (el.thumbnail) {
-    dom.removeClass(el.thumbnail, 'vjs-playlist-now-playing');
+    dom$1.removeClass(el.thumbnail, 'vjs-playlist-now-playing');
   }
@@ -462,3 +462,3 @@ };
   PlaylistMenu.prototype.createEl = function createEl() {
-    return dom.createEl('div', { className: this.options_.className });
+    return dom$1.createEl('div', { className: this.options_.className });
   };
@@ -514,3 +514,3 @@
       if (thumbnail) {
-        dom.addClass(thumbnail, 'vjs-playlist-now-playing');
+        dom$1.addClass(thumbnail, 'vjs-playlist-now-playing');
       }
@@ -549,3 +549,3 @@ }
         if (document_1.activeElement !== item.el()) {
-          dom.addClass(item.thumbnail, 'vjs-playlist-now-playing');
+          dom$1.addClass(item.thumbnail, 'vjs-playlist-now-playing');
         }
@@ -581,3 +581,3 @@ notUpNext(item);
   for (var i = 0; i < el.childNodes.length; i++) {
-    if (dom.isEl(el.childNodes[i])) {
+    if (dom$1.isEl(el.childNodes[i])) {
       return true;
@@ -635,3 +635,3 @@ }
 
-  if (dom.isEl(options)) {
+  if (dom$1.isEl(options)) {
     videojs.log.warn('videojs-playlist-ui: Passing an element directly to playlistUi() is deprecated, use the "el" option instead!');
@@ -643,3 +643,31 @@ options = { el: options };
 
-  if (!dom.isEl(options.el)) {
+  // If the player is already using this plugin, remove the pre-existing
+  // PlaylistMenu, but retain the element and its location in the DOM because
+  // it will be re-used.
+  if (player.playlistMenu) {
+    var el = player.playlistMenu.el();
+
+    // Catch cases where the menu may have been disposed elsewhere or the
+    // element removed from the DOM.
+    if (el) {
+      var parentNode = el.parentNode;
+      var nextSibling = el.nextSibling;
+
+      // Disposing the menu will remove `el` from the DOM, but we need to
+      // empty it ourselves to be sure.
+      player.playlistMenu.dispose();
+      dom$1.emptyEl(el);
+
+      // Put the element back in its place.
+      if (nextSibling) {
+        parentNode.insertBefore(el, nextSibling);
+      } else {
+        parentNode.appendChild(el);
+      }
+
+      options.el = el;
+    }
+  }
+
+  if (!dom$1.isEl(options.el)) {
     options.el = findRoot(options.className);
@@ -658,6 +686,2 @@ }
 
-var realIsHtmlSupported = void 0;
-var player = void 0;
-var oldVideojsBrowser = void 0;
-
 var playlist = [{
@@ -686,2 +710,3 @@ name: 'Movie 1',
 
+var dom = videojs.dom || videojs;
 var Html5 = videojs.getTech('Html5');
@@ -694,10 +719,10 @@
 function setup() {
-  oldVideojsBrowser = videojs.browser;
+  this.oldVideojsBrowser = videojs.browser;
   videojs.browser = videojs.mergeOptions({}, videojs.browser);
 
-  var fixture = document_1.querySelector('#qunit-fixture');
+  this.fixture = document_1.querySelector('#qunit-fixture');
 
   // force HTML support so the tests run in a reasonable
   // environment under phantomjs
-  realIsHtmlSupported = Html5.isSupported;
+  this.realIsHtmlSupported = Html5.isSupported;
   Html5.isSupported = function () {
@@ -710,25 +735,24 @@ return true;
 
-  fixture.appendChild(video);
+  this.fixture.appendChild(video);
 
   // create a video.js player
-  player = videojs(video);
+  this.player = videojs(video);
 
-  // create a default playlist element
-  var elem = document_1.createElement('ol');
-
-  elem.className = 'vjs-playlist';
-  fixture.appendChild(elem);
+  // Create two playlist container elements.
+  this.fixture.appendChild(dom.createEl('div', { className: 'vjs-playlist' }));
+  this.fixture.appendChild(dom.createEl('div', { className: 'vjs-playlist' }));
 }
 
 function teardown() {
-  videojs.browser = oldVideojsBrowser;
-  Html5.isSupported = realIsHtmlSupported;
-  player.dispose();
-  player = null;
+  videojs.browser = this.oldVideojsBrowser;
+  Html5.isSupported = this.realIsHtmlSupported;
+  this.player.dispose();
+  this.player = null;
+  dom.emptyEl(this.fixture);
 }
 
-QUnit.module('Playlist Plugin', { setup: setup, teardown: teardown });
+QUnit.module('videojs-playlist-ui', { setup: setup, teardown: teardown });
 
 QUnit.test('registers itself', function (assert) {
-  assert.ok(player.playlistUi, 'registered the plugin');
+  assert.ok(this.player.playlistUi, 'registered the plugin');
 });
@@ -738,4 +762,4 @@
   assert.throws(function () {
-    player.playlist = null;
-    player.playlistUi();
+    this.player.playlist = null;
+    this.player.playlistUi();
   }, 'threw on init');
@@ -745,62 +769,85 @@ });
 QUnit.test('is empty if the playlist plugin isn\'t initialized', function (assert) {
-  player.playlistUi();
+  this.player.playlistUi();
 
-  var items = document_1.querySelectorAll('.vjs-playlist-item');
+  var items = this.fixture.querySelectorAll('.vjs-playlist-item');
 
-  assert.ok(document_1.querySelector('.vjs-playlist'), 'created the menu');
-  assert.equal(items.length, 0, 'displayed no items');
+  assert.ok(this.fixture.querySelector('.vjs-playlist'), 'created the menu');
+  assert.strictEqual(items.length, 0, 'displayed no items');
 });
 
-QUnit.test('can be initialized to replace a pre-existing element', function (assert) {
-  var parent = document_1.createElement('div');
-  var elem = document_1.createElement('ol');
+QUnit.test('can be initialized with an element (deprecated form)', function (assert) {
+  var elem = dom.createEl('div');
 
-  parent.appendChild(elem);
-  player.playlist(playlist);
-  player.playlistUi(elem);
+  this.player.playlist(playlist);
+  this.player.playlistUi(elem);
 
-  assert.equal(parent.querySelectorAll('li.vjs-playlist-item').length, playlist.length, 'created an element for each playlist item');
+  assert.strictEqual(elem.querySelectorAll('li.vjs-playlist-item').length, playlist.length, 'created an element for each playlist item');
 });
 
-QUnit.test('can auto-setup elements with the class vjs-playlist', function (assert) {
-  var parent = document_1.querySelector('#qunit-fixture');
-  var elem = parent.querySelector('.vjs-playlist');
+QUnit.test('can be initialized with an element', function (assert) {
+  var elem = dom.createEl('div');
 
-  player.playlist(playlist);
-  player.playlistUi();
+  this.player.playlist(playlist);
+  this.player.playlistUi({ el: elem });
 
-  var menus = parent.querySelectorAll('.vjs-playlist');
+  assert.strictEqual(elem.querySelectorAll('li.vjs-playlist-item').length, playlist.length, 'created an element for each playlist item');
+});
 
-  assert.equal(menus.length, 1, 'created one child node');
-  assert.strictEqual(menus[0], elem, 're-used the existing element');
-  assert.equal(elem.querySelectorAll('li.vjs-playlist-item').length, playlist.length, 'created an element for each playlist item');
+QUnit.test('can look for an element with the class "vjs-playlist" that is not already in use', function (assert) {
+  var firstEl = this.fixture.querySelectorAll('.vjs-playlist')[0];
+  var secondEl = this.fixture.querySelectorAll('.vjs-playlist')[1];
+
+  // Give the firstEl a child, so the plugin thinks it is in use and moves on
+  // to the next one.
+  firstEl.appendChild(dom.createEl('div'));
+
+  this.player.playlist(playlist);
+  this.player.playlistUi();
+
+  assert.strictEqual(this.player.playlistMenu.el(), secondEl, 'used the first matching/empty element');
+  assert.strictEqual(secondEl.querySelectorAll('li.vjs-playlist-item').length, playlist.length, 'found an element for each playlist item');
 });
 
-QUnit.test('can auto-setup elements with a custom class', function (assert) {
-  var elem = document_1.createElement('ol');
+QUnit.test('can look for an element with a custom class that is not already in use', function (assert) {
+  var firstEl = dom.createEl('div', { className: 'super-playlist' });
+  var secondEl = dom.createEl('div', { className: 'super-playlist' });
 
-  elem.className = 'super-playlist';
-  document_1.querySelector('#qunit-fixture').appendChild(elem);
+  // Give the firstEl a child, so the plugin thinks it is in use and moves on
+  // to the next one.
+  firstEl.appendChild(dom.createEl('div'));
 
-  player.playlist(playlist);
-  player.playlistUi({
+  this.fixture.appendChild(firstEl);
+  this.fixture.appendChild(secondEl);
+
+  this.player.playlist(playlist);
+  this.player.playlistUi({
     className: 'super-playlist'
   });
-  assert.equal(elem.querySelectorAll('li.vjs-playlist-item').length, playlist.length, 'created an element for each playlist item');
+
+  assert.strictEqual(this.player.playlistMenu.el(), secondEl, 'used the first matching/empty element');
+  assert.strictEqual(this.fixture.querySelectorAll('li.vjs-playlist-item').length, playlist.length, 'created an element for each playlist item');
 });
 
 QUnit.test('specializes the class name if touch input is absent', function (assert) {
-  var touchEnabled = videojs.browser.TOUCH_ENABLED;
+  videojs.browser.TOUCH_ENABLED = false;
 
-  videojs.browser.TOUCH_ENABLED = videojs.TOUCH_ENABLED = false;
+  this.player.playlist(playlist);
+  this.player.playlistUi();
 
-  player.playlist(playlist);
-  player.playlistUi();
+  assert.ok(this.player.playlistMenu.hasClass('vjs-mouse'), 'marked the playlist menu');
+});
 
-  assert.ok(player.playlistMenu.hasClass('vjs-mouse'), 'marked the playlist menu');
+QUnit.test('can be re-initialized without doubling the contents of the list', function (assert) {
+  var el = this.fixture.querySelectorAll('.vjs-playlist')[0];
 
-  videojs.browser.TOUCH_ENABLED = videojs.TOUCH_ENABLED = touchEnabled;
+  this.player.playlist(playlist);
+  this.player.playlistUi();
+  this.player.playlistUi();
+  this.player.playlistUi();
+
+  assert.strictEqual(this.player.playlistMenu.el(), el, 'used the first matching/empty element');
+  assert.strictEqual(el.querySelectorAll('li.vjs-playlist-item').length, playlist.length, 'found an element for each playlist item');
 });
 
-QUnit.module('Playlist Component', { setup: setup, teardown: teardown });
+QUnit.module('videojs-playlist-ui: Components', { setup: setup, teardown: teardown });
 
@@ -812,22 +859,22 @@ // --------------------
 QUnit.test('includes the video name if provided', function (assert) {
-  player.playlist(playlist);
-  player.playlistUi();
+  this.player.playlist(playlist);
+  this.player.playlistUi();
 
-  var items = document_1.querySelectorAll('.vjs-playlist-item');
+  var items = this.fixture.querySelectorAll('.vjs-playlist-item');
 
-  assert.equal(items[0].querySelector('.vjs-playlist-name').textContent, playlist[0].name, 'wrote the name');
-  assert.equal(items[1].querySelector('.vjs-playlist-name').textContent, 'Untitled Video', 'wrote a placeholder for the name');
+  assert.strictEqual(items[0].querySelector('.vjs-playlist-name').textContent, playlist[0].name, 'wrote the name');
+  assert.strictEqual(items[1].querySelector('.vjs-playlist-name').textContent, 'Untitled Video', 'wrote a placeholder for the name');
 });
 
 QUnit.test('outputs a <picture> for simple thumbnails', function (assert) {
-  player.playlist(playlist);
-  player.playlistUi();
+  this.player.playlist(playlist);
+  this.player.playlistUi();
 
-  var pictures = document_1.querySelectorAll('.vjs-playlist-item picture');
+  var pictures = this.fixture.querySelectorAll('.vjs-playlist-item picture');
 
-  assert.equal(pictures.length, 1, 'output one picture');
+  assert.strictEqual(pictures.length, 1, 'output one picture');
   var imgs = pictures[0].querySelectorAll('img');
 
-  assert.equal(imgs.length, 1, 'output one img');
-  assert.equal(imgs[0].src, window_1.location.protocol + playlist[1].thumbnail, 'set the src attribute');
+  assert.strictEqual(imgs.length, 1, 'output one img');
+  assert.strictEqual(imgs[0].src, window_1.location.protocol + playlist[1].thumbnail, 'set the src attribute');
 });
@@ -850,129 +897,129 @@
 
-  player.playlist(playlistOverride);
-  player.playlistUi();
+  this.player.playlist(playlistOverride);
+  this.player.playlistUi();
 
-  var sources = document_1.querySelectorAll('.vjs-playlist-item picture source');
-  var imgs = document_1.querySelectorAll('.vjs-playlist-item picture img');
+  var sources = this.fixture.querySelectorAll('.vjs-playlist-item picture source');
+  var imgs = this.fixture.querySelectorAll('.vjs-playlist-item picture img');
 
-  assert.equal(sources.length, 1, 'output one source');
-  assert.equal(sources[0].srcset, playlistOverride[0].thumbnail[0].srcset, 'wrote the srcset attribute');
-  assert.equal(sources[0].type, playlistOverride[0].thumbnail[0].type, 'wrote the type attribute');
-  assert.equal(sources[0].media, playlistOverride[0].thumbnail[0].media, 'wrote the type attribute');
-  assert.equal(imgs.length, 1, 'output one img');
-  assert.equal(imgs[0].src, resolveUrl(playlistOverride[0].thumbnail[1].src), 'output the img src attribute');
+  assert.strictEqual(sources.length, 1, 'output one source');
+  assert.strictEqual(sources[0].srcset, playlistOverride[0].thumbnail[0].srcset, 'wrote the srcset attribute');
+  assert.strictEqual(sources[0].type, playlistOverride[0].thumbnail[0].type, 'wrote the type attribute');
+  assert.strictEqual(sources[0].media, playlistOverride[0].thumbnail[0].media, 'wrote the type attribute');
+  assert.strictEqual(imgs.length, 1, 'output one img');
+  assert.strictEqual(imgs[0].src, resolveUrl(playlistOverride[0].thumbnail[1].src), 'output the img src attribute');
 });
 
 QUnit.test('outputs a placeholder for items without thumbnails', function (assert) {
-  player.playlist(playlist);
-  player.playlistUi();
+  this.player.playlist(playlist);
+  this.player.playlistUi();
 
-  var thumbnails = document_1.querySelectorAll('.vjs-playlist-item .vjs-playlist-thumbnail');
+  var thumbnails = this.fixture.querySelectorAll('.vjs-playlist-item .vjs-playlist-thumbnail');
 
-  assert.equal(thumbnails.length, playlist.length, 'output two thumbnails');
-  assert.equal(thumbnails[0].nodeName.toLowerCase(), 'div', 'the second is a placeholder');
+  assert.strictEqual(thumbnails.length, playlist.length, 'output two thumbnails');
+  assert.strictEqual(thumbnails[0].nodeName.toLowerCase(), 'div', 'the second is a placeholder');
 });
 
 QUnit.test('includes the duration if one is provided', function (assert) {
-  player.playlist(playlist);
-  player.playlistUi();
+  this.player.playlist(playlist);
+  this.player.playlistUi();
 
-  var durations = document_1.querySelectorAll('.vjs-playlist-item .vjs-playlist-duration');
+  var durations = this.fixture.querySelectorAll('.vjs-playlist-item .vjs-playlist-duration');
 
-  assert.equal(durations.length, 1, 'skipped the item without a duration');
-  assert.equal(durations[0].textContent, '1:40', 'wrote the duration');
-  assert.equal(durations[0].getAttribute('datetime'), 'PT0H0M' + playlist[0].duration + 'S', 'wrote a machine-readable datetime');
+  assert.strictEqual(durations.length, 1, 'skipped the item without a duration');
+  assert.strictEqual(durations[0].textContent, '1:40', 'wrote the duration');
+  assert.strictEqual(durations[0].getAttribute('datetime'), 'PT0H0M' + playlist[0].duration + 'S', 'wrote a machine-readable datetime');
 });
 
 QUnit.test('marks the selected playlist item on startup', function (assert) {
-  player.playlist(playlist);
-  player.currentSrc = function () {
+  this.player.playlist(playlist);
+  this.player.currentSrc = function () {
     return playlist[0].sources[0].src;
   };
-  player.playlistUi();
+  this.player.playlistUi();
 
-  var selectedItems = document_1.querySelectorAll('.vjs-playlist-item.vjs-selected');
+  var selectedItems = this.fixture.querySelectorAll('.vjs-playlist-item.vjs-selected');
 
-  assert.equal(selectedItems.length, 1, 'marked one playlist item');
-  assert.equal(selectedItems[0].querySelector('.vjs-playlist-name').textContent, playlist[0].name, 'marked the first playlist item');
+  assert.strictEqual(selectedItems.length, 1, 'marked one playlist item');
+  assert.strictEqual(selectedItems[0].querySelector('.vjs-playlist-name').textContent, playlist[0].name, 'marked the first playlist item');
 });
 
 QUnit.test('updates the selected playlist item on loadstart', function (assert) {
-  player.playlist(playlist);
-  player.playlistUi();
+  this.player.playlist(playlist);
+  this.player.playlistUi();
 
-  player.playlist.currentItem(1);
-  player.currentSrc = function () {
+  this.player.playlist.currentItem(1);
+  this.player.currentSrc = function () {
     return playlist[1].sources[0].src;
   };
-  player.trigger('loadstart');
+  this.player.trigger('loadstart');
 
-  var selectedItems = document_1.querySelectorAll('.vjs-playlist-item.vjs-selected');
+  var selectedItems = this.fixture.querySelectorAll('.vjs-playlist-item.vjs-selected');
 
-  assert.equal(document_1.querySelectorAll('.vjs-playlist-item').length, playlist.length, 'displayed the correct number of items');
-  assert.equal(selectedItems.length, 1, 'marked one playlist item');
-  assert.equal(selectedItems[0].querySelector('img').src, resolveUrl(playlist[1].thumbnail), 'marked the second playlist item');
+  assert.strictEqual(this.fixture.querySelectorAll('.vjs-playlist-item').length, playlist.length, 'displayed the correct number of items');
+  assert.strictEqual(selectedItems.length, 1, 'marked one playlist item');
+  assert.strictEqual(selectedItems[0].querySelector('img').src, resolveUrl(playlist[1].thumbnail), 'marked the second playlist item');
 });
 
 QUnit.test('selects no item if the playlist is not in use', function (assert) {
-  player.playlist(playlist);
-  player.playlist.currentItem = function () {
+  this.player.playlist(playlist);
+  this.player.playlist.currentItem = function () {
     return -1;
   };
-  player.playlistUi();
+  this.player.playlistUi();
 
-  player.trigger('loadstart');
+  this.player.trigger('loadstart');
 
-  assert.equal(document_1.querySelectorAll('.vjs-playlist-item.vjs-selected').length, 0, 'no items selected');
+  assert.strictEqual(this.fixture.querySelectorAll('.vjs-playlist-item.vjs-selected').length, 0, 'no items selected');
 });
 
 QUnit.test('updates on "playlistchange", different lengths', function (assert) {
-  player.playlist([]);
-  player.playlistUi();
+  this.player.playlist([]);
+  this.player.playlistUi();
 
-  var items = document_1.querySelectorAll('.vjs-playlist-item');
+  var items = this.fixture.querySelectorAll('.vjs-playlist-item');
 
-  assert.equal(items.length, 0, 'no items initially');
+  assert.strictEqual(items.length, 0, 'no items initially');
 
-  player.playlist(playlist);
-  player.trigger('playlistchange');
-  items = document_1.querySelectorAll('.vjs-playlist-item');
-  assert.equal(items.length, playlist.length, 'updated with the new items');
+  this.player.playlist(playlist);
+  this.player.trigger('playlistchange');
+  items = this.fixture.querySelectorAll('.vjs-playlist-item');
+  assert.strictEqual(items.length, playlist.length, 'updated with the new items');
 });
 
 QUnit.test('updates on "playlistchange", equal lengths', function (assert) {
-  player.playlist([{ sources: [] }, { sources: [] }]);
-  player.playlistUi();
+  this.player.playlist([{ sources: [] }, { sources: [] }]);
+  this.player.playlistUi();
 
-  var items = document_1.querySelectorAll('.vjs-playlist-item');
+  var items = this.fixture.querySelectorAll('.vjs-playlist-item');
 
-  assert.equal(items.length, 2, 'two items initially');
+  assert.strictEqual(items.length, 2, 'two items initially');
 
-  player.playlist(playlist);
-  player.trigger('playlistchange');
-  items = document_1.querySelectorAll('.vjs-playlist-item');
-  assert.equal(items.length, playlist.length, 'updated with the new items');
-  assert.equal(player.playlistMenu.items[0].item, playlist[0], 'we have updated items');
-  assert.equal(player.playlistMenu.items[1].item, playlist[1], 'we have updated items');
+  this.player.playlist(playlist);
+  this.player.trigger('playlistchange');
+  items = this.fixture.querySelectorAll('.vjs-playlist-item');
+  assert.strictEqual(items.length, playlist.length, 'updated with the new items');
+  assert.strictEqual(this.player.playlistMenu.items[0].item, playlist[0], 'we have updated items');
+  assert.strictEqual(this.player.playlistMenu.items[1].item, playlist[1], 'we have updated items');
 });
 
 QUnit.test('updates on "playlistchange", update selection', function (assert) {
-  player.playlist(playlist);
-  player.currentSrc = function () {
+  this.player.playlist(playlist);
+  this.player.currentSrc = function () {
     return playlist[0].sources[0].src;
   };
-  player.playlistUi();
+  this.player.playlistUi();
 
-  var items = document_1.querySelectorAll('.vjs-playlist-item');
+  var items = this.fixture.querySelectorAll('.vjs-playlist-item');
 
-  assert.equal(items.length, 2, 'two items initially');
+  assert.strictEqual(items.length, 2, 'two items initially');
 
   assert.ok(/vjs-selected/.test(items[0].getAttribute('class')), 'first item is selected by default');
-  player.playlist.currentItem(1);
-  player.currentSrc = function () {
+  this.player.playlist.currentItem(1);
+  this.player.currentSrc = function () {
     return playlist[1].sources[0].src;
   };
 
-  player.trigger('playlistchange');
-  items = document_1.querySelectorAll('.vjs-playlist-item');
-  assert.equal(items.length, playlist.length, 'updated with the new items');
+  this.player.trigger('playlistchange');
+  items = this.fixture.querySelectorAll('.vjs-playlist-item');
+  assert.strictEqual(items.length, playlist.length, 'updated with the new items');
   assert.ok(/vjs-selected/.test(items[1].getAttribute('class')), 'second item is selected after update');
@@ -983,51 +1030,51 @@ assert.ok(!/vjs-selected/.test(items[0].getAttribute('class')), 'first item is not selected after update');
 QUnit.test('updates on "playlistsorted", different lengths', function (assert) {
-  player.playlist([]);
-  player.playlistUi();
+  this.player.playlist([]);
+  this.player.playlistUi();
 
-  var items = document_1.querySelectorAll('.vjs-playlist-item');
+  var items = this.fixture.querySelectorAll('.vjs-playlist-item');
 
-  assert.equal(items.length, 0, 'no items initially');
+  assert.strictEqual(items.length, 0, 'no items initially');
 
-  player.playlist(playlist);
-  player.trigger('playlistsorted');
-  items = document_1.querySelectorAll('.vjs-playlist-item');
-  assert.equal(items.length, playlist.length, 'updated with the new items');
+  this.player.playlist(playlist);
+  this.player.trigger('playlistsorted');
+  items = this.fixture.querySelectorAll('.vjs-playlist-item');
+  assert.strictEqual(items.length, playlist.length, 'updated with the new items');
 });
 
 QUnit.test('updates on "playlistsorted", equal lengths', function (assert) {
-  player.playlist([{ sources: [] }, { sources: [] }]);
-  player.playlistUi();
+  this.player.playlist([{ sources: [] }, { sources: [] }]);
+  this.player.playlistUi();
 
-  var items = document_1.querySelectorAll('.vjs-playlist-item');
+  var items = this.fixture.querySelectorAll('.vjs-playlist-item');
 
-  assert.equal(items.length, 2, 'two items initially');
+  assert.strictEqual(items.length, 2, 'two items initially');
 
-  player.playlist(playlist);
-  player.trigger('playlistsorted');
-  items = document_1.querySelectorAll('.vjs-playlist-item');
-  assert.equal(items.length, playlist.length, 'updated with the new items');
-  assert.equal(player.playlistMenu.items[0].item, playlist[0], 'we have updated items');
-  assert.equal(player.playlistMenu.items[1].item, playlist[1], 'we have updated items');
+  this.player.playlist(playlist);
+  this.player.trigger('playlistsorted');
+  items = this.fixture.querySelectorAll('.vjs-playlist-item');
+  assert.strictEqual(items.length, playlist.length, 'updated with the new items');
+  assert.strictEqual(this.player.playlistMenu.items[0].item, playlist[0], 'we have updated items');
+  assert.strictEqual(this.player.playlistMenu.items[1].item, playlist[1], 'we have updated items');
 });
 
 QUnit.test('updates on "playlistsorted", update selection', function (assert) {
-  player.playlist(playlist);
-  player.currentSrc = function () {
+  this.player.playlist(playlist);
+  this.player.currentSrc = function () {
     return playlist[0].sources[0].src;
   };
-  player.playlistUi();
+  this.player.playlistUi();
 
-  var items = document_1.querySelectorAll('.vjs-playlist-item');
+  var items = this.fixture.querySelectorAll('.vjs-playlist-item');
 
-  assert.equal(items.length, 2, 'two items initially');
+  assert.strictEqual(items.length, 2, 'two items initially');
 
   assert.ok(/vjs-selected/.test(items[0].getAttribute('class')), 'first item is selected by default');
-  player.playlist.currentItem(1);
-  player.currentSrc = function () {
+  this.player.playlist.currentItem(1);
+  this.player.currentSrc = function () {
     return playlist[1].sources[0].src;
   };
 
-  player.trigger('playlistsorted');
-  items = document_1.querySelectorAll('.vjs-playlist-item');
-  assert.equal(items.length, playlist.length, 'updated with the new items');
+  this.player.trigger('playlistsorted');
+  items = this.fixture.querySelectorAll('.vjs-playlist-item');
+  assert.strictEqual(items.length, playlist.length, 'updated with the new items');
   assert.ok(/vjs-selected/.test(items[1].getAttribute('class')), 'second item is selected after update');
@@ -1038,16 +1085,16 @@ assert.ok(!/vjs-selected/.test(items[0].getAttribute('class')), 'first item is not selected after update');
 QUnit.test('tracks when an ad is playing', function (assert) {
-  player.playlist([]);
-  player.playlistUi();
+  this.player.playlist([]);
+  this.player.playlistUi();
 
-  player.duration = function () {
+  this.player.duration = function () {
     return 5;
   };
 
-  var playlistMenu = player.playlistMenu;
+  var playlistMenu = this.player.playlistMenu;
 
   assert.ok(!playlistMenu.hasClass('vjs-ad-playing'), 'does not have class vjs-ad-playing');
-  player.trigger('adstart');
+  this.player.trigger('adstart');
   assert.ok(playlistMenu.hasClass('vjs-ad-playing'), 'has class vjs-ad-playing');
 
-  player.trigger('adend');
+  this.player.trigger('adend');
   assert.ok(!playlistMenu.hasClass('vjs-ad-playing'), 'does not have class vjs-ad-playing');
@@ -1063,5 +1110,5 @@ });
 
-  player.playlist(playlist);
-  player.playlistUi({ playOnSelect: true });
-  player.play = function () {
+  this.player.playlist(playlist);
+  this.player.playlistUi({ playOnSelect: true });
+  this.player.play = function () {
     playCalled = true;
@@ -1072,3 +1119,3 @@ };
 
-  player.src = function (src) {
+  this.player.src = function (src) {
     if (src) {
@@ -1079,12 +1126,12 @@ sources = src;
   };
-  player.currentSrc = function () {
+  this.player.currentSrc = function () {
     return sources[0].src;
   };
-  player.playlistMenu.items[1].trigger('tap');
+  this.player.playlistMenu.items[1].trigger('tap');
   // trigger a loadstart synchronously to simplify the test
-  player.trigger('loadstart');
+  this.player.trigger('loadstart');
 
-  assert.ok(player.playlistMenu.items[1].hasClass('vjs-selected'), 'selected the new item');
-  assert.ok(!player.playlistMenu.items[0].hasClass('vjs-selected'), 'deselected the old item');
-  assert.equal(playCalled, true, 'play gets called if option is set');
+  assert.ok(this.player.playlistMenu.items[1].hasClass('vjs-selected'), 'selected the new item');
+  assert.ok(!this.player.playlistMenu.items[0].hasClass('vjs-selected'), 'deselected the old item');
+  assert.strictEqual(playCalled, true, 'play gets called if option is set');
 });
@@ -1095,5 +1142,5 @@
 
-  player.playlist(playlist);
-  player.playlistUi();
-  player.play = function () {
+  this.player.playlist(playlist);
+  this.player.playlistUi();
+  this.player.play = function () {
     playCalled = true;
@@ -1104,3 +1151,3 @@ };
 
-  player.src = function (src) {
+  this.player.src = function (src) {
     if (src) {
@@ -1111,11 +1158,11 @@ sources = src;
   };
-  player.currentSrc = function () {
+  this.player.currentSrc = function () {
     return sources[0].src;
   };
-  player.playlistMenu.items[1].trigger('tap');
+  this.player.playlistMenu.items[1].trigger('tap');
   // trigger a loadstart synchronously to simplify the test
-  player.trigger('loadstart');
-  assert.equal(playCalled, false, 'play should not get called by default');
+  this.player.trigger('loadstart');
+  assert.strictEqual(playCalled, false, 'play should not get called by default');
 });
 
 }(QUnit,videojs));

test/plugin.test.js

@@ -8,6 +8,2 @@ import document from 'global/document';
 
-let realIsHtmlSupported;
-let player;
-let oldVideojsBrowser;
-
 const playlist = [{
@@ -36,2 +32,3 @@ name: 'Movie 1',
 
+const dom = videojs.dom || videojs;
 const Html5 = videojs.getTech('Html5');
@@ -44,10 +41,10 @@
 function setup() {
-  oldVideojsBrowser = videojs.browser;
+  this.oldVideojsBrowser = videojs.browser;
   videojs.browser = videojs.mergeOptions({}, videojs.browser);
 
-  const fixture = document.querySelector('#qunit-fixture');
+  this.fixture = document.querySelector('#qunit-fixture');
 
   // force HTML support so the tests run in a reasonable
   // environment under phantomjs
-  realIsHtmlSupported = Html5.isSupported;
+  this.realIsHtmlSupported = Html5.isSupported;
   Html5.isSupported = function() {
@@ -60,25 +57,24 @@ return true;
 
-  fixture.appendChild(video);
+  this.fixture.appendChild(video);
 
   // create a video.js player
-  player = videojs(video);
+  this.player = videojs(video);
 
-  // create a default playlist element
-  const elem = document.createElement('ol');
-
-  elem.className = 'vjs-playlist';
-  fixture.appendChild(elem);
+  // Create two playlist container elements.
+  this.fixture.appendChild(dom.createEl('div', {className: 'vjs-playlist'}));
+  this.fixture.appendChild(dom.createEl('div', {className: 'vjs-playlist'}));
 }
 
 function teardown() {
-  videojs.browser = oldVideojsBrowser;
-  Html5.isSupported = realIsHtmlSupported;
-  player.dispose();
-  player = null;
+  videojs.browser = this.oldVideojsBrowser;
+  Html5.isSupported = this.realIsHtmlSupported;
+  this.player.dispose();
+  this.player = null;
+  dom.emptyEl(this.fixture);
 }
 
-QUnit.module('Playlist Plugin', {setup, teardown});
+QUnit.module('videojs-playlist-ui', {setup, teardown});
 
 QUnit.test('registers itself', function(assert) {
-  assert.ok(player.playlistUi, 'registered the plugin');
+  assert.ok(this.player.playlistUi, 'registered the plugin');
 });
@@ -88,4 +84,4 @@
   assert.throws(function() {
-    player.playlist = null;
-    player.playlistUi();
+    this.player.playlist = null;
+    this.player.playlistUi();
   }, 'threw on init');
@@ -95,68 +91,105 @@ });
 QUnit.test('is empty if the playlist plugin isn\'t initialized', function(assert) {
-  player.playlistUi();
+  this.player.playlistUi();
 
-  const items = document.querySelectorAll('.vjs-playlist-item');
+  const items = this.fixture.querySelectorAll('.vjs-playlist-item');
 
-  assert.ok(document.querySelector('.vjs-playlist'), 'created the menu');
-  assert.equal(items.length, 0, 'displayed no items');
+  assert.ok(this.fixture.querySelector('.vjs-playlist'), 'created the menu');
+  assert.strictEqual(items.length, 0, 'displayed no items');
 });
 
-QUnit.test('can be initialized to replace a pre-existing element', function(assert) {
-  const parent = document.createElement('div');
-  const elem = document.createElement('ol');
+QUnit.test('can be initialized with an element (deprecated form)', function(assert) {
+  const elem = dom.createEl('div');
 
-  parent.appendChild(elem);
-  player.playlist(playlist);
-  player.playlistUi(elem);
+  this.player.playlist(playlist);
+  this.player.playlistUi(elem);
 
-  assert.equal(parent.querySelectorAll('li.vjs-playlist-item').length,
-        playlist.length,
-        'created an element for each playlist item');
+  assert.strictEqual(
+    elem.querySelectorAll('li.vjs-playlist-item').length,
+    playlist.length,
+    'created an element for each playlist item'
+  );
 });
 
-QUnit.test('can auto-setup elements with the class vjs-playlist', function(assert) {
-  const parent = document.querySelector('#qunit-fixture');
-  const elem = parent.querySelector('.vjs-playlist');
+QUnit.test('can be initialized with an element', function(assert) {
+  const elem = dom.createEl('div');
 
-  player.playlist(playlist);
-  player.playlistUi();
+  this.player.playlist(playlist);
+  this.player.playlistUi({el: elem});
 
-  const menus = parent.querySelectorAll('.vjs-playlist');
+  assert.strictEqual(
+    elem.querySelectorAll('li.vjs-playlist-item').length,
+    playlist.length,
+    'created an element for each playlist item'
+  );
+});
 
-  assert.equal(menus.length, 1, 'created one child node');
-  assert.strictEqual(menus[0], elem, 're-used the existing element');
-  assert.equal(elem.querySelectorAll('li.vjs-playlist-item').length,
-        playlist.length,
-        'created an element for each playlist item');
+QUnit.test('can look for an element with the class "vjs-playlist" that is not already in use', function(assert) {
+  const firstEl = this.fixture.querySelectorAll('.vjs-playlist')[0];
+  const secondEl = this.fixture.querySelectorAll('.vjs-playlist')[1];
+
+  // Give the firstEl a child, so the plugin thinks it is in use and moves on
+  // to the next one.
+  firstEl.appendChild(dom.createEl('div'));
+
+  this.player.playlist(playlist);
+  this.player.playlistUi();
+
+  assert.strictEqual(this.player.playlistMenu.el(), secondEl, 'used the first matching/empty element');
+  assert.strictEqual(
+    secondEl.querySelectorAll('li.vjs-playlist-item').length,
+    playlist.length,
+    'found an element for each playlist item'
+  );
 });
 
-QUnit.test('can auto-setup elements with a custom class', function(assert) {
-  const elem = document.createElement('ol');
+QUnit.test('can look for an element with a custom class that is not already in use', function(assert) {
+  const firstEl = dom.createEl('div', {className: 'super-playlist'});
+  const secondEl = dom.createEl('div', {className: 'super-playlist'});
 
-  elem.className = 'super-playlist';
-  document.querySelector('#qunit-fixture').appendChild(elem);
+  // Give the firstEl a child, so the plugin thinks it is in use and moves on
+  // to the next one.
+  firstEl.appendChild(dom.createEl('div'));
 
-  player.playlist(playlist);
-  player.playlistUi({
+  this.fixture.appendChild(firstEl);
+  this.fixture.appendChild(secondEl);
+
+  this.player.playlist(playlist);
+  this.player.playlistUi({
     className: 'super-playlist'
   });
-  assert.equal(elem.querySelectorAll('li.vjs-playlist-item').length,
-        playlist.length,
-        'created an element for each playlist item');
+
+  assert.strictEqual(this.player.playlistMenu.el(), secondEl, 'used the first matching/empty element');
+  assert.strictEqual(
+    this.fixture.querySelectorAll('li.vjs-playlist-item').length,
+    playlist.length,
+    'created an element for each playlist item'
+  );
 });
 
 QUnit.test('specializes the class name if touch input is absent', function(assert) {
-  const touchEnabled = videojs.browser.TOUCH_ENABLED;
+  videojs.browser.TOUCH_ENABLED = false;
 
-  videojs.browser.TOUCH_ENABLED = videojs.TOUCH_ENABLED = false;
+  this.player.playlist(playlist);
+  this.player.playlistUi();
 
-  player.playlist(playlist);
-  player.playlistUi();
+  assert.ok(this.player.playlistMenu.hasClass('vjs-mouse'), 'marked the playlist menu');
+});
 
-  assert.ok(player.playlistMenu.hasClass('vjs-mouse'), 'marked the playlist menu');
+QUnit.test('can be re-initialized without doubling the contents of the list', function(assert) {
+  const el = this.fixture.querySelectorAll('.vjs-playlist')[0];
 
-  videojs.browser.TOUCH_ENABLED = videojs.TOUCH_ENABLED = touchEnabled;
+  this.player.playlist(playlist);
+  this.player.playlistUi();
+  this.player.playlistUi();
+  this.player.playlistUi();
+
+  assert.strictEqual(this.player.playlistMenu.el(), el, 'used the first matching/empty element');
+  assert.strictEqual(
+    el.querySelectorAll('li.vjs-playlist-item').length,
+    playlist.length,
+    'found an element for each playlist item'
+  );
 });
 
-QUnit.module('Playlist Component', {setup, teardown});
+QUnit.module('videojs-playlist-ui: Components', {setup, teardown});
 
@@ -168,11 +201,11 @@ // --------------------
 QUnit.test('includes the video name if provided', function(assert) {
-  player.playlist(playlist);
-  player.playlistUi();
+  this.player.playlist(playlist);
+  this.player.playlistUi();
 
-  const items = document.querySelectorAll('.vjs-playlist-item');
+  const items = this.fixture.querySelectorAll('.vjs-playlist-item');
 
-  assert.equal(items[0].querySelector('.vjs-playlist-name').textContent,
+  assert.strictEqual(items[0].querySelector('.vjs-playlist-name').textContent,
         playlist[0].name,
         'wrote the name');
-  assert.equal(items[1].querySelector('.vjs-playlist-name').textContent,
+  assert.strictEqual(items[1].querySelector('.vjs-playlist-name').textContent,
         'Untitled Video',
@@ -183,12 +216,12 @@ 'wrote a placeholder for the name');
 QUnit.test('outputs a <picture> for simple thumbnails', function(assert) {
-  player.playlist(playlist);
-  player.playlistUi();
+  this.player.playlist(playlist);
+  this.player.playlistUi();
 
-  const pictures = document.querySelectorAll('.vjs-playlist-item picture');
+  const pictures = this.fixture.querySelectorAll('.vjs-playlist-item picture');
 
-  assert.equal(pictures.length, 1, 'output one picture');
+  assert.strictEqual(pictures.length, 1, 'output one picture');
   const imgs = pictures[0].querySelectorAll('img');
 
-  assert.equal(imgs.length, 1, 'output one img');
-  assert.equal(imgs[0].src, window.location.protocol + playlist[1].thumbnail, 'set the src attribute');
+  assert.strictEqual(imgs.length, 1, 'output one img');
+  assert.strictEqual(imgs[0].src, window.location.protocol + playlist[1].thumbnail, 'set the src attribute');
 });
@@ -211,20 +244,20 @@
 
-  player.playlist(playlistOverride);
-  player.playlistUi();
+  this.player.playlist(playlistOverride);
+  this.player.playlistUi();
 
-  const sources = document.querySelectorAll('.vjs-playlist-item picture source');
-  const imgs = document.querySelectorAll('.vjs-playlist-item picture img');
+  const sources = this.fixture.querySelectorAll('.vjs-playlist-item picture source');
+  const imgs = this.fixture.querySelectorAll('.vjs-playlist-item picture img');
 
-  assert.equal(sources.length, 1, 'output one source');
-  assert.equal(sources[0].srcset,
+  assert.strictEqual(sources.length, 1, 'output one source');
+  assert.strictEqual(sources[0].srcset,
         playlistOverride[0].thumbnail[0].srcset,
         'wrote the srcset attribute');
-  assert.equal(sources[0].type,
+  assert.strictEqual(sources[0].type,
         playlistOverride[0].thumbnail[0].type,
         'wrote the type attribute');
-  assert.equal(sources[0].media,
+  assert.strictEqual(sources[0].media,
         playlistOverride[0].thumbnail[0].media,
         'wrote the type attribute');
-  assert.equal(imgs.length, 1, 'output one img');
-  assert.equal(imgs[0].src,
+  assert.strictEqual(imgs.length, 1, 'output one img');
+  assert.strictEqual(imgs[0].src,
         resolveUrl(playlistOverride[0].thumbnail[1].src),
@@ -235,22 +268,22 @@ 'output the img src attribute');
 QUnit.test('outputs a placeholder for items without thumbnails', function(assert) {
-  player.playlist(playlist);
-  player.playlistUi();
+  this.player.playlist(playlist);
+  this.player.playlistUi();
 
-  const thumbnails = document.querySelectorAll('.vjs-playlist-item .vjs-playlist-thumbnail');
+  const thumbnails = this.fixture.querySelectorAll('.vjs-playlist-item .vjs-playlist-thumbnail');
 
-  assert.equal(thumbnails.length, playlist.length, 'output two thumbnails');
-  assert.equal(thumbnails[0].nodeName.toLowerCase(), 'div', 'the second is a placeholder');
+  assert.strictEqual(thumbnails.length, playlist.length, 'output two thumbnails');
+  assert.strictEqual(thumbnails[0].nodeName.toLowerCase(), 'div', 'the second is a placeholder');
 });
 
 QUnit.test('includes the duration if one is provided', function(assert) {
-  player.playlist(playlist);
-  player.playlistUi();
+  this.player.playlist(playlist);
+  this.player.playlistUi();
 
-  const durations = document.querySelectorAll('.vjs-playlist-item .vjs-playlist-duration');
+  const durations = this.fixture.querySelectorAll('.vjs-playlist-item .vjs-playlist-duration');
 
-  assert.equal(durations.length, 1, 'skipped the item without a duration');
-  assert.equal(durations[0].textContent,
+  assert.strictEqual(durations.length, 1, 'skipped the item without a duration');
+  assert.strictEqual(durations[0].textContent,
         '1:40',
         'wrote the duration');
-  assert.equal(durations[0].getAttribute('datetime'),
+  assert.strictEqual(durations[0].getAttribute('datetime'),
         'PT0H0M' + playlist[0].duration + 'S',
@@ -261,10 +294,10 @@ 'wrote a machine-readable datetime');
 QUnit.test('marks the selected playlist item on startup', function(assert) {
-  player.playlist(playlist);
-  player.currentSrc = () => playlist[0].sources[0].src;
-  player.playlistUi();
+  this.player.playlist(playlist);
+  this.player.currentSrc = () => playlist[0].sources[0].src;
+  this.player.playlistUi();
 
-  const selectedItems = document.querySelectorAll('.vjs-playlist-item.vjs-selected');
+  const selectedItems = this.fixture.querySelectorAll('.vjs-playlist-item.vjs-selected');
 
-  assert.equal(selectedItems.length, 1, 'marked one playlist item');
-  assert.equal(selectedItems[0].querySelector('.vjs-playlist-name').textContent,
+  assert.strictEqual(selectedItems.length, 1, 'marked one playlist item');
+  assert.strictEqual(selectedItems[0].querySelector('.vjs-playlist-name').textContent,
         playlist[0].name,
@@ -275,16 +308,16 @@ 'marked the first playlist item');
 QUnit.test('updates the selected playlist item on loadstart', function(assert) {
-  player.playlist(playlist);
-  player.playlistUi();
+  this.player.playlist(playlist);
+  this.player.playlistUi();
 
-  player.playlist.currentItem(1);
-  player.currentSrc = () => playlist[1].sources[0].src;
-  player.trigger('loadstart');
+  this.player.playlist.currentItem(1);
+  this.player.currentSrc = () => playlist[1].sources[0].src;
+  this.player.trigger('loadstart');
 
-  const selectedItems = document.querySelectorAll('.vjs-playlist-item.vjs-selected');
+  const selectedItems = this.fixture.querySelectorAll('.vjs-playlist-item.vjs-selected');
 
-  assert.equal(document.querySelectorAll('.vjs-playlist-item').length,
+  assert.strictEqual(this.fixture.querySelectorAll('.vjs-playlist-item').length,
         playlist.length,
         'displayed the correct number of items');
-  assert.equal(selectedItems.length, 1, 'marked one playlist item');
-  assert.equal(selectedItems[0].querySelector('img').src,
+  assert.strictEqual(selectedItems.length, 1, 'marked one playlist item');
+  assert.strictEqual(selectedItems[0].querySelector('img').src,
         resolveUrl(playlist[1].thumbnail),
@@ -295,9 +328,9 @@ 'marked the second playlist item');
 QUnit.test('selects no item if the playlist is not in use', function(assert) {
-  player.playlist(playlist);
-  player.playlist.currentItem = () => -1;
-  player.playlistUi();
+  this.player.playlist(playlist);
+  this.player.playlist.currentItem = () => -1;
+  this.player.playlistUi();
 
-  player.trigger('loadstart');
+  this.player.trigger('loadstart');
 
-  assert.equal(document.querySelectorAll('.vjs-playlist-item.vjs-selected').length,
+  assert.strictEqual(this.fixture.querySelectorAll('.vjs-playlist-item.vjs-selected').length,
         0,
@@ -308,51 +341,51 @@ 'no items selected');
 QUnit.test('updates on "playlistchange", different lengths', function(assert) {
-  player.playlist([]);
-  player.playlistUi();
+  this.player.playlist([]);
+  this.player.playlistUi();
 
-  let items = document.querySelectorAll('.vjs-playlist-item');
+  let items = this.fixture.querySelectorAll('.vjs-playlist-item');
 
-  assert.equal(items.length, 0, 'no items initially');
+  assert.strictEqual(items.length, 0, 'no items initially');
 
-  player.playlist(playlist);
-  player.trigger('playlistchange');
-  items = document.querySelectorAll('.vjs-playlist-item');
-  assert.equal(items.length, playlist.length, 'updated with the new items');
+  this.player.playlist(playlist);
+  this.player.trigger('playlistchange');
+  items = this.fixture.querySelectorAll('.vjs-playlist-item');
+  assert.strictEqual(items.length, playlist.length, 'updated with the new items');
 });
 
 QUnit.test('updates on "playlistchange", equal lengths', function(assert) {
-  player.playlist([{sources: []}, {sources: []}]);
-  player.playlistUi();
+  this.player.playlist([{sources: []}, {sources: []}]);
+  this.player.playlistUi();
 
-  let items = document.querySelectorAll('.vjs-playlist-item');
+  let items = this.fixture.querySelectorAll('.vjs-playlist-item');
 
-  assert.equal(items.length, 2, 'two items initially');
+  assert.strictEqual(items.length, 2, 'two items initially');
 
-  player.playlist(playlist);
-  player.trigger('playlistchange');
-  items = document.querySelectorAll('.vjs-playlist-item');
-  assert.equal(items.length, playlist.length, 'updated with the new items');
-  assert.equal(player.playlistMenu.items[0].item, playlist[0], 'we have updated items');
-  assert.equal(player.playlistMenu.items[1].item, playlist[1], 'we have updated items');
+  this.player.playlist(playlist);
+  this.player.trigger('playlistchange');
+  items = this.fixture.querySelectorAll('.vjs-playlist-item');
+  assert.strictEqual(items.length, playlist.length, 'updated with the new items');
+  assert.strictEqual(this.player.playlistMenu.items[0].item, playlist[0], 'we have updated items');
+  assert.strictEqual(this.player.playlistMenu.items[1].item, playlist[1], 'we have updated items');
 });
 
 QUnit.test('updates on "playlistchange", update selection', function(assert) {
-  player.playlist(playlist);
-  player.currentSrc = function() {
+  this.player.playlist(playlist);
+  this.player.currentSrc = function() {
     return playlist[0].sources[0].src;
   };
-  player.playlistUi();
+  this.player.playlistUi();
 
-  let items = document.querySelectorAll('.vjs-playlist-item');
+  let items = this.fixture.querySelectorAll('.vjs-playlist-item');
 
-  assert.equal(items.length, 2, 'two items initially');
+  assert.strictEqual(items.length, 2, 'two items initially');
 
   assert.ok((/vjs-selected/).test(items[0].getAttribute('class')), 'first item is selected by default');
-  player.playlist.currentItem(1);
-  player.currentSrc = function() {
+  this.player.playlist.currentItem(1);
+  this.player.currentSrc = function() {
     return playlist[1].sources[0].src;
   };
 
-  player.trigger('playlistchange');
-  items = document.querySelectorAll('.vjs-playlist-item');
-  assert.equal(items.length, playlist.length, 'updated with the new items');
+  this.player.trigger('playlistchange');
+  items = this.fixture.querySelectorAll('.vjs-playlist-item');
+  assert.strictEqual(items.length, playlist.length, 'updated with the new items');
   assert.ok((/vjs-selected/).test(items[1].getAttribute('class')), 'second item is selected after update');
@@ -363,51 +396,51 @@ assert.ok(!(/vjs-selected/).test(items[0].getAttribute('class')), 'first item is not selected after update');
 QUnit.test('updates on "playlistsorted", different lengths', function(assert) {
-  player.playlist([]);
-  player.playlistUi();
+  this.player.playlist([]);
+  this.player.playlistUi();
 
-  let items = document.querySelectorAll('.vjs-playlist-item');
+  let items = this.fixture.querySelectorAll('.vjs-playlist-item');
 
-  assert.equal(items.length, 0, 'no items initially');
+  assert.strictEqual(items.length, 0, 'no items initially');
 
-  player.playlist(playlist);
-  player.trigger('playlistsorted');
-  items = document.querySelectorAll('.vjs-playlist-item');
-  assert.equal(items.length, playlist.length, 'updated with the new items');
+  this.player.playlist(playlist);
+  this.player.trigger('playlistsorted');
+  items = this.fixture.querySelectorAll('.vjs-playlist-item');
+  assert.strictEqual(items.length, playlist.length, 'updated with the new items');
 });
 
 QUnit.test('updates on "playlistsorted", equal lengths', function(assert) {
-  player.playlist([{sources: []}, {sources: []}]);
-  player.playlistUi();
+  this.player.playlist([{sources: []}, {sources: []}]);
+  this.player.playlistUi();
 
-  let items = document.querySelectorAll('.vjs-playlist-item');
+  let items = this.fixture.querySelectorAll('.vjs-playlist-item');
 
-  assert.equal(items.length, 2, 'two items initially');
+  assert.strictEqual(items.length, 2, 'two items initially');
 
-  player.playlist(playlist);
-  player.trigger('playlistsorted');
-  items = document.querySelectorAll('.vjs-playlist-item');
-  assert.equal(items.length, playlist.length, 'updated with the new items');
-  assert.equal(player.playlistMenu.items[0].item, playlist[0], 'we have updated items');
-  assert.equal(player.playlistMenu.items[1].item, playlist[1], 'we have updated items');
+  this.player.playlist(playlist);
+  this.player.trigger('playlistsorted');
+  items = this.fixture.querySelectorAll('.vjs-playlist-item');
+  assert.strictEqual(items.length, playlist.length, 'updated with the new items');
+  assert.strictEqual(this.player.playlistMenu.items[0].item, playlist[0], 'we have updated items');
+  assert.strictEqual(this.player.playlistMenu.items[1].item, playlist[1], 'we have updated items');
 });
 
 QUnit.test('updates on "playlistsorted", update selection', function(assert) {
-  player.playlist(playlist);
-  player.currentSrc = function() {
+  this.player.playlist(playlist);
+  this.player.currentSrc = function() {
     return playlist[0].sources[0].src;
   };
-  player.playlistUi();
+  this.player.playlistUi();
 
-  let items = document.querySelectorAll('.vjs-playlist-item');
+  let items = this.fixture.querySelectorAll('.vjs-playlist-item');
 
-  assert.equal(items.length, 2, 'two items initially');
+  assert.strictEqual(items.length, 2, 'two items initially');
 
   assert.ok((/vjs-selected/).test(items[0].getAttribute('class')), 'first item is selected by default');
-  player.playlist.currentItem(1);
-  player.currentSrc = function() {
+  this.player.playlist.currentItem(1);
+  this.player.currentSrc = function() {
     return playlist[1].sources[0].src;
   };
 
-  player.trigger('playlistsorted');
-  items = document.querySelectorAll('.vjs-playlist-item');
-  assert.equal(items.length, playlist.length, 'updated with the new items');
+  this.player.trigger('playlistsorted');
+  items = this.fixture.querySelectorAll('.vjs-playlist-item');
+  assert.strictEqual(items.length, playlist.length, 'updated with the new items');
   assert.ok((/vjs-selected/).test(items[1].getAttribute('class')), 'second item is selected after update');
@@ -418,16 +451,16 @@ assert.ok(!(/vjs-selected/).test(items[0].getAttribute('class')), 'first item is not selected after update');
 QUnit.test('tracks when an ad is playing', function(assert) {
-  player.playlist([]);
-  player.playlistUi();
+  this.player.playlist([]);
+  this.player.playlistUi();
 
-  player.duration = () => 5;
+  this.player.duration = () => 5;
 
-  const playlistMenu = player.playlistMenu;
+  const playlistMenu = this.player.playlistMenu;
 
   assert.ok(!playlistMenu.hasClass('vjs-ad-playing'),
      'does not have class vjs-ad-playing');
-  player.trigger('adstart');
+  this.player.trigger('adstart');
   assert.ok(playlistMenu.hasClass('vjs-ad-playing'),
      'has class vjs-ad-playing');
 
-  player.trigger('adend');
+  this.player.trigger('adend');
   assert.ok(!playlistMenu.hasClass('vjs-ad-playing'),
@@ -444,5 +477,5 @@ 'does not have class vjs-ad-playing');
 
-  player.playlist(playlist);
-  player.playlistUi({playOnSelect: true});
-  player.play = function() {
+  this.player.playlist(playlist);
+  this.player.playlistUi({playOnSelect: true});
+  this.player.play = function() {
     playCalled = true;
@@ -453,3 +486,3 @@ };
 
-  player.src = (src) => {
+  this.player.src = (src) => {
     if (src) {
@@ -460,12 +493,12 @@ sources = src;
   };
-  player.currentSrc = () => sources[0].src;
-  player.playlistMenu.items[1].trigger('tap');
+  this.player.currentSrc = () => sources[0].src;
+  this.player.playlistMenu.items[1].trigger('tap');
   // trigger a loadstart synchronously to simplify the test
-  player.trigger('loadstart');
+  this.player.trigger('loadstart');
 
-  assert.ok(player.playlistMenu.items[1].hasClass('vjs-selected'),
+  assert.ok(this.player.playlistMenu.items[1].hasClass('vjs-selected'),
      'selected the new item');
-  assert.ok(!player.playlistMenu.items[0].hasClass('vjs-selected'),
+  assert.ok(!this.player.playlistMenu.items[0].hasClass('vjs-selected'),
      'deselected the old item');
-  assert.equal(playCalled, true, 'play gets called if option is set');
+  assert.strictEqual(playCalled, true, 'play gets called if option is set');
 });
@@ -476,5 +509,5 @@
 
-  player.playlist(playlist);
-  player.playlistUi();
-  player.play = function() {
+  this.player.playlist(playlist);
+  this.player.playlistUi();
+  this.player.play = function() {
     playCalled = true;
@@ -485,3 +518,3 @@ };
 
-  player.src = (src) => {
+  this.player.src = (src) => {
     if (src) {
@@ -492,7 +525,7 @@ sources = src;
   };
-  player.currentSrc = () => sources[0].src;
-  player.playlistMenu.items[1].trigger('tap');
+  this.player.currentSrc = () => sources[0].src;
+  this.player.playlistMenu.items[1].trigger('tap');
   // trigger a loadstart synchronously to simplify the test
-  player.trigger('loadstart');
-  assert.equal(playCalled, false, 'play should not get called by default');
+  this.player.trigger('loadstart');
+  assert.strictEqual(playCalled, false, 'play should not get called by default');
 });

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

282037

increased by3.18%

Lines of code

3416

increased by4.88%

No dependency changes