From b3eccce3494fee22347ceee4749639a765965c5b Mon Sep 17 00:00:00 2001
From: Josep Boix Requesens <jspboix@gmail.com>
Date: Fri, 23 Feb 2024 13:16:50 +0100
Subject: [PATCH] chore(showcase): showcases for custom text tracks handling

Introduces new showcases for integrators to benefit from the inclusion of custom text
tracks in the pillarbox player (see srgssr/pillarbox-web#207).

The showcases cover the implementation of: handling blocked segments, displaying current
chapters, and managing time intervals. Code examples with ample comments have been added
to provide developers with technical insight on how to integrate these features.
---
 package-lock.json                            |   8 +-
 package.json                                 |   2 +-
 src/layout/content/showcase/showcase-page.js | 110 ++++++++++++++---
 static/showcases/blocked-segment.html        | 122 +++++++++++++++++++
 static/showcases/blocked-segment.scss        |  16 +++
 static/showcases/chapters-showcase.scss      |  43 +++++++
 static/showcases/chapters.html               | 120 ++++++++++++++++++
 static/showcases/skip-credits.html           | 107 ++++++++++++++++
 static/showcases/skip-showcase.scss          |  18 +++
 static/showcases/static-showcase.scss        |   2 +-
 10 files changed, 523 insertions(+), 25 deletions(-)
 create mode 100644 static/showcases/blocked-segment.html
 create mode 100644 static/showcases/blocked-segment.scss
 create mode 100644 static/showcases/chapters-showcase.scss
 create mode 100644 static/showcases/chapters.html
 create mode 100644 static/showcases/skip-credits.html
 create mode 100644 static/showcases/skip-showcase.scss

diff --git a/package-lock.json b/package-lock.json
index a2f5bfe..93c5034 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,7 @@
       "version": "1.0.0",
       "license": "MIT",
       "dependencies": {
-        "@srgssr/pillarbox-web": "^1.0.1",
+        "@srgssr/pillarbox-web": "^1.1.0",
         "highlight.js": "^11.9.0",
         "lit": "^3.1.1",
         "material-icons": "^1.13.12",
@@ -1739,9 +1739,9 @@
       ]
     },
     "node_modules/@srgssr/pillarbox-web": {
-      "version": "1.0.1",
-      "resolved": "https://npm.pkg.github.com/download/@srgssr/pillarbox-web/1.0.1/66c4f497e5ee04d495fd2007110f9cfccf5bd437",
-      "integrity": "sha512-4MitZ6iMtYWLjWJUlTnFGz5Ap3v3zJ8AFUyH1+yQpJjdwfd4yUePv5umNkte20rpdMF0iBleMu4L7IPklsHOvA==",
+      "version": "1.1.0",
+      "resolved": "https://npm.pkg.github.com/download/@srgssr/pillarbox-web/1.1.0/3001926a2ae32e2996b39e690634e06e45252ebe",
+      "integrity": "sha512-hZG/iPyA4HK/Fzy7iPMxKFuc1Ed40mn7bUD05tVi185d3AsiXZbrcpRfRT7vJo/NeBAzFY+s3tQsOqI6aYMaDQ==",
       "license": "MIT",
       "dependencies": {
         "video.js": "^8.11.1",
diff --git a/package.json b/package.json
index 348b9fb..79c126f 100644
--- a/package.json
+++ b/package.json
@@ -37,7 +37,7 @@
     "vite": "^5.0.12"
   },
   "dependencies": {
-    "@srgssr/pillarbox-web": "^1.0.1",
+    "@srgssr/pillarbox-web": "^1.1.0",
     "highlight.js": "^11.9.0",
     "lit": "^3.1.1",
     "material-icons": "^1.13.12",
diff --git a/src/layout/content/showcase/showcase-page.js b/src/layout/content/showcase/showcase-page.js
index 1776b0b..3d84c3c 100644
--- a/src/layout/content/showcase/showcase-page.js
+++ b/src/layout/content/showcase/showcase-page.js
@@ -5,19 +5,30 @@ import './showcase-component.js';
 import '../../../components/code-block/code-block';
 import showcasePageCss from './showcase-page.scss?inline';
 import rawStartTimeExample from '../../../../static/showcases/start-time.html?raw';
-import raeMultiPlayerExample from '../../../../static/showcases/multi-player.html?raw';
+import rawMultiPlayerExample from '../../../../static/showcases/multi-player.html?raw';
+import rawDetectBlockedSegmentsExample from '../../../../static/showcases/blocked-segment.html?raw';
+import rawDisplayCurrentChapterExample from '../../../../static/showcases/chapters.html?raw';
+import rawSkipCreditsExample from '../../../../static/showcases/skip-credits.html?raw';
 import { getTextFromHTML } from './example-parser.js';
 
 const startTimeExampleTxt = getTextFromHTML(rawStartTimeExample);
-const multiPlayerExampleTxt = getTextFromHTML(raeMultiPlayerExample);
+const multiPlayerExampleTxt = getTextFromHTML(rawMultiPlayerExample);
+const detectBlockedSegmentsExampleTxt =
+  getTextFromHTML(rawDetectBlockedSegmentsExample);
+const displayCurrentChapterExampleTxt =
+  getTextFromHTML(rawDisplayCurrentChapterExample);
+const skipCreditsExampleTxt = getTextFromHTML(rawSkipCreditsExample);
 
 export class ShowCasePage extends LitElement {
   static styles = [theme, animations, unsafeCSS(showcasePageCss)];
 
   render() {
     return html`
-        ${this.#renderStartTime()}
-        ${this.#renderMultiplePlayers()}
+      ${this.#renderStartTime()}
+      ${this.#renderMultiplePlayers()}
+      ${this.#renderDetectBlockedSegments()}
+      ${this.#renderDisplayCurrentChapter()}
+      ${this.#renderSkipCredits()}
     `;
   }
 
@@ -45,21 +56,82 @@ export class ShowCasePage extends LitElement {
 
   #renderMultiplePlayers() {
     return html`
-      <div class="fade-in" @animationend="${e => e.target.classList.remove('fade-in')}">
-      <showcase-component href="multi-player.html">
-        <h2 slot="title">Multiple Players</h2>
-        <p slot="description">
-          This example demonstrates how to incorporate multiple video players
-          on a webpage.In this showcase, two players are initialized, each
-          with its own configuration, a button allows to toggle the mute state
-          for both players.
-        </p>
-        <code-block slot="code" language="javascript">${multiPlayerExampleTxt}</code-block>
-      </showcase-component>
-      <a href="./static/showcases/multi-player.html" target="_blank">
-        Open this showcase
-      </a>
-    </div>
+      <div class="fade-in"
+           @animationend="${e => e.target.classList.remove('fade-in')}">
+        <showcase-component href="multi-player.html">
+          <h2 slot="title">Multiple Players</h2>
+          <p slot="description">
+            This example demonstrates how to incorporate multiple video players
+            on a webpage.In this showcase, two players are initialized, each
+            with its own configuration, a button allows to toggle the mute state
+            for both players.
+          </p>
+          <code-block slot="code" language="javascript">${multiPlayerExampleTxt}</code-block>
+        </showcase-component>
+        <a href="./static/showcases/multi-player.html" target="_blank">
+          Open this showcase
+        </a>
+      </div>
+    `;
+  }
+
+  #renderDetectBlockedSegments() {
+    return html`
+      <div class="fade-in"
+           @animationend="${e => e.target.classList.remove('fade-in')}">
+        <showcase-component href="blocked-segment.html">
+          <h2 slot="title">Detect Blocked Segments</h2>
+          <p slot="description">
+            This tutorial covers how to use pillarbox to create a plugin that
+            detects and notifies when a blocked segment is skipped.
+          </p>
+          <code-block slot="code" language="javascript">${detectBlockedSegmentsExampleTxt}</code-block>
+        </showcase-component>
+        <a href="./static/showcases/blocked-segment.html"
+           target="_blank">
+          Open this showcase
+        </a>
+      </div>
+    `;
+  }
+
+  #renderDisplayCurrentChapter() {
+    return html`
+      <div class="fade-in"
+           @animationend="${e => e.target.classList.remove('fade-in')}">
+        <showcase-component href="chapters.html">
+          <h2 slot="title">Display Current Chapter</h2>
+          <p slot="description">
+            This showcase explains how to use pillarbox to create a plugin that
+            displays the currently playing chapter in a box above the progress
+            bar.
+          </p>
+          <code-block slot="code" language="javascript">${displayCurrentChapterExampleTxt}</code-block>
+        </showcase-component>
+        <a href="./static/showcases/chapters.html"
+           target="_blank">
+          Open this showcase
+        </a>
+      </div>
+    `;
+  }
+
+  #renderSkipCredits() {
+    return html`
+      <div class="fade-in"
+           @animationend="${e => e.target.classList.remove('fade-in')}">
+        <showcase-component href="skip-credits.html">
+          <h2 slot="title">Skip Credits</h2>
+          <p slot="description">
+            This example shows how to use pillarbox to create a plugin that adds
+            a "Skip" button during detected credit intervals.
+          </p>
+          <code-block slot="code" language="javascript">${skipCreditsExampleTxt}</code-block>
+        </showcase-component>
+        <a href="./static/showcases/skip-credits.html" target="_blank">
+          Open this showcase
+        </a>
+      </div>
     `;
   }
 }
