animot-presenter 0.5.6 → 0.5.9

package/dist/utils/embed-players.d.ts

@@ -0,0 +1,50 @@
+/**
+ * Unified wrapper around YouTube IFrame Player API and Vimeo Player.js so the
+ * rest of the app can drive embedded videos with the same play/pause/seek/
+ * volume calls used for `<video>` elements. The provider libraries are lazy-
+ * loaded on first use so a project with no embeds doesn't pay the network cost.
+ *
+ * What this enables:
+ *   • Auto-pause embeds when the user navigates away from a slide.
+ *   • Reset embed `currentTime` to startTime on slide enter (otherwise YouTube
+ *     persists position across iframe rebuilds).
+ *   • Render OUR own play/pause/scrub controls on top of the iframe (we hide
+ *     YouTube's chrome via `controls=0` in the embed URL).
+ *
+ * What this does NOT enable: server-side export capture. YouTube/Vimeo render
+ * frames inside their player; Puppeteer can't screenshot cross-origin iframe
+ * content, so exports of slides containing embeds still fall back to the
+ * provider-supplied thumbnail (handled in /present's render path).
+ */
+export declare function loadYouTubeAPI(): Promise<typeof window['YT']>;
+export declare function loadVimeoAPI(): Promise<any>;
+export interface UnifiedPlayer {
+    play(): Promise<void> | void;
+    pause(): Promise<void> | void;
+    seekTo(seconds: number): Promise<void> | void;
+    getCurrentTime(): Promise<number>;
+    getDuration(): Promise<number>;
+    setVolume(v: number): void;
+    setMuted(m: boolean): void;
+    setPlaybackRate(r: number): void;
+    destroy(): void;
+    /** Subscribe to playing-state changes. Call returned fn to unsubscribe. */
+    onStateChange(cb: (state: 'playing' | 'paused' | 'ended' | 'buffering' | 'cued' | 'unstarted') => void): () => void;
+}
+interface CreateOptions {
+    provider: 'youtube' | 'vimeo';
+    /** The actual <iframe> element. We attach the player to it. */
+    iframe: HTMLIFrameElement;
+    /** Provider video ID (used for the YouTube ctor; Vimeo binds straight to iframe). */
+    videoId?: string;
+    startTime?: number;
+    muted?: boolean;
+}
+export declare function createEmbedPlayer(opts: CreateOptions): Promise<UnifiedPlayer>;
+declare global {
+    interface Window {
+        YT: any;
+        onYouTubeIframeAPIReady?: () => void;
+    }
+}
+export {};

package/dist/utils/embed-players.js

