diff --git a/static/showcases/blocked-segment.html b/static/showcases/blocked-segment.html
index f0ad10b..fb6d2e1 100644
--- a/static/showcases/blocked-segment.html
+++ b/static/showcases/blocked-segment.html
@@ -34,13 +34,18 @@ <h2>Detect blocked segment</h2>
     // The id for the timeout function responsible for managing the auto-hide of the notification.
     #timeoutId;
 
+    /**
+     *
+     * @param player {import('@srgssr/pillarbox-web').Player}
+     * @param options
+     */
     constructor(player, options) {
       super(player, options);
 
       // Attach the DOM element when the player is ready,
       this.player.ready(() => this.#attachComponent());
-      // Wait for the 'loadeddata' event to ensure the text tracks are available
-      this.player.on('loadeddata', () => this.#handleBlockedSegmentChange());
+      // Wait for the blocked segment change event.
+      this.player.on('srgssr/blocked-segment', ({ data }) => this.#handleBlockedSegmentChange(data));
     }
 
     #attachComponent() {
@@ -50,36 +55,27 @@ <h2>Detect blocked segment</h2>
       });
     }
 
-    #handleBlockedSegmentChange() {
-      // Get the text track with the ID 'srgssr-blocked-segments'
-      const blockedSegments = this.player.textTracks().getTrackById('srgssr-blocked-segments');
+    async #handleBlockedSegmentChange(data) {
+      // Cancel the previous timeout
+      clearTimeout(this.#timeoutId);
 
-      // Add a listener for the 'cuechange' event on the blocked segments text track
-      blockedSegments?.on('cuechange', () => {
-        // Check if there are active cues in the blocked segments text track
-        if (!blockedSegments.activeCues.length) return;
+      // Parse the JSON content of the active cue to get the blocked segment information
+      const blockSegment = JSON.parse(data.text);
+      const blockReason = blockSegment.blockReason ?? 'UNKNOWN';
+      // Block reasons are localized out of the box, alternatively you can make your own
+      const message = this.#component.localize(blockReason);
 
-        // Cancel the previous timeout
-        clearTimeout(this.#timeoutId);
+      // Update the displayed notification text with the appropriate message
+      this.#component.el().textContent = `ⓘ ${message}`;
 
-        // Parse the JSON content of the active cue to get the blocked segment information
-        const blockSegment = JSON.parse(blockedSegments.activeCues[0].text);
-        const blockReason = blockSegment.blockReason ?? 'UNKNOWN';
-        // Block reasons are localized out of the box, alternatively you can make your own
-        const message = this.#component.localize(blockReason);
+      // Show the blocked segment notification
+      this.#component.show();
 
-        // Update the displayed notification text with the appropriate message
-        this.#component.el().textContent = `ⓘ ${message}`;
-
-        // Show the blocked segment notification
-        this.#component.show();
-
-        // Set a timeout to hide the notification after a specified delay
-        this.#timeoutId = setTimeout(() => {
-          this.#component.hide();
-          this.#timeoutId = undefined;
-        }, this.options.delay);
-      });
+      // Set a timeout to hide the notification after a specified delay
+      this.#timeoutId = setTimeout(() => {
+        this.#component.hide();
+        this.#timeoutId = undefined;
+      }, this.options.delay);
     }
 
     // Get the options of this plugin
diff --git a/static/showcases/chapters.html b/static/showcases/chapters.html
index 25f770c..b1d5f22 100644
--- a/static/showcases/chapters.html
+++ b/static/showcases/chapters.html
@@ -37,8 +37,8 @@ <h2>Display Current Chapter</h2>
 
       // Attach the DOM element when the player is ready,
       this.player.ready(() => this.#attachComponent());
-      // Wait for the 'loadeddata' event to handle the chapter change
-      this.player.on('loadeddata', () => this.#handleChapterChange());
+      // Wait for the chapter change event
+      this.player.on('srgssr/chapter', ({ data }) => this.#handleChapterChange(data));
     }
 
     #attachComponent() {
@@ -68,28 +68,22 @@ <h2>Display Current Chapter</h2>
       };
     }
 
