@rajeev02/video-editor 0.1.0

package/src/export/index.ts

@@ -0,0 +1,288 @@
+/**
+ * @rajeev02/video-editor — Export
+ * Render pipeline: resolution, format, codec, compression, watermark, progress
+ */
+
+export type ExportFormat = "mp4" | "mov" | "webm" | "gif";
+export type ExportCodec = "h264" | "h265" | "vp9" | "av1";
+export type ExportQuality = "draft" | "standard" | "high" | "ultra";
+export type ExportState =
+  | "idle"
+  | "preparing"
+  | "rendering"
+  | "encoding"
+  | "completed"
+  | "failed"
+  | "cancelled";
+
+export interface ExportConfig {
+  format: ExportFormat;
+  codec: ExportCodec;
+  quality: ExportQuality;
+  resolution: { width: number; height: number };
+  fps: number;
+  /** Bitrate in kbps (0 = auto based on quality) */
+  videoBitrate: number;
+  audioBitrate: number;
+  /** Max output file size in bytes (0 = no limit) */
+  maxSizeBytes: number;
+  /** Add watermark */
+  watermark?: {
+    text?: string;
+    imageUri?: string;
+    position:
+      | "top_left"
+      | "top_right"
+      | "bottom_left"
+      | "bottom_right"
+      | "center";
+    opacity: number;
+  };
+  /** Output filename */
+  outputFilename: string;
+  /** Whether to include audio */
+  includeAudio: boolean;
+}
+
+export interface ExportProgress {
+  state: ExportState;
+  /** 0-100 */
+  percent: number;
+  /** Current frame being processed */
+  currentFrame: number;
+  /** Total frames */
+  totalFrames: number;
+  /** Elapsed time in ms */
+  elapsedMs: number;
+  /** Estimated remaining time in ms */
+  estimatedRemainingMs: number;
+  /** Current output file size */
+  currentSizeBytes: number;
+}
+
+export interface ExportResult {
+  success: boolean;
+  outputUri?: string;
+  outputSizeBytes?: number;
+  durationMs?: number;
+  renderTimeMs?: number;
+  error?: string;
+}
+
+/** Export preset configurations */
+export interface ExportPreset {
+  id: string;
+  name: string;
+  description: string;
+  config: Partial<ExportConfig>;
+}
+
+export function getExportPresets(): ExportPreset[] {
+  return [
+    {
+      id: "social_story",
+      name: "Instagram/WhatsApp Story",
+      description: "1080x1920, 30fps, optimized for stories",
+      config: {
+        resolution: { width: 1080, height: 1920 },
+        fps: 30,
+        format: "mp4",
+        codec: "h264",
+        quality: "standard",
+      },
+    },
+    {
+      id: "social_reel",
+      name: "Reels/Shorts",
+      description: "1080x1920, 30fps, max 60s",
+      config: {
+        resolution: { width: 1080, height: 1920 },
+        fps: 30,
+        format: "mp4",
+        codec: "h264",
+        quality: "high",
+      },
+    },
+    {
+      id: "social_post",
+      name: "Social Post (Square)",
+      description: "1080x1080, 30fps",
+      config: {
+        resolution: { width: 1080, height: 1080 },
+        fps: 30,
+        format: "mp4",
+        codec: "h264",
+        quality: "standard",
+      },
+    },
+    {
+      id: "youtube_1080",
+      name: "YouTube 1080p",
+      description: "1920x1080, 30fps, high quality",
+      config: {
+        resolution: { width: 1920, height: 1080 },
+        fps: 30,
+        format: "mp4",
+        codec: "h264",
+        quality: "high",
+      },
+    },
+    {
+      id: "youtube_4k",
+      name: "YouTube 4K",
+      description: "3840x2160, 30fps, ultra quality",
+      config: {
+        resolution: { width: 3840, height: 2160 },
+        fps: 30,
+        format: "mp4",
+        codec: "h265",
+        quality: "ultra",
+      },
+    },
+    {
+      id: "whatsapp",
+      name: "WhatsApp Share",
+      description: "720p, compressed for sharing",
+      config: {
+        resolution: { width: 1280, height: 720 },
+        fps: 30,
+        format: "mp4",
+        codec: "h264",
+        quality: "draft",
+        maxSizeBytes: 16 * 1024 * 1024,
+      },
+    },
+    {
+      id: "gif",
+      name: "GIF",
+      description: "480p, 15fps animated GIF",
+      config: {
+        resolution: { width: 480, height: 480 },
+        fps: 15,
+        format: "gif",
+        codec: "h264",
+        quality: "draft",
+      },
+    },
+  ];
+}
+
+/**
+ * Export Controller — manages render pipeline
+ */
+export class ExportController {
+  private config: ExportConfig;
+  private state: ExportState = "idle";
+  private progress: ExportProgress;
+  private listeners: Set<(progress: ExportProgress) => void> = new Set();
+
+  constructor(config?: Partial<ExportConfig>) {
+    this.config = {
+      format: "mp4",
+      codec: "h264",
+      quality: "high",
+      resolution: { width: 1920, height: 1080 },
+      fps: 30,
+      videoBitrate: 0,
+      audioBitrate: 128,
+      maxSizeBytes: 0,
+      outputFilename: `video_${Date.now()}.mp4`,
+      includeAudio: true,
+      ...config,
+    };
+    this.progress = {
+      state: "idle",
+      percent: 0,
+      currentFrame: 0,
+      totalFrames: 0,
+      elapsedMs: 0,
+      estimatedRemainingMs: 0,
+      currentSizeBytes: 0,
+    };
+  }
+
+  /** Start export (native layer performs actual rendering) */
+  startExport(): void {
+    this.state = "preparing";
+    this.progress.state = "preparing";
+    this.notifyProgress();
+  }
+
+  /** Update progress (called by native renderer) */
+  updateProgress(
+    currentFrame: number,
+    totalFrames: number,
+    sizeBytes: number,
+  ): void {
+    this.state = "rendering";
+    this.progress = {
+      state: "rendering",
+      currentFrame,
+      totalFrames,
+      percent: totalFrames > 0 ? (currentFrame / totalFrames) * 100 : 0,
+      elapsedMs: 0,
+      estimatedRemainingMs: 0,
+      currentSizeBytes: sizeBytes,
+    };
+    this.notifyProgress();
+  }
+
+  /** Called when export completes */
+  onComplete(result: ExportResult): void {
+    this.state = result.success ? "completed" : "failed";
+    this.progress.state = this.state;
+    this.progress.percent = result.success ? 100 : this.progress.percent;
+    this.notifyProgress();
+  }
+
+  /** Cancel export */
+  cancel(): void {
+    this.state = "cancelled";
+    this.progress.state = "cancelled";
+    this.notifyProgress();
+  }
+
+  getConfig(): ExportConfig {
+    return { ...this.config };
+  }
+  getProgress(): ExportProgress {
+    return { ...this.progress };
+  }
+  getState(): ExportState {
+    return this.state;
+  }
+
+  /** Estimate output file size in bytes */
+  estimateFileSize(durationMs: number): number {
+    const bitrateKbps = this.config.videoBitrate || this.getAutoVideoBitrate();
+    const audioBitrate = this.config.includeAudio
+      ? this.config.audioBitrate
+      : 0;
+    return (((bitrateKbps + audioBitrate) * (durationMs / 1000)) / 8) * 1000;
+  }
+
+  onProgress(listener: (progress: ExportProgress) => void): () => void {
+    this.listeners.add(listener);
+    return () => this.listeners.delete(listener);
+  }
+
+  private getAutoVideoBitrate(): number {
+    const pixels = this.config.resolution.width * this.config.resolution.height;
+    const qualityMultiplier = {
+      draft: 0.5,
+      standard: 1,
+      high: 1.5,
+      ultra: 2.5,
+    };
+    const baseBitrate = pixels * 0.003; // ~3 bits per pixel baseline
+    return baseBitrate * (qualityMultiplier[this.config.quality] ?? 1);
+  }
+
+  private notifyProgress(): void {
+    for (const l of this.listeners) {
+      try {
+        l(this.progress);
+      } catch {}
+    }
+  }
+}

