chore: use camel case for examples and documentation

Changes every component's initialization in examples and documentation from proper case
to the preferred camel case. This change also applies to the templates of the `create`
cli.

Added mising VERSION static property tests for all components.

Author: jboix

packages/big-replay-button/README.md

@@ -24,7 +24,7 @@ Once the player is installed you can activate the component as follows:
 import videojs from 'video.js';
 import '@srgssr/big-replay-button';
 
-const player = videojs('my-player', { BigReplayButton: true });
+const player = videojs('my-player', { bigReplayButton: true });
 ```
 
 To apply the default styling, add the following line to your CSS file:

packages/big-replay-button/test/big-replay-button.spec.js

@@ -13,7 +13,7 @@ describe('BigReplayButton', () => {
   });
 
   beforeEach(() => {
-    player = videojs(videoElement, { BigReplayButton: true });
+    player = videojs(videoElement, { bigReplayButton: true });
   });
 
   afterEach(() => {
@@ -23,7 +23,7 @@ describe('BigReplayButton', () => {
 
   it('should be registered and attached to the player', () => {
     expect(videojs.getComponent('BigReplayButton')).toBe(BigReplayButton);
-    expect(player.BigReplayButton).toBeDefined();
+    expect(player.bigReplayButton).toBeDefined();
     expect(BigReplayButton.VERSION).toBeDefined();
   });
 

packages/pillarbox-debug-panel/README.md

@@ -24,7 +24,7 @@ Once the player is installed you can activate the component as follows:
 import videojs from 'video.js';
 import '@srgssr/pillarbox-debug-panel';
 
-const player = videojs('my-player', { PillarboxDebugPanel: true });
+const player = videojs('my-player', { pillarboxDebugPanel: true });
 ```
 
 To apply the default styling, add the following line to your CSS file:

packages/pillarbox-debug-panel/test/pillarbox-debug-panel.spec.js

@@ -37,6 +37,7 @@ describe('PillarboxDebugPanel', () => {
   it('should be registered and attached to the player', () => {
     expect(videojs.getComponent('PillarboxDebugPanel')).toBe(PillarboxDebugPanel);
     expect(player.pillarboxDebugPanel).toBeDefined();
+    expect(PillarboxDebugPanel.VERSION).toBeDefined();
   });
 
   it('should update the UI when "loadeddata" event is triggered', () => {

packages/pillarbox-playlist/src/pillarbox-playlist-ui.js

@@ -2,6 +2,7 @@ import videojs from 'video.js';
 import './components/pillarbox-playlist-button.js';
 import './components/modal/pillarbox-playlist-modal.js';
 import './lang';
+import { version } from '../package.json';
 
 /**
  * @ignore
@@ -83,6 +84,9 @@ class PillarboxPlaylistUI extends Plugin {
     return controlBarOptions;
   }
 
+  static get VERSION() {
+    return version;
+  }
 }
 
 PillarboxPlaylistUI.prototype.options_ = {

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

@@ -73,6 +73,7 @@ describe('PillarboxPlaylist', () => {
       });
       expect(pillarbox.getPlugin('pillarboxPlaylistUI')).toBe(PillarboxPlaylistUi);
       expect(player.pillarboxPlaylistUI).toBeDefined();
+      expect(PillarboxPlaylistUi.VERSION).toBeDefined();
     });
 
     it('should not to initialize if the playlist plugin is not being used', async() => {

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

@@ -77,6 +77,7 @@ describe('PillarboxPlaylist', () => {
   it('should be registered and attached to the player', () => {
     expect(pillarbox.getPlugin('pillarboxPlaylist')).toBe(PillarboxPlaylist);
     expect(player.pillarboxPlaylist).toBeDefined();
+    expect(PillarboxPlaylist.VERSION).toBeDefined();
   });
 
   describe('load', () => {

packages/skip-button/README.md

@@ -27,7 +27,7 @@ Once the player is installed you can activate the button as follows:
 import Pillarbox from '@srgssr/pillarbox-web';
 import '@srgssr/skip-button';
 
-const player = new Pillarbox('my-player', { SkipButton: true });
+const player = new Pillarbox('my-player', { skipButton: true });
 player.src({
   src: 'urn:swi:video:48115940',
   type: 'srgssr/urn'

packages/skip-button/index.html

@@ -40,7 +40,7 @@
     srgOptions: {
       dataProviderHost: ilHost
     },
-    SkipButton: true
+    skipButton: true
   });
 
   // Load the video source for the player

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

@@ -13,7 +13,7 @@ describe('SkipButton', () => {
     const videoElement = document.querySelector('#test-video');
     const Button = pillarbox.getComponent('Button');
 
-    player = pillarbox(videoElement, { SkipButton: true });
+    player = pillarbox(videoElement, { skipButton: true });
     vi.spyOn(Button.prototype, 'handleClick').mockImplementation(()=>{});
 
   });
@@ -25,7 +25,8 @@ describe('SkipButton', () => {
 
   it('should be registered and attached to the player', () => {
     expect(pillarbox.getComponent('SkipButton')).toBe(SkipButton);
-    expect(player.SkipButton).toBeDefined();
+    expect(player.skipButton).toBeDefined();
+    expect(SkipButton.VERSION).toBeDefined();
   });
 
   it('should update the button text and show it for valid interval', () => {
@@ -38,19 +39,19 @@ describe('SkipButton', () => {
     };
 
     // When
-    player.SkipButton.handleTimeIntervalChange(data);
+    player.skipButton.handleTimeIntervalChange(data);
 
     // Then
-    expect(player.SkipButton.controlText()).toBe('Skip intro');
-    expect(player.SkipButton.hasClass('vjs-hidden')).toBeFalsy();
+    expect(player.skipButton.controlText()).toBe('Skip intro');
+    expect(player.skipButton.hasClass('vjs-hidden')).toBeFalsy();
   });
 
   it('should hide the button when there is no active interval', () => {
     // When
-    player.SkipButton.handleTimeIntervalChange();
+    player.skipButton.handleTimeIntervalChange();
 
     // Then
-    expect(player.SkipButton.hasClass('vjs-hidden')).toBeTruthy();
+    expect(player.skipButton.hasClass('vjs-hidden')).toBeTruthy();
   });
 
   it('should seek to the end of the interval when clicked', () => {
@@ -62,8 +63,8 @@ describe('SkipButton', () => {
     const spy = vi.spyOn(player, 'currentTime');
 
     // When
-    player.SkipButton.handleTimeIntervalChange(data);
-    player.SkipButton.handleClick();
+    player.skipButton.handleTimeIntervalChange(data);
+    player.skipButton.handleClick();
 
     // Then
     expect(spy).toHaveBeenCalledWith(90);
@@ -79,10 +80,10 @@ describe('SkipButton', () => {
     vi.spyOn(Button.prototype, 'dispose').mockImplementation(() => {});
 
     // When
-    player.SkipButton.dispose();
+    player.skipButton.dispose();
 
     // Then
-    expect(spy).toHaveBeenCalledWith('srgssr/interval', player.SkipButton.onTimeIntervalChange_);
+    expect(spy).toHaveBeenCalledWith('srgssr/interval', player.skipButton.onTimeIntervalChange_);
 
     vi.resetAllMocks();
   });