fix: preserve default options when adding new translations

Refactored language modules to merge with existing default translations in
`videojs.options.language`. This prevents overriding default configurations when calling
`videojs.addLanguage`. Changes have been applied across all packages in the monorepo and the
templates for the generation of new packages.

Other changes:
- Removed spaces from the skip button translation keys.
- Expose language files as assets into the final build.

package.json

@@ -49,6 +49,7 @@
     "node-plop": "^0.32.0",
     "parcel": "^2.12.0",
     "plop": "^4.0.1",
+    "rollup-plugin-copy": "^3.5.0",
     "sass": "^1.75.0",
     "semantic-release": "^23.1.1",
     "semantic-release-monorepo": "^8.0.2",

packages/pillarbox-playlist/src/lang/index.js

@@ -1,12 +1,19 @@
-import * as de from './de.json';
-import * as en from './en.json';
-import * as fr from './fr.json';
-import * as it from './it.json';
-import * as rm from './rm.json';
+import de from './de.json';
+import en from './en.json';
+import fr from './fr.json';
+import it from './it.json';
+import rm from './rm.json';
 import videojs from 'video.js';
 
-videojs.addLanguage('de', de);
-videojs.addLanguage('en', en);
-videojs.addLanguage('fr', fr);
-videojs.addLanguage('it', it);
-videojs.addLanguage('rm', rm);
+function extendLanguage(code, data) {
+  videojs.addLanguage(code, {
+    ...videojs.options.language[code] ?? {},
+    ...data
+  });
+}
+
+extendLanguage('de', de);
+extendLanguage('en', en);
+extendLanguage('fr', fr);
+extendLanguage('it', it);
+extendLanguage('rm', rm);

packages/pillarbox-playlist/test/language.spec.js

@@ -0,0 +1,31 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import '../src/lang';
+import pillarbox from '@srgssr/pillarbox-web';
+
+window.HTMLMediaElement.prototype.load = () => {};
+
+describe('Language', () => {
+  let player;
+
+  beforeEach(() => {
+    document.body.innerHTML = '<video id="test-video" class="video-js"></video>';
+
+    const videoElement = document.querySelector('#test-video');
+
+    player = pillarbox(videoElement);
+  });
+
+  afterEach(() => {
+    player.dispose();
+    vi.resetAllMocks();
+  });
+
+  it('should use the correct French translations', () => {
+    // When
+    player.language('fr');
+
+    // Then
+    expect(player.localize('Play')).toBe('Lecture');
+    expect(player.localize('Shuffle')).toBe('Mélanger');
+  });
+});

packages/pillarbox-playlist/vite.config.ui.js

@@ -1,5 +1,6 @@
 import { defineConfig } from 'vite';
 import babel from '@rollup/plugin-babel';