package/src/index.ts

@@ -0,0 +1,46 @@
+/**
+ * @rajeev02/video-editor
+ * Video Editor — timeline, effects, transitions, export
+ * Trim, merge, split, reorder, speed, filters, text, stickers, music, green screen
+ *
+ * @author Rajeev Kumar Joshi
+ * @license MIT
+ */
+
+// Timeline
+export { VideoTimeline } from "./timeline";
+export type {
+  VideoClip,
+  AudioClip,
+  TextClip,
+  StickerClip,
+  Transition,
+  TransitionType,
+  TrackType,
+  TextAnimation,
+  TimelineEvent,
+} from "./timeline";
+
+// Effects
+export { getVideoFilterPresets, getTransitionTypes } from "./effects";
+export type {
+  VideoEffect,
+  ColorGrade,
+  SpeedRamp,
+  KenBurnsEffect,
+  ChromaKeyConfig,
+  VideoFilterPreset,
+} from "./effects";
+
+// Export
+export { ExportController, getExportPresets } from "./export";
+export type {
+  ExportConfig,
+  ExportProgress,
+  ExportResult,
+  ExportPreset,
+  ExportFormat,
+  ExportCodec,
+  ExportQuality,
+  ExportState,
+} from "./export";

package/src/timeline/index.ts

