loopwind 0.12.3 → 0.13.1

package/dist/lib/video-player.js

@@ -0,0 +1,265 @@
+import React, { useState, useEffect, useCallback, useRef } from 'react';
+import { tw as twBase } from './tailwind-browser.js';
+export function VideoPlayer({ Template, meta, props, tailwindConfig = null, loopwindConfig = null }) {
+    const [frame, setFrame] = useState(0);
+    const [isPlaying, setIsPlaying] = useState(true);
+    const [isLooping, setIsLooping] = useState(true);
+    const [scale, setScale] = useState(1);
+    const animationRef = useRef(null);
+    const lastTimeRef = useRef(0);
+    const containerRef = useRef(null);
+    const { fps, duration } = meta.video;
+    const totalFrames = Math.floor(fps * duration);
+    const durationMs = duration * 1000;
+    // Create tw function bound to current animation context
+    const boundTw = useCallback((classes) => {
+        const context = {
+            frame: Math.floor(frame),
+            totalFrames,
+            durationMs,
+            progress: frame / totalFrames
+        };
+        return twBase(classes, tailwindConfig, loopwindConfig, context);
+    }, [frame, totalFrames, durationMs, tailwindConfig, loopwindConfig]);
+    // Image helper - returns the image URL from props
+    const image = useCallback((key) => {
+        return props[key] || '';
+    }, [props]);
+    // Playback loop
+    useEffect(() => {
+        if (!isPlaying) {
+            if (animationRef.current) {
+                cancelAnimationFrame(animationRef.current);
+                animationRef.current = null;
+            }
+            return;
+        }
+        lastTimeRef.current = performance.now();
+        const animate = (time) => {
+            const delta = time - lastTimeRef.current;
+            lastTimeRef.current = time;
+            setFrame(prev => {
+                const increment = (delta / 1000) * fps;
+                const next = prev + increment;
+                if (next >= totalFrames) {
+                    if (isLooping) {
+                        return next % totalFrames;
+                    }
+                    else {
+                        setIsPlaying(false);
+                        return totalFrames - 1;
+                    }
+                }
+                return next;
+            });
+            animationRef.current = requestAnimationFrame(animate);
+        };
+        animationRef.current = requestAnimationFrame(animate);
+        return () => {
+            if (animationRef.current) {
+                cancelAnimationFrame(animationRef.current);
+            }
+        };
+    }, [isPlaying, fps, totalFrames, isLooping]);
+    // Calculate scale to fit video in container
+    useEffect(() => {
+        const calculateScale = () => {
+            if (!containerRef.current)
+                return;
+            const container = containerRef.current;
+            const padding = 64; // 2rem on each side
+            const availableWidth = container.clientWidth - padding;
+            const availableHeight = container.clientHeight - padding;
+            const scaleX = availableWidth / meta.size.width;
+            const scaleY = availableHeight / meta.size.height;
+            // Use the smaller scale to fit both dimensions, but cap at 1 (don't scale up)
+            const newScale = Math.min(scaleX, scaleY, 1);
+            setScale(newScale);
+        };
+        calculateScale();
+        window.addEventListener('resize', calculateScale);
+        return () => window.removeEventListener('resize', calculateScale);
+    }, [meta.size.width, meta.size.height]);
+    // Format time as milliseconds (matches animation class format)
+    const formatTime = (ms) => {
+        return `${Math.floor(ms)}ms`;
+    };
+    const currentMs = (frame / totalFrames) * durationMs;
+    const progress = (frame / totalFrames) * 100;
+    const handleScrub = (e) => {
+        const value = parseFloat(e.target.value);
+        setFrame((value / 100) * totalFrames);
+    };
+    const handlePlayPause = () => {
+        if (!isPlaying && frame >= totalFrames - 1) {
+            setFrame(0);
+        }
+        setIsPlaying(!isPlaying);
+    };
+    const handleRestart = () => {
+        setFrame(0);
+        setIsPlaying(true);
+    };
+    const handleStepBackward = () => {
+        setIsPlaying(false);
+        setFrame(prev => Math.max(0, prev - 1));
+    };
+    const handleStepForward = () => {
+        setIsPlaying(false);
+        setFrame(prev => Math.min(totalFrames - 1, prev + 1));
+    };
+    return (React.createElement("div", { style: {
+            display: 'flex',
+            flexDirection: 'column',
+            height: '100vh',
+            background: '#0a0a0a',
+            color: '#ffffff',
+            fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
+        } },
+        React.createElement("div", { style: {
+                background: '#18181b',
+                borderBottom: '1px solid #27272a',
+                padding: '1rem 2rem',
+                display: 'flex',
+                justifyContent: 'space-between',
+                alignItems: 'center'
+            } },
+            React.createElement("h1", { style: { fontSize: '1.25rem', fontWeight: 600, margin: 0 } },
+                "loopwind preview: ",
+                meta.name),
+            React.createElement("div", { style: { display: 'flex', gap: '0.5rem', alignItems: 'center' } },
+                React.createElement("span", { style: {
+                        background: '#7c3aed',
+                        color: 'white',
+                        padding: '0.25rem 0.75rem',
+                        borderRadius: '0.375rem',
+                        fontSize: '0.875rem',
+                        fontWeight: 500
+                    } }, "VIDEO"),
+                React.createElement("span", { style: {
+                        background: '#27272a',
+                        color: '#a1a1aa',
+                        padding: '0.25rem 0.75rem',
+                        borderRadius: '0.375rem',
+                        fontSize: '0.75rem',
+                        fontFamily: 'monospace'
+                    } },
+                    meta.size.width,
+                    "\u00D7",
+                    meta.size.height,
+                    " @ ",
+                    fps,
+                    "fps"))),
+        React.createElement("div", { ref: containerRef, style: {
+                flex: 1,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                padding: '2rem',
+                overflow: 'hidden'
+            } },
+            React.createElement("div", { style: {
+                    width: meta.size.width,
+                    height: meta.size.height,
+                    boxShadow: '0 20px 25px -5px rgba(0, 0, 0, 0.5)',
+                    borderRadius: '0.5rem',
+                    overflow: 'hidden',
+                    flexShrink: 0,
+                    border: '1px solid #3f3f46',
+                    transform: `scale(${scale})`,
+                    transformOrigin: 'center center'
+                } },
+                React.createElement(Template, { tw: boundTw, image: image, __currentTimeMs: currentMs, __isPlaying: isPlaying, ...props }))),
+        React.createElement("div", { style: {
+                background: '#18181b',
+                borderTop: '1px solid #27272a',
+                padding: '1rem 2rem'
+            } },
+            React.createElement("div", { style: { marginBottom: '0.75rem' } },
+                React.createElement("input", { type: "range", min: "0", max: "100", step: "0.1", value: progress, onChange: handleScrub, style: {
+                        width: '100%',
+                        height: '6px',
+                        background: `linear-gradient(to right, #7c3aed ${progress}%, #3f3f46 ${progress}%)`,
+                        borderRadius: '3px',
+                        cursor: 'pointer',
+                        WebkitAppearance: 'none',
+                        appearance: 'none'
+                    } })),
+            React.createElement("div", { style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between'
+                } },
+                React.createElement("div", { style: { display: 'flex', alignItems: 'center', gap: '0.5rem' } },
+                    React.createElement("button", { onClick: handleRestart, style: {
+                            background: 'transparent',
+                            border: 'none',
+                            color: '#a1a1aa',
+                            cursor: 'pointer',
+                            padding: '0.5rem',
+                            fontSize: '1rem',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center'
+                        }, title: "Restart" }, "\u23EE"),
+                    React.createElement("button", { onClick: handleStepBackward, style: {
+                            background: 'transparent',
+                            border: 'none',
+                            color: '#a1a1aa',
+                            cursor: 'pointer',
+                            padding: '0.5rem',
+                            fontSize: '1rem',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center'
+                        }, title: "Previous frame" }, "\u23EA"),
+                    React.createElement("button", { onClick: handlePlayPause, style: {
+                            background: '#7c3aed',
+                            border: 'none',
+                            color: 'white',
+                            cursor: 'pointer',
+                            padding: '0.75rem 1rem',
+                            borderRadius: '0.375rem',
+                            fontSize: '1rem',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            minWidth: '3rem'
+                        } }, isPlaying ? '⏸' : '▶'),
+                    React.createElement("button", { onClick: handleStepForward, style: {
+                            background: 'transparent',
+                            border: 'none',
+                            color: '#a1a1aa',
+                            cursor: 'pointer',
+                            padding: '0.5rem',
+                            fontSize: '1rem',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center'
+                        }, title: "Next frame" }, "\u23E9"),
+                    React.createElement("button", { onClick: () => setIsLooping(!isLooping), style: {
+                            background: isLooping ? '#3f3f46' : 'transparent',
+                            border: '1px solid #3f3f46',
+                            color: isLooping ? '#ffffff' : '#71717a',
+                            cursor: 'pointer',
+                            padding: '0.5rem 0.75rem',
+                            borderRadius: '0.375rem',
+                            fontSize: '0.75rem',
+                            marginLeft: '0.5rem'
+                        }, title: isLooping ? 'Loop enabled' : 'Loop disabled' }, "\uD83D\uDD01")),
+                React.createElement("div", { style: {
+                        fontFamily: 'monospace',
+                        fontSize: '0.875rem',
+                        color: '#a1a1aa'
+                    } },
+                    React.createElement("span", { style: { color: '#ffffff' } }, formatTime(currentMs)),
+                    ' / ',
+                    formatTime(durationMs),
+                    React.createElement("span", { style: { marginLeft: '1rem', color: '#71717a' } },
+                        "Frame ",
+                        Math.floor(frame),
+                        " / ",
+                        totalFrames))))));
+}
+export default VideoPlayer;
+//# sourceMappingURL=video-player.js.map

