Pillarbox-web Theme Editor

Welcome to the Pillarbox-web Theme Editor: a dynamic web application designed to streamline and enhance your theme creation process for pillarbox-web, a web SDK that supercharges video.js with additional functionalities. With this editor, you're equipped to design, customize, and generate themes that resonate with your unique brand identity, ensuring a cohesive and engaging user experience across your video content.

Experience the latest version of the Theme Editor in action here: https://editor.pillarbox.ch

Quick Guide

Prerequisites and Requirements

Ensure your system is equipped with:

• Node.js

Setup

To get started with the Theme Editor on your local machine, follow these steps:

1. Clone the repository:

   git clone https://github.com/SRGSSR/pillarbox-web-theme-editor.git

2. Install dependencies:

   npm install

3. Launch the development server:

   npm run start

4. Navigate to http://localhost:9696 in your browser.

   You'll be greeted by an intuitive interface featuring a CSS editor on the left and a live preview pane with a video player on the right, allowing for real-time theme customization.

Documentation

The Pillarbox-web Theme Editor is crafted with pure JavaScript, employing Lit for robust component creation and the Monaco Editor for an immersive CSS editing experience. This setup ensures that users can directly engage with their theme's aesthetics through a powerful, integrated development environment.

Built with Vite, the project prioritizes broad compatibility and performance, making it readily accessible as a static page hosted on GitHub Pages.

Contributing

If you want to contribute to the Theme Editor, you are welcome to do so. Please follow the code style and linting rules defined in this project. You can use the following commands to check and fix your code:

Check your javascript code:

npm run eslint

Check your CSS and SCSS code:

npm run stylelint

Fix your CSS and SCSS code:

npm run stylelint:fix

This project also has a pre-commit hook that runs the linting check automatically before you commit your changes. You can enable this hook by running the prepare script: npm run prepare.

Before submitting a pull request, please make sure that your code builds successfully. You can use the following commands to build the project:

npm run build

Please take note of our Contribution Guide.

License

This project is licensed under the MIT License. See the LICENSE file for more details.