feat: add effect preview video generation system

- Created generateEffectPreview utility for rendering single effect previews
- Added generateAllEffectPreviews for batch preview generation
- Implemented useEffectPreviewGenerator hook for UI integration
- Uses existing prerender_segment system from video-compiler
- Generates 3-5 second preview videos with effects applied
- Supports progress tracking and error handling
- Can update effect metadata with generated preview paths
- Enables pre-rendered previews instead of real-time WebGL rendering

Author: chatman-media

src/features/effects/hooks/use-effect-preview-generator.ts

@@ -0,0 +1,131 @@
+/**
+ * Хук для генерации превью видео для эффектов
+ */
+
+import { useCallback, useState } from "react"
+import { useTranslation } from "react-i18next"
+import { useNotifications } from "@/domains/system-integration"
+import type { BaseEffect } from "../types"
+import { generateAllEffectPreviews, type EffectPreviewConfig } from "../utils/generate-effect-previews"
+
+export interface PreviewGenerationState {
+  isGenerating: boolean
+  progress: number
+  total: number
+  currentEffectId?: string
+  completed: number
+  failed: number
+  error?: string
+}
+
+export function useEffectPreviewGenerator() {
+  const { t } = useTranslation()
+  const { showSuccess, showError, showInfo } = useNotifications()
+  const [state, setState] = useState<PreviewGenerationState>({
+    isGenerating: false,
+    progress: 0,
+    total: 0,
+    completed: 0,
+    failed: 0,
+  })
+
+  /**
+   * Сгенерировать превью для всех эффектов
+   */
+  const generatePreviews = useCallback(
+    async (effects: BaseEffect[], config: Partial<EffectPreviewConfig> = {}) => {
+      const fullConfig: EffectPreviewConfig = {
+        sourceVideoPath: config.sourceVideoPath || "/t1.mp4",
+        duration: config.duration || 3, // 3 секунды по умолчанию
+        quality: config.quality || 75,
+        outputDir: config.outputDir || "preview-videos/effects",
+      }
+
+      setState({
+        isGenerating: true,
+        progress: 0,
+        total: effects.length,
+        completed: 0,
+        failed: 0,
+      })
+
+      showInfo(
+        t("effects.preview.generating"),
+        t("effects.preview.generatingMessage", { count: effects.length }),
+      )
+
+      try {
+        const results = await generateAllEffectPreviews(
+          effects,
+          fullConfig,
+          (current, total, effectId) => {
+            setState((prev) => ({
+              ...prev,
+              progress: (current / total) * 100,
+              currentEffectId: effectId,
+            }))
+          },
+        )
+
+        const completed = results.size
+        const failed = effects.length - completed
+
+        setState({
+          isGenerating: false,
+          progress: 100,
+          total: effects.length,
+          completed,
+          failed,
+        })
+
+        if (failed > 0) {
+          showSuccess(
+            t("effects.preview.completedWithErrors"),
+            t("effects.preview.completedMessage", { completed, failed }),
+          )
+        } else {
+          showSuccess(
+            t("effects.preview.completed"),
+            t("effects.preview.allCompletedMessage", { count: completed }),
+          )
+        }
+
+        return results
+      } catch (error) {
+        const errorMessage = error instanceof Error ? error.message : t("common.unknownError")
+
+        setState({
+          isGenerating: false,
+          progress: 0,
+          total: effects.length,
+          completed: 0,
+          failed: effects.length,
+          error: errorMessage,
+        })
+
+        showError(t("effects.preview.error"), errorMessage)
+        return new Map<string, string>()
+      }
+    },
+    [t, showSuccess, showError, showInfo],
+  )
+
+  /**
+   * Отменить генерацию
+   */
+  const cancelGeneration = useCallback(() => {
+    setState({
+      isGenerating: false,
+      progress: 0,
+      total: 0,
+      completed: 0,
+      failed: 0,
+    })
+  }, [])
+
+  return {
+    ...state,
+    generatePreviews,
+    cancelGeneration,
+  }
+}

src/features/effects/index.ts