@@ -0,0 +1,317 @@
+/**
+ * @rajeev02/video-editor — Timeline
+ * Multi-track timeline with clips, trim, split, reorder, layers
+ */
+
+export type TrackType = "video" | "audio" | "overlay" | "text" | "sticker";
+
+export interface VideoClip {
+  id: string;
+  sourceUri: string;
+  /** Start time in source media (ms) */
+  sourceStartMs: number;
+  /** End time in source media (ms) */
+  sourceEndMs: number;
+  /** Position on timeline (ms) */
+  timelineStartMs: number;
+  /** Duration on timeline (ms) */
+  durationMs: number;
+  /** Playback speed multiplier */
+  speed: number;
+  /** Whether audio is muted */
+  muted: boolean;
+  /** Volume (0-1) */
+  volume: number;
+  /** Thumbnail URI */
+  thumbnailUri?: string;
+  /** Original file width/height */
+  width?: number;
+  height?: number;
+}
+
+export interface AudioClip {
+  id: string;
+  sourceUri: string;
+  title?: string;
+  sourceStartMs: number;
+  sourceEndMs: number;
+  timelineStartMs: number;
+  durationMs: number;
+  volume: number;
+  /** Fade in duration (ms) */
+  fadeInMs: number;
+  /** Fade out duration (ms) */
+  fadeOutMs: number;
+}
+
+export interface TextClip {
+  id: string;
+  text: string;
+  fontFamily: string;
+  fontSize: number;
+  color: string;
+  backgroundColor?: string;
+  position: { x: number; y: number };
+  timelineStartMs: number;
+  durationMs: number;
+  animation?: TextAnimation;
+}
+
+export type TextAnimation =
+  | "none"
+  | "fade_in"
+  | "fade_out"
+  | "slide_in_left"
+  | "slide_in_right"
+  | "slide_in_bottom"
+  | "typewriter"
+  | "bounce"
+  | "zoom_in"
+  | "scale_up";
+
+export interface StickerClip {
+  id: string;
+  source: string;
+  position: { x: number; y: number };
+  scale: number;
+  rotation: number;
+  timelineStartMs: number;
+  durationMs: number;
+  animation?: "none" | "bounce" | "spin" | "pulse" | "shake";
+}
+
+export type TransitionType =
+  | "none"
+  | "crossfade"
+  | "slide_left"
+  | "slide_right"
+  | "slide_up"
+  | "slide_down"
+  | "zoom_in"
+  | "zoom_out"
+  | "spin"
+  | "blur"
+  | "wipe_left"
+  | "wipe_right"
+  | "dissolve"
+  | "glitch";
+
+export interface Transition {
+  id: string;
+  type: TransitionType;
+  durationMs: number;
+  /** Between which two clip IDs */
+  fromClipId: string;
+  toClipId: string;
+}
+
+/**
+ * Video Timeline — manages multi-track editing
+ */
+export class VideoTimeline {
+  private videoClips: VideoClip[] = [];
+  private audioClips: AudioClip[] = [];
+  private textClips: TextClip[] = [];
+  private stickerClips: StickerClip[] = [];
+  private transitions: Transition[] = [];
+  private currentTimeMs: number = 0;
+  private listeners: Set<(event: TimelineEvent) => void> = new Set();
+
+  /** Add a video clip */
+  addVideoClip(clip: Omit<VideoClip, "id" | "timelineStartMs">): string {
+    const id = `vclip_${Date.now()}_${Math.random().toString(36).substr(2, 4)}`;
+    const timelineStartMs = this.getTotalDuration();
+    const fullClip: VideoClip = {
+      ...clip,
+      id,
+      timelineStartMs,
+      speed: clip.speed ?? 1,
+      muted: clip.muted ?? false,
+      volume: clip.volume ?? 1,
+    };
+    this.videoClips.push(fullClip);
+    this.emit({ type: "clip_added", clipId: id, trackType: "video" });
+    return id;
+  }
+
+  /** Add an audio track */
+  addAudioClip(clip: Omit<AudioClip, "id">): string {
+    const id = `aclip_${Date.now()}_${Math.random().toString(36).substr(2, 4)}`;
+    this.audioClips.push({
+      ...clip,
+      id,
+      fadeInMs: clip.fadeInMs ?? 0,
+      fadeOutMs: clip.fadeOutMs ?? 0,
+    });
+    this.emit({ type: "clip_added", clipId: id, trackType: "audio" });
+    return id;
+  }
+
+  /** Add text overlay */
+  addTextClip(clip: Omit<TextClip, "id">): string {
+    const id = `tclip_${Date.now()}`;
+    this.textClips.push({ ...clip, id });
+    return id;
+  }
+
+  /** Add sticker overlay */
+  addStickerClip(clip: Omit<StickerClip, "id">): string {
+    const id = `sclip_${Date.now()}`;
+    this.stickerClips.push({ ...clip, id });
+    return id;
+  }
+
+  /** Trim a video clip */
+  trimClip(clipId: string, newStartMs: number, newEndMs: number): boolean {
+    const clip = this.videoClips.find((c) => c.id === clipId);
+    if (!clip) return false;
+    clip.sourceStartMs = newStartMs;
+    clip.sourceEndMs = newEndMs;
+    clip.durationMs = (newEndMs - newStartMs) / clip.speed;
+    this.recalculateTimeline();
+    this.emit({ type: "clip_trimmed", clipId });
+    return true;
+  }
+
+  /** Split a clip at a given time */
+  splitClip(clipId: string, atTimeMs: number): string | null {
+    const idx = this.videoClips.findIndex((c) => c.id === clipId);
+    if (idx < 0) return null;
+    const clip = this.videoClips[idx];
+    const splitPoint =
+      clip.sourceStartMs + (atTimeMs - clip.timelineStartMs) * clip.speed;
+    if (splitPoint <= clip.sourceStartMs || splitPoint >= clip.sourceEndMs)
+      return null;
+
+    const newClipId = `vclip_${Date.now()}`;
+    const newClip: VideoClip = {
+      ...clip,
+      id: newClipId,
+      sourceStartMs: splitPoint,
+      timelineStartMs: atTimeMs,
+      durationMs: (clip.sourceEndMs - splitPoint) / clip.speed,
+    };
+    clip.sourceEndMs = splitPoint;
+    clip.durationMs = (splitPoint - clip.sourceStartMs) / clip.speed;
+
+    this.videoClips.splice(idx + 1, 0, newClip);
+    this.recalculateTimeline();
+    this.emit({ type: "clip_split", clipId, newClipId });
+    return newClipId;
+  }
+
+  /** Remove a clip */
+  removeClip(clipId: string): boolean {
+    const before = this.videoClips.length + this.audioClips.length;
+    this.videoClips = this.videoClips.filter((c) => c.id !== clipId);
+    this.audioClips = this.audioClips.filter((c) => c.id !== clipId);
+    this.textClips = this.textClips.filter((c) => c.id !== clipId);
+    this.stickerClips = this.stickerClips.filter((c) => c.id !== clipId);
+    const removed = this.videoClips.length + this.audioClips.length < before;
+    if (removed) {
+      this.recalculateTimeline();
+      this.emit({ type: "clip_removed", clipId });
+    }
+    return removed;
+  }
+
+  /** Reorder video clips */
+  reorderClip(clipId: string, newIndex: number): boolean {
+    const idx = this.videoClips.findIndex((c) => c.id === clipId);
+    if (idx < 0 || newIndex < 0 || newIndex >= this.videoClips.length)
+      return false;
+    const [clip] = this.videoClips.splice(idx, 1);
+    this.videoClips.splice(newIndex, 0, clip);
+    this.recalculateTimeline();
+    return true;
+  }
+
+  /** Set clip speed */
+  setClipSpeed(clipId: string, speed: number): void {
+    const clip = this.videoClips.find((c) => c.id === clipId);
+    if (clip) {
+      clip.speed = Math.max(0.1, Math.min(8, speed));
+      clip.durationMs = (clip.sourceEndMs - clip.sourceStartMs) / clip.speed;
+      this.recalculateTimeline();
+    }
+  }
+
+  /** Add transition between clips */
+  addTransition(
+    fromClipId: string,
+    toClipId: string,
+    type: TransitionType,
+    durationMs: number = 500,
+  ): string {
+    const id = `trans_${Date.now()}`;
+    this.transitions.push({ id, type, durationMs, fromClipId, toClipId });
+    return id;
+  }
+
+  /** Get total duration of the timeline */
+  getTotalDuration(): number {
+    if (this.videoClips.length === 0) return 0;
+    const last = this.videoClips[this.videoClips.length - 1];
+    return last.timelineStartMs + last.durationMs;
+  }
+
+  /** Seek to position */
+  seek(timeMs: number): void {
+    this.currentTimeMs = Math.max(0, Math.min(timeMs, this.getTotalDuration()));
+  }
+
+  /** Get current time */
+  getCurrentTime(): number {
+    return this.currentTimeMs;
+  }
+
+  /** Get all clips */
+  getVideoClips(): VideoClip[] {
+    return [...this.videoClips];
+  }
+  getAudioClips(): AudioClip[] {
+    return [...this.audioClips];
+  }
+  getTextClips(): TextClip[] {
+    return [...this.textClips];
+  }
+  getStickerClips(): StickerClip[] {
+    return [...this.stickerClips];
+  }
+  getTransitions(): Transition[] {
+    return [...this.transitions];
+  }
+
+  /** Get clip count */
+  getClipCount(): number {
+    return this.videoClips.length + this.audioClips.length;
+  }
+
+  /** Subscribe to events */
+  on(listener: (event: TimelineEvent) => void): () => void {
+    this.listeners.add(listener);
+    return () => this.listeners.delete(listener);
+  }
+
+  private recalculateTimeline(): void {
+    let pos = 0;
+    for (const clip of this.videoClips) {
+      clip.timelineStartMs = pos;
+      pos += clip.durationMs;
+    }
+  }
+
+  private emit(event: TimelineEvent): void {
+    for (const l of this.listeners) {
+      try {
+        l(event);
+      } catch {}
+    }
+  }
+}
+
+export type TimelineEvent =
+  | { type: "clip_added"; clipId: string; trackType: TrackType }
+  | { type: "clip_removed"; clipId: string }
+  | { type: "clip_trimmed"; clipId: string }
+  | { type: "clip_split"; clipId: string; newClipId: string };