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

@@ -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

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",

plugins/skip-button-plugin/README.md → 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'

plugins/skip-button-plugin/index.html → 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

plugins/skip-button-plugin/package.json → 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",

plugins/skip-button-plugin/rollup.config.js → 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'

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
+        }
+      }
+    ]
+  });
+}

scripts/plugin-template/README.md.hbs → 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'