@@ -0,0 +1,152 @@
+/**
+ * Unified wrapper around YouTube IFrame Player API and Vimeo Player.js so the
+ * rest of the app can drive embedded videos with the same play/pause/seek/
+ * volume calls used for `<video>` elements. The provider libraries are lazy-
+ * loaded on first use so a project with no embeds doesn't pay the network cost.
+ *
+ * What this enables:
+ *   • Auto-pause embeds when the user navigates away from a slide.
+ *   • Reset embed `currentTime` to startTime on slide enter (otherwise YouTube
+ *     persists position across iframe rebuilds).
+ *   • Render OUR own play/pause/scrub controls on top of the iframe (we hide
+ *     YouTube's chrome via `controls=0` in the embed URL).
+ *
+ * What this does NOT enable: server-side export capture. YouTube/Vimeo render
+ * frames inside their player; Puppeteer can't screenshot cross-origin iframe
+ * content, so exports of slides containing embeds still fall back to the
+ * provider-supplied thumbnail (handled in /present's render path).
+ */
+let ytApiPromise = null;
+export function loadYouTubeAPI() {
+    if (typeof window === 'undefined')
+        return Promise.reject(new Error('SSR'));
+    if (window.YT && window.YT.Player)
+        return Promise.resolve(window.YT);
+    if (ytApiPromise)
+        return ytApiPromise;
+    ytApiPromise = new Promise((resolve, reject) => {
+        // The IFrame API expects a global callback. Chain any pre-existing one
+        // so we play nicely with other libraries on the page.
+        const prev = window.onYouTubeIframeAPIReady;
+        window.onYouTubeIframeAPIReady = () => {
+            if (typeof prev === 'function') {
+                try {
+                    prev();
+                }
+                catch { }
+            }
+            resolve(window.YT);
+        };
+        const tag = document.createElement('script');
+        tag.src = 'https://www.youtube.com/iframe_api';
+        tag.async = true;
+        tag.onerror = () => reject(new Error('Failed to load YouTube IFrame API'));
+        document.head.appendChild(tag);
+    });
+    return ytApiPromise;
+}
+let vimeoApiPromise = null;
+export function loadVimeoAPI() {
+    if (typeof window === 'undefined')
+        return Promise.reject(new Error('SSR'));
+    const w = window;
+    if (w.Vimeo && w.Vimeo.Player)
+        return Promise.resolve(w.Vimeo);
+    if (vimeoApiPromise)
+        return vimeoApiPromise;
+    vimeoApiPromise = new Promise((resolve, reject) => {
+        const tag = document.createElement('script');
+        tag.src = 'https://player.vimeo.com/api/player.js';
+        tag.async = true;
+        tag.onload = () => resolve(window.Vimeo);
+        tag.onerror = () => reject(new Error('Failed to load Vimeo Player API'));
+        document.head.appendChild(tag);
+    });
+    return vimeoApiPromise;
+}
+export async function createEmbedPlayer(opts) {
+    if (opts.provider === 'youtube')
+        return createYouTubePlayer(opts);
+    return createVimeoPlayer(opts);
+}
+async function createYouTubePlayer(opts) {
+    const YT = await loadYouTubeAPI();
+    let stateCbs = [];
+    const player = await new Promise((resolve) => {
+        const p = new YT.Player(opts.iframe, {
+            events: {
+                onReady: () => resolve(p),
+                onStateChange: (e) => {
+                    const map = {
+                        [-1]: 'unstarted',
+                        [0]: 'ended',
+                        [1]: 'playing',
+                        [2]: 'paused',
+                        [3]: 'buffering',
+                        [5]: 'cued'
+                    };
+                    const state = map[e.data] ?? 'unstarted';
+                    for (const cb of stateCbs)
+                        try {
+                            cb(state);
+                        }
+                        catch { }
+                }
+            }
+        });
+    });
+    if (opts.muted)
+        player.mute();
+    if (opts.startTime)
+        try {
+            player.seekTo(opts.startTime, true);
+        }
+        catch { }
+    return {
+        play: () => player.playVideo(),
+        pause: () => player.pauseVideo(),
+        seekTo: (s) => player.seekTo(s, true),
+        getCurrentTime: async () => Number(player.getCurrentTime()) || 0,
+        getDuration: async () => Number(player.getDuration()) || 0,
+        setVolume: (v) => player.setVolume(Math.max(0, Math.min(100, v * 100))),
+        setMuted: (m) => (m ? player.mute() : player.unMute()),
+        setPlaybackRate: (r) => player.setPlaybackRate(r),
+        destroy: () => { try {
+            player.destroy();
+        }
+        catch { } },
+        onStateChange: (cb) => { stateCbs.push(cb); return () => { stateCbs = stateCbs.filter((f) => f !== cb); }; }
+    };
+}
+async function createVimeoPlayer(opts) {
+    const Vimeo = await loadVimeoAPI();
+    const player = new Vimeo.Player(opts.iframe);
+    let stateCbs = [];
+    await player.ready();
+    if (opts.muted)
+        await player.setMuted(true);
+    if (opts.startTime)
+        try {
+            await player.setCurrentTime(opts.startTime);
+        }
+        catch { }
+    player.on('play', () => stateCbs.forEach((cb) => cb('playing')));
+    player.on('pause', () => stateCbs.forEach((cb) => cb('paused')));
+    player.on('ended', () => stateCbs.forEach((cb) => cb('ended')));
+    player.on('bufferstart', () => stateCbs.forEach((cb) => cb('buffering')));
+    return {
+        play: () => player.play(),
+        pause: () => player.pause(),
+        seekTo: (s) => player.setCurrentTime(s),
+        getCurrentTime: () => player.getCurrentTime(),
+        getDuration: () => player.getDuration(),
+        setVolume: (v) => player.setVolume(Math.max(0, Math.min(1, v))),
+        setMuted: (m) => player.setMuted(m),
+        setPlaybackRate: (r) => player.setPlaybackRate(r),
+        destroy: () => { try {
+            player.destroy();
+        }
+        catch { } },
+        onStateChange: (cb) => { stateCbs.push(cb); return () => { stateCbs = stateCbs.filter((f) => f !== cb); }; }
+    };
+}