package/dist/lib/video-player.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"video-player.js","sourceRoot":"","sources":["../../src/lib/video-player.tsx"],"names":[],"mappings":"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"}

package/dist/lib/video-preview.d.ts

@@ -0,0 +1,15 @@
+interface VideoPreviewOptions {
+    templateName: string;
+    templatePath: string;
+    props: Record<string, any>;
+    meta: any;
+    port: number;
+    open: boolean;
+}
+export declare function startVideoPreview(options: VideoPreviewOptions): Promise<{
+    server: import("http").Server<typeof import("http").IncomingMessage, typeof import("http").ServerResponse>;
+    vite: import("vite").ViteDevServer;
+    cleanup: () => Promise<void>;
+}>;
+export {};
+//# sourceMappingURL=video-preview.d.ts.map

package/dist/lib/video-preview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"video-preview.d.ts","sourceRoot":"","sources":["../../src/lib/video-preview.ts"],"names":[],"mappings":"AASA,UAAU,mBAAmB;IAC3B,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC3B,IAAI,EAAE,GAAG,CAAC;IACV,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,OAAO,CAAC;CACf;AAED,wBAAsB,iBAAiB,CAAC,OAAO,EAAE,mBAAmB;;;;GA2MnE"}

package/dist/lib/video-preview.js

