@vocalstack/player 0.1.0-alpha.0 → 0.1.0-alpha.10

package/README.md

@@ -21,14 +21,57 @@ export function Video() {
 
 | Prop | Default | |
 |---|---|---|
-| `id` | required | A share code. Or, with `token`, a transcription id. |
-| `token` | none | A browser token (or a function returning one) for a private transcription. Never pass an API key to a browser. |
+| `id` | | A share code. Or, with `token`, a transcription id. With neither `id` nor `src`, the player opens on a box where the visitor pastes any video link and transcribes it in their own VocalStack account. |
+| `src` | | A video or audio link (YouTube, Vimeo, an mp3 or any media URL) instead of `id`. If the visitor has already transcribed it with VocalStack, it plays. If not, they are asked whether to start transcribing it. With `token`, the link is looked up in that account instead. |
+| `token` | | A browser token (or a function returning one) for a private transcription. Never pass an API key to a browser. |
 | `mode` | `'video'` | `'video'` for the full player, `'transcript'` for the reading view with a player. |
-| `layout` | `'embed'` | `'embed'` sizes to its container (16:9 for video); `'page'` fills the page. |
-| `initial` | none | `{ lang, cc, translateAudio, clonedVoices, removeBackground, labels, words, startAt }` |
+| `layout` | `'embed'` | `'embed'` sizes to its container (16:9 for video). `'page'` fills the page. |
+| `settings` | | Settings you control. Changing a value updates the player. See below. |
+| `initial` | | The same settings, applied once at the start. The viewer can change them afterwards. |
+| `onSettingsChange` | | Called with all the settings whenever the viewer changes one. |
+| `controls` | all on | `{ language, subtitles, audio, export, share, fullscreen, settings }`. Pass `false` to hide one. |
+| `autoplay` | `true` | Starts muted where the browser requires it. |
+| `startAt` | | Start time in seconds. |
 | `endCard` | on | At the end of a video, offers to transcribe another link in the visitor's own VocalStack account. Pass `false` to turn it off. |
 | `baseUrl` | `https://api.vocalstack.com` | |
-| `onSource`, `onProgress`, `onError` | none | Callbacks for the loaded transcription, the transcription progress (0-100, `null` when done), and errors. |
+| `onSource`, `onProgress`, `onError` | | Called with the loaded transcription, the transcription progress (0-100, `null` when done), and errors. |
+| `onPlayback` | | Called about ten times a second while anything changes, with `{ t, dur, playing, idx, seekN, lang }`: the time in seconds, the length, whether it plays, the index of the current line, a counter that grows on every seek, and the language shown. |
+| `ref` | | A `PlayerHandle`: `seek(t)`, `play()`, `pause()`, `toggle()`. |
+| `compact` | `false` | Small controls at any width, and no title, summary or share card when paused. For a player inside a side column or card. |
+| `poster` | | An image shown behind the player before a video is chosen or before the visitor connects. |
+
+### Settings
+
+```ts
+{
+  lang?: string | null;          // translate into this language code; null = as spoken
+  subtitles?: boolean;           // captions over the video
+  speakerLabels?: boolean;       // who is speaking, before each line
+  wordHighlight?: boolean;       // follow each word as it is spoken
+  translateAudio?: boolean;      // hear the translation read aloud
+  voices?: 'cloned' | 'synthetic';
+  removeBackground?: boolean;    // play only the speech
+}
+```
+
+```tsx
+<VocalStackPlayer
+  id="r4m4srrrhi24"
+  settings={{ lang: 'es', speakerLabels: true, voices: 'cloned' }}
+  controls={{ export: false, share: false }}
+  onSettingsChange={(s) => console.log(s)}
+/>
+
+<VocalStackPlayer src="https://www.youtube.com/watch?v=QWCLiPOgeuw" />
+```
+
+Follow and drive it from your page:
+
+```tsx
+const player = useRef<PlayerHandle>(null);
+<VocalStackPlayer ref={player} id="r4m4srrrhi24" onPlayback={(s) => setAt(s.t)} />
+<button onClick={() => player.current?.seek(42)}>Jump to 0:42</button>
+```
 
 Theme it by overriding the CSS variables on `.vsp`, for example `--vsp-radius`, `--brand` and `--vs-font-sans`.
 

package/dist/core/voiceFollow.d.ts

@@ -27,6 +27,7 @@ export declare const FOLLOW_DRIFT_S = 0.5;
 export declare const FOLLOW_AHEAD = 3;
 export declare function lineAt(lines: readonly FollowLine[], t: number): number;
 export declare function followTarget(lines: readonly FollowLine[], clips: ReadonlyMap<number, readonly FollowClip[]>, t: number): FollowTarget;
+export declare function mayRunOn(lines: readonly FollowLine[], t: number, playingSid: number | null): boolean;
 export declare function upcomingSrcs(lines: readonly FollowLine[], clips: ReadonlyMap<number, readonly FollowClip[]>, t: number, n?: number): string[];
 export interface FollowState {
     missing: number | null;

package/dist/data/connect.d.ts

@@ -5,10 +5,13 @@ export interface Started {
     token: string;
     expiresAt: string | null;
 }
-export type PopupStatus = 'signing-in' | 'consent' | 'checking' | 'starting';
+export type PopupStatus = 'signing-in' | 'consent' | 'looking' | 'confirm' | 'checking' | 'starting';
 export declare function openPopup(appUrl: string | undefined, ask: {
     url?: string;
     transcription?: string;
-}, onStatus?: (s: PopupStatus) => void): Promise<Started | null>;
+    ask?: boolean;
+    connect?: boolean;
+}, onStatus?: (s: PopupStatus) => void): Promise<Started | 'connected' | null>;
 export declare function startFromEmbed(appUrl: string | undefined, url: string, onStatus?: (s: PopupStatus) => void): Promise<Started | null>;
