@vocalstack/player 0.1.0-alpha.4 → 0.1.0-alpha.40

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/embeds.d.ts

@@ -0,0 +1,18 @@
+export interface EmbedAt {
+    t: number;
+    play: boolean;
+    host?: string;
+}
+export declare function loomId(raw: string): string | null;
+export declare function vimeoIds(raw: string): {
+    id: string;
+    h: string | null;
+} | null;
+export declare function dailymotionId(raw: string): string | null;
+export declare function twitchTarget(raw: string): {
+    video?: string;
+    channel?: string;
+    clip?: string;
+} | null;
+export declare function embedUrl(raw: string, at: EmbedAt): string | null;
+export declare function hasEmbed(raw: string | null | undefined): boolean;

package/dist/core/loomStream.d.ts

@@ -0,0 +1,4 @@
+import type { FollowSetup } from '../ui/FileFollow';
+export declare function loomStreamUrl(id: string): Promise<string | null>;
+export declare function signedLoader(master: string): (xhr: XMLHttpRequest, u: string) => void;
+export declare function loomSetup(id: string): FollowSetup;

package/dist/core/sites.d.ts

@@ -0,0 +1,13 @@
+export type SiteId = 'youtube' | 'loom' | 'vimeo' | 'twitch' | 'facebook' | 'instagram' | 'dailymotion' | 'tiktok' | 'x' | 'soundcloud' | 'kick' | 'mixcloud' | 'bandcamp';
+export interface Site {
+    id: SiteId;
+    name: string;
+    color: string;
+    hosts: RegExp;
+    glyph: string;
+    audioOnly?: boolean;
+}
+export declare const SITES: Site[];
+export declare function siteById(id: string | null | undefined): Site | null;
+export declare function hostOfUrl(url: string | null | undefined): string | null;
+export declare function siteOf(url: string | null | undefined): Site | null;

package/dist/core/voiceWait.d.ts

@@ -0,0 +1,10 @@
+export type VoiceWait = 'asked' | 'line' | null;
+export declare function voiceWait(o: {
+    on: boolean;
+    want: boolean;
+    relang: boolean;
+    playing: boolean;
+    preparing: boolean;
+    starting: number | null | undefined;
+}): VoiceWait;
+export declare const VOICE_WAIT_TITLE = "Preparing the voice\u2026";

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/errors.d.ts

@@ -3,6 +3,7 @@ export interface ErrorLike {
     code?: string;
     status?: number;
     details?: any;
+    requestId?: string;
 }
 export declare const GENERIC: string;
 export declare const OFFLINE = "Can't reach VocalStack. Check your connection.";

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';
@@ -10,3 +10,5 @@ export { Transport, ReplayScrub, ExportPanel, SummaryPanel, SpeakerCast, VoiceSh
 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';
+export { SITES, siteOf, siteById, hostOfUrl, type Site, type SiteId } from './core/sites';
+export { SiteIcon } from './ui/SiteIcon';