@vocalstack/player 0.1.0-alpha.7 → 0.1.0-alpha.70

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()`, `toggleMute()`, `load(link, { poster })`, which opens a video link (or a share link) in the player as if the viewer had pasted it (`poster` is an optional picture shown behind it until it plays), and `clear()`, which empties the player again. |
+| `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/archive.d.ts

@@ -0,0 +1,19 @@
+export interface ArchiveFile {
+    name?: string;
+    format?: string;
+    source?: string;
+    height?: string | number;
+    size?: string | number;
+    length?: string | number;
+}
+export declare function archiveVideoFile(id: string, meta: {
+    files?: ArchiveFile[];
+    metadata?: {
+        mediatype?: string;
+    };
+} | null | undefined, want?: string | null): string | null;
+export declare function archiveTarget(raw: string | null | undefined): {
+    id: string;
+    file: string | null;
+} | null;
+export declare function archiveSetup(id: string, file: string | null): (v: HTMLVideoElement, fail: () => void) => () => void;

package/dist/core/dailymotion.d.ts

@@ -0,0 +1,38 @@
+export declare const DAILYMOTION_PLAYER = "x8lr5";
+export declare function dailymotionPlayerId(id: string | null | undefined): string;
+export declare function dailymotionLib(player?: string | null): string;
+export declare function dailymotionFrame(video: string, at: {
+    t: number;
+    play: boolean;
+    player?: string | null;
+}): string;
+export interface DmState {
+    videoTime?: number;
+    playerIsPlaying?: boolean;
+    adIsPlaying?: boolean;
+    videoId?: string | null;
+    videoDuration?: number;
+    playerIsReplayScreen?: boolean;
+    playerIsMuted?: boolean;
+    playerVolume?: number;
+    playerIsBuffering?: boolean;
+}
+export type DmStep = {
+    kind: 'none';
+} | {
+    kind: 'reload';
+} | {
+    kind: 'play';
+} | {
+    kind: 'pause';
+} | {
+    kind: 'seek';
+    to: number;
+};
+export declare function dmStep(s: DmState, want: {
+    video: string;
+    t: number;
+    playing: boolean;
+    settling?: boolean;
+}, over?: number): DmStep;
+export declare function dmLoud(s: DmState | null | undefined): boolean;

package/dist/core/embeds.d.ts

@@ -0,0 +1,30 @@
+export interface EmbedAt {
+    t: number;
+    play: boolean;
+    host?: string;
+    player?: string | null;
+}
+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;
+export declare function urlFromEmbed(site: string | null | undefined, id: string | null | undefined): string | null;
+export declare function sourceVideoUrl(src: {
+    kind?: string;
+    url?: string | null;
+    site?: string | null;
+    embedId?: string | null;
+} | null | undefined): string | null;
+export declare function linkVideoFile(raw: string | null | undefined): string | null;
+export declare function wistiaId(raw: string): string | null;
+export declare function vidyardId(raw: string): string | null;
+export declare function stillThumb(url: string | null | undefined): string | null;

package/dist/core/facebook.d.ts

@@ -0,0 +1,26 @@
+import { type VmState, type VmStep } from './vimeo';
+export interface FbState extends VmState {
+    seen: number | null;
+}
+export declare const FB_TICK = 0.5;
+export declare function fbState(): FbState;
+export declare function fbSample(s: FbState, pos: number, now: number): void;
+export declare function fbNow(s: FbState, now: number): number | null;
+export declare function fbStep(s: FbState, want: {
+    t: number;
+    playing: boolean;
+    settling?: boolean;
+    lead?: number;
+}, now: number, over?: number): VmStep;
+export declare function fbFit(box: {
+    w: number;
+    h: number;
+}, frame: {
+    w: number;
+    h: number;
+}): {
+    scale: number;
+    w: number;
+    h: number;
+};
+export declare function fbWidth(box: number, screen: number): number;

package/dist/core/find.d.ts

@@ -0,0 +1,9 @@
+export interface FindRow {
+    id: string;
+    text: string;
+    translations?: Record<string, string>;
+}
+export declare function findMatches(rows: FindRow[], q: string, lang?: string | null): number[];
+export declare function stepMatch(at: number, total: number, dir: 1 | -1): number;
+export declare function matchAt(rows: FindRow[], matches: number[], id: string | null): number;
+export declare function findCount(at: number, total: number): string;

package/dist/core/loomStream.d.ts

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

package/dist/core/share.d.ts

@@ -0,0 +1,2 @@
+export declare function shareCodeOf(raw: string): string | null;
+export declare function playIdOf(id: string | null | undefined, withToken: boolean): string;

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' | 'streamable' | 'ted' | 'linkedin' | 'archive' | 'odysee' | 'niconico' | 'vk' | 'bitchute' | 'wistia' | 'vidyard' | 'kaltura' | 'jwplayer' | 'pinterest' | 'bluesky' | 'gdrive' | 'spreaker' | 'iheart' | 'audioboom' | 'cnn';
+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/streamTime.d.ts

@@ -0,0 +1,12 @@
+export interface Span {
+    wallStart: number;
+    wallEnd?: number | null;
+    mediaStart: number;
+}
+export interface Gap {
+    at: number;
+    shift: number;
+}
+export declare function spanGaps(spans: readonly Span[]): Gap[];
+export declare function toStream(t: number, base: number, gaps: readonly Gap[]): number;
+export declare function fromStream(y: number, base: number, gaps: readonly Gap[]): number;

package/dist/core/vimeo.d.ts

