diff --git a/src/activationHelpers/contextAware/commands.ts b/src/activationHelpers/contextAware/commands.ts
index ce23ecd6f..3eef296eb 100644
--- a/src/activationHelpers/contextAware/commands.ts
+++ b/src/activationHelpers/contextAware/commands.ts
@@ -188,7 +188,7 @@ export async function registerCommands(context: vscode.ExtensionContext) {
             filesToExport: string[];
             options?: { skipValidation?: boolean; removeIds?: boolean; };
         }) => {
-            await exportCodexContent(format, userSelectedPath, filesToExport, options);
+            return exportCodexContent(format, userSelectedPath, filesToExport, options);
         }
     );
 
diff --git a/src/exportHandler/audioExporter.ts b/src/exportHandler/audioExporter.ts
index ef23e101b..247b40b56 100644
--- a/src/exportHandler/audioExporter.ts
+++ b/src/exportHandler/audioExporter.ts
@@ -5,6 +5,7 @@ import { exec } from "child_process";
 import { promisify } from "util";
 import * as os from "os";
 import * as fs from "fs";
+import { CodexCellTypes } from "../../types/enums";
 
 const execAsync = promisify(exec);
 
@@ -20,6 +21,12 @@ type ExportAudioOptions = {
     includeTimestamps?: boolean;
 };
 
+type AudioCellData = {
+    startTime?: number;
+    endTime?: number;
+    audioStartTime?: number;
+    audioEndTime?: number;
+};
 
 function sanitizeFileComponent(input: string): string {
     return input
@@ -125,7 +132,8 @@ function computeDialogueLineNumbers(
         const isMerged = !!(data && data.merged);
         const isDeleted = !!(data && data.deleted);
         const isParatext = cell?.metadata?.type === "paratext";
-        if (!isValidKind || isMerged || isDeleted || isParatext) continue;
+        const isMilestone = cell?.metadata?.type === CodexCellTypes.MILESTONE;
+        if (!isValidKind || isMerged || isDeleted || isParatext || isMilestone) continue;
         const id: string | undefined = cell?.metadata?.id;
         if (!id) continue;
         line += 1;
@@ -540,6 +548,10 @@ export async function exportAudioAttachments(
                         debug(`Skipping cell with kind ${cell.kind}`);
                         continue;
                     }
+                    if (cell?.metadata?.type === CodexCellTypes.MILESTONE) {
+                        debug(`Skipping milestone cell: ${cell?.metadata?.id}`);
+                        continue;
+                    }
                     if (!isActiveCell(cell)) {
                         debug(`Skipping inactive cell: ${cell?.metadata?.id}`);
                         continue;
@@ -588,9 +600,9 @@ export async function exportAudioAttachments(
                     }
 
                     // Build destination filename: <file>_<lang>_<label>_<line>.wav (always export as WAV)
-                    const timeFromCell = (cell?.metadata?.data || {}) as { startTime?: number; endTime?: number; };
-                    const start = timeFromCell.startTime;
-                    const end = timeFromCell.endTime;
+                    const timeFromCell = (cell?.metadata?.data || {}) as AudioCellData;
+                    const start = timeFromCell.audioStartTime || timeFromCell.startTime;
+                    const end = timeFromCell.audioEndTime || timeFromCell.endTime;
                     const originalExt = extname(absoluteSrc.fsPath) || ".wav";
                     const labelRaw = cell?.metadata?.cellLabel || "unlabeled";
                     const label = sanitizeFileComponent(String(labelRaw).toLowerCase());
diff --git a/src/exportHandler/exportHandler.ts b/src/exportHandler/exportHandler.ts
index a6e221bc7..57ab7c980 100644
--- a/src/exportHandler/exportHandler.ts
+++ b/src/exportHandler/exportHandler.ts
@@ -9,7 +9,7 @@ import * as fs from "fs";
 import { exec } from "child_process";
 import { promisify } from "util";
 import { removeHtmlTags, generateSrtData } from "./subtitleUtils";
-import { generateVttData } from "./vttUtils";
+import { generateVttData, hasOverlappingCues } from "./vttUtils";
 // import { exportRtfWithPandoc } from "../../webviews/codex-webviews/src/NewSourceUploader/importers/rtf/pandocNodeBridge";
 
 const execAsync = promisify(exec);
@@ -61,6 +61,36 @@ function getActiveCells(cells: CodexNotebookAsJSONData["cells"]) {
     });
 }
 
+const SUBTITLE_OVERLAP_WARNING =
+    "Some selected files have overlapping subtitle timestamps. To split overlapping cues so they appear at different times, use the WebVTT with Cue Splitting option. Do you want to export anyway?";
+
+/**
+ * Checks selected files for overlapping VTT/SRT cues. If any file has overlaps, shows a warning
+ * and asks the user to confirm. Returns true if export should proceed, false to cancel.
+ */
+async function checkSubtitleOverlapsAndConfirm(filesToExport: string[]): Promise<boolean> {
+    let hasOverlaps = false;
+    for (const filePath of filesToExport) {
+        try {
+            const codexData = await readCodexNotebookFromUri(vscode.Uri.file(filePath));
+            const cells = getActiveCells(codexData.cells);
+            if (hasOverlappingCues(cells)) {
+                hasOverlaps = true;
+                break;
+            }
+        } catch {
+            // If we can't read a file, skip overlap check for it; export will fail later if needed
+        }
+    }
+    if (!hasOverlaps) return true;
+    const choice = await vscode.window.showWarningMessage(
+        SUBTITLE_OVERLAP_WARNING,
+        { modal: true },
+        "Export anyway"
+    );
+    return choice === "Export anyway";
+}
+
 /**
  * Maps book codes to their full names for USFM export
  */
@@ -305,6 +335,7 @@ export enum CodexExportFormat {
     SUBTITLES_SRT = "subtitles-srt",
     SUBTITLES_VTT_WITH_STYLES = "subtitles-vtt-with-styles",
     SUBTITLES_VTT_WITHOUT_STYLES = "subtitles-vtt-without-styles",
+    SUBTITLES_VTT_WITH_CUE_SPLITTING = "subtitles-vtt-with-cue-splitting",
     XLIFF = "xliff",
     CSV = "csv",
     TSV = "tsv",
@@ -1888,51 +1919,66 @@ async function exportCodexContentAsRebuild(
     );
 }
 
+/**
+ * @returns true if export completed, false if user cancelled due to subtitle overlap warning.
+ */
 export async function exportCodexContent(
     format: CodexExportFormat,
     userSelectedPath: string,
     filesToExport: string[],
     options?: ExportOptions
-) {
+): Promise<boolean> {
     switch (format) {
         case CodexExportFormat.PLAINTEXT:
             await exportCodexContentAsPlaintext(userSelectedPath, filesToExport, options);
-            break;
+            return true;
         case CodexExportFormat.USFM:
             await exportCodexContentAsUsfm(userSelectedPath, filesToExport, options);
-            break;
+            return true;
         case CodexExportFormat.HTML:
             await exportCodexContentAsHtml(userSelectedPath, filesToExport, options);
-            break;
+            return true;
         case CodexExportFormat.AUDIO: {
             const { exportAudioAttachments } = await import("./audioExporter");
             await exportAudioAttachments(userSelectedPath, filesToExport, { includeTimestamps: (options as any)?.includeTimestamps });
-            break;
+            return true;
         }
         case CodexExportFormat.SUBTITLES_VTT_WITH_STYLES:
-            await exportCodexContentAsSubtitlesVtt(userSelectedPath, filesToExport, options, true);
-            break;
+            if (await checkSubtitleOverlapsAndConfirm(filesToExport)) {
+                await exportCodexContentAsSubtitlesVtt(userSelectedPath, filesToExport, options, true);
+                return true;
+            }
+            return false;
         case CodexExportFormat.SUBTITLES_VTT_WITHOUT_STYLES:
-            await exportCodexContentAsSubtitlesVtt(userSelectedPath, filesToExport, options, false);
-            break;
+            if (await checkSubtitleOverlapsAndConfirm(filesToExport)) {
+                await exportCodexContentAsSubtitlesVtt(userSelectedPath, filesToExport, options, false);
+                return true;
+            }
+            return false;
+        case CodexExportFormat.SUBTITLES_VTT_WITH_CUE_SPLITTING:
+            await exportCodexContentAsSubtitlesVtt(userSelectedPath, filesToExport, options, false, true);
+            return true;
         case CodexExportFormat.SUBTITLES_SRT:
-            await exportCodexContentAsSubtitlesSrt(userSelectedPath, filesToExport, options);
-            break;
+            if (await checkSubtitleOverlapsAndConfirm(filesToExport)) {
+                await exportCodexContentAsSubtitlesSrt(userSelectedPath, filesToExport, options);
+                return true;
+            }
+            return false;
         case CodexExportFormat.XLIFF:
             await exportCodexContentAsXliff(userSelectedPath, filesToExport, options);
-            break;
+            return true;
         case CodexExportFormat.CSV:
             await exportCodexContentAsCsv(userSelectedPath, filesToExport, options);
-            break;
+            return true;
         case CodexExportFormat.TSV:
             await exportCodexContentAsTsv(userSelectedPath, filesToExport, options);
-            break;
+            return true;
         case CodexExportFormat.REBUILD_EXPORT:
             await exportCodexContentAsRebuild(userSelectedPath, filesToExport, options);
-            break;
+            return true;
         case CodexExportFormat.BACKTRANSLATIONS:
             await exportCodexContentAsBacktranslations(userSelectedPath, filesToExport, options);
-            break;
+            return true;
     }
 }
 
@@ -2042,7 +2088,8 @@ export const exportCodexContentAsSubtitlesVtt = async (
     userSelectedPath: string,
     filesToExport: string[],
     options?: ExportOptions,
-    includeStyles: boolean = true
+    includeStyles: boolean = true,
+    cueSplitting: boolean = false
 ) => {
     try {
         debug("Starting exportCodexContentAsSubtitlesVtt function");
@@ -2090,7 +2137,7 @@ export const exportCodexContentAsSubtitlesVtt = async (
                     debug(`File has ${cells.length} active cells`);
 
                     // Generate VTT content
-                    const vttContent = generateVttData(cells, includeStyles, file.fsPath); // Include styles for VTT
+                    const vttContent = generateVttData(cells, includeStyles, cueSplitting, file.fsPath); // Include styles for VTT
                     debug({ vttContent, cells, includeStyles });
 
                     // Write file
diff --git a/src/exportHandler/vttUtils.ts b/src/exportHandler/vttUtils.ts
index 5a81bed7d..71b5ccb73 100644
--- a/src/exportHandler/vttUtils.ts
+++ b/src/exportHandler/vttUtils.ts
@@ -1,7 +1,5 @@
-import { useMemo } from "react";
-import { CodexNotebookAsJSONData, QuillCellContent } from "@types";
+import { CodexNotebookAsJSONData } from "@types";
 import { removeHtmlTags } from "./subtitleUtils";
-import { ExportOptions } from "./exportHandler";
 import * as vscode from "vscode";
 
 /**
@@ -53,9 +51,17 @@ const processVttContent = (content: string): string => {
     return ensureDialogueLineBreaks(processed);
 };
 
+type ProcessedUnit = {
+    id: string | undefined;
+    startTime: number;
+    endTime: number;
+    finalText: string;
+};
+
 export const generateVttData = (
     cells: CodexNotebookAsJSONData["cells"],
     includeStyles: boolean,
+    cueSplitting: boolean,
     filePath: string
 ): string => {
     if (!cells.length) return "";
@@ -65,24 +71,37 @@ export const generateVttData = (
         return date.toISOString().substr(11, 12);
     };
 
-    const cues = cells
-        // Filter out merged cells before processing
+    const units: ProcessedUnit[] = cells
         .filter((unit) => {
             const metadata = unit.metadata;
             return !metadata?.data?.merged && !!unit.metadata?.data?.startTime;
         })
         .map((unit, index) => {
-            const startTime = unit.metadata?.data?.startTime ?? index;
-            const endTime = unit.metadata?.data?.endTime ?? index + 1;
+            const startTime = Number(unit.metadata?.data?.startTime ?? index);
+            const endTime = Number(unit.metadata?.data?.endTime ?? index + 1);
             const text = includeStyles ? processVttContent(unit.value) : removeHtmlTags(unit.value);
             const finalText = ensureDialogueLineBreaks(text);
-            return `${unit.metadata?.id}
-${formatTime(Number(startTime))} --> ${formatTime(Number(endTime))}
-${finalText}
+            return {
+                id: unit.metadata?.cellLabel || unit.metadata?.id,
+                startTime,
+                endTime,
+                finalText,
+            };
+        });
 
-`;
-        })
-        .join("\n");
+    const cues =
+        cueSplitting && units.length > 0
+            ? buildSplitCues(units, formatTime)
+            : units
+                .map(
+                    (unit) =>
+                        `${unit.id}
+${formatTime(unit.startTime)} --> ${formatTime(unit.endTime)}
+${unit.finalText}
+
+`
+                )
+                .join("\n");
 
     if (cues.length === 0) {
         vscode.window.showInformationMessage("No cues found in the " + filePath);
@@ -91,3 +110,62 @@ ${finalText}
 
 ${cues}`;
 };
+
+/**
+ * Returns true if any two cues in the given cells have overlapping time ranges.
+ * Uses the same cell filtering as generateVttData (excludes merged, requires startTime).
+ * Two cues [s1,e1] and [s2,e2] overlap when s1 < e2 && s2 < e1.
+ */
+export const hasOverlappingCues = (cells: CodexNotebookAsJSONData["cells"]): boolean => {
+    const units = cells
+        .filter((unit) => {
+            const metadata = unit.metadata;
+            return !metadata?.data?.merged && !!unit.metadata?.data?.startTime;
+        })
+        .map((unit, index) => ({
+            startTime: Number(unit.metadata?.data?.startTime ?? index),
+            endTime: Number(unit.metadata?.data?.endTime ?? index + 1),
+        }));
+
+    for (let i = 0; i < units.length; i++) {
+        for (let j = i + 1; j < units.length; j++) {
+            const a = units[i];
+            const b = units[j];
+            if (a.startTime < b.endTime && b.startTime < a.endTime) return true;
+        }
+    }
+    return false;
+};
+
+/**
+ * Build VTT cues by splitting on all unique timestamps. For each adjacent pair of timestamps,
+ * emits one cue containing the concatenated text of all units active in that time range.
+ * Cue is active in [tStart, tEnd) when unit.startTime < tEnd && unit.endTime > tStart.
+ */
+function buildSplitCues(units: ProcessedUnit[], formatTime: (s: number) => string): string {
+    const timestamps = new Set<number>();
+    for (const unit of units) {
+        timestamps.add(unit.startTime);
+        timestamps.add(unit.endTime);
+    }
+    const sorted = Array.from(timestamps).sort((a, b) => a - b);
+
+    const parts: string[] = [];
+    for (let i = 0; i < sorted.length - 1; i++) {
+        const tStart = sorted[i];
+        const tEnd = sorted[i + 1];
+        if (tStart === tEnd) continue;
+
+        const active = units.filter((unit) => unit.startTime < tEnd && unit.endTime > tStart);
+        if (active.length === 0) continue;
+
+        const text = active.map((unit) => unit.finalText).join("\n\n");
+        const cueId = `${active[0].id}-split`;
+        parts.push(`${cueId}
+${formatTime(tStart)} --> ${formatTime(tEnd)}
+${text}
+
+`);
+    }
+    return parts.join("\n");
+}
diff --git a/src/globalProvider.ts b/src/globalProvider.ts
index 1d1c4aa47..0df3462c3 100644
--- a/src/globalProvider.ts
+++ b/src/globalProvider.ts
@@ -146,8 +146,6 @@ export abstract class BaseWebviewProvider implements vscode.WebviewViewProvider
     public postMessage(message: any): void {
         if (this._view) {
             safePostMessageToView(this._view, message, "Global");
-        } else {
-            console.error(`WebviewView ${this.getWebviewId()} is not initialized`);
         }
     }
 
@@ -201,14 +199,18 @@ export class GlobalProvider {
 
             const destination = message.destination;
             if (destination === "webview") {
-                this.postMessageToAllWebviews(message);
+                // Forward the message to all webviews, preserving the original structure
+                // Send the full GlobalMessage object so webviews receive command, destination, and content
+                this.providers.forEach((provider, _key) => {
+                    provider.postMessage(message as GlobalMessage);
+                });
             } else if (destination === "provider") {
                 this.postMessageToAllProviders(message);
             }
         }
     }
     public postMessageToAllProviders(message: any) {
-        this.providers.forEach((provider, key) => {
+        this.providers.forEach((provider, _key) => {
             provider.receiveMessage(message);
         });
     }
@@ -227,7 +229,7 @@ export class GlobalProvider {
             content,
         };
 
-        this.providers.forEach((provider, key) => {
+        this.providers.forEach((provider, _key) => {
             provider.postMessage(message);
         });
     }
diff --git a/src/projectManager/projectExportView.ts b/src/projectManager/projectExportView.ts
index 22118b896..7b11a59cc 100644
--- a/src/projectManager/projectExportView.ts
+++ b/src/projectManager/projectExportView.ts
@@ -72,8 +72,8 @@ export async function openProjectExportView(context: vscode.ExtensionContext) {
                 break;
             case "export":
                 try {
-                    await vscode.commands.executeCommand(
-                        `codex-editor-extension.exportCodexContent`,
+                    const completed = await vscode.commands.executeCommand<boolean>(
+                        "codex-editor-extension.exportCodexContent",
                         {
                             format: message.format as CodexExportFormat,
                             userSelectedPath: message.userSelectedPath,
@@ -81,7 +81,9 @@ export async function openProjectExportView(context: vscode.ExtensionContext) {
                             options: message.options,
                         }
                     );
-                    panel.dispose();
+                    if (completed !== false) {
+                        panel.dispose();
+                    }
                 } catch (error) {
                     vscode.window.showErrorMessage(
                         "Failed to export project. Please check your configuration."
@@ -437,6 +439,13 @@ function getWebviewContent(
                                         <span class="format-tag">Plain Text Only</span>
                                     </div>
                                 </div>
+                                <div class="format-option" data-format="subtitles-vtt-with-cue-splitting">
+                                    <div class="format-option-content">
+                                        <strong>WebVTT with Cue Splitting</strong>
+                                        <p>Only use this option if you have overlapping subtitles representing independent speakers that need to appear and disappear at different times.</p>
+                                        <span class="format-tag">Plain Text Only</span>
+                                    </div>
+                                </div>
                             </div>
                         </div>
                     </div>
diff --git a/src/providers/codexCellEditorProvider/codexCellEditorMessagehandling.ts b/src/providers/codexCellEditorProvider/codexCellEditorMessagehandling.ts
index faa2f68d0..4c7451fd2 100644
--- a/src/providers/codexCellEditorProvider/codexCellEditorMessagehandling.ts
+++ b/src/providers/codexCellEditorProvider/codexCellEditorMessagehandling.ts
@@ -75,6 +75,58 @@ async function pathExists(filePath: string): Promise<boolean> {
     }
 }
 
+/**
+ * Sanitizes a name to be safe for use as a folder name.
+ * Removes invalid characters and normalizes the name.
+ */
+function sanitizeFolderName(name: string): string {
+    return (
+        name
+            .replace(/[<>:"/\\|?*]|^\.|\.$|\.lock$/g, "-") // Invalid/reserved chars
+            .replace(/\s+/g, "-") // Replace spaces with hyphens
+            .replace(/\.+/g, "-") // Replace periods with hyphens
+            .replace(/-+/g, "-") // Replace multiple hyphens with single hyphen
+            .replace(/^-|-$/g, "") // Remove leading/trailing hyphens
+        || "UNKNOWN" // Fallback if name becomes empty
+    );
+}
+
+/**
+ * Determines the document segment for attachment storage.
+ * Uses originalName from metadata (sanitized), falls back to first cell's cellId, 
+ * then corpusMarker, then "UNKNOWN".
+ */
+function getDocumentSegment(document: CodexCellDocument): string {
+    const metadata = document.getNotebookMetadata();
+
+    // First priority: use originalName from metadata (sanitized for folder name)
+    if (metadata?.originalName) {
+        const sanitized = sanitizeFolderName(metadata.originalName);
+        if (sanitized && sanitized !== "UNKNOWN") {
+            return sanitized;
+        }
+    }
+
+    // Fallback to first cell's cellId
+    const firstCell = document.getCellByIndex(0);
+    if (firstCell?.metadata?.id) {
+        const cellId = firstCell.metadata.id;
+        const segment = cellId.split(' ')[0];
+        if (segment) {
+            return segment;
+        }
+    }
+
+    // Fallback to corpusMarker
+    const corpusMarker = metadata?.corpusMarker;
+    if (corpusMarker) {
+        return corpusMarker;
+    }
+
+    // Final fallback
+    return "UNKNOWN";
+}
+
 // Get a reference to the provider
 function getProvider(): CodexCellEditorProvider | undefined {
     // Find the provider through the window object
@@ -1123,6 +1175,12 @@ const messageHandlers: Record<string, (ctx: MessageHandlerContext) => Promise<vo
         document.updateCellTimestamps(typedEvent.content.cellId, typedEvent.content.timestamps);
     },
 
+    updateCellAudioTimestamps: ({ event, document }) => {
+        const typedEvent = event as Extract<EditorPostMessages, { command: "updateCellAudioTimestamps"; }>;
+        console.log("updateCellAudioTimestamps message received", { event });
+        document.updateCellAudioTimestamps(typedEvent.content.cellId, typedEvent.content.timestamps);
+    },
+
     updateCellLabel: ({ event, document }) => {
         const typedEvent = event as Extract<EditorPostMessages, { command: "updateCellLabel"; }>;
         debug("updateCellLabel message received", { event });
@@ -1252,15 +1310,100 @@ const messageHandlers: Record<string, (ctx: MessageHandlerContext) => Promise<vo
             canSelectMany: false,
             openLabel: "Select Video File",
             filters: {
-                Videos: ["mp4", "mkv", "avi", "mov"],
+                Videos: ["mp4", "mkv", "avi", "mov", "webm"],
             },
         });
         const fileUri = result?.[0];
         if (fileUri) {
-            const videoUrl = fileUri.toString();
-            await document.updateNotebookMetadata({ videoUrl });
-            await document.save(new vscode.CancellationTokenSource().token);
-            provider.refreshWebview(webviewPanel, document);
+            try {
+                const workspaceFolder = vscode.workspace.getWorkspaceFolder(document.uri);
+                if (!workspaceFolder) {
+                    throw new Error("No workspace folder found");
+                }
+
+                // Read the video file content
+                const fileData = await vscode.workspace.fs.readFile(fileUri);
+
+                // Enforce a reasonable max size (e.g., 600 MB) for video files
+                const MAX_BYTES = 600 * 1024 * 1024;
+                if (fileData.length > MAX_BYTES) {
+                    throw new Error("Video file exceeds maximum allowed size (500 MB)");
+                }
+
+                // Determine document segment
+                const documentSegment = getDocumentSegment(document);
+
+                // Generate safe filename from original file
+                const originalFileName = path.basename(fileUri.fsPath);
+                const ext = path.extname(originalFileName).toLowerCase().slice(1); // Remove leading dot
+                const allowedExtensions = new Set(["mp4", "mkv", "avi", "mov", "webm", "m4v"]);
+                const safeExt = allowedExtensions.has(ext) ? ext : "mp4";
+
+                // Sanitize filename (keep base name, replace unsafe chars)
+                const baseName = path.basename(originalFileName, path.extname(originalFileName));
+                const sanitizedBaseName = baseName.replace(/[^a-zA-Z0-9._-]/g, "-");
+                const fileName = `${sanitizedBaseName}.${safeExt}`;
+
+                // Create directory paths
+                const pointersDir = path.join(
+                    workspaceFolder.uri.fsPath,
+                    ".project",
+                    "attachments",
+                    "pointers",
+                    documentSegment
+                );
+                const filesDir = path.join(
+                    workspaceFolder.uri.fsPath,
+                    ".project",
+                    "attachments",
+                    "files",
+                    documentSegment
+                );
+
+                // Create directories if they don't exist
+                await vscode.workspace.fs.createDirectory(vscode.Uri.file(pointersDir));
+                await vscode.workspace.fs.createDirectory(vscode.Uri.file(filesDir));
+
+                const pointersPath = path.join(pointersDir, fileName);
+                const filesPath = path.join(filesDir, fileName);
+
+                // Atomic write helper (write to temp then rename)
+                const writeFileAtomically = async (finalFsPath: string, data: Uint8Array): Promise<void> => {
+                    const tmpPath = `${finalFsPath}.tmp-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+                    const tmpUri = vscode.Uri.file(tmpPath);
+                    const finalUri = vscode.Uri.file(finalFsPath);
+                    await vscode.workspace.fs.writeFile(tmpUri, data);
+                    await vscode.workspace.fs.rename(tmpUri, finalUri, { overwrite: true });
+                    // Optional sanity check to ensure size matches
+                    try {
+                        const stat = await vscode.workspace.fs.stat(finalUri);
+                        if (typeof stat.size === 'number' && stat.size !== data.length) {
+                            console.warn("Size mismatch after write for", finalFsPath, { expected: data.length, actual: stat.size });
+                        }
+                    } catch {
+                        // ignore stat issues
+                    }
+                };
+
+                // Write actual file (primary). Pointer write is best-effort.
+                await writeFileAtomically(filesPath, fileData);
+                try {
+                    await writeFileAtomically(pointersPath, fileData);
+                } catch (pointerErr) {
+                    console.warn("Pointer write failed; proceeding with saved file only", pointerErr);
+                }
+
+                // Store the files path in metadata (relative path from workspace root)
+                const relativePath = toPosixPath(path.relative(workspaceFolder.uri.fsPath, filesPath));
+                await document.updateNotebookMetadata({ videoUrl: relativePath });
+                await document.save(new vscode.CancellationTokenSource().token);
+                provider.refreshWebview(webviewPanel, document);
+            } catch (error) {
+                console.error("Error saving video file:", error);
+                vscode.window.showErrorMessage(
+                    `Failed to save video file: ${error instanceof Error ? error.message : "Unknown error"}`
+                );
+            }
         }
     },
 
@@ -2176,6 +2319,51 @@ const messageHandlers: Record<string, (ctx: MessageHandlerContext) => Promise<vo
         });
     },
 
+    requestCellAudioTimestamps: async ({ event, document, webviewPanel, provider }) => {
+        const typedEvent = event as Extract<EditorPostMessages, { command: "requestCellAudioTimestamps"; }>;
+        const cellId = typedEvent.content.cellId;
+
+        try {
+            const cell = document.getCellContent(cellId);
+            if (!cell) {
+                provider.postMessageToWebview(webviewPanel, {
+                    type: "providerSendsCellAudioTimestamps",
+                    content: {
+                        cellId,
+                        audioTimestamps: undefined,
+                    },
+                });
+                return;
+            }
+
+            // Get audio timestamps from the cell
+            const audioTimestamps = cell.audioTimestamps ??
+                (cell.data?.audioStartTime !== undefined || cell.data?.audioEndTime !== undefined
+                    ? {
+                        startTime: cell.data.audioStartTime,
+                        endTime: cell.data.audioEndTime,
+                    }
+                    : undefined);
+
+            provider.postMessageToWebview(webviewPanel, {
+                type: "providerSendsCellAudioTimestamps",
+                content: {
+                    cellId,
+                    audioTimestamps,
+                },
+            });
+        } catch (error) {
+            console.error("Error fetching cell audio timestamps:", error);
+            provider.postMessageToWebview(webviewPanel, {
+                type: "providerSendsCellAudioTimestamps",
+                content: {
+                    cellId,
+                    audioTimestamps: undefined,
+                },
+            });
+        }
+    },
+
     saveAudioAttachment: async ({ event, document, webviewPanel, provider }) => {
         const typedEvent = event as Extract<EditorPostMessages, { command: "saveAudioAttachment"; }>;
         const requestId = typedEvent.requestId;
diff --git a/src/providers/codexCellEditorProvider/codexCellEditorProvider.ts b/src/providers/codexCellEditorProvider/codexCellEditorProvider.ts
index 534be4236..492283871 100755
--- a/src/providers/codexCellEditorProvider/codexCellEditorProvider.ts
+++ b/src/providers/codexCellEditorProvider/codexCellEditorProvider.ts
@@ -46,6 +46,7 @@ import {
     isMatchingFilePair as isMatchingFilePairUtil,
 } from "../../utils/fileTypeUtils";
 import { getCorrespondingSourceUri } from "../../utils/codexNotebookUtils";
+import { convertCellToQuillContent } from "./utils/cellUtils";
 
 // Enable debug logging if needed
 const DEBUG_MODE = false;
@@ -545,13 +546,22 @@ export class CodexCellEditorProvider implements vscode.CustomEditorProvider<Code
         }
 
         // Enable scripts and set local resources in the webview
+        // Get workspace folder early so we can add it to localResourceRoots
+        const workspaceFolder = vscode.workspace.getWorkspaceFolder(document.uri);
+        const localResourceRoots = [
+            vscode.Uri.joinPath(this.context.extensionUri, "src", "assets"),
+            vscode.Uri.joinPath(this.context.extensionUri, "node_modules", "@vscode", "codicons", "dist"),
+            vscode.Uri.joinPath(this.context.extensionUri, "webviews", "codex-webviews", "dist")
+        ];
+
+        // Add workspace folder to localResourceRoots to allow access to workspace files (e.g., video files)
+        if (workspaceFolder) {
+            localResourceRoots.push(workspaceFolder.uri);
+        }
+
         webviewPanel.webview.options = {
             enableScripts: true,
-            localResourceRoots: [
-                vscode.Uri.joinPath(this.context.extensionUri, "src", "assets"),
-                vscode.Uri.joinPath(this.context.extensionUri, "node_modules", "@vscode", "codicons", "dist"),
-                vscode.Uri.joinPath(this.context.extensionUri, "webviews", "codex-webviews", "dist")
-            ]
+            localResourceRoots
         };
 
         // Get text direction and check if it's a source file
@@ -582,7 +592,6 @@ export class CodexCellEditorProvider implements vscode.CustomEditorProvider<Code
         }
 
         // Set up file system watcher (only if document is in a workspace)
-        const workspaceFolder = vscode.workspace.getWorkspaceFolder(document.uri);
         let watcher: vscode.FileSystemWatcher | undefined;
         let audioWatcher: vscode.FileSystemWatcher | undefined;
 
@@ -1339,8 +1348,6 @@ export class CodexCellEditorProvider implements vscode.CustomEditorProvider<Code
         debug("Posting message:", message);
         if (this.webviewPanels.size > 0) {
             this.webviewPanels.forEach((panel) => safePostMessageToPanel(panel, message));
-        } else {
-            console.error("No active webview panels");
         }
     }
 
@@ -1521,7 +1528,7 @@ export class CodexCellEditorProvider implements vscode.CustomEditorProvider<Code
             <head>
                 <meta charset="UTF-8">
                 <meta name="viewport" content="width=device-width, initial-scale=1.0">
-                <meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src ${webview.cspSource} 'unsafe-inline'; script-src 'nonce-${nonce}' 'strict-dynamic' https://www.youtube.com https://static.cloudflareinsights.com; frame-src https://www.youtube.com; worker-src ${webview.cspSource} blob:; connect-src https://*.vscode-cdn.net https://*.frontierrnd.com wss://*.frontierrnd.com https://languagetool.org/api/ https://*.workers.dev data: wss://ryderwishart--whisper-websocket-transcription-websocket-transcribe.modal.run wss://*.modal.run; img-src 'self' data: ${webview.cspSource} https:; font-src ${webview.cspSource} data:; media-src ${webview.cspSource} https: blob: data:;">
+                                <meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src ${webview.cspSource} 'unsafe-inline'; script-src 'nonce-${nonce}' 'strict-dynamic' https://www.youtube.com https://static.cloudflareinsights.com; frame-src https://www.youtube.com; worker-src ${webview.cspSource} blob:; connect-src https://*.vscode-cdn.net https://*.frontierrnd.com wss://*.frontierrnd.com https://languagetool.org/api/ https://*.workers.dev https://*.fastly.net https://*.thechosen.media data: wss://ryderwishart--whisper-websocket-transcription-websocket-transcribe.modal.run wss://*.modal.run; img-src 'self' data: ${webview.cspSource} https:; font-src ${webview.cspSource} data:; media-src ${webview.cspSource} https: blob: data:;">
                 <link href="${styleResetUriWithBuster}" rel="stylesheet" nonce="${nonce}">
                 <link href="${codiconsUriWithBuster}" rel="stylesheet" nonce="${nonce}" />
                 <title>Codex Cell Editor</title>
@@ -2312,24 +2319,9 @@ export class CodexCellEditorProvider implements vscode.CustomEditorProvider<Code
 
     private processNotebookData(notebook: CodexNotebookAsJSONData, document?: CodexCellDocument) {
         debug("Processing notebook data", notebook);
-        const translationUnits: QuillCellContent[] = notebook.cells.map((cell) => ({
-            cellMarkers: [cell.metadata?.id],
-            cellContent: cell.value,
-            cellType: cell.metadata?.type,
-            editHistory: cell.metadata?.edits,
-            // Prefer nested data for timestamps, but fall back to legacy top-level fields if needed
-            timestamps: cell.metadata?.data,
-            cellLabel: cell.metadata?.cellLabel,
-            merged: cell.metadata?.data?.merged,
-            deleted: cell.metadata?.data?.deleted,
-            data: cell.metadata?.data,
-            attachments: cell.metadata?.attachments,
-            metadata: {
-                selectedAudioId: cell.metadata?.selectedAudioId,
-                selectionTimestamp: cell.metadata?.selectionTimestamp,
-                isLocked: cell.metadata?.isLocked,
-            },
-        }));
+        const translationUnits: QuillCellContent[] = notebook.cells.map((cell) =>
+            convertCellToQuillContent(cell)
+        );
         debug("Translation units:", translationUnits);
 
         // Use the passed document if available, otherwise fall back to currentDocument
diff --git a/src/providers/codexCellEditorProvider/codexDocument.ts b/src/providers/codexCellEditorProvider/codexDocument.ts
index 4e38bbf6f..47896012a 100644
--- a/src/providers/codexCellEditorProvider/codexDocument.ts
+++ b/src/providers/codexCellEditorProvider/codexDocument.ts
@@ -771,12 +771,21 @@ export class CodexCellDocument implements vscode.CustomDocument {
         if (!cell) {
             return undefined;
         }
+        const audioTimestamps: Timestamps | undefined =
+            cell.metadata.data?.audioStartTime !== undefined || cell.metadata.data?.audioEndTime !== undefined
+                ? {
+                    startTime: cell.metadata.data.audioStartTime,
+                    endTime: cell.metadata.data.audioEndTime,
+                }
+                : undefined;
+
         return {
             cellMarkers: [cell.metadata.id],
             cellContent: cell.value,
             cellType: cell.metadata.type,
             editHistory: cell.metadata.edits || [],
             timestamps: cell.metadata.data,
+            audioTimestamps,
             cellLabel: cell.metadata.cellLabel,
             data: cell.metadata.data,
             attachments: cell.metadata.attachments || {},
@@ -904,6 +913,122 @@ export class CodexCellDocument implements vscode.CustomDocument {
         });
     }
 
+    public updateCellAudioTimestamps(cellId: string, timestamps: Timestamps) {
+        const indexOfCellToUpdate = this._documentData.cells.findIndex(
+            (cell) => cell.metadata?.id === cellId
+        );
+
+        if (indexOfCellToUpdate === -1) {
+            throw new Error("Could not find cell to update");
+        }
+
+        const cellToUpdate = this._documentData.cells[indexOfCellToUpdate];
+
+        // Block timestamp updates to locked cells
+        if (cellToUpdate.metadata?.isLocked) {
+            console.warn(`Attempted to update audio timestamps of locked cell ${cellId}. Operation blocked.`);
+            return;
+        }
+
+        // Capture previous values before updating so comparisons are correct
+        const previousAudioStartTime = cellToUpdate.metadata.data?.audioStartTime;
+        const previousAudioEndTime = cellToUpdate.metadata.data?.audioEndTime;
+
+        // Add edit to cell's edit history
+        if (!cellToUpdate.metadata.edits) {
+            cellToUpdate.metadata.edits = [];
+        }
+        const currentTimestamp = Date.now();
+
+        // Only add edit if audioStartTime is different from previous value
+        if (timestamps.startTime !== undefined && timestamps.startTime !== previousAudioStartTime) {
+            // Ensure initial import exists for audioStartTime
+            const hasInitialAudioStart = (cellToUpdate.metadata.edits || []).some((e) =>
+                e.type === EditType.INITIAL_IMPORT && EditMapUtils.equals(e.editMap, EditMapUtils.dataAudioStartTime())
+            );
+            if (!hasInitialAudioStart && previousAudioStartTime !== undefined) {
+                cellToUpdate.metadata.edits.push({
+                    editMap: EditMapUtils.dataAudioStartTime(),
+                    value: previousAudioStartTime,
+                    timestamp: currentTimestamp - 1000,
+                    type: EditType.INITIAL_IMPORT,
+                    author: this._author,
+                    validatedBy: [],
+                });
+            }
+            const audioStartTimeEditMap = EditMapUtils.dataAudioStartTime();
+            cellToUpdate.metadata.edits.push({
+                editMap: audioStartTimeEditMap,
+                value: timestamps.startTime,
+                timestamp: currentTimestamp,
+                type: EditType.USER_EDIT,
+                author: this._author,
+                validatedBy: [
+                    {
+                        username: this._author,
+                        creationTimestamp: currentTimestamp,
+                        updatedTimestamp: currentTimestamp,
+                        isDeleted: false,
+                    },
+                ],
+            });
+        }
+
+        // Only add edit if audioEndTime is different from previous value
+        if (timestamps.endTime !== undefined && timestamps.endTime !== previousAudioEndTime) {
+            // Ensure initial import exists for audioEndTime
+            const hasInitialAudioEnd = (cellToUpdate.metadata.edits || []).some((e) =>
+                e.type === EditType.INITIAL_IMPORT && EditMapUtils.equals(e.editMap, EditMapUtils.dataAudioEndTime())
+            );
+            if (!hasInitialAudioEnd && previousAudioEndTime !== undefined) {
+                cellToUpdate.metadata.edits.push({
+                    editMap: EditMapUtils.dataAudioEndTime(),
+                    value: previousAudioEndTime,
+                    timestamp: currentTimestamp - 1000,
+                    type: EditType.INITIAL_IMPORT,
+                    author: this._author,
+                    validatedBy: [],
+                });
+            }
+            const audioEndTimeEditMap = EditMapUtils.dataAudioEndTime();
+            cellToUpdate.metadata.edits.push({
+                editMap: audioEndTimeEditMap,
+                value: timestamps.endTime,
+                timestamp: currentTimestamp,
+                type: EditType.USER_EDIT,
+                author: this._author,
+                validatedBy: [
+                    {
+                        username: this._author,
+                        creationTimestamp: currentTimestamp,
+                        updatedTimestamp: currentTimestamp,
+                        isDeleted: false,
+                    },
+                ],
+            });
+        }
+
+        // Now apply the audio timestamp updates to the document data
+        cellToUpdate.metadata.data = {
+            ...cellToUpdate.metadata.data,
+            audioStartTime: timestamps.startTime,
+            audioEndTime: timestamps.endTime,
+        };
+
+        // Record the edit
+        this._edits.push({
+            type: "updateCellAudioTimestamps",
+            cellId,
+            timestamps,
+        });
+
+        // Set dirty flag and notify listeners about the change
+        this._isDirty = true;
+        this._onDidChangeForVsCodeAndWebview.fire({
+            edits: [{ cellId, audioTimestamps: timestamps }],
+        });
+    }
+
     public deleteCell(cellId: string) {
         // Backward-compat: hard deletes are no longer allowed. Perform a soft delete instead.
         this.softDeleteCell(cellId);
diff --git a/src/providers/codexCellEditorProvider/utils/cellUtils.ts b/src/providers/codexCellEditorProvider/utils/cellUtils.ts
index 8e0ac14be..abdd50d5f 100644
--- a/src/providers/codexCellEditorProvider/utils/cellUtils.ts
+++ b/src/providers/codexCellEditorProvider/utils/cellUtils.ts
@@ -60,12 +60,20 @@ export function extractParentCellIdFromParatext(paratextCellId: string, cellMeta
  */
 export function convertCellToQuillContent(cell: CustomNotebookCellData): QuillCellContent {
     const cellId = cell.metadata?.id || "";
+    const audioTimestamps: QuillCellContent["audioTimestamps"] =
+        cell.metadata.data?.audioStartTime !== undefined || cell.metadata.data?.audioEndTime !== undefined
+            ? {
+                startTime: cell.metadata.data.audioStartTime,
+                endTime: cell.metadata.data.audioEndTime,
+            }
+            : undefined;
     return {
         cellMarkers: [cellId],
         cellContent: cell.value || "",
         cellType: cell.metadata?.type || CodexCellTypes.TEXT,
         editHistory: cell.metadata?.edits || [],
         timestamps: cell.metadata?.data,
+        audioTimestamps,
         cellLabel: cell.metadata?.cellLabel,
         merged: cell.metadata?.data?.merged,
         deleted: cell.metadata?.data?.deleted,
diff --git a/src/providers/codexCellEditorProvider/utils/videoUtils.ts b/src/providers/codexCellEditorProvider/utils/videoUtils.ts
index daa91aa66..521f9e89d 100644
--- a/src/providers/codexCellEditorProvider/utils/videoUtils.ts
+++ b/src/providers/codexCellEditorProvider/utils/videoUtils.ts
@@ -19,13 +19,38 @@ export function processVideoUrl(
             // If it's a web URL, use it directly
             return videoPath;
         } else if (videoPath.startsWith("file://")) {
-            // If it's a file URI, convert it to a webview URI
-            return webview.asWebviewUri(vscode.Uri.parse(videoPath)).toString();
+            // If it's a file URI, parse it and check if it's within the workspace
+            const fileUri = vscode.Uri.parse(videoPath);
+            const workspaceUri = vscode.workspace.workspaceFolders?.[0]?.uri;
+
+            if (workspaceUri) {
+                // Normalize paths for comparison (case-insensitive on Windows)
+                const fileFsPath = fileUri.fsPath.replace(/\\/g, "/").toLowerCase();
+                const workspaceFsPath = workspaceUri.fsPath.replace(/\\/g, "/").toLowerCase();
+
+                // Check if the file is within the workspace
+                if (fileFsPath.startsWith(workspaceFsPath + "/") || fileFsPath === workspaceFsPath) {
+                    // File is within workspace, get relative path using fsPath
+                    const relativeFsPath = fileUri.fsPath.substring(workspaceUri.fsPath.length);
+                    // Remove leading path separator
+                    const relativePath = relativeFsPath.replace(/^[/\\]+/, "");
+                    // Convert to URI path format (forward slashes)
+                    const normalizedRelativePath = relativePath.replace(/\\/g, "/");
+                    const relativeUri = vscode.Uri.joinPath(workspaceUri, normalizedRelativePath);
+                    return webview.asWebviewUri(relativeUri).toString();
+                } else {
+                    // File is outside workspace - VS Code webviews can't access it
+                    console.warn(`Video file is outside workspace: ${fileUri.fsPath}`);
+                    return null;
+                }
+            } else {
+                // No workspace folder, try direct conversion (may fail for files outside workspace)
+                return webview.asWebviewUri(fileUri).toString();
+            }
         } else {
             // If it's a relative path, join it with the workspace URI
             const workspaceUri = vscode.workspace.workspaceFolders?.[0]?.uri;
             if (workspaceUri) {
-                // FIXME: if we don't add the video path, then you can use videos from anywhere on your machine
                 const fullPath = vscode.Uri.joinPath(workspaceUri, videoPath);
                 return webview.asWebviewUri(fullPath).toString();
             }
diff --git a/src/test/suite/globalProvider.audioStateSync.test.ts b/src/test/suite/globalProvider.audioStateSync.test.ts
new file mode 100644
index 000000000..8e085a41e
--- /dev/null
+++ b/src/test/suite/globalProvider.audioStateSync.test.ts
@@ -0,0 +1,329 @@
+import * as assert from "assert";
+import * as vscode from "vscode";
+import { GlobalProvider } from "../../globalProvider";
+import { GlobalMessage, GlobalContentType } from "../../../types";
+import sinon from "sinon";
+
+suite("GlobalProvider - Audio State Synchronization", () => {
+    let globalProvider: GlobalProvider;
+    let mockProvider1: any;
+    let mockProvider2: any;
+
+    setup(() => {
+        // Reset singleton instance
+        (GlobalProvider as any).instance = undefined;
+        globalProvider = GlobalProvider.getInstance();
+
+        // Create mock providers
+        mockProvider1 = {
+            postMessage: sinon.stub(),
+            receiveMessage: sinon.stub(),
+        };
+
+        mockProvider2 = {
+            postMessage: sinon.stub(),
+            receiveMessage: sinon.stub(),
+        };
+
+        // Register mock providers
+        globalProvider.registerProvider("provider1", mockProvider1 as any);
+        globalProvider.registerProvider("provider2", mockProvider2 as any);
+    });
+
+    teardown(() => {
+        sinon.restore();
+    });
+
+    test("should forward full GlobalMessage object to all webviews when destination is 'webview'", () => {
+        const message: GlobalMessage = {
+            command: "audioStateChanged",
+            destination: "webview",
+            content: {
+                type: "audioPlaying",
+                webviewType: "target",
+                isPlaying: true,
+            },
+        };
+
+        globalProvider.handleMessage(message);
+
+        // Verify both providers received the full message object
+        assert.ok(mockProvider1.postMessage.calledOnce, "Provider1 should receive message");
+        assert.ok(mockProvider2.postMessage.calledOnce, "Provider2 should receive message");
+
+        const provider1Call = mockProvider1.postMessage.getCall(0);
+        const provider2Call = mockProvider2.postMessage.getCall(0);
+
+        // Verify the full message structure is preserved
+        assert.deepStrictEqual(
+            provider1Call.args[0],
+            message,
+            "Provider1 should receive full GlobalMessage object"
+        );
+        assert.deepStrictEqual(
+            provider2Call.args[0],
+            message,
+            "Provider2 should receive full GlobalMessage object"
+        );
+
+        // Verify all properties are present
+        assert.strictEqual(provider1Call.args[0].command, "audioStateChanged");
+        assert.strictEqual(provider1Call.args[0].destination, "webview");
+        assert.ok(provider1Call.args[0].content);
+        assert.strictEqual(provider1Call.args[0].content.type, "audioPlaying");
+        assert.strictEqual(provider1Call.args[0].content.webviewType, "target");
+        assert.strictEqual(provider1Call.args[0].content.isPlaying, true);
+    });
+
+    test("should preserve destination property in forwarded message", () => {
+        const message: GlobalMessage = {
+            command: "audioStateChanged",
+            destination: "webview",
+            content: {
+                type: "audioPlaying",
+                webviewType: "source",
+                isPlaying: false,
+            },
+        };
+
+        globalProvider.handleMessage(message);
+
+        const provider1Call = mockProvider1.postMessage.getCall(0);
+        assert.strictEqual(
+            provider1Call.args[0].destination,
+            "webview",
+            "Destination should be preserved in forwarded message"
+        );
+    });
+
+    test("should preserve command property in forwarded message", () => {
+        const message: GlobalMessage = {
+            command: "audioStateChanged",
+            destination: "webview",
+            content: {
+                type: "audioPlaying",
+                webviewType: "target",
+                isPlaying: true,
+            },
+        };
+
+        globalProvider.handleMessage(message);
+
+        const provider1Call = mockProvider1.postMessage.getCall(0);
+        assert.strictEqual(
+            provider1Call.args[0].command,
+            "audioStateChanged",
+            "Command should be preserved in forwarded message"
+        );
+    });
+
+    test("should preserve content property with audioPlaying type in forwarded message", () => {
+        const message: GlobalMessage = {
+            command: "audioStateChanged",
+            destination: "webview",
+            content: {
+                type: "audioPlaying",
+                webviewType: "source",
+                isPlaying: true,
+            },
+        };
+
+        globalProvider.handleMessage(message);
+
+        const provider1Call = mockProvider1.postMessage.getCall(0);
+        const content = provider1Call.args[0].content;
+
+        assert.ok(content, "Content should be present");
+        assert.strictEqual(content.type, "audioPlaying");
+        assert.strictEqual(content.webviewType, "source");
+        assert.strictEqual(content.isPlaying, true);
+    });
+
+    test("should forward messages to all registered providers", () => {
+        const message: GlobalMessage = {
+            command: "audioStateChanged",
+            destination: "webview",
+            content: {
+                type: "audioPlaying",
+                webviewType: "target",
+                isPlaying: true,
+            },
+        };
+
+        globalProvider.handleMessage(message);
+
+        assert.strictEqual(
+            mockProvider1.postMessage.callCount,
+            1,
+            "Provider1 should receive exactly one message"
+        );
+        assert.strictEqual(
+            mockProvider2.postMessage.callCount,
+            1,
+            "Provider2 should receive exactly one message"
+        );
+    });
+
+    test("should handle messages with different audioPlaying states", () => {
+        const playingMessage: GlobalMessage = {
+            command: "audioStateChanged",
+            destination: "webview",
+            content: {
+                type: "audioPlaying",
+                webviewType: "target",
+                isPlaying: true,
+            },
+        };
+
+        const stoppedMessage: GlobalMessage = {
+            command: "audioStateChanged",
+            destination: "webview",
+            content: {
+                type: "audioPlaying",
+                webviewType: "target",
+                isPlaying: false,
+            },
+        };
+
+        globalProvider.handleMessage(playingMessage);
+        globalProvider.handleMessage(stoppedMessage);
+
+        assert.strictEqual(mockProvider1.postMessage.callCount, 2);
+        assert.strictEqual(mockProvider2.postMessage.callCount, 2);
+
+        // Verify first message has isPlaying: true
+        const firstCall = mockProvider1.postMessage.getCall(0);
+        assert.strictEqual(firstCall.args[0].content.isPlaying, true);
+
+        // Verify second message has isPlaying: false
+        const secondCall = mockProvider1.postMessage.getCall(1);
+        assert.strictEqual(secondCall.args[0].content.isPlaying, false);
+    });
+
+    test("should handle messages with different webviewType values", () => {
+        const sourceMessage: GlobalMessage = {
+            command: "audioStateChanged",
+            destination: "webview",
+            content: {
+                type: "audioPlaying",
+                webviewType: "source",
+                isPlaying: true,
+            },
+        };
+
+        const targetMessage: GlobalMessage = {
+            command: "audioStateChanged",
+            destination: "webview",
+            content: {
+                type: "audioPlaying",
+                webviewType: "target",
+                isPlaying: true,
+            },
+        };
+
+        globalProvider.handleMessage(sourceMessage);
+        globalProvider.handleMessage(targetMessage);
+
+        assert.strictEqual(mockProvider1.postMessage.callCount, 2);
+
+        const firstCall = mockProvider1.postMessage.getCall(0);
+        assert.strictEqual(firstCall.args[0].content.webviewType, "source");
+
+        const secondCall = mockProvider1.postMessage.getCall(1);
+        assert.strictEqual(secondCall.args[0].content.webviewType, "target");
+    });
+
+    test("should not forward messages when destination is 'provider'", () => {
+        const message: GlobalMessage = {
+            command: "someCommand",
+            destination: "provider",
+            content: {
+                type: "audioPlaying",
+                webviewType: "target",
+                isPlaying: true,
+            },
+        };
+
+        globalProvider.handleMessage(message);
+
+        // postMessage should not be called for provider destination
+        assert.strictEqual(mockProvider1.postMessage.callCount, 0);
+        assert.strictEqual(mockProvider2.postMessage.callCount, 0);
+
+        // receiveMessage should be called instead
+        assert.ok(mockProvider1.receiveMessage.calledOnce);
+        assert.ok(mockProvider2.receiveMessage.calledOnce);
+    });
+
+    test("should handle messages without destination property gracefully", () => {
+        const messageWithoutDestination = {
+            command: "someCommand",
+            content: {
+                type: "audioPlaying",
+                webviewType: "target",
+                isPlaying: true,
+            },
+        };
+
+        // Should not throw an error
+        assert.doesNotThrow(() => {
+            globalProvider.handleMessage(messageWithoutDestination);
+        });
+
+        // Should not forward to webviews
+        assert.strictEqual(mockProvider1.postMessage.callCount, 0);
+    });
+
+    test("should forward messages to newly registered providers", () => {
+        const mockProvider3 = {
+            postMessage: sinon.stub(),
+            receiveMessage: sinon.stub(),
+        };
+
+        globalProvider.registerProvider("provider3", mockProvider3 as any);
+
+        const message: GlobalMessage = {
+            command: "audioStateChanged",
+            destination: "webview",
+            content: {
+                type: "audioPlaying",
+                webviewType: "target",
+                isPlaying: true,
+            },
+        };
+
+        globalProvider.handleMessage(message);
+
+        // All three providers should receive the message
+        assert.strictEqual(mockProvider1.postMessage.callCount, 1);
+        assert.strictEqual(mockProvider2.postMessage.callCount, 1);
+        assert.strictEqual(mockProvider3.postMessage.callCount, 1);
+    });
+
+    test("should not forward messages to unregistered providers", () => {
+        const mockProvider3 = {
+            postMessage: sinon.stub(),
+            receiveMessage: sinon.stub(),
+        };
+
+        const disposable = globalProvider.registerProvider("provider3", mockProvider3 as any);
+        disposable.dispose(); // Unregister
+
+        const message: GlobalMessage = {
+            command: "audioStateChanged",
+            destination: "webview",
+            content: {
+                type: "audioPlaying",
+                webviewType: "target",
+                isPlaying: true,
+            },
+        };
+
+        globalProvider.handleMessage(message);
+
+        // Only provider1 and provider2 should receive the message
+        assert.strictEqual(mockProvider1.postMessage.callCount, 1);
+        assert.strictEqual(mockProvider2.postMessage.callCount, 1);
+        assert.strictEqual(mockProvider3.postMessage.callCount, 0);
+    });
+});
diff --git a/src/utils/editMapUtils.ts b/src/utils/editMapUtils.ts
index f74ffeaba..615fb5549 100644
--- a/src/utils/editMapUtils.ts
+++ b/src/utils/editMapUtils.ts
@@ -5,6 +5,8 @@ type DataEditMap = ["metadata", "data"];
 type DataDeletedEditMap = ["metadata", "data", "deleted"];
 type DataStartTimeEditMap = ["metadata", "data", "startTime"];
 type DataEndTimeEditMap = ["metadata", "data", "endTime"];
+type DataAudioStartTimeEditMap = ["metadata", "data", "audioStartTime"];
+type DataAudioEndTimeEditMap = ["metadata", "data", "audioEndTime"];
 type SelectedAudioIdEditMap = ["metadata", "selectedAudioId"];
 type SelectionTimestampEditMap = ["metadata", "selectionTimestamp"];
 type IsLockedEditMap = ["metadata", "isLocked"];
@@ -67,6 +69,14 @@ export const EditMapUtils = {
         return ["metadata", "data", "endTime"];
     },
 
+    dataAudioStartTime(): DataAudioStartTimeEditMap {
+        return ["metadata", "data", "audioStartTime"];
+    },
+
+    dataAudioEndTime(): DataAudioEndTimeEditMap {
+        return ["metadata", "data", "audioEndTime"];
+    },
+
     selectedAudioId(): SelectedAudioIdEditMap {
         return ["metadata", "selectedAudioId"];
     },
diff --git a/types/index.d.ts b/types/index.d.ts
index 2a543b391..b91ba5709 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -104,6 +104,11 @@ type GlobalContentType =
     | {
         type: "commentsFileChanged";
         timestamp: string;
+    }
+    | {
+        type: "audioPlaying";
+        webviewType: "source" | "target";
+        isPlaying: boolean;
     };
 
 interface GlobalMessage {
@@ -205,13 +210,6 @@ interface SelectedTextDataWithContext {
     verseGraphData: any;
 }
 
-interface TimeBlock {
-    begin: number;
-    end: number;
-    text: string;
-    id: string;
-}
-
 type ChatPostMessages =
     | { command: "threadsFromWorkspace"; content: ChatMessageThread[]; }
     | { command: "response"; finished: boolean; text: string; }
@@ -541,6 +539,7 @@ type EditorCellContent = {
     cellLabel?: string;
     uri?: string;
     cellTimestamps?: Timestamps;
+    cellAudioTimestamps?: Timestamps;
 };
 
 interface EditHistoryEntry {
@@ -578,6 +577,7 @@ export type EditorPostMessages =
     | { command: "getSourceText"; content: { cellId: string; }; }
     | { command: "searchSimilarCellIds"; content: { cellId: string; }; }
     | { command: "updateCellTimestamps"; content: { cellId: string; timestamps: Timestamps; }; }
+    | { command: "updateCellAudioTimestamps"; content: { cellId: string; timestamps: Timestamps; }; }
     | { command: "deleteCell"; content: { cellId: string; }; }
     | { command: "addWord"; words: string[]; }
     | { command: "getAlertCodes"; content: GetAlertCodes; }
@@ -683,6 +683,7 @@ export type EditorPostMessages =
     | { command: "triggerSync"; }
     // removed: requestAudioAttachments
     | { command: "requestAudioForCell"; content: { cellId: string; audioId?: string; }; }
+    | { command: "requestCellAudioTimestamps"; content: { cellId: string; }; }
     | { command: "getCommentsForCell"; content: { cellId: string; }; }
     | { command: "getCommentsForCells"; content: { cellIds: string[]; }; }
     | { command: "openCommentsForCell"; content: { cellId: string; }; }
@@ -924,6 +925,8 @@ type CodexData = Timestamps & {
     originalText?: string;
     globalReferences?: string[]; // Array of cell IDs in original format (e.g., "GEN 1:1") used for header generation
     milestoneIndex?: number | null; // 0-based milestone index for O(1) lookup (null if no milestone)
+    audioStartTime?: number;
+    audioEndTime?: number;
 };
 
 type BaseCustomCellMetaData = {
@@ -1135,6 +1138,7 @@ interface QuillCellContent {
     cellType: CodexCellTypes;
     editHistory: Array<EditHistory>;
     timestamps?: Timestamps;
+    audioTimestamps?: Timestamps;
     cellLabel?: string;
     merged?: boolean;
     deleted?: boolean;
@@ -2376,6 +2380,13 @@ type EditorReceiveMessages =
             fileModified?: number; // File modification timestamp for cache validation
         };
     }
+    | {
+        type: "providerSendsCellAudioTimestamps";
+        content: {
+            cellId: string;
+            audioTimestamps?: Timestamps;
+        };
+    }
     | {
         type: "correctionEditorModeChanged";
         enabled: boolean;
diff --git a/webviews/codex-webviews/package.json b/webviews/codex-webviews/package.json
index 03ab70a4a..3844e8be6 100644
--- a/webviews/codex-webviews/package.json
+++ b/webviews/codex-webviews/package.json
@@ -93,7 +93,7 @@
         "react-dropzone": "^14.2.3",
         "react-markdown": "^9.0.1",
         "react-papaparse": "^4.4.0",
-        "react-player": "^2.16.0",
+        "react-player": "^3.4.0",
         "react-popper": "^2.2.5",
         "react-table": "^7.8.0",
         "rehype-parse": "^9.0.0",
diff --git a/webviews/codex-webviews/src/CodexCellEditor/AudioPlayButton.tsx b/webviews/codex-webviews/src/CodexCellEditor/AudioPlayButton.tsx
index 07e320d4f..8db67e5cb 100644
--- a/webviews/codex-webviews/src/CodexCellEditor/AudioPlayButton.tsx
+++ b/webviews/codex-webviews/src/CodexCellEditor/AudioPlayButton.tsx
@@ -1,235 +1,718 @@
-import React, { useEffect, useRef, useState } from "react";
-import { getCachedAudioDataUrl, setCachedAudioDataUrl } from "../lib/audioCache";
-import type { WebviewApi } from "vscode-webview";
+import React, { useState, useRef, useEffect, useCallback } from "react";
+import { WebviewApi } from "vscode-webview";
+import type { ReactPlayerRef } from "./types/reactPlayerTypes";
+import { Timestamps } from "../../../../types";
 import { useMessageHandler } from "./hooks/useCentralizedMessageDispatcher";
+import { AudioControllerEvent, globalAudioController } from "../lib/audioController";
+import { getCachedAudioDataUrl, setCachedAudioDataUrl } from "../lib/audioCache";
+import { EditorPostMessages } from "../../../../types";
+
+/**
+ * Waits for a video element to be ready for playback.
+ * Returns a promise that resolves when the video has enough data to start playing.
+ */
+const waitForVideoReady = (
+    videoElement: HTMLVideoElement,
+    timeoutMs: number = 3000
+): Promise<void> => {
+    return new Promise((resolve) => {
+        // If video is already ready, resolve immediately
+        if (videoElement.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA) {
+            resolve();
+            return;
+        }
 
-type AudioState =
-    | "available"
-    | "available-local"
-    | "available-pointer"
-    | "missing"
-    | "deletedOnly"
-    | "none";
+        // Set up timeout fallback
+        const timeoutId = setTimeout(() => {
+            videoElement.removeEventListener("canplay", onCanPlay);
+            videoElement.removeEventListener("loadeddata", onLoadedData);
+            resolve(); // Resolve anyway after timeout
+        }, timeoutMs);
+
+        const onCanPlay = () => {
+            clearTimeout(timeoutId);
+            videoElement.removeEventListener("canplay", onCanPlay);
+            videoElement.removeEventListener("loadeddata", onLoadedData);
+            resolve();
+        };
+
+        const onLoadedData = () => {
+            clearTimeout(timeoutId);
+            videoElement.removeEventListener("canplay", onCanPlay);
+            videoElement.removeEventListener("loadeddata", onLoadedData);
+            resolve();
+        };
 
-interface AudioPlayButtonProps {
+        videoElement.addEventListener("canplay", onCanPlay);
+        videoElement.addEventListener("loadeddata", onLoadedData);
+    });
+};
+
+/**
+ * Safely revokes an old blob URL after ensuring the audio element has loaded the new one.
+ * This prevents ERR_FILE_NOT_FOUND errors when switching between cells quickly.
+ */
+const safelyRevokeOldBlobUrl = (
+    audioElement: HTMLAudioElement,
+    oldBlobUrl: string | null,
+    newBlobUrl: string
+): void => {
+    if (!oldBlobUrl || !oldBlobUrl.startsWith("blob:")) {
+        return;
+    }
+
+    // If the audio element is already using the new blob URL and it's loaded, revoke immediately
+    if (
+        audioElement.src === newBlobUrl &&
+        audioElement.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA
+    ) {
+        if (audioElement.src !== oldBlobUrl) {
+            URL.revokeObjectURL(oldBlobUrl);
+        }
+        return;
+    }
+
+    // Otherwise, wait for the audio element to load the new blob URL
+    const revokeOldBlobUrl = () => {
+        if (audioElement.src !== oldBlobUrl) {
+            URL.revokeObjectURL(oldBlobUrl);
+        }
+    };
+
+    const onLoadedData = () => {
+        audioElement.removeEventListener("loadeddata", onLoadedData);
+        audioElement.removeEventListener("canplay", onCanPlay);
+        audioElement.removeEventListener("error", onError);
+        revokeOldBlobUrl();
+    };
+
+    const onCanPlay = () => {
+        audioElement.removeEventListener("loadeddata", onLoadedData);
+        audioElement.removeEventListener("canplay", onCanPlay);
+        audioElement.removeEventListener("error", onError);
+        revokeOldBlobUrl();
+    };
+
+    const onError = () => {
+        audioElement.removeEventListener("loadeddata", onLoadedData);
+        audioElement.removeEventListener("canplay", onCanPlay);
+        audioElement.removeEventListener("error", onError);
+        // Don't revoke on error - the old blob URL might still be needed
+    };
+
+    audioElement.addEventListener("loadeddata", onLoadedData);
+    audioElement.addEventListener("canplay", onCanPlay);
+    audioElement.addEventListener("error", onError);
+
+    // Fallback timeout to prevent memory leaks
+    setTimeout(() => {
+        audioElement.removeEventListener("loadeddata", onLoadedData);
+        audioElement.removeEventListener("canplay", onCanPlay);
+        audioElement.removeEventListener("error", onError);
+        revokeOldBlobUrl();
+    }, 5000);
+};
+
+const AudioPlayButton: React.FC<{
     cellId: string;
     vscode: WebviewApi<unknown>;
-    state?: AudioState;
+    state?:
+        | "available"
+        | "available-local"
+        | "available-pointer"
+        | "missing"
+        | "deletedOnly"
+        | "none";
     onOpenCell?: (cellId: string) => void;
-}
-
-const AudioPlayButton: React.FC<AudioPlayButtonProps> = ({
-    cellId,
-    vscode,
-    state = "available",
-    onOpenCell,
-}) => {
-    const [isPlaying, setIsPlaying] = useState(false);
-    const [audioUrl, setAudioUrl] = useState<string | null>(null);
-    const [isLoading, setIsLoading] = useState(false);
-    const pendingPlayRef = useRef(false);
-    const audioRef = useRef<HTMLAudioElement | null>(null);
-
-    useMessageHandler(
-        "audioPlayButton",
-        async (event: MessageEvent) => {
-            const message = event.data;
-
-            if (message.type === "providerSendsAudioAttachments") {
-                // Only clear cached URL if this cell's availability actually changed to a different state
-                const attachments = message.attachments || {};
-                const newState = attachments[cellId];
-                if (typeof newState !== "undefined") {
+    playerRef?: React.RefObject<ReactPlayerRef>;
+    cellTimestamps?: Timestamps;
+    shouldShowVideoPlayer?: boolean;
+    videoUrl?: string;
+    disabled?: boolean;
+    isSourceText?: boolean;
+    isCellLocked?: boolean;
+    onLockedClick?: () => void;
+}> = React.memo(
+    ({
+        cellId,
+        vscode,
+        state = "available",
+        onOpenCell,
+        playerRef,
+        cellTimestamps,
+        shouldShowVideoPlayer = false,
+        videoUrl,
+        disabled = false,
+        isSourceText = false,
+        isCellLocked = false,
+        onLockedClick,
+    }) => {
+        const [isPlaying, setIsPlaying] = useState(false);
+        const [audioUrl, setAudioUrl] = useState<string | null>(null);
+        const [isLoading, setIsLoading] = useState(false);
+        const pendingPlayRef = useRef(false);
+        const audioRef = useRef<HTMLAudioElement | null>(null);
+        const previousVideoMuteStateRef = useRef<boolean | null>(null);
+        const videoElementRef = useRef<HTMLVideoElement | null>(null);
+
+        // Helper function to stop video playback and restore mute state
+        const stopVideoPlayback = useCallback(() => {
+            if (
+                shouldShowVideoPlayer &&
+                previousVideoMuteStateRef.current !== null &&
+                videoElementRef.current
+            ) {
+                try {
+                    videoElementRef.current.pause();
+                    videoElementRef.current.muted = previousVideoMuteStateRef.current;
+                } catch (error) {
+                    console.error("Error restoring video mute state:", error);
+                }
+                previousVideoMuteStateRef.current = null;
+                videoElementRef.current = null;
+            }
+        }, [shouldShowVideoPlayer]);
+
+        // Do not pre-load on mount; we will request on first click to avoid spinner churn
+
+        // Listen for audio data messages
+        useMessageHandler(
+            "cellContentDisplay-audioData",
+            async (event: MessageEvent) => {
+                const message = event.data;
+
+                // Handle audio attachments updates - clear current url and cache; fetch on next click
+                if (message.type === "providerSendsAudioAttachments") {
                     // Clear cached audio data since selected audio might have changed
                     const { clearCachedAudio } = await import("../lib/audioCache");
                     clearCachedAudio(cellId);
 
-                    // If we previously had no audio URL and still don't, no-op; avoid churn
                     if (audioUrl && audioUrl.startsWith("blob:")) {
                         URL.revokeObjectURL(audioUrl);
                     }
                     setAudioUrl(null);
                     setIsLoading(false);
                 }
-            }
 
-            if (message.type === "providerSendsAudioData" && message.content.cellId === cellId) {
-                if (message.content.audioData) {
-                    if (audioUrl && audioUrl.startsWith("blob:")) {
-                        URL.revokeObjectURL(audioUrl);
-                    }
+                if (
+                    message.type === "providerSendsAudioData" &&
+                    message.content.cellId === cellId
+                ) {
+                    if (message.content.audioData) {
+                        // Store the old blob URL to revoke later, but only if audio element isn't using it
+                        const oldBlobUrl =
+                            audioUrl && audioUrl.startsWith("blob:") ? audioUrl : null;
 
-                    fetch(message.content.audioData)
-                        .then((res) => res.blob())
-                        .then((blob) => {
-                            const blobUrl = URL.createObjectURL(blob);
-                            try {
-                                setCachedAudioDataUrl(cellId, message.content.audioData);
-                            } catch {}
-                            setAudioUrl(blobUrl);
-                            setIsLoading(false);
-                            if (pendingPlayRef.current) {
+                        // Convert base64 to blob URL
+                        fetch(message.content.audioData)
+                            .then((res) => res.blob())
+                            .then(async (blob) => {
+                                const blobUrl = URL.createObjectURL(blob);
                                 try {
-                                    if (!audioRef.current) {
-                                        audioRef.current = new Audio();
-                                        audioRef.current.onended = () => setIsPlaying(false);
-                                        audioRef.current.onerror = () => {
-                                            console.error("Error playing audio for cell:", cellId);
-                                            setIsPlaying(false);
-                                        };
+                                    setCachedAudioDataUrl(cellId, message.content.audioData);
+                                } catch {
+                                    /* empty */
+                                }
+                                setAudioUrl(blobUrl);
+                                setIsLoading(false);
+                                if (pendingPlayRef.current) {
+                                    // Auto-play once the data arrives
+                                    try {
+                                        // Handle video seeking, muting, and playback if video is showing
+                                        let videoElement: HTMLVideoElement | null = null;
+                                        if (
+                                            shouldShowVideoPlayer &&
+                                            videoUrl &&
+                                            playerRef?.current &&
+                                            cellTimestamps?.startTime !== undefined
+                                        ) {
+                                            try {
+                                                let seeked = false;
+                                                if (
+                                                    typeof playerRef.current.seekTo === "function"
+                                                ) {
+                                                    playerRef.current.seekTo(
+                                                        cellTimestamps.startTime,
+                                                        "seconds"
+                                                    );
+                                                    seeked = true;
+                                                }
+                                                const internalPlayer =
+                                                    playerRef.current.getInternalPlayer?.();
+                                                if (internalPlayer instanceof HTMLVideoElement) {
+                                                    videoElement = internalPlayer;
+                                                    if (!seeked) {
+                                                        videoElement.currentTime =
+                                                            cellTimestamps.startTime;
+                                                        seeked = true;
+                                                    }
+                                                } else if (
+                                                    internalPlayer &&
+                                                    typeof internalPlayer === "object"
+                                                ) {
+                                                    const foundVideo =
+                                                        (internalPlayer as any).querySelector?.(
+                                                            "video"
+                                                        ) ||
+                                                        (internalPlayer as any).video ||
+                                                        internalPlayer;
+                                                    if (foundVideo instanceof HTMLVideoElement) {
+                                                        videoElement = foundVideo;
+                                                        if (!seeked) {
+                                                            videoElement.currentTime =
+                                                                cellTimestamps.startTime;
+                                                            seeked = true;
+                                                        }
+                                                    }
+                                                }
+                                                if (!videoElement && playerRef.current) {
+                                                    const wrapper = playerRef.current as any;
+                                                    const foundVideo =
+                                                        wrapper.querySelector?.("video") ||
+                                                        wrapper.parentElement?.querySelector?.(
+                                                            "video"
+                                                        );
+                                                    if (foundVideo instanceof HTMLVideoElement) {
+                                                        videoElement = foundVideo;
+                                                        if (!seeked) {
+                                                            videoElement.currentTime =
+                                                                cellTimestamps.startTime;
+                                                            seeked = true;
+                                                        }
+                                                    }
+                                                }
+                                                if (videoElement) {
+                                                    previousVideoMuteStateRef.current =
+                                                        videoElement.muted;
+                                                    videoElementRef.current = videoElement;
+                                                    videoElement.muted = true;
+                                                    try {
+                                                        await videoElement.play();
+                                                    } catch (playError) {
+                                                        if (
+                                                            playError instanceof Error &&
+                                                            playError.name === "AbortError"
+                                                        ) {
+                                                            /* ignore */
+                                                        } else {
+                                                            console.warn(
+                                                                "Video play() failed, will wait for readiness:",
+                                                                playError
+                                                            );
+                                                        }
+                                                    }
+                                                    await waitForVideoReady(videoElement);
+                                                }
+                                            } catch (error) {
+                                                console.error(
+                                                    "Error seeking/muting/playing video:",
+                                                    error
+                                                );
+                                            }
+                                        }
+
+                                        if (!audioRef.current) {
+                                            audioRef.current = new Audio();
+                                            audioRef.current.onended = () => {
+                                                setIsPlaying(false);
+                                                stopVideoPlayback();
+                                            };
+                                            audioRef.current.onerror = () => {
+                                                console.error(
+                                                    "Error playing audio for cell:",
+                                                    cellId
+                                                );
+                                                setIsPlaying(false);
+                                            };
+                                        }
+
+                                        // Set the new blob URL as src
+                                        audioRef.current.src = blobUrl;
+
+                                        // Safely revoke the old blob URL after the new one is loaded
+                                        safelyRevokeOldBlobUrl(
+                                            audioRef.current,
+                                            oldBlobUrl,
+                                            blobUrl
+                                        );
+
+                                        globalAudioController
+                                            .playExclusive(audioRef.current)
+                                            .then(() => setIsPlaying(true))
+                                            .catch((e) => {
+                                                console.error(
+                                                    "Error auto-playing audio for cell:",
+                                                    e
+                                                );
+                                                setIsPlaying(false);
+                                            });
+                                    } finally {
+                                        pendingPlayRef.current = false;
+                                    }
+                                } else {
+                                    // Not auto-playing, but still wait for audio to load before revoking old blob URL
+                                    if (oldBlobUrl && audioRef.current) {
+                                        // Set the new blob URL as src
+                                        audioRef.current.src = blobUrl;
+                                        // Safely revoke the old blob URL after the new one is loaded
+                                        safelyRevokeOldBlobUrl(
+                                            audioRef.current,
+                                            oldBlobUrl,
+                                            blobUrl
+                                        );
+                                    } else if (oldBlobUrl) {
+                                        // No audio element, safe to revoke immediately
+                                        URL.revokeObjectURL(oldBlobUrl);
                                     }
-                                    audioRef.current.src = blobUrl;
-                                    audioRef.current
-                                        .play()
-                                        .then(() => setIsPlaying(true))
-                                        .catch(() => setIsPlaying(false));
-                                } finally {
-                                    pendingPlayRef.current = false;
                                 }
-                            }
-                        })
-                        .catch(() => setIsLoading(false));
-                } else {
-                    setAudioUrl(null);
-                    setIsLoading(false);
+                            })
+                            .catch((error) => {
+                                console.error("Error converting audio data:", error);
+                                setIsLoading(false);
+                            });
+                    } else {
+                        // No audio data - clear the audio URL and stop loading
+                        setAudioUrl(null);
+                        setIsLoading(false);
+                    }
                 }
-            }
-        },
-        [audioUrl, cellId, vscode]
-    );
-
-    useEffect(() => {
-        return () => {
-            if (audioUrl && audioUrl.startsWith("blob:")) {
-                URL.revokeObjectURL(audioUrl);
-            }
-            if (audioRef.current && isPlaying) {
-                audioRef.current.pause();
-            }
-        };
-    }, [audioUrl, isPlaying]);
-
-    const handlePlayAudio = async () => {
-        try {
-            if (state !== "available") {
-                // For missing audio, just open the editor without auto-starting recording
-                // Also don't auto-start if cell is locked (check via props if available)
-                // Note: This component doesn't have direct access to cell metadata,
-                // but the parent CellContentDisplay will handle the lock check
-                if (state !== "missing") {
-                    try {
-                        sessionStorage.setItem(`start-audio-recording-${cellId}`, "1");
-                    } catch {
-                        // no-op
+            },
+            [audioUrl, cellId, vscode, shouldShowVideoPlayer, videoUrl, playerRef, cellTimestamps]
+        );
+
+        // Clean up blob URL on unmount
+        useEffect(() => {
+            return () => {
+                // Only revoke blob URL if audio element isn't using it
+                if (audioUrl && audioUrl.startsWith("blob:")) {
+                    if (!audioRef.current || audioRef.current.src !== audioUrl) {
+                        URL.revokeObjectURL(audioUrl);
                     }
                 }
-                vscode.postMessage({
-                    command: "setPreferredEditorTab",
-                    content: { tab: "audio" },
-                } as any);
-                if (onOpenCell) onOpenCell(cellId);
+                // Stop audio if playing when unmounting
+                if (audioRef.current && isPlaying) {
+                    audioRef.current.pause();
+                }
+            };
+        }, [audioUrl, isPlaying]);
+
+        const handlePlayAudio = async () => {
+            if (disabled) {
                 return;
             }
 
-            if (isPlaying) {
-                if (audioRef.current) {
-                    audioRef.current.pause();
-                    audioRef.current.currentTime = 0;
-                }
-                setIsPlaying(false);
-            } else {
-                if (!audioUrl) {
-                    pendingPlayRef.current = true;
-                    setIsLoading(true);
+            try {
+                // For any non-available state, open editor on audio tab and auto-start recording
+                if (
+                    state !== "available" &&
+                    state !== "available-local" &&
+                    state !== "available-pointer"
+                ) {
+                    // Locked cells: don't open editor to record/re-record.
+                    // (Playback is handled in available/available-local/available-pointer states.)
+                    if (isCellLocked && state !== "missing") {
+                        onLockedClick?.();
+                        return;
+                    }
+
+                    // For missing audio, just open the editor without auto-starting recording
+                    if (state !== "missing" && !isCellLocked) {
+                        try {
+                            sessionStorage.setItem(`start-audio-recording-${cellId}`, "1");
+                        } catch (e) {
+                            void e;
+                        }
+                    }
                     vscode.postMessage({
-                        command: "requestAudioForCell",
-                        content: { cellId },
+                        command: "setPreferredEditorTab",
+                        content: { tab: "audio" },
                     } as any);
+                    if (onOpenCell) onOpenCell(cellId);
                     return;
                 }
 
-                if (!audioRef.current) {
-                    audioRef.current = new Audio();
-                    audioRef.current.onended = () => setIsPlaying(false);
-                    audioRef.current.onerror = () => setIsPlaying(false);
-                }
+                if (isPlaying) {
+                    // Stop current audio
+                    if (audioRef.current) {
+                        audioRef.current.pause();
+                        audioRef.current.currentTime = 0;
+                    }
+                    setIsPlaying(false);
+                    stopVideoPlayback();
+                } else {
+                    // If we don't have audio yet, try cached data first; only request if not cached
+                    let effectiveUrl: string | null = audioUrl;
+                    const oldBlobUrl = audioUrl && audioUrl.startsWith("blob:") ? audioUrl : null;
+                    if (!effectiveUrl) {
+                        const cached = getCachedAudioDataUrl(cellId);
+                        if (cached) {
+                            pendingPlayRef.current = true;
+                            setIsLoading(true);
+                            try {
+                                const res = await fetch(cached);
+                                const blob = await res.blob();
+                                const blobUrl = URL.createObjectURL(blob);
+                                setAudioUrl(blobUrl); // update state for future plays
+                                effectiveUrl = blobUrl; // use immediately for this play
+                                setIsLoading(false);
+                                // fall through to playback below
+                            } catch {
+                                // If cache hydration fails, request from provider
+                                pendingPlayRef.current = true;
+                                setIsLoading(true);
+                                vscode.postMessage({
+                                    command: "requestAudioForCell",
+                                    content: { cellId },
+                                } as EditorPostMessages);
+                                return;
+                            }
+                        } else {
+                            pendingPlayRef.current = true;
+                            setIsLoading(true);
+                            vscode.postMessage({
+                                command: "requestAudioForCell",
+                                content: { cellId },
+                            } as EditorPostMessages);
+                            return;
+                        }
+                    }
 
-                audioRef.current.src = audioUrl;
-                await audioRef.current.play();
-                setIsPlaying(true);
+                    // Handle video seeking, muting, and playback if video is showing
+                    let videoElement: HTMLVideoElement | null = null;
+                    if (
+                        shouldShowVideoPlayer &&
+                        videoUrl &&
+                        playerRef?.current &&
+                        cellTimestamps?.startTime !== undefined
+                    ) {
+                        try {
+                            let seeked = false;
+                            if (typeof playerRef.current.seekTo === "function") {
+                                playerRef.current.seekTo(cellTimestamps.startTime, "seconds");
+                                seeked = true;
+                            }
+                            const internalPlayer = playerRef.current.getInternalPlayer?.();
+                            if (internalPlayer instanceof HTMLVideoElement) {
+                                videoElement = internalPlayer;
+                                if (!seeked) {
+                                    videoElement.currentTime = cellTimestamps.startTime;
+                                    seeked = true;
+                                }
+                            } else if (internalPlayer && typeof internalPlayer === "object") {
+                                const foundVideo =
+                                    (internalPlayer as any).querySelector?.("video") ||
+                                    (internalPlayer as any).video ||
+                                    internalPlayer;
+                                if (foundVideo instanceof HTMLVideoElement) {
+                                    videoElement = foundVideo;
+                                    if (!seeked) {
+                                        videoElement.currentTime = cellTimestamps.startTime;
+                                        seeked = true;
+                                    }
+                                }
+                            }
+                            if (!videoElement && playerRef.current) {
+                                const wrapper = playerRef.current as any;
+                                const foundVideo =
+                                    wrapper.querySelector?.("video") ||
+                                    wrapper.parentElement?.querySelector?.("video");
+                                if (foundVideo instanceof HTMLVideoElement) {
+                                    videoElement = foundVideo;
+                                    if (!seeked) {
+                                        videoElement.currentTime = cellTimestamps.startTime;
+                                        seeked = true;
+                                    }
+                                }
+                            }
+                            if (videoElement) {
+                                previousVideoMuteStateRef.current = videoElement.muted;
+                                videoElementRef.current = videoElement;
+                                videoElement.muted = true;
+                                try {
+                                    await videoElement.play();
+                                } catch (playError) {
+                                    if (
+                                        playError instanceof Error &&
+                                        playError.name === "AbortError"
+                                    ) {
+                                        /* ignore */
+                                    } else {
+                                        console.warn(
+                                            "Video play() failed, will wait for readiness:",
+                                            playError
+                                        );
+                                    }
+                                }
+                                await waitForVideoReady(videoElement);
+                            }
+                        } catch (error) {
+                            console.error("Error seeking/muting/playing video:", error);
+                        }
+                    }
+
+                    // Create or reuse audio element
+                    if (!audioRef.current) {
+                        audioRef.current = new Audio();
+                        audioRef.current.onended = () => {
+                            setIsPlaying(false);
+                            stopVideoPlayback();
+                        };
+                        audioRef.current.onerror = () => {
+                            console.error("Error playing audio for cell:", cellId);
+                            setIsPlaying(false);
+                        };
+                    }
+
+                    const newBlobUrl = effectiveUrl || audioUrl || "";
+                    audioRef.current.src = newBlobUrl;
+
+                    // Safely revoke the old blob URL after the new one is loaded (if we're switching blob URLs)
+                    if (oldBlobUrl && oldBlobUrl !== newBlobUrl && newBlobUrl.startsWith("blob:")) {
+                        safelyRevokeOldBlobUrl(audioRef.current, oldBlobUrl, newBlobUrl);
+                    }
+
+                    await globalAudioController.playExclusive(audioRef.current);
+                    setIsPlaying(true);
+                }
+            } catch (error) {
+                console.error("Error handling audio playback:", error);
+                setIsPlaying(false);
             }
-        } catch (error) {
-            console.error("Error handling audio playback:", error);
-            setIsPlaying(false);
-        }
-    };
+        };
 
-    const { iconClass, color } = (() => {
-        // If we already have an audio URL, always show Play (post-stream or cache)
-        if (audioUrl) {
-            return {
-                iconClass: isPlaying ? "codicon-debug-stop" : "codicon-play",
-                color: "var(--vscode-charts-blue)",
-            } as const;
-        }
-        if (state === "available" || state === "available-local") {
-            return {
-                iconClass: isPlaying ? "codicon-debug-stop" : "codicon-play",
-                color: "var(--vscode-charts-blue)",
-            } as const;
-        }
-        if (state === "available-pointer") {
-            return {
-                iconClass: isPlaying ? "codicon-debug-stop" : "codicon-cloud-download",
-                color: "var(--vscode-charts-blue)",
-            } as const;
-        }
-        if (state === "missing") {
+        // Keep inline button in sync if this audio is stopped by global controller (e.g. user
+        // clicked another cell's play). Do not call stopVideoPlayback() here: the new cell is
+        // now in charge of the video; pausing here would fight with it and can cause a loop.
+        useEffect(() => {
+            const handler = (e: AudioControllerEvent) => {
+                if (audioRef.current && e.audio === audioRef.current) {
+                    setIsPlaying(false);
+                    previousVideoMuteStateRef.current = null;
+                    videoElementRef.current = null;
+                }
+            };
+            globalAudioController.addListener(handler);
+            return () => globalAudioController.removeListener(handler);
+        }, []);
+
+        // Broadcast audio state changes to other webviews
+        useEffect(() => {
+            const webviewType = isSourceText ? "source" : "target";
+            vscode.postMessage({
+                command: "audioStateChanged",
+                destination: "webview",
+                content: {
+                    type: "audioPlaying",
+                    webviewType,
+                    isPlaying,
+                },
+            } as any);
+        }, [isPlaying, isSourceText, vscode]);
+
+        // Decide icon color/style based on state
+        const { iconClass, color, titleSuffix } = (() => {
+            // If we already have audio bytes (from cache or just streamed), show Play regardless of pointer/local state
+            if (audioUrl || getCachedAudioDataUrl(cellId)) {
+                return {
+                    iconClass: isLoading
+                        ? "codicon-loading codicon-modifier-spin"
+                        : isPlaying
+                        ? "codicon-debug-stop"
+                        : "codicon-play",
+                    color: "var(--vscode-charts-blue)",
+                    titleSuffix: "(available)",
+                } as const;
+            }
+            // Local file present but not yet loaded into memory
+            if (state === "available-local") {
+                return {
+                    iconClass: isLoading
+                        ? "codicon-loading codicon-modifier-spin"
+                        : isPlaying
+                        ? "codicon-debug-stop"
+                        : "codicon-play",
+                    color: "var(--vscode-charts-blue)",
+                    titleSuffix: "(local)",
+                } as const;
+            }
+            // Available remotely/downloadable or pointer-only → show cloud
+            if (state === "available" || state === "available-pointer") {
+                return {
+                    iconClass: isLoading
+                        ? "codicon-loading codicon-modifier-spin"
+                        : "codicon-cloud-download", // cloud behind play
+                    color: "var(--vscode-charts-blue)",
+                    titleSuffix: state === "available-pointer" ? "(pointer)" : "(in cloud)",
+                } as const;
+            }
+            if (state === "missing") {
+                return {
+                    iconClass: "codicon-warning",
+                    color: "var(--vscode-errorForeground)",
+                    titleSuffix: "(missing)",
+                } as const;
+            }
+            // deletedOnly or none => show mic to begin recording
             return {
-                iconClass: "codicon-warning",
-                color: "var(--vscode-errorForeground)",
+                iconClass: "codicon-mic",
+                color: "var(--vscode-foreground)",
+                titleSuffix: "(record)",
             } as const;
-        }
-        return { iconClass: "codicon-mic", color: "var(--vscode-foreground)" } as const;
-    })();
-
-    return (
-        <button
-            onClick={handlePlayAudio}
-            className="audio-play-button p-[1px]"
-            title={
-                isLoading
-                    ? "Preparing audio..."
-                    : state === "available" || state === "available-local"
-                    ? "Play"
-                    : state === "available-pointer"
-                    ? "Download"
-                    : state === "missing"
-                    ? "Missing audio"
-                    : "Record"
-            }
-            disabled={false}
-            style={{
-                background: "none",
-                border: "none",
-                cursor: "pointer",
-                borderRadius: "4px",
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                color,
-                opacity: isPlaying ? 1 : 0.8,
-                transition: "opacity 0.2s",
-            }}
-            onMouseEnter={(e) => (e.currentTarget.style.opacity = "1")}
-            onMouseLeave={(e) => (e.currentTarget.style.opacity = isPlaying ? "1" : "0.8")}
-        >
-            <i
-                className={`codicon ${iconClass}`}
-                style={{ fontSize: "16px", position: "relative" }}
-            />
-        </button>
-    );
-};
+        })();
+
+        return (
+            <button
+                onClick={handlePlayAudio}
+                className="audio-play-button"
+                title={
+                    disabled
+                        ? "Audio playback disabled - other type is playing"
+                        : isLoading
+                        ? "Preparing audio..."
+                        : state === "available" || state === "available-pointer"
+                        ? audioUrl || getCachedAudioDataUrl(cellId)
+                            ? "Play"
+                            : "Download"
+                        : state === "available-local"
+                        ? "Play"
+                        : state === "missing"
+                        ? "Missing audio"
+                        : isCellLocked
+                        ? "Cell is locked"
+                        : "Record"
+                }
+                disabled={disabled}
+                style={{
+                    background: "none",
+                    border: "none",
+                    cursor: disabled ? "not-allowed" : "pointer",
+                    padding: "1px",
+                    borderRadius: "4px",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    color,
+                    opacity: disabled ? 0.4 : isPlaying ? 1 : 0.8,
+                    transition: "opacity 0.2s",
+                }}
+                onMouseEnter={(e) => {
+                    e.stopPropagation();
+                    if (!disabled) {
+                        e.currentTarget.style.opacity = "1";
+                    }
+                }}
+                onMouseLeave={(e) => {
+                    e.stopPropagation();
+                    e.currentTarget.style.opacity = disabled ? "0.4" : isPlaying ? "1" : "0.8";
+                }}
+            >
+                <i
+                    className={`codicon ${iconClass}`}
+                    style={{ fontSize: "16px", position: "relative" }}
+                />
+            </button>
+        );
+    }
+);
 
-export default React.memo(AudioPlayButton);
+export default AudioPlayButton;
diff --git a/webviews/codex-webviews/src/CodexCellEditor/AudioWaveformWithTranscription.tsx b/webviews/codex-webviews/src/CodexCellEditor/AudioWaveformWithTranscription.tsx
index e658762c4..2d1d80d28 100644
--- a/webviews/codex-webviews/src/CodexCellEditor/AudioWaveformWithTranscription.tsx
+++ b/webviews/codex-webviews/src/CodexCellEditor/AudioWaveformWithTranscription.tsx
@@ -41,6 +41,8 @@ interface AudioWaveformWithTranscriptionProps {
     onShowRecorder?: () => void;
     audioValidationPopoverProps: AudioValidationPopoverProps;
     validationStatusProps: ValidationStatusIconProps;
+    targetDurationSeconds?: number | null;
+    audioDurationSeconds?: number | null;
 }
 
 const AudioWaveformWithTranscription: React.FC<AudioWaveformWithTranscriptionProps> = ({
@@ -58,6 +60,8 @@ const AudioWaveformWithTranscription: React.FC<AudioWaveformWithTranscriptionPro
     onShowRecorder,
     validationStatusProps,
     audioValidationPopoverProps,
+    targetDurationSeconds,
+    audioDurationSeconds,
 }) => {
     const [audioSrc, setAudioSrc] = useState<string>("");
     // State for hover popover of audio validators
@@ -338,6 +342,39 @@ const AudioWaveformWithTranscription: React.FC<AudioWaveformWithTranscriptionPro
                 </div>
             )}
 
+            {/* Target duration bar (e.g. subtitle cells): audio length vs allotted timestamp length */}
+            {targetDurationSeconds != null &&
+                targetDurationSeconds > 0 &&
+                audioDurationSeconds != null &&
+                audioDurationSeconds >= 0 && (
+                    <div className="w-full space-y-2">
+                        <div className="relative w-full h-3 bg-blue-200/60 rounded-full overflow-hidden">
+                            <div
+                                className="h-full rounded-full transition-all duration-100"
+                                style={{
+                                    width: `${Math.min(
+                                        100,
+                                        (audioDurationSeconds / targetDurationSeconds) * 100
+                                    )}%`,
+                                    backgroundColor:
+                                        audioDurationSeconds > targetDurationSeconds
+                                            ? "rgb(239, 68, 68)" // red: over allotted
+                                            : (audioDurationSeconds / targetDurationSeconds) *
+                                                  100 >=
+                                              90
+                                            ? "rgb(34, 197, 94)" // green: within 90%+
+                                            : "rgb(234, 179, 8)", // yellow: under 90%
+                                }}
+                            />
+                        </div>
+                        <div className="flex justify-between text-xs text-muted-foreground">
+                            <span>{audioDurationSeconds.toFixed(3)}s</span>
+                            <span>Timestamp Length</span>
+                            <span>{targetDurationSeconds.toFixed(3)}s</span>
+                        </div>
+                    </div>
+                )}
+
             {/* Action buttons at bottom */}
             <div className="flex flex-wrap items-center justify-center gap-2 px-2">
                 {!transcription && !isTranscribing && (
diff --git a/webviews/codex-webviews/src/CodexCellEditor/CellContentDisplay.tsx b/webviews/codex-webviews/src/CodexCellEditor/CellContentDisplay.tsx
index 2d6e59bcc..fc19248fe 100644
--- a/webviews/codex-webviews/src/CodexCellEditor/CellContentDisplay.tsx
+++ b/webviews/codex-webviews/src/CodexCellEditor/CellContentDisplay.tsx
@@ -1,16 +1,7 @@
-import React, { useContext, useEffect, useRef, useState, useMemo, useCallback } from "react";
-import { getCachedAudioDataUrl, setCachedAudioDataUrl } from "../lib/audioCache";
-import { globalAudioController, type AudioControllerEvent } from "../lib/audioController";
-import {
-    EditorCellContent,
-    EditorPostMessages,
-    Timestamps,
-    EditHistory,
-    QuillCellContent,
-} from "../../../../types";
+import React, { useEffect, useRef, useState, useCallback } from "react";
+import { EditorPostMessages, QuillCellContent } from "../../../../types";
+import type { ReactPlayerRef } from "./types/reactPlayerTypes";
 import { processHtmlContent, updateFootnoteNumbering } from "./footnoteUtils";
-import { CodexCellTypes } from "../../../../types/enums";
-import UnsavedChangesContext from "./contextProviders/UnsavedChangesContext";
 import { WebviewApi } from "vscode-webview";
 import ValidationButton from "./ValidationButton";
 import AudioValidationButton from "./AudioValidationButton";
@@ -24,7 +15,6 @@ const CELL_DISPLAY_MODE = CELL_DISPLAY_MODES.ONE_LINE_PER_CELL;
 import "./TranslationAnimations.css"; // Import the animation CSS
 import { useTooltip } from "./contextProviders/TooltipContext";
 import CommentsBadge from "./CommentsBadge";
-import { useMessageHandler } from "./hooks/useCentralizedMessageDispatcher";
 import ReactMarkdown from "react-markdown";
 import {
     Dialog,
@@ -34,6 +24,7 @@ import {
     DialogHeader,
     DialogTitle,
 } from "../components/ui/dialog";
+import AudioPlayButton from "./AudioPlayButton";
 import { MessageCircle } from "lucide-react";
 
 const SHOW_VALIDATION_BUTTON = true;
@@ -76,6 +67,12 @@ interface CellContentDisplayProps {
     isAudioOnly?: boolean;
     showInlineBacktranslations?: boolean;
     backtranslation?: any;
+    // Video player props
+    playerRef?: React.RefObject<ReactPlayerRef>;
+    shouldShowVideoPlayer?: boolean;
+    videoUrl?: string;
+    // Audio playback state from other webview type (source or target)
+    isOtherTypeAudioPlaying?: boolean;
 }
 
 const DEBUG_ENABLED = false;
@@ -85,337 +82,6 @@ function debug(message: string, ...args: any[]): void {
     }
 }
 
-// Audio Play Button Component
-const AudioPlayButton: React.FC<{
-    cellId: string;
-    vscode: WebviewApi<unknown>;
-    state?:
-        | "available"
-        | "available-local"
-        | "available-pointer"
-        | "missing"
-        | "deletedOnly"
-        | "none";
-    onOpenCell?: (cellId: string) => void;
-    isCellLocked?: boolean;
-    onLockedClick?: () => void;
-}> = React.memo(
-    ({ cellId, vscode, state = "available", onOpenCell, isCellLocked = false, onLockedClick }) => {
-        const [isPlaying, setIsPlaying] = useState(false);
-        const [audioUrl, setAudioUrl] = useState<string | null>(null);
-        const [isLoading, setIsLoading] = useState(false);
-        const pendingPlayRef = useRef(false);
-        const audioRef = useRef<HTMLAudioElement | null>(null);
-
-        // Do not pre-load on mount; we will request on first click to avoid spinner churn
-
-        // Listen for audio data messages
-        useMessageHandler(
-            "cellContentDisplay-audioData",
-            async (event: MessageEvent) => {
-                const message = event.data;
-
-                // Handle audio attachments updates - clear current url and cache; fetch on next click
-                if (message.type === "providerSendsAudioAttachments") {
-                    // Clear cached audio data since selected audio might have changed
-                    const { clearCachedAudio } = await import("../lib/audioCache");
-                    clearCachedAudio(cellId);
-
-                    if (audioUrl && audioUrl.startsWith("blob:")) {
-                        URL.revokeObjectURL(audioUrl);
-                    }
-                    setAudioUrl(null);
-                    setIsLoading(false);
-                }
-
-                if (
-                    message.type === "providerSendsAudioData" &&
-                    message.content.cellId === cellId
-                ) {
-                    if (message.content.audioData) {
-                        // Clean up previous URL if exists
-                        if (audioUrl && audioUrl.startsWith("blob:")) {
-                            URL.revokeObjectURL(audioUrl);
-                        }
-
-                        // Convert base64 to blob URL
-                        fetch(message.content.audioData)
-                            .then((res) => res.blob())
-                            .then((blob) => {
-                                const blobUrl = URL.createObjectURL(blob);
-                                try {
-                                    setCachedAudioDataUrl(cellId, message.content.audioData);
-                                } catch {
-                                    /* empty */
-                                }
-                                setAudioUrl(blobUrl);
-                                setIsLoading(false);
-                                if (pendingPlayRef.current) {
-                                    // Auto-play once the data arrives
-                                    try {
-                                        if (!audioRef.current) {
-                                            audioRef.current = new Audio();
-                                            audioRef.current.onended = () => setIsPlaying(false);
-                                            audioRef.current.onerror = () => {
-                                                console.error(
-                                                    "Error playing audio for cell:",
-                                                    cellId
-                                                );
-                                                setIsPlaying(false);
-                                            };
-                                        }
-                                        audioRef.current.src = blobUrl;
-                                        globalAudioController
-                                            .playExclusive(audioRef.current)
-                                            .then(() => setIsPlaying(true))
-                                            .catch((e) => {
-                                                console.error(
-                                                    "Error auto-playing audio for cell:",
-                                                    e
-                                                );
-                                                setIsPlaying(false);
-                                            });
-                                    } finally {
-                                        pendingPlayRef.current = false;
-                                    }
-                                }
-                            })
-                            .catch((error) => {
-                                console.error("Error converting audio data:", error);
-                                setIsLoading(false);
-                            });
-                    } else {
-                        // No audio data - clear the audio URL and stop loading
-                        setAudioUrl(null);
-                        setIsLoading(false);
-                    }
-                }
-            },
-            [audioUrl, cellId, vscode]
-        ); // Add vscode to dependencies
-
-        // Clean up blob URL on unmount
-        useEffect(() => {
-            return () => {
-                if (audioUrl && audioUrl.startsWith("blob:")) {
-                    URL.revokeObjectURL(audioUrl);
-                }
-                // Stop audio if playing when unmounting
-                if (audioRef.current && isPlaying) {
-                    audioRef.current.pause();
-                }
-            };
-        }, [audioUrl, isPlaying]);
-
-        const handlePlayAudio = async () => {
-            try {
-                // For any non-available state, open editor on audio tab and auto-start recording
-                if (
-                    state !== "available" &&
-                    state !== "available-local" &&
-                    state !== "available-pointer"
-                ) {
-                    // Locked cells: don't open editor to record/re-record.
-                    // (Playback is handled in available/available-local/available-pointer states.)
-                    if (isCellLocked && state !== "missing") {
-                        onLockedClick?.();
-                        return;
-                    }
-
-                    // For missing audio, just open the editor without auto-starting recording
-                    // Also don't auto-start if cell is locked
-                    if (state !== "missing" && !isCellLocked) {
-                        try {
-                            sessionStorage.setItem(`start-audio-recording-${cellId}`, "1");
-                        } catch (e) {
-                            void e;
-                        }
-                    }
-                    vscode.postMessage({
-                        command: "setPreferredEditorTab",
-                        content: { tab: "audio" },
-                    } as any);
-                    if (onOpenCell) onOpenCell(cellId);
-                    return;
-                }
-
-                if (isPlaying) {
-                    // Stop current audio
-                    if (audioRef.current) {
-                        audioRef.current.pause();
-                        audioRef.current.currentTime = 0;
-                    }
-                    setIsPlaying(false);
-                } else {
-                    // If we don't have audio yet, try cached data first; only request if not cached
-                    let effectiveUrl: string | null = audioUrl;
-                    if (!effectiveUrl) {
-                        const cached = getCachedAudioDataUrl(cellId);
-                        if (cached) {
-                            pendingPlayRef.current = true;
-                            setIsLoading(true);
-                            try {
-                                const res = await fetch(cached);
-                                const blob = await res.blob();
-                                const blobUrl = URL.createObjectURL(blob);
-                                setAudioUrl(blobUrl); // update state for future plays
-                                effectiveUrl = blobUrl; // use immediately for this play
-                                setIsLoading(false);
-                                // fall through to playback below
-                            } catch {
-                                // If cache hydration fails, request from provider
-                                pendingPlayRef.current = true;
-                                setIsLoading(true);
-                                vscode.postMessage({
-                                    command: "requestAudioForCell",
-                                    content: { cellId },
-                                } as EditorPostMessages);
-                                return;
-                            }
-                        } else {
-                            pendingPlayRef.current = true;
-                            setIsLoading(true);
-                            vscode.postMessage({
-                                command: "requestAudioForCell",
-                                content: { cellId },
-                            } as EditorPostMessages);
-                            return;
-                        }
-                    }
-
-                    // Create or reuse audio element
-                    if (!audioRef.current) {
-                        audioRef.current = new Audio();
-                        audioRef.current.onended = () => setIsPlaying(false);
-                        audioRef.current.onerror = () => {
-                            console.error("Error playing audio for cell:", cellId);
-                            setIsPlaying(false);
-                        };
-                    }
-
-                    audioRef.current.src = effectiveUrl || audioUrl || "";
-                    await globalAudioController.playExclusive(audioRef.current);
-                    setIsPlaying(true);
-                }
-            } catch (error) {
-                console.error("Error handling audio playback:", error);
-                setIsPlaying(false);
-            }
-        };
-
-        // Keep inline button in sync if this audio is stopped by global controller
-        useEffect(() => {
-            const handler = (e: AudioControllerEvent) => {
-                if (audioRef.current && e.audio === audioRef.current) {
-                    setIsPlaying(false);
-                }
-            };
-            globalAudioController.addListener(handler);
-            return () => globalAudioController.removeListener(handler);
-        }, []);
-
-        // Decide icon color/style based on state
-        const { iconClass, color, titleSuffix } = (() => {
-            // If we already have audio bytes (from cache or just streamed), show Play regardless of pointer/local state
-            if (audioUrl || getCachedAudioDataUrl(cellId)) {
-                return {
-                    iconClass: isLoading
-                        ? "codicon-loading codicon-modifier-spin"
-                        : isPlaying
-                        ? "codicon-debug-stop"
-                        : "codicon-play",
-                    color: "var(--vscode-charts-blue)",
-                    titleSuffix: "(available)",
-                } as const;
-            }
-            // Local file present but not yet loaded into memory
-            if (state === "available-local") {
-                return {
-                    iconClass: isLoading
-                        ? "codicon-loading codicon-modifier-spin"
-                        : isPlaying
-                        ? "codicon-debug-stop"
-                        : "codicon-play",
-                    color: "var(--vscode-charts-blue)",
-                    titleSuffix: "(local)",
-                } as const;
-            }
-            // Available remotely/downloadable or pointer-only → show cloud
-            if (state === "available" || state === "available-pointer") {
-                return {
-                    iconClass: isLoading
-                        ? "codicon-loading codicon-modifier-spin"
-                        : "codicon-cloud-download", // cloud behind play
-                    color: "var(--vscode-charts-blue)",
-                    titleSuffix: state === "available-pointer" ? "(pointer)" : "(in cloud)",
-                } as const;
-            }
-            if (state === "missing") {
-                return {
-                    iconClass: "codicon-warning",
-                    color: "var(--vscode-errorForeground)",
-                    titleSuffix: "(missing)",
-                } as const;
-            }
-            // deletedOnly or none => show mic to begin recording
-            return {
-                iconClass: "codicon-mic",
-                color: "var(--vscode-foreground)",
-                titleSuffix: "(record)",
-            } as const;
-        })();
-
-        return (
-            <button
-                onClick={handlePlayAudio}
-                className="audio-play-button"
-                title={
-                    isLoading
-                        ? "Preparing audio..."
-                        : state === "available" || state === "available-pointer"
-                        ? audioUrl || getCachedAudioDataUrl(cellId)
-                            ? "Play"
-                            : "Download"
-                        : state === "available-local"
-                        ? "Play"
-                        : state === "missing"
-                        ? "Missing audio"
-                        : isCellLocked
-                        ? "Cell is locked"
-                        : "Record"
-                }
-                disabled={false}
-                style={{
-                    background: "none",
-                    border: "none",
-                    cursor: "pointer",
-                    padding: "1px",
-                    borderRadius: "4px",
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    color,
-                    opacity: isPlaying ? 1 : 0.8,
-                    transition: "opacity 0.2s",
-                }}
-                onMouseEnter={(e) => {
-                    e.stopPropagation();
-                    e.currentTarget.style.opacity = "1";
-                }}
-                onMouseLeave={(e) => {
-                    e.stopPropagation();
-                    e.currentTarget.style.opacity = isPlaying ? "1" : "0.8";
-                }}
-            >
-                <i
-                    className={`codicon ${iconClass}`}
-                    style={{ fontSize: "16px", position: "relative" }}
-                />
-            </button>
-        );
-    }
-);
-
 // Cell Label Text Component
 const CellLabelText: React.FC<{
     label: string;
@@ -456,6 +122,9 @@ const CellContentDisplay: React.FC<CellContentDisplayProps> = React.memo(
         allTranslationsComplete = false,
         handleCellTranslation,
         handleCellClick,
+        playerRef,
+        shouldShowVideoPlayer = false,
+        videoUrl,
         audioAttachments,
         footnoteOffset = 0,
         isCorrectionEditorMode = false,
@@ -469,8 +138,8 @@ const CellContentDisplay: React.FC<CellContentDisplayProps> = React.memo(
         isAudioOnly = false,
         showInlineBacktranslations = false,
         backtranslation,
+        isOtherTypeAudioPlaying = false,
     }) => {
-        // const { cellContent, timestamps, editHistory } = cell; // I don't think we use this
         const cellIds = cell.cellMarkers;
         // Lock state is ONLY honored from top-level metadata.isLocked
         const isCellLocked = !!cell.metadata?.isLocked;
@@ -482,14 +151,13 @@ const CellContentDisplay: React.FC<CellContentDisplayProps> = React.memo(
         const [isLockButtonFlashing, setIsLockButtonFlashing] = useState(false);
         const { showTooltip, hideTooltip } = useTooltip();
 
-        const { unsavedChanges, toggleFlashingBorder } = useContext(UnsavedChangesContext);
-
         const cellRef = useRef<HTMLDivElement>(null);
         const contentRef = useRef<HTMLDivElement>(null);
 
         // Effect to attach event listeners to footnote markers
         useEffect(() => {
-            if (!contentRef.current) return;
+            // Add type guard to ensure contentRef.current is a DOM element
+            if (!contentRef.current || !(contentRef.current instanceof Element)) return;
 
             // Find all footnote markers in the rendered content
             const markers = contentRef.current.querySelectorAll("sup.footnote-marker");
@@ -519,7 +187,7 @@ const CellContentDisplay: React.FC<CellContentDisplayProps> = React.memo(
             });
 
             // Use the proper footnote numbering utility
-            if (contentRef.current) {
+            if (contentRef.current instanceof Element) {
                 updateFootnoteNumbering(contentRef.current, footnoteOffset + 1, false);
             }
 
@@ -856,6 +524,43 @@ const CellContentDisplay: React.FC<CellContentDisplayProps> = React.memo(
 
         // Function to render the content with footnote markers and proper spacing
         const renderContent = () => {
+            const timestamps = () => {
+                if (
+                    cell.timestamps &&
+                    (cell.timestamps.startTime !== undefined ||
+                        cell.timestamps.endTime !== undefined)
+                ) {
+                    return (
+                        <div
+                            className="timestamp-display"
+                            style={{
+                                fontSize: "0.75rem",
+                                color: "var(--vscode-descriptionForeground)",
+                                marginTop: "0.25rem",
+                                fontFamily: "monospace",
+                                opacity: 0.8,
+                                textAlign: "start",
+                                width: "100%",
+                            }}
+                        >
+                            {cell.timestamps.startTime !== undefined &&
+                            cell.timestamps.endTime !== undefined ? (
+                                <span>
+                                    {formatTime(cell.timestamps.startTime)} →{" "}
+                                    {formatTime(cell.timestamps.endTime)}
+                                </span>
+                            ) : cell.timestamps.startTime !== undefined ? (
+                                <span>Start: {formatTime(cell.timestamps.startTime)}</span>
+                            ) : cell.timestamps.endTime !== undefined ? (
+                                <span>End: {formatTime(cell.timestamps.endTime)}</span>
+                            ) : null}
+                        </div>
+                    );
+                }
+
+                return null;
+            };
+
             // Handle empty cell case
             if (
                 (!cell.cellContent || cell.cellContent.trim() === "") &&
@@ -863,16 +568,19 @@ const CellContentDisplay: React.FC<CellContentDisplayProps> = React.memo(
                 (!isSourceText || !isAudioOnly)
             ) {
                 return (
-                    <div
-                        ref={contentRef}
-                        className="cell-content empty-cell-content"
-                        style={{
-                            color: "var(--vscode-descriptionForeground)",
-                            fontStyle: "italic",
-                            opacity: 0.8,
-                        }}
-                    >
-                        {isSourceText ? "No text" : "Click to translate"}
+                    <div className="flex flex-col gap-[0.5rem]">
+                        <div
+                            ref={contentRef}
+                            className="cell-content empty-cell-content"
+                            style={{
+                                color: "var(--vscode-descriptionForeground)",
+                                fontStyle: "italic",
+                                opacity: 0.8,
+                            }}
+                        >
+                            {isSourceText ? "No text" : "Click to translate"}
+                        </div>
+                        {timestamps()}
                     </div>
                 );
             }
@@ -902,8 +610,11 @@ const CellContentDisplay: React.FC<CellContentDisplayProps> = React.memo(
             // Render content with timestamp display when timestamps are present
             return (
                 <div
-                    onClick={handleCellContentClick}
-                    style={{ display: "flex", flexDirection: "column", gap: "0.5rem" }}
+                    className="flex flex-col gap-[0.5rem]"
+                    onClick={() => {
+                        hideTooltip();
+                        handleCellClick(cellIds[0]);
+                    }}
                 >
                     <div
                         ref={contentRef}
@@ -912,34 +623,7 @@ const CellContentDisplay: React.FC<CellContentDisplayProps> = React.memo(
                             __html: processedHtml,
                         }}
                     />
-                    {cell.timestamps &&
-                        (cell.timestamps.startTime !== undefined ||
-                            cell.timestamps.endTime !== undefined) && (
-                            <div
-                                className="timestamp-display"
-                                style={{
-                                    fontSize: "0.75rem",
-                                    color: "var(--vscode-descriptionForeground)",
-                                    marginTop: "0.25rem",
-                                    fontFamily: "monospace",
-                                    opacity: 0.8,
-                                    textAlign: "start",
-                                    width: "100%",
-                                }}
-                            >
-                                {cell.timestamps.startTime !== undefined &&
-                                cell.timestamps.endTime !== undefined ? (
-                                    <span>
-                                        {formatTime(cell.timestamps.startTime)} →{" "}
-                                        {formatTime(cell.timestamps.endTime)}
-                                    </span>
-                                ) : cell.timestamps.startTime !== undefined ? (
-                                    <span>Start: {formatTime(cell.timestamps.startTime)}</span>
-                                ) : cell.timestamps.endTime !== undefined ? (
-                                    <span>End: {formatTime(cell.timestamps.endTime)}</span>
-                                ) : null}
-                            </div>
-                        )}
+                    {timestamps()}
                 </div>
             );
         };
@@ -1183,6 +867,12 @@ const CellContentDisplay: React.FC<CellContentDisplayProps> = React.memo(
                                                             (window as any).openCellById;
                                                         if (typeof open === "function") open(id);
                                                     }}
+                                                    playerRef={playerRef}
+                                                    cellTimestamps={cell.timestamps}
+                                                    shouldShowVideoPlayer={shouldShowVideoPlayer}
+                                                    videoUrl={videoUrl}
+                                                    disabled={isOtherTypeAudioPlaying}
+                                                    isSourceText={isSourceText}
                                                 />
                                             );
                                         })()}
diff --git a/webviews/codex-webviews/src/CodexCellEditor/CellList.tsx b/webviews/codex-webviews/src/CodexCellEditor/CellList.tsx
index 8f2cca040..ee865f61d 100644
--- a/webviews/codex-webviews/src/CodexCellEditor/CellList.tsx
+++ b/webviews/codex-webviews/src/CodexCellEditor/CellList.tsx
@@ -4,6 +4,7 @@ import {
     QuillCellContent,
     SpellCheckResponse,
     MilestoneIndex,
+    CustomNotebookMetadata,
 } from "../../../../types";
 import React, { useMemo, useCallback, useState, useEffect, useRef, useContext } from "react";
 import CellEditor from "./TextCellEditor";
@@ -21,6 +22,7 @@ import UnsavedChangesContext from "./contextProviders/UnsavedChangesContext";
 import CommentsBadge from "./CommentsBadge";
 import { useMessageHandler } from "./hooks/useCentralizedMessageDispatcher";
 import { sanitizeQuillHtml } from "./utils";
+import type { ReactPlayerRef } from "./types/reactPlayerTypes";
 
 export interface CellListProps {
     spellCheckResponse: SpellCheckResponse | null;
@@ -74,6 +76,15 @@ export interface CellListProps {
     currentMilestoneIndex?: number;
     currentSubsectionIndex?: number;
     cellsPerPage?: number;
+    // Video player props
+    playerRef?: React.RefObject<ReactPlayerRef>;
+    shouldShowVideoPlayer?: boolean;
+    videoUrl?: string;
+    muteVideoAudioDuringPlayback?: boolean;
+    setMuteVideoAudioDuringPlayback?: (value: boolean) => void;
+    // Audio playback state from other webview type
+    isOtherTypeAudioPlaying?: boolean;
+    metadata?: CustomNotebookMetadata;
 }
 
 const DEBUG_ENABLED = false;
@@ -121,9 +132,16 @@ const CellList: React.FC<CellListProps> = ({
     backtranslationsMap = new Map(),
     isAuthenticated = false,
     milestoneIndex = null,
+    playerRef,
+    shouldShowVideoPlayer = false,
+    videoUrl,
+    muteVideoAudioDuringPlayback = true,
+    setMuteVideoAudioDuringPlayback,
     currentMilestoneIndex = 0,
     currentSubsectionIndex = 0,
     cellsPerPage = 50,
+    isOtherTypeAudioPlaying = false,
+    metadata,
 }) => {
     const numberOfEmptyCellsToRender = 1;
     const { unsavedChanges, toggleFlashingBorder } = useContext(UnsavedChangesContext);
@@ -731,6 +749,7 @@ const CellList: React.FC<CellListProps> = ({
                     cellChanged: true,
                     cellLabel: cellToOpen.cellLabel,
                     timestamps: cellToOpen.timestamps,
+                    cellAudioTimestamps: cellToOpen.audioTimestamps,
                 } as EditorCellContent);
                 vscode.postMessage({
                     command: "setCurrentIdToGlobalState",
@@ -782,6 +801,7 @@ const CellList: React.FC<CellListProps> = ({
                 cellChanged: true,
                 cellLabel: cellToOpen.cellLabel,
                 timestamps: cellToOpen.timestamps,
+                cellAudioTimestamps: cellToOpen.audioTimestamps,
             } as EditorCellContent);
 
             vscode.postMessage({
@@ -851,12 +871,16 @@ const CellList: React.FC<CellListProps> = ({
                                 unresolvedCommentsCount={cellCommentsCount.get(cellMarkers[0]) || 0}
                                 currentUsername={currentUsername || undefined}
                                 requiredValidations={requiredValidations}
+                                playerRef={playerRef}
+                                shouldShowVideoPlayer={shouldShowVideoPlayer}
+                                videoUrl={videoUrl}
                                 requiredAudioValidations={requiredAudioValidations}
                                 isAuthenticated={isAuthenticated}
                                 userAccessLevel={userAccessLevel}
                                 isAudioOnly={isAudioOnly}
                                 showInlineBacktranslations={showInlineBacktranslations}
                                 backtranslation={backtranslationsMap.get(cellMarkers[0])}
+                                isOtherTypeAudioPlaying={isOtherTypeAudioPlaying}
                             />
                         </span>
                     );
@@ -944,6 +968,10 @@ const CellList: React.FC<CellListProps> = ({
                             cellTimestamps={timestamps}
                             prevEndTime={workingTranslationUnits[i - 1]?.timestamps?.endTime}
                             nextStartTime={workingTranslationUnits[i + 1]?.timestamps?.startTime}
+                            prevCellId={workingTranslationUnits[i - 1]?.cellMarkers[0]}
+                            prevStartTime={workingTranslationUnits[i - 1]?.timestamps?.startTime}
+                            nextCellId={workingTranslationUnits[i + 1]?.cellMarkers[0]}
+                            nextEndTime={workingTranslationUnits[i + 1]?.timestamps?.endTime}
                             contentBeingUpdated={contentBeingUpdated}
                             setContentBeingUpdated={setContentBeingUpdated}
                             handleCloseEditor={handleCloseEditor}
@@ -962,6 +990,12 @@ const CellList: React.FC<CellListProps> = ({
                             vscode={vscode}
                             isSourceText={isSourceText}
                             isAuthenticated={isAuthenticated}
+                            playerRef={playerRef}
+                            videoUrl={videoUrl}
+                            shouldShowVideoPlayer={shouldShowVideoPlayer}
+                            metadata={metadata}
+                            muteVideoAudioDuringPlayback={muteVideoAudioDuringPlayback}
+                            setMuteVideoAudioDuringPlayback={setMuteVideoAudioDuringPlayback}
                         />
                     </span>
                 );
@@ -1026,6 +1060,10 @@ const CellList: React.FC<CellListProps> = ({
                                 isAudioOnly={isAudioOnly}
                                 showInlineBacktranslations={showInlineBacktranslations}
                                 backtranslation={backtranslationsMap.get(cellMarkers[0])}
+                                playerRef={playerRef}
+                                shouldShowVideoPlayer={shouldShowVideoPlayer}
+                                videoUrl={videoUrl}
+                                isOtherTypeAudioPlaying={isOtherTypeAudioPlaying}
                             />
                         </span>
                     );
@@ -1074,6 +1112,12 @@ const CellList: React.FC<CellListProps> = ({
         requiredAudioValidations,
         isAudioOnly,
         isAuthenticated,
+        muteVideoAudioDuringPlayback,
+        setMuteVideoAudioDuringPlayback,
+        metadata,
+        playerRef,
+        shouldShowVideoPlayer,
+        videoUrl,
     ]);
 
     // Fetch comments count for all visible cells (batched)
diff --git a/webviews/codex-webviews/src/CodexCellEditor/CodexCellEditor.tsx b/webviews/codex-webviews/src/CodexCellEditor/CodexCellEditor.tsx
index 9e9215c47..1717f8e03 100755
--- a/webviews/codex-webviews/src/CodexCellEditor/CodexCellEditor.tsx
+++ b/webviews/codex-webviews/src/CodexCellEditor/CodexCellEditor.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef, useMemo, useContext, useCallback } from "react";
-import ReactPlayer from "react-player";
 import Quill from "quill";
+import type { ReactPlayerRef } from "./types/reactPlayerTypes";
 import {
     QuillCellContent,
     EditorPostMessages,
@@ -23,7 +23,6 @@ import UnsavedChangesContext from "./contextProviders/UnsavedChangesContext";
 import SourceCellContext from "./contextProviders/SourceCellContext";
 import ScrollToContentContext from "./contextProviders/ScrollToContentContext";
 import DuplicateCellResolver from "./DuplicateCellResolver";
-import TimelineEditor from "./TimelineEditor";
 import VideoTimelineEditor from "./VideoTimelineEditor";
 
 import {
@@ -166,6 +165,7 @@ const CodexCellEditor: React.FC = () => {
     );
     const [isSourceText, setIsSourceText] = useState<boolean>(false);
     const [isMetadataModalOpen, setIsMetadataModalOpen] = useState<boolean>(false);
+    const [isOtherTypeAudioPlaying, setIsOtherTypeAudioPlaying] = useState<boolean>(false);
 
     // Track if user has manually navigated away from the highlighted chapter in source files
     const [hasManuallyNavigatedAway, setHasManuallyNavigatedAway] = useState<boolean>(false);
@@ -176,8 +176,9 @@ const CodexCellEditor: React.FC = () => {
         videoUrl: "", // FIXME: use attachments instead of videoUrl
     } as CustomNotebookMetadata);
     const [videoUrl, setVideoUrl] = useState<string>("");
-    const playerRef = useRef<ReactPlayer>(null);
+    const playerRef = useRef<ReactPlayerRef>(null);
     const [shouldShowVideoPlayer, setShouldShowVideoPlayer] = useState<boolean>(false);
+    const [muteVideoAudioDuringPlayback, setMuteVideoAudioDuringPlayback] = useState(true);
     const { setSourceCellMap } = useContext(SourceCellContext);
     const { setContentToScrollTo } = useContext(ScrollToContentContext);
 
@@ -1773,6 +1774,29 @@ const CodexCellEditor: React.FC = () => {
         registerQuillSpellChecker(Quill as any, vscode);
     }, []);
 
+    // Listen for audio state changes from other webview types
+    useMessageHandler(
+        "codexCellEditor-audioStateChanged",
+        (event: MessageEvent) => {
+            const message = event.data;
+            if (
+                message.command === "audioStateChanged" &&
+                message.destination === "webview" &&
+                message.content?.type === "audioPlaying"
+            ) {
+                const { webviewType, isPlaying } = message.content;
+                // If current webview is source and message indicates target is playing, or vice versa
+                if (
+                    (isSourceText && webviewType === "target") ||
+                    (!isSourceText && webviewType === "source")
+                ) {
+                    setIsOtherTypeAudioPlaying(isPlaying);
+                }
+            }
+        },
+        [isSourceText]
+    );
+
     const calculateTotalChapters = (units: QuillCellContent[]): number => {
         const sectionSet = new Set<string>();
         units.forEach((unit) => {
@@ -2654,7 +2678,7 @@ const CodexCellEditor: React.FC = () => {
             const startTime = parseTimestampFromCellId(cellId);
             if (startTime !== null) {
                 debug("video", `Seeking to ${startTime} + ${OFFSET_SECONDS} seconds`);
-                playerRef.current.seekTo(startTime + OFFSET_SECONDS, "seconds");
+                playerRef.current.seekTo?.(startTime + OFFSET_SECONDS, "seconds");
             }
         }
     }, [contentBeingUpdated, OFFSET_SECONDS]);
@@ -2693,7 +2717,15 @@ const CodexCellEditor: React.FC = () => {
     const translationUnitsWithCurrentEditorContent = useMemo(() => {
         return translationUnitsForSection?.map((unit) => {
             if (unit.cellMarkers[0] === contentBeingUpdated.cellMarkers?.[0]) {
-                return { ...unit, cellContent: contentBeingUpdated.cellContent };
+                const updatedUnit: QuillCellContent = {
+                    ...unit,
+                    cellContent: contentBeingUpdated.cellContent,
+                };
+                // Merge audio timestamps if they exist in contentBeingUpdated
+                if (contentBeingUpdated.cellAudioTimestamps) {
+                    updatedUnit.audioTimestamps = contentBeingUpdated.cellAudioTimestamps;
+                }
+                return updatedUnit;
             }
             return unit;
         });
@@ -3246,6 +3278,8 @@ const CodexCellEditor: React.FC = () => {
                             translationUnitsForSection={translationUnitsWithCurrentEditorContent}
                             vscode={vscode}
                             playerRef={playerRef}
+                            audioAttachments={audioAttachments}
+                            muteVideoWhenPlayingAudio={muteVideoAudioDuringPlayback}
                         />
                     </div>
                 )}
@@ -3310,6 +3344,13 @@ const CodexCellEditor: React.FC = () => {
                             currentMilestoneIndex={currentMilestoneIndex}
                             currentSubsectionIndex={currentSubsectionIndex}
                             cellsPerPage={cellsPerPage}
+                            playerRef={playerRef}
+                            shouldShowVideoPlayer={shouldShowVideoPlayer}
+                            videoUrl={videoUrl}
+                            isOtherTypeAudioPlaying={isOtherTypeAudioPlaying}
+                            metadata={metadata}
+                            muteVideoAudioDuringPlayback={muteVideoAudioDuringPlayback}
+                            setMuteVideoAudioDuringPlayback={setMuteVideoAudioDuringPlayback}
                         />
                     </div>
                 </div>
diff --git a/webviews/codex-webviews/src/CodexCellEditor/TextCellEditor-overrides.css b/webviews/codex-webviews/src/CodexCellEditor/TextCellEditor-overrides.css
index 61f001e5e..993cb345a 100644
--- a/webviews/codex-webviews/src/CodexCellEditor/TextCellEditor-overrides.css
+++ b/webviews/codex-webviews/src/CodexCellEditor/TextCellEditor-overrides.css
@@ -2,4 +2,22 @@
     white-space: pre-wrap;
     word-break: break-word;
     overflow-wrap: break-word;
-  }
\ No newline at end of file
+  }
+
+/* Hide slider handles on disabled sliders */
+[data-disabled][data-slot="slider"] [data-slot="slider-thumb"] {
+  display: none;
+}
+
+/* Orange styling for audio timestamp sliders */
+.audio-timestamp-slider [data-slot="slider-range"] {
+  background-color: #ff9500 !important;
+}
+
+.audio-timestamp-slider [data-slot="slider-thumb"] {
+  border-color: #ff9500 !important;
+}
+
+.audio-timestamp-slider [data-slot="slider-thumb"]:hover {
+  border-color: #ff8500 !important;
+}
diff --git a/webviews/codex-webviews/src/CodexCellEditor/TextCellEditor.tsx b/webviews/codex-webviews/src/CodexCellEditor/TextCellEditor.tsx
index c87fb93bc..f22397e7e 100644
--- a/webviews/codex-webviews/src/CodexCellEditor/TextCellEditor.tsx
+++ b/webviews/codex-webviews/src/CodexCellEditor/TextCellEditor.tsx
@@ -1,4 +1,4 @@
-import { useRef, useEffect, useState, useContext, useCallback } from "react";
+import { useRef, useEffect, useState, useContext, useCallback, useMemo } from "react";
 import {
     EditorCellContent,
     EditorPostMessages,
@@ -6,7 +6,9 @@ import {
     EditHistory,
     SpellCheckResponse,
     Timestamps,
+    CustomNotebookMetadata,
 } from "../../../../types";
+import type { ReactPlayerRef } from "./types/reactPlayerTypes";
 import Editor, { EditorHandles } from "./Editor";
 import { getCleanedHtml } from "./react-quill-spellcheck";
 import { CodexCellTypes } from "../../../../types/enums";
@@ -24,6 +26,7 @@ import SourceTextDisplay from "./SourceTextDisplay";
 import { AudioHistoryViewer } from "./AudioHistoryViewer";
 import { useMessageHandler } from "./hooks/useCentralizedMessageDispatcher";
 import { getCachedAudioDataUrl, setCachedAudioDataUrl } from "../lib/audioCache";
+import { globalAudioController } from "../lib/audioController";
 
 // ShadCN UI components
 import { Button } from "../components/ui/button";
@@ -83,6 +86,9 @@ import {
 } from "lucide-react";
 import { cn } from "../lib/utils";
 import CommentsBadge from "./CommentsBadge";
+import { Checkbox } from "../components/ui/checkbox";
+import MicrophoneIcon from "../components/ui/icons/MicrophoneIcon";
+import { Languages } from "lucide-react";
 
 // Define interface for saved backtranslation
 interface SavedBacktranslation {
@@ -126,6 +132,10 @@ interface CellEditorProps {
     footnoteOffset?: number;
     prevEndTime?: number;
     nextStartTime?: number;
+    prevCellId?: string;
+    prevStartTime?: number;
+    nextCellId?: string;
+    nextEndTime?: number;
     audioAttachments?: {
         [cellId: string]:
             | "available"
@@ -141,6 +151,12 @@ interface CellEditorProps {
     vscode?: any;
     isSourceText?: boolean;
     isAuthenticated?: boolean;
+    playerRef?: React.RefObject<ReactPlayerRef>;
+    videoUrl?: string;
+    shouldShowVideoPlayer?: boolean;
+    metadata?: CustomNotebookMetadata;
+    muteVideoAudioDuringPlayback?: boolean;
+    setMuteVideoAudioDuringPlayback?: (value: boolean) => void;
 }
 
 // Simple ISO-639-1 to ISO-639-3 mapping for common languages; default to 'eng'
@@ -241,6 +257,10 @@ const CellEditor: React.FC<CellEditorProps> = ({
     footnoteOffset = 1,
     prevEndTime,
     nextStartTime,
+    prevCellId,
+    prevStartTime,
+    nextCellId,
+    nextEndTime,
     audioAttachments,
     requiredValidations,
     requiredAudioValidations,
@@ -248,6 +268,12 @@ const CellEditor: React.FC<CellEditorProps> = ({
     vscode,
     isSourceText,
     isAuthenticated,
+    playerRef,
+    videoUrl,
+    shouldShowVideoPlayer,
+    metadata,
+    muteVideoAudioDuringPlayback: muteVideoAudioDuringPlaybackProp,
+    setMuteVideoAudioDuringPlayback: setMuteVideoAudioDuringPlaybackProp,
 }) => {
     const { setUnsavedChanges, showFlashingBorder, unsavedChanges } =
         useContext(UnsavedChangesContext);
@@ -329,14 +355,47 @@ const CellEditor: React.FC<CellEditorProps> = ({
     // Audio-related state
     const [audioBlob, setAudioBlob] = useState<Blob | null>(null);
     const [audioUrl, setAudioUrl] = useState<string | null>(null);
+    const [audioDuration, setAudioDuration] = useState<number | null>(null);
     // While awaiting provider response, avoid showing "No audio attached" to prevent flicker
     const [audioFetchPending, setAudioFetchPending] = useState<boolean>(true);
     const [isRecording, setIsRecording] = useState(false);
     const [mediaRecorder, setMediaRecorder] = useState<MediaRecorder | null>(null);
     const [recordingStatus, setRecordingStatus] = useState<string>("");
     const [isAudioSaving, setIsAudioSaving] = useState<boolean>(false);
+    const [countdown, setCountdown] = useState<number | null>(null);
+    const [recordingStartTime, setRecordingStartTime] = useState<number | null>(null);
+    const [recordingElapsedTime, setRecordingElapsedTime] = useState<number>(0);
     const audioSaveRequestIdRef = useRef<string | null>(null);
     const audioChunksRef = useRef<Blob[]>([]);
+    const countdownIntervalRef = useRef<NodeJS.Timeout | null>(null);
+    const recordingTimerRef = useRef<NodeJS.Timeout | null>(null);
+    const saveAudioToCellRef = useRef<((blob: Blob) => void) | null>(null);
+    // Refs for synchronized audio/video playback
+    const audioElementRef = useRef<HTMLAudioElement | null>(null);
+    const videoElementRef = useRef<HTMLVideoElement | null>(null);
+    const videoTimeUpdateHandlerRef = useRef<((e: Event) => void) | null>(null);
+    const audioTimeUpdateHandlerRef = useRef<((e: Event) => void) | null>(null);
+    const previousVideoMuteStateRef = useRef<boolean | null>(null);
+    // Refs for combined audio playback
+    const overlappingAudioUrlsRef = useRef<Map<string, string>>(new Map()); // Store blob URLs for cleanup
+    // Legacy refs kept for cleanup compatibility (will be cleared but not actively used)
+    const overlappingAudioElementsRef = useRef<Map<string, HTMLAudioElement>>(new Map());
+    const overlappingAudioHandlersRef = useRef<Map<string, (e: Event) => void>>(new Map());
+    const overlappingAudioDelaysRef = useRef<Map<string, number>>(new Map());
+    const overlappingAudioOffsetsRef = useRef<Map<string, number>>(new Map());
+    const audioBufferCacheRef = useRef<Map<string, AudioBuffer>>(new Map()); // Cache decoded AudioBuffers by blob URL
+    const [combinedAudioBlobKey, setCombinedAudioBlobKey] = useState(0); // Force recalculation when timestamps change
+    const [internalMuteVideoDuringPlayback, setInternalMuteVideoDuringPlayback] = useState(true);
+    const muteVideoAudioDuringPlayback =
+        muteVideoAudioDuringPlaybackProp ?? internalMuteVideoDuringPlayback;
+    const setMuteVideoAudioDuringPlayback =
+        setMuteVideoAudioDuringPlaybackProp ?? setInternalMuteVideoDuringPlayback;
+    const previousAudioTimestampValuesRef = useRef<[number, number] | null>(null);
+    const effectiveTimestampsRef = useRef<Timestamps | undefined>(undefined);
+    const effectiveAudioTimestampsRef = useRef<Timestamps | undefined>(undefined);
+    const contentBeingUpdatedRef = useRef<EditorCellContent>(contentBeingUpdated);
+    const [prevAudioTimestamps, setPrevAudioTimestamps] = useState<Timestamps | null>(null);
+    const [nextAudioTimestamps, setNextAudioTimestamps] = useState<Timestamps | null>(null);
     const [confirmingDiscard, setConfirmingDiscard] = useState(false);
     const [showRecorder, setShowRecorder] = useState(() => {
         try {
@@ -347,8 +406,10 @@ const CellEditor: React.FC<CellEditorProps> = ({
         }
     });
     const [isAudioLoading, setIsAudioLoading] = useState(false);
+    const [isPlayAudioLoading, setIsPlayAudioLoading] = useState(false);
     const [hasAudioHistory, setHasAudioHistory] = useState<boolean>(false);
     const [audioHistoryCount, setAudioHistoryCount] = useState<number>(0);
+    const [audioWarning, setAudioWarning] = useState<string | null>(null);
     const [currentSelectedAudioId, setCurrentSelectedAudioId] = useState<string | null>(null);
 
     // Transcription state
@@ -375,6 +436,8 @@ const CellEditor: React.FC<CellEditorProps> = ({
     const scrollTimeoutRef = useRef<number | null>(null);
     const scrollRafRef = useRef<number | null>(null);
 
+    const isSubtitlesType = metadata?.importerType === "subtitles";
+
     // Compute audio validation icon props once for this render (after audio state is declared)
     const { iconProps: audioValidationIconProps } = useAudioValidationStatus({
         cell: cell as any,
@@ -429,6 +492,20 @@ const CellEditor: React.FC<CellEditorProps> = ({
         };
     }, []);
 
+    // Cleanup recording timers on unmount
+    useEffect(() => {
+        return () => {
+            if (countdownIntervalRef.current) {
+                clearInterval(countdownIntervalRef.current);
+                countdownIntervalRef.current = null;
+            }
+            if (recordingTimerRef.current) {
+                clearInterval(recordingTimerRef.current);
+                recordingTimerRef.current = null;
+            }
+        };
+    }, []);
+
     // Effect to always derive audioUrl from audioBlob
     useEffect(() => {
         if (audioBlob) {
@@ -442,6 +519,341 @@ const CellEditor: React.FC<CellEditorProps> = ({
         }
     }, [audioBlob]);
 
+    // Calculate audio duration from audioBlob
+    useEffect(() => {
+        let cancelled = false;
+        const calculateDuration = async () => {
+            try {
+                if (!audioBlob) {
+                    setAudioDuration(null);
+                    return;
+                }
+
+                const arrayBuffer = await audioBlob.arrayBuffer();
+                if (cancelled) return;
+
+                // Use a low-priority timeout to avoid blocking the UI thread
+                setTimeout(async () => {
+                    try {
+                        if (cancelled) return;
+                        const audioContext = new (window.AudioContext ||
+                            (window as any).webkitAudioContext)();
+                        const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
+                        if (cancelled) return;
+                        if (isFinite(audioBuffer.duration) && audioBuffer.duration > 0) {
+                            setAudioDuration(audioBuffer.duration);
+                        } else {
+                            setAudioDuration(null);
+                        }
+                        try {
+                            audioContext.close();
+                        } catch {
+                            void 0;
+                        }
+                    } catch {
+                        // Ignore decode errors
+                        if (!cancelled) {
+                            setAudioDuration(null);
+                        }
+                    }
+                }, 100);
+            } catch {
+                // Ignore errors
+                if (!cancelled) {
+                    setAudioDuration(null);
+                }
+            }
+        };
+
+        calculateDuration();
+        return () => {
+            cancelled = true;
+        };
+    }, [audioBlob]);
+
+    // Actual recording function - called after countdown completes
+    const startActualRecording = useCallback(async () => {
+        if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
+            setRecordingStatus("Microphone not supported in this browser");
+            return;
+        }
+
+        try {
+            const stream = await navigator.mediaDevices.getUserMedia({
+                audio: {
+                    // Request high-quality capture suitable for later WAV conversion during export
+                    sampleRate: 48000,
+                    sampleSize: 24, // May be ignored by some browsers; best-effort
+                    channelCount: 1,
+                    echoCancellation: false,
+                    noiseSuppression: false,
+                    autoGainControl: false,
+                },
+            });
+
+            const mediaRecorderOptions: MediaRecorderOptions = {};
+            try {
+                if (typeof MediaRecorder !== "undefined") {
+                    if (MediaRecorder.isTypeSupported?.("audio/webm;codecs=opus")) {
+                        mediaRecorderOptions.mimeType = "audio/webm;codecs=opus";
+                    } else if (MediaRecorder.isTypeSupported?.("audio/webm")) {
+                        mediaRecorderOptions.mimeType = "audio/webm";
+                    }
+                }
+            } catch {
+                // no-op, fall back to default mimeType
+            }
+            // Increase bitrate for higher quality Opus encoding
+            mediaRecorderOptions.audioBitsPerSecond = 256000; // 256 kbps
+
+            const recorder = new MediaRecorder(stream, mediaRecorderOptions);
+
+            audioChunksRef.current = [];
+
+            recorder.ondataavailable = (e) => {
+                if (e.data.size > 0) {
+                    audioChunksRef.current.push(e.data);
+                }
+            };
+
+            recorder.onstart = () => {
+                setIsRecording(true);
+                setRecordingStatus("Recording...");
+                setRecordingStartTime(Date.now());
+                setRecordingElapsedTime(0);
+            };
+
+            recorder.onstop = () => {
+                setIsRecording(false);
+                setRecordingStartTime(null);
+                setRecordingElapsedTime(0);
+                // Keep Blob type simple to avoid downstream extension parsing issues
+                const blob = new Blob(audioChunksRef.current, { type: "audio/webm" });
+                setAudioBlob(blob);
+
+                // Clean up old URL if exists
+                if (audioUrl) {
+                    URL.revokeObjectURL(audioUrl);
+                }
+
+                const url = URL.createObjectURL(blob);
+                setAudioUrl(url);
+                setRecordingStatus("Recording complete");
+
+                // Stop all tracks to release microphone
+                stream.getTracks().forEach((track) => track.stop());
+
+                // Save audio to cell data
+                if (saveAudioToCellRef.current) {
+                    saveAudioToCellRef.current(blob);
+                }
+                setShowRecorder(false);
+            };
+
+            recorder.start();
+            setMediaRecorder(recorder);
+        } catch (err) {
+            setRecordingStatus("Microphone access denied");
+            console.error("Error accessing microphone:", err);
+            setCountdown(null);
+        }
+    }, [audioUrl]);
+
+    // Countdown timer effect - handles 3→2→1→0 countdown before recording starts
+    useEffect(() => {
+        if (countdown === null || countdown < 0) {
+            // Clean up interval if countdown is not active
+            if (countdownIntervalRef.current) {
+                clearInterval(countdownIntervalRef.current);
+                countdownIntervalRef.current = null;
+            }
+            return;
+        }
+
+        if (countdown === 0) {
+            // Countdown finished, start actual recording
+            if (countdownIntervalRef.current) {
+                clearInterval(countdownIntervalRef.current);
+                countdownIntervalRef.current = null;
+            }
+            setCountdown(null);
+            // Call the actual recording start function
+            startActualRecording();
+            return;
+        }
+
+        // Set up interval to decrement countdown every second
+        countdownIntervalRef.current = setInterval(() => {
+            setCountdown((prev) => {
+                if (prev === null || prev <= 0) {
+                    return null;
+                }
+                const next = prev - 1;
+                setRecordingStatus(next > 0 ? `Starting in ${next}...` : "Starting...");
+                return next;
+            });
+        }, 1000);
+
+        return () => {
+            if (countdownIntervalRef.current) {
+                clearInterval(countdownIntervalRef.current);
+                countdownIntervalRef.current = null;
+            }
+        };
+    }, [countdown, startActualRecording]);
+
+    // Recording elapsed time tracker - updates every 100ms while recording
+    useEffect(() => {
+        if (!isRecording || recordingStartTime === null) {
+            // Reset elapsed time when not recording
+            if (recordingTimerRef.current) {
+                clearInterval(recordingTimerRef.current);
+                recordingTimerRef.current = null;
+            }
+            setRecordingElapsedTime(0);
+            return;
+        }
+
+        // Update elapsed time every 100ms for smooth progress bar
+        recordingTimerRef.current = setInterval(() => {
+            const elapsed = (Date.now() - recordingStartTime) / 1000;
+            setRecordingElapsedTime(elapsed);
+        }, 100);
+
+        return () => {
+            if (recordingTimerRef.current) {
+                clearInterval(recordingTimerRef.current);
+                recordingTimerRef.current = null;
+            }
+        };
+    }, [isRecording, recordingStartTime]);
+
+    // Helper function to request audio timestamps for a cell
+    const requestCellAudioTimestamps = useCallback((cellId: string): Promise<Timestamps | null> => {
+        return new Promise((resolve) => {
+            let resolved = false;
+            const timeout = setTimeout(() => {
+                if (!resolved) {
+                    resolved = true;
+                    window.removeEventListener("message", handler);
+                    resolve(null);
+                }
+            }, 5000);
+
+            const handler = (event: MessageEvent) => {
+                const message = event.data;
+
+                if (
+                    message?.type === "providerSendsCellAudioTimestamps" &&
+                    message.content?.cellId === cellId
+                ) {
+                    if (!resolved) {
+                        resolved = true;
+                        clearTimeout(timeout);
+                        window.removeEventListener("message", handler);
+                        resolve(message.content.audioTimestamps || null);
+                    }
+                }
+            };
+
+            window.addEventListener("message", handler);
+            window.vscodeApi.postMessage({
+                command: "requestCellAudioTimestamps",
+                content: { cellId },
+            } as EditorPostMessages);
+        });
+    }, []);
+
+    // Fetch previous/next cell audio timestamps
+    useEffect(() => {
+        let cancelled = false;
+
+        const fetchAudioTimestamps = async () => {
+            const promises: Promise<void>[] = [];
+
+            if (prevCellId) {
+                promises.push(
+                    requestCellAudioTimestamps(prevCellId).then((timestamps) => {
+                        if (!cancelled) {
+                            setPrevAudioTimestamps(timestamps);
+                        }
+                    })
+                );
+            } else {
+                setPrevAudioTimestamps(null);
+            }
+
+            if (nextCellId) {
+                promises.push(
+                    requestCellAudioTimestamps(nextCellId).then((timestamps) => {
+                        if (!cancelled) {
+                            setNextAudioTimestamps(timestamps);
+                        }
+                    })
+                );
+            } else {
+                setNextAudioTimestamps(null);
+            }
+
+            await Promise.all(promises);
+        };
+
+        fetchAudioTimestamps();
+
+        return () => {
+            cancelled = true;
+        };
+    }, [prevCellId, nextCellId, requestCellAudioTimestamps]);
+
+    // Refresh adjacent cell audio timestamps when their audio attachment state changes
+    useEffect(() => {
+        let cancelled = false;
+
+        const refreshAdjacentTimestamps = async () => {
+            const promises: Promise<void>[] = [];
+
+            // Refresh previous cell timestamps if it has audio available
+            if (
+                prevCellId &&
+                (audioAttachments?.[prevCellId] === "available" ||
+                    audioAttachments?.[prevCellId] === "available-local" ||
+                    audioAttachments?.[prevCellId] === "available-pointer")
+            ) {
+                promises.push(
+                    requestCellAudioTimestamps(prevCellId).then((timestamps) => {
+                        if (!cancelled) {
+                            setPrevAudioTimestamps(timestamps);
+                        }
+                    })
+                );
+            }
+
+            // Refresh next cell timestamps if it has audio available
+            if (
+                nextCellId &&
+                (audioAttachments?.[nextCellId] === "available" ||
+                    audioAttachments?.[nextCellId] === "available-local" ||
+                    audioAttachments?.[nextCellId] === "available-pointer")
+            ) {
+                promises.push(
+                    requestCellAudioTimestamps(nextCellId).then((timestamps) => {
+                        if (!cancelled) {
+                            setNextAudioTimestamps(timestamps);
+                        }
+                    })
+                );
+            }
+
+            await Promise.all(promises);
+        };
+
+        refreshAdjacentTimestamps();
+
+        return () => {
+            cancelled = true;
+        };
+    }, [prevCellId, nextCellId, audioAttachments, requestCellAudioTimestamps]);
+
     useEffect(() => {
         if (showFlashingBorder && cellEditorRef.current) {
             debug("Scrolling to content in showFlashingBorder", {
@@ -461,9 +873,6 @@ const CellEditor: React.FC<CellEditorProps> = ({
 
     const [editableLabel, setEditableLabel] = useState(cellLabel || "");
     const [similarCells, setSimilarCells] = useState<SimilarCell[]>([]);
-    const [showSuggestions, setShowSuggestions] = useState(false);
-    const [cursorPosition, setCursorPosition] = useState(0);
-    const [activeSearchPosition, setActiveSearchPosition] = useState<number | null>(null);
     const [isEditorControlsExpanded, setIsEditorControlsExpanded] = useState(false);
     const [isPinned, setIsPinned] = useState(false);
     const [showAdvancedControls, setShowAdvancedControls] = useState(false);
@@ -535,6 +944,23 @@ const CellEditor: React.FC<CellEditorProps> = ({
                     },
                 };
                 window.vscodeApi.postMessage(messageContent);
+                // Optimistically clear staged timestamps - will be re-cleared by effect if needed
+                const { cellTimestamps, ...rest } = contentBeingUpdated;
+                setContentBeingUpdated(rest as EditorCellContent);
+            }
+            const audioTs = contentBeingUpdated.cellAudioTimestamps;
+            if (
+                audioTs &&
+                (typeof audioTs.startTime === "number" || typeof audioTs.endTime === "number")
+            ) {
+                const messageContent: EditorPostMessages = {
+                    command: "updateCellAudioTimestamps",
+                    content: {
+                        cellId: cellMarkers[0],
+                        timestamps: audioTs,
+                    },
+                };
+                window.vscodeApi.postMessage(messageContent);
             }
         }, 0);
     };
@@ -545,14 +971,907 @@ const CellEditor: React.FC<CellEditorProps> = ({
         typeof nextStartTime === "number" ? nextStartTime : Number.POSITIVE_INFINITY;
     const effectiveTimestamps: Timestamps | undefined =
         contentBeingUpdated.cellTimestamps ?? cellTimestamps;
+    const effectiveAudioTimestamps: Timestamps | undefined = useMemo(() => {
+        return (
+            contentBeingUpdated.cellAudioTimestamps ??
+            cell.audioTimestamps ??
+            (cell.data?.audioStartTime !== undefined || cell.data?.audioEndTime !== undefined
+                ? {
+                      startTime: cell.data.audioStartTime,
+                      endTime: cell.data.audioEndTime,
+                  }
+                : undefined)
+        );
+    }, [contentBeingUpdated.cellAudioTimestamps, cell.audioTimestamps, cell.data]);
+
+    // Keep refs updated so saveAudioToCell can read current state when updating audio timestamps
+    useEffect(() => {
+        effectiveTimestampsRef.current = effectiveTimestamps;
+    }, [effectiveTimestamps]);
+    useEffect(() => {
+        effectiveAudioTimestampsRef.current = effectiveAudioTimestamps;
+    }, [effectiveAudioTimestamps]);
+
+    useEffect(() => {
+        contentBeingUpdatedRef.current = contentBeingUpdated;
+    }, [contentBeingUpdated]);
+
+    // Reset previous audio timestamp values ref when effectiveAudioTimestamps changes
+    useEffect(() => {
+        if (effectiveAudioTimestamps) {
+            const start = effectiveAudioTimestamps.startTime ?? 0;
+            const end = effectiveAudioTimestamps.endTime ?? 0;
+            previousAudioTimestampValuesRef.current = [start, end];
+        } else {
+            previousAudioTimestampValuesRef.current = null;
+        }
+    }, [effectiveAudioTimestamps]);
+
+    // Initialize or sync audio timestamps when Timestamps tab is opened with current cell audio
+    useEffect(() => {
+        // Only run when Timestamps tab is active
+        if (activeTab !== "timestamps") {
+            return;
+        }
+
+        if (!audioBlob || !audioDuration || audioDuration <= 0) {
+            return;
+        }
+
+        // Stored audio timestamps duration (if any) — compare to current audio duration
+        const storedDuration = effectiveAudioTimestamps
+            ? (effectiveAudioTimestamps.endTime ?? 0) - (effectiveAudioTimestamps.startTime ?? 0)
+            : 0;
+        const durationMismatch = Math.abs(storedDuration - audioDuration) > 0.01;
+
+        // Initialize when no audio timestamps, or overwrite when current audio duration differs (e.g. new recording)
+        const shouldUpdate =
+            (!effectiveAudioTimestamps && !contentBeingUpdated.cellAudioTimestamps) ||
+            durationMismatch;
+
+        if (shouldUpdate) {
+            // Preserve previous audio start time when re-recording; otherwise use video start or 0
+            const startTime =
+                effectiveAudioTimestamps?.startTime ?? effectiveTimestamps?.startTime ?? 0;
+            const endTime = startTime + audioDuration;
+
+            const initialAudioTimestamps: Timestamps = {
+                startTime: Number(startTime.toFixed(3)),
+                endTime: Number(endTime.toFixed(3)),
+            };
+
+            setContentBeingUpdated({
+                ...contentBeingUpdated,
+                cellAudioTimestamps: initialAudioTimestamps,
+            });
+
+            // Immediately save audio timestamps to provider so adjacent cells can see them
+            const messageContent: EditorPostMessages = {
+                command: "updateCellAudioTimestamps",
+                content: {
+                    cellId: cellMarkers[0],
+                    timestamps: initialAudioTimestamps,
+                },
+            };
+            window.vscodeApi.postMessage(messageContent);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        activeTab,
+        audioBlob,
+        audioDuration,
+        effectiveAudioTimestamps,
+        effectiveTimestamps,
+        prevCellId,
+        nextCellId,
+        requestCellAudioTimestamps,
+    ]);
+
+    // Extended bounds for overlapping ranges
+    const extendedMinBound =
+        typeof prevStartTime === "number" ? prevStartTime : Math.max(0, previousEndBound);
+    const extendedMaxBound =
+        typeof nextEndTime === "number"
+            ? nextEndTime
+            : Number.isFinite(nextStartBound)
+            ? nextStartBound
+            : Math.max(
+                  effectiveTimestamps?.endTime ?? 0,
+                  (effectiveTimestamps?.startTime ?? 0) + 10
+              );
+
     const computedMaxBound = Number.isFinite(nextStartBound)
         ? nextStartBound
         : Math.max(effectiveTimestamps?.endTime ?? 0, (effectiveTimestamps?.startTime ?? 0) + 10);
 
+    const hasPrevAudioAvailable =
+        !!prevCellId &&
+        (audioAttachments?.[prevCellId] === "available" ||
+            audioAttachments?.[prevCellId] === "available-local" ||
+            audioAttachments?.[prevCellId] === "available-pointer");
+    const hasNextAudioAvailable =
+        !!nextCellId &&
+        (audioAttachments?.[nextCellId] === "available" ||
+            audioAttachments?.[nextCellId] === "available-local" ||
+            audioAttachments?.[nextCellId] === "available-pointer");
+    const canPlayAudioWithVideo =
+        Boolean(audioBlob) || hasPrevAudioAvailable || hasNextAudioAvailable;
+
+    // Helper function to request audio blob for a cell
+    const requestAudioBlob = useCallback((cellId: string): Promise<Blob | null> => {
+        return new Promise((resolve) => {
+            let resolved = false;
+            const timeout = setTimeout(() => {
+                if (!resolved) {
+                    resolved = true;
+                    window.removeEventListener("message", handler);
+                    resolve(null);
+                }
+            }, 5000);
+
+            const handler = (event: MessageEvent) => {
+                const message = event.data;
+                if (
+                    message?.type === "providerSendsAudioData" &&
+                    message.content?.cellId === cellId
+                ) {
+                    if (!resolved) {
+                        resolved = true;
+                        clearTimeout(timeout);
+                        window.removeEventListener("message", handler);
+                        if (message.content.audioData) {
+                            fetch(message.content.audioData)
+                                .then((res) => res.blob())
+                                .then((blob) => resolve(blob))
+                                .catch(() => resolve(null));
+                        } else {
+                            resolve(null);
+                        }
+                    }
+                }
+            };
+
+            window.addEventListener("message", handler);
+            window.vscodeApi.postMessage({
+                command: "requestAudioForCell",
+                content: { cellId },
+            } as EditorPostMessages);
+        });
+    }, []);
+
+    // Helper function to clean up all overlapping audio (simplified - mainly for URL cleanup)
+    const cleanupOverlappingAudio = useCallback(() => {
+        // Clean up any remaining blob URLs
+        overlappingAudioUrlsRef.current.forEach((url) => {
+            URL.revokeObjectURL(url);
+        });
+        overlappingAudioUrlsRef.current.clear();
+        overlappingAudioElementsRef.current.clear();
+        overlappingAudioHandlersRef.current.clear();
+        overlappingAudioDelaysRef.current.clear();
+        overlappingAudioOffsetsRef.current.clear();
+    }, []);
+
+    /**
+     * Convert AudioBuffer to WAV format blob
+     */
+    const audioBufferToWav = useCallback((buffer: AudioBuffer): ArrayBuffer => {
+        const length = buffer.length;
+        const numberOfChannels = buffer.numberOfChannels;
+        const sampleRate = buffer.sampleRate;
+        const arrayBuffer = new ArrayBuffer(44 + length * numberOfChannels * 2);
+        const view = new DataView(arrayBuffer);
+
+        // WAV header
+        const writeString = (offset: number, string: string) => {
+            for (let i = 0; i < string.length; i++) {
+                view.setUint8(offset + i, string.charCodeAt(i));
+            }
+        };
+
+        let offset = 0;
+        writeString(offset, "RIFF");
+        offset += 4;
+        view.setUint32(offset, 36 + length * numberOfChannels * 2, true);
+        offset += 4;
+        writeString(offset, "WAVE");
+        offset += 4;
+        writeString(offset, "fmt ");
+        offset += 4;
+        view.setUint32(offset, 16, true);
+        offset += 4;
+        view.setUint16(offset, 1, true);
+        offset += 2;
+        view.setUint16(offset, numberOfChannels, true);
+        offset += 2;
+        view.setUint32(offset, sampleRate, true);
+        offset += 4;
+        view.setUint32(offset, sampleRate * numberOfChannels * 2, true);
+        offset += 4;
+        view.setUint16(offset, numberOfChannels * 2, true);
+        offset += 2;
+        view.setUint16(offset, 16, true);
+        offset += 2;
+        writeString(offset, "data");
+        offset += 4;
+        view.setUint32(offset, length * numberOfChannels * 2, true);
+        offset += 4;
+
+        // Convert float samples to 16-bit PCM
+        for (let i = 0; i < length; i++) {
+            for (let channel = 0; channel < numberOfChannels; channel++) {
+                const sample = Math.max(-1, Math.min(1, buffer.getChannelData(channel)[i]));
+                view.setInt16(offset, sample < 0 ? sample * 0x8000 : sample * 0x7fff, true);
+                offset += 2;
+            }
+        }
+
+        return arrayBuffer;
+    }, []);
+
+    /**
+     * Combine multiple audio segments into a single audio blob
+     * Uses Web Audio API to decode, extract portions, and concatenate audio
+     */
+    const combineAudioSegments = useCallback(
+        async (
+            segments: Array<{
+                blob: Blob;
+                startTime: number; // When this segment should start in the final audio (relative to timeline start)
+                offsetInAudio: number; // Offset within the source audio blob to start from
+                duration: number; // Duration to extract from the source audio
+            }>,
+            totalDuration: number, // Total duration of the final combined audio
+            sampleRate: number = 44100
+        ): Promise<Blob> => {
+            const audioContext = new (window.AudioContext || (window as any).webkitAudioContext)({
+                sampleRate,
+            });
+
+            // Create a buffer for the final combined audio
+            const totalSamples = Math.ceil(totalDuration * sampleRate);
+            const combinedBuffer = audioContext.createBuffer(1, totalSamples, sampleRate);
+            const combinedData = combinedBuffer.getChannelData(0);
+
+            // Process each segment
+            for (let segIndex = 0; segIndex < segments.length; segIndex++) {
+                const segment = segments[segIndex];
+                try {
+                    // Check cache first - use blob size + first few bytes as key
+                    let audioBuffer: AudioBuffer | undefined;
+                    const blobKey = `${segment.blob.size}-${segment.blob.type}`;
+
+                    // Try to get from cache
+                    audioBuffer = audioBufferCacheRef.current.get(blobKey);
+
+                    if (!audioBuffer) {
+                        // Decode the audio blob
+                        const arrayBuffer = await segment.blob.arrayBuffer();
+                        audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
+                        // Cache it
+                        audioBufferCacheRef.current.set(blobKey, audioBuffer);
+                    }
+
+                    // Use the actual sample rate from the decoded audio buffer
+                    const sourceSampleRate = audioBuffer.sampleRate;
+
+                    // Calculate where this segment should be placed in the combined buffer (using target sample rate)
+                    const startSample = Math.floor(segment.startTime * sampleRate);
+
+                    // Calculate source audio positions using the source audio's sample rate
+                    const sourceStartSample = Math.floor(segment.offsetInAudio * sourceSampleRate);
+                    const sourceDurationSamples = Math.floor(segment.duration * sourceSampleRate);
+                    const sourceEndSample = Math.min(
+                        sourceStartSample + sourceDurationSamples,
+                        audioBuffer.length
+                    );
+                    const actualSourceSamples = sourceEndSample - sourceStartSample;
+
+                    // Calculate how many samples we need in the combined buffer (using target sample rate)
+                    const targetDurationSamples = Math.floor(segment.duration * sampleRate);
+                    const segmentSamples = Math.min(
+                        targetDurationSamples,
+                        totalSamples - startSample
+                    );
+
+                    // Extract the portion we need from the source audio
+                    const sourceData = audioBuffer.getChannelData(0);
+
+                    // Mix the audio data into the combined buffer with sample rate conversion
+                    if (sourceSampleRate === sampleRate) {
+                        // Same sample rate - direct mix
+                        for (let i = 0; i < segmentSamples && startSample + i < totalSamples; i++) {
+                            const sourceIndex = sourceStartSample + i;
+                            if (sourceIndex < sourceData.length && sourceIndex < sourceEndSample) {
+                                // Add to existing value to mix overlapping segments
+                                combinedData[startSample + i] += sourceData[sourceIndex];
+                            }
+                        }
+                    } else {
+                        // Different sample rate - resample using linear interpolation
+                        const ratio = sourceSampleRate / sampleRate;
+                        for (let i = 0; i < segmentSamples && startSample + i < totalSamples; i++) {
+                            const sourceIndexFloat = sourceStartSample + i * ratio;
+                            const sourceIndex = Math.floor(sourceIndexFloat);
+                            const nextIndex = Math.min(sourceIndex + 1, sourceEndSample - 1);
+
+                            if (sourceIndex < sourceData.length && sourceIndex < sourceEndSample) {
+                                let sampleValue: number;
+                                if (
+                                    nextIndex > sourceIndex &&
+                                    nextIndex < sourceEndSample &&
+                                    sourceIndexFloat !== sourceIndex
+                                ) {
+                                    // Linear interpolation
+                                    const fraction = sourceIndexFloat - sourceIndex;
+                                    sampleValue =
+                                        sourceData[sourceIndex] * (1 - fraction) +
+                                        sourceData[nextIndex] * fraction;
+                                } else {
+                                    // No interpolation needed (exact match or at boundary)
+                                    sampleValue = sourceData[sourceIndex];
+                                }
+                                // Add to existing value to mix overlapping segments
+                                combinedData[startSample + i] += sampleValue;
+                            }
+                        }
+                    }
+                } catch (error) {
+                    console.warn("Error processing audio segment:", error);
+                    // Continue with other segments even if one fails
+                }
+            }
+
+            // Normalize the audio to prevent clipping when multiple segments overlap
+            let maxAmplitude = 0;
+            for (let i = 0; i < totalSamples; i++) {
+                const absValue = Math.abs(combinedData[i]);
+                if (absValue > maxAmplitude) {
+                    maxAmplitude = absValue;
+                }
+            }
+
+            // If the maximum amplitude exceeds 1.0, normalize to prevent clipping
+            if (maxAmplitude > 1.0) {
+                const normalizationFactor = 1.0 / maxAmplitude;
+                for (let i = 0; i < totalSamples; i++) {
+                    combinedData[i] *= normalizationFactor;
+                }
+            }
+
+            // Convert the combined buffer back to a blob
+            const wavBuffer = audioBufferToWav(combinedBuffer);
+            return new Blob([wavBuffer], { type: "audio/wav" });
+        },
+        [audioBufferToWav]
+    );
+
+    // Memoized combined audio blob - combines current cell + overlapping segments
+    // Created on-demand in handlePlayAudioWithVideo and cached
+    const combinedAudioBlobRef = useRef<Blob | null>(null);
+    const combinedAudioBlobKeyRef = useRef<string>("");
+
+    // Generate a key for the current audio configuration to detect changes
+    const getCombinedAudioKey = useCallback(() => {
+        const startTime = effectiveTimestamps?.startTime;
+        const endTime = effectiveTimestamps?.endTime;
+        const audioStart = effectiveAudioTimestamps?.startTime;
+        const audioEnd = effectiveAudioTimestamps?.endTime;
+        const prevAudioStart = prevAudioTimestamps?.startTime ?? prevStartTime;
+        const prevAudioEnd = prevAudioTimestamps?.endTime ?? prevEndTime;
+        const nextAudioStart = nextAudioTimestamps?.startTime ?? nextStartTime;
+        const nextAudioEnd = nextAudioTimestamps?.endTime ?? nextEndTime;
+        return `${audioBlob ? "hasCurrent" : "noCurrent"}-${prevCellId || "none"}-${
+            nextCellId || "none"
+        }-${startTime}-${endTime}-${audioStart}-${audioEnd}-${prevAudioStart}-${prevAudioEnd}-${nextAudioStart}-${nextAudioEnd}-${combinedAudioBlobKey}`;
+    }, [
+        audioBlob,
+        prevCellId,
+        nextCellId,
+        effectiveTimestamps,
+        effectiveAudioTimestamps,
+        prevStartTime,
+        prevEndTime,
+        prevAudioTimestamps,
+        nextStartTime,
+        nextEndTime,
+        nextAudioTimestamps,
+        combinedAudioBlobKey,
+    ]);
+
+    // Debounced handler to invalidate combined audio blob cache when timestamps change
+    const debouncedInvalidateCombinedAudio = useMemo(() => {
+        let timeoutId: NodeJS.Timeout | null = null;
+        return () => {
+            if (timeoutId) {
+                clearTimeout(timeoutId);
+            }
+            timeoutId = setTimeout(() => {
+                // Invalidate cache by updating the key
+                setCombinedAudioBlobKey((prev) => prev + 1);
+                combinedAudioBlobRef.current = null;
+                combinedAudioBlobKeyRef.current = "";
+            }, 2000); // 2 second debounce
+        };
+    }, []);
+
+    // Handler to play audio blob with synchronized video playback
+    const handlePlayAudioWithVideo = useCallback(async () => {
+        // Validate prerequisites
+        const startTime = effectiveTimestamps?.startTime;
+        const endTime = effectiveTimestamps?.endTime;
+
+        if (startTime === undefined || endTime === undefined) {
+            console.warn("Timestamps are not available");
+            return;
+        }
+
+        if (endTime <= startTime) {
+            console.warn("Invalid timestamps: endTime must be greater than startTime");
+            return;
+        }
+
+        setIsPlayAudioLoading(true);
+        try {
+            // Clean up any existing playback
+            if (audioElementRef.current) {
+                if (audioTimeUpdateHandlerRef.current) {
+                    audioElementRef.current.removeEventListener(
+                        "timeupdate",
+                        audioTimeUpdateHandlerRef.current
+                    );
+                    audioTimeUpdateHandlerRef.current = null;
+                }
+                const currentUrl = overlappingAudioUrlsRef.current.get("combined");
+                if (currentUrl) {
+                    URL.revokeObjectURL(currentUrl);
+                    overlappingAudioUrlsRef.current.delete("combined");
+                }
+                audioElementRef.current.pause();
+                audioElementRef.current.src = "";
+                audioElementRef.current = null;
+            }
+
+            if (videoElementRef.current && videoTimeUpdateHandlerRef.current) {
+                videoElementRef.current.removeEventListener(
+                    "timeupdate",
+                    videoTimeUpdateHandlerRef.current
+                );
+                videoTimeUpdateHandlerRef.current = null;
+            }
+
+            // Collect all audio segments that need to be combined
+            const totalDuration = endTime - startTime;
+            const segments: Array<{
+                blob: Blob;
+                startTime: number;
+                offsetInAudio: number;
+                duration: number;
+            }> = [];
+
+            // Check if we have a cached combined blob for this configuration
+            const currentKey = getCombinedAudioKey();
+            let combinedBlob = combinedAudioBlobRef.current;
+
+            if (!combinedBlob || combinedAudioBlobKeyRef.current !== currentKey) {
+                // Need to create new combined blob
+                // Collect segments
+
+                // Current cell audio
+                if (audioBlob) {
+                    const resolvedAudioStartTime = effectiveAudioTimestamps?.startTime ?? startTime;
+                    const resolvedAudioEndTime = effectiveAudioTimestamps?.endTime ?? endTime;
+                    const playStartTime = Math.max(resolvedAudioStartTime, startTime);
+                    const playEndTime = Math.min(resolvedAudioEndTime, endTime);
+
+                    if (playEndTime > playStartTime) {
+                        const offsetInAudio = playStartTime - resolvedAudioStartTime;
+                        const duration = playEndTime - playStartTime;
+                        const startTimeInCombined = playStartTime - startTime;
+
+                        segments.push({
+                            blob: audioBlob,
+                            startTime: startTimeInCombined,
+                            offsetInAudio,
+                            duration,
+                        });
+                    }
+                }
+
+                // Previous cell audio - use audio timestamps if available, fallback to video timestamps
+                if (prevCellId) {
+                    const prevAudioStart = prevAudioTimestamps?.startTime ?? prevStartTime;
+                    const prevAudioEnd = prevAudioTimestamps?.endTime ?? prevEndTime;
+
+                    if (
+                        typeof prevAudioStart === "number" &&
+                        typeof prevAudioEnd === "number" &&
+                        startTime < prevAudioEnd
+                    ) {
+                        const prevBlob = await requestAudioBlob(prevCellId);
+                        if (prevBlob) {
+                            const playStartTime = Math.max(prevAudioStart, startTime);
+                            const playEndTime = Math.min(prevAudioEnd, endTime);
+
+                            if (playEndTime > playStartTime) {
+                                const offsetInAudio = playStartTime - prevAudioStart;
+                                const duration = playEndTime - playStartTime;
+                                const startTimeInCombined = playStartTime - startTime;
+
+                                segments.push({
+                                    blob: prevBlob,
+                                    startTime: startTimeInCombined,
+                                    offsetInAudio,
+                                    duration,
+                                });
+                            }
+                        }
+                    }
+                }
+
+                // Next cell audio - use audio timestamps if available, fallback to video timestamps
+                if (nextCellId) {
+                    const nextAudioStart = nextAudioTimestamps?.startTime ?? nextStartTime;
+                    const nextAudioEnd = nextAudioTimestamps?.endTime ?? nextEndTime;
+
+                    if (
+                        typeof nextAudioStart === "number" &&
+                        typeof nextAudioEnd === "number" &&
+                        endTime > nextAudioStart
+                    ) {
+                        const nextBlob = await requestAudioBlob(nextCellId);
+                        if (nextBlob) {
+                            const playStartTime = Math.max(nextAudioStart, startTime);
+                            const playEndTime = Math.min(nextAudioEnd, endTime);
+
+                            if (playEndTime > playStartTime) {
+                                const offsetInAudio = playStartTime - nextAudioStart;
+                                const duration = playEndTime - playStartTime;
+                                const startTimeInCombined = playStartTime - startTime;
+
+                                segments.push({
+                                    blob: nextBlob,
+                                    startTime: startTimeInCombined,
+                                    offsetInAudio,
+                                    duration,
+                                });
+                            }
+                        }
+                    }
+                }
+
+                // Combine segments if we have any
+                if (segments.length > 0) {
+                    try {
+                        combinedBlob = await combineAudioSegments(segments, totalDuration);
+                        combinedAudioBlobRef.current = combinedBlob;
+                        combinedAudioBlobKeyRef.current = currentKey;
+                        setAudioWarning(null);
+                    } catch (error) {
+                        console.error("Error combining audio segments:", error);
+                        combinedBlob = null;
+                    }
+                } else {
+                    setAudioWarning("No audio available in the current video timestamp range");
+                    return;
+                }
+            }
+
+            if (!combinedBlob) {
+                console.warn("No combined audio blob available");
+                return;
+            }
+
+            // Helper function to clean up all audio and video
+            const cleanupAll = () => {
+                if (audioElementRef.current) {
+                    const audioToClean = audioElementRef.current;
+                    if (audioTimeUpdateHandlerRef.current) {
+                        audioToClean.removeEventListener(
+                            "timeupdate",
+                            audioTimeUpdateHandlerRef.current
+                        );
+                        audioTimeUpdateHandlerRef.current = null;
+                    }
+                    const combinedUrl = overlappingAudioUrlsRef.current.get("combined");
+                    if (combinedUrl) {
+                        URL.revokeObjectURL(combinedUrl);
+                        overlappingAudioUrlsRef.current.delete("combined");
+                    }
+                    audioToClean.pause();
+                    audioToClean.src = "";
+                    audioElementRef.current = null;
+                    // Release so globalAudioController clears current; otherwise VideoPlayer
+                    // play later thinks "other audio" is still playing and skips cell overlay audio.
+                    globalAudioController.release(audioToClean);
+                }
+
+                // Restore video mute state and clean up video
+                if (videoElementRef.current) {
+                    if (previousVideoMuteStateRef.current !== null) {
+                        videoElementRef.current.muted = previousVideoMuteStateRef.current;
+                        previousVideoMuteStateRef.current = null;
+                    }
+                    if (videoTimeUpdateHandlerRef.current) {
+                        videoElementRef.current.removeEventListener(
+                            "timeupdate",
+                            videoTimeUpdateHandlerRef.current
+                        );
+                        videoTimeUpdateHandlerRef.current = null;
+                    }
+                    videoElementRef.current.pause();
+                    videoElementRef.current = null;
+                }
+            };
+
+            // Create single audio element from combined blob
+            const audioUrl = URL.createObjectURL(combinedBlob);
+            overlappingAudioUrlsRef.current.set("combined", audioUrl);
+            const audio = new Audio(audioUrl);
+            audioElementRef.current = audio;
+
+            // Set up audio event handlers
+            audio.onended = () => {
+                if (!videoElementRef.current) {
+                    cleanupAll();
+                }
+            };
+            audio.onerror = () => {
+                const error = audio.error;
+                // Only log if it's a real error (not just unsupported format - code 4)
+                // MediaError codes: 1=ABORTED, 2=NETWORK, 3=DECODE, 4=SRC_NOT_SUPPORTED
+                if (error && error.code !== 4) {
+                    const errorMessage = error.message
+                        ? `Error loading combined audio: ${error.message}`
+                        : "Error loading combined audio";
+                    console.warn(errorMessage);
+                }
+            };
+
+            // Set up timeupdate listener to stop at endTime
+            const audioTimeUpdateHandler = (e: Event) => {
+                const target = e.target as HTMLAudioElement;
+                if (target.currentTime >= totalDuration) {
+                    target.pause();
+                    if (audioTimeUpdateHandlerRef.current) {
+                        target.removeEventListener("timeupdate", audioTimeUpdateHandlerRef.current);
+                        audioTimeUpdateHandlerRef.current = null;
+                    }
+                    cleanupAll();
+                }
+            };
+
+            audioTimeUpdateHandlerRef.current = audioTimeUpdateHandler;
+            audio.addEventListener("timeupdate", audioTimeUpdateHandler);
+
+            // Wait for audio to be ready
+            await new Promise<void>((resolve, reject) => {
+                const handleLoadedMetadata = () => {
+                    audio.removeEventListener("loadedmetadata", handleLoadedMetadata);
+                    audio.removeEventListener("error", handleError);
+                    resolve();
+                };
+
+                const handleError = () => {
+                    audio.removeEventListener("loadedmetadata", handleLoadedMetadata);
+                    audio.removeEventListener("error", handleError);
+                    const error = audio.error;
+                    const errorMessage = error?.message || "Error loading combined audio";
+                    reject(new Error(errorMessage));
+                };
+
+                if (audio.readyState >= HTMLMediaElement.HAVE_METADATA) {
+                    handleLoadedMetadata();
+                } else {
+                    audio.addEventListener("loadedmetadata", handleLoadedMetadata);
+                    audio.addEventListener("error", handleError);
+                }
+            });
+
+            // Handle video playback if available
+            if (
+                shouldShowVideoPlayer &&
+                videoUrl &&
+                playerRef?.current &&
+                startTime !== undefined &&
+                endTime !== undefined
+            ) {
+                try {
+                    let videoElement: HTMLVideoElement | null = null;
+                    let seeked = false;
+
+                    // First try seekTo method if available
+                    if (typeof playerRef.current.seekTo === "function") {
+                        playerRef.current.seekTo(startTime, "seconds");
+                        seeked = true;
+                    }
+
+                    // Try to find the video element
+                    const internalPlayer = playerRef.current.getInternalPlayer?.();
+
+                    if (internalPlayer instanceof HTMLVideoElement) {
+                        videoElement = internalPlayer;
+                        if (!seeked) {
+                            videoElement.currentTime = startTime;
+                            seeked = true;
+                        }
+                    } else if (internalPlayer && typeof internalPlayer === "object") {
+                        // Try different ways to access the video element
+                        const foundVideo =
+                            (internalPlayer as any).querySelector?.("video") ||
+                            (internalPlayer as any).video ||
+                            internalPlayer;
+
+                        if (foundVideo instanceof HTMLVideoElement) {
+                            videoElement = foundVideo;
+                            if (!seeked) {
+                                videoElement.currentTime = startTime;
+                                seeked = true;
+                            }
+                        }
+                    }
+
+                    // Last resort: Try to find video element in the DOM
+                    if (!videoElement && playerRef.current) {
+                        const wrapper = playerRef.current as any;
+                        const foundVideo =
+                            wrapper.querySelector?.("video") ||
+                            wrapper.parentElement?.querySelector?.("video");
+
+                        if (foundVideo instanceof HTMLVideoElement) {
+                            videoElement = foundVideo;
+                            if (!seeked) {
+                                videoElement.currentTime = startTime;
+                                seeked = true;
+                            }
+                        }
+                    }
+
+                    // If we found the video element, mute it and set up playback
+                    if (videoElement) {
+                        videoElementRef.current = videoElement;
+                        previousVideoMuteStateRef.current = videoElement.muted;
+                        // Only mute if checkbox is checked
+                        videoElement.muted = muteVideoAudioDuringPlayback;
+
+                        // Check if we're already past the end time (shouldn't happen, but be safe)
+                        if (videoElement.currentTime >= endTime) {
+                            // Already past end time, don't play
+                            videoElement.pause();
+                            cleanupAll();
+                        } else {
+                            // Set up timeupdate listener to pause at endTime
+                            const timeUpdateHandler = (e: Event) => {
+                                const target = e.target as HTMLVideoElement;
+                                if (target.currentTime >= endTime) {
+                                    target.pause();
+                                    if (videoTimeUpdateHandlerRef.current) {
+                                        target.removeEventListener(
+                                            "timeupdate",
+                                            videoTimeUpdateHandlerRef.current
+                                        );
+                                        videoTimeUpdateHandlerRef.current = null;
+                                    }
+                                    cleanupAll();
+                                }
+                            };
+
+                            // Start video playback first, then set up the handler
+                            // This prevents the handler from firing and pausing before play() resolves
+                            try {
+                                await videoElement.play();
+
+                                // Only set up the handler after play() succeeds
+                                // This prevents race conditions where pause() interrupts play()
+                                videoTimeUpdateHandlerRef.current = timeUpdateHandler;
+                                videoElement.addEventListener("timeupdate", timeUpdateHandler);
+                            } catch (playError) {
+                                // Suppress AbortError warnings - these are expected when pause() interrupts play()
+                                // This can happen if cleanup is called while play() is pending
+                                if (
+                                    playError instanceof Error &&
+                                    playError.name !== "AbortError" &&
+                                    playError.name !== "NotAllowedError"
+                                ) {
+                                    console.warn("Video play() failed:", playError);
+                                }
+                            }
+                        }
+                    }
+                } catch (error) {
+                    console.error("Error setting up video playback:", error);
+                }
+            }
+
+            // Play the combined audio using globalAudioController to prevent duplicate playback
+            // This ensures useMultiCellAudioPlayback knows audio is already playing
+            try {
+                await globalAudioController.playExclusive(audio);
+            } catch (playError) {
+                if (
+                    playError instanceof Error &&
+                    playError.name !== "AbortError" &&
+                    playError.name !== "NotAllowedError"
+                ) {
+                    console.error("Error playing combined audio:", playError);
+                    cleanupAll();
+                }
+            }
+        } finally {
+            setIsPlayAudioLoading(false);
+        }
+    }, [
+        audioBlob,
+        effectiveTimestamps,
+        effectiveAudioTimestamps,
+        shouldShowVideoPlayer,
+        videoUrl,
+        playerRef,
+        muteVideoAudioDuringPlayback,
+        prevCellId,
+        prevStartTime,
+        prevEndTime,
+        prevAudioTimestamps,
+        nextCellId,
+        nextStartTime,
+        nextEndTime,
+        nextAudioTimestamps,
+        requestAudioBlob,
+        combineAudioSegments,
+        getCombinedAudioKey,
+    ]);
+
     useEffect(() => {
         setEditableLabel(cellLabel || "");
     }, [cellLabel]);
 
+    // Cleanup audio/video playback on unmount or when cell changes
+    useEffect(() => {
+        // Capture refs for cleanup
+        const audioElement = audioElementRef.current;
+        const audioHandler = audioTimeUpdateHandlerRef.current;
+        const audioUrls = overlappingAudioUrlsRef.current;
+        const audioBufferCache = audioBufferCacheRef.current;
+
+        return () => {
+            // Clean up audio element
+            if (audioElement) {
+                if (audioHandler) {
+                    audioElement.removeEventListener("timeupdate", audioHandler);
+                }
+                const combinedUrl = audioUrls.get("combined");
+                if (combinedUrl) {
+                    URL.revokeObjectURL(combinedUrl);
+                    audioUrls.delete("combined");
+                }
+                audioElement.pause();
+                audioElement.src = "";
+                globalAudioController.release(audioElement);
+            }
+            // Clear combined audio blob cache
+            combinedAudioBlobRef.current = null;
+            combinedAudioBlobKeyRef.current = "";
+            // Clear audio buffer cache when cell changes
+            audioBufferCache.clear();
+
+            // Clean up video element listeners and restore mute state
+            if (videoElementRef.current) {
+                if (videoTimeUpdateHandlerRef.current) {
+                    videoElementRef.current.removeEventListener(
+                        "timeupdate",
+                        videoTimeUpdateHandlerRef.current
+                    );
+                    videoTimeUpdateHandlerRef.current = null;
+                }
+                if (previousVideoMuteStateRef.current !== null) {
+                    videoElementRef.current.muted = previousVideoMuteStateRef.current;
+                    previousVideoMuteStateRef.current = null;
+                }
+                videoElementRef.current = null;
+            }
+        };
+    }, [cellMarkers]);
+
     // Fetch comments count for this cell
     // Comments count now handled by CellList.tsx batched requests
 
@@ -765,6 +2084,45 @@ const CellEditor: React.FC<CellEditorProps> = ({
         setUnsavedChanges,
     ]);
 
+    // Clear staged timestamps when prop updates to match (after successful save)
+    useEffect(() => {
+        const staged = contentBeingUpdated.cellTimestamps;
+        const prop = cellTimestamps;
+
+        // Only clear if we have staged timestamps and they match the prop
+        if (staged && prop) {
+            const startMatch = (staged.startTime ?? undefined) === (prop.startTime ?? undefined);
+            const endMatch = (staged.endTime ?? undefined) === (prop.endTime ?? undefined);
+
+            if (startMatch && endMatch) {
+                // Timestamps match - clear staged changes
+                const { cellTimestamps, ...rest } = contentBeingUpdated;
+                setContentBeingUpdated(rest as EditorCellContent);
+            }
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [cellTimestamps, contentBeingUpdated.cellTimestamps]);
+
+    // Clear staged audio timestamps when persisted values update to match (after successful save)
+    useEffect(() => {
+        const staged = contentBeingUpdated.cellAudioTimestamps;
+        const persisted = cell.audioTimestamps;
+
+        // Only clear if we have staged audio timestamps and they match the persisted values
+        if (staged && persisted) {
+            const startMatch =
+                (staged.startTime ?? undefined) === (persisted.startTime ?? undefined);
+            const endMatch = (staged.endTime ?? undefined) === (persisted.endTime ?? undefined);
+
+            if (startMatch && endMatch) {
+                // Audio timestamps match - clear staged changes
+                const { cellAudioTimestamps, ...rest } = contentBeingUpdated;
+                setContentBeingUpdated(rest as EditorCellContent);
+            }
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [cell.audioTimestamps, contentBeingUpdated.cellAudioTimestamps]);
+
     // Add effect to fetch source text
     useEffect(() => {
         // Only fetch source text for non-paratext and non-child cells
@@ -1091,217 +2449,213 @@ const CellEditor: React.FC<CellEditorProps> = ({
                         ? prev.map((fn) => (fn.id === newFootnote.id ? newFootnote : fn))
                         : [...prev, newFootnote];
 
-                    // Re-parse to ensure correct chronological ordering (debounced)
-                    parseFootnotesFromContent();
-
-                    return updatedFootnotes;
-                });
-            }
-        },
-        [cellMarkers, parseFootnotesFromContent]
-    );
-
-    // Smart tab switching - currently, keep user on Source even if no source text
-    // (backtranslation tab was removed; no automatic switching needed)
-
-    // Audio recording functions
-
-    // Audio recording functions
-    const startRecording = async () => {
-        // Prevent recording if cell is locked
-        if (isCellLocked) {
-            setRecordingStatus("Cannot record: cell is locked");
-            return;
-        }
-
-        if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
-            setRecordingStatus("Microphone not supported in this browser");
-            return;
-        }
-
-        try {
-            const stream = await navigator.mediaDevices.getUserMedia({
-                audio: {
-                    // Request high-quality capture suitable for later WAV conversion during export
-                    sampleRate: 48000,
-                    sampleSize: 24, // May be ignored by some browsers; best-effort
-                    channelCount: 1,
-                    echoCancellation: false,
-                    noiseSuppression: false,
-                    autoGainControl: false,
-                },
-            });
-
-            const mediaRecorderOptions: MediaRecorderOptions = {};
-            try {
-                if (typeof MediaRecorder !== "undefined") {
-                    if (MediaRecorder.isTypeSupported?.("audio/webm;codecs=opus")) {
-                        mediaRecorderOptions.mimeType = "audio/webm;codecs=opus";
-                    } else if (MediaRecorder.isTypeSupported?.("audio/webm")) {
-                        mediaRecorderOptions.mimeType = "audio/webm";
-                    }
-                }
-            } catch {
-                // no-op, fall back to default mimeType
-            }
-            // Increase bitrate for higher quality Opus encoding
-            mediaRecorderOptions.audioBitsPerSecond = 256000; // 256 kbps
-
-            const recorder = new MediaRecorder(stream, mediaRecorderOptions);
-
-            audioChunksRef.current = [];
-
-            recorder.ondataavailable = (e) => {
-                if (e.data.size > 0) {
-                    audioChunksRef.current.push(e.data);
-                }
-            };
-
-            recorder.onstart = () => {
-                setIsRecording(true);
-                setRecordingStatus("Recording...");
-            };
-
-            recorder.onstop = () => {
-                setIsRecording(false);
-                // Keep Blob type simple to avoid downstream extension parsing issues
-                const blob = new Blob(audioChunksRef.current, { type: "audio/webm" });
-                setAudioBlob(blob);
-
-                // Clean up old URL if exists
-                if (audioUrl) {
-                    URL.revokeObjectURL(audioUrl);
-                }
+                    // Re-parse to ensure correct chronological ordering (debounced)
+                    parseFootnotesFromContent();
 
-                const url = URL.createObjectURL(blob);
-                setAudioUrl(url);
-                setRecordingStatus("Recording complete");
+                    return updatedFootnotes;
+                });
+            }
+        },
+        [cellMarkers, parseFootnotesFromContent]
+    );
 
-                // Stop all tracks to release microphone
-                stream.getTracks().forEach((track) => track.stop());
+    // Smart tab switching - currently, keep user on Source even if no source text
+    // (backtranslation tab was removed; no automatic switching needed)
 
-                // Save audio to cell data
-                saveAudioToCell(blob);
-                setShowRecorder(false);
-            };
+    // Audio recording functions
+    const startRecording = () => {
+        // Prevent recording if cell is locked
+        if (isCellLocked) {
+            setRecordingStatus("Cannot record: cell is locked");
+            return;
+        }
 
-            recorder.start();
-            setMediaRecorder(recorder);
-        } catch (err) {
-            setRecordingStatus("Microphone access denied");
-            console.error("Error accessing microphone:", err);
+        // If already recording or countdown active, do nothing (stopRecording handles stopping)
+        if (isRecording || countdown !== null) {
+            return;
         }
+
+        // Start countdown from 3
+        setCountdown(3);
+        setRecordingStatus("Starting in 3...");
     };
 
     const stopRecording = () => {
+        // Cancel countdown if in progress
+        if (countdown !== null) {
+            setCountdown(null);
+            setRecordingStatus("");
+            if (countdownIntervalRef.current) {
+                clearInterval(countdownIntervalRef.current);
+                countdownIntervalRef.current = null;
+            }
+            return;
+        }
+
+        // Stop actual recording
         if (mediaRecorder && mediaRecorder.state !== "inactive") {
             mediaRecorder.stop();
         }
+
+        // Clean up timers
+        if (recordingTimerRef.current) {
+            clearInterval(recordingTimerRef.current);
+            recordingTimerRef.current = null;
+        }
+        setRecordingStartTime(null);
+        setRecordingElapsedTime(0);
     };
 
-    const saveAudioToCell = (blob: Blob) => {
-        setIsAudioSaving(true);
-        setRecordingStatus("Saving audio…");
+    const saveAudioToCell = useCallback(
+        (blob: Blob) => {
+            setIsAudioSaving(true);
+            setRecordingStatus("Saving audio…");
 
-        // Generate a unique ID for the audio file
-        const normalizedCellId = cellMarkers[0].replace(/\s+/g, "-").toLowerCase();
-        const uniqueId = `audio-${normalizedCellId}-${Date.now()}-${Math.random()
-            .toString(36)
-            .substr(2, 9)}`;
-        const documentSegment = cellMarkers[0].split(" ")[0]; // Extract "JUD" from "JUD 1:1"
+            // Generate a unique ID for the audio file
+            const normalizedCellId = cellMarkers[0].replace(/\s+/g, "-").toLowerCase();
+            const uniqueId = `audio-${normalizedCellId}-${Date.now()}-${Math.random()
+                .toString(36)
+                .substr(2, 9)}`;
+            const documentSegment = cellMarkers[0].split(" ")[0]; // Extract "JUD" from "JUD 1:1"
 
-        // Normalize file extension from MIME type
-        const normalizeExtension = (mimeType: string): string => {
-            if (!mimeType || !mimeType.includes("/")) return "webm";
+            // Normalize file extension from MIME type
+            const normalizeExtension = (mimeType: string): string => {
+                if (!mimeType || !mimeType.includes("/")) return "webm";
 
-            let ext = mimeType.split("/")[1] || "webm";
+                let ext = mimeType.split("/")[1] || "webm";
 
-            // Remove codec parameters (e.g., "webm;codecs=opus" -> "webm")
-            ext = ext.split(";")[0];
+                // Remove codec parameters (e.g., "webm;codecs=opus" -> "webm")
+                ext = ext.split(";")[0];
 
-            // Normalize non-standard MIME types (e.g., "x-m4a" -> "m4a")
-            if (ext.startsWith("x-")) {
-                ext = ext.substring(2);
-            }
+                // Normalize non-standard MIME types (e.g., "x-m4a" -> "m4a")
+                if (ext.startsWith("x-")) {
+                    ext = ext.substring(2);
+                }
 
-            // Handle common MIME type aliases
-            if (ext === "mp4" || ext === "mpeg") {
-                return "m4a";
-            }
+                // Handle common MIME type aliases
+                if (ext === "mp4" || ext === "mpeg") {
+                    return "m4a";
+                }
 
-            // Validate against supported formats
-            const allowedExtensions = new Set(["webm", "wav", "mp3", "m4a", "ogg", "aac", "flac"]);
-            return allowedExtensions.has(ext) ? ext : "webm";
-        };
+                // Validate against supported formats
+                const allowedExtensions = new Set([
+                    "webm",
+                    "wav",
+                    "mp3",
+                    "m4a",
+                    "ogg",
+                    "aac",
+                    "flac",
+                ]);
+                return allowedExtensions.has(ext) ? ext : "webm";
+            };
 
-        const fileExtension = normalizeExtension(blob.type);
+            const fileExtension = normalizeExtension(blob.type);
 
-        // Convert blob to base64 for transfer to provider
-        const reader = new FileReader();
-        reader.onloadend = async () => {
-            const base64data = reader.result as string;
+            // Convert blob to base64 for transfer to provider
+            const reader = new FileReader();
+            reader.onloadend = async () => {
+                const base64data = reader.result as string;
 
-            // Attempt to compute simple metadata using Web Audio API (best-effort)
-            let meta: any = {
-                mimeType: blob.type || undefined,
-                sizeBytes: blob.size,
-            };
-            try {
-                const arrayBuf = await blob.arrayBuffer();
-                // Decode to PCM to obtain duration and channels
-                const audioCtx = new (window.AudioContext || (window as any).webkitAudioContext)({
-                    sampleRate: 48000,
-                } as any);
-                const decoded = await audioCtx.decodeAudioData(arrayBuf.slice(0));
-                const durationSec = decoded.duration;
-                const channels = decoded.numberOfChannels;
-                // Approximated bitrate in kbps: size(bytes)*8 / duration(seconds) / 1000
-                const bitrateKbps =
-                    durationSec > 0 ? Math.round((blob.size * 8) / durationSec / 1000) : undefined;
-                meta = {
-                    ...meta,
-                    sampleRate: decoded.sampleRate,
-                    channels,
-                    durationSec,
-                    bitrateKbps,
+                // Attempt to compute simple metadata using Web Audio API (best-effort)
+                let meta: any = {
+                    mimeType: blob.type || undefined,
+                    sizeBytes: blob.size,
                 };
+                let durationSec: number | undefined;
                 try {
-                    audioCtx.close();
+                    const arrayBuf = await blob.arrayBuffer();
+                    // Decode to PCM to obtain duration and channels
+                    const audioCtx = new (window.AudioContext ||
+                        (window as any).webkitAudioContext)({
+                        sampleRate: 48000,
+                    } as any);
+                    const decoded = await audioCtx.decodeAudioData(arrayBuf.slice(0));
+                    durationSec = decoded.duration;
+                    const channels = decoded.numberOfChannels;
+                    // Approximated bitrate in kbps: size(bytes)*8 / duration(seconds) / 1000
+                    const bitrateKbps =
+                        durationSec > 0
+                            ? Math.round((blob.size * 8) / durationSec / 1000)
+                            : undefined;
+                    meta = {
+                        ...meta,
+                        sampleRate: decoded.sampleRate,
+                        channels,
+                        durationSec,
+                        bitrateKbps,
+                    };
+                    try {
+                        audioCtx.close();
+                    } catch {
+                        void 0;
+                    }
                 } catch {
-                    void 0;
+                    // ignore metadata decode errors
                 }
-            } catch {
-                // ignore metadata decode errors
-            }
-            // Send to provider to save file
-            const requestId =
-                typeof crypto !== "undefined" && typeof (crypto as any).randomUUID === "function"
-                    ? (crypto as any).randomUUID()
-                    : `${Date.now()}-${Math.random().toString(36).slice(2)}`;
-            audioSaveRequestIdRef.current = requestId;
 
-            const messageContent: EditorPostMessages = {
-                command: "saveAudioAttachment",
-                requestId,
-                content: {
-                    cellId: cellMarkers[0],
-                    audioData: base64data,
-                    audioId: uniqueId,
-                    fileExtension: fileExtension,
-                    metadata: meta,
-                },
-            };
+                // Update Timestamps tab with current cell audio so it stays in sync after recording.
+                // Preserve previous audio start time when re-recording (from contentBeingUpdated, kept after save).
+                if (typeof durationSec === "number" && durationSec > 0) {
+                    const startTime =
+                        effectiveAudioTimestampsRef.current?.startTime ??
+                        effectiveTimestampsRef.current?.startTime ??
+                        0;
+                    const endTime = startTime + durationSec;
+                    const newAudioTimestamps: Timestamps = {
+                        startTime: Number(startTime.toFixed(3)),
+                        endTime: Number(endTime.toFixed(3)),
+                    };
+                    setContentBeingUpdated({
+                        ...contentBeingUpdatedRef.current,
+                        cellAudioTimestamps: newAudioTimestamps,
+                    });
+                    window.vscodeApi.postMessage({
+                        command: "updateCellAudioTimestamps",
+                        content: {
+                            cellId: cellMarkers[0],
+                            timestamps: newAudioTimestamps,
+                        },
+                    });
+                }
 
-            window.vscodeApi.postMessage(messageContent);
+                // Send to provider to save file
+                const requestId =
+                    typeof crypto !== "undefined" &&
+                    typeof (crypto as any).randomUUID === "function"
+                        ? (crypto as any).randomUUID()
+                        : `${Date.now()}-${Math.random().toString(36).slice(2)}`;
+                audioSaveRequestIdRef.current = requestId;
 
-            // Store the audio ID temporarily
-            sessionStorage.setItem(`audio-id-${cellMarkers[0]}`, uniqueId);
+                const messageContent: EditorPostMessages = {
+                    command: "saveAudioAttachment",
+                    requestId,
+                    content: {
+                        cellId: cellMarkers[0],
+                        audioData: base64data,
+                        audioId: uniqueId,
+                        fileExtension: fileExtension,
+                        metadata: meta,
+                    },
+                };
 
-            // Set the audioBlob (audioUrl will be derived automatically)
-            setAudioBlob(blob);
-        };
-        reader.readAsDataURL(blob);
-    };
+                window.vscodeApi.postMessage(messageContent);
+
+                // Store the audio ID temporarily
+                sessionStorage.setItem(`audio-id-${cellMarkers[0]}`, uniqueId);
+
+                // Set the audioBlob (audioUrl will be derived automatically)
+                setAudioBlob(blob);
+            };
+            reader.readAsDataURL(blob);
+        },
+        [cellMarkers, setContentBeingUpdated]
+    );
+
+    // Keep ref updated with saveAudioToCell function
+    useEffect(() => {
+        saveAudioToCellRef.current = saveAudioToCell;
+    }, [saveAudioToCell]);
 
     const discardAudio = () => {
         // Clean up audioBlob and audioUrl
@@ -1919,6 +3273,336 @@ const CellEditor: React.FC<CellEditorProps> = ({
         };
     }, [mediaRecorder]);
 
+    const currentAudioTimestampSlider = () => {
+        if (!audioBlob || !audioDuration) {
+            return null;
+        }
+
+        const currentStart =
+            effectiveAudioTimestamps?.startTime ?? effectiveTimestamps?.startTime ?? 0;
+        const currentEnd =
+            effectiveAudioTimestamps?.endTime ??
+            (currentStart && currentStart + audioDuration) ??
+            audioDuration;
+
+        // Calculate bounds: min = 0 or prevStartTime, max = audioDuration or nextEndTime
+        const audioMinBound = typeof prevStartTime === "number" ? Math.max(0, prevStartTime) : 0;
+        const audioMaxBound = typeof nextEndTime === "number" ? nextEndTime : audioDuration;
+
+        // Initialize previous values ref if needed
+        if (previousAudioTimestampValuesRef.current === null) {
+            previousAudioTimestampValuesRef.current = [currentStart, currentEnd];
+        }
+
+        return (
+            <>
+                <Slider
+                    min={audioMinBound}
+                    max={audioMaxBound}
+                    value={[currentStart, currentEnd]}
+                    step={0.001}
+                    className="audio-timestamp-slider"
+                    onValueChange={(vals: number[]) => {
+                        const [newStart, newEnd] = vals;
+                        const prev = previousAudioTimestampValuesRef.current;
+                        if (!prev) {
+                            previousAudioTimestampValuesRef.current = [newStart, newEnd];
+                            return;
+                        }
+
+                        const [prevStart, prevEnd] = prev;
+                        const prevDuration = prevEnd - prevStart;
+
+                        // Calculate which handle moved and by how much
+                        const startDelta = newStart - prevStart;
+                        const endDelta = newEnd - prevEnd;
+
+                        // Determine which handle was dragged (the one that moved more)
+                        let offset: number;
+                        if (Math.abs(startDelta) > Math.abs(endDelta)) {
+                            // Start handle was dragged
+                            offset = startDelta;
+                        } else {
+                            // End handle was dragged
+                            offset = endDelta;
+                        }
+
+                        // Apply the same offset to both handles (synchronized block movement)
+                        let newClampedStart = prevStart + offset;
+                        let newClampedEnd = prevEnd + offset;
+
+                        // Clamp to bounds
+                        newClampedStart = Math.max(
+                            audioMinBound,
+                            Math.min(newClampedStart, audioMaxBound - prevDuration)
+                        );
+                        newClampedEnd = Math.min(
+                            audioMaxBound,
+                            Math.max(newClampedEnd, audioMinBound + prevDuration)
+                        );
+
+                        // Ensure duration is maintained
+                        if (newClampedEnd - newClampedStart !== prevDuration) {
+                            // If clamping changed the duration, adjust to maintain it
+                            if (newClampedStart + prevDuration <= audioMaxBound) {
+                                newClampedEnd = newClampedStart + prevDuration;
+                            } else if (newClampedEnd - prevDuration >= audioMinBound) {
+                                newClampedStart = newClampedEnd - prevDuration;
+                            } else {
+                                // If we can't maintain duration, use the new values but ensure valid range
+                                newClampedStart = Math.max(audioMinBound, newClampedStart);
+                                newClampedEnd = Math.min(audioMaxBound, newClampedEnd);
+                                if (newClampedEnd <= newClampedStart) {
+                                    newClampedEnd = newClampedStart + 0.001;
+                                }
+                            }
+                        }
+
+                        previousAudioTimestampValuesRef.current = [newClampedStart, newClampedEnd];
+
+                        const updatedAudioTimestamps: Timestamps = {
+                            startTime: Number(newClampedStart.toFixed(3)),
+                            endTime: Number(newClampedEnd.toFixed(3)),
+                        };
+
+                        setContentBeingUpdated({
+                            ...contentBeingUpdated,
+                            cellAudioTimestamps: updatedAudioTimestamps,
+                            cellChanged: true,
+                        });
+                        setUnsavedChanges(true);
+                        // Invalidate combined audio blob cache after debounce
+                        debouncedInvalidateCombinedAudio();
+                    }}
+                />
+                <div className="flex justify-between text-xs text-muted-foreground mt-4">
+                    <span>Min: {formatTime(audioMinBound)}</span>
+                    <span>Max: {formatTime(audioMaxBound)}</span>
+                </div>
+            </>
+        );
+    };
+
+    const currentTimestampSlider = () => {
+        if (
+            isSubtitlesType &&
+            effectiveTimestamps &&
+            (effectiveTimestamps.startTime !== undefined ||
+                effectiveTimestamps.endTime !== undefined)
+        ) {
+            return (
+                <>
+                    <Slider
+                        min={extendedMinBound}
+                        max={Math.max(
+                            extendedMaxBound,
+                            effectiveTimestamps.endTime ?? extendedMinBound
+                        )}
+                        value={[
+                            Math.max(
+                                extendedMinBound,
+                                effectiveTimestamps.startTime ?? extendedMinBound
+                            ),
+                            Math.min(
+                                extendedMaxBound,
+                                effectiveTimestamps.endTime ??
+                                    effectiveTimestamps.startTime ??
+                                    extendedMaxBound
+                            ),
+                        ]}
+                        step={0.001}
+                        onValueChange={(vals: number[]) => {
+                            const [start, end] = vals;
+                            const clampedStart = Math.max(extendedMinBound, Math.min(start, end));
+                            const clampedEnd = Math.min(
+                                extendedMaxBound,
+                                Math.max(end, clampedStart)
+                            );
+                            const updatedTimestamps: Timestamps = {
+                                ...effectiveTimestamps,
+                                startTime: Number(clampedStart.toFixed(3)),
+                                endTime: Number(clampedEnd.toFixed(3)),
+                            };
+                            setContentBeingUpdated({
+                                ...contentBeingUpdated,
+                                cellTimestamps: updatedTimestamps,
+                                cellChanged: true,
+                            });
+                            setUnsavedChanges(true);
+                            // Invalidate combined audio blob cache after debounce
+                            debouncedInvalidateCombinedAudio();
+                        }}
+                    />
+                </>
+            );
+        } else if (
+            !isSubtitlesType &&
+            effectiveTimestamps &&
+            (effectiveTimestamps.startTime !== undefined ||
+                effectiveTimestamps.endTime !== undefined)
+        ) {
+            return (
+                <>
+                    <Slider
+                        min={Math.max(0, previousEndBound)}
+                        max={Math.max(computedMaxBound, effectiveTimestamps.endTime ?? 0)}
+                        value={[
+                            Math.max(
+                                Math.max(0, previousEndBound),
+                                effectiveTimestamps.startTime ?? 0
+                            ),
+                            Math.min(
+                                nextStartBound,
+                                effectiveTimestamps.endTime ?? effectiveTimestamps.startTime ?? 0
+                            ),
+                        ]}
+                        step={0.001}
+                        onValueChange={(vals: number[]) => {
+                            const [start, end] = vals;
+                            const clampedStart = Math.max(
+                                Math.max(0, previousEndBound),
+                                Math.min(start, end)
+                            );
+                            const clampedEnd = Math.min(
+                                nextStartBound,
+                                Math.max(end, clampedStart)
+                            );
+                            const updatedTimestamps: Timestamps = {
+                                ...effectiveTimestamps,
+                                startTime: Number(clampedStart.toFixed(3)),
+                                endTime: Number(clampedEnd.toFixed(3)),
+                            };
+                            setContentBeingUpdated({
+                                ...contentBeingUpdated,
+                                cellTimestamps: updatedTimestamps,
+                                cellChanged: true,
+                            });
+                            setUnsavedChanges(true);
+                            // Invalidate combined audio blob cache after debounce
+                            debouncedInvalidateCombinedAudio();
+                        }}
+                    />
+                    <div className="flex justify-between text-xs text-muted-foreground mt-2">
+                        <span>Min: {formatTime(Math.max(0, previousEndBound))}</span>
+                        <span>Max: {formatTime(computedMaxBound)}</span>
+                    </div>
+                </>
+            );
+        } else {
+            return null;
+        }
+    };
+
+    const effectiveDuration = (nextEndTime ?? 0) - (prevStartTime ?? 0);
+
+    const previousTimestampWidth = () => {
+        const prevAudioDuration = (prevEndTime ?? 0) - (prevStartTime ?? 0);
+
+        if (prevAudioDuration > effectiveDuration) {
+            return 100;
+        }
+
+        return (prevAudioDuration / (extendedMaxBound - extendedMinBound)) * 100;
+    };
+
+    const previousAudioTimestampWidth = () => {
+        if (!prevAudioTimestamps?.startTime || !prevAudioTimestamps?.endTime) {
+            return 0;
+        }
+
+        const videoRangeStart = prevStartTime ?? 0;
+        const videoRangeEnd = nextEndTime ?? 0;
+        const videoRange = videoRangeEnd - videoRangeStart;
+
+        if (videoRange <= 0) {
+            return 0;
+        }
+
+        // Calculate the actual start and end positions within the video range
+        const audioStart = Math.max(videoRangeStart, prevAudioTimestamps.startTime);
+        const audioEnd = Math.min(videoRangeEnd, prevAudioTimestamps.endTime);
+
+        // If audio starts after video range or ends before it starts, return 0
+        if (audioStart >= videoRangeEnd || audioEnd <= videoRangeStart) {
+            return 0;
+        }
+
+        const visibleDuration = audioEnd - audioStart;
+        const width = (visibleDuration / videoRange) * 100;
+
+        // Cap at 100% to prevent overflow
+        return Math.min(100, Math.max(0, width));
+    };
+
+    const previousAudioTimestampOffset = () => {
+        const videoRangeStart = prevStartTime ?? 0;
+        const videoRangeEnd = nextEndTime ?? 0;
+        const videoRange = videoRangeEnd - videoRangeStart;
+
+        if (videoRange <= 0 || !prevAudioTimestamps?.startTime) {
+            return 0;
+        }
+
+        // Calculate the actual start position (clipped to video range)
+        const audioStart = Math.max(videoRangeStart, prevAudioTimestamps.startTime);
+        const audioStartPosition = audioStart - videoRangeStart;
+        return (audioStartPosition / videoRange) * 100;
+    };
+
+    const nextTimestampWidth = () => {
+        const nextAudioDuration = (nextEndTime ?? 0) - (nextStartTime ?? 0);
+
+        if (nextAudioDuration > effectiveDuration) {
+            return 100;
+        }
+
+        return (nextAudioDuration / (extendedMaxBound - extendedMinBound)) * 100;
+    };
+
+    const nextAudioTimestampWidth = () => {
+        if (!nextAudioTimestamps?.startTime || !nextAudioTimestamps?.endTime) {
+            return 0;
+        }
+
+        const videoRangeStart = prevStartTime ?? 0;
+        const videoRangeEnd = nextEndTime ?? 0;
+        const videoRange = videoRangeEnd - videoRangeStart;
+
+        if (videoRange <= 0) {
+            return 0;
+        }
+
+        // Calculate the actual start and end positions within the video range
+        const audioStart = Math.max(videoRangeStart, nextAudioTimestamps.startTime);
+        const audioEnd = Math.min(videoRangeEnd, nextAudioTimestamps.endTime);
+
+        // If audio starts after video range or ends before it starts, return 0
+        if (audioStart >= videoRangeEnd || audioEnd <= videoRangeStart) {
+            return 0;
+        }
+
+        const visibleDuration = audioEnd - audioStart;
+        const width = (visibleDuration / videoRange) * 100;
+
+        // Cap at 100% to prevent overflow
+        return Math.min(100, Math.max(0, width));
+    };
+
+    const nextAudioTimestampOffset = () => {
+        const videoRangeStart = prevStartTime ?? 0;
+        const videoRangeEnd = nextEndTime ?? 0;
+        const videoRange = videoRangeEnd - videoRangeStart;
+
+        if (videoRange <= 0 || !nextAudioTimestamps?.startTime) {
+            return 0;
+        }
+
+        // Calculate the actual start position (clipped to video range)
+        const audioStart = Math.max(videoRangeStart, nextAudioTimestamps.startTime);
+        const audioStartPosition = audioStart - videoRangeStart;
+        return (audioStartPosition / videoRange) * 100;
+    };
+
     return (
         <Card className="w-full max-w-4xl shadow-xl" style={{ direction: textDirection }}>
             <CardHeader className="border-b p-4 flex flex-row flex-nowrap items-center justify-between gap-3 space-y-0">
@@ -2581,111 +4265,362 @@ const CellEditor: React.FC<CellEditorProps> = ({
 
                     {activeTab === "timestamps" && (
                         <TabsContent value="timestamps">
-                            <div className="content-section space-y-4">
-                                <h3 className="text-lg font-medium">Timestamps</h3>
+                            <div
+                                className={cn(
+                                    "content-section",
+                                    isSubtitlesType ? "px-7 py-4 space-y-4" : "p-4"
+                                )}
+                            >
+                                <div className="flex justify-between">
+                                    <h3 className="text-lg font-medium">Timestamps</h3>
+                                    {isSubtitlesType && (
+                                        <div className="flex flex-col items-end gap-2">
+                                            <div className="flex items-center gap-1">
+                                                <Languages className="w-4 h-4 text-muted-foreground/80" />
+                                                <span className="w-16 h-[4px] rounded-full bg-primary"></span>
+                                            </div>
+                                            <div className="flex items-center gap-1">
+                                                <MicrophoneIcon className="w-4 h-4 text-muted-foreground/80" />
+                                                <span className="w-16 h-[4px] rounded-full bg-[#ff9500]"></span>
+                                            </div>
+                                        </div>
+                                    )}
+                                </div>
 
                                 {effectiveTimestamps &&
                                 (effectiveTimestamps.startTime !== undefined ||
                                     effectiveTimestamps.endTime !== undefined) ? (
                                     <div className="space-y-4">
                                         {/* Scrubber with clamped handles */}
-                                        <div className="space-y-2">
-                                            <label className="text-sm font-medium">
-                                                Adjust range
-                                            </label>
-                                            <Slider
-                                                min={Math.max(0, previousEndBound)}
-                                                max={Math.max(
-                                                    computedMaxBound,
-                                                    effectiveTimestamps.endTime ?? 0
+                                        <div className="space-y-2 mt-1">
+                                            {/* Previous cell slider - read-only */}
+                                            {isSubtitlesType &&
+                                                typeof prevStartTime === "number" &&
+                                                typeof prevEndTime === "number" &&
+                                                prevStartTime < prevEndTime && (
+                                                    <div className="flex flex-col space-y-1 w-full">
+                                                        <label className="text-sm font-medium text-muted-foreground">
+                                                            Previous cell range
+                                                        </label>
+                                                        <div
+                                                            className="flex flex-col space-y-1 relative"
+                                                            style={{
+                                                                width: `${previousTimestampWidth()}%`,
+                                                            }}
+                                                        >
+                                                            <Slider
+                                                                disabled
+                                                                min={prevStartTime}
+                                                                max={prevEndTime}
+                                                                value={[prevStartTime, prevEndTime]}
+                                                                step={0.001}
+                                                                className="opacity-60"
+                                                            />
+                                                            <div className="flex min-w-max text-xs text-muted-foreground">
+                                                                <span>
+                                                                    End: {formatTime(prevEndTime)}
+                                                                </span>
+                                                            </div>
+                                                        </div>
+                                                    </div>
                                                 )}
-                                                value={[
-                                                    Math.max(
-                                                        Math.max(0, previousEndBound),
-                                                        effectiveTimestamps.startTime ?? 0
-                                                    ),
-                                                    Math.min(
-                                                        nextStartBound,
-                                                        effectiveTimestamps.endTime ??
-                                                            effectiveTimestamps.startTime ??
-                                                            0
-                                                    ),
-                                                ]}
-                                                step={0.001}
-                                                onValueChange={(vals: number[]) => {
-                                                    const [start, end] = vals;
-                                                    const clampedStart = Math.max(
-                                                        Math.max(0, previousEndBound),
-                                                        Math.min(start, end)
-                                                    );
-                                                    const clampedEnd = Math.min(
-                                                        nextStartBound,
-                                                        Math.max(end, clampedStart)
-                                                    );
-                                                    const updatedTimestamps: Timestamps = {
-                                                        ...effectiveTimestamps,
-                                                        startTime: Number(clampedStart.toFixed(3)),
-                                                        endTime: Number(clampedEnd.toFixed(3)),
-                                                    };
-                                                    setContentBeingUpdated({
-                                                        ...contentBeingUpdated,
-                                                        cellTimestamps: updatedTimestamps,
-                                                        cellChanged: true,
-                                                    });
-                                                    setUnsavedChanges(true);
-                                                }}
-                                            />
-                                            <div className="flex justify-between text-xs text-muted-foreground">
-                                                <span>
-                                                    Min: {formatTime(Math.max(0, previousEndBound))}
-                                                </span>
-                                                <span>Max: {formatTime(computedMaxBound)}</span>
-                                            </div>
-                                        </div>
 
-                                        <div className="flex items-center justify-between p-3 bg-muted rounded-lg">
-                                            <div className="text-sm">
-                                                <span className="font-medium">Duration:</span>{" "}
-                                                {effectiveTimestamps.startTime !== undefined &&
-                                                effectiveTimestamps.endTime !== undefined &&
-                                                (effectiveTimestamps.endTime as number) >
-                                                    (effectiveTimestamps.startTime as number)
-                                                    ? `${(
-                                                          (effectiveTimestamps.endTime as number) -
-                                                          (effectiveTimestamps.startTime as number)
-                                                      ).toFixed(3)}s`
-                                                    : "Invalid duration"}
-                                            </div>
-                                            <div className="text-sm text-muted-foreground">
-                                                {effectiveTimestamps.startTime !== undefined &&
-                                                effectiveTimestamps.endTime !== undefined &&
-                                                (effectiveTimestamps.endTime as number) >
-                                                    (effectiveTimestamps.startTime as number)
-                                                    ? `(${formatTime(
-                                                          effectiveTimestamps.startTime as number
-                                                      )} → ${formatTime(
-                                                          effectiveTimestamps.endTime as number
-                                                      )})`
-                                                    : ""}
+                                            {/* Previous audio slider - read-only */}
+                                            {audioBlob &&
+                                                audioDuration &&
+                                                prevAudioTimestamps &&
+                                                typeof prevAudioTimestamps.startTime === "number" &&
+                                                typeof prevAudioTimestamps.endTime === "number" &&
+                                                prevAudioTimestamps.startTime <
+                                                    prevAudioTimestamps.endTime && (
+                                                    <div className="flex flex-col -mt-[0.25rem] w-full overflow-hidden">
+                                                        <div
+                                                            className="flex flex-col space-y-1 relative"
+                                                            style={{
+                                                                width: `${previousAudioTimestampWidth()}%`,
+                                                                marginLeft: `${previousAudioTimestampOffset()}%`,
+                                                                maxWidth: `calc(100% - ${previousAudioTimestampOffset()}%)`,
+                                                            }}
+                                                        >
+                                                            <Slider
+                                                                disabled
+                                                                min={prevAudioTimestamps.startTime}
+                                                                max={prevAudioTimestamps.endTime}
+                                                                value={[
+                                                                    prevAudioTimestamps.startTime,
+                                                                    prevAudioTimestamps.endTime,
+                                                                ]}
+                                                                step={0.001}
+                                                                className="opacity-60 audio-timestamp-slider"
+                                                            />
+                                                            <div className="flex min-w-max text-xs text-muted-foreground">
+                                                                <span>
+                                                                    End:{" "}
+                                                                    {formatTime(
+                                                                        prevAudioTimestamps.endTime
+                                                                    )}
+                                                                </span>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                )}
+
+                                            <div
+                                                className={cn(
+                                                    "flex flex-col rounded-md",
+                                                    isSubtitlesType
+                                                        ? "-mx-[1rem] px-[1rem] border border-muted-foreground/30"
+                                                        : "mx-0 px-0"
+                                                )}
+                                            >
+                                                {isSubtitlesType && (
+                                                    <label className="text-sm font-medium text-muted-foreground mt-1">
+                                                        Current Cell Range
+                                                    </label>
+                                                )}
+                                                {/* Current cell slider */}
+                                                <div className="flex flex-col justify-center w-full mt-4">
+                                                    {currentTimestampSlider()}
+                                                </div>
+
+                                                {/* Current audio slider */}
+                                                {audioBlob && audioDuration && isSubtitlesType && (
+                                                    <div className="flex flex-col justify-center space-y-1 mt-[1.5rem] mb-1 w-full">
+                                                        {currentAudioTimestampSlider()}
+                                                    </div>
+                                                )}
+                                                <div className="flex items-center my-2 rounded-lg">
+                                                    <div className="text-sm flex flex-col items-start gap-1 w-full">
+                                                        <div
+                                                            className={cn(
+                                                                "flex items-center gap-1 w-full",
+                                                                isSubtitlesType
+                                                                    ? "justify-between"
+                                                                    : "justify-end mt-4"
+                                                            )}
+                                                        >
+                                                            {isSubtitlesType ? (
+                                                                <div className="flex gap-1 items-center text-sm text-muted-foreground">
+                                                                    <Languages className="w-4 h-4 text-muted-foreground/80" />
+
+                                                                    {effectiveTimestamps.startTime !==
+                                                                        undefined &&
+                                                                    effectiveTimestamps.endTime !==
+                                                                        undefined &&
+                                                                    (effectiveTimestamps.endTime as number) >
+                                                                        (effectiveTimestamps.startTime as number)
+                                                                        ? `${formatTime(
+                                                                              effectiveTimestamps.startTime as number
+                                                                          )} → ${formatTime(
+                                                                              effectiveTimestamps.endTime as number
+                                                                          )}`
+                                                                        : ""}
+                                                                </div>
+                                                            ) : (
+                                                                <div className="text-sm text-muted-foreground">
+                                                                    Duration:
+                                                                </div>
+                                                            )}
+                                                            <div>
+                                                                {effectiveTimestamps.startTime !==
+                                                                    undefined &&
+                                                                effectiveTimestamps.endTime !==
+                                                                    undefined &&
+                                                                (effectiveTimestamps.endTime as number) >
+                                                                    (effectiveTimestamps.startTime as number)
+                                                                    ? `${(
+                                                                          (effectiveTimestamps.endTime as number) -
+                                                                          (effectiveTimestamps.startTime as number)
+                                                                      ).toFixed(3)}s`
+                                                                    : "Invalid duration"}
+                                                            </div>
+                                                        </div>
+                                                        {effectiveAudioTimestamps && (
+                                                            <div className="flex justify-between items-center gap-1 w-full">
+                                                                <div className="flex items-center gap-1">
+                                                                    <MicrophoneIcon className="w-4 h-4 text-muted-foreground/80" />
+
+                                                                    {effectiveAudioTimestamps.startTime !==
+                                                                        undefined &&
+                                                                    effectiveAudioTimestamps.endTime !==
+                                                                        undefined &&
+                                                                    (effectiveAudioTimestamps.endTime as number) >
+                                                                        (effectiveAudioTimestamps.startTime as number)
+                                                                        ? `${formatTime(
+                                                                              effectiveAudioTimestamps.startTime as number
+                                                                          )} → ${formatTime(
+                                                                              effectiveAudioTimestamps.endTime as number
+                                                                          )}`
+                                                                        : ""}
+                                                                </div>
+                                                                <div>
+                                                                    {effectiveAudioTimestamps.startTime !==
+                                                                        undefined &&
+                                                                    effectiveAudioTimestamps.endTime !==
+                                                                        undefined &&
+                                                                    (effectiveAudioTimestamps.endTime as number) >
+                                                                        (effectiveAudioTimestamps.startTime as number)
+                                                                        ? `${(
+                                                                              (effectiveAudioTimestamps.endTime as number) -
+                                                                              (effectiveAudioTimestamps.startTime as number)
+                                                                          ).toFixed(3)}s`
+                                                                        : "Invalid duration"}
+                                                                </div>
+                                                            </div>
+                                                        )}
+                                                    </div>
+                                                </div>
                                             </div>
+
+                                            {/* Next cell slider - read-only */}
+                                            {isSubtitlesType &&
+                                                typeof nextStartTime === "number" &&
+                                                typeof nextEndTime === "number" &&
+                                                nextStartTime < nextEndTime && (
+                                                    <div className="flex flex-col justify-end items-end space-y-1 w-full">
+                                                        <label className="text-sm font-medium text-muted-foreground">
+                                                            Next cell range
+                                                        </label>
+                                                        <div
+                                                            className="flex flex-col items-end space-y-1 relative"
+                                                            style={{
+                                                                width: `${nextTimestampWidth()}%`,
+                                                            }}
+                                                        >
+                                                            <Slider
+                                                                disabled
+                                                                min={Math.max(0, nextStartTime)}
+                                                                max={Math.max(
+                                                                    nextEndTime,
+                                                                    nextStartTime + 0.001
+                                                                )}
+                                                                value={[nextStartTime, nextEndTime]}
+                                                                step={0.001}
+                                                                className="opacity-60"
+                                                            />
+                                                            <div className="flex min-w-max text-xs text-muted-foreground">
+                                                                <span>
+                                                                    Start:{" "}
+                                                                    {formatTime(nextStartTime)}
+                                                                </span>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                )}
+
+                                            {/* Next audio slider - read-only */}
+                                            {audioBlob &&
+                                                audioDuration &&
+                                                nextAudioTimestamps &&
+                                                typeof nextAudioTimestamps.startTime === "number" &&
+                                                typeof nextAudioTimestamps.endTime === "number" &&
+                                                nextAudioTimestamps.startTime <
+                                                    nextAudioTimestamps.endTime && (
+                                                    <div className="flex flex-col justify-end items-start -mt-[0.25rem] w-full overflow-hidden">
+                                                        <div
+                                                            className="flex flex-col items-end space-y-1 relative"
+                                                            style={{
+                                                                width: `${nextAudioTimestampWidth()}%`,
+                                                                marginLeft: `${nextAudioTimestampOffset()}%`,
+                                                                maxWidth: `calc(100% - ${nextAudioTimestampOffset()}%)`,
+                                                            }}
+                                                        >
+                                                            <Slider
+                                                                disabled
+                                                                min={Math.max(
+                                                                    0,
+                                                                    nextAudioTimestamps.startTime
+                                                                )}
+                                                                max={Math.max(
+                                                                    nextAudioTimestamps.endTime,
+                                                                    nextAudioTimestamps.startTime +
+                                                                        0.001
+                                                                )}
+                                                                value={[
+                                                                    nextAudioTimestamps.startTime,
+                                                                    nextAudioTimestamps.endTime,
+                                                                ]}
+                                                                step={0.001}
+                                                                className="opacity-60 audio-timestamp-slider"
+                                                            />
+                                                            <div className="flex min-w-max text-xs text-muted-foreground">
+                                                                <span>
+                                                                    Start:{" "}
+                                                                    {formatTime(
+                                                                        nextAudioTimestamps.startTime
+                                                                    )}
+                                                                </span>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                )}
                                         </div>
 
-                                        <div className="flex gap-2">
-                                            <Button
-                                                onClick={() => {
-                                                    // Clear timestamps
-                                                    setContentBeingUpdated({
-                                                        ...contentBeingUpdated,
-                                                        cellTimestamps: undefined,
-                                                    });
-                                                }}
-                                                variant="outline"
-                                                size="sm"
-                                            >
-                                                <RotateCcw className="mr-1 h-4 w-4" />
-                                                Revert
-                                            </Button>
+                                        <div className="flex justify-between">
+                                            <div className="flex gap-2">
+                                                {isSubtitlesType && (
+                                                    <Button
+                                                        onClick={handlePlayAudioWithVideo}
+                                                        variant="default"
+                                                        size="sm"
+                                                        disabled={
+                                                            !canPlayAudioWithVideo ||
+                                                            (effectiveTimestamps?.endTime ?? 0) -
+                                                                (effectiveTimestamps?.startTime ??
+                                                                    0) <=
+                                                                0 ||
+                                                            !shouldShowVideoPlayer ||
+                                                            isPlayAudioLoading
+                                                        }
+                                                    >
+                                                        {isPlayAudioLoading ? (
+                                                            <Loader2 className="mr-1 h-4 w-4 animate-spin" />
+                                                        ) : (
+                                                            <Play className="mr-1 h-4 w-4" />
+                                                        )}
+                                                        Play Video
+                                                    </Button>
+                                                )}
+                                                <Button
+                                                    onClick={() => {
+                                                        // Clear timestamps
+                                                        setContentBeingUpdated({
+                                                            ...contentBeingUpdated,
+                                                            cellTimestamps: undefined,
+                                                        });
+                                                    }}
+                                                    variant="outline"
+                                                    size="sm"
+                                                >
+                                                    <RotateCcw className="mr-1 h-4 w-4" />
+                                                    Revert
+                                                </Button>
+                                            </div>
+                                            {isSubtitlesType && shouldShowVideoPlayer && (
+                                                <div className="flex items-center gap-2">
+                                                    <Checkbox
+                                                        id="mute-video-audio-during-playback"
+                                                        checked={muteVideoAudioDuringPlayback}
+                                                        onCheckedChange={(checked) =>
+                                                            setMuteVideoAudioDuringPlayback(
+                                                                checked === true
+                                                            )
+                                                        }
+                                                    />
+                                                    <label
+                                                        htmlFor="mute-video-audio-during-playback"
+                                                        className="text-sm cursor-pointer"
+                                                    >
+                                                        Mute video
+                                                    </label>
+                                                </div>
+                                            )}
                                         </div>
+                                        {audioWarning && (
+                                            <div className="text-sm text-red-500">
+                                                {audioWarning}
+                                            </div>
+                                        )}
                                     </div>
                                 ) : (
                                     <div className="text-center p-8 text-muted-foreground">
@@ -2713,10 +4648,11 @@ const CellEditor: React.FC<CellEditorProps> = ({
                                     audioUrl.startsWith("http")
                                 ) ? (
                                     <div className="bg-[var(--vscode-editor-background)] p-3 sm:p-4 rounded-md shadow w-full">
-                                        {!audioUrl && (
+                                        {(!audioUrl || showRecorder) && (
                                             <div className="bg-[var(--vscode-editor-background)] p-3 rounded-md shadow-sm">
-                                                <div className="flex items-center justify-center h-20 text-[var(--vscode-foreground)] text-sm">
-                                                    {audioAttachments &&
+                                                <div className="flex items-center justify-center text-[var(--vscode-foreground)] text-sm">
+                                                    {!showRecorder &&
+                                                    audioAttachments &&
                                                     (audioAttachments[cellMarkers[0]] ===
                                                         "available" ||
                                                         audioAttachments[cellMarkers[0]] ===
@@ -2769,48 +4705,127 @@ const CellEditor: React.FC<CellEditorProps> = ({
                                                             })()}
                                                         </div>
                                                     ) : (
-                                                        <span>
-                                                            No audio attached to this cell yet.
-                                                        </span>
+                                                        (() => {
+                                                            // Calculate target duration from cell timestamps
+                                                            const targetDuration =
+                                                                cellTimestamps?.startTime !==
+                                                                    undefined &&
+                                                                cellTimestamps?.endTime !==
+                                                                    undefined
+                                                                    ? cellTimestamps.endTime -
+                                                                      cellTimestamps.startTime
+                                                                    : null;
+
+                                                            // Calculate progress percentage
+                                                            const progressPercentage =
+                                                                targetDuration &&
+                                                                recordingElapsedTime > 0
+                                                                    ? Math.min(
+                                                                          100,
+                                                                          (recordingElapsedTime /
+                                                                              targetDuration) *
+                                                                              100
+                                                                      )
+                                                                    : 0;
+
+                                                            // Determine if recording should stop filling (over 100%)
+                                                            const shouldStopFilling =
+                                                                progressPercentage >= 100;
+
+                                                            return (
+                                                                <div className="flex flex-col items-center gap-4 w-full">
+                                                                    {/* Circular Button */}
+                                                                    <Button
+                                                                        onClick={
+                                                                            isRecording ||
+                                                                            countdown !== null
+                                                                                ? stopRecording
+                                                                                : startRecording
+                                                                        }
+                                                                        disabled={isCellLocked}
+                                                                        className={cn(
+                                                                            "h-24 w-24 rounded-full text-2xl font-bold transition-all",
+                                                                            isRecording
+                                                                                ? "animate-pulse border-red-500 bg-red-600 hover:bg-red-700"
+                                                                                : countdown !== null
+                                                                                ? "border-green-500 bg-green-500 hover:bg-green-600"
+                                                                                : "bg-blue-600 hover:bg-blue-700",
+                                                                            isCellLocked
+                                                                                ? "opacity-50 cursor-not-allowed"
+                                                                                : ""
+                                                                        )}
+                                                                        title={
+                                                                            isCellLocked
+                                                                                ? "Cannot record: cell is locked"
+                                                                                : isRecording
+                                                                                ? "Stop Recording"
+                                                                                : countdown !== null
+                                                                                ? `Starting in ${countdown}...`
+                                                                                : "Start Recording"
+                                                                        }
+                                                                    >
+                                                                        {isRecording ? (
+                                                                            <Mic className="h-8 w-8" />
+                                                                        ) : countdown !== null ? (
+                                                                            countdown
+                                                                        ) : (
+                                                                            <Mic className="h-8 w-8" />
+                                                                        )}
+                                                                    </Button>
+
+                                                                    {/* Progress Bar */}
+                                                                    {targetDuration && (
+                                                                        <div className="w-full space-y-2">
+                                                                            <div className="relative w-full h-3 bg-blue-200/60 rounded-full overflow-hidden">
+                                                                                <div
+                                                                                    className="h-full rounded-full transition-all duration-100"
+                                                                                    style={{
+                                                                                        width: `${
+                                                                                            shouldStopFilling
+                                                                                                ? 100
+                                                                                                : progressPercentage
+                                                                                        }%`,
+                                                                                        backgroundColor:
+                                                                                            progressPercentage <=
+                                                                                            90
+                                                                                                ? "rgb(234, 179, 8)" // yellow-500
+                                                                                                : progressPercentage <=
+                                                                                                  99
+                                                                                                ? "rgb(34, 197, 94)" // green-500
+                                                                                                : "rgb(239, 68, 68)", // red-500
+                                                                                    }}
+                                                                                />
+                                                                            </div>
+                                                                            <div className="flex justify-between text-xs text-muted-foreground">
+                                                                                <span>
+                                                                                    {isRecording ||
+                                                                                    recordingElapsedTime >
+                                                                                        0
+                                                                                        ? `${recordingElapsedTime.toFixed(
+                                                                                              3
+                                                                                          )}s`
+                                                                                        : "0s"}
+                                                                                </span>
+                                                                                <span>
+                                                                                    Timestamp Length
+                                                                                </span>
+                                                                                <span>
+                                                                                    {targetDuration.toFixed(
+                                                                                        1
+                                                                                    )}
+                                                                                    s
+                                                                                </span>
+                                                                            </div>
+                                                                        </div>
+                                                                    )}
+                                                                </div>
+                                                            );
+                                                        })()
                                                     )}
                                                 </div>
                                             </div>
                                         )}
                                         <div className="flex flex-wrap items-center justify-center gap-2 mt-3 px-2">
-                                            <Button
-                                                onClick={
-                                                    isRecording ? stopRecording : startRecording
-                                                }
-                                                variant={isRecording ? "secondary" : "default"}
-                                                disabled={isCellLocked}
-                                                className={`h-8 px-2 text-xs ${
-                                                    isRecording ? "animate-pulse" : ""
-                                                } ${
-                                                    isCellLocked
-                                                        ? "opacity-50 cursor-not-allowed"
-                                                        : ""
-                                                }`}
-                                                title={
-                                                    isCellLocked
-                                                        ? "Cannot record: cell is locked"
-                                                        : isRecording
-                                                        ? "Stop Recording"
-                                                        : "Start Recording"
-                                                }
-                                            >
-                                                {isRecording ? (
-                                                    <>
-                                                        <Square className="h-3 w-3 mr-1" />
-                                                        Stop Recording
-                                                    </>
-                                                ) : (
-                                                    <>
-                                                        <CircleDotDashed className="h-3 w-3 mr-1" />
-                                                        Start Recording
-                                                    </>
-                                                )}
-                                            </Button>
-
                                             <Button
                                                 variant="outline"
                                                 className="flex items-center justify-center h-8 px-2 text-xs"
@@ -2898,12 +4913,39 @@ const CellEditor: React.FC<CellEditorProps> = ({
                                             onRequestRemove={() => setConfirmingDiscard(true)}
                                             onShowHistory={() => setShowAudioHistory(true)}
                                             historyCount={audioHistoryCount}
-                                            onShowRecorder={() => setShowRecorder(true)}
+                                            onShowRecorder={() => {
+                                                setShowRecorder(true);
+                                                // Reset recording state when re-recording
+                                                setCountdown(null);
+                                                setRecordingStartTime(null);
+                                                setRecordingElapsedTime(0);
+                                                if (countdownIntervalRef.current) {
+                                                    clearInterval(countdownIntervalRef.current);
+                                                    countdownIntervalRef.current = null;
+                                                }
+                                                if (recordingTimerRef.current) {
+                                                    clearInterval(recordingTimerRef.current);
+                                                    recordingTimerRef.current = null;
+                                                }
+                                            }}
                                             disabled={!audioBlob}
                                             validationStatusProps={audioValidationIconProps}
                                             audioValidationPopoverProps={
                                                 audioValidationPopoverProps
                                             }
+                                            targetDurationSeconds={
+                                                isSubtitlesType &&
+                                                cellTimestamps?.startTime !== undefined &&
+                                                cellTimestamps?.endTime !== undefined
+                                                    ? cellTimestamps.endTime -
+                                                      cellTimestamps.startTime
+                                                    : undefined
+                                            }
+                                            audioDurationSeconds={
+                                                isSubtitlesType
+                                                    ? audioDuration ?? undefined
+                                                    : undefined
+                                            }
                                         />
 
                                         {confirmingDiscard && (
diff --git a/webviews/codex-webviews/src/CodexCellEditor/Timeline/T.ts b/webviews/codex-webviews/src/CodexCellEditor/Timeline/T.ts
deleted file mode 100644
index 9e9371573..000000000
--- a/webviews/codex-webviews/src/CodexCellEditor/Timeline/T.ts
+++ /dev/null
@@ -1,1065 +0,0 @@
-import { TimeBlock } from "../../../../../types";
-
-const toFixed3 = (i: number): number => Number(i.toFixed(3));
-
-export interface TimelineReturn {
-    setData: (alignments: TimeBlock[]) => void;
-    cancelAnimate: () => void;
-    changeZoom: (deltaY: number) => void;
-    changeCursorViewPort: (beginingTimeShow: number, endTimeShow: number) => void;
-}
-
-export default function TimeLine({
-    canvas,
-    canvas2,
-    alignments,
-    endTime,
-    setContentToScrollTo,
-    getPlayer,
-    changeAlignment,
-    changeZoomLevel,
-    changeInScrollPosition,
-    changeShift,
-    tellAreaChangesToRectComponent,
-    options,
-}: {
-    canvas: HTMLCanvasElement;
-    canvas2: HTMLCanvasElement;
-    alignments: TimeBlock[];
-    setContentToScrollTo: React.Dispatch<React.SetStateAction<string | null>>;
-    endTime: number;
-    getPlayer: () => { currentTime: number; play: (currentTime: number) => void };
-    changeAlignment: (
-        alignments: {
-            begin: number;
-            end: number;
-            text: string;
-            id: string;
-        }[]
-    ) => void;
-    changeZoomLevel: (zoomLevel: number) => void;
-    changeInScrollPosition: (position: number) => void;
-    changeShift: (shift: number) => void;
-    tellAreaChangesToRectComponent: (beginingTimeShow: number, endTimeShow: number) => void;
-    options: {
-        autoScroll: boolean;
-        initialZoomLevel?: number; // Add this to options
-        scrollingIsTracking: boolean;
-        scrollPosition: number;
-        colors: {
-            background: string;
-            box: string;
-            boxHover: string;
-            selectedBox: string;
-            playingBox: string;
-            text: string;
-            selectedText: string;
-            tooltipBackground: string;
-            tooltipText: string;
-            scrollBarBackground: string;
-            scrollBar: string;
-            scrollBarHover: string;
-        };
-    };
-}): TimelineReturn | undefined {
-    // constants
-    const LINE_HEIGHT = 40;
-    const TRACK_HEIGHT = 40;
-    const TIME_BAR_MARGIN = 17;
-    const TIMELINE_HEIGHT = 90;
-    const RESIZE_MODE_EDGE = 5;
-    const SHIFT_SCALE = 4;
-    const EXRTA_SHIFT = 60;
-    const ZOOM_SCALE = 1.35;
-    const MINIMUM_BLOCK_TIME = 1;
-    const SCROLL_BAR_HEIGHT = 10; // colors
-
-    const SELECTED_COLOR = options.colors.selectedBox;
-    const ACTIVE_COLOR = options.colors.boxHover;
-    const CURSUR_TIME_CONTAINER_COLOR = options.colors.playingBox;
-    let scrolling = false;
-    let autoScroll = options.autoScroll;
-    let maximumShift = 10000;
-    let isMouseDown = false;
-
-    if (!canvas || !canvas2 || !alignments) {
-        return;
-    } // element setting
-
-    let animationID: number;
-    let w = (canvas.width = canvas2.width = canvas.parentElement?.parentElement?.clientWidth || 0);
-    let h = (canvas.height = canvas2.height = TIMELINE_HEIGHT);
-    let scrollPosition = options.scrollPosition;
-    let scrollSize = w;
-    const minimumZoomLevel = w / endTime;
-    const ctx = canvas.getContext("2d") as CanvasRenderingContext2D;
-    if (!ctx) {
-        return;
-    }
-    const bgCtx = canvas2.getContext("2d");
-    if (!bgCtx) {
-        return;
-    }
-    ctx.lineWidth = 2;
-    ctx.textAlign = "left";
-    ctx.textBaseline = "middle";
-    ctx.font = "10px Arial";
-    canvas.style.backgroundColor = "transparent";
-    canvas2.style.backgroundColor = options.colors.background;
-    let mouse: { x: number; y: number } = { x: 0, y: 0 };
-    let lastXcursor = 0;
-    let mouseTime: number;
-    let swaping = false;
-    let player: any;
-    let shift = 0;
-    let movingDirection: string;
-    let zoomLevel = options.initialZoomLevel || w / endTime || 1; // Initialize with prop if available
-    let moving = false;
-    let resizing = false;
-    let currentPrtcl: any;
-    let currentHoveredIndex = -1;
-    let currentPrtclsIndex: number;
-    let rightResize = false;
-    let leftResize = false;
-    let globalRatio = 1;
-    let currentTime = 0;
-    let beginingTimeShow = 0;
-    let endTimeShow = Math.abs(w + shift) / zoomLevel;
-    let moveIndex: number;
-    let newTime: number;
-    let prtcls: Square[] = [];
-    setData(alignments); //tooltip
-
-    let tooltipTimeout: ReturnType<typeof setTimeout>;
-    let visibleTooltip = false;
-    let visitedPrtcl: number; // BEGIN ...
-
-    addListenerHandlers(canvas);
-    changeZoomLevel(zoomLevel);
-    tellAreaChangesToRectComponent(beginingTimeShow, endTimeShow);
-    drawBG(bgCtx);
-    animate(); // HELPERS ...
-
-    interface Square {
-        x: number;
-        y: number;
-        text: string;
-        edge: number;
-        id: string;
-        startIndex?: number;
-        endIndex?: number;
-        selected: boolean;
-        active: boolean;
-        index: number;
-        draw: (context: CanvasRenderingContext2D) => void;
-        constructor: new (
-            x: number,
-            y: number,
-            edge: number,
-            index: number,
-            id: string,
-            text: string,
-            sIndex: number,
-            eIndex: number
-        ) => Square;
-    }
-
-    function Square(
-        this: Square,
-        x: number,
-        y: number,
-        edge: number,
-        index: number,
-        text: string,
-        id: string,
-        sIndex: number,
-        eIndex: number
-    ) {
-        this.x = x;
-        this.y = y;
-        this.text = text;
-        this.id = id;
-        this.edge = edge;
-        this.startIndex = sIndex;
-        this.endIndex = eIndex;
-        this.selected = false;
-        this.active = false;
-        this.index = index;
-
-        this.draw = (context) => {
-            context.save();
-            this.x = toFixed3(this.x);
-            this.edge = toFixed3(this.edge);
-            context.fillStyle = ACTIVE_COLOR;
-
-            if (currentHoveredIndex !== this.index) {
-                context.fillStyle = options.colors.box;
-            }
-
-            if (this.active) {
-                context.fillStyle = ACTIVE_COLOR;
-            }
-
-            if (this.selected) {
-                context.fillStyle = SELECTED_COLOR;
-            }
-
-            context.fillRect(this.x + shift, this.y, this.edge, TRACK_HEIGHT);
-            context.beginPath();
-            context.strokeStyle = "#888888";
-            context.lineWidth = 1;
-            context.moveTo(this.x + shift - 1 + this.edge, this.y + 1);
-            context.lineTo(this.x + shift - 1 + this.edge, this.y + TRACK_HEIGHT);
-            context.closePath();
-            context.stroke();
-            ctx.font = "13px Arial";
-            context.fillStyle = options.colors.text;
-            if (this.selected) context.fillStyle = options.colors.selectedText;
-            const space = this.edge;
-            const rat = ctx.measureText(this.text).width / space;
-            const trimedText =
-                rat <= 1
-                    ? this.text
-                    : this.text.substr(0, Math.floor((1 / rat) * this.text.length) - 1);
-            if (trimedText && this.edge > 20)
-                ctx.fillText(trimedText, this.x + 1 + shift, this.y + 22, this.edge - 2);
-            context.restore();
-        };
-    }
-
-    function getMouseCoords(canvas: HTMLCanvasElement, event: MouseEvent) {
-        const canvasCoords = canvas.getBoundingClientRect();
-        // let yy = event.pageY - canvas.offsetTop;
-        // let xx = event.pageX - canvas.offsetLeft;
-        const xxxx = event.pageX - canvasCoords.x;
-        const yyyy = event.pageY - canvasCoords.y - window.pageYOffset;
-        // console.log("canvasCoords", { canvasCoords, xxxx, yyyy });
-        return {
-            x: xxxx,
-            y: yyyy,
-        };
-    }
-
-    function getOffsetCoords(mouse: any, rect: any) {
-        // console.log("mouse", mouse);
-        // console.log("rect", rect);
-        return {
-            x: mouse.x - rect.x,
-            y: mouse.y - rect.y,
-        };
-    }
-
-    function cursorInRect(
-        mouseX: number,
-        mouseY: number,
-        rectX: number,
-        rectY: number,
-        rectW: number,
-        rectH: number
-    ) {
-        const xLine = mouseX > rectX + shift && mouseX < rectX + shift + rectW;
-        const yLine = mouseY > rectY && mouseY < rectY + TRACK_HEIGHT;
-        return xLine && yLine;
-    }
-
-    function resize() {
-        w = canvas.width = canvas2.width = canvas.parentElement?.parentElement?.clientWidth || 0;
-        h = canvas.height = canvas2.height = TIMELINE_HEIGHT;
-        if (bgCtx) {
-            drawBG(bgCtx);
-        }
-    }
-
-    function changeZoom(deltaY: number) {
-        handleZoom({
-            deltaY,
-            preventDefault: () => {},
-        });
-    }
-
-    function handleZoom(e: { deltaY: number; preventDefault: () => void }) {
-        try {
-            e.preventDefault();
-        } catch (error) {
-            console.log(error);
-        }
-
-        if (resizing) return;
-        const originalZoomLevel = zoomLevel;
-        const originalMouseTime = mouseTime;
-        const viewPortTime = endTimeShow - beginingTimeShow;
-
-        if (e.deltaY < 0) {
-            if (zoomLevel * ZOOM_SCALE < 500) zoomLevel *= ZOOM_SCALE;
-        } else {
-            if (zoomLevel / ZOOM_SCALE <= minimumZoomLevel) {
-                zoomLevel = minimumZoomLevel;
-            } else {
-                if (viewPortTime < endTime) {
-                    zoomLevel /= ZOOM_SCALE;
-                }
-            }
-        }
-
-        const newMouseTime = (mouse.x - shift) / zoomLevel;
-        const newShift = (originalMouseTime - newMouseTime) * zoomLevel;
-
-        if (shift - newShift > 0) {
-            shift = 0;
-        } else {
-            shift = shift - newShift;
-        }
-
-        let ratio = 1;
-        prtcls.forEach((p) => {
-            const px = p.x;
-            const originalPX = p.x / originalZoomLevel;
-            const originalEdge = p.edge / originalZoomLevel;
-            p.edge = originalEdge * zoomLevel;
-            p.x = originalPX * zoomLevel;
-            ratio = p.x / px;
-        });
-        checkShift();
-        changeZoomLevel(zoomLevel);
-        if (bgCtx) {
-            drawBG(bgCtx, ratio);
-        }
-    }
-
-    function drawTimeCursor() {
-        const position = currentTime * zoomLevel + shift;
-        const context = ctx;
-        const pos = position !== undefined ? position : mouse ? mouse.x : undefined;
-        if (pos === undefined) return; //temporary deactive hover cursor
-        // currentHoveredIndex = prtcls.findIndex(
-        //   (e) => pos - shift >= e.x && pos - shift <= e.x + e.edge
-        // );
-
-        context.save();
-        context.fillStyle = CURSUR_TIME_CONTAINER_COLOR;
-        context.fillRect(pos - 70, 21, 70, 17);
-        context.fillStyle = "white";
-        context.fillText(toTime((pos - shift) / zoomLevel, true), pos - 60, 30);
-        context.lineWidth = 0.5;
-        context.strokeStyle = CURSUR_TIME_CONTAINER_COLOR;
-        context.beginPath();
-        context.moveTo(pos, 0);
-        context.lineTo(pos, 150);
-        context.closePath();
-        context.stroke();
-        context.restore();
-    }
-
-    function mousemoveGeneral(e: MouseEvent) {
-        e.preventDefault();
-        mouse = getMouseCoords(canvas, e);
-
-        if (lastXcursor < mouse.x) {
-            movingDirection = "right";
-        } else {
-            movingDirection = "left";
-        }
-
-        lastXcursor = mouse.x;
-
-        if (!moving && !resizing && !swaping && !scrolling) {
-            // activePrtcl();
-            checkResizing();
-            hoverElement();
-        }
-    }
-
-    function handleHoverTimeBar() {
-        if (mouse.y < TIME_BAR_MARGIN) {
-            canvas.classList.add("crosshair");
-        } else {
-            canvas.classList.remove("crosshair");
-        }
-    }
-
-    function handleMouseMove(e: MouseEvent) {
-        e.preventDefault();
-        handleHoverTimeBar();
-        if (!currentPrtcl) visibleTooltip = false;
-        if (moving) {
-            handleMoving();
-        } else if (resizing) {
-            handleResize(mouse);
-        } else if (scrolling) {
-            handleScrolling();
-        } else if (swaping) {
-            resetActives();
-            handleVerticalSwipe();
-        } else if (isMouseDown) {
-            moving = true;
-        } else {
-            resetActives();
-        }
-
-        if (moving || scrolling || swaping) checkShift();
-        if (bgCtx) {
-            drawBG(bgCtx);
-        }
-    }
-    function handleScrolling() {
-        if (zoomLevel === minimumZoomLevel) return;
-
-        const mouseDistancetToScroll = Math.abs(mouse.x - scrollPosition);
-        const distance = scrollSize / 2;
-        const ratio = (mouse.x - distance) / w;
-        const value = -1 * ratio * endTime * zoomLevel;
-        if (value <= 0) shift = value;
-        if (bgCtx) {
-            drawBG(bgCtx);
-        }
-    }
-    function resetActives() {
-        // prtcls.forEach((d) => {
-        //   d.active = false;
-        // });
-    }
-    function handleMoving() {
-        if (!currentPrtcl) return;
-        let min = 0;
-        let max = 99999999;
-        const leftSub = prtcls[currentPrtclsIndex - 1];
-        const rightSub = prtcls[currentPrtclsIndex + 1];
-        if (leftSub) min = leftSub.x + leftSub.edge;
-        if (rightSub) max = rightSub.x;
-
-        const pos = mouse.x - currentPrtcl.offset.x;
-
-        if (pos + currentPrtcl.edge <= max && pos >= min) {
-            currentPrtcl.x = pos;
-            currentPrtcl.y = LINE_HEIGHT;
-        } else {
-            if (movingDirection === "right" && pos > currentPrtcl.x + currentPrtcl.edge)
-                currentPrtcl.x = max - currentPrtcl.edge;
-            if (movingDirection === "left" && pos < currentPrtcl.x) currentPrtcl.x = min;
-        }
-    }
-    function outPrtcls() {
-        const data = prtcls.map((p, i) => {
-            const begin = p.x / zoomLevel;
-            let end = (p.x + p.edge) / zoomLevel;
-            const text = p.text;
-
-            if (prtcls[i + 1]) {
-                const nextStart = prtcls[i + 1].x / zoomLevel;
-                if (nextStart < end) end = nextStart;
-            }
-
-            return {
-                begin,
-                end,
-                text,
-                id: p.id,
-            };
-        });
-        changeAlignment(data);
-    }
-
-    function handleVerticalSwipe() {
-        if (swaping && zoomLevel !== minimumZoomLevel) {
-            if (movingDirection === "left") {
-                if ((w - shift) / zoomLevel > endTime + EXRTA_SHIFT) return;
-                shift = shift - SHIFT_SCALE;
-            } else if (movingDirection === "right") {
-                if (shift + SHIFT_SCALE > 0) {
-                    shift = 0;
-                } else {
-                    shift = shift + SHIFT_SCALE;
-                }
-            }
-
-            if (bgCtx) {
-                drawBG(bgCtx);
-            }
-        }
-    }
-
-    function calculateViewPortTimes() {
-        beginingTimeShow = Math.abs(shift) / zoomLevel;
-        endTimeShow = Math.abs(w - shift) / zoomLevel;
-        mouseTime = (mouse.x - shift) / zoomLevel;
-        tellAreaChangesToRectComponent(beginingTimeShow, endTimeShow);
-        changeShift(shift);
-    }
-
-    function handleDbClick() {
-        if (currentPrtcl) {
-            if (
-                cursorInRect(
-                    mouse.x,
-                    mouse.y,
-                    currentPrtcl.x,
-                    currentPrtcl.y,
-                    currentPrtcl.edge,
-                    currentPrtcl.edge
-                )
-            ) {
-                currentPrtcl.selected = true;
-                currentPrtcl.offset = getOffsetCoords(mouse, currentPrtcl);
-                player.currentTime = currentPrtcl.x / zoomLevel;
-                player.play(player.currentTime);
-                setContentToScrollTo(currentPrtcl.id);
-            } else {
-                currentPrtcl.selected = false;
-            }
-        }
-    }
-
-    function handleCursor() {
-        // if (swaping) {
-        //   canvas.classList.add("grabbing");
-        // } else {
-        //   canvas.classList.remove("grabbing");
-        // }
-        // if (currentPrtcl) {
-        //   canvas.classList.add("move");
-        // } else {
-        //   canvas.classList.remove("move");
-        // }
-    }
-
-    function handleMouseDown() {
-        isMouseDown = true;
-
-        if (rightResize || leftResize) {
-            resizing = true;
-            handlePauseInChanging();
-        }
-
-        if (currentPrtcl) {
-            if (
-                cursorInRect(
-                    mouse.x,
-                    mouse.y,
-                    currentPrtcl.x,
-                    currentPrtcl.y,
-                    currentPrtcl.edge,
-                    currentPrtcl.edge
-                )
-            ) {
-                currentPrtcl.selected = true;
-                currentPrtcl.offset = getOffsetCoords(mouse, currentPrtcl);
-
-                if (resizing) {
-                    handlePauseInChanging();
-                }
-            } else {
-                currentPrtcl.selected = false;
-            }
-        } else if (!resizing) {
-            // hande click to change player current time
-            if (mouse.y < TIME_BAR_MARGIN) {
-                player.currentTime = (mouse.x - shift) / zoomLevel;
-            } else if (mouse.y > TIME_BAR_MARGIN && mouse.y < TIMELINE_HEIGHT - SCROLL_BAR_HEIGHT) {
-                swaping = true;
-            }
-
-            player.play(player.currentTime);
-        }
-    }
-
-    function handlePauseInChanging() {
-        if (player) {
-            // player.pause();
-        }
-    }
-
-    function mouseup() {
-        isMouseDown = false;
-        canvas.classList.remove("col-resize");
-
-        if (resizing) {
-            // player.play();
-        }
-
-        if (moving) {
-            // player.play();
-        }
-
-        resizing = false;
-        moving = false;
-        swaping = false;
-        stopMove = false;
-        prtcls.forEach((e) => (e.selected = false));
-        if (currentPrtcl) currentPrtcl.active = true;
-        outPrtcls();
-    }
-
-    function checkResizing() {
-        if (currentPrtcl) {
-            if (
-                mouse.x >= currentPrtcl.x + shift + currentPrtcl.edge - RESIZE_MODE_EDGE &&
-                mouse.x <= currentPrtcl.x + shift + currentPrtcl.edge
-            ) {
-                rightResize = true;
-                canvas.classList.add("col-resize");
-            } else if (
-                mouse.x <= currentPrtcl.x + shift + RESIZE_MODE_EDGE &&
-                mouse.x >= currentPrtcl.x + shift
-            ) {
-                leftResize = true;
-                canvas.classList.add("col-resize");
-            } else {
-                leftResize = false;
-                rightResize = false;
-                canvas.classList.remove("col-resize");
-            }
-        } else {
-            leftResize = false;
-            rightResize = false;
-            canvas.classList.remove("col-resize");
-        }
-    }
-
-    function setTooltipTimeout() {
-        visibleTooltip = true;
-        visitedPrtcl = -1;
-    }
-
-    function hoverElement() {
-        if (currentPrtclsIndex > -1) {
-            if (visitedPrtcl === -1) {
-                visibleTooltip = false;
-                clearTimeout(tooltipTimeout);
-                visitedPrtcl = currentPrtclsIndex;
-                tooltipTimeout = setTimeout(setTooltipTimeout, 700);
-            }
-
-            canvas.classList.add("move");
-        } else {
-            visibleTooltip = false;
-            clearTimeout(tooltipTimeout);
-            visitedPrtcl = -1;
-            canvas.classList.remove("move");
-        }
-    }
-
-    let stopMove = false;
-
-    function handleResize(mouse: { x: number; y: number }) {
-        const mousePosition = mouse.x - shift;
-        let min = 0;
-        let max = 99999999;
-        handlePauseInChanging();
-        const leftSub = prtcls[moveIndex - 1];
-        const rightSub = prtcls[moveIndex + 1];
-        if (leftSub) min = leftSub.x + leftSub.edge + shift;
-        if (rightSub) max = rightSub.x + shift;
-
-        if (currentPrtcl?.selected) {
-            if (rightResize) {
-                const distanceToBegin = mouse.x - currentPrtcl.x - shift;
-
-                if (mouse.x <= max && mouse.x > currentPrtcl.x + MINIMUM_BLOCK_TIME + shift) {
-                    currentPrtcl.edge = distanceToBegin;
-                } else if (mouse.x > max) {
-                    const innersubs = prtcls.filter(
-                        (p) => p.x > currentPrtcl.x && p.x + p.edge < mousePosition
-                    );
-                    if (innersubs.length > 1) return;
-                    currentPrtcl.edge = distanceToBegin;
-                    newTime = currentPrtcl.x + currentPrtcl.edge;
-                    const inners = prtcls.filter((p) => p.x > currentPrtcl.x);
-                    inners.forEach((inner) => {
-                        if (inner.x < newTime) {
-                            if (inner.edge > MINIMUM_BLOCK_TIME * zoomLevel) {
-                                const endPoint = inner.x + inner.edge;
-                                inner.x = newTime;
-                                inner.edge = endPoint - inner.x;
-                            } else {
-                                inner.x = newTime;
-                            }
-                        } else {
-                            // if (inner.x < newTime) {
-                            //   inner.x = newTime;
-                            // }
-                        }
-
-                        newTime = inner.x + inner.edge;
-                    });
-                }
-            } else {
-                const endPoint = currentPrtcl.x + currentPrtcl.edge;
-
-                if (mouse.x > min && mouse.x < currentPrtcl.x + currentPrtcl.edge - 0.3 + shift) {
-                    currentPrtcl.x = mouse.x - shift;
-                    currentPrtcl.edge = endPoint - mouse.x + shift;
-                } else if (mouse.x < min) {
-                    if (stopMove) return;
-                    const innersubs = prtcls.filter(
-                        (p) => p.x + p.edge > mousePosition && p.x < currentPrtcl.x
-                    );
-                    if (innersubs.length > 1) return;
-                    const inners = prtcls.filter((p) => p.x < mouse.x - shift);
-                    newTime = mouse.x - shift;
-
-                    for (let i = inners.length - 1; i >= 0; i--) {
-                        if (inners[i].x + inners[i].edge > newTime) {
-                            if (inners[i].edge > MINIMUM_BLOCK_TIME * zoomLevel) {
-                                currentPrtcl.x = mouse.x - shift;
-                                currentPrtcl.edge = endPoint - mouse.x + shift;
-                                inners[i].edge = newTime - inners[i].x;
-                            } else {
-                                if (newTime - inners[i].edge < 0) {
-                                    stopMove = true;
-                                } else {
-                                    currentPrtcl.x = mouse.x - shift;
-                                    currentPrtcl.edge = endPoint - mouse.x + shift;
-                                    inners[i].x = newTime - inners[i].edge;
-                                    newTime = inners[i].x;
-                                }
-                            }
-                        }
-                    }
-                }
-            }
-        }
-    }
-
-    function toTime(s: number, withMilliSecond: boolean) {
-        try {
-            if (withMilliSecond) return new Date(s * 1000).toISOString().substr(11, 11);
-            return new Date(s * 1000).toISOString().substr(11, 8);
-        } catch (error) {
-            return "";
-        }
-    }
-
-    function setData(aligns: TimeBlock[]) {
-        // console.log({ aligns });
-        prtcls = aligns.map(
-            (p, i) =>
-                // @ts-expect-error: square is some how a class
-                new Square(
-                    p.begin * zoomLevel,
-                    LINE_HEIGHT,
-                    (p.end - p.begin) * zoomLevel,
-                    i,
-                    p.text,
-                    p.id
-                    // p.startIndex,
-                    // p.endIndex
-                )
-        );
-        return prtcls;
-    }
-
-    function showTooltip() {
-        if (currentPrtcl) {
-            ctx.save();
-            ctx.translate(mouse.x + 10, mouse.y - 10);
-            ctx.fillStyle = options.colors.tooltipBackground;
-            ctx.font = "12px Arial";
-            const width = ctx.measureText(currentPrtcl.text).width;
-            const height = 20;
-            ctx.fillRect(5 + width / -2, -22, width + 20, height);
-            ctx.fillStyle = options.colors.tooltipText;
-            ctx.fillText(currentPrtcl.text, 15 + width / -2, -12);
-            ctx.restore();
-        }
-    }
-
-    function cancelAnimate() {
-        cancelAnimationFrame(animationID);
-    }
-
-    function handleCursorOutOfViewPort(time: number) {
-        if (!autoScroll || scrolling || !options.scrollingIsTracking) return;
-
-        const viewportWidth = endTimeShow - beginingTimeShow;
-        const margin = viewportWidth * 0.2; // 20% margin
-
-        // Calculate cursor position relative to viewport
-        const cursorPosition = time;
-        const distanceFromEnd = endTimeShow - cursorPosition;
-        const distanceFromStart = cursorPosition - beginingTimeShow;
-
-        // Scroll if cursor is too close to edges
-        if (distanceFromEnd < margin) {
-            // Cursor is near right edge - scroll right
-            const targetShift = -1 * (time * zoomLevel - w * 0.7);
-            shift = Math.max(targetShift, maximumShift);
-        } else if (distanceFromStart < margin) {
-            // Cursor is near left edge - scroll left
-            const targetShift = -1 * (time * zoomLevel - w * 0.3);
-            shift = Math.min(targetShift, 0);
-        }
-
-        checkShift();
-        if (bgCtx) {
-            drawBG(bgCtx);
-        }
-    }
-
-    function changeCursorViewPort(time: number) {
-        if (scrolling) return;
-        const transitionLevel = 1;
-        const margin = (endTimeShow - beginingTimeShow) * 0.2;
-        const remainingTime = endTimeShow - time;
-
-        if (remainingTime < margin && autoScroll) {
-            const delta = margin - remainingTime;
-
-            if (shift - delta * zoomLevel * transitionLevel < maximumShift) {
-                shift = maximumShift;
-            } else {
-                shift -= delta * zoomLevel * transitionLevel;
-            }
-        } else if (endTimeShow < time || beginingTimeShow > time) {
-            let s;
-
-            if (endTimeShow <= time) {
-                s = -1 * time * zoomLevel + w * 0.8;
-            } else {
-                s = -1 * time * zoomLevel + 200;
-            }
-
-            if (s < 0) {
-                shift = s;
-            } else {
-                shift = 0;
-            }
-        }
-
-        checkShift();
-        if (bgCtx) {
-            drawBG(bgCtx);
-        }
-    }
-
-    function drawBG(context: CanvasRenderingContext2D, r = 1) {
-        let rat = 5;
-        if (zoomLevel > 50) rat = 10;
-        if (zoomLevel > 100) rat = 15;
-        if (zoomLevel > 150) rat = 20;
-        if (zoomLevel > 200) rat = 25;
-
-        globalRatio = globalRatio * r;
-        context.save();
-        context.clearRect(0, 0, canvas2.width, canvas2.height);
-        context.fillStyle = "transparent";
-        context.fillRect(0, 0, w, h);
-        context.lineWidth = 0.3;
-        context.strokeStyle = "lightgrey";
-        context.fillStyle = "grey"; // vertical grid
-
-        drawVerticalGrid(context);
-        context.lineWidth = 0.5;
-        context.strokeStyle = "grey"; //X-Axis
-
-        drawXaxis(context);
-
-        function drawVerticalGrid(ctx: CanvasRenderingContext2D) {
-            const initNumber = shift % zoomLevel;
-
-            for (let i = initNumber; i < w; i += zoomLevel / rat) {
-                if (i > 0) {
-                    ctx.beginPath();
-                    ctx.moveTo(i, 0);
-                    ctx.lineTo(i, h);
-                    ctx.moveTo(i, 0);
-
-                    ctx.closePath();
-                    ctx.stroke();
-                }
-            }
-        }
-
-        function drawXaxis(ctx: CanvasRenderingContext2D) {
-            ctx.beginPath();
-            let counter = 0;
-            const initNumber = shift % zoomLevel;
-            for (let i = initNumber; i < w; i += zoomLevel / rat) {
-                if (counter % rat === 0) {
-                    ctx.moveTo(i, 0);
-                    ctx.lineTo(i, 30);
-                    context.fillStyle = "grey";
-                    if (zoomLevel > 50) {
-                        ctx.fillText(
-                            ` ${toTime((i - shift) / zoomLevel, false)}`,
-                            i,
-                            30,
-                            zoomLevel - 2
-                        );
-                    } else {
-                        // let viewPortTime = endTimeShow - beginingTimeShow;
-                        ctx.fillText(
-                            ` ${new Date(((i - shift) / zoomLevel) * 1000)
-                                .toISOString()
-                                .substr(endTime > 7000 ? 11 : 14, 5)}`,
-                            i,
-                            30,
-                            zoomLevel - 2
-                        );
-                    }
-                } else {
-                    ctx.moveTo(i, 0);
-                    ctx.lineTo(i, 10);
-                }
-                counter++;
-            }
-
-            ctx.closePath();
-            ctx.stroke();
-        }
-    }
-
-    function handleClick(e: MouseEvent) {
-        scrolling =
-            cursorInScrollBar() && isMouseDown && !resizing && !moving && !resizing && !swaping;
-    }
-
-    function cursorInScrollBar() {
-        if (
-            mouse.x > scrollPosition &&
-            mouse.x < scrollPosition + scrollSize &&
-            mouse.y > TIMELINE_HEIGHT - SCROLL_BAR_HEIGHT &&
-            mouse.y < TIMELINE_HEIGHT
-        ) {
-            return true;
-        } else {
-            if (scrolling && !resizing && !swaping) return true;
-        }
-
-        return false;
-    }
-
-    function changeAutoScroll(a: any) {
-        autoScroll = a.detail.status;
-    }
-
-    function drawScroll() {
-        if (options.scrollingIsTracking) return;
-        const cursorInScroll = cursorInScrollBar();
-        scrolling = cursorInScroll && isMouseDown && !resizing;
-        if (cursorInScroll || scrolling) {
-            canvas.classList.add("e-resize");
-        } else {
-            canvas.classList.remove("e-resize");
-        }
-        const context = ctx;
-        context.save();
-        context.fillStyle = options.colors.scrollBarBackground;
-        context.fillRect(0, TIMELINE_HEIGHT - 10, w, 10);
-        context.fillStyle =
-            cursorInScroll || scrolling ? options.colors.scrollBarHover : options.colors.scrollBar;
-        const d = endTimeShow - beginingTimeShow;
-        let rat = d / endTime;
-        if (rat > 1) rat = 10;
-        scrollSize = Math.max(w * rat, 10);
-        const ratio = beginingTimeShow / endTime;
-        scrollPosition = ratio * w;
-        changeInScrollPosition(scrollPosition);
-        const padding = 1;
-        // console.log({
-        //     scrollSize,
-        //     scrollPosition,
-        //     2: TIMELINE_HEIGHT - SCROLL_BAR_HEIGHT + padding,
-        //     4: SCROLL_BAR_HEIGHT - 2 - 2 * padding,
-        // });
-        context.fillRect(
-            scrollPosition,
-            TIMELINE_HEIGHT - SCROLL_BAR_HEIGHT + padding,
-            scrollSize,
-            SCROLL_BAR_HEIGHT - 2 - 2 * padding
-        );
-        context.restore();
-    }
-
-    function addListenerHandlers(canvas: HTMLCanvasElement) {
-        window.removeEventListener("resize", resize);
-        window.addEventListener("resize", resize);
-        // canvas.removeEventListener("wheel", handleZoom);
-        // canvas.addEventListener("wheel", handleZoom);
-        canvas.removeEventListener("mousemove", mousemoveGeneral);
-        canvas.addEventListener("mousemove", mousemoveGeneral);
-        canvas.removeEventListener("mousemove", handleMouseMove);
-        canvas.addEventListener("mousemove", handleMouseMove);
-        window.removeEventListener("mouseup", mouseup);
-        window.addEventListener("mouseup", mouseup);
-        canvas.removeEventListener("mousedown", handleMouseDown);
-        canvas.addEventListener("mousedown", handleMouseDown);
-        canvas.removeEventListener("dblclick", handleDbClick);
-        canvas.addEventListener("dblclick", handleDbClick);
-        window.removeEventListener("changeAutoScroll", changeAutoScroll);
-        window.addEventListener("changeAutoScroll", changeAutoScroll);
-        canvas.removeEventListener("click", handleClick);
-        canvas.addEventListener("click", handleClick);
-    }
-
-    function checkShift() {
-        const newShift = w - endTime * zoomLevel;
-
-        if (newShift > 0) {
-            maximumShift = 0;
-        } else {
-            maximumShift = newShift;
-        }
-
-        if (shift < maximumShift) {
-            shift = maximumShift;
-        }
-    }
-
-    function animate() {
-        if (!player) player = getPlayer();
-        currentTime = player.currentTime || 0;
-        calculateViewPortTimes();
-        if (player) handleCursorOutOfViewPort(currentTime);
-
-        ctx.clearRect(0, 0, w, ctx.canvas.height);
-
-        if (!moving) currentPrtclsIndex = -1;
-        currentHoveredIndex = -1;
-        prtcls.filter((e, i) => {
-            const isHoveredPrtcl = cursorInRect(mouse.x, mouse.y, e.x, e.y, e.edge, e.edge);
-            const position = currentTime * zoomLevel + shift;
-
-            if (position - shift >= e.x && position - shift <= e.x + e.edge) {
-                currentHoveredIndex = i;
-            }
-
-            if (isHoveredPrtcl && !resizing && !moving) currentPrtclsIndex = i;
-            e.active = !!isHoveredPrtcl;
-
-            const condition =
-                (e.x >= -1 * shift && e.x + e.edge < -1 * shift + w) ||
-                (e.x + e.edge > -1 * shift && e.x < -1 * shift + w);
-
-            if (condition) {
-                e.draw(ctx);
-            }
-
-            return condition;
-        });
-
-        if (!resizing && !moving) {
-            moveIndex = currentPrtclsIndex;
-            currentPrtcl = prtcls[currentPrtclsIndex];
-        }
-
-        if (beginingTimeShow > endTime) shift = endTime - beginingTimeShow; //red cursor time
-
-        drawTimeCursor();
-        drawScroll();
-        checkShift();
-
-        if (visibleTooltip && !resizing && !moving && !leftResize && !rightResize) {
-            showTooltip();
-        }
-
-        handleCursor();
-        animationID = window.requestAnimationFrame(animate);
-    }
-
-    return {
-        setData,
-        cancelAnimate,
-        changeZoom,
-        changeCursorViewPort,
-    };
-}
diff --git a/webviews/codex-webviews/src/CodexCellEditor/Timeline/ZoomButton.tsx b/webviews/codex-webviews/src/CodexCellEditor/Timeline/ZoomButton.tsx
deleted file mode 100644
index 8a0831ad1..000000000
--- a/webviews/codex-webviews/src/CodexCellEditor/Timeline/ZoomButton.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import React from "react";
-import { Button } from "../../components/ui/button";
-import { ZoomIn, ZoomOut } from "lucide-react";
-
-interface ZoomButtonProps {
-    initialZoomLevel: number;
-    changeZoomLevel: (zoomLevel: number) => void;
-    zoomIn?: boolean;
-}
-
-const ZoomButton: React.FC<ZoomButtonProps> = ({
-    initialZoomLevel,
-    changeZoomLevel,
-    zoomIn = true,
-}) => {
-    const lastClickTime = React.useRef<number>(0);
-    const [multiplier, setMultiplier] = React.useState<number>(1.5);
-
-    const handleClick = () => {
-        const currentTime = Date.now();
-        const timeDiff = currentTime - lastClickTime.current;
-
-        // If clicks are within 500ms, increase the multiplier
-        if (timeDiff < 500) {
-            setMultiplier((prev) => Math.min(prev * 1.5, 5));
-        } else {
-            setMultiplier(1.5);
-        }
-
-        lastClickTime.current = currentTime;
-        console.log({ multiplier, initialZoomLevel });
-        const newZoomLevel = zoomIn ? initialZoomLevel * multiplier : initialZoomLevel / multiplier;
-
-        changeZoomLevel(newZoomLevel);
-    };
-
-    return (
-        <Button
-            variant="secondary"
-            size="icon"
-            className="flex-1 rounded-none"
-            onClick={handleClick}
-        >
-            {zoomIn ? <ZoomIn className="h-4 w-4" /> : <ZoomOut className="h-4 w-4" />}
-        </Button>
-    );
-};
-
-export default ZoomButton;
diff --git a/webviews/codex-webviews/src/CodexCellEditor/Timeline/index.css b/webviews/codex-webviews/src/CodexCellEditor/Timeline/index.css
deleted file mode 100644
index 02d913bdc..000000000
--- a/webviews/codex-webviews/src/CodexCellEditor/Timeline/index.css
+++ /dev/null
@@ -1,69 +0,0 @@
-.wrap {
-    position: absolute;
-
-    z-index: 2;
-    background-color: "white";
-    cursor: default;
-}
-.timeline-editor {
-    position: relative;
-    padding: 0 !important;
-    height: 130px;
-    transition: 0.3s;
-    cursor: grab;
-}
-.z-index-1 {
-    z-index: 1;
-}
-.z-index-2 {
-    z-index: 2;
-}
-.z-index-3 {
-    z-index: 3;
-}
-
-.e-resize {
-    cursor: e-resize;
-}
-.move {
-    cursor: move;
-}
-.col-resize {
-    cursor: col-resize;
-}
-.grabbing {
-    cursor: -webkit-grabbing;
-    cursor: grabbing;
-}
-.grab {
-    cursor: -webkit-grabbing;
-    cursor: grab;
-}
-.crosshair {
-    cursor: crosshair;
-}
-.timeline-toolbar {
-    position: absolute;
-    top: -34px;
-    left: 0px;
-}
-.toolbar-button {
-    font-size: 20px;
-    color: #859daf;
-}
-.toolbar-next-prev {
-    font-size: 20px;
-    position: absolute;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    top: -25px;
-    width: calc(100% - 80px);
-    height: 0;
-    color: #859daf;
-}
-
-.toolbar-prev-sentence-button {
-    top: -50px;
-    left: 0px;
-}
diff --git a/webviews/codex-webviews/src/CodexCellEditor/Timeline/index.tsx b/webviews/codex-webviews/src/CodexCellEditor/Timeline/index.tsx
deleted file mode 100644
index 6140934a8..000000000
--- a/webviews/codex-webviews/src/CodexCellEditor/Timeline/index.tsx
+++ /dev/null
@@ -1,246 +0,0 @@
-import React, { useContext, useEffect, useRef, useState } from "react";
-import TimeLine, { TimelineReturn } from "./T";
-import { VSCodeButton } from "@vscode/webview-ui-toolkit/react";
-import "./index.css";
-import { TimeBlock } from "../../../../../types";
-import ReactPlayer from "react-player";
-import ZoomButton from "./ZoomButton";
-import ScrollToContentContext from "../contextProviders/ScrollToContentContext";
-
-export interface TimelineProps {
-    setAutoPlay: (autoPlay: boolean) => void;
-    autoPlay: boolean;
-    playerRef?: React.RefObject<ReactPlayer>;
-    changeAreaShow: (beginingTimeShow: number, endTimeShow: number) => void;
-    changeZoomLevel: (zoomLevel: number) => void;
-    changeShift: (shift: number) => void;
-    setAligns: (alignments: TimeBlock[]) => void;
-    audioRef?: React.RefObject<HTMLAudioElement>;
-    src: string;
-    data: TimeBlock[];
-    autoScroll: boolean;
-    colors: {
-        background: string;
-        box: string;
-        boxHover: string;
-        selectedBox: string;
-        playingBox: string;
-        text: string;
-        selectedText: string;
-        tooltipBackground: string;
-        tooltipText: string;
-        scrollBarBackground: string;
-        scrollBar: string;
-        scrollBarHover: string;
-    };
-    paddingLeft?: number;
-    disableResetButton?: boolean;
-    disableSaveButton?: boolean;
-    onSave: () => void;
-    onReset: () => void;
-    initialZoomLevel?: number; // Add this new prop
-}
-
-export default function Timeline(props: TimelineProps) {
-    // const [scrollingIsTracking, setScrollingIsTracking] = useState(true);
-    const [scrollPosition, setScrollPosition] = useState(0);
-    let timeLine: TimelineReturn | undefined;
-    let shift: number;
-    let zoomLevel: number;
-    let data: TimeBlock[];
-    let beginingTimeShow: number;
-    let endTimeShow: number;
-    const canvas1 = useRef(null);
-    const canvasAudio = useRef(null);
-    const canvas2 = useRef(null);
-
-    const { setContentToScrollTo, contentToScrollTo } = useContext(ScrollToContentContext);
-    const changeAlignment = (z: TimeBlock[]) => {
-        data = z;
-        props.setAligns(z);
-    };
-
-    const changeZoomLevel = (z: number) => {
-        props.changeZoomLevel(z);
-        zoomLevel = z;
-    };
-
-    const changeShift = (s: number) => {
-        props.changeShift(s);
-        shift = s;
-    };
-
-    const changeAreaShow = (b: number, e: number) => {
-        props.changeAreaShow(b, e);
-        beginingTimeShow = b;
-        endTimeShow = e;
-    };
-
-    const changeInScrollPosition = (position: number) => {
-        setScrollPosition(position);
-    };
-
-    const defaultFunction = () => {};
-
-    const drawTimeLine = (p: TimelineProps & { endTime: number }) => {
-        timeLine = TimeLine({
-            canvas: canvas1.current as unknown as HTMLCanvasElement,
-            canvas2: canvas2.current as unknown as HTMLCanvasElement,
-            alignments: p.data,
-            endTime: p.endTime,
-            setContentToScrollTo: (id) => {
-                if (id && id !== contentToScrollTo) {
-                    setContentToScrollTo(id);
-                }
-            },
-            getPlayer: () => ({
-                currentTime: props.playerRef?.current?.getCurrentTime() || 0,
-                play: (currentTime: number) => {
-                    props.playerRef?.current?.seekTo(currentTime);
-                    // props.playerRef?.current?.forceUpdate();
-                },
-            }),
-            changeAlignment: changeAlignment || defaultFunction,
-            changeZoomLevel: changeZoomLevel || defaultFunction,
-            changeInScrollPosition: changeInScrollPosition || defaultFunction,
-            changeShift: changeShift || defaultFunction,
-            tellAreaChangesToRectComponent: changeAreaShow || defaultFunction,
-            options: {
-                autoScroll: props.autoScroll,
-                initialZoomLevel: props.initialZoomLevel, // Pass the prop through
-                scrollingIsTracking: true,
-                scrollPosition: scrollPosition,
-                colors: {
-                    background: props.colors?.background || "transparent",
-                    box: props.colors?.box || "#a9a9a9",
-                    boxHover: props.colors?.boxHover || "#80add6",
-                    selectedBox: props.colors?.selectedBox || "#1890ff",
-                    playingBox: props.colors?.playingBox || "#f0523f",
-                    text: props.colors?.text || "#212b33",
-                    selectedText: props.colors?.selectedText || "white",
-                    tooltipBackground: props.colors?.tooltipBackground || "#474e54",
-                    tooltipText: props.colors?.tooltipText || "white",
-                    scrollBarBackground: props.colors?.scrollBarBackground || "#f1f3f9",
-                    scrollBar: props.colors?.scrollBar || "#c2c9d6",
-                    scrollBarHover: props.colors?.scrollBarHover || "#8f96a3",
-                },
-            },
-        });
-    };
-
-    const resetTimeline = () => {
-        if (props.data.length > 0 && props.src) {
-            drawTimeLine({ ...props, endTime: props.playerRef?.current?.getDuration() || 0 });
-        }
-    };
-
-    useEffect(() => {
-        resetTimeline();
-        return () => {
-            if (timeLine) timeLine.cancelAnimate();
-        };
-    }, [props.data, props.src, props.initialZoomLevel]); // Add props.resetTimeline to the dependency array
-
-    const style = {
-        height: "90px",
-        paddingLeft: props.paddingLeft,
-        width: "100%",
-    };
-
-    const initialZoomLevel = props.initialZoomLevel || 1;
-    return (
-        <div style={{ display: "flex", flexDirection: "row" }}>
-            <div
-                style={{
-                    display: "flex",
-                    justifyContent: "end",
-                    flexDirection: "column",
-                    flex: 1,
-                    // gap: "10px",
-                    // padding: "10px",
-                    backgroundColor: "var(--vscode-scrollbar-shadow)",
-                }}
-            >
-                <VSCodeButton
-                    style={{
-                        display: "flex",
-                        flex: 1,
-                        borderRadius: 0,
-                    }}
-                    onClick={() => {
-                        props.setAutoPlay(!props.autoPlay);
-                    }}
-                >
-                    <i
-                        className={`codicon codicon-${
-                            props.autoPlay ? "run-errors" : "run-all-coverage"
-                        }`}
-                    ></i>
-                </VSCodeButton>
-                <ZoomButton
-                    initialZoomLevel={initialZoomLevel}
-                    changeZoomLevel={changeZoomLevel}
-                    zoomIn={true}
-                />
-
-                <ZoomButton
-                    initialZoomLevel={initialZoomLevel}
-                    changeZoomLevel={changeZoomLevel}
-                    zoomIn={false}
-                />
-            </div>
-            <div style={style} className="timeline-editor">
-                <div hidden>
-                    <audio src={props.src} ref={props.audioRef || canvasAudio} />
-                </div>
-                <div className="wrap z-index-2">
-                    <canvas style={{ display: "block" }} ref={canvas1}></canvas>
-                </div>
-                <div className="wrap z-index-1">
-                    <canvas style={{ display: "block" }} ref={canvas2}></canvas>
-                </div>
-            </div>
-            <div
-                style={{
-                    display: "flex",
-                    justifyContent: "end",
-                    flexDirection: "column",
-                    flex: 1,
-                    // gap: "10px",
-                    // padding: "10px",
-                    backgroundColor: "var(--vscode-scrollbar-shadow)",
-                }}
-            >
-                <VSCodeButton
-                    style={{
-                        display: "flex",
-                        flex: 1,
-                        borderRadius: 0,
-                    }}
-                    appearance="secondary"
-                    disabled={props.disableResetButton}
-                    onClick={() => {
-                        resetTimeline();
-                        props.onReset();
-                    }}
-                >
-                    <i className="codicon codicon-refresh"></i>
-                </VSCodeButton>
-
-                <VSCodeButton
-                    style={{
-                        display: "flex",
-                        flex: 2,
-                        borderRadius: 0,
-                    }}
-                    disabled={props.disableSaveButton}
-                    onClick={() => {
-                        props.onSave();
-                    }}
-                >
-                    <i className="codicon codicon-save"></i>
-                </VSCodeButton>
-            </div>
-        </div>
-    );
-}
diff --git a/webviews/codex-webviews/src/CodexCellEditor/TimelineEditor.tsx b/webviews/codex-webviews/src/CodexCellEditor/TimelineEditor.tsx
deleted file mode 100644
index bda884742..000000000
--- a/webviews/codex-webviews/src/CodexCellEditor/TimelineEditor.tsx
+++ /dev/null
@@ -1,112 +0,0 @@
-import React, { useEffect, useState } from "react";
-import Timeline from "./Timeline/index";
-import { EditorPostMessages, TimeBlock } from "../../../../types";
-import ReactPlayer from "react-player";
-
-interface TimelineEditorProps {
-    playerRef: React.RefObject<ReactPlayer>;
-    data: TimeBlock[];
-    vscode: any;
-    setAutoPlay: (autoPlay: boolean) => void;
-    autoPlay: boolean;
-    currentTime: number;
-}
-
-const getListOfTimeBlocksWithUpdatedTimes = (
-    newTimeBlocks: TimeBlock[],
-    oldTimeBlocks: TimeBlock[]
-) => {
-    const timeBlocksWithUpdates: TimeBlock[] = [];
-    newTimeBlocks.forEach((newTimeBlock) => {
-        const oldBlock = oldTimeBlocks.find((block) => block.id === newTimeBlock.id);
-
-        if (oldBlock) {
-            if (newTimeBlock.begin !== oldBlock.begin) {
-                timeBlocksWithUpdates.push(newTimeBlock);
-            } else if (newTimeBlock.end !== oldBlock.end) {
-                timeBlocksWithUpdates.push(newTimeBlock);
-            } else {
-                return;
-            }
-        }
-    });
-    return timeBlocksWithUpdates;
-};
-
-const TimelineEditor: React.FC<TimelineEditorProps> = ({
-    playerRef,
-    data,
-    vscode,
-
-    setAutoPlay,
-    autoPlay,
-    currentTime,
-}) => {
-    const [timeBlocksWithUpdates, setTimeBlocksWithUpdates] = useState<TimeBlock[]>([]);
-    const [zoomLevel, setZoomLevel] = useState(90);
-    return (
-        <div
-            style={{
-                display: "flex",
-                flexDirection: "column",
-                maxWidth: "40rem",
-                alignSelf: "center",
-                width: "100%",
-            }}
-        >
-            <Timeline
-                autoPlay={autoPlay}
-                setAutoPlay={setAutoPlay}
-                initialZoomLevel={zoomLevel}
-                changeAreaShow={(start: number, end: number) => {
-                    // console.log({ start, end });
-                }}
-                changeZoomLevel={(zoomLevel: number) => {
-                    setZoomLevel(zoomLevel);
-                }}
-                changeShift={(shift: number) => {
-                    // console.log({ shift });
-                }}
-                setAligns={(alignments: TimeBlock[]) => {
-                    const timeBlocksWithUpdates = getListOfTimeBlocksWithUpdatedTimes(
-                        alignments,
-                        data
-                    );
-                    setTimeBlocksWithUpdates(timeBlocksWithUpdates);
-                }}
-                playerRef={playerRef}
-                // audioRef={playerRef}
-                src={"..."}
-                data={data}
-                autoScroll
-                colors={{
-                    background: "transparent",
-                    box: "#a9a9a9",
-                    boxHover: "#80add6",
-                    selectedBox: "#1890ff",
-                    playingBox: "#f0523f",
-                    text: "#212b33",
-                    selectedText: "white",
-                    tooltipBackground: "#474e54",
-                    tooltipText: "white",
-                    scrollBarBackground: "#f1f3f9",
-                    scrollBar: "#c2c9d6",
-                    scrollBarHover: "#8f96a3",
-                }}
-                disableResetButton={!(timeBlocksWithUpdates.length > 0)}
-                onSave={() => {
-                    vscode.postMessage({
-                        command: "saveTimeBlocks",
-                        content: timeBlocksWithUpdates,
-                    }) as EditorPostMessages;
-                }}
-                onReset={() => {
-                    setTimeBlocksWithUpdates([]);
-                }}
-                disableSaveButton={!(timeBlocksWithUpdates.length > 0)}
-            />
-        </div>
-    );
-};
-
-export default TimelineEditor;
diff --git a/webviews/codex-webviews/src/CodexCellEditor/VideoPlayer.tsx b/webviews/codex-webviews/src/CodexCellEditor/VideoPlayer.tsx
index 4d1e85a64..201bceeac 100644
--- a/webviews/codex-webviews/src/CodexCellEditor/VideoPlayer.tsx
+++ b/webviews/codex-webviews/src/CodexCellEditor/VideoPlayer.tsx
@@ -1,14 +1,17 @@
-import React, { useEffect, useState } from "react";
-import ReactPlayer, { Config } from "react-player";
+import React, { useState, useEffect, useCallback, useRef } from "react";
+import ReactPlayer from "react-player";
 import { useSubtitleData } from "./utils/vttUtils";
 import { QuillCellContent } from "../../../../types";
+import type { ReactPlayerRef } from "./types/reactPlayerTypes";
 
 interface VideoPlayerProps {
-    playerRef: React.RefObject<ReactPlayer>;
+    playerRef: React.RefObject<ReactPlayerRef>;
     videoUrl: string;
     translationUnitsForSection: QuillCellContent[];
     showSubtitles?: boolean;
     onTimeUpdate?: (time: number) => void;
+    onPlay?: () => void;
+    onPause?: () => void;
     autoPlay: boolean;
     playerHeight: number;
 }
@@ -19,66 +22,266 @@ const VideoPlayer: React.FC<VideoPlayerProps> = ({
     translationUnitsForSection,
     showSubtitles = true,
     onTimeUpdate,
+    onPlay,
+    onPause,
     autoPlay,
     playerHeight,
 }) => {
     const { subtitleUrl } = useSubtitleData(translationUnitsForSection);
-    let file: Config["file"] = undefined;
-    if (subtitleUrl && showSubtitles) {
-        file = {
-            tracks: [
-                {
-                    kind: "subtitles",
-                    src: subtitleUrl,
-                    srcLang: "en", // FIXME: make this dynamic
-                    label: "English", // FIXME: make this dynamic
-                    default: true,
-                },
-            ],
-        };
-    }
     const [error, setError] = useState<string | null>(null);
+    const [playing, setPlaying] = useState(false);
+    const [volume, setVolume] = useState(1);
+    const lastVideoElementForVolumeRef = useRef<HTMLVideoElement | null>(null);
+
+    // Check if the URL is a YouTube URL
+    const isYouTubeUrl = videoUrl?.includes("youtube.com") || videoUrl?.includes("youtu.be");
 
-    const handleError = (e: any) => {
-        console.error("Video player error:", e);
-        if (e.target.error.code === 4) {
-            setError("To use a local video, the file must be located in the project folder.");
+    const handleError = (error: any) => {
+        console.error("Video player error:", error);
+        // ReactPlayer onError receives an error object or event
+        if (error?.target?.error) {
+            const videoError = error.target.error;
+            if (videoError.code === 4) {
+                setError("To use a local video, the file must be located in the project folder.");
+            } else {
+                setError(`Video player error: ${videoError.message || "Unknown error"}`);
+            }
+        } else if (error?.message) {
+            setError(`Video player error: ${error.message}`);
+        } else {
+            setError("Failed to load video. Please check the video URL.");
         }
     };
-    const handleProgress = (state: {
-        played: number;
-        playedSeconds: number;
-        loaded: number;
-        loadedSeconds: number;
-    }) => {
-        onTimeUpdate?.(state.playedSeconds);
+
+    // React Player v3 uses standard HTML video events
+    const handleTimeUpdate = (e: React.SyntheticEvent<HTMLVideoElement>) => {
+        const target = e.target as HTMLVideoElement;
+        const currentTime = target.currentTime;
+        onTimeUpdate?.(currentTime);
+    };
+
+    // Coalesce rapid play/pause events to avoid endless loop when switching cells quickly.
+    // Only suppress events that come within a short window of the previous one.
+    const lastPlayPauseTimeRef = useRef(0);
+    const COALESCE_MS = 30;
+
+    const handlePlay = () => {
+        const now = Date.now();
+        if (now - lastPlayPauseTimeRef.current < COALESCE_MS) return;
+        lastPlayPauseTimeRef.current = now;
+        setPlaying(true);
+        onPlay?.();
+    };
+
+    const handlePause = () => {
+        const now = Date.now();
+        if (now - lastPlayPauseTimeRef.current < COALESCE_MS) return;
+        lastPlayPauseTimeRef.current = now;
+        setPlaying(false);
+        onPause?.();
+    };
+
+    const handleReady = () => {
+        setError(null);
+        console.log("VideoPlayer: Player is ready");
+        if (autoPlay) {
+            setPlaying(true);
+        }
     };
 
+    const prevVideoUrlRef = useRef(videoUrl);
+    useEffect(() => {
+        if (autoPlay && videoUrl) {
+            setPlaying(true);
+        } else if (prevVideoUrlRef.current !== videoUrl) {
+            setPlaying(false);
+            prevVideoUrlRef.current = videoUrl;
+        }
+    }, [videoUrl, autoPlay]);
+
+    // Build config based on video type
+    const playerConfig: Record<string, any> = {};
+    if (isYouTubeUrl) {
+        // YouTube config uses YouTubeVideoElement config structure
+        playerConfig.youtube = {
+            referrerPolicy: "strict-origin-when-cross-origin",
+        };
+    }
+
+    // Helper function to get the actual video element from ReactPlayer ref
+    const getVideoElement = useCallback((): HTMLVideoElement | null => {
+        if (!playerRef.current) return null;
+
+        // ReactPlayer v3 may return the video element directly, or we need to get it via getInternalPlayer
+        const internalPlayer = playerRef.current.getInternalPlayer?.();
+        if (internalPlayer instanceof HTMLVideoElement) {
+            return internalPlayer;
+        }
+
+        // If getInternalPlayer returns an object, try to find the video element
+        if (internalPlayer && typeof internalPlayer === "object") {
+            const foundVideo =
+                (internalPlayer as any).querySelector?.("video") ||
+                (internalPlayer as any).video ||
+                internalPlayer;
+            if (foundVideo instanceof HTMLVideoElement) {
+                return foundVideo;
+            }
+        }
+
+        // Check if playerRef.current itself is a video element
+        if (playerRef.current instanceof HTMLVideoElement) {
+            return playerRef.current;
+        }
+
+        // Try to find video element in the DOM near the ref
+        const wrapper = playerRef.current as any;
+        const foundVideo =
+            wrapper.querySelector?.("video") || wrapper.parentElement?.querySelector?.("video");
+        if (foundVideo instanceof HTMLVideoElement) {
+            return foundVideo;
+        }
+
+        return null;
+    }, [playerRef]);
+
+    // Own volume and re-apply on every render so it sticks despite something resetting the element.
+    // Sync from native control via volumechange so user adjustments are kept in state.
+    useEffect(() => {
+        const videoElement = getVideoElement();
+        if (!videoElement) return;
+
+        const isNewElement = videoElement !== lastVideoElementForVolumeRef.current;
+        if (isNewElement) {
+            lastVideoElementForVolumeRef.current = videoElement;
+            videoElement.volume = volume;
+            const onVolumeChange = () => setVolume(videoElement.volume);
+            videoElement.addEventListener("volumechange", onVolumeChange);
+            return () => {
+                videoElement.removeEventListener("volumechange", onVolumeChange);
+                lastVideoElementForVolumeRef.current = null;
+            };
+        }
+        videoElement.volume = volume;
+    });
+
+    // Add subtitle tracks for local videos (React Player v3 uses standard HTML video elements)
+    useEffect(() => {
+        if (subtitleUrl && showSubtitles && !isYouTubeUrl) {
+            // Use a small delay to ensure ReactPlayer has mounted and the ref is available
+            const timeoutId = setTimeout(() => {
+                const videoElement = getVideoElement();
+                if (!videoElement) return;
+
+                // Remove existing tracks
+                const existingTracks = videoElement.querySelectorAll("track");
+                existingTracks.forEach((track) => track.remove());
+
+                // Add subtitle track
+                const track = document.createElement("track");
+                track.kind = "subtitles";
+                track.src = subtitleUrl;
+                track.srclang = "en"; // FIXME: make this dynamic
+                track.label = "English"; // FIXME: make this dynamic
+                track.default = true;
+                videoElement.appendChild(track);
+            }, 100);
+
+            return () => clearTimeout(timeoutId);
+        }
+    }, [subtitleUrl, showSubtitles, isYouTubeUrl, getVideoElement]);
+
+    // Add direct timeupdate listener to video element for more frequent updates
+    // This ensures audio synchronization works even if onProgress doesn't fire frequently enough
+    useEffect(() => {
+        if (!onTimeUpdate) return;
+
+        let cleanup: (() => void) | null = null;
+
+        const setupListener = () => {
+            const videoElement = getVideoElement();
+            if (!videoElement) {
+                // Try again after a short delay if video element isn't ready
+                const timeoutId = setTimeout(() => {
+                    const delayedVideoElement = getVideoElement();
+                    if (delayedVideoElement) {
+                        const handleTimeUpdate = () => {
+                            onTimeUpdate(delayedVideoElement.currentTime);
+                        };
+                        delayedVideoElement.addEventListener("timeupdate", handleTimeUpdate);
+                        cleanup = () => {
+                            delayedVideoElement.removeEventListener("timeupdate", handleTimeUpdate);
+                        };
+                    }
+                }, 500);
+                return () => clearTimeout(timeoutId);
+            }
+
+            const handleTimeUpdate = () => {
+                onTimeUpdate(videoElement.currentTime);
+            };
+
+            videoElement.addEventListener("timeupdate", handleTimeUpdate);
+            cleanup = () => {
+                videoElement.removeEventListener("timeupdate", handleTimeUpdate);
+            };
+        };
+
+        const initialCleanup = setupListener();
+        return () => {
+            if (cleanup) cleanup();
+            if (initialCleanup) initialCleanup();
+        };
+    }, [onTimeUpdate, getVideoElement, videoUrl]);
+
+    // Log video URL for debugging
+    useEffect(() => {
+        if (videoUrl) {
+            console.log("VideoPlayer: videoUrl =", videoUrl);
+        } else {
+            console.warn("VideoPlayer: videoUrl is empty or undefined");
+        }
+    }, [videoUrl]);
+
     return (
         <div style={{ position: "relative" }}>
             <div
                 className="player-wrapper"
                 style={{ height: playerHeight || "auto", backgroundColor: "black" }}
             >
-                {error ? (
+                {!videoUrl ? (
+                    <div className="error-message" style={{ color: "white", padding: "20px" }}>
+                        No video URL provided. Please set a video URL in the metadata.
+                    </div>
+                ) : error ? (
                     <div className="error-message" style={{ color: "white", padding: "20px" }}>
                         {error}
                     </div>
                 ) : (
                     <ReactPlayer
-                        key={subtitleUrl}
+                        key={videoUrl}
                         ref={playerRef}
-                        url={videoUrl}
-                        playing={autoPlay}
-                        volume={0}
+                        src={videoUrl}
+                        playing={playing}
                         controls={true}
+                        volume={volume}
                         width="100%"
                         height={playerHeight}
                         onError={handleError}
-                        config={{
-                            file: file,
-                        }}
-                        onProgress={handleProgress}
+                        onReady={handleReady}
+                        config={playerConfig}
+                        onProgress={
+                            // ReactPlayer v3 onProgress receives { playedSeconds, played, loaded, loadedSeconds }
+                            // but TypeScript types incorrectly expect SyntheticEvent
+                            ((state: { playedSeconds: number }) => {
+                                // Handle time updates via onProgress for better compatibility
+                                onTimeUpdate?.(state.playedSeconds);
+                            }) as any
+                        }
+                        // Also listen to the video element's timeupdate event for more frequent updates
+                        onTimeUpdate={handleTimeUpdate}
+                        onPlay={handlePlay}
+                        onPause={handlePause}
                     />
                 )}
             </div>
diff --git a/webviews/codex-webviews/src/CodexCellEditor/VideoTimelineEditor.tsx b/webviews/codex-webviews/src/CodexCellEditor/VideoTimelineEditor.tsx
index 18192c60c..4d311ca5f 100644
--- a/webviews/codex-webviews/src/CodexCellEditor/VideoTimelineEditor.tsx
+++ b/webviews/codex-webviews/src/CodexCellEditor/VideoTimelineEditor.tsx
@@ -1,16 +1,28 @@
-import React, { useRef, useState, useEffect } from "react";
-import ReactPlayer from "react-player";
+import React, { useState, useEffect, useRef } from "react";
 import VideoPlayer from "./VideoPlayer";
-import TimelineEditor from "./TimelineEditor";
-import { QuillCellContent, TimeBlock } from "../../../../types";
+import { QuillCellContent } from "../../../../types";
 import { useMouse } from "@uidotdev/usehooks";
 import { VSCodeButton } from "@vscode/webview-ui-toolkit/react";
+import type { ReactPlayerRef } from "./types/reactPlayerTypes";
+import { useMultiCellAudioPlayback } from "./hooks/useMultiCellAudioPlayback";
+
+type AudioAttachmentState =
+    | "available"
+    | "available-local"
+    | "available-pointer"
+    | "deletedOnly"
+    | "none"
+    | "missing";
 
 interface VideoTimelineEditorProps {
     videoUrl: string;
     translationUnitsForSection: QuillCellContent[];
     vscode: any;
-    playerRef: React.RefObject<ReactPlayer>;
+    playerRef: React.RefObject<ReactPlayerRef>;
+    audioAttachments?: {
+        [cellId: string]: AudioAttachmentState;
+    };
+    muteVideoWhenPlayingAudio?: boolean;
 }
 
 const VideoTimelineEditor: React.FC<VideoTimelineEditorProps> = ({
@@ -18,6 +30,8 @@ const VideoTimelineEditor: React.FC<VideoTimelineEditorProps> = ({
     translationUnitsForSection,
     vscode,
     playerRef,
+    audioAttachments,
+    muteVideoWhenPlayingAudio = true,
 }) => {
     const [playerHeight, setPlayerHeight] = useState<number>(300);
     const [isDragging, setIsDragging] = useState(false);
@@ -54,35 +68,42 @@ const VideoTimelineEditor: React.FC<VideoTimelineEditorProps> = ({
             document.removeEventListener("mouseup", handleMouseUp);
         };
     }, [isDragging, mouse.y, startY, startHeight]);
-    // const playerRef = useRef<ReactPlayer>(null);
-    const [autoPlay, setAutoPlay] = useState(true);
+
+    const [autoPlay, setAutoPlay] = useState(false);
     const [currentTime, setCurrentTime] = useState(0);
+    const [isVideoPlaying, setIsVideoPlaying] = useState(false);
 
-    // Add this function to handle seeking
-    const handleSeek = (time: number) => {
-        if (playerRef.current) {
-            playerRef.current.seekTo(time, "seconds");
+    // Throttle time updates so we don't re-render on every timeupdate (many/sec), which
+    // was preventing volume adjustments from sticking. ~10 updates/sec keeps audio sync tight.
+    const lastTimeUpdateRef = useRef(0);
+    const THROTTLE_MS = 100;
+    const handleTimeUpdate = (time: number) => {
+        const now = Date.now();
+        if (now - lastTimeUpdateRef.current >= THROTTLE_MS) {
+            lastTimeUpdateRef.current = now;
+            setCurrentTime(time);
         }
     };
 
-    const removeHtmlTags = (text: string) => {
-        return text
-            .replace(/<[^>]*>?/g, "")
-            .replace(/\n/g, " ")
-            .replace(/&nbsp; ?/g, " ");
+    const handlePlay = () => {
+        setIsVideoPlaying(true);
     };
 
-    const data: TimeBlock[] = translationUnitsForSection.map((unit) => ({
-        begin: unit.timestamps?.startTime || 0,
-        end: unit.timestamps?.endTime || 0,
-        text: removeHtmlTags(unit.cellContent),
-        id: unit.cellMarkers[0],
-    }));
-
-    const handleTimeUpdate = (time: number) => {
-        setCurrentTime(time);
+    const handlePause = () => {
+        setIsVideoPlaying(false);
     };
 
+    // Use multi-cell audio playback hook
+    useMultiCellAudioPlayback({
+        translationUnitsForSection,
+        audioAttachments,
+        playerRef,
+        vscode,
+        isVideoPlaying,
+        currentVideoTime: currentTime,
+        muteVideoWhenPlayingAudio,
+    });
+
     return (
         <div style={{ display: "flex", flexDirection: "column" }}>
             <VideoPlayer
@@ -91,16 +112,10 @@ const VideoTimelineEditor: React.FC<VideoTimelineEditorProps> = ({
                 translationUnitsForSection={translationUnitsForSection}
                 autoPlay={autoPlay}
                 onTimeUpdate={handleTimeUpdate}
+                onPlay={handlePlay}
+                onPause={handlePause}
                 playerHeight={playerHeight}
             />
-            <TimelineEditor
-                autoPlay={autoPlay}
-                playerRef={playerRef}
-                data={data}
-                vscode={vscode}
-                setAutoPlay={setAutoPlay}
-                currentTime={currentTime}
-            />
             <div
                 style={{
                     width: "100%",
diff --git a/webviews/codex-webviews/src/CodexCellEditor/__tests___/AudioPlayButton.audioStateSync.test.tsx b/webviews/codex-webviews/src/CodexCellEditor/__tests___/AudioPlayButton.audioStateSync.test.tsx
new file mode 100644
index 000000000..50e013f0b
--- /dev/null
+++ b/webviews/codex-webviews/src/CodexCellEditor/__tests___/AudioPlayButton.audioStateSync.test.tsx
@@ -0,0 +1,351 @@
+import React from "react";
+import { describe, it, expect, beforeEach, vi, afterEach } from "vitest";
+import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+import AudioPlayButton from "../AudioPlayButton";
+
+// Mock the VSCode API
+const mockVscode = {
+    postMessage: vi.fn(),
+    getState: vi.fn(),
+    setState: vi.fn(),
+};
+
+Object.defineProperty(window, "vscodeApi", {
+    value: mockVscode,
+    writable: true,
+});
+
+// Mock the acquireVsCodeApi function
+global.acquireVsCodeApi = vi.fn().mockReturnValue(mockVscode);
+
+// Mock audio controller
+const mockPlayExclusive = vi.fn().mockResolvedValue(undefined);
+const mockAddListener = vi.fn();
+const mockRemoveListener = vi.fn();
+
+vi.mock("../lib/audioController", () => ({
+    globalAudioController: {
+        playExclusive: mockPlayExclusive,
+        addListener: mockAddListener,
+        removeListener: mockRemoveListener,
+    },
+}));
+
+// Mock audio cache
+const mockGetCachedAudioDataUrl = vi.fn().mockReturnValue("blob:test-audio-url");
+vi.mock("../lib/audioCache", () => ({
+    getCachedAudioDataUrl: () => mockGetCachedAudioDataUrl(),
+    setCachedAudioDataUrl: vi.fn(),
+}));
+
+// Mock useMessageHandler
+vi.mock("../hooks/useCentralizedMessageDispatcher", () => ({
+    useMessageHandler: vi.fn(() => {}),
+}));
+
+describe("AudioPlayButton - Audio State Synchronization", () => {
+    beforeEach(() => {
+        vi.clearAllMocks();
+        mockVscode.postMessage.mockClear();
+        mockPlayExclusive.mockClear();
+        mockPlayExclusive.mockResolvedValue(undefined);
+        mockGetCachedAudioDataUrl.mockReturnValue("blob:test-audio-url");
+    });
+
+    afterEach(() => {
+        vi.clearAllMocks();
+    });
+
+    describe("disabled prop behavior", () => {
+        it("should disable button when disabled prop is true", () => {
+            render(
+                <AudioPlayButton
+                    cellId="test-cell-1"
+                    state="available"
+                    vscode={mockVscode as any}
+                    disabled={true}
+                    isSourceText={false}
+                />
+            );
+
+            const button = screen.getByRole("button") as HTMLButtonElement;
+            expect(button.disabled).toBe(true);
+        });
+
+        it("should enable button when disabled prop is false", () => {
+            render(
+                <AudioPlayButton
+                    cellId="test-cell-2"
+                    state="available"
+                    vscode={mockVscode as any}
+                    disabled={false}
+                    isSourceText={false}
+                />
+            );
+
+            const button = screen.getByRole("button") as HTMLButtonElement;
+            expect(button.disabled).toBe(false);
+        });
+
+        it("should not call handlePlayAudio when disabled and clicked", async () => {
+            render(
+                <AudioPlayButton
+                    cellId="test-cell-3"
+                    state="available"
+                    vscode={mockVscode as any}
+                    disabled={true}
+                    isSourceText={false}
+                />
+            );
+
+            const button = screen.getByRole("button");
+            fireEvent.click(button);
+
+            // Wait a bit to ensure any async operations complete
+            await waitFor(() => {
+                // playExclusive should not be called when disabled
+                expect(mockPlayExclusive).not.toHaveBeenCalled();
+            });
+        });
+
+        it("should show disabled tooltip when disabled", () => {
+            render(
+                <AudioPlayButton
+                    cellId="test-cell-4"
+                    state="available"
+                    vscode={mockVscode as any}
+                    disabled={true}
+                    isSourceText={false}
+                />
+            );
+
+            const button = screen.getByRole("button");
+            expect(button.getAttribute("title")).toBe(
+                "Audio playback disabled - other type is playing"
+            );
+        });
+
+        it("should apply disabled styling (opacity and cursor)", () => {
+            render(
+                <AudioPlayButton
+                    cellId="test-cell-5"
+                    state="available"
+                    vscode={mockVscode as any}
+                    disabled={true}
+                    isSourceText={false}
+                />
+            );
+
+            const button = screen.getByRole("button");
+            const styles = window.getComputedStyle(button);
+            expect(button.style.opacity).toBe("0.4");
+            expect(button.style.cursor).toBe("not-allowed");
+        });
+    });
+
+    describe("audio state broadcasting", () => {
+        it("should broadcast audio state change with isPlaying false when audio stops", async () => {
+            const { rerender } = render(
+                <AudioPlayButton
+                    cellId="test-cell-stop-1"
+                    state="available"
+                    vscode={mockVscode as any}
+                    disabled={false}
+                    isSourceText={false}
+                />
+            );
+
+            // Simulate audio stopping by triggering the onended callback
+            const mockAudio = {
+                play: vi.fn().mockResolvedValue(undefined),
+                pause: vi.fn(),
+                onended: null as any,
+                src: "",
+                readyState: HTMLMediaElement.HAVE_CURRENT_DATA,
+            };
+
+            global.Audio = vi.fn().mockImplementation(() => mockAudio) as any;
+
+            const button = screen.getByRole("button");
+            fireEvent.click(button);
+
+            // Wait for audio to start
+            await waitFor(() => {
+                expect(mockAudio.onended).toBeDefined();
+            });
+
+            // Simulate audio ending
+            if (mockAudio.onended) {
+                mockAudio.onended();
+            }
+
+            await waitFor(() => {
+                const stopMessages = mockVscode.postMessage.mock.calls.filter(
+                    (call: any[]) =>
+                        call[0]?.command === "audioStateChanged" &&
+                        call[0]?.content?.isPlaying === false
+                );
+
+                expect(stopMessages.length).toBeGreaterThan(0);
+            });
+        });
+
+        it("should include correct message structure in broadcast", async () => {
+            render(
+                <AudioPlayButton
+                    cellId="test-cell-structure-1"
+                    state="available"
+                    vscode={mockVscode as any}
+                    disabled={false}
+                    isSourceText={true}
+                />
+            );
+
+            const mockAudio = {
+                play: vi.fn().mockResolvedValue(undefined),
+                pause: vi.fn(),
+                onended: null as any,
+                src: "",
+                readyState: HTMLMediaElement.HAVE_CURRENT_DATA,
+            };
+
+            global.Audio = vi.fn().mockImplementation(() => mockAudio) as any;
+
+            const button = screen.getByRole("button");
+            fireEvent.click(button);
+
+            await waitFor(() => {
+                const calls = mockVscode.postMessage.mock.calls;
+                const audioStateCall = calls.find(
+                    (call: any[]) =>
+                        call[0]?.command === "audioStateChanged" &&
+                        call[0]?.destination === "webview" &&
+                        call[0]?.content?.type === "audioPlaying"
+                );
+
+                expect(audioStateCall).toBeDefined();
+                if (!audioStateCall) return;
+                const message = audioStateCall[0];
+                expect(message).toHaveProperty("command", "audioStateChanged");
+                expect(message).toHaveProperty("destination", "webview");
+                expect(message).toHaveProperty("content");
+                expect(message.content).toHaveProperty("type", "audioPlaying");
+                expect(message.content).toHaveProperty("webviewType", "source");
+                expect(message.content).toHaveProperty("isPlaying");
+                expect(typeof message.content.isPlaying).toBe("boolean");
+            });
+        });
+    });
+
+    describe("isSourceText prop", () => {
+        it("should broadcast webviewType as 'source' when isSourceText is true", async () => {
+            render(
+                <AudioPlayButton
+                    cellId="test-cell-source-type"
+                    state="available"
+                    vscode={mockVscode as any}
+                    disabled={false}
+                    isSourceText={true}
+                />
+            );
+
+            const mockAudio = {
+                play: vi.fn().mockResolvedValue(undefined),
+                pause: vi.fn(),
+                onended: null as any,
+                src: "",
+                readyState: HTMLMediaElement.HAVE_CURRENT_DATA,
+            };
+
+            global.Audio = vi.fn().mockImplementation(() => mockAudio) as any;
+
+            const button = screen.getByRole("button");
+            fireEvent.click(button);
+
+            await waitFor(() => {
+                const sourceMessages = mockVscode.postMessage.mock.calls.filter(
+                    (call: any[]) => call[0]?.content?.webviewType === "source"
+                );
+
+                expect(sourceMessages.length).toBeGreaterThan(0);
+            });
+        });
+
+        it("should broadcast webviewType as 'target' when isSourceText is false", async () => {
+            render(
+                <AudioPlayButton
+                    cellId="test-cell-target-type"
+                    state="available"
+                    vscode={mockVscode as any}
+                    disabled={false}
+                    isSourceText={false}
+                />
+            );
+
+            const mockAudio = {
+                play: vi.fn().mockResolvedValue(undefined),
+                pause: vi.fn(),
+                onended: null as any,
+                src: "",
+                readyState: HTMLMediaElement.HAVE_CURRENT_DATA,
+            };
+
+            global.Audio = vi.fn().mockImplementation(() => mockAudio) as any;
+
+            const button = screen.getByRole("button");
+            fireEvent.click(button);
+
+            await waitFor(() => {
+                const targetMessages = mockVscode.postMessage.mock.calls.filter(
+                    (call: any[]) => call[0]?.content?.webviewType === "target"
+                );
+
+                expect(targetMessages.length).toBeGreaterThan(0);
+            });
+        });
+    });
+
+    describe("disabled state interaction with hover", () => {
+        it("should not change opacity on hover when disabled", () => {
+            render(
+                <AudioPlayButton
+                    cellId="test-cell-hover-disabled"
+                    state="available"
+                    vscode={mockVscode as any}
+                    disabled={true}
+                    isSourceText={false}
+                />
+            );
+
+            const button = screen.getByRole("button");
+            const initialOpacity = button.style.opacity;
+
+            fireEvent.mouseEnter(button);
+            expect(button.style.opacity).toBe(initialOpacity); // Should remain at 0.4
+
+            fireEvent.mouseLeave(button);
+            expect(button.style.opacity).toBe(initialOpacity); // Should remain at 0.4
+        });
+
+        it("should change opacity on hover when not disabled", () => {
+            render(
+                <AudioPlayButton
+                    cellId="test-cell-hover-enabled"
+                    state="available"
+                    vscode={mockVscode as any}
+                    disabled={false}
+                    isSourceText={false}
+                />
+            );
+
+            const button = screen.getByRole("button");
+            const initialOpacity = button.style.opacity;
+
+            fireEvent.mouseEnter(button);
+            expect(button.style.opacity).toBe("1");
+
+            fireEvent.mouseLeave(button);
+            expect(button.style.opacity).toBe(initialOpacity);
+        });
+    });
+});
diff --git a/webviews/codex-webviews/src/CodexCellEditor/__tests___/CodexCellEditor.audioStateSync.test.tsx b/webviews/codex-webviews/src/CodexCellEditor/__tests___/CodexCellEditor.audioStateSync.test.tsx
new file mode 100644
index 000000000..1ad4b415d
--- /dev/null
+++ b/webviews/codex-webviews/src/CodexCellEditor/__tests___/CodexCellEditor.audioStateSync.test.tsx
@@ -0,0 +1,405 @@
+import React from "react";
+import { describe, it, expect, beforeEach, vi, afterEach } from "vitest";
+import { render, waitFor } from "@testing-library/react";
+import CodexCellEditor from "../CodexCellEditor";
+import { GlobalMessage } from "../../../../../types";
+
+// Mock the VSCode API
+const mockVscode = {
+    postMessage: vi.fn(),
+    getState: vi.fn().mockReturnValue({}),
+    setState: vi.fn(),
+};
+
+Object.defineProperty(window, "vscodeApi", {
+    value: mockVscode,
+    writable: true,
+});
+
+// Mock the acquireVsCodeApi function
+global.acquireVsCodeApi = vi.fn().mockReturnValue(mockVscode);
+
+// Mock useMessageHandler to capture handler registration
+const registeredHandlers: Map<string, (event: MessageEvent) => void> = new Map();
+
+vi.mock("../hooks/useCentralizedMessageDispatcher", () => ({
+    useMessageHandler: vi.fn((eventName: string, handler: (event: MessageEvent) => void) => {
+        registeredHandlers.set(eventName, handler);
+    }),
+}));
+
+// Mock other dependencies
+vi.mock("@sharedUtils", () => ({
+    getVSCodeAPI: () => mockVscode,
+}));
+
+vi.mock("quill", () => {
+    const MockQuill = vi.fn().mockImplementation(() => ({
+        root: {
+            innerHTML: "<p>Test</p>",
+            focus: vi.fn(),
+            blur: vi.fn(),
+        },
+        getText: vi.fn().mockReturnValue(""),
+        getLength: vi.fn().mockReturnValue(0),
+        getContents: vi.fn().mockReturnValue({ ops: [] }),
+        setContents: vi.fn(),
+        updateContents: vi.fn(),
+        on: vi.fn(),
+        off: vi.fn(),
+        import: vi.fn(),
+    }));
+    (MockQuill as any).import = vi.fn();
+    (MockQuill as any).register = vi.fn();
+    return { default: MockQuill };
+});
+
+// Mock other components and hooks
+vi.mock("../CellList", () => ({
+    default: () => <div data-testid="cell-list">CellList</div>,
+}));
+
+vi.mock("../TextCellEditor", () => ({
+    default: () => <div data-testid="text-cell-editor">TextCellEditor</div>,
+}));
+
+vi.mock("../contextProviders/UnsavedChangesContext", () => ({
+    default: React.createContext({
+        setUnsavedChanges: vi.fn(),
+        showFlashingBorder: false,
+        unsavedChanges: false,
+        toggleFlashingBorder: vi.fn(),
+    }),
+}));
+
+describe("CodexCellEditor - Audio State Synchronization", () => {
+    beforeEach(() => {
+        vi.clearAllMocks();
+        registeredHandlers.clear();
+    });
+
+    afterEach(() => {
+        vi.clearAllMocks();
+    });
+
+    describe("audio state change listener", () => {
+        it("should register audioStateChanged message handler", () => {
+            render(<CodexCellEditor />);
+
+            expect(registeredHandlers.has("codexCellEditor-audioStateChanged")).toBe(true);
+        });
+
+        it("should update isOtherTypeAudioPlaying when source webview reports target is playing", async () => {
+            const { container } = render(<CodexCellEditor />);
+
+            const handler = registeredHandlers.get("codexCellEditor-audioStateChanged");
+            expect(handler).toBeDefined();
+
+            if (handler) {
+                // Simulate message from source webview indicating target is playing
+                const message: GlobalMessage = {
+                    command: "audioStateChanged",
+                    destination: "webview",
+                    content: {
+                        type: "audioPlaying",
+                        webviewType: "target",
+                        isPlaying: true,
+                    },
+                };
+
+                const event = new MessageEvent("message", {
+                    data: message,
+                });
+
+                handler(event);
+
+                // Wait for state update
+                await waitFor(() => {
+                    // The component should have updated isOtherTypeAudioPlaying state
+                    // We can verify this by checking if the prop is passed to CellList
+                    // Since we're mocking CellList, we'll verify the handler was called correctly
+                    expect(handler).toHaveBeenCalled;
+                });
+            }
+        });
+
+        it("should update isOtherTypeAudioPlaying when target webview reports source is playing", async () => {
+            render(<CodexCellEditor />);
+
+            const handler = registeredHandlers.get("codexCellEditor-audioStateChanged");
+            expect(handler).toBeDefined();
+
+            if (handler) {
+                // Simulate message from target webview indicating source is playing
+                const message: GlobalMessage = {
+                    command: "audioStateChanged",
+                    destination: "webview",
+                    content: {
+                        type: "audioPlaying",
+                        webviewType: "source",
+                        isPlaying: true,
+                    },
+                };
+
+                const event = new MessageEvent("message", {
+                    data: message,
+                });
+
+                handler(event);
+
+                await waitFor(() => {
+                    expect(handler).toHaveBeenCalled;
+                });
+            }
+        });
+
+        it("should set isOtherTypeAudioPlaying to false when audio stops", async () => {
+            render(<CodexCellEditor />);
+
+            const handler = registeredHandlers.get("codexCellEditor-audioStateChanged");
+            expect(handler).toBeDefined();
+
+            if (handler) {
+                // First, set playing to true
+                const startMessage: GlobalMessage = {
+                    command: "audioStateChanged",
+                    destination: "webview",
+                    content: {
+                        type: "audioPlaying",
+                        webviewType: "target",
+                        isPlaying: true,
+                    },
+                };
+
+                handler(new MessageEvent("message", { data: startMessage }));
+
+                // Then, set playing to false
+                const stopMessage: GlobalMessage = {
+                    command: "audioStateChanged",
+                    destination: "webview",
+                    content: {
+                        type: "audioPlaying",
+                        webviewType: "target",
+                        isPlaying: false,
+                    },
+                };
+
+                handler(new MessageEvent("message", { data: stopMessage }));
+
+                await waitFor(() => {
+                    expect(handler).toHaveBeenCalled;
+                });
+            }
+        });
+
+        it("should ignore messages from same webview type", async () => {
+            render(<CodexCellEditor />);
+
+            const handler = registeredHandlers.get("codexCellEditor-audioStateChanged");
+            expect(handler).toBeDefined();
+
+            if (handler) {
+                // Simulate message from source webview when current webview is also source
+                // This should be ignored
+                const message: GlobalMessage = {
+                    command: "audioStateChanged",
+                    destination: "webview",
+                    content: {
+                        type: "audioPlaying",
+                        webviewType: "source",
+                        isPlaying: true,
+                    },
+                };
+
+                const event = new MessageEvent("message", {
+                    data: message,
+                });
+
+                handler(event);
+
+                // Handler should still be called, but state shouldn't update
+                // (we can't easily test state without more complex setup, but we verify handler exists)
+                await waitFor(() => {
+                    expect(handler).toBeDefined();
+                });
+            }
+        });
+
+        it("should only process messages with correct structure", async () => {
+            render(<CodexCellEditor />);
+
+            const handler = registeredHandlers.get("codexCellEditor-audioStateChanged");
+            expect(handler).toBeDefined();
+
+            if (handler) {
+                // Invalid message structure - missing content.type
+                const invalidMessage1 = {
+                    command: "audioStateChanged",
+                    destination: "webview",
+                    content: {
+                        webviewType: "target",
+                        isPlaying: true,
+                    },
+                };
+
+                handler(new MessageEvent("message", { data: invalidMessage1 }));
+
+                // Invalid message structure - wrong command
+                const invalidMessage2: GlobalMessage = {
+                    command: "otherCommand",
+                    destination: "webview",
+                    content: {
+                        type: "audioPlaying",
+                        webviewType: "target",
+                        isPlaying: true,
+                    },
+                };
+
+                handler(new MessageEvent("message", { data: invalidMessage2 }));
+
+                // Invalid message structure - wrong destination
+                const invalidMessage3: GlobalMessage = {
+                    command: "audioStateChanged",
+                    destination: "provider",
+                    content: {
+                        type: "audioPlaying",
+                        webviewType: "target",
+                        isPlaying: true,
+                    },
+                };
+
+                handler(new MessageEvent("message", { data: invalidMessage3 }));
+
+                // Handler should handle these gracefully without crashing
+                await waitFor(() => {
+                    expect(handler).toBeDefined();
+                });
+            }
+        });
+
+        it("should handle multiple rapid state changes", async () => {
+            render(<CodexCellEditor />);
+
+            const handler = registeredHandlers.get("codexCellEditor-audioStateChanged");
+            expect(handler).toBeDefined();
+
+            if (handler) {
+                // Send multiple rapid state changes
+                const messages: GlobalMessage[] = [
+                    {
+                        command: "audioStateChanged",
+                        destination: "webview",
+                        content: {
+                            type: "audioPlaying",
+                            webviewType: "target",
+                            isPlaying: true,
+                        },
+                    },
+                    {
+                        command: "audioStateChanged",
+                        destination: "webview",
+                        content: {
+                            type: "audioPlaying",
+                            webviewType: "target",
+                            isPlaying: false,
+                        },
+                    },
+                    {
+                        command: "audioStateChanged",
+                        destination: "webview",
+                        content: {
+                            type: "audioPlaying",
+                            webviewType: "target",
+                            isPlaying: true,
+                        },
+                    },
+                ];
+
+                messages.forEach((message) => {
+                    handler(new MessageEvent("message", { data: message }));
+                });
+
+                await waitFor(() => {
+                    expect(handler).toBeDefined();
+                });
+            }
+        });
+    });
+
+    describe("message structure validation", () => {
+        it("should validate command is 'audioStateChanged'", async () => {
+            render(<CodexCellEditor />);
+
+            const handler = registeredHandlers.get("codexCellEditor-audioStateChanged");
+            expect(handler).toBeDefined();
+
+            if (handler) {
+                const validMessage: GlobalMessage = {
+                    command: "audioStateChanged",
+                    destination: "webview",
+                    content: {
+                        type: "audioPlaying",
+                        webviewType: "target",
+                        isPlaying: true,
+                    },
+                };
+
+                handler(new MessageEvent("message", { data: validMessage }));
+
+                await waitFor(() => {
+                    expect(handler).toBeDefined();
+                });
+            }
+        });
+
+        it("should validate destination is 'webview'", async () => {
+            render(<CodexCellEditor />);
+
+            const handler = registeredHandlers.get("codexCellEditor-audioStateChanged");
+            expect(handler).toBeDefined();
+
+            if (handler) {
+                const validMessage: GlobalMessage = {
+                    command: "audioStateChanged",
+                    destination: "webview",
+                    content: {
+                        type: "audioPlaying",
+                        webviewType: "target",
+                        isPlaying: true,
+                    },
+                };
+
+                handler(new MessageEvent("message", { data: validMessage }));
+
+                await waitFor(() => {
+                    expect(handler).toBeDefined();
+                });
+            }
+        });
+
+        it("should validate content.type is 'audioPlaying'", async () => {
+            render(<CodexCellEditor />);
+
+            const handler = registeredHandlers.get("codexCellEditor-audioStateChanged");
+            expect(handler).toBeDefined();
+
+            if (handler) {
+                const validMessage: GlobalMessage = {
+                    command: "audioStateChanged",
+                    destination: "webview",
+                    content: {
+                        type: "audioPlaying",
+                        webviewType: "target",
+                        isPlaying: true,
+                    },
+                };
+
+                handler(new MessageEvent("message", { data: validMessage }));
+
+                await waitFor(() => {
+                    expect(handler).toBeDefined();
+                });
+            }
+        });
+    });
+});
diff --git a/webviews/codex-webviews/src/CodexCellEditor/__tests___/CodexCellEditor.saveWorkflow.integration.test.tsx b/webviews/codex-webviews/src/CodexCellEditor/__tests___/CodexCellEditor.saveWorkflow.integration.test.tsx
index afb4fccf5..718ef2c35 100644
--- a/webviews/codex-webviews/src/CodexCellEditor/__tests___/CodexCellEditor.saveWorkflow.integration.test.tsx
+++ b/webviews/codex-webviews/src/CodexCellEditor/__tests___/CodexCellEditor.saveWorkflow.integration.test.tsx
@@ -245,6 +245,7 @@ describe("Real Cell Editor Save Workflow Integration Tests", () => {
             scrollSyncEnabled: true,
             currentUsername: "test-user",
             requiredValidations: 1,
+            highlightedGlobalReferences: [],
         };
 
         const { container } = render(<CellList {...mockProps} />);
@@ -452,6 +453,7 @@ describe("Real Cell Editor Save Workflow Integration Tests", () => {
             scrollSyncEnabled: true,
             currentUsername: "test-user",
             requiredValidations: 1,
+            highlightedGlobalReferences: [],
         };
 
         render(<CellList {...mockProps} />);
@@ -563,6 +565,7 @@ describe("Real Cell Editor Save Workflow Integration Tests", () => {
             scrollSyncEnabled: true,
             currentUsername: "test-user",
             requiredValidations: 1,
+            highlightedGlobalReferences: [],
         };
 
         render(<CellList {...cellListProps} />);
@@ -1032,7 +1035,7 @@ describe("Real Cell Editor Save Workflow Integration Tests", () => {
         );
 
         // Start Recording button should be disabled when locked
-        const startBtn = await screen.findByRole("button", { name: /Start Recording/i });
+        const startBtn = await screen.findByRole("button", { name: /Record/i });
         expect(startBtn.hasAttribute("disabled")).toBe(true);
 
         fireEvent.click(startBtn);
diff --git a/webviews/codex-webviews/src/CodexCellEditor/__tests___/audioStateSync.integration.test.tsx b/webviews/codex-webviews/src/CodexCellEditor/__tests___/audioStateSync.integration.test.tsx
new file mode 100644
index 000000000..3281d6ec3
--- /dev/null
+++ b/webviews/codex-webviews/src/CodexCellEditor/__tests___/audioStateSync.integration.test.tsx
@@ -0,0 +1,399 @@
+import React from "react";
+import { describe, it, expect, beforeEach, vi, afterEach } from "vitest";
+import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+import AudioPlayButton from "../AudioPlayButton";
+import { GlobalMessage } from "../../../../../types";
+
+/**
+ * Integration test for audio state synchronization between source and target webviews.
+ *
+ * This test verifies the complete flow:
+ * 1. AudioPlayButton broadcasts audio state changes via vscode.postMessage
+ * 2. GlobalProvider forwards the full GlobalMessage object to all webviews
+ * 3. CodexCellEditor receives and processes the message
+ * 4. AudioPlayButton receives disabled prop based on other webview's playing state
+ */
+
+// Mock the VSCode API
+const mockVscode = {
+    postMessage: vi.fn(),
+    getState: vi.fn(),
+    setState: vi.fn(),
+};
+
+Object.defineProperty(window, "vscodeApi", {
+    value: mockVscode,
+    writable: true,
+});
+
+global.acquireVsCodeApi = vi.fn().mockReturnValue(mockVscode);
+
+// Track all messages posted via vscode.postMessage
+const postedMessages: GlobalMessage[] = [];
+
+// Mock vscode.postMessage to capture messages
+mockVscode.postMessage = vi.fn((message: GlobalMessage) => {
+    postedMessages.push(message);
+});
+
+// Mock audio controller
+const mockPlayExclusive = vi.fn().mockResolvedValue(undefined);
+const mockAddListener = vi.fn();
+const mockRemoveListener = vi.fn();
+
+vi.mock("../lib/audioController", () => ({
+    globalAudioController: {
+        playExclusive: mockPlayExclusive,
+        addListener: mockAddListener,
+        removeListener: mockRemoveListener,
+    },
+}));
+
+// Mock audio cache
+vi.mock("../lib/audioCache", () => ({
+    getCachedAudioDataUrl: vi.fn().mockReturnValue(null),
+    setCachedAudioDataUrl: vi.fn(),
+}));
+
+// Mock useMessageHandler - simulate message reception
+const messageHandlers: Map<string, (event: MessageEvent) => void> = new Map();
+
+vi.mock("../hooks/useCentralizedMessageDispatcher", () => ({
+    useMessageHandler: vi.fn((eventName: string, handler: (event: MessageEvent) => void) => {
+        messageHandlers.set(eventName, handler);
+    }),
+}));
+
+// Helper function to simulate GlobalProvider forwarding a message
+const simulateGlobalProviderForward = (message: GlobalMessage) => {
+    // Simulate GlobalProvider forwarding to all webviews
+    const handler = messageHandlers.get("codexCellEditor-audioStateChanged");
+    if (handler) {
+        handler(new MessageEvent("message", { data: message }));
+    }
+};
+
+describe("Audio State Synchronization - Integration Tests", () => {
+    beforeEach(() => {
+        vi.clearAllMocks();
+        postedMessages.length = 0;
+        messageHandlers.clear();
+    });
+
+    afterEach(() => {
+        vi.clearAllMocks();
+    });
+
+    describe("Complete flow: Source playing disables Target", () => {
+        it("should disable target audio button when source starts playing", async () => {
+            // Render target webview AudioPlayButton
+            const { rerender } = render(
+                <AudioPlayButton
+                    cellId="target-cell-1"
+                    state="available"
+                    vscode={mockVscode as any}
+                    disabled={false}
+                    isSourceText={false}
+                />
+            );
+
+            const targetButton = screen.getByRole("button");
+            expect((targetButton as HTMLButtonElement).disabled).toBe(false);
+
+            // Simulate source webview starting to play
+            const sourcePlayingMessage: GlobalMessage = {
+                command: "audioStateChanged",
+                destination: "webview",
+                content: {
+                    type: "audioPlaying",
+                    webviewType: "source",
+                    isPlaying: true,
+                },
+            };
+
+            // Simulate GlobalProvider forwarding the message
+            simulateGlobalProviderForward(sourcePlayingMessage);
+
+            // In a real scenario, CodexCellEditor would update isOtherTypeAudioPlaying
+            // and pass it as disabled prop. For this test, we simulate that:
+            rerender(
+                <AudioPlayButton
+                    cellId="target-cell-1"
+                    state="available"
+                    vscode={mockVscode as any}
+                    disabled={true} // Simulated: CodexCellEditor sets this based on message
+                    isSourceText={false}
+                />
+            );
+
+            await waitFor(() => {
+                const updatedButton = screen.getByRole("button");
+                expect((updatedButton as HTMLButtonElement).disabled).toBe(true);
+            });
+        });
+
+        it("should enable target audio button when source stops playing", async () => {
+            // Start with target disabled (source is playing)
+            const { rerender } = render(
+                <AudioPlayButton
+                    cellId="target-cell-2"
+                    state="available"
+                    vscode={mockVscode as any}
+                    disabled={true}
+                    isSourceText={false}
+                />
+            );
+
+            const targetButton = screen.getByRole("button");
+            expect((targetButton as HTMLButtonElement).disabled).toBe(true);
+
+            // Simulate source webview stopping
+            const sourceStoppedMessage: GlobalMessage = {
+                command: "audioStateChanged",
+                destination: "webview",
+                content: {
+                    type: "audioPlaying",
+                    webviewType: "source",
+                    isPlaying: false,
+                },
+            };
+
+            simulateGlobalProviderForward(sourceStoppedMessage);
+
+            // Simulate CodexCellEditor updating state
+            rerender(
+                <AudioPlayButton
+                    cellId="target-cell-2"
+                    state="available"
+                    vscode={mockVscode as any}
+                    disabled={false} // Simulated: CodexCellEditor sets this based on message
+                    isSourceText={false}
+                />
+            );
+
+            await waitFor(() => {
+                const updatedButton = screen.getByRole("button");
+                expect((updatedButton as HTMLButtonElement).disabled).toBe(false);
+            });
+        });
+    });
+
+    describe("Complete flow: Target playing disables Source", () => {
+        it("should disable source audio button when target starts playing", async () => {
+            const { rerender } = render(
+                <AudioPlayButton
+                    cellId="source-cell-1"
+                    state="available"
+                    vscode={mockVscode as any}
+                    disabled={false}
+                    isSourceText={true}
+                />
+            );
+
+            const sourceButton = screen.getByRole("button");
+            expect((sourceButton as HTMLButtonElement).disabled).toBe(false);
+
+            // Simulate target webview starting to play
+            const targetPlayingMessage: GlobalMessage = {
+                command: "audioStateChanged",
+                destination: "webview",
+                content: {
+                    type: "audioPlaying",
+                    webviewType: "target",
+                    isPlaying: true,
+                },
+            };
+
+            simulateGlobalProviderForward(targetPlayingMessage);
+
+            // Simulate CodexCellEditor updating state
+            rerender(
+                <AudioPlayButton
+                    cellId="source-cell-1"
+                    state="available"
+                    vscode={mockVscode as any}
+                    disabled={true} // Simulated: CodexCellEditor sets this based on message
+                    isSourceText={true}
+                />
+            );
+
+            await waitFor(() => {
+                const updatedButton = screen.getByRole("button");
+                expect((updatedButton as HTMLButtonElement).disabled).toBe(true);
+            });
+        });
+    });
+
+    describe("Message structure validation", () => {
+        it("should verify complete message structure in broadcast", async () => {
+            render(
+                <AudioPlayButton
+                    cellId="test-cell-structure"
+                    state="available"
+                    vscode={mockVscode as any}
+                    disabled={false}
+                    isSourceText={true}
+                />
+            );
+
+            const mockAudio = {
+                play: vi.fn().mockResolvedValue(undefined),
+                pause: vi.fn(),
+                onended: null as any,
+                src: "",
+                readyState: HTMLMediaElement.HAVE_CURRENT_DATA,
+            };
+
+            global.Audio = vi.fn().mockImplementation(() => mockAudio) as any;
+
+            const button = screen.getByRole("button");
+            fireEvent.click(button);
+
+            await waitFor(() => {
+                // Find audioStateChanged messages
+                const audioStateMessages = postedMessages.filter(
+                    (msg) =>
+                        msg.command === "audioStateChanged" &&
+                        msg.destination === "webview" &&
+                        msg.content?.type === "audioPlaying"
+                );
+
+                expect(audioStateMessages.length).toBeGreaterThan(0);
+
+                const message = audioStateMessages[audioStateMessages.length - 1];
+
+                // Verify complete structure
+                expect(message).toHaveProperty("command");
+                expect(message).toHaveProperty("destination");
+                expect(message).toHaveProperty("content");
+                expect(message.command).toBe("audioStateChanged");
+                expect(message.destination).toBe("webview");
+                expect(message.content).toHaveProperty("type", "audioPlaying");
+
+                // Type guard to narrow the content type
+                if (message.content.type === "audioPlaying") {
+                    expect(message.content).toHaveProperty("webviewType");
+                    expect(message.content).toHaveProperty("isPlaying");
+                    expect(typeof message.content.isPlaying).toBe("boolean");
+                }
+            });
+        });
+    });
+
+    describe("Bidirectional synchronization", () => {
+        it("should handle rapid state changes between source and target", async () => {
+            // Simulate rapid toggling between source and target playing
+            const messages: GlobalMessage[] = [
+                {
+                    command: "audioStateChanged",
+                    destination: "webview",
+                    content: {
+                        type: "audioPlaying",
+                        webviewType: "source",
+                        isPlaying: true,
+                    },
+                },
+                {
+                    command: "audioStateChanged",
+                    destination: "webview",
+                    content: {
+                        type: "audioPlaying",
+                        webviewType: "source",
+                        isPlaying: false,
+                    },
+                },
+                {
+                    command: "audioStateChanged",
+                    destination: "webview",
+                    content: {
+                        type: "audioPlaying",
+                        webviewType: "target",
+                        isPlaying: true,
+                    },
+                },
+                {
+                    command: "audioStateChanged",
+                    destination: "webview",
+                    content: {
+                        type: "audioPlaying",
+                        webviewType: "target",
+                        isPlaying: false,
+                    },
+                },
+            ];
+
+            // Simulate all messages being forwarded rapidly
+            // Verify that rapid messages can be processed without errors
+            expect(() => {
+                messages.forEach((message) => {
+                    simulateGlobalProviderForward(message);
+                });
+            }).not.toThrow();
+
+            // The handler may not exist if no component is rendered, which is fine
+            // The important thing is that the system handles rapid messages gracefully
+            // If a handler exists, verify it was called (indirectly through simulateGlobalProviderForward)
+            // This test verifies the system can handle rapid state changes without crashing
+        });
+    });
+
+    describe("Edge cases", () => {
+        it("should handle messages from same webview type gracefully", async () => {
+            // Simulate source webview receiving message about source playing
+            // (should be ignored by CodexCellEditor logic)
+            const sameTypeMessage: GlobalMessage = {
+                command: "audioStateChanged",
+                destination: "webview",
+                content: {
+                    type: "audioPlaying",
+                    webviewType: "source",
+                    isPlaying: true,
+                },
+            };
+
+            // Verify that messages from same webview type can be processed without errors
+            // (Handler may not exist if no component is rendered, which is fine)
+            expect(() => {
+                simulateGlobalProviderForward(sameTypeMessage);
+            }).not.toThrow();
+
+            // The important thing is that the system handles same-type messages gracefully
+            // without crashing, regardless of whether a handler is registered
+        });
+
+        it("should handle invalid message structures gracefully", async () => {
+            const invalidMessages = [
+                {
+                    command: "audioStateChanged",
+                    destination: "webview",
+                    // Missing content
+                },
+                {
+                    command: "audioStateChanged",
+                    destination: "webview",
+                    content: {
+                        // Missing type
+                        webviewType: "target",
+                        isPlaying: true,
+                    },
+                },
+                {
+                    command: "wrongCommand",
+                    destination: "webview",
+                    content: {
+                        type: "audioPlaying",
+                        webviewType: "target",
+                        isPlaying: true,
+                    },
+                },
+            ];
+
+            // Should not throw errors
+            invalidMessages.forEach((msg) => {
+                expect(() => {
+                    simulateGlobalProviderForward(msg as GlobalMessage);
+                }).not.toThrow();
+            });
+        });
+    });
+});
diff --git a/webviews/codex-webviews/src/CodexCellEditor/hooks/useMultiCellAudioPlayback.ts b/webviews/codex-webviews/src/CodexCellEditor/hooks/useMultiCellAudioPlayback.ts
new file mode 100644
index 000000000..55c879122
--- /dev/null
+++ b/webviews/codex-webviews/src/CodexCellEditor/hooks/useMultiCellAudioPlayback.ts
@@ -0,0 +1,717 @@
+import { useEffect, useRef, useCallback } from "react";
+import { QuillCellContent } from "../../../../../types";
+import { WebviewApi } from "vscode-webview";
+import type { ReactPlayerRef } from "../types/reactPlayerTypes";
+import { globalAudioController, AudioControllerEvent } from "../../lib/audioController";
+import { getCachedAudioDataUrl, setCachedAudioDataUrl } from "../../lib/audioCache";
+import { EditorPostMessages } from "../../../../../types";
+
+interface CellAudioData {
+    cellId: string;
+    audioElement: HTMLAudioElement;
+    startTime: number;
+    endTime?: number;
+    blobUrl: string;
+    isPlaying: boolean;
+}
+
+type AudioAttachmentState =
+    | "available"
+    | "available-local"
+    | "available-pointer"
+    | "deletedOnly"
+    | "none"
+    | "missing";
+
+interface UseMultiCellAudioPlaybackProps {
+    translationUnitsForSection: QuillCellContent[];
+    audioAttachments?: {
+        [cellId: string]: AudioAttachmentState;
+    };
+    playerRef: React.RefObject<ReactPlayerRef>;
+    vscode: WebviewApi<unknown>;
+    isVideoPlaying: boolean;
+    currentVideoTime: number;
+    muteVideoWhenPlayingAudio?: boolean;
+}
+
+/**
+ * Hook to manage multi-cell audio playback synchronized with video.
+ * Plays recorded audio from cells at their correct timestamps when video plays.
+ */
+export function useMultiCellAudioPlayback({
+    translationUnitsForSection,
+    audioAttachments,
+    playerRef,
+    vscode,
+    isVideoPlaying,
+    currentVideoTime,
+    muteVideoWhenPlayingAudio = true,
+}: UseMultiCellAudioPlaybackProps): void {
+    const audioElementsRef = useRef<Map<string, CellAudioData>>(new Map());
+    const pendingRequestsRef = useRef<Set<string>>(new Set());
+    const videoMuteStateRef = useRef<boolean | null>(null);
+    const videoElementRef = useRef<HTMLVideoElement | null>(null);
+    const messageHandlerRef = useRef<((event: MessageEvent) => void) | null>(null);
+    const isCleaningUpRef = useRef<boolean>(false);
+
+    // Get video element helper
+    const getVideoElement = useCallback((): HTMLVideoElement | null => {
+        if (!playerRef.current) return null;
+
+        const internalPlayer = playerRef.current.getInternalPlayer?.();
+        if (internalPlayer instanceof HTMLVideoElement) {
+            return internalPlayer;
+        }
+
+        if (internalPlayer && typeof internalPlayer === "object") {
+            const foundVideo =
+                (internalPlayer as any).querySelector?.("video") ||
+                (internalPlayer as any).video ||
+                internalPlayer;
+            if (foundVideo instanceof HTMLVideoElement) {
+                return foundVideo;
+            }
+        }
+
+        // Last resort: Try to find video element in the DOM
+        const wrapper = playerRef.current as any;
+        const foundVideo =
+            wrapper.querySelector?.("video") || wrapper.parentElement?.querySelector?.("video");
+        if (foundVideo instanceof HTMLVideoElement) {
+            return foundVideo;
+        }
+
+        return null;
+    }, [playerRef]);
+
+    // Clean up audio elements
+    const cleanupAudioElements = useCallback(() => {
+        isCleaningUpRef.current = true;
+        try {
+            audioElementsRef.current.forEach((data) => {
+                try {
+                    data.audioElement.pause();
+                    data.audioElement.currentTime = 0;
+                    data.audioElement.src = "";
+                    if (data.blobUrl.startsWith("blob:")) {
+                        URL.revokeObjectURL(data.blobUrl);
+                    }
+                } catch (error) {
+                    console.error(`Error cleaning up audio for cell ${data.cellId}:`, error);
+                }
+            });
+            audioElementsRef.current.clear();
+        } finally {
+            isCleaningUpRef.current = false;
+        }
+    }, []);
+
+    // Restore video mute state
+    const restoreVideoMuteState = useCallback(() => {
+        const videoElement = videoElementRef.current || getVideoElement();
+        if (videoElement && videoMuteStateRef.current !== null) {
+            try {
+                videoElement.muted = videoMuteStateRef.current;
+                videoMuteStateRef.current = null;
+            } catch (error) {
+                console.error("Error restoring video mute state:", error);
+            }
+        }
+    }, [getVideoElement]);
+
+    // Mute video audio
+    const muteVideoAudio = useCallback(() => {
+        const videoElement = videoElementRef.current || getVideoElement();
+        if (videoElement && videoMuteStateRef.current === null) {
+            try {
+                videoMuteStateRef.current = videoElement.muted;
+                videoElement.muted = true;
+                videoElementRef.current = videoElement;
+            } catch (error) {
+                console.error("Error muting video audio:", error);
+            }
+        }
+    }, [getVideoElement]);
+
+    // Check if any audio is currently playing or should be playing
+    const hasPlayingAudio = useCallback((currentTime?: number): boolean => {
+        for (const data of audioElementsRef.current.values()) {
+            // Check if audio is currently playing
+            if (data.isPlaying && !data.audioElement.paused) {
+                return true;
+            }
+            // Check if audio should be playing based on current video time
+            if (currentTime !== undefined) {
+                const tolerance = 0.1;
+                const isPastStartTime = currentTime >= data.startTime - tolerance;
+                const isBeforeEndTime = data.endTime === undefined || currentTime < data.endTime;
+                if (isPastStartTime && isBeforeEndTime) {
+                    return true;
+                }
+            }
+        }
+        return false;
+    }, []);
+
+    // Update mute state based on playing audio (only mute when user preference is true)
+    const updateVideoMuteState = useCallback(
+        (currentTime?: number) => {
+            if (hasPlayingAudio(currentTime)) {
+                if (muteVideoWhenPlayingAudio) {
+                    muteVideoAudio();
+                }
+                // When muteVideoWhenPlayingAudio is false, leave video unmuted so video + recorded audio play together
+            } else {
+                restoreVideoMuteState();
+            }
+        },
+        [hasPlayingAudio, muteVideoWhenPlayingAudio, muteVideoAudio, restoreVideoMuteState]
+    );
+
+    // Request audio for a cell
+    const requestAudioForCell = useCallback(
+        (cellId: string): Promise<string | null> => {
+            return new Promise((resolve) => {
+                // Check cache first
+                const cached = getCachedAudioDataUrl(cellId);
+                if (cached) {
+                    resolve(cached);
+                    return;
+                }
+
+                // Check if already requesting
+                if (pendingRequestsRef.current.has(cellId)) {
+                    // Wait for existing request
+                    const checkInterval = setInterval(() => {
+                        const cachedAfterWait = getCachedAudioDataUrl(cellId);
+                        if (cachedAfterWait) {
+                            clearInterval(checkInterval);
+                            resolve(cachedAfterWait);
+                        }
+                    }, 100);
+
+                    setTimeout(() => {
+                        clearInterval(checkInterval);
+                        if (!getCachedAudioDataUrl(cellId)) {
+                            resolve(null);
+                        }
+                    }, 5000);
+                    return;
+                }
+
+                pendingRequestsRef.current.add(cellId);
+
+                let resolved = false;
+                const timeout = setTimeout(() => {
+                    if (!resolved) {
+                        resolved = true;
+                        pendingRequestsRef.current.delete(cellId);
+                        if (messageHandlerRef.current) {
+                            window.removeEventListener("message", messageHandlerRef.current);
+                        }
+                        resolve(null);
+                    }
+                }, 5000);
+
+                const handler = (event: MessageEvent) => {
+                    const message = event.data;
+                    if (
+                        message?.type === "providerSendsAudioData" &&
+                        message.content?.cellId === cellId &&
+                        !resolved
+                    ) {
+                        resolved = true;
+                        clearTimeout(timeout);
+                        pendingRequestsRef.current.delete(cellId);
+                        window.removeEventListener("message", handler);
+
+                        if (message.content.audioData) {
+                            setCachedAudioDataUrl(cellId, message.content.audioData);
+                            resolve(message.content.audioData);
+                        } else {
+                            resolve(null);
+                        }
+                    }
+                };
+
+                messageHandlerRef.current = handler;
+                window.addEventListener("message", handler);
+
+                vscode.postMessage({
+                    command: "requestAudioForCell",
+                    content: { cellId },
+                } as EditorPostMessages);
+            });
+        },
+        [vscode]
+    );
+
+    // Create audio element for a cell
+    const createAudioElement = useCallback(
+        async (cellId: string, startTime: number, endTime?: number): Promise<boolean> => {
+            // Skip if already exists
+            if (audioElementsRef.current.has(cellId)) {
+                return true;
+            }
+
+            const audioDataUrl = await requestAudioForCell(cellId);
+            if (!audioDataUrl) {
+                return false;
+            }
+
+            try {
+                const response = await fetch(audioDataUrl);
+                if (!response.ok) {
+                    throw new Error(`Failed to fetch audio: ${response.status} ${response.statusText}`);
+                }
+                const blob = await response.blob();
+                const blobUrl = URL.createObjectURL(blob);
+
+                const audioElement = new Audio();
+
+                // Wait for audio to be ready before setting up handlers
+                await new Promise<void>((resolve, reject) => {
+                    const timeout = setTimeout(() => {
+                        audioElement.removeEventListener("canplaythrough", onCanPlay);
+                        audioElement.removeEventListener("canplay", onCanPlay);
+                        audioElement.removeEventListener("loadeddata", onCanPlay);
+                        audioElement.removeEventListener("error", onError);
+                        // If timeout, check if we have at least some data
+                        if (audioElement.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA) {
+                            resolve();
+                        } else {
+                            reject(new Error("Audio loading timeout - not enough data loaded"));
+                        }
+                    }, 10000); // Increased timeout to 10 seconds
+
+                    const onCanPlay = () => {
+                        clearTimeout(timeout);
+                        audioElement.removeEventListener("canplaythrough", onCanPlay);
+                        audioElement.removeEventListener("canplay", onCanPlay);
+                        audioElement.removeEventListener("loadeddata", onCanPlay);
+                        audioElement.removeEventListener("error", onError);
+                        resolve();
+                    };
+
+                    const onError = (e: Event) => {
+                        clearTimeout(timeout);
+                        audioElement.removeEventListener("canplaythrough", onCanPlay);
+                        audioElement.removeEventListener("canplay", onCanPlay);
+                        audioElement.removeEventListener("loadeddata", onCanPlay);
+                        audioElement.removeEventListener("error", onError);
+                        const error = audioElement.error;
+                        reject(
+                            new Error(
+                                `Audio load error for cell ${cellId}: code ${error?.code || "unknown"} - ${error?.message || "unknown error"}`
+                            )
+                        );
+                    };
+
+                    // Listen for multiple events to catch when audio is ready
+                    audioElement.addEventListener("canplaythrough", onCanPlay);
+                    audioElement.addEventListener("canplay", onCanPlay);
+                    audioElement.addEventListener("loadeddata", onCanPlay);
+                    audioElement.addEventListener("error", onError);
+                    audioElement.src = blobUrl;
+                    audioElement.load();
+                });
+
+                const data: CellAudioData = {
+                    cellId,
+                    audioElement,
+                    startTime,
+                    endTime,
+                    blobUrl,
+                    isPlaying: false,
+                };
+
+                // Set up event handlers
+                audioElement.onended = () => {
+                    data.isPlaying = false;
+                    updateVideoMuteState();
+                };
+
+                audioElement.onerror = (e) => {
+                    // Don't log errors during cleanup (expected when clearing src)
+                    if (isCleaningUpRef.current) {
+                        return;
+                    }
+                    const error = audioElement.error;
+                    // Skip logging "Empty src attribute" errors (code 4) - these are expected
+                    // when src is cleared or during normal cleanup/reset operations
+                    if (error?.code === 4 || !audioElement.src || audioElement.readyState === 0) {
+                        data.isPlaying = false;
+                        updateVideoMuteState();
+                        return;
+                    }
+                    console.error(
+                        `Error playing audio for cell ${cellId}:`,
+                        error?.code || "unknown",
+                        error?.message || "unknown error",
+                        `readyState: ${audioElement.readyState}`,
+                        `src: ${audioElement.src.substring(0, 50)}...`
+                    );
+                    data.isPlaying = false;
+                    updateVideoMuteState();
+                };
+
+                audioElement.onplay = () => {
+                    data.isPlaying = true;
+                    updateVideoMuteState();
+                };
+
+                audioElement.onpause = () => {
+                    data.isPlaying = false;
+                    updateVideoMuteState();
+                };
+
+                audioElementsRef.current.set(cellId, data);
+
+                return true;
+            } catch (error) {
+                console.error(`Error creating audio element for cell ${cellId}:`, error);
+                return false;
+            }
+        },
+        [requestAudioForCell, updateVideoMuteState]
+    );
+
+    // Initialize audio elements when video starts playing
+    useEffect(() => {
+        if (!isVideoPlaying) {
+            return;
+        }
+
+        // Find cells with audio and timestamps
+        const cellsWithAudio: Array<{
+            cellId: string;
+            startTime: number;
+            endTime?: number;
+        }> = [];
+
+        for (const cell of translationUnitsForSection) {
+            const cellId = cell.cellMarkers.join(" ");
+            const audioState = audioAttachments?.[cellId];
+            const timestamps = cell.audioTimestamps ??
+                (cell.data?.audioStartTime !== undefined || cell.data?.audioEndTime !== undefined
+                    ? {
+                        startTime: cell.data.audioStartTime,
+                        endTime: cell.data.audioEndTime,
+                    }
+                    : cell.timestamps);
+
+            // Check if cell has audio available
+            const hasAudio =
+                audioState === "available" ||
+                audioState === "available-local" ||
+                audioState === "available-pointer";
+
+            // Check if cell has timestamps
+            const hasTimestamps = timestamps?.startTime !== undefined;
+
+            if (hasAudio && hasTimestamps) {
+                cellsWithAudio.push({
+                    cellId,
+                    startTime: timestamps.startTime!,
+                    endTime: timestamps.endTime,
+                });
+            }
+        }
+
+        // Create or update audio elements for all cells
+        const initializePromises = cellsWithAudio.map(async ({ cellId, startTime, endTime }) => {
+            // Check if audio element already exists
+            const existingData = audioElementsRef.current.get(cellId);
+            if (existingData) {
+                // Check if timestamps have changed
+                const timestampsChanged =
+                    existingData.startTime !== startTime || existingData.endTime !== endTime;
+
+                if (timestampsChanged) {
+                    // Stop and reset audio if it's currently playing
+                    if (!existingData.audioElement.paused || existingData.isPlaying) {
+                        try {
+                            existingData.audioElement.pause();
+                            existingData.audioElement.currentTime = 0;
+                            existingData.isPlaying = false;
+                        } catch (error) {
+                            console.error(`Error stopping audio for cell ${cellId}:`, error);
+                        }
+                    }
+                    // Update timestamps for existing element
+                    existingData.startTime = startTime;
+                    existingData.endTime = endTime;
+                }
+                return true;
+            }
+            // Create new audio element
+            return createAudioElement(cellId, startTime, endTime);
+        });
+
+        Promise.all(initializePromises).catch((error) => {
+            console.error("Error initializing audio elements:", error);
+        });
+
+        return () => {
+            // Cleanup on unmount or when video stops
+            cleanupAudioElements();
+            restoreVideoMuteState();
+        };
+    }, [
+        isVideoPlaying,
+        translationUnitsForSection,
+        audioAttachments,
+        createAudioElement,
+        cleanupAudioElements,
+        restoreVideoMuteState,
+    ]);
+
+    // Debounce timer ref to prevent excessive calls during timeline dragging
+    const debounceTimerRef = useRef<NodeJS.Timeout | null>(null);
+
+    // Function to check and start/stop audio based on current video time
+    const checkAndStartAudio = useCallback(() => {
+        if (!isVideoPlaying) {
+            return;
+        }
+
+        const currentTime = currentVideoTime;
+        const tolerance = 0.1; // 100ms tolerance for starting audio
+
+        // Update mute state based on current time (mute if audio should be playing)
+        updateVideoMuteState(currentTime);
+
+        // Check if AudioPlayButton or other audio is playing (not multi-cell audio)
+        const currentGlobalAudio = globalAudioController.getCurrent();
+        if (currentGlobalAudio) {
+            let isMultiCellAudio = false;
+            audioElementsRef.current.forEach((data) => {
+                if (data.audioElement === currentGlobalAudio) {
+                    isMultiCellAudio = true;
+                }
+            });
+
+            // If a non-multi-cell audio is playing, stop all multi-cell audio
+            if (!isMultiCellAudio) {
+                audioElementsRef.current.forEach((data) => {
+                    if (data.audioElement !== currentGlobalAudio) {
+                        try {
+                            data.audioElement.pause();
+                            data.audioElement.currentTime = 0;
+                            data.isPlaying = false;
+                        } catch (error) {
+                            console.error(`Error stopping audio for cell ${data.cellId}:`, error);
+                        }
+                    }
+                });
+                updateVideoMuteState(currentTime);
+                return; // Don't start new multi-cell audio if other audio is playing
+            }
+        }
+
+        audioElementsRef.current.forEach((data) => {
+            // Check if audio should start
+            // Check if we're past the start time (with small tolerance for timing precision)
+            // and haven't started playing yet
+            const isPastStartTime = currentTime >= data.startTime - tolerance;
+            const isBeforeEndTime = data.endTime === undefined || currentTime < data.endTime;
+            const shouldStart =
+                !data.isPlaying &&
+                data.audioElement.paused &&
+                isPastStartTime &&
+                isBeforeEndTime;
+
+            if (shouldStart) {
+                // Check if audio element has an error
+                if (data.audioElement.error) {
+                    console.error(
+                        `Audio element has error for cell ${data.cellId}:`,
+                        `code ${data.audioElement.error.code}`,
+                        data.audioElement.error.message
+                    );
+                    // Try to reload the audio
+                    try {
+                        data.audioElement.load();
+                    } catch (reloadError) {
+                        console.error(`Failed to reload audio for cell ${data.cellId}:`, reloadError);
+                    }
+                    return; // Skip this audio element
+                }
+
+                // Ensure audio is ready before playing
+                if (data.audioElement.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA) {
+                    // Start audio playback
+                    data.audioElement
+                        .play()
+                        .then(() => {
+                            data.isPlaying = true;
+                            updateVideoMuteState();
+                        })
+                        .catch((error) => {
+                            // Suppress AbortError warnings - these are expected when pause() interrupts play()
+                            // This commonly happens during rapid seeking or when cleanup occurs
+                            if (error instanceof Error && error.name === "AbortError") {
+                                // Mark as not playing but don't log the error
+                                data.isPlaying = false;
+                                updateVideoMuteState();
+                                return;
+                            }
+                            const audioError = data.audioElement.error;
+                            console.error(
+                                `Error starting audio for cell ${data.cellId}:`,
+                                error,
+                                `Audio readyState: ${data.audioElement.readyState}`,
+                                `Error code: ${audioError?.code}`,
+                                `Error message: ${audioError?.message}`
+                            );
+                            // Mark as not playing
+                            data.isPlaying = false;
+                            updateVideoMuteState();
+                        });
+                } else {
+                    // Wait for audio to be ready, then try again on next time update
+                    // Remove any existing listener first
+                    const onCanPlay = () => {
+                        data.audioElement.removeEventListener("canplay", onCanPlay);
+                        data.audioElement.removeEventListener("loadeddata", onCanPlay);
+                        // Check again if we should still start
+                        if (
+                            !data.isPlaying &&
+                            data.audioElement.paused &&
+                            currentVideoTime >= data.startTime - tolerance &&
+                            (data.endTime === undefined || currentVideoTime < data.endTime)
+                        ) {
+                            data.audioElement
+                                .play()
+                                .then(() => {
+                                    data.isPlaying = true;
+                                    updateVideoMuteState();
+                                })
+                                .catch((error) => {
+                                    // Suppress AbortError warnings - these are expected when pause() interrupts play()
+                                    if (error instanceof Error && error.name === "AbortError") {
+                                        return;
+                                    }
+                                    const audioError = data.audioElement.error;
+                                    console.error(
+                                        `Error starting audio for cell ${data.cellId} after ready:`,
+                                        error,
+                                        `Error code: ${audioError?.code}`,
+                                        `Error message: ${audioError?.message}`
+                                    );
+                                });
+                        }
+                    };
+                    data.audioElement.addEventListener("canplay", onCanPlay);
+                    data.audioElement.addEventListener("loadeddata", onCanPlay);
+                }
+            }
+
+            // Stop audio if past end time
+            if (
+                data.isPlaying &&
+                !data.audioElement.paused &&
+                data.endTime !== undefined &&
+                currentTime > data.endTime
+            ) {
+                data.audioElement.pause();
+                data.audioElement.currentTime = 0;
+                data.isPlaying = false;
+                updateVideoMuteState();
+            }
+        });
+    }, [currentVideoTime, isVideoPlaying, updateVideoMuteState]);
+
+    // Handle video time updates - start audio at correct timestamps
+    // Debounce to prevent excessive calls during timeline dragging
+    useEffect(() => {
+        // Clear any existing timer
+        if (debounceTimerRef.current) {
+            clearTimeout(debounceTimerRef.current);
+        }
+
+        // Debounce the check - only run after 50ms of no time updates
+        // This prevents hundreds of calls when dragging the timeline slider
+        debounceTimerRef.current = setTimeout(() => {
+            checkAndStartAudio();
+        }, 50);
+
+        return () => {
+            if (debounceTimerRef.current) {
+                clearTimeout(debounceTimerRef.current);
+            }
+        };
+    }, [checkAndStartAudio]);
+
+    // Also trigger playback check when translation units change (timestamps updated)
+    useEffect(() => {
+        if (isVideoPlaying) {
+            checkAndStartAudio();
+        }
+    }, [translationUnitsForSection, isVideoPlaying, checkAndStartAudio]);
+
+    // Stop all audio when video pauses
+    useEffect(() => {
+        if (!isVideoPlaying) {
+            audioElementsRef.current.forEach((data) => {
+                try {
+                    data.audioElement.pause();
+                    data.audioElement.currentTime = 0;
+                    data.isPlaying = false;
+                } catch (error) {
+                    console.error(`Error stopping audio for cell ${data.cellId}:`, error);
+                }
+            });
+            restoreVideoMuteState();
+        }
+    }, [isVideoPlaying, restoreVideoMuteState]);
+
+    // Listen for global audio controller events to stop multi-cell playback
+    useEffect(() => {
+        const handler = (e: AudioControllerEvent) => {
+            // Check if the stopped audio was one of our multi-cell audio elements
+            const stoppedAudio = e.audio;
+            let wasMultiCellAudio = false;
+
+            audioElementsRef.current.forEach((data) => {
+                if (data.audioElement === stoppedAudio) {
+                    wasMultiCellAudio = true;
+                }
+            });
+
+            // If a multi-cell audio was stopped OR if a different audio is now playing,
+            // stop all multi-cell audio to ensure exclusive playback
+            const currentAudio = globalAudioController.getCurrent();
+            if (wasMultiCellAudio || (currentAudio && currentAudio !== stoppedAudio)) {
+                audioElementsRef.current.forEach((data) => {
+                    if (data.audioElement !== currentAudio) {
+                        try {
+                            data.audioElement.pause();
+                            data.audioElement.currentTime = 0;
+                            data.isPlaying = false;
+                        } catch (error) {
+                            console.error(`Error stopping audio for cell ${data.cellId}:`, error);
+                        }
+                    }
+                });
+                updateVideoMuteState();
+            }
+        };
+
+        globalAudioController.addListener(handler);
+        return () => globalAudioController.removeListener(handler);
+    }, [updateVideoMuteState]);
+
+    // Cleanup on unmount
+    useEffect(() => {
+        return () => {
+            cleanupAudioElements();
+            restoreVideoMuteState();
+            if (messageHandlerRef.current) {
+                window.removeEventListener("message", messageHandlerRef.current);
+            }
+        };
+    }, [cleanupAudioElements, restoreVideoMuteState]);
+}
+
diff --git a/webviews/codex-webviews/src/CodexCellEditor/types/reactPlayerTypes.ts b/webviews/codex-webviews/src/CodexCellEditor/types/reactPlayerTypes.ts
new file mode 100644
index 000000000..de99e2105
--- /dev/null
+++ b/webviews/codex-webviews/src/CodexCellEditor/types/reactPlayerTypes.ts
@@ -0,0 +1,12 @@
+/**
+ * React Player v3 returns HTMLVideoElement but may expose additional methods
+ * This interface extends HTMLVideoElement to include ReactPlayer-specific methods
+ */
+export interface ReactPlayerRef extends HTMLVideoElement {
+    seekTo?: (amount: number, type?: "seconds" | "fraction") => void;
+    getCurrentTime?: () => number;
+    getSecondsLoaded?: () => number;
+    getDuration?: () => number;
+    getInternalPlayer?: (key?: string) => any;
+}
+
diff --git a/webviews/codex-webviews/src/NewSourceUploader/types/plugin.ts b/webviews/codex-webviews/src/NewSourceUploader/types/plugin.ts
index 56fd218d2..f1bf7da41 100644
--- a/webviews/codex-webviews/src/NewSourceUploader/types/plugin.ts
+++ b/webviews/codex-webviews/src/NewSourceUploader/types/plugin.ts
@@ -1,6 +1,7 @@
 import { NotebookPair, ProcessedNotebook } from './common';
 import type { CustomNotebookCellData } from 'types';
 import { WizardContext } from './wizard';
+import React from 'react';
 
 /**
  * Information about existing source files in the project
diff --git a/webviews/codex-webviews/src/lib/audioController.ts b/webviews/codex-webviews/src/lib/audioController.ts
index cd2fad837..404150bda 100644
--- a/webviews/codex-webviews/src/lib/audioController.ts
+++ b/webviews/codex-webviews/src/lib/audioController.ts
@@ -56,6 +56,18 @@ export class GlobalAudioController {
     getCurrent(): HTMLAudioElement | null {
         return this.currentAudio;
     }
+
+    /**
+     * Release an audio element from being considered "current" when it was stopped
+     * programmatically (e.g. via pause() in a timeupdate handler). Call this so
+     * that subsequent playback (e.g. VideoPlayer play) is not blocked by stale state.
+     */
+    release(audio: HTMLAudioElement | null): void {
+        if (audio && this.currentAudio === audio) {
+            this.currentAudio = null;
+            this.notifyStopped(audio);
+        }
+    }
 }
 
 export const globalAudioController = new GlobalAudioController();
diff --git a/webviews/codex-webviews/vite.config.ts b/webviews/codex-webviews/vite.config.ts
index c7269de51..59e2a456b 100644
--- a/webviews/codex-webviews/vite.config.ts
+++ b/webviews/codex-webviews/vite.config.ts
@@ -1,12 +1,99 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
+import tailwindcss from "@tailwindcss/vite";
 import path from "path";
+import fs from "fs";
+
+// Plugin to ensure CSS is injected into the bundle
+const injectCssPlugin = () => {
+    let cssContent = "";
+
+    return {
+        name: "inject-css-for-webview",
+        enforce: "post" as const, // Run after other plugins
+        generateBundle(_options, bundle) {
+            // Find CSS asset
+            const cssAsset = Object.values(bundle).find(
+                (chunk: any) => chunk.type === "asset" && chunk.fileName?.endsWith(".css")
+            ) as { type: string; fileName: string; source: string | Buffer; } | undefined;
+
+            if (cssAsset && cssAsset.type === "asset") {
+                cssContent = typeof cssAsset.source === "string"
+                    ? cssAsset.source
+                    : cssAsset.source.toString();
+                // Remove CSS file from bundle since we'll inject it
+                delete bundle[cssAsset.fileName];
+            }
+        },
+        renderChunk(code, chunk, _options) {
+            // Inject CSS into entry chunks
+            if (chunk.isEntry && cssContent) {
+                const cssInjection = `(function(){if(typeof document!=='undefined'){const style=document.createElement('style');style.textContent=${JSON.stringify(cssContent)};document.head.appendChild(style);}})();`;
+                return {
+                    code: cssInjection + code,
+                    map: null,
+                };
+            }
+            return null;
+        },
+        closeBundle() {
+            // Final fallback - inject CSS after everything is done
+            if (cssContent) {
+                const outputDir = path.join(process.cwd(), "dist", appToBuild || "");
+                const jsPath = path.join(outputDir, "index.js");
+
+                if (fs.existsSync(jsPath)) {
+                    const jsContent = fs.readFileSync(jsPath, "utf-8");
+
+                    // Only inject if not already injected
+                    if (!jsContent.includes("createElement('style')")) {
+                        const cssInjection = `(function(){if(typeof document!=='undefined'){const style=document.createElement('style');style.textContent=${JSON.stringify(cssContent)};document.head.appendChild(style);}})();`;
+                        fs.writeFileSync(jsPath, cssInjection + jsContent, "utf-8");
+                    }
+                }
+            }
+        },
+        writeBundle(options, bundle) {
+            // Fallback: Also check for any CSS files in the output directory
+            if (!cssContent) {
+                const outputDir = path.join(process.cwd(), options.dir || "dist", appToBuild || "");
+                if (fs.existsSync(outputDir)) {
+                    const files = fs.readdirSync(outputDir);
+                    const cssFile = files.find((f) => f.endsWith(".css"));
+                    if (cssFile) {
+                        const cssPath = path.join(outputDir, cssFile);
+                        cssContent = fs.readFileSync(cssPath, "utf-8");
+                        fs.unlinkSync(cssPath);
+
+                        // Inject into JS file
+                        const jsFile = Object.values(bundle).find(
+                            (chunk: any) => chunk.type === "chunk" && chunk.isEntry
+                        ) as { type: string; fileName: string; } | undefined;
+
+                        if (jsFile && jsFile.type === "chunk") {
+                            const jsPath = path.join(outputDir, jsFile.fileName);
+                            if (fs.existsSync(jsPath)) {
+                                const jsContent = fs.readFileSync(jsPath, "utf-8");
+                                const cssInjection = `(function(){if(typeof document!=='undefined'){const style=document.createElement('style');style.textContent=${JSON.stringify(cssContent)};document.head.appendChild(style);}})();`;
+                                fs.writeFileSync(jsPath, cssInjection + jsContent, "utf-8");
+                            }
+                        }
+                    }
+                }
+            }
+        },
+    };
+};
 
 // Use an environment variable to specify the app to build
 const appToBuild = process.env.APP_NAME;
 
 export default defineConfig({
-    plugins: [react()],
+    plugins: [
+        react(),
+        tailwindcss(),
+        injectCssPlugin(),
+    ],
     resolve: {
         alias: {
             "@sharedUtils": path.resolve(__dirname, "../../sharedUtils"),
@@ -22,6 +109,14 @@ export default defineConfig({
             // "@/lib": path.resolve(__dirname, "./src/lib"),
         },
     },
+    // Optimize dependencies for ESM-only packages like react-player v3
+    optimizeDeps: {
+        include: ["react-player"],
+        // Ensure ESM dependencies are properly handled
+        esbuildOptions: {
+            target: "es2020",
+        },
+    },
     css: {
         postcss: "./postcss.config.js",
     },
@@ -39,6 +134,8 @@ export default defineConfig({
         },
         outDir: appToBuild ? `dist/${appToBuild}` : "dist",
         sourcemap: true,
-        // cssCodeSplit: false, // Inline CSS into JS for webview compatibility
+        // Ensure ESM dependencies are properly bundled
+        target: "es2020",
+        cssCodeSplit: false, // Inline CSS into JS for webview compatibility
     },
 });