@@ -0,0 +1,199 @@
+import express from 'express';
+import { createServer as createViteServer } from 'vite';
+import path from 'path';
+import fs from 'fs/promises';
+import { fileURLToPath } from 'url';
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+export async function startVideoPreview(options) {
+    const { templateName, templatePath, props, meta, port, open } = options;
+    const app = express();
+    // Try to load loopwind.json from project (_loopwind/loopwind.json)
+    let loopwindConfig = null;
+    const projectRoot = path.join(__dirname, '../..');
+    const loopwindJsonPath = path.join(projectRoot, '_loopwind', 'loopwind.json');
+    try {
+        const loopwindContent = await fs.readFile(loopwindJsonPath, 'utf-8');
+        loopwindConfig = JSON.parse(loopwindContent);
+    }
+    catch {
+        // loopwind.json doesn't exist or couldn't be read - that's fine
+    }
+    // Create temporary directory for generated files
+    const tempDir = path.join(__dirname, '../../.video-preview');
+    await fs.mkdir(tempDir, { recursive: true });
+    // Get the source directory for imports
+    // __dirname at runtime is dist/lib, we need src/lib for Vite to bundle TSX
+    const srcLibDir = path.join(projectRoot, 'src/lib');
+    // Generate the entry file
+    const entryContent = `
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import { VideoPlayer } from '${srcLibDir}/video-player.tsx';
+import { tw } from '${srcLibDir}/tailwind-browser.ts';
+import Template, { meta } from '${templatePath}';
+
+const props = ${JSON.stringify(props)};
+
+// Tailwind config not loaded in browser (would need dynamic import of user's config)
+const tailwindConfig = null;
+
+// loopwind.json config (loaded server-side and embedded)
+const loopwindConfig = ${JSON.stringify(loopwindConfig)};
+
+function App() {
+  return (
+    <VideoPlayer
+      Template={Template}
+      meta={meta}
+      props={props}
+      tailwindConfig={tailwindConfig}
+      loopwindConfig={loopwindConfig}
+    />
+  );
+}
+
+const container = document.getElementById('root');
+const root = createRoot(container);
+root.render(<App />);
+
+// Hot module replacement
+if (import.meta.hot) {
+  import.meta.hot.accept();
+}
+`;
+    const entryPath = path.join(tempDir, 'entry.tsx');
+    await fs.writeFile(entryPath, entryContent);
+    // Generate index.html
+    const htmlContent = `
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Video Preview: ${templateName}</title>
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+    body {
+      overflow: hidden;
+    }
+    /* Custom range slider styling */
+    input[type="range"] {
+      -webkit-appearance: none;
+      appearance: none;
+      outline: none;
+    }
+    input[type="range"]::-webkit-slider-thumb {
+      -webkit-appearance: none;
+      appearance: none;
+      width: 14px;
+      height: 14px;
+      border-radius: 50%;
+      background: #7c3aed;
+      cursor: pointer;
+      margin-top: -4px;
+    }
+    input[type="range"]::-moz-range-thumb {
+      width: 14px;
+      height: 14px;
+      border-radius: 50%;
+      background: #7c3aed;
+      cursor: pointer;
+      border: none;
+    }
+    input[type="range"]::-webkit-slider-runnable-track {
+      height: 6px;
+      border-radius: 3px;
+    }
+    input[type="range"]::-moz-range-track {
+      height: 6px;
+      border-radius: 3px;
+    }
+  </style>
+</head>
+<body>
+  <div id="root"></div>
+  <script type="module" src="/entry.tsx"></script>
+</body>
+</html>
+`;
+    const htmlPath = path.join(tempDir, 'index.html');
+    await fs.writeFile(htmlPath, htmlContent);
+    // Dynamically import the React plugin
+    // @ts-expect-error - moduleResolution incompatibility with @vitejs/plugin-react types
+    const { default: react } = await import('@vitejs/plugin-react');
+    // Create Vite server
+    const vite = await createViteServer({
+        root: tempDir,
+        server: {
+            middlewareMode: true,
+            hmr: true,
+        },
+        plugins: [react()],
+        define: {
+            'process.env.NODE_ENV': JSON.stringify('development'),
+            'process.env': JSON.stringify({}),
+        },
+        resolve: {
+            alias: {
+            // Ensure proper resolution of our library files
+            }
+        },
+        optimizeDeps: {
+            include: ['react', 'react-dom'],
+            // Don't pre-bundle our local files
+            exclude: ['video-player']
+        },
+        build: {
+            rollupOptions: {
+                input: entryPath
+            }
+        }
+    });
+    // Serve template directory for local assets (videos, images)
+    const templateDir = path.dirname(templatePath);
+    app.use('/template', express.static(templateDir));
+    // Use Vite's connect instance as middleware
+    app.use(vite.middlewares);
+    // Serve index.html for root
+    app.get('/', async (req, res) => {
+        try {
+            let html = await fs.readFile(htmlPath, 'utf-8');
+            html = await vite.transformIndexHtml(req.url, html);
+            res.status(200).set({ 'Content-Type': 'text/html' }).end(html);
+        }
+        catch (e) {
+            vite.ssrFixStacktrace(e);
+            res.status(500).end(e.message);
+        }
+    });
+    // Start server
+    const server = app.listen(port, () => {
+        // Open browser if requested
+        if (open) {
+            import('open').then(({ default: openBrowser }) => {
+                openBrowser(`http://localhost:${port}`);
+            }).catch(() => {
+                // Silently fail
+            });
+        }
+    });
+    // Cleanup function
+    const cleanup = async () => {
+        await vite.close();
+        server.close();
+        // Clean up temp files
+        try {
+            await fs.rm(tempDir, { recursive: true });
+        }
+        catch {
+            // Ignore cleanup errors
+        }
+    };
+    return { server, vite, cleanup };
+}
+//# sourceMappingURL=video-preview.js.map