+import copy from 'rollup-plugin-copy';
 
 /**
  * Vite's configuration for the lib build.
@@ -30,10 +31,16 @@ export default defineConfig({
           entryFileNames: 'pillarbox-playlist-ui.cjs'
         }
       ],
-      plugins: [babel({
-        babelHelpers: 'bundled',
-        exclude: 'node_modules/**'
-      })]
+      plugins: [
+        babel({
+          babelHelpers: 'bundled',
+          exclude: 'node_modules/**'
+        }),
+        copy({
+          targets: [{ src: 'src/lang/*.json', dest: 'dist/lang' }],
+          hook: 'writeBundle'
+        })
+      ]
     }
   }
 });

packages/skip-button/src/lang/index.js

@@ -1,12 +1,19 @@
-import * as de from './de.json';
-import * as en from './en.json';
-import * as fr from './fr.json';
-import * as it from './it.json';
-import * as rm from './rm.json';
+import de from './de.json';
+import en from './en.json';
+import fr from './fr.json';
+import it from './it.json';
+import rm from './rm.json';
 import pillarbox from '@srgssr/pillarbox-web';
 
-pillarbox.addLanguage('de', de);
-pillarbox.addLanguage('en', en);
-pillarbox.addLanguage('fr', fr);
-pillarbox.addLanguage('it', it);
-pillarbox.addLanguage('rm', rm);
+function extendLanguage(code, data) {
+  pillarbox.addLanguage(code, {
+    ...pillarbox.options.language[code] ?? {},
+    ...data
+  });
+}
+
+extendLanguage('de', de);
+extendLanguage('en', en);
+extendLanguage('fr', fr);
+extendLanguage('it', it);
+extendLanguage('rm', rm);

packages/skip-button/test/language.spec.js

@@ -0,0 +1,31 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import '../src/lang';
+import pillarbox from '@srgssr/pillarbox-web';
+
+window.HTMLMediaElement.prototype.load = () => {};
+
+describe('Language', () => {
+  let player;
+
+  beforeEach(() => {
+    document.body.innerHTML = '<video id="test-video" class="video-js"></video>';
+
+    const videoElement = document.querySelector('#test-video');
+
+    player = pillarbox(videoElement);
+  });
+
+  afterEach(() => {
+    player.dispose();
+    vi.resetAllMocks();
+  });
+
+  it('should use the correct French translations', () => {
+    // When
+    player.language('fr');
+
+    // Then
+    expect(player.localize('Play')).toBe('Lecture');
+    expect(player.localize('Skip credits')).toBe('Passer');
+  });
+});

packages/skip-button/vite.config.lib.js

@@ -1,5 +1,6 @@
 import { defineConfig } from 'vite';
 import babel from '@rollup/plugin-babel';
+import copy from 'rollup-plugin-copy';
 
 /**
  * Vite's configuration for the lib build.
@@ -19,10 +20,16 @@ export default defineConfig({
     },
     rollupOptions: {
       external: ['@srgssr/pillarbox-web'],
-      plugins: [babel({
-        babelHelpers: 'bundled',
-        exclude: 'node_modules/**'
-      })]
+      plugins: [
+        babel({
+          babelHelpers: 'bundled',
+          exclude: 'node_modules/**'
+        }),
+        copy({
+          targets: [{ src: 'src/lang/*.json', dest: 'dist/lang' }],
+          hook: 'writeBundle'
+        })
+      ]
     }
   }
 });

scripts/create.js

@@ -46,7 +46,10 @@ export default function(plop) {
         templateFiles: './template/**',
         globOptions: {
           dot: true,
-          ignore: !data.wantLocalization ? '**/src/lang/**' : undefined
+          ignore: !data.wantLocalization ? [
+            '**/src/lang/**',
+            '**/test/language.spec.js.hbs'
+          ] : undefined
         },
         data: {
           importAlias: data.platform === 'pillarbox' ? '@srgssr/pillarbox-web' : 'video.js'

scripts/template/src/lang/index.js.hbs

@@ -1,12 +1,19 @@
-import * as de from './de.json';
-import * as en from './en.json';
-import * as fr from './fr.json';
-import * as it from './it.json';
-import * as rm from './rm.json';
+import de from './de.json';
+import en from './en.json';
+import fr from './fr.json';
+import it from './it.json';
+import rm from './rm.json';
 import {{platform}} from '{{importAlias}}';
 
-{{platform}}.addLanguage('de', de);
-{{platform}}.addLanguage('en', en);
-{{platform}}.addLanguage('fr', fr);
-{{platform}}.addLanguage('it', it);
-{{platform}}.addLanguage('rm', rm);
+function extendLanguage(code, data) {
+  {{platform}}.addLanguage(code, {
+    ...{{platform}}.options.language[code] ?? {},
+    ...data
+  });
+}
+
+extendLanguage('de', de);
+extendLanguage('en', en);
+extendLanguage('fr', fr);
+extendLanguage('it', it);
+extendLanguage('rm', rm);