scrolltube 2.0.15

package/dist/pipeline/index.js

@@ -0,0 +1,227 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AssetPipeline = void 0;
+const cloud_service_1 = require("./cloud-service");
+class AssetPipeline {
+    driver;
+    options;
+    cloud;
+    constructor(options = {}) {
+        this.options = options;
+        this.cloud = new cloud_service_1.CloudService({ apiKey: options.apiKey, proxyUrl: options.proxyUrl });
+    }
+    /**
+     * INITIALIZE DRIVER
+     * Detects environment and loads the appropriate driver dynamically.
+     */
+    async init() {
+        if (this.driver)
+            return;
+        if (typeof window !== 'undefined') {
+            // Browser Environment
+            try {
+                // @ts-ignore - Assuming BrowserDriver will exist in same folder
+                const { BrowserDriver } = await Promise.resolve().then(() => __importStar(require('./browser-driver')));
+                this.driver = new BrowserDriver();
+            }
+            catch (e) {
+                throw new Error('Could not load BrowserDriver. Ensure @scrolltube/pipeline/browser is available.');
+            }
+        }
+        else {
+            // Node Environment
+            try {
+                const { NodeDriver } = await Promise.resolve().then(() => __importStar(require('./node-driver')));
+                this.driver = new NodeDriver();
+            }
+            catch (e) {
+                throw new Error('Could not load NodeDriver. Ensure @scrolltube/pipeline/node (sharp, ffmpeg) is installed.');
+            }
+        }
+    }
+    report(step, percent, message) {
+        if (this.options.onProgress) {
+            this.options.onProgress({ step, percent, message });
+        }
+        console.log(`[${step}] ${percent}% - ${message}`);
+    }
+    /**
+     * THE MAIN ORCHESTRATOR
+     */
+    async create(opts) {
+        await this.init();
+        const { input, name, track, depth, step = 1 } = opts;
+        const outDir = this.driver.resolve(name);
+        const tempDir = this.driver.join(outDir, '.temp-frames');
+        const framesDir = this.driver.join(tempDir, 'frames');
+        const depthsDir = this.driver.join(tempDir, 'depths');
+        this.report('initializing', 0, `Creating project: ${name}`);
+        await this.driver.mkdir(outDir);
+        await this.driver.mkdir(tempDir);
+        await this.driver.mkdir(framesDir);
+        await this.driver.mkdir(depthsDir);
+        // 1. FRAME EXTRACTION
+        this.report('extracting', 10, 'Extracting frames from source...');
+        await this.driver.extractFrames(input, framesDir);
+        // 2. AI TRACKING & DEPTH
+        let trackingData = [];
+        let isDepthActive = false;
+        if (track || depth) {
+            this.report('tracking', 30, 'Performing AI analysis...');
+            if (track) {
+                trackingData = await this.cloud.trackSubject(input, this.driver, track);
+            }
+            if (depth) {
+                this.report('depth', 40, 'Generating depth maps...');
+                const depthVideoUrl = await this.cloud.generateDepthMap(input, this.driver);
+                // Download and extract depth frames
+                const response = await fetch(depthVideoUrl);
+                const buffer = await response.arrayBuffer();
+                const depthVideoPath = this.driver.join(tempDir, 'depth_video.mp4');
+                await this.driver.writeFile(depthVideoPath, new Uint8Array(buffer));
+                await this.driver.extractFrames(depthVideoPath, depthsDir);
+                isDepthActive = true;
+            }
+        }
+        // Default tracking if none
+        if (trackingData.length === 0) {
+            const files = await this.driver.readdir(framesDir);
+            const frameFiles = files.filter(f => f.startsWith('frame_'));
+            trackingData = frameFiles.map((_, i) => ({ frame: i, x: 0.5, y: 0.5, scale: 0 }));
+        }
+        // 3. VARIANT GENERATION
+        this.report('processing', 60, 'Generating optimized variants...');
+        const variants = await this.processVariants(tempDir, trackingData, {
+            step,
+            depth: isDepthActive,
+            variants: this.normalizeVariants(opts.variants),
+            outDir
+        });
+        // 4. SAVE CONFIG
+        this.report('saving', 90, 'Finalizing project configuration...');
+        const config = await this.saveConfig(variants, outDir);
+        // Cleanup
+        await this.driver.remove(tempDir);
+        this.report('saving', 100, 'Project ready!');
+        if (opts.outputZip && this.driver.zipProject) {
+            return await this.driver.zipProject(outDir);
+        }
+        return config;
+    }
+    normalizeVariants(v) {
+        if (v.length === 0)
+            return [];
+        if (typeof v[0] === 'object')
+            return v;
+        // Convert numbers to baseline portrait/landscape pairs
+        const res = v;
+        const normalized = [];
+        res.forEach(r => {
+            normalized.push({
+                id: `${r}p_p`, width: r, height: Math.round(r * (16 / 9)),
+                orientation: 'portrait', aspectRatio: '9:16', media: '(orientation: portrait)'
+            });
+            normalized.push({
+                id: `${r}p_l`, width: Math.round(r * (16 / 9)), height: r,
+                orientation: 'landscape', aspectRatio: '16:9', media: '(orientation: landscape)'
+            });
+        });
+        return normalized;
+    }
+    async processVariants(tempDir, trackingData, options) {
+        const { step, outDir } = options;
+        const framesDir = this.driver.join(tempDir, 'frames');
+        const depthsDir = this.driver.join(tempDir, 'depths');
+        const allFiles = await this.driver.readdir(framesDir);
+        const allFrames = allFiles.filter(f => f.startsWith('frame_')).sort((a, b) => a.localeCompare(b, undefined, { numeric: true }));
+        const framesToProcess = allFrames.filter((_, i) => i % step === 0);
+        const assetVariants = [];
+        for (const config of options.variants) {
+            const variantDir = this.driver.join(outDir, config.id);
+            await this.driver.mkdir(variantDir);
+            const variantTracking = [];
+            for (let i = 0; i < framesToProcess.length; i++) {
+                const originalIndex = i * step;
+                const frameName = framesToProcess[i];
+                const framePath = this.driver.join(framesDir, frameName);
+                const targetPath = this.driver.join(variantDir, `index_${i}.webp`);
+                const subject = trackingData.find(f => f.frame === originalIndex) || { frame: originalIndex, x: 0.5, y: 0.5, scale: 0 };
+                const imageBuffer = await this.driver.processImage(framePath, config, {});
+                await this.driver.writeFile(targetPath, imageBuffer);
+                if (options.depth) {
+                    const depthPath = this.driver.join(depthsDir, frameName);
+                    if (await this.driver.exists(depthPath)) {
+                        const depthBuffer = await this.driver.processImage(depthPath, config, { grayscale: true, blur: 2 });
+                        await this.driver.writeFile(this.driver.join(variantDir, `index_${i}_depth.webp`), depthBuffer);
+                    }
+                }
+                variantTracking.push({ ...subject, frame: i });
+            }
+            await this.driver.writeFile(this.driver.join(variantDir, '000_tracking-main.json'), JSON.stringify(variantTracking, null, 2));
+            assetVariants.push({
+                id: config.id,
+                media: config.media,
+                width: config.width,
+                height: config.height,
+                orientation: config.orientation,
+                aspectRatio: config.aspectRatio,
+                path: `./${config.id}`,
+                frameCount: framesToProcess.length,
+                hasDepthMap: options.depth,
+                subjects: ['main']
+            });
+        }
+        return assetVariants;
+    }
+    async saveConfig(variants, outDir) {
+        const pkg = require('../../package.json');
+        const config = {
+            version: pkg.version,
+            settings: { baseResolution: { width: 1920, height: 1080 }, scrollMode: 'vh' },
+            assets: [{ id: "main-sequence", strategy: "adaptive", variants: variants }],
+            timeline: {
+                totalDuration: "300vh",
+                scenes: [{
+                        id: "scene-1", assetId: "main-sequence", startProgress: 0, duration: 1,
+                        assetRange: [0, variants[0].frameCount - 1], layers: []
+                    }]
+            }
+        };
+        await this.driver.writeFile(this.driver.join(outDir, 'scrolltube.json'), JSON.stringify(config, null, 2));
+        return config;
+    }
+}
+exports.AssetPipeline = AssetPipeline;