diff --git a/static/showcases/blocked-segment.html b/static/showcases/blocked-segment.html
new file mode 100644
index 0000000..f0ad10b
--- /dev/null
+++ b/static/showcases/blocked-segment.html
@@ -0,0 +1,122 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8"/>
+  <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>Pillarbox Demo - Detect blocked segment</title>
+  <link rel="icon" type="image/x-icon" href="../../img/favicon.ico">
+  <link rel="stylesheet" href="./static-showcase.scss"/>
+  <link rel="stylesheet" href="./blocked-segment.scss"/>
+</head>
+
+<body>
+<core-demo-header></core-demo-header>
+<div class="showcase-content">
+  <h2>Detect blocked segment</h2>
+  <div class="video-container">
+    <video-js id="video-element-id" class="pillarbox-js" controls crossorigin="anonymous"></video-js>
+  </div>
+
+  <button class="showcase-btn" id="close-btn">Close this window</button>
+</div>
+
+<script type="module" data-implementation>
+  // Import the pillarbox library
+  import pillarbox from '@srgssr/pillarbox-web';
+
+  const Plugin = pillarbox.getPlugin('plugin');
+
+  // A Pillarbox plugin to display a blocked segment notification.
+  class BlockedSegmentNotification extends Plugin {
+    // Reference to the component used to display the blocked segment notification.
+    #component;
+    // The id for the timeout function responsible for managing the auto-hide of the notification.
+    #timeoutId;
+
+    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());
+    }
+
+    #attachComponent() {
+      this.#component = player.addChild('component', {
+        // Set the class for styling and hide the element with 'vjs-hidden'
+        className: 'pbw-blocked-segment-notification vjs-hidden'
+      });
+    }
+
+    #handleBlockedSegmentChange() {
+      // Get the text track with the ID 'srgssr-blocked-segments'
+      const blockedSegments = this.player.textTracks().getTrackById('srgssr-blocked-segments');
+
+      // 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;
+
+        // Cancel the previous timeout
+        clearTimeout(this.#timeoutId);
+
+        // 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);
+
+        // 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);
+      });
+    }
+
+    // Get the options of this plugin
+    get options() {
+      return this.player.options().plugins.blockedSegmentNotification;
+    }
+  }
+
+  // Register a plugin to display notifications on blocked segments
+  pillarbox.registerPlugin('blockedSegmentNotification', BlockedSegmentNotification);
+
+  // Create a pillarbox player instance with the blockedSegmentNotification plugin
+  const player = pillarbox(
+    'video-element-id', {
+      fill: true,
+      plugins: {
+        blockedSegmentNotification: {
+          delay: 5000, // Delay in milliseconds before hiding the notification
+        }
+      }
+    }
+  );
+
+  // Load the video source for the player
+  player.src({ src: 'urn:rts:video:10894383', type: 'srgssr/urn' });
+</script>
+
+<script type="module">
+  import pillarbox from '@srgssr/pillarbox-web';
+  import '../../src/layout/header/core-demo-header-component.js';
+
+  document.querySelector('#close-btn').addEventListener('click', () => {
+    window.close();
+  });
+
+  window.pillarbox = pillarbox;
+</script>
+
+</body>
+</html>
diff --git a/static/showcases/blocked-segment.scss b/static/showcases/blocked-segment.scss
new file mode 100644
index 0000000..11f9738
--- /dev/null
+++ b/static/showcases/blocked-segment.scss
@@ -0,0 +1,16 @@
+.pbw-blocked-segment-notification {
+  position: absolute;
+  right: var(--size-5);
+  bottom: var(--size-9);
+  display: flex;
+  align-items: center;
+  height: var(--size-6);
+  color: white;
+  background-color: rgb(0 0 0 / 70%);
+  border-radius: var(--radius-3);
+  box-shadow: var(--shadow-3);
+  backdrop-filter: blur(5px);
+  padding-inline: var(--size-2);
+}
+
+
diff --git a/static/showcases/chapters-showcase.scss b/static/showcases/chapters-showcase.scss
new file mode 100644
index 0000000..d9b54fc
--- /dev/null
+++ b/static/showcases/chapters-showcase.scss
@@ -0,0 +1,43 @@
+.pbw-current-chapter {
+  position: absolute;
+  top: calc(var(--size-8) * -1);
+  left: var(--size-4);
+  display: flex;
+  width: var(--size-15);
+  height: var(--size-9);
+  color: white;
+  background-color: rgb(0 0 0 / 50%);
+  border-radius: var(--radius-2);
+  box-shadow: var(--shadow-3);
+  backdrop-filter: sepia(50%);
+}
+
+.vjs-layout-medium {
+  .pbw-current-chapter {
+    width: var(--size-14);
+  }
+}
+
+.vjs-layout-tiny,
+.vjs-layout-x-small,
+.vjs-layout-small {
+  .pbw-current-chapter {
+    display: none;
+  }
+}
+
+.pbw-chapter-title {
+  display: -webkit-box;
+  padding: var(--size-1) var(--size-2);
+  overflow: hidden;
+  font-weight: var(--font-weight-3);
+  text-overflow: ellipsis;
+  -webkit-line-clamp: 4;
+  -webkit-box-orient: vertical;
+}
+
+.pbw-chapter-thumbnail {
+  border-top-left-radius: var(--radius-2);
+  border-bottom-left-radius: var(--radius-2);
+  box-shadow: var(--inner-shadow-3);
+}
diff --git a/static/showcases/chapters.html b/static/showcases/chapters.html
new file mode 100644
index 0000000..15dcce5
--- /dev/null
+++ b/static/showcases/chapters.html
@@ -0,0 +1,120 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8"/>
+  <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>Pillarbox Demo - Display Current Chapter</title>
+  <link rel="icon" type="image/x-icon" href="../../img/favicon.ico">
+  <link rel="stylesheet" href="./static-showcase.scss"/>
+  <link rel="stylesheet" href="./chapters-showcase.scss"/>
+</head>
+
+<body>
+<core-demo-header></core-demo-header>
+<div class="showcase-content">
+  <h2>Display Current Chapter</h2>
+  <div class="video-container">
+    <video-js id="video-element-id" class="pillarbox-js" controls crossorigin="anonymous"></video-js>
+  </div>
+
+  <button class="showcase-btn" id="close-btn">Close this window</button>
+</div>
+
+<script type="module" data-implementation>
+  // Import the pillarbox library
+  import pillarbox from '@srgssr/pillarbox-web';
+
+  const Plugin = pillarbox.getPlugin('plugin');
+
+  // A Pillarbox plugin to display information about the current chapter.
+  class CurrentChapterPlugin extends Plugin {
+    // Reference to the component used to display the current chapter information.
+    #component;
+
+    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 chapter change
+      this.player.on('loadeddata', () => this.#handleChapterChange());
+    }
+
+    #attachComponent() {
+      // Create a new component to display the current chapter information
+      this.#component = this.player.getChild('ControlBar').addChild('component', {
+        id: 'current-chapter',
+        // Set the class for styling and hide the element with 'vjs-hidden'
+        className: 'pbw-current-chapter vjs-hidden'
+      });
+
+      // Create an image element for the chapter thumbnail
+      const thumbnailImg = document.createElement('img');
+      thumbnailImg.className = 'pbw-chapter-thumbnail';
+
+      // Create a span element for the chapter title
+      const chapterText = document.createElement('span');
+      chapterText.className = 'pbw-chapter-title';
+
+      // Append the thumbnail and title elements to the component
+      this.#component.el().appendChild(thumbnailImg);
+      this.#component.el().appendChild(chapterText);
+      this.#component.hide();
+    }
+
+    #handleChapterChange() {
+      // Get the text track with the ID 'srgssr-chapters'
+      const chapters = this.player.textTracks().getTrackById('srgssr-chapters');
+
+      // 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.player.getChildById('current-chapter').hide();
+          return;
+        }
+
+        // Parse the JSON content of the active cue to get the current chapter information
+        const currentChapter = JSON.parse(chapters.activeCues[0].text);
+        const chapterText = this.#component.$('.pbw-chapter-title');
+        const thumbnailImg = this.#component.$('.pbw-chapter-thumbnail');
+
+        // Update the displayed chapter title and thumbnail
+        chapterText.textContent = currentChapter.title;
+        chapterText.title = currentChapter.title;
+        thumbnailImg.src = currentChapter.imageUrl;
+
+        // Show the current chapter component
+        this.#component.show();
+      });
+    }
+  }
+
+  // Register a plugin to display the currently playing chapter
+  pillarbox.registerPlugin('currentChapter', CurrentChapterPlugin);
+
+  // Create a pillarbox player instance with the currentChapter plugin
+  const player = pillarbox(
+    'video-element-id',
+    { fill: true, plugins: { currentChapter: {} } }
+  );
+
+  // Set the video source for the player
+  player.src({ src: 'urn:rts:video:10894383', type: 'srgssr/urn' });
+</script>
+
+<script type="module">
+  import pillarbox from '@srgssr/pillarbox-web';
+  import '../../src/layout/header/core-demo-header-component.js';
+
+  document.querySelector('#close-btn').addEventListener('click', () => {
+    window.close();
+  });
+
+  window.pillarbox = pillarbox;
+</script>
+
+</body>
+</html>
diff --git a/static/showcases/skip-credits.html b/static/showcases/skip-credits.html
new file mode 100644
index 0000000..3a81cd4
--- /dev/null
+++ b/static/showcases/skip-credits.html
@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8"/>
+  <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>Pillarbox Demo - Skip Credits</title>
+  <link rel="icon" type="image/x-icon" href="../../img/favicon.ico">
+  <link rel="stylesheet" href="./static-showcase.scss"/>
+  <link rel="stylesheet" href="./skip-showcase.scss"/>
+</head>
+
+<body>
+<core-demo-header></core-demo-header>
+<div class="showcase-content">
+  <h2>Skip Credits</h2>
+  <div class="video-container">
+    <video-js id="video-element-id" class="pillarbox-js" controls crossorigin="anonymous"></video-js>
+  </div>
+
+  <button class="showcase-btn" id="close-btn">Close this window</button>
+</div>
+
+<script type="module" data-implementation>
+  // Import the pillarbox library
+  import pillarbox from '@srgssr/pillarbox-web';
+
+  const Plugin = pillarbox.getPlugin('plugin');
+
+  // A Pillarbox plugin to display a skip button.
+  class SkipButton extends Plugin {
+    // Reference to the component used to display the skip button.
+    #component;
+
+    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());
+    }
+
+    #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);
+        },
+        // Set the class for styling and hide the element with 'vjs-hidden'
+        className: 'pbw-skip-btn vjs-hidden',
+        // Set the control text for accessibility
+        controlText: 'Skip'
+      });
+    }
+
+    #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();
+      });
+    }
+  }
+
+  // Register a plugin to skip credits
+  pillarbox.registerPlugin('skipButton', SkipButton);
+
+  // Create a pillarbox player instance with the skipButton plugin
+  const player = pillarbox(
+    'video-element-id',
+    { fill: true, plugins: { skipButton: {} } }
+  );
+
+  // Load the video source for the player
+  player.src({ src: 'urn:rts:video:14683290', type: 'srgssr/urn' });
+</script>
+
+<script type="module">
+  import pillarbox from '@srgssr/pillarbox-web';
+  import '../../src/layout/header/core-demo-header-component.js';
+
+  document.querySelector('#close-btn').addEventListener('click', () => {
+    window.close();
+  });
+
+  window.pillarbox = pillarbox;
+</script>
+
+</body>
+</html>
diff --git a/static/showcases/skip-showcase.scss b/static/showcases/skip-showcase.scss
new file mode 100644
index 0000000..df526b8
--- /dev/null
+++ b/static/showcases/skip-showcase.scss
@@ -0,0 +1,18 @@
+.vjs-control.vjs-button.pbw-skip-btn {
+  position: absolute;
+  right: var(--size-5);
+  bottom: var(--size-9);
+  width: var(--size-10);
+  height: var(--size-6);
+  color: white;
+  background-color: rgb(0 0 0 / 70%);
+  border-radius: var(--radius-3);
+  box-shadow: var(--shadow-3);
+  cursor: pointer;
+  backdrop-filter: blur(5px);
+
+  .vjs-icon-placeholder::before {
+    font-size: var(--font-size-1);
+    content: 'Skip >>';
+  }
+}
diff --git a/static/showcases/static-showcase.scss b/static/showcases/static-showcase.scss
index 985568c..7f2783c 100644
--- a/static/showcases/static-showcase.scss
+++ b/static/showcases/static-showcase.scss
@@ -1,7 +1,7 @@
 @import '../../scss/index';
 
 body {
-  max-width: var(--size-sm);
+  max-width: var(--size-md);
 }
 
 .showcase-content {