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