@vocalstack/player 0.0.0-stage → 0.1.0-alpha.1

package/dist/ui/full.d.ts

@@ -0,0 +1,109 @@
+import type { Strings } from '../data/i18n';
+export declare function setFullTarget(el: HTMLElement | null): void;
+export declare function browserFull(on: boolean): void;
+export declare function realFull(on: boolean): void;
+export type PlayerPos = {
+    live: boolean;
+    atEdge: boolean;
+    edgeFrac: number | null;
+    readyFrac?: number | null;
+    pct: number;
+    atLabel: string;
+    labelAt: (frac: number) => string;
+    endLabel: string;
+    onSeek: (frac: number) => void;
+};
+export type VoicesBtn = {
+    on: boolean;
+    title: string;
+    onClick: () => void;
+};
+export type PlayerTransport = {
+    prevOn: boolean;
+    nextOn: boolean;
+    onPrev: () => void;
+    onNext: () => void;
+    playing: boolean;
+    playable: boolean;
+    playTitle: string;
+    onPlay?: () => void;
+    busy?: boolean;
+};
+export declare function MiniPlayer({ pos, transport, chip, voices, onShare, onFull, copied }: {
+    pos: PlayerPos;
+    transport: PlayerTransport;
+    chip: React.ReactNode;
+    voices: VoicesBtn;
+    onShare?: () => void;
+    onFull: () => void;
+    copied: React.ReactNode;
+}): import("react").JSX.Element;
+export declare function FullVideo({ noFull, page, picture, title, desk, pos, sub, wait, pct, mute, cc, ad, chip, transport, picker, sheet, voices, voicesBtn, sheetOpen, onShare, onSettings, paused, copied, onTouch, onClose }: {
+    noFull?: boolean;
+    page?: boolean;
+    onTouch: () => void;
+    onSettings?: () => void;
+    paused?: {
+        title: string;
+        summary: string | null;
+        share?: {
+            url: (t: number | null) => string;
+            at: number;
+        } | null;
+    } | null;
+    voices: React.ReactNode;
+    voicesBtn: VoicesBtn | null;
+    picture: React.ReactNode;
+    title: string;
+    desk: boolean;
+    pos: PlayerPos;
+    sub: {
+        who: string | null;
+        color: string;
+        words: {
+            t: string;
+            sp: string;
+            dim: boolean;
+        }[];
+        cursor?: number | null;
+    } | null;
+    wait?: React.ReactNode;
+    pct?: number | null;
+    mute?: {
+        muted: boolean;
+        onToggle: () => void;
+    };
+    cc?: {
+        on: boolean;
+        onToggle: () => void;
+    };
+    ad?: boolean;
+    chip: React.ReactNode;
+    transport: PlayerTransport;
+    picker: React.ReactNode;
+    sheet: React.ReactNode;
+    sheetOpen: boolean;
+    onShare?: () => void;
+    copied: React.ReactNode;
+    onClose?: () => void;
+}): import("react").JSX.Element;
+export declare function ListenerHeader({ dark, back: onBack, home, live, title, badge, subline, onOptions, optionsActive }: {
+    dark: boolean;
+    back?: () => void;
+    home?: boolean;
+    live?: boolean;
+    title?: string;
+    badge?: React.ReactNode;
+    subline?: string;
+    onOptions: () => void;
+    optionsActive?: boolean;
+}): import("react").JSX.Element;
+export declare const modeOptions: (t: Strings, video?: boolean) => ({
+    value: "read";
+    label: string;
+    icon: import("react").JSX.Element;
+} | {
+    value: "listen";
+    label: import("react").JSX.Element;
+    icon: import("react").JSX.Element;
+})[];

package/dist/ui/shared.d.ts

