refactor(showcase): add localization to skip button

Refactors the skip button showcase to demonstrate how to add localization directly
through video.js API.

static/showcases/skip-credits.html

@@ -54,9 +54,10 @@ <h2>Skip Credits</h2>
           this.player.currentTime(timeInterval.endTime);
         },
         // Set the class for styling and hide the element with 'vjs-hidden'
-        className: 'pbw-skip-btn vjs-hidden',
+        // 'vjs-visible-text' allows to show the controlText
+        className: 'pbw-skip-btn vjs-hidden vjs-visible-text',
         // Set the control text for accessibility
-        controlText: 'Skip'
+        controlText: `${this.player.localize('skip')} >>`
       });
     }
 
@@ -82,6 +83,13 @@ <h2>Skip Credits</h2>
   // Register a plugin to skip credits
   pillarbox.registerPlugin('skipButton', SkipButton);
 
+  // Add the translations for the button
+  pillarbox.addLanguage('en', { 'skip': 'Skip' });
+  pillarbox.addLanguage('fr', { 'skip': 'Passer' });
+  pillarbox.addLanguage('de', { 'skip': 'Überspringen' });
+  pillarbox.addLanguage('it', { 'skip': 'Saltare' });
+  pillarbox.addLanguage('rm', { 'skip': 'Sursiglir' });
+
   // Create a pillarbox player instance with the skipButton plugin
   const player = pillarbox(
     'video-element-id',

static/showcases/skip-showcase.scss

@@ -2,7 +2,6 @@
   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%);
@@ -13,6 +12,5 @@
 
   .vjs-icon-placeholder::before {
     font-size: var(--font-size-1);
-    content: 'Skip >>';
   }
 }