@vocalstack/player 0.1.0-alpha.6 → 0.1.0-alpha.8

package/README.md

@@ -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/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/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';