shipping

apps/web/src/components/editor/assets-panel/tabbar.tsx

@@ -2,7 +2,7 @@
 
 import { cn } from "@/lib/utils";
 import {
-  Tab,
+  TAB_KEYS,
   tabs,
   useAssetsPanelStore,
 } from "../../../stores/assets-panel-store";
@@ -50,7 +50,7 @@ export function TabBar() {
         ref={scrollRef}
         className="scrollbar-hidden relative flex h-full w-full flex-col items-center justify-start gap-5 overflow-y-auto px-4 py-4"
       >
-        {(Object.keys(tabs) as Tab[]).map((tabKey) => {
+        {TAB_KEYS.map((tabKey) => {
           const tab = tabs[tabKey];
           return (
             <div

apps/web/src/components/editor/assets-panel/views/captions.tsx

@@ -2,44 +2,34 @@ import { Button } from "@/components/ui/button";
 import { PropertyGroup } from "../../properties-panel/property-item";
 import { PanelBaseView as BaseView } from "@/components/editor/panel-base-view";
 import { LanguageSelect } from "@/components/language-select";
-import { useState, useRef, useEffect } from "react";
+import { useState, useRef } from "react";
 import { extractTimelineAudio } from "@/lib/media/mediabunny";
 import { useEditor } from "@/hooks/use-editor";
 import { DEFAULT_TEXT_ELEMENT } from "@/constants/text-constants";
 import { LANGUAGES } from "@/constants/captions-constants";
-import { Loader2, Shield, Trash2, Upload } from "lucide-react";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
-import { TextElement } from "@/types/timeline";
-
-interface TranscriptionSegment {
-  text: string;
-  start: number;
-  end: number;
-}
-
-const PRIVACY_DIALOG_KEY = "opencut-transcription-privacy-accepted";
+import { Loader2 } from "lucide-react";
+import type { TranscriptionProgress } from "@/types/transcription";
+import { transcriptionService } from "@/services/transcription";
+import { decodeAudioToFloat32 } from "@/lib/audio-utils";
+import { buildCaptionChunks } from "@/lib/caption-utils";
 
 export function Captions() {
-  const [selectedCountry, setSelectedCountry] = useState("auto");
+  const [selectedLanguage, setSelectedLanguage] = useState("auto");
   const [isProcessing, setIsProcessing] = useState(false);
-  const [processingStep, setProcessingStep] = useState<string>("");
+  const [processingStep, setProcessingStep] = useState("");
   const [error, setError] = useState<string | null>(null);
-  const [showPrivacyDialog, setShowPrivacyDialog] = useState(false);
-  const [hasAcceptedPrivacy, setHasAcceptedPrivacy] = useState(false);
   const containerRef = useRef<HTMLDivElement>(null);
   const editor = useEditor();
 
-  useEffect(() => {
-    const hasAccepted = localStorage.getItem(PRIVACY_DIALOG_KEY) === "true";
-    setHasAcceptedPrivacy(hasAccepted);
-  }, []);
+  const handleProgress = (progress: TranscriptionProgress) => {
+    if (progress.status === "loading-model") {
+      setProcessingStep(
+        `Loading model ${Math.round(progress.progress)}%`,
+      );
+    } else if (progress.status === "transcribing") {
+      setProcessingStep("Transcribing...");
+    }
+  };
 
   const handleGenerateTranscript = async () => {
     try {
@@ -47,107 +37,44 @@ export function Captions() {
       setError(null);
       setProcessingStep("Extracting audio...");
 
-      const audioBlob = await extractTimelineAudio();
-
-      setProcessingStep("Encrypting audio...");
-      const audioBuffer = await audioBlob.arrayBuffer();
-      const encryptionResult = await encryptWithRandomKey(audioBuffer);
-      const encryptedBlob = new Blob([encryptionResult.encryptedData]);
-
-      setProcessingStep("Uploading...");
-      const uploadResponse = await fetch("/api/get-upload-url", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ fileExtension: "wav" }),
+      const audioBlob = await extractTimelineAudio({
+        tracks: editor.timeline.getTracks(),
+        mediaAssets: editor.media.getAssets(),
+        totalDuration: editor.timeline.getTotalDuration(),
       });
 
-      if (!uploadResponse.ok) {
-        const error = await uploadResponse.json();
-        throw new Error(error.message || "Failed to get upload URL");
-      }
+      setProcessingStep("Preparing audio...");
+      const { samples } = await decodeAudioToFloat32({ audioBlob });
 
-      const { uploadUrl, fileName } = await uploadResponse.json();
-
-      await fetch(uploadUrl, {
-        method: "PUT",
-        body: encryptedBlob,
+      const result = await transcriptionService.transcribe({
+        audioData: samples,
+        language: selectedLanguage === "auto" ? "auto" : selectedLanguage.toLowerCase(),
+        onProgress: handleProgress,
       });
 
-      setProcessingStep("Transcribing...");
-
-      const transcriptionResponse = await fetch("/api/transcribe", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          filename: fileName,
-          language:
-            selectedCountry === "auto" ? "auto" : selectedCountry.toLowerCase(),
-          decryptionKey: arrayBufferToBase64(encryptionResult.key),
-          iv: arrayBufferToBase64(encryptionResult.iv),
-        }),
-      });
-
-      if (!transcriptionResponse.ok) {
-        const error = await transcriptionResponse.json();
-        throw new Error(error.message || "Transcription failed");
-      }
-
-      const { text, segments } = await transcriptionResponse.json();
-
-      const shortCaptions: Array<{
-        text: string;
-        startTime: number;
-        duration: number;
-      }> = [];
-
-      let globalEndTime = 0;
-
-      segments.forEach((segment: TranscriptionSegment) => {
-        const words = segment.text.trim().split(/\s+/);
-        const segmentDuration = segment.end - segment.start;
-        const wordsPerSecond = words.length / segmentDuration;
-
-        const chunks: string[] = [];
-        for (let i = 0; i < words.length; i += 3) {
-          chunks.push(words.slice(i, i + 3).join(" "));
-        }
-
-        let chunkStartTime = segment.start;
-        chunks.forEach((chunk) => {
-          const chunkWords = chunk.split(/\s+/).length;
-          const chunkDuration = Math.max(0.8, chunkWords / wordsPerSecond);
-          const adjustedStartTime = Math.max(chunkStartTime, globalEndTime);
-
-          shortCaptions.push({
-            text: chunk,
-            startTime: adjustedStartTime,
-            duration: chunkDuration,
-          });
-
-          globalEndTime = adjustedStartTime + chunkDuration;
-          chunkStartTime += chunkDuration;
-        });
-      });
+      setProcessingStep("Generating captions...");
+      const captionChunks = buildCaptionChunks({ segments: result.segments });
 
       const captionTrackId = editor.timeline.addTrack({
         type: "text",
         index: 0,
       });
 
-      shortCaptions.forEach((caption, index) => {
+      for (let i = 0; i < captionChunks.length; i++) {
+        const caption = captionChunks[i];
         editor.timeline.insertElement({
           placement: { mode: "explicit", trackId: captionTrackId },
           element: {
             ...DEFAULT_TEXT_ELEMENT,
-            name: `Caption ${index + 1}`,
+            name: `Caption ${i + 1}`,
             content: caption.text,
             duration: caption.duration,
             startTime: caption.startTime,
             fontSize: 65,
             fontWeight: "bold",
-          } as TextElement,
+          },
         });
-      });
+      }
     } catch (error) {
       console.error("Transcription failed:", error);
       setError(
@@ -166,8 +93,8 @@ export function Captions() {
     >
       <PropertyGroup title="Language">
         <LanguageSelect
-          selectedCountry={selectedCountry}
-          onSelect={setSelectedCountry}
+          selectedCountry={selectedLanguage}
+          onSelect={setSelectedLanguage}
           containerRef={containerRef}
           languages={LANGUAGES}
         />
@@ -182,96 +109,12 @@ export function Captions() {
 
         <Button
           className="w-full"
-          onClick={() => {
-            if (hasAcceptedPrivacy) {
-              handleGenerateTranscript();
-            } else {
-              setShowPrivacyDialog(true);
-            }
-          }}
+          onClick={handleGenerateTranscript}
           disabled={isProcessing}
         >
           {isProcessing && <Loader2 className="mr-1 animate-spin" />}
           {isProcessing ? processingStep : "Generate transcript"}
         </Button>
-
-        <Dialog open={showPrivacyDialog} onOpenChange={setShowPrivacyDialog}>
-          <DialogContent className="sm:max-w-md">
-            <DialogHeader>
-              <DialogTitle className="flex items-center gap-2">
-                <Shield className="size-5" />
-                Audio processing notice
-              </DialogTitle>
-              <DialogDescription className="space-y-3">
-                <p>
-                  To generate captions, we need to process your timeline audio
-                  using speech-to-text technology.
-                </p>
-
-                <div className="space-y-2 pt-2">
-                  <div className="flex items-start gap-2">
-                    <Shield className="size-4 flex-shrink-0" />
-                    <span className="text-sm">
-                      Zero-knowledge encryption - we cannot decrypt your files
-                      even if we wanted to
-                    </span>
-                  </div>
-
-                  <div className="flex items-start gap-2">
-                    <Shield className="size-4 flex-shrink-0" />
-                    <span className="text-sm">
-                      Encryption keys generated randomly in your browser, never
-                      stored anywhere
-                    </span>
-                  </div>
-
-                  <div className="flex items-start gap-2">
-                    <Upload className="size-4 flex-shrink-0" />
-                    <span className="text-sm">
-                      Audio encrypted before upload - raw audio never leaves
-                      your device
-                    </span>
-                  </div>
-
-                  <div className="flex items-start gap-2">
-                    <Trash2 className="size-4 flex-shrink-0" />
-                    <span className="text-sm">
-                      Everything permanently deleted within seconds after
-                      transcription
-                    </span>
-                  </div>
-                </div>
-
-                <p className="text-muted-foreground text-xs">
-                  <strong>True zero-knowledge privacy:</strong> Encryption keys
-                  are generated randomly in your browser and never stored
-                  anywhere. It's cryptographically impossible for us, our cloud
-                  providers, or anyone else to decrypt your audio files.
-                </p>
-              </DialogDescription>
-            </DialogHeader>
-            <DialogFooter className="gap-2">
-              <Button
-                variant="outline"
-                onClick={() => setShowPrivacyDialog(false)}
-                disabled={isProcessing}
-              >
-                Cancel
-              </Button>
-              <Button
-                onClick={() => {
-                  localStorage.setItem(PRIVACY_DIALOG_KEY, "true");
-                  setHasAcceptedPrivacy(true);
-                  setShowPrivacyDialog(false);
-                  handleGenerateTranscript();
-                }}
-                disabled={isProcessing}
-              >
-                Continue & generate captions
-              </Button>
-            </DialogFooter>
-          </DialogContent>
-        </Dialog>
       </div>
     </BaseView>
   );

apps/web/src/components/editor/assets-panel/views/settings.tsx

@@ -26,11 +26,9 @@ import Image from "next/image";
 import { cn } from "@/lib/utils";
 import { colors } from "@/data/colors/solid";
 import { patternCraftGradients } from "@/data/colors/pattern-craft";
-import { PipetteIcon, PlusIcon } from "lucide-react";
+import { PipetteIcon } from "lucide-react";
 import { useMemo, memo, useCallback } from "react";
 import { syntaxUIGradients } from "@/data/colors/syntax-ui";
-import { Button } from "@/components/ui/button";
-import { Separator } from "@/components/ui/separator";
 import { useEditor } from "@/hooks/use-editor";
 import type { TProject } from "@/types/project";
 

apps/web/src/components/editor/assets-panel/views/stickers.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useEffect, useState, useMemo } from "react";
+import type { CSSProperties } from "react";
 import { useStickersStore } from "@/stores/stickers-store";
 import {
   Loader2,
@@ -38,6 +39,10 @@ import type { StickerCategory } from "@/types/stickers";
 import { STICKER_CATEGORIES } from "@/constants/stickers-constants";
 import { useInfiniteScroll } from "@/hooks/use-infinite-scroll";
 
+function isStickerCategory(value: string): value is StickerCategory {
+  return STICKER_CATEGORIES.includes(value as StickerCategory);
+}
+
 export function StickersView() {
   const { selectedCategory, setSelectedCategory } = useStickersStore();
 
@@ -45,8 +50,8 @@ export function StickersView() {
     <BaseView
       value={selectedCategory}
       onValueChange={(v) => {
-        if (STICKER_CATEGORIES.includes(v as StickerCategory)) {
-          setSelectedCategory({ category: v as StickerCategory });
+        if (isStickerCategory(v)) {
+          setSelectedCategory({ category: v });
         }
       }}
       tabs={[
@@ -91,16 +96,21 @@ function StickerGrid({
   addingSticker: string | null;
   capSize?: boolean;
 }) {
+  const gridStyle: CSSProperties & {
+    "--sticker-min": string;
+    "--sticker-max"?: string;
+  } = {
+    gridTemplateColumns: capSize
+      ? "repeat(auto-fill, minmax(var(--sticker-min, 96px), var(--sticker-max, 160px)))"
+      : "repeat(auto-fit, minmax(var(--sticker-min, 96px), 1fr))",
+    "--sticker-min": "96px",
+    ...(capSize ? { "--sticker-max": "160px" } : {}),
+  };
+
   return (
     <div
       className="grid gap-2"
-      style={{
-        gridTemplateColumns: capSize
-          ? "repeat(auto-fill, minmax(var(--sticker-min, 96px), var(--sticker-max, 160px)))"
-          : "repeat(auto-fit, minmax(var(--sticker-min, 96px), 1fr))",
-        ["--sticker-min" as any]: "96px",
-        ...(capSize ? ({ ["--sticker-max"]: "160px" } as any) : {}),
-      }}
+      style={gridStyle}
     >
       {icons.map((iconName) => (
         <StickerItem
@@ -201,17 +211,17 @@ function StickersContentView({ category }: { category: StickerCategory }) {
         const collection = collections[c.prefix];
         return collection
           ? {
-              prefix: c.prefix,
-              name: c.name,
-              total: collection.total,
-            }
+            prefix: c.prefix,
+            name: c.name,
+            total: collection.total,
+          }
           : null;
       })
       .filter(Boolean) as Array<{
-      prefix: string;
-      name: string;
-      total: number;
-    }>;
+        prefix: string;
+        name: string;
+        total: number;
+      }>;
   }, [collections, category]);
 
   const { scrollAreaRef, handleScroll } = useInfiniteScroll({
@@ -524,10 +534,10 @@ function StickerItem({
           hostIndex === 0
             ? getIconSvgUrl(iconName, { width: 64, height: 64 })
             : buildIconSvgUrl(
-                ICONIFY_HOSTS[Math.min(hostIndex, ICONIFY_HOSTS.length - 1)],
-                iconName,
-                { width: 64, height: 64 },
-              )
+              ICONIFY_HOSTS[Math.min(hostIndex, ICONIFY_HOSTS.length - 1)],
+              iconName,
+              { width: 64, height: 64 },
+            )
         }
         alt={displayName}
         width={64}
@@ -536,9 +546,9 @@ function StickerItem({
         style={
           capSize
             ? {
-                maxWidth: "var(--sticker-max, 160px)",
-                maxHeight: "var(--sticker-max, 160px)",
-              }
+              maxWidth: "var(--sticker-max, 160px)",
+              maxHeight: "var(--sticker-max, 160px)",
+            }
             : undefined
         }
         onError={() => {

apps/web/src/components/editor/export-button.tsx

@@ -11,7 +11,13 @@ import { Checkbox } from "../ui/checkbox";
 import { cn } from "@/lib/utils";
 import { getExportMimeType, getExportFileExtension } from "@/lib/export";
 import { Check, Copy, Download, RotateCcw, X } from "lucide-react";
-import { ExportFormat, ExportQuality, ExportResult } from "@/types/export";
+import {
+  EXPORT_FORMAT_VALUES,
+  EXPORT_QUALITY_VALUES,
+  ExportFormat,
+  ExportQuality,
+  ExportResult,
+} from "@/types/export";
 import { PropertyGroup } from "./properties-panel/property-item";
 import { useEditor } from "@/hooks/use-editor";
 import { DEFAULT_EXPORT_OPTIONS } from "@/constants/export-constants";
@@ -160,9 +166,11 @@ function ExportPopover({
                     >
                       <RadioGroup
                         value={format}
-                        onValueChange={(value) =>
-                          setFormat(value as ExportFormat)
-                        }
+                        onValueChange={(value) => {
+                          if (isExportFormat(value)) {
+                            setFormat(value);
+                          }
+                        }}
                       >
                         <div className="flex items-center space-x-2">
                           <RadioGroupItem value="mp4" id="mp4" />
@@ -186,9 +194,11 @@ function ExportPopover({
                     >
                       <RadioGroup
                         value={quality}
-                        onValueChange={(value) =>
-                          setQuality(value as ExportQuality)
-                        }
+                        onValueChange={(value) => {
+                          if (isExportQuality(value)) {
+                            setQuality(value);
+                          }
+                        }}
                       >
                         <div className="flex items-center space-x-2">
                           <RadioGroupItem value="low" id="low" />
@@ -267,6 +277,14 @@ function ExportPopover({
   );
 }
 
+function isExportFormat(value: string): value is ExportFormat {
+  return EXPORT_FORMAT_VALUES.some((formatValue) => formatValue === value);
+}
+
+function isExportQuality(value: string): value is ExportQuality {
+  return EXPORT_QUALITY_VALUES.some((qualityValue) => qualityValue === value);
+}
+
 function ExportError({
   error,
   onRetry,

apps/web/src/components/editor/timeline/audio-waveform.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import WaveSurfer from "wavesurfer.js";
 
 interface AudioWaveformProps {
@@ -39,12 +39,12 @@ function extractPeaks({
   return peaks;
 }
 
-const AudioWaveform: React.FC<AudioWaveformProps> = ({
+export function AudioWaveform({
   audioUrl,
   audioBuffer,
   height = 32,
   className = "",
-}) => {
+}: AudioWaveformProps) {
   const waveformRef = useRef<HTMLDivElement>(null);
   const wavesurfer = useRef<WaveSurfer | null>(null);
   const [isLoading, setIsLoading] = useState(true);
@@ -58,14 +58,10 @@ const AudioWaveform: React.FC<AudioWaveformProps> = ({
       if (!waveformRef.current || (!audioUrl && !audioBuffer)) return;
 
       try {
-        // Clear any existing instance safely
         if (ws) {
-          // Instead of immediately destroying, just set to null
-          // We'll destroy it outside this function
           wavesurfer.current = null;
         }
 
-        // Create a fresh instance
         const newWaveSurfer = WaveSurfer.create({
           container: waveformRef.current,
           waveColor: "rgba(255, 255, 255, 0.6)",
@@ -78,20 +74,16 @@ const AudioWaveform: React.FC<AudioWaveformProps> = ({
           interact: false,
         });
 
-        // Assign to ref only if component is still mounted
         if (mounted) {
           wavesurfer.current = newWaveSurfer;
         } else {
-          // Component unmounted during initialization, clean up
           try {
             newWaveSurfer.destroy();
-          } catch (e) {
-            // Ignore destroy errors
+          } catch {
           }
           return;
         }
 
-        // Event listeners
         newWaveSurfer.on("ready", () => {
           if (mounted) {
             setIsLoading(false);
@@ -122,48 +114,35 @@ const AudioWaveform: React.FC<AudioWaveformProps> = ({
       }
     };
 
-    // First safely destroy previous instance if it exists
     if (ws) {
-      // Use this pattern to safely destroy the previous instance
       const wsToDestroy = ws;
-      // Detach from ref immediately
       wavesurfer.current = null;
 
-      // Wait a tick to destroy so any pending operations can complete
       requestAnimationFrame(() => {
         try {
           wsToDestroy.destroy();
-        } catch (e) {
-          // Ignore errors during destroy
+        } catch {
         }
-        // Only initialize new instance after destroying the old one
         if (mounted) {
           initWaveSurfer();
         }
       });
     } else {
-      // No previous instance to clean up, initialize directly
       initWaveSurfer();
     }
 
     return () => {
-      // Mark component as unmounted
       mounted = false;
 
-      // Store reference to current wavesurfer instance
       const wsToDestroy = wavesurfer.current;
 
-      // Immediately clear the ref to prevent accessing it after unmount
       wavesurfer.current = null;
 
-      // If we have an instance to clean up, do it safely
       if (wsToDestroy) {
-        // Delay destruction to avoid race conditions
         requestAnimationFrame(() => {
           try {
             wsToDestroy.destroy();
-          } catch (e) {
-            // Ignore destroy errors - they're expected
+          } catch {
           }
         });
       }
@@ -195,6 +174,6 @@ const AudioWaveform: React.FC<AudioWaveformProps> = ({
       />
     </div>
   );
-};
+}
 
 export default AudioWaveform;