From 6fbe956653d35f5352ed27212c2402c55c91cbe8 Mon Sep 17 00:00:00 2001
From: Josep Boix Requesens <jspboix@gmail.com>
Date: Mon, 29 Apr 2024 14:55:52 +0200
Subject: [PATCH] feat: add element type prompt and adapt templates

- Added a new prompt in the `create` script to enable users to specify whether they want to generate
  a new component, plugin, or button.
- Adapted the existing templates to correctly produce the type of element selected by the user.
- Migrated the functionality of the skip-button-plugin into a simpler component format.
---
 docs/README.md                                |  2 +-
 package.json                                  |  2 +-
 .../src/skip-button-plugin.js                 | 28 ---------
 .../test/skip-button-plugin.spec.js           | 31 ----------
 .../.babelrc                                  |  0
 .../README.md                                 | 15 +++--
 .../index.html                                | 10 +--
 .../package.json                              | 14 ++---
 .../rollup.config.js                          | 24 +++----
 .../scss/skip-button.scss}                    |  0
 .../src/lang/de.json                          |  0
 .../src/lang/en.json                          |  0
 .../src/lang/fr.json                          |  0
 .../src/lang/index.js                         |  0
 .../src/lang/it.json                          |  0
 .../src/lang/rm.json                          |  0
 .../src/skip-button.js                        |  0
 .../test/skip-button.spec.js                  |  0
 .../vitest.config.js                          |  0
 scripts/create-plugin.js                      | 26 --------
 scripts/create.js                             | 45 ++++++++++++++
 .../src/{{kebabCase name}}.js.hbs             | 27 --------
 .../{plugin-template => template}/.babelrc    |  0
 .../README.md.hbs                             | 10 ++-
 .../index.html.hbs                            | 10 ++-
 .../package.json.hbs                          |  0
 .../rollup.config.js.hbs                      |  0
 .../scss/{{kebabCase name}}.scss.hbs          |  0
 .../src/lang/de.json                          |  0
 .../src/lang/en.json                          |  0
 .../src/lang/fr.json                          |  0
 .../src/lang/index.js                         |  0
 .../src/lang/it.json                          |  0
 .../src/lang/rm.json                          |  0
 .../template/src/{{kebabCase name}}.js.hbs    | 62 +++++++++++++++++++
 .../test/{{kebabCase name}}.spec.js.hbs       | 10 +++
 .../vitest.config.js                          |  0
 37 files changed, 164 insertions(+), 152 deletions(-)
 delete mode 100644 plugins/skip-button-plugin/src/skip-button-plugin.js
 delete mode 100644 plugins/skip-button-plugin/test/skip-button-plugin.spec.js
 rename plugins/{skip-button-plugin => skip-button}/.babelrc (100%)
 rename plugins/{skip-button-plugin => skip-button}/README.md (81%)
 rename plugins/{skip-button-plugin => skip-button}/index.html (82%)
 rename plugins/{skip-button-plugin => skip-button}/package.json (59%)
 rename plugins/{skip-button-plugin => skip-button}/rollup.config.js (70%)
 rename plugins/{skip-button-plugin/scss/skip-button-plugin.scss => skip-button/scss/skip-button.scss} (100%)
 rename plugins/{skip-button-plugin => skip-button}/src/lang/de.json (100%)
 rename plugins/{skip-button-plugin => skip-button}/src/lang/en.json (100%)
 rename plugins/{skip-button-plugin => skip-button}/src/lang/fr.json (100%)
 rename plugins/{skip-button-plugin => skip-button}/src/lang/index.js (100%)
 rename plugins/{skip-button-plugin => skip-button}/src/lang/it.json (100%)
 rename plugins/{skip-button-plugin => skip-button}/src/lang/rm.json (100%)
 rename plugins/{skip-button-plugin => skip-button}/src/skip-button.js (100%)
 rename plugins/{skip-button-plugin => skip-button}/test/skip-button.spec.js (100%)
 rename plugins/{skip-button-plugin => skip-button}/vitest.config.js (100%)
 delete mode 100644 scripts/create-plugin.js
 create mode 100644 scripts/create.js
 delete mode 100644 scripts/plugin-template/src/{{kebabCase name}}.js.hbs
 rename scripts/{plugin-template => template}/.babelrc (100%)
 rename scripts/{plugin-template => template}/README.md.hbs (87%)
 rename scripts/{plugin-template => template}/index.html.hbs (88%)
 rename scripts/{plugin-template => template}/package.json.hbs (100%)
 rename scripts/{plugin-template => template}/rollup.config.js.hbs (100%)
 rename scripts/{plugin-template => template}/scss/{{kebabCase name}}.scss.hbs (100%)
 rename scripts/{plugin-template => template}/src/lang/de.json (100%)
 rename scripts/{plugin-template => template}/src/lang/en.json (100%)
 rename scripts/{plugin-template => template}/src/lang/fr.json (100%)
 rename scripts/{plugin-template => template}/src/lang/index.js (100%)
 rename scripts/{plugin-template => template}/src/lang/it.json (100%)
 rename scripts/{plugin-template => template}/src/lang/rm.json (100%)
 create mode 100644 scripts/template/src/{{kebabCase name}}.js.hbs
 rename scripts/{plugin-template => template}/test/{{kebabCase name}}.spec.js.hbs (77%)
 rename scripts/{plugin-template => template}/vitest.config.js (100%)

