194 lines
3.9 KiB
Markdown
194 lines
3.9 KiB
Markdown
# @tach/video-player
|
|
|
|
Single package with three entrypoints:
|
|
|
|
- `@tach/video-player/core`
|
|
- `@tach/video-player/react`
|
|
- `@tach/video-player/angular`
|
|
|
|
This folder is prepared to be moved into a dedicated repository as-is.
|
|
|
|
## What Is Included
|
|
|
|
- Build pipeline to `dist/`:
|
|
- `npm run build`
|
|
- `npm run typecheck`
|
|
- Storybook playground for framework entrypoints:
|
|
- `npm run storybook`
|
|
- `npm run build-storybook`
|
|
- `dist`-first flow for git-based installation:
|
|
- `dist/` is committed to the repository.
|
|
- consumers do not depend on `prepare` at install time.
|
|
- Version bump scripts:
|
|
- `npm run release:patch`
|
|
- `npm run release:minor`
|
|
- `npm run release:major`
|
|
- Optional framework peers:
|
|
- React peers are optional if only `core/angular` is used.
|
|
- Angular peers are optional if only `core/react` is used.
|
|
|
|
## Repo Transfer Checklist
|
|
|
|
1. Create a new repository (for example `tach/video-player`).
|
|
2. Copy everything from this folder to the new repo root.
|
|
3. In the new repo run:
|
|
|
|
```bash
|
|
npm install
|
|
npm run build
|
|
```
|
|
|
|
4. Commit and push (including `dist/`):
|
|
|
|
```bash
|
|
git add .
|
|
git commit -m "feat: initial @tach/video-player package"
|
|
git push origin main
|
|
```
|
|
|
|
5. Create a release tag:
|
|
|
|
```bash
|
|
git tag v0.1.0
|
|
git push origin v0.1.0
|
|
```
|
|
|
|
## Build Output
|
|
|
|
`npm run build` compiles TypeScript into `dist/` and copies required assets (`css/scss/svg/...`).
|
|
`dist/` must be committed before creating a new version tag.
|
|
|
|
Entrypoints are exported from `dist`:
|
|
|
|
- `@tach/video-player/core`
|
|
- `@tach/video-player/react`
|
|
- `@tach/video-player/angular`
|
|
|
|
## Storybook
|
|
|
|
Local Storybook exposes two pages for development and prop testing:
|
|
|
|
- `React/VideoPlayer` - React component entrypoint with controls for player props.
|
|
- `Angular/VideoPlayerAdapter` - adapter entrypoint with controls for runtime options (`attach/update`).
|
|
|
|
Run Storybook:
|
|
|
|
```bash
|
|
npm run storybook
|
|
```
|
|
|
|
Build static Storybook:
|
|
|
|
```bash
|
|
npm run build-storybook
|
|
```
|
|
|
|
## Installation From Git (Without npm Registry)
|
|
|
|
### npm
|
|
|
|
By tag:
|
|
|
|
```bash
|
|
npm i git+ssh://git@github.com/<org>/video-player.git#v0.1.0
|
|
```
|
|
|
|
By commit:
|
|
|
|
```bash
|
|
npm i git+ssh://git@github.com/<org>/video-player.git#<commit-sha>
|
|
```
|
|
|
|
By semver tag range:
|
|
|
|
```bash
|
|
npm i github:<org>/video-player#semver:^0.1.0
|
|
```
|
|
|
|
### pnpm
|
|
|
|
```bash
|
|
pnpm add git+ssh://git@github.com/<org>/video-player.git#v0.1.0
|
|
```
|
|
|
|
### yarn
|
|
|
|
```bash
|
|
yarn add git+ssh://git@github.com/<org>/video-player.git#v0.1.0
|
|
```
|
|
|
|
## Versioning Workflow
|
|
|
|
1. Build and bump version:
|
|
|
|
```bash
|
|
npm run release:patch
|
|
# or release:minor / release:major
|
|
```
|
|
|
|
2. Commit generated `dist` changes and `package.json` version bump:
|
|
|
|
```bash
|
|
git add .
|
|
git commit -m "chore(release): vX.Y.Z"
|
|
```
|
|
|
|
3. Push commit and tags:
|
|
|
|
```bash
|
|
git push origin main --follow-tags
|
|
```
|
|
|
|
4. Consumers update git tag/version in their `package.json`.
|
|
|
|
## Why Optional Peers
|
|
|
|
Consumers install only the framework they need:
|
|
|
|
- React app: install `react` and `react-dom`, use `@tach/video-player/react`.
|
|
- Angular app: install `@angular/*`, use `@tach/video-player/angular`.
|
|
- Shared utilities only: use `@tach/video-player/core`.
|
|
|
|
## Entrypoints
|
|
|
|
### Core
|
|
|
|
```ts
|
|
import {
|
|
isHlsSource,
|
|
selectPlaybackEngine,
|
|
VideoPlayerRuntime,
|
|
setVideoPlayerTokenProvider,
|
|
} from "@tach/video-player/core";
|
|
|
|
setVideoPlayerTokenProvider(async () => {
|
|
// Provide host-app token retrieval here.
|
|
return null;
|
|
});
|
|
|
|
const runtime = new VideoPlayerRuntime();
|
|
await runtime.init({
|
|
container: document.getElementById("player")!,
|
|
source: { src: "https://example.com/video.m3u8" },
|
|
});
|
|
```
|
|
|
|
### React
|
|
|
|
```tsx
|
|
import VideoPlayer from "@tach/video-player/react";
|
|
```
|
|
|
|
### Angular
|
|
|
|
```ts
|
|
import { AngularVideoPlayerAdapter } from "@tach/video-player/angular";
|
|
|
|
const adapter = new AngularVideoPlayerAdapter();
|
|
await adapter.attach(containerElement, {
|
|
source: { src: "https://example.com/video.m3u8" },
|
|
});
|
|
```
|
|
|
|
`AngularVideoPlayerAdapter` is intentionally framework-light: it wraps `VideoPlayerRuntime` (`attach/update/destroy/on`) and does not depend on React code.
|