refactor: simplify playlist menu item retrieval and enhance UI update logic with content change detection

Author: aman-imagekit

packages/video-player/javascript/modules/playlist/playlist-menu-item.ts

@@ -66,7 +66,7 @@ export class PlaylistMenuItem extends Component {
     }
   }
 
-  private getItem() {
+  getItem() {
     return this.options_.item;
   }
 

packages/video-player/javascript/modules/playlist/playlist-menu.ts

@@ -6,6 +6,8 @@ import { PlaylistMenuItem } from './playlist-menu-item';
 import { Playlist } from './playlist';
 import { IKPlayerOptions } from '../../interfaces';
 import { CleanupRegistry } from '../../utils';
+import { isEqual, pick } from 'lodash';
+import { SOURCE_OPTION_KEYS } from './utils';
 
 const Component = videojs.getComponent('Component') as typeof ComponentType;
 
@@ -78,48 +80,58 @@ export class PlaylistMenu extends Component {
 
   /** Render or re-render the playlist UI */
   private update(): void {
-    // Guard: if el_ doesn’t exist yet, skip
     if (!this.el_) return;
 
-    this.empty_();
-
     const items = this.playlist.getItems();
-    const listEl = document.createElement('ol');
-    listEl.className = 'vjs-playlist-item-list';
-    this.el_.appendChild(listEl);
-
-    this.items = items.map((item, index) => {
-      const menuItem = new PlaylistMenuItem(
-        this.player_,
-        this.playlist,
-        {
-          item,
-          showDescription: this.options_.showDescription,
-          playOnSelect:    this.options_.playOnSelect,
-        },
-        this.playerOptions
-      );
-      listEl.appendChild(menuItem.el_);
-      return menuItem;
-    });
+    const currentIndex = this.playlist.getCurrentIndex?.() ?? 0;
+
+    const contentChanged =
+      this.items.length !== items.length ||
+      this.items.some((mi, i) => {
+        const menuItem = mi.getItem();
+        const playlistItem = items[i];
+        return !isEqual(
+          pick(menuItem, SOURCE_OPTION_KEYS),
+          pick(playlistItem, SOURCE_OPTION_KEYS)
+        );
+      });
+
+    if (contentChanged) {
+      this.empty_();
+
+      const listEl = document.createElement('ol');
+      listEl.className = 'vjs-playlist-item-list';
+      this.el_.appendChild(listEl);
+
+      this.items = items.map((item, index) => {
+        const menuItem = new PlaylistMenuItem(
+          this.player_,
+          this.playlist,
+          {
+            item,
+            showDescription: this.options_.showDescription,
+            playOnSelect: this.options_.playOnSelect,
+          },
+          this.playerOptions
+        );
+        listEl.appendChild(menuItem.el_);
+        return menuItem;
+      });
+    }
 
-    // Highlight current and up-next
-    const current = this.playlist.getCurrentIndex?.() ?? 0;
     this.items.forEach((mi, i) => {
-      if (i === current) {
+      const thumbnail = mi.el_.querySelector('.vjs-playlist-thumbnail');
+      if (i === currentIndex) {
         addSelectedClass(mi);
-        videojs.dom.addClass(
-          mi.el_.querySelector('.vjs-playlist-thumbnail')!,
-          'vjs-playlist-now-playing'
-        );
+        if (thumbnail) {
+          videojs.dom.addClass(thumbnail, 'vjs-playlist-now-playing');
+        }
       } else {
         removeSelectedClass(mi);
+        if (thumbnail) {
+          videojs.dom.removeClass(thumbnail, 'vjs-playlist-now-playing');
+        }
       }
-      // if (i === current + 1) {
-      //   upNext(mi);
-      // } else {
-      //   notUpNext(mi);
-      // }
     });
   }
 

packages/video-player/javascript/modules/playlist/styles/playlist-ui.scss

@@ -160,6 +160,13 @@
     flex: 0 0 clamp(40px, 50%, 80px);
     min-width: 0;
   }
+
+  .vjs-playlist-item.vjs-selected {
+  
+    &::before {
+      left: calc(var(--playlist-item-padding-left));
+    }
+  }
 }
 
 

packages/video-player/javascript/modules/shoppable/shoppable.css

@@ -1,10 +1,8 @@
-/* This class on the main player shrinks the video to make space */
 .video-js.shoppable-panel-visible .vjs-control-bar {
   width: 80% !important;
   transition: width 0.35s ease-in-out;
 }
 
-/* The bar's main container */
 .vjs-shoppable-bar {
   position: absolute;
   top: 0;
@@ -16,7 +14,6 @@
   z-index: 10;
 }
 
-/* The inner container that holds the panel and toggle */
 .vjs-shoppable-bar-inner {
   position: absolute;
   top: 0;
@@ -37,7 +34,6 @@
   transition: none;
 }
 
-/* The panel containing the products */
 .vjs-shoppable-panel {
   position: absolute;
   top: 0;
@@ -54,7 +50,6 @@
   display: none;
 }
 
-/* The toggle button */
 .vjs-shoppable-toggle {
   position: absolute;
   top: 15px;
@@ -113,7 +108,6 @@
 
 /* --- Item Layout --- */
 
-/* 1. The main item is now a flex column container */
 .vjs-shoppable-item {
   display: flex;
   flex-direction: column;
@@ -135,14 +129,12 @@
   border-color: #2563eb;
 }
 
-/* 2. NEW container for the image area to define shape and stacking context */
 .vjs-shoppable-image-container {
   position: relative;
   width: 100%;
   aspect-ratio: 1 / 1;
 }
 
-/* 3. Both images are stacked absolutely inside the new image container */
 .vjs-shoppable-item-img {
   position: absolute;
   top: 0;
@@ -162,7 +154,6 @@
   opacity: 1;
 }
 
-/* 4. The info block is a normal element that appears below the image container */
 .vjs-shoppable-item-info {
   position: static;
   width: 100%;
@@ -181,31 +172,27 @@
   justify-content: center;
 }
 
-/* Add these properties to the rule above */
 .vjs-shoppable-postplay-carousel .vjs-shoppable-item-info {
   font-size: 14px;
   font-weight: 500;
   line-height: 1.3;
   background: rgba(0, 0, 0, 1);
-
-  /* --- ADD THESE LINES --- */
-  height: 3.5em; /* Give all info blocks a fixed height (adjust value as needed) */
+  height: 3.5em;
   display: flex;
-  align-items: center; /* Vertically centers the text */
-  justify-content: center; /* Horizontally centers the text */
+  align-items: center;
+  justify-content: center;
 }
 
 .vjs-shoppable-postplay-carousel .vjs-shoppable-item {
-  width: 200px; /* Fixed width for post-play carousel items */
-  flex-shrink: 0; /* Prevents items from shrinking */
-  border: 1px solid rgba(255, 255, 255, 0.4); /* Optional: adds a border for visibility */
+  width: 200px;
+  flex-shrink: 0;
+  border: 1px solid rgba(255, 255, 255, 0.4);
 }
 
 .vjs-shoppable-postplay-carousel .vjs-shoppable-item:hover {
-  border: 1px solid rgba(255, 255, 255, 1); /* Optional: adds a border for visibility */
+  border: 1px solid rgba(255, 255, 255, 1);
 }
 
-/* 5. The hover overlay for text now covers the image container */
 .vjs-shoppable-item-overlay {
   position: absolute;
   top: 0;
@@ -270,35 +257,27 @@
   pointer-events: none;
 }
 
-/* Tooltip on Top (Default) */
 .vjs-shoppable-hotspot-tooltip.tooltip-position-top {
   top: -8px;
-  /* Add some space from the hotspot */
   left: 50%;
   transform: translate(-50%, -100%);
 }
 
-/* Tooltip on the Bottom */
 .vjs-shoppable-hotspot-tooltip.tooltip-position-bottom {
   bottom: -8px;
-  /* Add some space from the hotspot */
   left: 50%;
   transform: translate(-50%, 100%);
 }
 
-/* Tooltip on the Left */
 .vjs-shoppable-hotspot-tooltip.tooltip-position-left {
   top: 50%;
   left: -8px;
-  /* Add some space from the hotspot */
   transform: translate(-100%, -50%);
 }
 
-/* Tooltip on the Right */
 .vjs-shoppable-hotspot-tooltip.tooltip-position-right {
   top: 50%;
   right: -8px;
-  /* Add some space from the hotspot */
   transform: translate(100%, -50%);
 }