mirror of
https://github.com/zoriya/v10.git
synced 2026-08-16 02:45:09 +00:00
59 lines
2.4 KiB
Markdown
59 lines
2.4 KiB
Markdown
# @videojs/sandbox
|
|
|
|
Vite-based playground for testing and developing Video.js 10 integrations. Each sandbox is a standalone entry point that demonstrates a different platform or scenario.
|
|
|
|
## Sandboxes
|
|
|
|
| Name | Description |
|
|
| ------------------- | -------------------------------------- |
|
|
| `core` | Framework-agnostic core API |
|
|
| `html` | HTML player with skin switching |
|
|
| `html-background` | Full-screen background video (HTML) |
|
|
| `html-tailwind` | HTML player styled with Tailwind CSS |
|
|
| `react` | React player with skin switching |
|
|
| `react-tailwind` | React player styled with Tailwind CSS |
|
|
| `react-background` | Full-screen background video (React) |
|
|
|
|
## Getting started
|
|
|
|
```bash
|
|
# From the repo root
|
|
pnpm dev
|
|
# Or just the sandbox
|
|
pnpm -F sandbox dev
|
|
```
|
|
|
|
This runs `setup.ts` first, which mirrors any missing files from `templates/` into `src/`, then starts the Vite dev server. Open the root URL to see links to all sandboxes.
|
|
|
|
## How it works
|
|
|
|
The package has two parallel directories:
|
|
|
|
- **`templates/`** — Checked into git. The source of truth for each sandbox's starting point.
|
|
- **`src/`** — Gitignored (except `index.html`). Your working copy where you freely edit, experiment, and break things.
|
|
|
|
On `pnpm dev`, `setup.ts` copies any file from `templates/` that doesn't already exist in `src/`. Existing files in `src/` are never overwritten, so your local changes are preserved across restarts.
|
|
|
|
## Syncing changes back to templates
|
|
|
|
When you've made improvements in `src/` that should become the new baseline:
|
|
|
|
```bash
|
|
pnpm -F sandbox sync
|
|
```
|
|
|
|
This shows a colored diff of every changed file, then prompts for confirmation before copying `src/` changes into `templates/`. Files that only exist in `templates/` are left untouched.
|
|
|
|
Sync when:
|
|
|
|
- You've fixed a bug or improved a sandbox and want to preserve it for others.
|
|
- You're preparing a commit — templates are what gets checked in.
|
|
|
|
## Adding a new sandbox
|
|
|
|
1. Create a directory in `templates/` (e.g. `templates/my-feature/`).
|
|
2. Add an `index.html` entry point and a `main.ts` or `main.tsx`.
|
|
3. Add a link to your sandbox in `templates/index.html`.
|
|
4. Register the entry in `vite.config.ts` under `rollupOptions.input`.
|
|
5. Run `pnpm dev` — `setup.ts` mirrors the new template into `src/` automatically.
|