@vocalstack/player 0.1.0-alpha.3 → 0.1.0-alpha.31

package/README.md

@@ -21,7 +21,7 @@ export function Video() {
 
 | Prop | Default | |
 |---|---|---|
-| `id` | | A share code. Or, with `token`, a transcription id. |
+| `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. |
@@ -35,6 +35,10 @@ export function Video() {
 | `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` | | 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
 
@@ -61,6 +65,14 @@ export function Video() {
 <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`.
 
 ## License

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,11 +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;
     ask?: boolean;
-}, onStatus?: (s: PopupStatus) => void): Promise<Started | null>;
+    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/title.d.ts

@@ -0,0 +1,8 @@
+export declare function useYtTitle(ytId: string | null): string | null;
+export declare function displayName(parts: {
+    name?: string | null;
+    sourceName?: string | null;
+    ytTitle?: string | null;
+    url?: string | null;
+    id: string;
+}): string;

package/dist/ds/Controls.d.ts

@@ -67,7 +67,7 @@ export declare function IconButton({ children, onClick, label, size, variant, bo
     active?: boolean;
     title?: string;
 }): import("react").JSX.Element;
-export declare function LanguageChip({ flag, code, label, onClick, variant, block, bordered, size, style }: {
+export declare function LanguageChip({ flag, code, label, onClick, variant, block, bordered, size, style, flagOnly }: {
     flag: ReactNode;
     code: string;
     label?: string;
@@ -77,6 +77,7 @@ export declare function LanguageChip({ flag, code, label, onClick, variant, bloc
     bordered?: boolean;
     size?: 'sm';
     style?: React.CSSProperties;
+    flagOnly?: boolean;
 }): import("react").JSX.Element;
 export declare function CopyButton({ value, label, onCopied }: {
     value: string;

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import './styles.css';
-export { VocalStackPlayer, type VocalStackPlayerProps, type PlayerSettings, type PlayerControls } 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 { PlayerApiProvider, usePlayerApi, useApi, type PlayerApi, type PlayerApiProviderProps, type ApiOptions, type PlayerSource, type TokenSource, type Listen } from './data/context';
 export type { ErrorLike } from './data/errors';