package/dist/utils/video-embed.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Parse a video URL into an embed descriptor. Supports YouTube and Vimeo.
+ * Returns null for URLs we don't recognize (the caller should treat those as
+ * raw `<video src>` files). Used by VideoElement renderers to switch between
+ * `<video>` and `<iframe>` rendering.
+ *
+ * Important: embed URLs cannot be captured by the server-side export pipeline
+ * (cross-origin iframe content isn't accessible to Puppeteer's `__tick` virtual
+ * clock and YouTube's player ignores any external time signal). We surface
+ * this as a warning in the properties panel.
+ */
+export interface VideoEmbed {
+    provider: 'youtube' | 'vimeo';
+    /** ID of the video on the provider (`dQw4w9WgXcQ` for YouTube, `123456` for Vimeo). */
+    id: string;
+    /** Fully-formed src for an `<iframe>`. */
+    embedSrc: string;
+    /** A poster image we can probe for from the provider. */
+    thumbnail?: string;
+}
+export interface ParseEmbedOptions {
+    autoplay?: boolean;
+    loop?: boolean;
+    muted?: boolean;
+    startTime?: number;
+    endTime?: number;
+    showControls?: boolean;
+}
+export declare function parseEmbedUrl(url: string, opts?: ParseEmbedOptions): VideoEmbed | null;
+export declare function isEmbedUrl(url: string): boolean;

package/dist/utils/video-embed.js

@@ -0,0 +1,70 @@
+/**
+ * Parse a video URL into an embed descriptor. Supports YouTube and Vimeo.
+ * Returns null for URLs we don't recognize (the caller should treat those as
+ * raw `<video src>` files). Used by VideoElement renderers to switch between
+ * `<video>` and `<iframe>` rendering.
+ *
+ * Important: embed URLs cannot be captured by the server-side export pipeline
+ * (cross-origin iframe content isn't accessible to Puppeteer's `__tick` virtual
+ * clock and YouTube's player ignores any external time signal). We surface
+ * this as a warning in the properties panel.
+ */
+const YOUTUBE_RE = /(?:youtube\.com\/(?:watch\?v=|embed\/|shorts\/|live\/)|youtu\.be\/)([A-Za-z0-9_-]{6,16})/;
+const VIMEO_RE = /vimeo\.com\/(?:video\/)?(\d{6,12})/;
+export function parseEmbedUrl(url, opts = {}) {
+    if (!url)
+        return null;
+    if (url.startsWith('data:'))
+        return null;
+    const ytMatch = url.match(YOUTUBE_RE);
+    if (ytMatch) {
+        const id = ytMatch[1];
+        // YouTube's embed parameters: muted+autoplay = playsinline-on-mobile-friendly,
+        // loop requires both `loop=1` AND `playlist=<same id>` (quirk of YouTube's API).
+        const params = [];
+        if (opts.autoplay)
+            params.push('autoplay=1');
+        if (opts.muted || opts.autoplay)
+            params.push('mute=1'); // browsers block unmuted autoplay
+        if (opts.loop) {
+            params.push('loop=1');
+            params.push(`playlist=${id}`);
+        }
+        if (opts.startTime)
+            params.push(`start=${Math.round(opts.startTime)}`);
+        if (opts.endTime)
+            params.push(`end=${Math.round(opts.endTime)}`);
+        if (!opts.showControls)
+            params.push('controls=0');
+        params.push('rel=0', 'modestbranding=1', 'playsinline=1');
+        return {
+            provider: 'youtube',
+            id,
+            embedSrc: `https://www.youtube.com/embed/${id}?${params.join('&')}`,
+            thumbnail: `https://i.ytimg.com/vi/${id}/maxresdefault.jpg`
+        };
+    }
+    const vimMatch = url.match(VIMEO_RE);
+    if (vimMatch) {
+        const id = vimMatch[1];
+        const params = [];
+        if (opts.autoplay)
+            params.push('autoplay=1');
+        if (opts.muted || opts.autoplay)
+            params.push('muted=1');
+        if (opts.loop)
+            params.push('loop=1');
+        if (!opts.showControls)
+            params.push('controls=0');
+        params.push('byline=0', 'portrait=0', 'title=0');
+        return {
+            provider: 'vimeo',
+            id,
+            embedSrc: `https://player.vimeo.com/video/${id}?${params.join('&')}`
+        };
+    }
+    return null;
+}
+export function isEmbedUrl(url) {
+    return parseEmbedUrl(url) !== null;
+}

package/package.json

@@ -1,84 +1,84 @@
-{
-	"name": "animot-presenter",
-	"version": "0.5.6",
-	"description": "Embed animated presentations anywhere. Works with vanilla JS, React, Vue, Angular, Svelte, and any frontend framework. Morphing animations, code highlighting, charts, particles, and more.",
-	"type": "module",
-	"svelte": "./dist/index.js",
-	"types": "./dist/index.d.ts",
-	"exports": {
-		".": {
-			"svelte": "./dist/index.js",
-			"types": "./dist/index.d.ts",
-			"default": "./dist/index.js"
-		},
-		"./element": {
-			"import": "./dist/cdn/animot-presenter.esm.js",
-			"require": "./dist/cdn/animot-presenter.min.js"
-		},
-		"./cdn": {
-			"import": "./dist/cdn/animot-presenter.esm.js",
-			"require": "./dist/cdn/animot-presenter.min.js"
-		},
-		"./styles": "./dist/styles/presenter.css"
-	},
-	"files": [
-		"dist",
-		"!dist/**/*.test.*",
-		"!dist/**/*.spec.*"
-	],
-	"scripts": {
-		"dev": "vite dev",
-		"build": "npm run build:svelte && npm run build:element",
-		"build:svelte": "svelte-kit sync && svelte-package -o dist",
-		"build:element": "vite build --config vite.element.config.ts",
-		"package": "npm run build",
-		"preview": "vite preview",
-		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-		"prepublishOnly": "npm run build"
-	},
-	"peerDependencies": {
-		"svelte": "^5.0.0"
-	},
-	"peerDependenciesMeta": {
-		"svelte": {
-			"optional": true
-		}
-	},
-	"devDependencies": {
-		"@sveltejs/adapter-auto": "^3.0.0",
-		"@sveltejs/kit": "^2.0.0",
-		"@sveltejs/package": "^2.0.0",
-		"@sveltejs/vite-plugin-svelte": "^4.0.0",
-		"@types/canvas-confetti": "^1.9.0",
-		"svelte": "^5.0.0",
-		"svelte-check": "^4.0.0",
-		"typescript": "^5.0.0",
-		"vite": "^5.0.0"
-	},
-	"dependencies": {
-		"@animotion/motion": "^2.0.1",
-		"canvas-confetti": "^1.9.4",
-		"shiki": "^1.0.0"
-	},
-	"keywords": [
-		"svelte",
-		"react",
-		"vue",
-		"angular",
-		"web-component",
-		"animation",
-		"presentation",
-		"slides",
-		"morphing",
-		"animot",
-		"code-animation",
-		"typewriter",
-		"charts",
-		"particles"
-	],
-	"license": "BUSL-1.1",
-	"repository": {
-		"type": "git",
-		"url": "https://github.com/beeblock/animot-presenter"
-	}
-}
+{
+	"name": "animot-presenter",
+	"version": "0.5.9",
+	"description": "Embed animated presentations anywhere. Works with vanilla JS, React, Vue, Angular, Svelte, and any frontend framework. Morphing animations, code highlighting, charts, particles, and more.",
+	"type": "module",
+	"svelte": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"exports": {
+		".": {
+			"svelte": "./dist/index.js",
+			"types": "./dist/index.d.ts",
+			"default": "./dist/index.js"
+		},
+		"./element": {
+			"import": "./dist/cdn/animot-presenter.esm.js",
+			"require": "./dist/cdn/animot-presenter.min.js"
+		},
+		"./cdn": {
+			"import": "./dist/cdn/animot-presenter.esm.js",
+			"require": "./dist/cdn/animot-presenter.min.js"
+		},
+		"./styles": "./dist/styles/presenter.css"
+	},
+	"files": [
+		"dist",
+		"!dist/**/*.test.*",
+		"!dist/**/*.spec.*"
+	],
+	"scripts": {
+		"dev": "vite dev",
+		"build": "npm run build:svelte && npm run build:element",
+		"build:svelte": "svelte-kit sync && svelte-package -o dist",
+		"build:element": "vite build --config vite.element.config.ts",
+		"package": "npm run build",
+		"preview": "vite preview",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"prepublishOnly": "npm run build"
+	},
+	"peerDependencies": {
+		"svelte": "^5.0.0"
+	},
+	"peerDependenciesMeta": {
+		"svelte": {
+			"optional": true
+		}
+	},
+	"devDependencies": {
+		"@sveltejs/adapter-auto": "^3.0.0",
+		"@sveltejs/kit": "^2.0.0",
+		"@sveltejs/package": "^2.0.0",
+		"@sveltejs/vite-plugin-svelte": "^4.0.0",
+		"@types/canvas-confetti": "^1.9.0",
+		"svelte": "^5.0.0",
+		"svelte-check": "^4.0.0",
+		"typescript": "^5.0.0",
+		"vite": "^5.0.0"
+	},
+	"dependencies": {
+		"@animotion/motion": "^2.0.1",
+		"canvas-confetti": "^1.9.4",
+		"shiki": "^1.0.0"
+	},
+	"keywords": [
+		"svelte",
+		"react",
+		"vue",
+		"angular",
+		"web-component",
+		"animation",
+		"presentation",
+		"slides",
+		"morphing",
+		"animot",
+		"code-animation",
+		"typewriter",
+		"charts",
+		"particles"
+	],
+	"license": "BUSL-1.1",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/beeblock/animot-presenter"
+	}
+}