From 34b81871d588f6cc32220f5382dd70fd410a6736 Mon Sep 17 00:00:00 2001
From: Daniel Rossi <electroteque@protonmail.com>
Date: Sat, 9 Mar 2024 04:02:45 +1100
Subject: [PATCH] refactor for updated playlist plugin

---
 src/playlist-menu-item.js |  5 +++--
 src/playlist-menu.js      | 16 ++++++++++------
 src/plugin.js             |  2 +-
 3 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/src/playlist-menu-item.js b/src/playlist-menu-item.js
index e15ee36..7b9029c 100644
--- a/src/playlist-menu-item.js
+++ b/src/playlist-menu-item.js
@@ -55,7 +55,7 @@ const createThumbnail = function(thumbnail) {
 
 class PlaylistMenuItem extends Component {
 
-  constructor(player, playlistItem, settings) {
+  constructor(player, playlistPlugin, playlistItem, settings) {
     if (!playlistItem.item) {
       throw new Error('Cannot construct a PlaylistMenuItem without an item option');
     }
@@ -63,6 +63,7 @@ class PlaylistMenuItem extends Component {
     playlistItem.showDescription = settings.showDescription;
     super(player, playlistItem);
     this.item = playlistItem.item;
+    this.playlistPlugin = playlistPlugin;
 
     this.playOnSelect = settings.playOnSelect;
 
@@ -82,7 +83,7 @@ class PlaylistMenuItem extends Component {
   }
 
   switchPlaylistItem_(event) {
-    this.player_.playlist.currentItem(this.player_.playlist().indexOf(this.item));
+    this.playlistPlugin.loadPlaylistItem(this.playlistPlugin.playlist_.get().indexOf(this.item));
     if (this.playOnSelect) {
       this.player_.play();
     }
diff --git a/src/playlist-menu.js b/src/playlist-menu.js
index 516e710..03ca0bf 100644
--- a/src/playlist-menu.js
+++ b/src/playlist-menu.js
@@ -45,6 +45,8 @@ class PlaylistMenu extends Component {
       this.addClass('vjs-csspointerevents');
     }
 
+    this.playlistPlugin = this.player_.playlistPlugin();
+
     this.createPlaylist_();
 
     if (!videojs.browser.TOUCH_ENABLED) {
@@ -53,6 +55,8 @@ class PlaylistMenu extends Component {
 
     this.on(player, ['loadstart', 'playlistchange', 'playlistsorted'], (e) => {
 
+      console.log()
+
       // The playlistadd and playlistremove events are handled separately. These
       // also fire the playlistchange event with an `action` property, so can
       // exclude them here.
@@ -97,7 +101,7 @@ class PlaylistMenu extends Component {
   }
 
   createPlaylist_() {
-    const playlist = this.player_.playlist() || [];
+    const playlist =  this.playlistPlugin.playlist_.get() || [];
     let list = this.el_.querySelector('.vjs-playlist-item-list');
     let overlay = this.el_.querySelector('.vjs-playlist-ad-overlay');
 
@@ -111,7 +115,7 @@ class PlaylistMenu extends Component {
 
     // create new items
     for (let i = 0; i < playlist.length; i++) {
-      const item = new PlaylistMenuItem(this.player_, {
+      const item = new PlaylistMenuItem(this.player_, this.playlistPlugin, {
         item: playlist[i]
       }, this.options_);
 
@@ -131,7 +135,7 @@ class PlaylistMenu extends Component {
     }
 
     // select the current playlist item
-    const selectedIndex = this.player_.playlist.currentItem();
+    const selectedIndex = this.playlistPlugin.playlist_.getCurrentIndex();
 
     if (this.items.length && selectedIndex >= 0) {
       addSelectedClass(this.items[selectedIndex]);
@@ -157,7 +161,7 @@ class PlaylistMenu extends Component {
    *         The number of items to add.
    */
   addItems_(index, count) {
-    const playlist = this.player_.playlist();
+    const playlist = this.playlistPlugin.playlist_.get();
     const items = playlist.slice(index, count + index);
 
     if (!items.length) {
@@ -206,7 +210,7 @@ class PlaylistMenu extends Component {
 
   update() {
     // replace the playlist items being displayed, if necessary
-    const playlist = this.player_.playlist();
+    const playlist = this.playlistPlugin.playlist_.get();
 
     if (this.items.length !== playlist.length) {
       // if the menu is currently empty or the state is obviously out
@@ -225,7 +229,7 @@ class PlaylistMenu extends Component {
     }
 
     // the playlist itself is unchanged so just update the selection
-    const currentItem = this.player_.playlist.currentItem();
+    const currentItem = this.playlistPlugin.playlist_.getCurrentIndex();
 
     for (let i = 0; i < this.items.length; i++) {
       const item = this.items[i];
diff --git a/src/plugin.js b/src/plugin.js
index a550e1d..d515889 100644
--- a/src/plugin.js
+++ b/src/plugin.js
@@ -40,7 +40,7 @@ class PlaylistUI extends Plugin {
   constructor(player, options) {
     super(player, options);
 
-    if (!player.usingPlugin('playlist')) {
+    if (!player.usingPlugin('playlistPlugin')) {
       player.log.error('videojs-playlist plugin is required by the videojs-playlist-ui plugin');
       return;
     }