package/dist/pipeline/node-driver.d.ts

@@ -0,0 +1,18 @@
+import { IPipelineDriver, VariantConfig } from './types';
+export declare class NodeDriver implements IPipelineDriver {
+    private ffmpegPath;
+    constructor();
+    readFile(filePath: string): Promise<Uint8Array>;
+    writeFile(filePath: string, data: Uint8Array | string): Promise<void>;
+    mkdir(dirPath: string): Promise<void>;
+    exists(filePath: string): Promise<boolean>;
+    readdir(dirPath: string): Promise<string[]>;
+    remove(filePath: string): Promise<void>;
+    join(...parts: string[]): string;
+    resolve(...parts: string[]): string;
+    extractFrames(videoSource: string, outputDir: string, onProgress?: (percent: number) => void): Promise<void>;
+    processImage(input: Uint8Array | string, config: VariantConfig, options?: {
+        grayscale?: boolean;
+        blur?: number;
+    }): Promise<Uint8Array>;
+}

package/dist/pipeline/node-driver.js

@@ -0,0 +1,108 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NodeDriver = void 0;
+const fs = __importStar(require("fs-extra"));
+const path = __importStar(require("path"));
+const sharp_1 = __importDefault(require("sharp"));
+const child_process_1 = require("child_process");
+const ffmpeg_static_1 = __importDefault(require("ffmpeg-static"));
+class NodeDriver {
+    ffmpegPath;
+    constructor() {
+        this.ffmpegPath = ffmpeg_static_1.default || 'ffmpeg';
+    }
+    async readFile(filePath) {
+        return await fs.readFile(filePath);
+    }
+    async writeFile(filePath, data) {
+        if (typeof data === 'string') {
+            await fs.writeFile(filePath, data);
+        }
+        else {
+            await fs.writeFile(filePath, Buffer.from(data));
+        }
+    }
+    async mkdir(dirPath) {
+        await fs.ensureDir(dirPath);
+    }
+    async exists(filePath) {
+        return await fs.pathExists(filePath);
+    }
+    async readdir(dirPath) {
+        return await fs.readdir(dirPath);
+    }
+    async remove(filePath) {
+        await fs.remove(filePath);
+    }
+    join(...parts) {
+        return path.join(...parts);
+    }
+    resolve(...parts) {
+        return path.resolve(...parts);
+    }
+    async extractFrames(videoSource, outputDir, onProgress) {
+        return new Promise((resolve, reject) => {
+            // For simplicity, we use execSync in a promise or spawn for progress
+            try {
+                // ffmpeg -i input output%04d.png
+                // For now, let's keep it simple like existing CLI
+                (0, child_process_1.execSync)(`"${this.ffmpegPath}" -i "${videoSource}" "${outputDir}/frame_%04d.png"`, { stdio: 'inherit' });
+                resolve();
+            }
+            catch (err) {
+                reject(err);
+            }
+        });
+    }
+    async processImage(input, config, options = {}) {
+        let pipeline = (0, sharp_1.default)(input)
+            .resize(config.width, config.height, {
+            fit: 'cover',
+            position: 'center' // Placeholder for smart-crop logic if we move it here
+        });
+        if (options.grayscale) {
+            pipeline = pipeline.grayscale();
+        }
+        if (options.blur) {
+            pipeline = pipeline.blur(options.blur);
+        }
+        return await pipeline.webp({ quality: 80 }).toBuffer();
+    }
+}
+exports.NodeDriver = NodeDriver;

