refactor: optimize initialization of video player components by using Promise.all for concurrent loading

Author: aman-imagekit

packages/video-player/javascript/index.ts

@@ -74,23 +74,33 @@ class ImageKitVideoPlayerPlugin extends Plugin {
           this.shoppableManager_ = undefined;
         }
 
+        const initPromises: Promise<void>[] = [];
+
         if (this.ikGlobalSettings_.seekThumbnails && this.currentSource_) {
-          const mgr = await SeekThumbnailsManager.initSeekThumbnails(
-            this.player,
-            this.currentSource_,
-            this.ikGlobalSettings_
+          initPromises.push(
+            SeekThumbnailsManager.initSeekThumbnails(
+              this.player,
+              this.currentSource_,
+              this.ikGlobalSettings_
+            ).then(mgr => {
+              if (mgr) {
+                this.seekThumbnailsManager_ = mgr;
+              }
+            })
           );
-          if (mgr) {
-            this.seekThumbnailsManager_ = mgr;
-          }
         }
 
-        await initChapterMarkers(this.player, this.currentSource_, this.ikGlobalSettings_, this.ikGlobalSettings_.signerFn);
-        await this.initRecommendationsOverlay();
+        initPromises.push(
+          initChapterMarkers(this.player, this.currentSource_, this.ikGlobalSettings_, this.ikGlobalSettings_.signerFn)
+        );
 
-        if (this.currentSource_ && this.currentSource_.shoppable) {
+        initPromises.push(this.initRecommendationsOverlay());
+
+        if (this.currentSource_?.shoppable) {
           this.shoppableManager_ = new ShoppableManager(this.player, this.currentSource_);
         }
+
+        await Promise.all(initPromises);
       });
 
       this.player.ready(() => {

packages/video-player/javascript/modules/chapters/chapters.ts

@@ -86,6 +86,14 @@ export async function initChapterMarkers(
   ikGlobalSettings: IKPlayerOptions,
   signerFn?: (src: string) => Promise<string>
 ): Promise<void> {
+
+  cleanupChapterTextTracks(player);
+  cleanupChapterLabelDisplay(player);
+  const existing = player.getChild('ChapterMarkersProgressBarControl');
+  if (existing) {
+    existing.dispose();
+  }
+
   if (!source) return;
 
   const src = Array.isArray(source) ? source[0] : source;
@@ -152,7 +160,6 @@ export async function initChapterMarkers(
   }
 
   if (chapterList.length) {
-    cleanupChapterTextTracks(player);
 
     try {
       const trackEl = player.addRemoteTextTrack(
@@ -168,7 +175,6 @@ export async function initChapterMarkers(
         trackEl.track.addCue(cue);
       });
 
-      cleanupChapterLabelDisplay(player);
       setupChapterLabelDisplay(player, trackEl.track);
 
       const controlBar = player.getChild('ControlBar');