diff --git a/docs/README.md b/docs/README.md
index 95dd7ac..a0c4865 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -45,7 +45,7 @@ npm install
 Open your terminal and execute the following command:
 
 ```bash
-npm run create:plugin
+npm run create
 ```
 
 After running the command, you will be prompted to enter the name of your plugin. A new plugin
diff --git a/package.json b/package.json
index 86ec182..c5b2e8b 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,7 @@
     "themes/*"
   ],
   "scripts": {
-    "create:plugin": "plop --plopfile scripts/create-plugin.js",
+    "create": "plop --plopfile scripts/create.js",
     "eslint": "eslint {plugins/**/{src,test}/**/*.{js,jsx},scripts/*.{js,jsx}}",
     "outdated": "npm outdated",
     "prepare": "husky",
diff --git a/plugins/skip-button-plugin/src/skip-button-plugin.js b/plugins/skip-button-plugin/src/skip-button-plugin.js
deleted file mode 100644
index 6d766dd..0000000
--- a/plugins/skip-button-plugin/src/skip-button-plugin.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import pillarbox from '@srgssr/pillarbox-web';
-import SkipButton from './skip-button.js';
-
-/**
- * @ignore
- * @type {typeof import('video.js/dist/types/plugin').default}
- */
-const Plugin = pillarbox.getPlugin('plugin');
-
-/**
- * Represents a SkipButtonPlugin plugin for the pillarbox player.
- */
-class SkipButtonPlugin extends Plugin {
-  /**
-   * Creates an instance of a SkipButtonPlugin.
-   *
-   * @param {import('@srgssr/pillarbox-web').Player} player The player instance.
-   * @param {Object} options Configuration options for the plugin.
-   */
-  constructor(player, options) {
-    super(player, options);
-    this.player.addChild('SkipButton');
-  }
-}
-
-pillarbox.registerPlugin('skipButtonPlugin', SkipButtonPlugin);
-
-export { SkipButtonPlugin, SkipButton };
diff --git a/plugins/skip-button-plugin/test/skip-button-plugin.spec.js b/plugins/skip-button-plugin/test/skip-button-plugin.spec.js
deleted file mode 100644
index f69abc9..0000000
--- a/plugins/skip-button-plugin/test/skip-button-plugin.spec.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import { afterEach, beforeAll, beforeEach, describe, expect, it } from 'vitest';
-import pillarbox from '@srgssr/pillarbox-web';
-import { SkipButtonPlugin } from '../src/skip-button-plugin.js';
-
-window.HTMLMediaElement.prototype.load = () => {};
-
-describe('SkipButtonPlugin', () => {
-  let player, videoElement;
-
-  beforeAll(() => {
-    document.body.innerHTML = '<video id="test-video" class="video-js"></video>';
-    videoElement = document.querySelector('#test-video');
-  });
-
-  beforeEach(() => {
-    player = pillarbox(videoElement, {
-      plugins: {
-        skipButtonPlugin: true
-      }
-    });
-  });
-
-  afterEach(() => {
-    player.dispose();
-  });
-
-  it('should be registered and attached to the player', () => {
-    expect(pillarbox.getPlugin('skipButtonPlugin')).toBe(SkipButtonPlugin);
-    expect(player.skipButtonPlugin).toBeDefined();
-  });
-});
diff --git a/plugins/skip-button-plugin/.babelrc b/plugins/skip-button/.babelrc
similarity index 100%
rename from plugins/skip-button-plugin/.babelrc
rename to plugins/skip-button/.babelrc
diff --git a/plugins/skip-button-plugin/README.md b/plugins/skip-button/README.md
similarity index 81%
rename from plugins/skip-button-plugin/README.md
rename to plugins/skip-button/README.md
index be013a3..c4eff9c 100644
--- a/plugins/skip-button-plugin/README.md
+++ b/plugins/skip-button/README.md
@@ -1,7 +1,6 @@
-# Pillarbox Web: SkipButtonPlugin
+# Pillarbox Web: SkipButton
 
-> Introduce your plugin with a clear overview of its goals, providing
-> essential context and addressing fundamental questions.
+A button that allow skipp
 
 ## Requirements
 
@@ -11,7 +10,7 @@ To use this component, you need the following installed on your system:
 
 ## Quick Start
 
-To get started with this plugin, follow these steps:
+To get started with this component, follow these steps:
 
 Add the `@srgssr` registry to your `.npmrc` file:
 
@@ -26,18 +25,18 @@ guide: [Authenticating with a personal access token][generate-token]
 You can now install it through `npm` the following command:
 
 ```bash
-npm install --save @srgssr/pillarbox-web @srgssr/skip-button-plugin
+npm install --save @srgssr/pillarbox-web @srgssr/skip-button
 ```
 
 For instructions on setting up Pillarbox, see the [Quick Start guide](SRGSSR/pillarbox-web#quick-start).
 
-Once the player is installed you can activate the plugin as follows:
+Once the player is installed you can activate the button as follows:
 
 ```javascript
 import Pillarbox from '@srgssr/pillarbox-web';
-import '@srgssr/skip-button-plugin';
+import '@srgssr/skip-button';
 
-const player = new Pillarbox('my-player', { plugins: { 'skipButtonPlugin': true } });
+const player = new Pillarbox('my-player', { SkipButton: true });
 player.src({
   src: 'urn:swi:video:48115940',
   type: 'srgssr/urn'
diff --git a/plugins/skip-button-plugin/index.html b/plugins/skip-button/index.html
similarity index 82%
rename from plugins/skip-button-plugin/index.html
rename to plugins/skip-button/index.html
index 6d54e1c..361f9fd 100644
--- a/plugins/skip-button-plugin/index.html
+++ b/plugins/skip-button/index.html
@@ -4,9 +4,9 @@
   <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>SkipButtonPlugin Demo</title>
+  <title>SkipButton Demo</title>
   <link rel="stylesheet" href="npm:@srgssr/pillarbox-web/dist/pillarbox.min.css"/>
-  <link rel="stylesheet" href="./scss/skip-button-plugin.scss"/>
+  <link rel="stylesheet" href="scss/skip-button.scss"/>
   <style>
     html,
     body {
@@ -24,7 +24,7 @@
 
 <script type="module">
   import pillarbox from '@srgssr/pillarbox-web';
-  import './src/skip-button-plugin.js';
+  import './src/skip-button.js';
 
   // Handle URL parameters
   const searchParams = new URLSearchParams(location.search);
@@ -33,14 +33,14 @@
   const language = searchParams.get('language');
   const urn = searchParams.get('urn') || 'urn:rts:video:14683290';
 
-  // Create a pillarbox player instance with the SkipButtonPlugin plugin
+  // Create a pillarbox player instance with the SkipButton enabled
   window.player = pillarbox('player', {
     debug,
     language,
     srgOptions: {
       dataProviderHost: ilHost
     },
-    plugins: { 'skipButtonPlugin': true }
+    SkipButton: true
   });
 
   // Load the video source for the player
diff --git a/plugins/skip-button-plugin/package.json b/plugins/skip-button/package.json
similarity index 59%
rename from plugins/skip-button-plugin/package.json
rename to plugins/skip-button/package.json
index eff1172..142f03f 100644
--- a/plugins/skip-button-plugin/package.json
+++ b/plugins/skip-button/package.json
@@ -1,14 +1,14 @@
 {
-  "name": "@srgssr/skip-button-plugin",
+  "name": "@srgssr/skip-button",
   "version": "0.0.1",
   "type": "module",
-  "main": "dist/skip-button-plugin.cjs.js",
-  "module": "dist/skip-button-plugin.es.js",
-  "style": "./dist/skip-button-plugin.min.css",
+  "main": "dist/skip-button.cjs.js",
+  "module": "dist/skip-button.es.js",
+  "style": "./dist/skip-button.min.css",
   "exports": {
     ".": {
-      "import": "./dist/skip-button-plugin.es.js",
-      "require": "./dist/skip-button-plugin.cjs.js"
+      "import": "./dist/skip-button.es.js",
+      "require": "./dist/skip-button.cjs.js"
     }
   },
   "files": [
@@ -25,7 +25,7 @@
   },
   "scripts": {
     "build": "npm run build:lib && npm run build:css",
-    "build:css": "sass ./scss/skip-button-plugin.scss:dist/skip-button-plugin.min.css --style compressed --source-map --load-path node_modules",
+    "build:css": "sass ./scss/skip-button.scss:dist/skip-button.min.css --style compressed --source-map --load-path node_modules",
     "build:lib": "rollup -c",
     "github:page": "parcel build index.html --target github-page",
     "start": "parcel -p 4200 index.html --open",
diff --git a/plugins/skip-button-plugin/rollup.config.js b/plugins/skip-button/rollup.config.js
similarity index 70%
rename from plugins/skip-button-plugin/rollup.config.js
rename to plugins/skip-button/rollup.config.js
index 3533182..d23f8e4 100644
--- a/plugins/skip-button-plugin/rollup.config.js
+++ b/plugins/skip-button/rollup.config.js
@@ -13,25 +13,25 @@ export default [
    * Rollup build configuration for the ESModule build.
    *
    * Outputs:
-   * - 'dist/skip-button-plugin.es.min.js': Minified ESModule version with sourcemaps.
-   * - 'dist/skip-button-plugin.es.js': Non-minified ESModule.
+   * - 'dist/skip-button.es.min.js': Minified ESModule version with sourcemaps.
+   * - 'dist/skip-button.es.js': Non-minified ESModule.
    *
    * @example
    * ```javascript
-   * import '@srgssr/skip-button-plugin'
+   * import '@srgssr/skip-button'
    * ```
    */
   {
-    input: 'src/skip-button-plugin.js',
+    input: 'src/skip-button.js',
     output: [
       {
-        file: 'dist/skip-button-plugin.es.min.js',
+        file: 'dist/skip-button.es.min.js',
         format: 'es',
         sourcemap: true,
         plugins: [terser()],
       },
       {
-        file: 'dist/skip-button-plugin.es.js',
+        file: 'dist/skip-button.es.js',
         format: 'es',
         plugins: [filesize()]
       }
@@ -46,22 +46,22 @@ export default [
    * Rollup build configuration for the CJS build.
    *
    * Outputs:
-   * - 'dist/skip-button-plugin.cjs.min.js': Minified UMD version with sourcemaps.
-   * - 'dist/skip-button-plugin.cjs.js': Non-minified UMD.
+   * - 'dist/skip-button.cjs.min.js': Minified UMD version with sourcemaps.
+   * - 'dist/skip-button.cjs.js': Non-minified UMD.
    *
    * @example
    * ```html
-   * <script src="skip-button-plugin.cjs.min.js"></script>
+   * <script src="skip-button.cjs.min.js"></script>
    * ```
    *
    * @type {import('rollup').RollupOptions}
    */
   {
-    input: 'src/skip-button-plugin.js',
+    input: 'src/skip-button.js',
     output: [
       {
         name: 'SkipButtonPlugin',
-        file: 'dist/skip-button-plugin.cjs.min.js',
+        file: 'dist/skip-button.cjs.min.js',
         format: 'cjs',
         sourcemap: true,
         globals: {
@@ -71,7 +71,7 @@ export default [
       },
       {
         name: 'SkipButtonPlugin',
-        file: 'dist/skip-button-plugin.cjs.js',
+        file: 'dist/skip-button.cjs.js',
         format: 'cjs',
         globals: {
           '@srgssr/pillarbox-web': 'pillarbox'
diff --git a/plugins/skip-button-plugin/scss/skip-button-plugin.scss b/plugins/skip-button/scss/skip-button.scss
similarity index 100%
rename from plugins/skip-button-plugin/scss/skip-button-plugin.scss
rename to plugins/skip-button/scss/skip-button.scss
diff --git a/plugins/skip-button-plugin/src/lang/de.json b/plugins/skip-button/src/lang/de.json
similarity index 100%
rename from plugins/skip-button-plugin/src/lang/de.json
rename to plugins/skip-button/src/lang/de.json
diff --git a/plugins/skip-button-plugin/src/lang/en.json b/plugins/skip-button/src/lang/en.json
similarity index 100%
rename from plugins/skip-button-plugin/src/lang/en.json
rename to plugins/skip-button/src/lang/en.json
diff --git a/plugins/skip-button-plugin/src/lang/fr.json b/plugins/skip-button/src/lang/fr.json
similarity index 100%
rename from plugins/skip-button-plugin/src/lang/fr.json
rename to plugins/skip-button/src/lang/fr.json
diff --git a/plugins/skip-button-plugin/src/lang/index.js b/plugins/skip-button/src/lang/index.js
similarity index 100%
rename from plugins/skip-button-plugin/src/lang/index.js
rename to plugins/skip-button/src/lang/index.js
diff --git a/plugins/skip-button-plugin/src/lang/it.json b/plugins/skip-button/src/lang/it.json
similarity index 100%
rename from plugins/skip-button-plugin/src/lang/it.json
rename to plugins/skip-button/src/lang/it.json
diff --git a/plugins/skip-button-plugin/src/lang/rm.json b/plugins/skip-button/src/lang/rm.json
similarity index 100%
rename from plugins/skip-button-plugin/src/lang/rm.json
rename to plugins/skip-button/src/lang/rm.json
diff --git a/plugins/skip-button-plugin/src/skip-button.js b/plugins/skip-button/src/skip-button.js
similarity index 100%
rename from plugins/skip-button-plugin/src/skip-button.js
rename to plugins/skip-button/src/skip-button.js
diff --git a/plugins/skip-button-plugin/test/skip-button.spec.js b/plugins/skip-button/test/skip-button.spec.js
similarity index 100%
rename from plugins/skip-button-plugin/test/skip-button.spec.js
rename to plugins/skip-button/test/skip-button.spec.js
diff --git a/plugins/skip-button-plugin/vitest.config.js b/plugins/skip-button/vitest.config.js
similarity index 100%
rename from plugins/skip-button-plugin/vitest.config.js
rename to plugins/skip-button/vitest.config.js
diff --git a/scripts/create-plugin.js b/scripts/create-plugin.js
deleted file mode 100644
index 1108c11..0000000
--- a/scripts/create-plugin.js
+++ /dev/null
@@ -1,26 +0,0 @@
-export default function(plop) {
-  plop.setGenerator('plugin', {
-    description: 'Create a new plugin',
-    prompts: [{
-      type: 'input',
-      name: 'name',
-      message: 'What is the name of your plugin?',
-    }, {
-      type: 'confirm',
-      name: 'wantLocalization',
-      message: 'Will your plugin support multiple languages?',
-    }],
-    actions: data => [
-      {
-        type: 'addMany',
-        destination: '../plugins/{{kebabCase name}}',
-        base: './plugin-template',
-        templateFiles: './plugin-template/**',
-        globOptions: {
-          dot: true,
-          ignore: !data.wantLocalization ? '**/src/lang/**' : undefined
-        }
-      }
-    ]
-  });
-}
diff --git a/scripts/create.js b/scripts/create.js
new file mode 100644
index 0000000..304ad0c
--- /dev/null
+++ b/scripts/create.js
@@ -0,0 +1,45 @@
+// eslint-disable-next-line max-lines-per-function
+export default function(plop) {
+  // Register an equality helper
+  plop.setHelper('ifEq', function(a, b, options) {
+    return (a === b) ? options.fn(this) : options.inverse(this);
+  });
+
+  plop.setGenerator('plugin', {
+    description: 'Create a new Pillarbox elemet',
+    prompts: [
+      {
+        type: 'list',
+        name: 'type',
+        message: 'What type of the element would you like to create?',
+        choices: [
+          { name: 'Plugin \x1b[90m(Extend Pillarbox functionality or add new features)\x1b[0m', value: 'Plugin' },
+          { name: 'Component \x1b[90m(Manipulate or display content within the player)\x1b[0m', value: 'Component' },
+          { name: 'Button \x1b[90m(Provide custom interactive functionality to the player)\x1b[0m', value: 'Button' }
+        ]
+      },
+      {
+        type: 'input',
+        name: 'name',
+        message: data => `What is the name of your ${data.type}?`
+      },
+      {
+        type: 'confirm',
+        name: 'wantLocalization',
+        message: 'Will your element support multiple languages?'
+      }
+    ],
+    actions: data => [
+      {
+        type: 'addMany',
+        destination: '../plugins/{{kebabCase name}}',
+        base: './template',
+        templateFiles: './template/**',
+        globOptions: {
+          dot: true,
+          ignore: !data.wantLocalization ? '**/src/lang/**' : undefined
+        }
+      }
+    ]
+  });
+}
diff --git a/scripts/plugin-template/src/{{kebabCase name}}.js.hbs b/scripts/plugin-template/src/{{kebabCase name}}.js.hbs
deleted file mode 100644
index c7f6750..0000000
--- a/scripts/plugin-template/src/{{kebabCase name}}.js.hbs	
+++ /dev/null
@@ -1,27 +0,0 @@
-import pillarbox from '@srgssr/pillarbox-web';
-{{#if wantLocalization}}import './lang';{{/if}}
-
-/**
- * @ignore
- * @type {typeof import('video.js/dist/types/plugin').default}
- */
-const Plugin = pillarbox.getPlugin('plugin');
-
-/**
- * Represents a {{properCase name}} plugin for the pillarbox player.
- */
-class {{properCase name}} extends Plugin {
-  /**
-   * Creates an instance of a {{properCase name}}.
-   *
-   * @param {import('@srgssr/pillarbox-web').Player} player The player instance.
-   * @param {Object} options Configuration options for the plugin.
-   */
-  constructor(player, options) {
-    super(player, options);
-  }
-}
-
-pillarbox.registerPlugin('{{camelCase name}}', {{properCase name}});
-
-export default {{properCase name}};
diff --git a/scripts/plugin-template/.babelrc b/scripts/template/.babelrc
similarity index 100%
rename from scripts/plugin-template/.babelrc
rename to scripts/template/.babelrc
diff --git a/scripts/plugin-template/README.md.hbs b/scripts/template/README.md.hbs
similarity index 87%
rename from scripts/plugin-template/README.md.hbs
rename to scripts/template/README.md.hbs
index 3130855..9fbc791 100644
--- a/scripts/plugin-template/README.md.hbs
+++ b/scripts/template/README.md.hbs
@@ -1,7 +1,7 @@
 # Pillarbox Web: {{titleCase name}}
 
 <!--
-Introduce your plugin with a clear overview of its goals, providing
+Introduce your {{lowerCase type}} with a clear overview of its goals, providing
 essential context and addressing fundamental questions.
 -->
 
@@ -13,7 +13,7 @@ To use this component, you need the following installed on your system:
 
 ## Quick Start
 
-To get started with this plugin, follow these steps:
+To get started with this {{lowerCase type}}, follow these steps:
 
 Add the `@srgssr` registry to your `.npmrc` file:
 
@@ -34,13 +34,17 @@ npm install --save @srgssr/pillarbox-web @srgssr/{{kebabCase name}}
 
 For instructions on setting up Pillarbox, see the [Quick Start guide](SRGSSR/pillarbox-web#quick-start).
 
-Once the player is installed you can activate the plugin as follows:
+Once the player is installed you can activate the {{lowerCase type}} as follows:
 
 ```javascript
 import Pillarbox from '@srgssr/pillarbox-web';
 import '@srgssr/{{kebabCase name}}';
 
+{{#ifEq type 'plugin'}}
 const player = new Pillarbox('my-player', { plugins: { '{{camelCase name}}': true } });
+{{else}}
+const player = new Pillarbox('my-player', { {{properCase name}}: true });
+{{/ifEq}}
 player.src({
   src: 'urn:swi:video:48115940',
   type: 'srgssr/urn'
diff --git a/scripts/plugin-template/index.html.hbs b/scripts/template/index.html.hbs
similarity index 88%
rename from scripts/plugin-template/index.html.hbs
rename to scripts/template/index.html.hbs
index 1c8d8ef..106e9f3 100644
--- a/scripts/plugin-template/index.html.hbs
+++ b/scripts/template/index.html.hbs
@@ -23,7 +23,7 @@
 
 <script type="module">
   import pillarbox from '@srgssr/pillarbox-web';
-  import './src/skip-button-plugin.js';
+  import './src/{{kebabCase name}}.js';
 
   // Handle URL parameters
   const searchParams = new URLSearchParams(location.search);
@@ -32,14 +32,18 @@
   const language = searchParams.get('language');
   const urn = searchParams.get('urn') || 'urn:rts:video:14683290';
 
-  // Create a pillarbox player instance with the {{properCase name}} plugin
+  // Create a pillarbox player instance with the {{properCase name}} enabled
   window.player = pillarbox('player', {
     debug,
     language,
     srgOptions: {
       dataProviderHost: ilHost
     },
-    plugins: { '{{camelCase name}}': true }
+{{#ifEq type 'plugin'}}
+    plugins: { {{camelCase name}}: true }
+{{else}}
+    {{properCase name}}: true
+{{/ifEq}}
   });
 
   // Load the video source for the player
diff --git a/scripts/plugin-template/package.json.hbs b/scripts/template/package.json.hbs
similarity index 100%
rename from scripts/plugin-template/package.json.hbs
rename to scripts/template/package.json.hbs
diff --git a/scripts/plugin-template/rollup.config.js.hbs b/scripts/template/rollup.config.js.hbs
similarity index 100%
rename from scripts/plugin-template/rollup.config.js.hbs
rename to scripts/template/rollup.config.js.hbs
diff --git a/scripts/plugin-template/scss/{{kebabCase name}}.scss.hbs b/scripts/template/scss/{{kebabCase name}}.scss.hbs
similarity index 100%
rename from scripts/plugin-template/scss/{{kebabCase name}}.scss.hbs
rename to scripts/template/scss/{{kebabCase name}}.scss.hbs
diff --git a/scripts/plugin-template/src/lang/de.json b/scripts/template/src/lang/de.json
similarity index 100%
rename from scripts/plugin-template/src/lang/de.json
rename to scripts/template/src/lang/de.json
diff --git a/scripts/plugin-template/src/lang/en.json b/scripts/template/src/lang/en.json
similarity index 100%
rename from scripts/plugin-template/src/lang/en.json
rename to scripts/template/src/lang/en.json
diff --git a/scripts/plugin-template/src/lang/fr.json b/scripts/template/src/lang/fr.json
similarity index 100%
rename from scripts/plugin-template/src/lang/fr.json
rename to scripts/template/src/lang/fr.json
diff --git a/scripts/plugin-template/src/lang/index.js b/scripts/template/src/lang/index.js
similarity index 100%
rename from scripts/plugin-template/src/lang/index.js
rename to scripts/template/src/lang/index.js
diff --git a/scripts/plugin-template/src/lang/it.json b/scripts/template/src/lang/it.json
similarity index 100%
rename from scripts/plugin-template/src/lang/it.json
rename to scripts/template/src/lang/it.json
diff --git a/scripts/plugin-template/src/lang/rm.json b/scripts/template/src/lang/rm.json
similarity index 100%
rename from scripts/plugin-template/src/lang/rm.json
rename to scripts/template/src/lang/rm.json
diff --git a/scripts/template/src/{{kebabCase name}}.js.hbs b/scripts/template/src/{{kebabCase name}}.js.hbs
new file mode 100644
index 0000000..f069a58
--- /dev/null
+++ b/scripts/template/src/{{kebabCase name}}.js.hbs	
@@ -0,0 +1,62 @@
+import pillarbox from '@srgssr/pillarbox-web';
+{{#if wantLocalization}}import './lang';{{/if}}
+
+{{#ifEq type 'Plugin'}}
+/**
+ * @ignore
+ * @type {typeof import('video.js/dist/types/plugin').default}
+ */
+const Plugin = pillarbox.getPlugin('plugin');
+
+/**
+ * Represents a {{properCase name}} plugin for the pillarbox player.
+ */
+class {{properCase name}} extends Plugin {
+  /**
+   * Creates an instance of a {{properCase name}}.
+   *
+   * @param {import('@srgssr/pillarbox-web').Player} player The player instance.
+   * @param {Object} options Configuration options for the plugin.
+   */
+  constructor(player, options) {
+    super(player, options);
+  }
+}
+
+pillarbox.registerPlugin('{{camelCase name}}', {{properCase name}});
+
+{{else}}
+/**
+* @ignore
+* @type {typeof import('video.js/dist/types/{{kebabCase type}}').default}
+*/
+const {{type}} = pillarbox.getComponent('{{type}}');
+
+/**
+* Represents a {{properCase name}} component for the pillarbox player.
+*/
+class {{properCase name}} extends {{type}} {
+  /**
+  * Creates an instance of a {{properCase name}}.
+  *
+  * @param {import('@srgssr/pillarbox-web').Player} player The player instance.
+  * @param {Object} options Configuration options for the component.
+  */
+  constructor(player, options) {
+    super(player, options);
+  }
+
+  buildCSSClass() {
+    return `${super.buildCSSClass()}`;
+  }
+
+  handleLanguagechange() {
+    super.handleLanguagechange();
+  }
+}
+
+pillarbox.registerComponent('{{properCase name}}', {{properCase name}});
+{{/ifEq}}
+
+
+export default {{properCase name}};
diff --git a/scripts/plugin-template/test/{{kebabCase name}}.spec.js.hbs b/scripts/template/test/{{kebabCase name}}.spec.js.hbs
similarity index 77%
rename from scripts/plugin-template/test/{{kebabCase name}}.spec.js.hbs
rename to scripts/template/test/{{kebabCase name}}.spec.js.hbs
index 17622e2..0572739 100644
--- a/scripts/plugin-template/test/{{kebabCase name}}.spec.js.hbs	
+++ b/scripts/template/test/{{kebabCase name}}.spec.js.hbs	
@@ -13,11 +13,17 @@ describe('{{properCase name}}', () => {
   });
 
   beforeEach(() => {
+{{#ifEq type 'Plugin'}}
     player = pillarbox(videoElement, {
       plugins: {
         {{camelCase name}}: true
       }
     });
+{{else}}
+    player = pillarbox(videoElement, {
+      {{properCase name}}: true
+    });
+{{/ifEq}}
   });
 
   afterEach(() => {
@@ -25,7 +31,11 @@ describe('{{properCase name}}', () => {
   });
 
   it('should be registered and attached to the player', () => {
+{{#ifEq type 'Plugin'}}
     expect(pillarbox.getPlugin('{{camelCase name}}')).toBe({{properCase name}});
+{{else}}
+    expect(pillarbox.getComponent('{{properCase name}}')).toBe({{properCase name}});
+{{/ifEq}}
     expect(player.{{camelCase name}}).toBeDefined();
   });
 });
diff --git a/scripts/plugin-template/vitest.config.js b/scripts/template/vitest.config.js
similarity index 100%
rename from scripts/plugin-template/vitest.config.js
rename to scripts/template/vitest.config.js