package/dist/lib/video-preview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"video-preview.js","sourceRoot":"","sources":["../../src/lib/video-preview.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "loopwind",
-  "version": "0.12.3",
+  "version": "0.13.1",
   "description": "A CLI tool for AI code agents and developers for generating images and videos.",
   "type": "module",
   "bin": {
@@ -47,6 +47,7 @@
   },
   "dependencies": {
     "@resvg/resvg-js": "^2.6.0",
+    "@vitejs/plugin-react": "^5.1.1",
     "boxen": "^7.1.1",
     "chalk": "^5.3.0",
     "chalk-animation": "^2.0.3",
@@ -61,14 +62,16 @@
     "mediabunny": "^1.25.0",
     "open": "^11.0.0",
     "ora": "^8.0.1",
+    "patch-package": "^8.0.1",
     "pngjs": "^7.0.0",
     "qrcode": "^1.5.4",
     "react": "^18.2.0",
+    "react-dom": "^18.3.1",
     "satori": "^0.18.3",
     "sharp": "^0.34.5",
     "tailwind-merge": "^3.4.0",
     "tailwindcss": "^3.4.1",
-    "patch-package": "^8.0.1"
+    "vite": "^7.2.2"
   },
   "devDependencies": {
     "@types/chalk-animation": "^1.6.3",