-    #handleChapterChange() {
-      // Get the text track with the ID 'srgssr-chapters'
-      const chapters = this.player.textTracks().getTrackById('srgssr-chapters');
+    #handleChapterChange(data) {
+      // Check if there are active cues in the chapters text track
+      if (!data) {
+        // Hide the current chapter component if there are no active cues
+        this.#component.hide();
+        return;
+      }
 
-      // Add a listener for the 'cuechange' event on the chapters text track
-      chapters?.on('cuechange', () => {
-        // Check if there are active cues in the chapters text track
-        if (!chapters.activeCues.length) {
-          // Hide the current chapter component if there are no active cues
-          this.#component.hide();
-          return;
-        }
+      // Parse the JSON content of the active cue to get the current chapter information
+      const currentChapter = JSON.parse(data.text);
 
-        // Parse the JSON content of the active cue to get the current chapter information
-        const currentChapter = JSON.parse(chapters.activeCues[0].text);
+      // Update the displayed chapter title and thumbnail
+      this.#component.updateData(currentChapter.imageUrl, currentChapter.title);
 
-        // Update the displayed chapter title and thumbnail
-        this.#component.updateData(currentChapter.imageUrl, currentChapter.title);
-
-        // Show the current chapter component
-        this.#component.show();
-      });
+      // Show the current chapter component
+      this.#component.show();
     }
   }
 
diff --git a/static/showcases/skip-credits.html b/static/showcases/skip-credits.html
index 7004897..04df1cb 100644
--- a/static/showcases/skip-credits.html
+++ b/static/showcases/skip-credits.html
@@ -31,27 +31,24 @@ <h2>Skip Credits</h2>
   class SkipButton extends Plugin {
     // Reference to the component used to display the skip button.
     #component;
+    // The currently active time interval
+    #activeInterval;
 
     constructor(player, options) {
       super(player, options);
 
       // Attach the DOM element when the player is ready,
       this.player.ready(() => this.#attachComponent());
-      // Wait for the 'loadeddata' event to handle the time intervals change
-      this.player.on('loadeddata', () => this.#timeIntervalsChange());
+      // Wait for the time interval change event.
+      this.player.on('srgssr/interval', ({ data }) => this.#timeIntervalsChange(data));
     }
 
     #attachComponent() {
       this.#component = this.player.addChild('button', {
         // Define the click handler for the button
         clickHandler: () => {
-          // Get the text track with the ID 'srgssr-intervals'
-          const timeIntervals = this.player.textTracks().getTrackById('srgssr-intervals');
-          // Get the active time interval cue
-          const timeInterval = timeIntervals.activeCues[0];
-
           // Set the player's current time to the 'markOut' value of the time interval
-          this.player.currentTime(timeInterval.endTime);
+          this.player.currentTime(this.#activeInterval.endTime);
         },
         // Set the class for styling and hide the element with 'vjs-hidden'
         // 'vjs-visible-text' allows to show the controlText, otherwise it is hidden by default
@@ -61,22 +58,18 @@ <h2>Skip Credits</h2>
       });
     }
 
-    #timeIntervalsChange() {
-      // Get the text track with the ID 'srgssr-intervals'
-      const timeIntervals = player.textTracks().getTrackById('srgssr-intervals');
-
-      // Add a listener for the 'cuechange' event on the time intervals text track
-      timeIntervals?.on('cuechange', () => {
-        // Check if there are active cues in the time intervals text track
-        if (!timeIntervals.activeCues.length) {
-          // Hide the skip button if there are no active cues
-          this.#component.hide();
-          return;
-        }
-
-        // Show the skip button if there are active cues
-        this.#component.show();
-      });
+    #timeIntervalsChange(data) {
+      // Check if there are active cues in the time intervals text track
+      if (!data) {
+        // Hide the skip button if there are no active cues
+        this.#activeInterval = undefined;
+        this.#component.hide();
+        return;
+      }
+
+      // Show the skip button if there are active cues
+      this.#activeInterval = data;
+      this.#component.show();
     }
   }