@@ -0,0 +1,276 @@
+import { type ReactNode } from 'react';
+import type { Correction, LanguageLists, ExportFormat } from '@vocalstack/js-sdk';
+import { type Lane, type Model, type Row, type Word } from '../core/transcript';
+import { type MediaCred } from '../core/audio';
+import { type ReadPos, type VoiceTrackRow } from '../core/voiceplayer';
+import { type ErrorLike } from '../data/transcript';
+import type { Strings } from '../data/i18n';
+export declare function feedInset(el: HTMLElement): {
+    top: number;
+    bottom: number;
+};
+export declare const NO_VOICE_TIP = "This language has no synthetic voice yet, so you can read it but not listen.";
+export declare function rowKey(onClick: () => void): (e: React.KeyboardEvent<HTMLElement>) => void;
+export declare function useFeedBar(ref: React.RefObject<HTMLDivElement>, thumbRef: React.RefObject<HTMLDivElement>, extra?: number): void;
+export declare function FeedBar({ thumbRef }: {
+    thumbRef: React.RefObject<HTMLDivElement>;
+}): import("react").JSX.Element;
+export declare function Toast({ error, onClose }: {
+    error: ErrorLike | null;
+    onClose: () => void;
+}): import("react").JSX.Element | null;
+export declare function SpeakerTag({ model, speaker, showLabels, pending, diarized }: {
+    model: Model;
+    speaker: number;
+    showLabels: boolean;
+    pending?: boolean;
+    diarized?: boolean;
+}): import("react").JSX.Element | null;
+export declare function VoiceIdGlyph({ color }: {
+    color: string;
+}): import("react").JSX.Element;
+export declare function Transport({ chip, note, scrub, mute, voice, prev, play, next }: {
+    chip: ReactNode;
+    note?: ReactNode;
+    scrub: ReactNode;
+    mute: ReactNode;
+    voice: ReactNode;
+    prev: ReactNode;
+    play: ReactNode;
+    next: ReactNode;
+}): import("react").JSX.Element;
+export declare function ReplayScrub({ index, total, atLabel, durLabel, stepLabel, onSeek, onSeekFrac, onScrubStart, onScrubEnd, frac, glideMs }: {
+    index: number;
+    total: number;
+    atLabel: string;
+    durLabel: string;
+    stepLabel: string;
+    onSeek: (i: number) => void;
+    onSeekFrac?: (f: number) => void;
+    onScrubStart?: () => void;
+    onScrubEnd?: () => void;
+    frac?: number;
+    glideMs?: number;
+}): import("react").JSX.Element;
+export interface RowFixes {
+    script: number;
+    manual: boolean;
+    manualCount: number;
+}
+export declare function rowFixes(r: Row, corrections: Correction[] | undefined, slots?: Set<string>): RowFixes;
+export declare const isFixedWord: (w: Word, slots?: Set<string>, listener?: boolean) => boolean;
+export declare function FixBadges({ f, desk, onOpen }: {
+    f: RowFixes;
+    desk?: boolean;
+    onOpen?: () => void;
+}): import("react").JSX.Element;
+export declare function FixPen({ onOpen, alone }: {
+    onOpen: () => void;
+    alone: boolean;
+}): import("react").JSX.Element;
+export declare function CorrectedBadge({ desk }: {
+    desk?: boolean;
+}): import("react").JSX.Element;
+export declare function TrText({ text, query, pos, warm }: {
+    text: string;
+    query?: string;
+    pos?: ReadPos | null;
+    warm: boolean;
+}): import("react").JSX.Element;
+export declare function Words({ words, text, query, colour, tappable, tapAll, onWord, corrected, pos, warm, slots, listener, fixes }: {
+    fixes?: boolean;
+    slots?: Set<string>;
+    listener?: boolean;
+    words: Word[];
+    text: string;
+    query?: string;
+    colour: boolean;
+    tappable?: boolean;
+    tapAll?: boolean;
+    onWord?: (w: Word) => void;
+    corrected?: boolean;
+    pos?: ReadPos | null;
+    warm?: boolean;
+}): import("react").JSX.Element;
+export declare function worstConf(r: Row): '' | 'mid' | 'low';
+export declare function useViewportTranslation(recordingId: string | null, lang: string | null, rows: Row[], merge: (lang: string, made: Record<string, string>) => void): (ids: number[]) => void;
+export interface AvailableVoice {
+    id: string;
+    name: string;
+    cloned: boolean;
+    default: boolean;
+    previewUrl?: string;
+    quality?: 1 | 2 | 3 | null;
+    lagS?: number | null;
+    accent?: string | null;
+    gender?: 'male' | 'female' | null;
+    ready?: boolean;
+    consent?: 'pending' | 'granted' | null;
+    speaker?: number | null;
+    auto?: boolean;
+    library?: boolean;
+    live?: boolean;
+}
+export declare function voiceDetail(v: AvailableVoice): string;
+interface VoiceGroupRow {
+    v: AvailableVoice;
+    headOn: boolean;
+    head: string;
+    headCount: number;
+    rule: string;
+}
+export declare function voiceGroups(list: AvailableVoice[], t: Strings): VoiceGroupRow[];
+export interface CastMember {
+    key: number;
+    voiceId?: string | null;
+    name: string;
+    initial: string;
+    lane: Lane | null;
+    sex?: 'male' | 'female' | null;
+    fg?: string;
+    soft?: string;
+    hasVoice?: boolean;
+}
+export declare function speakerRoster(rows: {
+    speaker: number;
+}[], model: Model, unknownLabel: string): CastMember[];
+export declare function castKey(map: Map<number, string>): string;
+export declare function parseCast(key: string | null | undefined): Map<number, string> | null;
+export declare function autoCast(roster: CastMember[], voices: AvailableVoice[], clones?: boolean): Map<number, string>;
+export declare function SpeakerCast({ roster, selected, onSelect, noClone, building, short, sexOf, t }: {
+    roster: CastMember[];
+    selected: number | null;
+    onSelect: (key: number) => void;
+    noClone: (p: CastMember) => boolean;
+    building?: (p: CastMember) => boolean;
+    short?: (p: CastMember) => boolean;
+    sexOf: (p: CastMember) => 'male' | 'female' | null;
+    t: Strings;
+}): import("react").JSX.Element | null;
+export declare function VoiceSheetBody({ cast, voices, currentId, armedId, sampleId, dlId, onPick, onAdd, onUse, usedBy, foldKey, foldFor, problem, noClone, t }: {
+    cast?: ReactNode;
+    voices: AvailableVoice[];
+    currentId: string | null;
+    armedId?: string | null;
+    sampleId?: string | null;
+    dlId?: string | null;
+    problem?: string | null;
+    noClone?: {
+        title: string;
+        sub: string;
+        tip?: string;
+        busy?: boolean;
+        action?: () => void;
+    } | null;
+    onPick: (v: AvailableVoice) => void;
+    onAdd?: (v: AvailableVoice) => void;
+    onUse: (id: string) => void;
+    usedBy?: (v: AvailableVoice) => string | null;
+    foldKey?: string | number | null;
+    foldFor?: 'male' | 'female' | null;
+    t: Strings;
+}): import("react").JSX.Element;
+export declare function Equaliser({ height, width }: {
+    height: number;
+    width?: number;
+}): import("react").JSX.Element;
+export declare function langMeta(langs: LanguageLists | null, code: string | null): {
+    flag: string | import("react").JSX.Element;
+    code: string;
+    label: string;
+    name: string;
+};
+export declare const PLAIN_CHIP: React.CSSProperties;
+export declare const BAR_CHIP: React.CSSProperties;
+export declare function useVoiceCatalogue(lang: string | null, active: boolean, version?: number, rec?: {
+    id: string | null;
+    token?: string | null;
+    shareCode?: string | null;
+}): {
+    voices: AvailableVoice[];
+} | null;
+export declare function namedCount(model: Model): number;
+export declare function useArchiveVoice({ recordingId, lang, ended, cred, pickedVoice, sentenceIds }: {
+    recordingId: string | null;
+    lang: string | null;
+    ended: boolean;
+    cred: MediaCred;
+    pickedVoice: string | null;
+    sentenceIds?: number[];
+}): {
+    listed: {
+        recordingId: string;
+        lang: string;
+        rows: VoiceTrackRow[];
+    } | null;
+    rows: VoiceTrackRow[];
+    track: VoiceTrackRow | null;
+    renderVoiceId: string | null;
+    rendering: boolean;
+    failed: string | null;
+    clips: import("../core/clipQueue").VoiceClip[];
+    requestRender: (voiceId: string | null, cast?: Map<number, string> | null) => Promise<void>;
+    forget: () => void;
+    reload: () => void;
+    setNear: import("react").Dispatch<import("react").SetStateAction<number | null>>;
+    missing: number;
+    coming: Set<number>;
+};
+export interface TabSpec<K extends string> {
+    key: K;
+    label: string;
+    icon?: string;
+    sw?: number;
+}
+export declare function HeadTap({ onBack, children }: {
+    onBack: () => void;
+    children: React.ReactNode;
+}): import("react").JSX.Element;
+export declare function TabBar<K extends string>({ tabs, current, onPick, gap, fold, side }: {
+    tabs: TabSpec<K>[];
+    current: K | 'none';
+    onPick: (k: K | 'none') => void;
+    side?: boolean;
+    gap?: boolean;
+    fold?: boolean;
+}): import("react").JSX.Element;
+type Download = {
+    name: string;
+    meta: string;
+    onClick: () => void | Promise<unknown>;
+};
+export declare function ExportPanel({ audio, video, formats, onExport }: {
+    audio?: Download | null;
+    video?: Download | null;
+    formats?: boolean;
+    onExport: (k: ExportFormat) => void | Promise<unknown>;
+}): import("react").JSX.Element;
+export declare function shareLink(url: string, title: string, onCopied?: () => void): void;
+export type SummaryState = {
+    state: 'idle' | 'pending' | 'ready' | 'unavailable' | 'not_requested';
+    request?: () => void;
+    title?: string;
+    summary?: string;
+    slow?: boolean;
+    retry: () => void;
+};
+export declare function useSummaryIn(base: SummaryState, recordingId: string | null, lang: string | null): SummaryState;
+export declare function summaryOf(rec: {
+    title?: string | null;
+    summary?: string | null;
+} | null | undefined): SummaryState;
+export declare function SummaryPanel({ s }: {
+    s: SummaryState;
+}): import("react").JSX.Element;
+export declare function LiveVideo({ ytId, title, timeLabel, radius, style, large, children, picture }: {
+    ytId: string;
+    title: string;
+    timeLabel?: string | null;
+    radius?: number;
+    style?: React.CSSProperties;
+    large?: boolean;
+    children?: React.ReactNode;
+    picture?: React.ReactNode;
+}): import("react").JSX.Element;
+export declare function useDragScroll(enabled?: boolean, external?: React.RefObject<HTMLDivElement>): import("react").MutableRefObject<HTMLDivElement | null>;
+export {};

