_hublib-web/README.md

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

npm install
npm run build

4. Commit and push (including dist/):

git add .
git commit -m "feat: initial @tach/video-player package"
git push origin main

5. Create a release tag:

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:

npm run storybook

Build static Storybook:

npm run build-storybook

Installation From Git (Without npm Registry)

npm

By tag:

npm i git+ssh://git@github.com/<org>/video-player.git#v0.1.0

By commit:

npm i git+ssh://git@github.com/<org>/video-player.git#<commit-sha>

By semver tag range:

npm i github:<org>/video-player#semver:^0.1.0

pnpm

pnpm add git+ssh://git@github.com/<org>/video-player.git#v0.1.0

yarn

yarn add git+ssh://git@github.com/<org>/video-player.git#v0.1.0

Versioning Workflow

1. Build and bump version:

npm run release:patch
# or release:minor / release:major

2. Commit generated dist changes and package.json version bump:

git add .
git commit -m "chore(release): vX.Y.Z"

3. Push commit and tags:

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

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

import VideoPlayer from "@tach/video-player/react";

Angular

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.