-export declare function refreshToken(appUrl: string | undefined, transcriptionId: string): Promise<Started | null>;
+export declare function wasConnected(appUrl: string | undefined): boolean;
+export declare function rememberConnected(appUrl: string | undefined): void;

package/dist/data/context.d.ts

@@ -26,10 +26,14 @@ export interface PlayerSource {
     sharedBy: string | null;
 }
 export declare function usePlayerApi(): PlayerApi;
-export declare function PlayerApiProvider({ value, children }: {
-    value: PlayerApi;
+export type PlayerApiProviderProps = {
     children: ReactNode;
-}): import("react").JSX.Element;
+} & ({
+    value: PlayerApi;
+} | (Partial<ApiOptions> & {
+    value?: undefined;
+}));
+export declare function PlayerApiProvider(props: PlayerApiProviderProps): import("react").JSX.Element;
 export declare function isTranscriptionId(id: string): boolean;
 export type TokenSource = string | (() => string | undefined | null | Promise<string | undefined | null>);
 export interface Listen {
@@ -38,10 +42,12 @@ export interface Listen {
     token: string;
 }
 export interface ApiOptions {
-    id: string;
+    id?: string | null;
     token?: TokenSource | null;
     baseUrl?: string | null;
     listen?: Listen | null;
+    listenerToken?: string | null;
+    client?: VocalStack | null;
 }
 export declare function useApi(o: ApiOptions): PlayerApi;
 export declare function withMedia(api: PlayerApi, media: string | null): PlayerApi;

package/dist/data/lookup.d.ts

@@ -0,0 +1,4 @@
+import { type TokenSource } from './context';
+export declare function useLookup(src: string | null, token: TokenSource | null, baseUrl: string | null): {
+    id: string;
+} | null | undefined;

package/dist/index.d.ts

@@ -1,6 +1,12 @@
 import './styles.css';
-export { VocalStackPlayer, type VocalStackPlayerProps, type PlayerSettings } from './ui/VocalStackPlayer';
+export { VocalStackPlayer, type VocalStackPlayerProps, type PlayerSettings, type PlayerControls, type PlayerHandle, type PlaybackState } from './ui/VocalStackPlayer';
 export type { EndCardOptions } from './ui/EndCard';
-export type { PlayerSource, TokenSource } from './data/context';
+export { PlayerApiProvider, usePlayerApi, useApi, type PlayerApi, type PlayerApiProviderProps, type ApiOptions, type PlayerSource, type TokenSource, type Listen } from './data/context';
 export type { ErrorLike } from './data/errors';
-export { setErrorReporter } from './core/audio';
+export { setErrorReporter, type MediaCred } from './core/audio';
+export { useTranscript } from './data/transcript';
+export { useTxPlayer, useTxVoice, useDuck, useFlash, useYtLead, useFindPull, YtFollow, MuteButton, TxLines, TxFind, lineWords, spokenWordOf, pictureT, lineEnd, PAUSE_D, PLAY_D, NO_SEEK, PUB_SIDE, type TxPlayer, type YtLead, type VoiceSheetHooks, type VoiceSheetCtx, type NoCloneNote } from './ui/core';
+export { Transport, ReplayScrub, ExportPanel, SummaryPanel, SpeakerCast, VoiceSheetBody, useSummaryIn, useViewportTranslation, useArchiveVoice, useVoiceCatalogue, type AvailableVoice, type CastMember, type SummaryState } from './ui/shared';
+export { FullVideo, MiniPlayer, PanelSeek, browserFull, realFull, setFullTarget, type PlayerPos, type PlayerTransport, type VoicesBtn } from './ui/full';
+export { useBackgroundBed, useSeparatedTrack, bedNote, trackPlan, REMOVE_BG_LABEL, REMOVE_BG_NOTE, type BedState, type TrackPlan, type Separated } from './core/background';
+export { snapPosition, placePosition, type PlayPos } from './core/playPosition';