package/dist/pipeline/types.d.ts

@@ -0,0 +1,43 @@
+export interface PipelineProgress {
+    percent: number;
+    message: string;
+    step: 'initializing' | 'extracting' | 'tracking' | 'depth' | 'processing' | 'saving';
+}
+export interface VariantConfig {
+    id: string;
+    width: number;
+    height: number;
+    media: string;
+    orientation: 'portrait' | 'landscape';
+    aspectRatio: string;
+}
+export interface IPipelineDriver {
+    readFile(path: string): Promise<Uint8Array>;
+    writeFile(path: string, data: Uint8Array | string): Promise<void>;
+    mkdir(path: string): Promise<void>;
+    exists(path: string): Promise<boolean>;
+    readdir(path: string): Promise<string[]>;
+    remove(path: string): Promise<void>;
+    join(...parts: string[]): string;
+    resolve(...parts: string[]): string;
+    extractFrames(videoSource: string | File | Blob, outputDir: string, onProgress?: (percent: number) => void): Promise<void>;
+    processImage(input: Uint8Array | string, config: VariantConfig, options: {
+        grayscale?: boolean;
+        blur?: number;
+    }): Promise<Uint8Array>;
+    zipProject?(outDir: string): Promise<Uint8Array>;
+}
+export interface PipelineOptions {
+    apiKey?: string;
+    proxyUrl?: string;
+    onProgress?: (progress: PipelineProgress) => void;
+}
+export interface CreateCommandOptions {
+    input: string | File | Blob;
+    name: string;
+    track?: string;
+    depth?: boolean;
+    variants: number[] | VariantConfig[];
+    step?: number;
+    outputZip?: boolean;
+}

package/dist/pipeline/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/react/ScrollTubeProvider.d.ts

@@ -0,0 +1,49 @@
+import React from 'react';
+import { CoreEngine } from '../core';
+interface STUBEContext {
+    progress: number;
+    frame: number;
+    engine: CoreEngine | null;
+}
+export interface ScrollTubeProviderProps {
+    type?: string;
+    containerHeight?: string;
+    sceneHeight?: string;
+    sceneTop?: string | 0;
+    offset?: any;
+    scrub?: number;
+    children: React.ReactNode;
+}
+export declare const ScrollTubeProvider: React.FC<ScrollTubeProviderProps>;
+export declare const ScrollTubeCanvas: React.FC<{
+    project: string;
+    depthtilt?: number | string;
+    width?: string;
+    height?: string;
+    style?: React.CSSProperties;
+}>;
+export declare const ScrollTubeLayer: React.FC<{
+    align?: string;
+    style?: React.CSSProperties;
+    children: React.ReactNode;
+}>;
+export declare const ScrollTubeLayerTracking: React.FC<{
+    id?: string;
+    offset?: {
+        x: number;
+        y: number;
+    };
+    style?: React.CSSProperties;
+    children: React.ReactNode;
+}>;
+export declare const SubjectLayer: React.FC<{
+    id?: string;
+    offset?: {
+        x: number;
+        y: number;
+    };
+    style?: React.CSSProperties;
+    children: React.ReactNode;
+}>;
+export declare const useScrollTube: () => STUBEContext;
+export {};

package/dist/react/index.d.ts

@@ -0,0 +1 @@
+export { ScrollTubeProvider, ScrollTubeCanvas, ScrollTubeLayer, ScrollTubeLayerTracking, SubjectLayer, useScrollTube } from './ScrollTubeProvider';