@@ -76,6 +76,8 @@ export {
 export { useUnifiedEffects } from "./hooks/use-unified-effects"
 export type { UseUserPresetsOptions, UseUserPresetsReturn } from "./hooks/use-user-presets"
 export { useUserPresets } from "./hooks/use-user-presets"
+export { useEffectPreviewGenerator } from "./hooks/use-effect-preview-generator"
+export type { PreviewGenerationState } from "./hooks/use-effect-preview-generator"
 
 // ============================================================================
 // БИБЛИОТЕКИ ЭФФЕКТОВ
@@ -115,6 +117,14 @@ export {
 // УТИЛИТЫ
 // ============================================================================
 
+// Генерация превью
+export {
+  generateAllEffectPreviews,
+  generateEffectPreview,
+  updateEffectsWithPreviews,
+} from "./utils/generate-effect-previews"
+export type { EffectPreviewConfig } from "./utils/generate-effect-previews"
+
 /**
  * Создает новый менеджер эффектов с предустановленными эффектами
  */

src/features/effects/utils/generate-effect-previews.ts

@@ -0,0 +1,178 @@
+/**
+ * Утилита для генерации превью видео для эффектов
+ *
+ * Использует систему пререндеринга для создания коротких демо-видео
+ * с применённым эффектом для каждого эффекта в библиотеке
+ */
+
+import type { BaseEffect } from "../types"
+import { prerenderSegment } from "@/domains/video-editing/services/compiler"
+import { createLogger } from "@/lib/tauri-logger"
+
+const logger = createLogger("EffectPreviewGenerator")
+
+export interface EffectPreviewConfig {
+  /** Исходное видео для применения эффекта */
+  sourceVideoPath: string
+  /** Длительность превью в секундах */
+  duration: number
+  /** Качество превью (0-100) */
+  quality: number
+  /** Директория для сохранения превью */
+  outputDir: string
+}
+
+/**
+ * Генерирует превью видео для одного эффекта
+ */
+export async function generateEffectPreview(
+  effect: BaseEffect,
+  config: EffectPreviewConfig,
+): Promise<string | null> {
+  try {
+    void logger.info("Generating preview for effect", { effectId: effect.id })
+
+    // Создаём минимальный проект с одним клипом и эффектом
+    const projectSchema = {
+      version: "1.0.0",
+      settings: {
+        resolution: { width: 1920, height: 1080 },
+        frameRate: 30,
+        audioSampleRate: 48000,
+        audioChannels: 2,
+      },
+      tracks: [
+        {
+          id: "preview-track",
+          type: "video" as const,
+          clips: [
+            {
+              id: "preview-clip",
+              mediaId: "preview-media",
+              mediaFile: {
+                id: "preview-media",
+                path: config.sourceVideoPath,
+                name: "preview.mp4",
+                type: "video" as const,
+                duration: config.duration,
+              },
+              startTime: 0,
+              duration: config.duration,
+              mediaStartTime: 0,
+              mediaEndTime: config.duration,
+              effects: [
+                {
+                  id: `${effect.id}-preview`,
+                  effectId: effect.id,
+                  enabled: true,
+                  customParams: effect.parameters?.reduce(
+                    (acc, param) => {
+                      acc[param.id] = param.defaultValue
+                      return acc
+                    },
+                    {} as Record<string, any>,
+                  ) || {},
+                  startTime: 0,
+                  endTime: config.duration,
+                  order: 0,
+                },
+              ],
+              filters: [],
+              transitions: [],
+              volume: 0, // Без звука для превью
+              speed: 1.0,
+              isReversed: false,
+              opacity: 1.0,
+              isSelected: false,
+              isLocked: false,
+              offset: 0,
+              trackId: "preview-track",
+              name: "Preview Clip",
+              createdAt: new Date(),
+              updatedAt: new Date(),
+            },
+          ],
+        },
+      ],
+      metadata: {
+        createdAt: new Date().toISOString(),
+        modifiedAt: new Date().toISOString(),
+      },
+    }
+
+    const outputPath = `${config.outputDir}/effect_${effect.id}.mp4`
+
+    // Рендерим превью
+    const result = await prerenderSegment({
+      projectSchema: projectSchema as any,
+      startTime: 0,
+      endTime: config.duration,
+      applyEffects: true,
+      quality: config.quality,
+    })
+
+    if (result?.filePath) {
+      void logger.info("Preview generated successfully", {
+        effectId: effect.id,
+        outputPath: result.filePath,
+        renderTime: result.renderTimeMs,
+      })
+      return result.filePath
+    }
+
+    return null
+  } catch (error) {
+    void logger.error("Failed to generate preview", { effectId: effect.id, error })
+    return null
+  }
+}
+
+/**
+ * Генерирует превью для всех эффектов
+ */
+export async function generateAllEffectPreviews(
+  effects: BaseEffect[],
+  config: EffectPreviewConfig,
+  onProgress?: (current: number, total: number, effectId: string) => void,
+): Promise<Map<string, string>> {
+  const results = new Map<string, string>()
+
+  void logger.info("Starting batch preview generation", { total: effects.length })
+
+  for (let i = 0; i < effects.length; i++) {
+    const effect = effects[i]
+    onProgress?.(i + 1, effects.length, effect.id)
+
+    const previewPath = await generateEffectPreview(effect, config)
+    if (previewPath) {
+      results.set(effect.id, previewPath)
+    }
+  }
+
+  void logger.info("Batch preview generation completed", {
+    total: effects.length,
+    successful: results.size,
+    failed: effects.length - results.size,
+  })
+
+  return results
+}
+
+/**
+ * Обновляет эффекты с путями к превью
+ */
+export function updateEffectsWithPreviews(
+  effects: BaseEffect[],
+  previewPaths: Map<string, string>,
+): BaseEffect[] {
+  return effects.map((effect) => {
+    const previewPath = previewPaths.get(effect.id)
+    if (previewPath) {
+      return {
+        ...effect,
+        preview: previewPath,
+      }
+    }
+    return effect
+  })
+}