@@ -0,0 +1,38 @@
+export declare const VIMEO_ORIGIN = "https://player.vimeo.com";
+export declare function vimeoFrame(id: string, at: {
+    t: number;
+    h?: string | null;
+}): string;
+export interface VimeoMsg {
+    event?: string;
+    method?: string;
+    value?: unknown;
+    data?: Record<string, unknown>;
+}
+export declare function vimeoMsg(origin: string, data: unknown): VimeoMsg | null;
+export interface VmState {
+    t: number | null;
+    at: number;
+    playing: boolean;
+    buffering: boolean;
+    duration: number | null;
+    ended?: boolean;
+}
+export type VmStep = {
+    kind: 'none';
+} | {
+    kind: 'play';
+} | {
+    kind: 'pause';
+} | {
+    kind: 'seek';
+    to: number;
+};
+export declare function vimeoNow(s: VmState, now: number): number | null;
+export declare function vmStep(s: VmState, want: {
+    t: number;
+    playing: boolean;
+    settling?: boolean;
+    lead?: number;
+}, now: number, over?: number): VmStep;
+export declare function vimeoLoud(data: Record<string, unknown> | null | undefined): boolean;

package/dist/core/voiceFollow.d.ts

@@ -1,8 +1,15 @@
+export interface FollowWord {
+    start: number;
+    end: number;
+    text?: string;
+}
 export interface FollowLine {
     sid: number;
     start: number;
     end: number;
+    words?: readonly FollowWord[];
 }
+export type FollowTimes = Readonly<Record<string, readonly (readonly [number, number])[]>>;
 export interface FollowClip {
     src: string;
     part: number;
@@ -25,8 +32,10 @@ export type FollowTarget = {
 };
 export declare const FOLLOW_DRIFT_S = 0.5;
 export declare const FOLLOW_AHEAD = 3;
+export declare const FOLLOW_JUMP_S = 1.5;
 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 clipTimeAt(line: FollowLine, t: number, totalS: number | null, times?: readonly (readonly [number, number])[]): number;
+export declare function followTarget(lines: readonly FollowLine[], clips: ReadonlyMap<number, readonly FollowClip[]>, t: number, times?: FollowTimes): 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 {
@@ -42,4 +51,5 @@ export declare function useVoiceFollow(o: {
     t: number;
     playing: boolean;
     muted: boolean;
+    times?: FollowTimes;
 }): FollowState;

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

@@ -4,6 +4,7 @@ export interface Started {
     recordingId: string;
     token: string;
     expiresAt: string | null;
+    shareCode?: string | null;
 }
 export type PopupStatus = 'signing-in' | 'consent' | 'looking' | 'confirm' | 'checking' | 'starting';
 export declare function openPopup(appUrl: string | undefined, ask: {
@@ -11,7 +12,14 @@ export declare function openPopup(appUrl: string | undefined, ask: {
     transcription?: string;
     ask?: boolean;
     connect?: boolean;
+    tx?: {
+        voices: 'cloned' | 'synthetic';
+        spoken: string | null;
+        speakers: 'auto' | 'on' | 'off';
+    };
 }, 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 wasConnected(appUrl: string | undefined): boolean;
 export declare function rememberConnected(appUrl: string | undefined): void;
+export declare function rememberedCode(link: string): string | null;
+export declare function rememberCode(link: string, code: string | null): void;

package/dist/data/context.d.ts

@@ -51,8 +51,14 @@ export interface ApiOptions {
 }
 export declare function useApi(o: ApiOptions): PlayerApi;
 export declare function withMedia(api: PlayerApi, media: string | null): PlayerApi;
-export declare function loadSource(api: PlayerApi, id: string): Promise<PlayerSource>;
-export declare function useSource(api: PlayerApi, id: string): {
+export declare function isLiveRecording(r: Pick<Recording, 'kind' | 'state'> | null | undefined): boolean;
+export declare function streamOffsetS(ingest: {
+    mediaAt?: string | null;
+    streamStartedAt?: string | null;
+} | null | undefined): number;
+export declare function liveJob(recording: Recording, url: string | null | undefined): TranscriptionJob | null;
+export declare function loadSource(api: PlayerApi, id: string, recordingId?: string | null): Promise<PlayerSource>;
+export declare function useSource(api: PlayerApi, id: string, recordingId?: string | null): {
     source: PlayerSource | null;
     gone: boolean;
     error: ErrorLike | null;

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

@@ -14,6 +14,7 @@ export declare const D: {
     chevronRight: string;
     chevronLeft: string;
     chevronDown: string;
+    chevronUp: string;
     external: string;
     arrowLeft: string;
     arrowRight: string;

package/dist/ds/LanguagePicker.d.ts

@@ -12,13 +12,14 @@ export interface LanguageListProps {
     languages: PickerLanguage[];
     searchPlaceholder?: string;
     none?: string;
+    noneNote?: string;
     pinned?: string[];
     recent?: string[];
     requireVoice?: boolean;
     keepOpen?: boolean;
     busy?: string | null;
 }
-export declare function useLanguageList({ open, onClose, value, onSelect, languages, searchPlaceholder, none, pinned, recent, requireVoice, keepOpen, busy }: LanguageListProps & {
+export declare function useLanguageList({ open, onClose, value, onSelect, languages, searchPlaceholder, none, noneNote, pinned, recent, requireVoice, keepOpen, busy }: LanguageListProps & {
     open: boolean;
     onClose: () => void;
 }): {

package/dist/index.d.ts

@@ -1,12 +1,15 @@
 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';
 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 { useTxPlayer, useTxVoice, useDuck, useFlash, useYtLead, useFindPull, type FindState, 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';
+export { SITES, siteOf, siteById, hostOfUrl, type Site, type SiteId } from './core/sites';
+export { SiteIcon } from './ui/SiteIcon';
+export { hasEmbed, linkVideoFile, sourceVideoUrl } from './core/embeds';