package/dist/ui/useDesk.d.ts

@@ -0,0 +1 @@
+export declare function useDesk(forced?: boolean): boolean;

package/dist/ui/wait.d.ts

@@ -0,0 +1,24 @@
+export type PlayerWaitKind = 'translating' | 'voice' | 'starting' | 'translateFailed' | 'voiceFailed';
+export interface PlayerWaitState {
+    kind: PlayerWaitKind;
+    lang: string;
+    since?: number | null;
+}
+export declare function playerWaitOf(o: {
+    lang: string | null;
+    langName: string;
+    translating: boolean;
+    translateFailed: string | null;
+    voiceFailed: boolean;
+    relang: boolean;
+    starting: number | null | undefined;
+    slowLine: boolean;
+    lineSince: number | null;
+}): PlayerWaitState | null;
+export declare function useHeld(on: boolean, ms: number): [boolean, number | null];
+export declare function PlayerWait({ state, line, onRetry, onOriginal }: {
+    state: PlayerWaitState;
+    line?: string | null;
+    onRetry: () => void;
+    onOriginal: () => void;
+}): import("react").JSX.Element;

package/package.json

@@ -1,6 +1,51 @@
 {
   "name": "@vocalstack/player",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0-alpha.1",
+  "description": "VocalStack video and transcript player for React: synced transcript, subtitles, spoken translations and background sound, over the public VocalStack API.",
+  "license": "MIT",
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vocalstack/player.git"
+  },
+  "homepage": "https://vocalstack.com",
+  "sideEffects": [
+    "*.css"
+  ],
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./style.css": "./dist/style.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "vite build && tsc -p tsconfig.build.json",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "test": "node --import ./test-resolve.mjs --test test/*.test.ts",
+    "dev": "vite --config example/vite.config.ts",
+    "prepublishOnly": "npm run typecheck && npm test && npm run build"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "dependencies": {
+    "@vocalstack/js-sdk": "^2.0.0-alpha.1"
+  },
+  "devDependencies": {
+    "@types/node": "^24.0.0",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.3.4",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "typescript": "^5.9.0",
+    "vite": "^5.4.11"
+  }
+}