From c44072087c5df71a2b2d596c1a058b50fbf2502d Mon Sep 17 00:00:00 2001
From: Josep Boix Requesens <jspboix@gmail.com>
Date: Mon, 26 Feb 2024 13:33:46 +0100
Subject: [PATCH] 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  | 12 ++++++++++--
 static/showcases/skip-showcase.scss |  2 --
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/static/showcases/skip-credits.html b/static/showcases/skip-credits.html
index a559aa0..e601cc7 100644
--- a/static/showcases/skip-credits.html
+++ b/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',
diff --git a/static/showcases/skip-showcase.scss b/static/showcases/skip-showcase.scss
index df526b8..681a870 100644
--- a/static/showcases/skip-showcase.scss
+++ b/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 >>';
   }
 }