@design.estate/wcctools 5.1.0 → 6.1.0

package/ts_web/elements/wcc-recording-panel.ts

@@ -1,1010 +0,0 @@
-import { DeesElement, customElement, html, css, property, state, type TemplateResult } from '@design.estate/dees-element';
-import { RecorderService, type TOutputFormat } from '../services/recorder.service.js';
-import type { WccDashboard } from './wcc-dashboard.js';
-
-@customElement('wcc-recording-panel')
-export class WccRecordingPanel extends DeesElement {
-  // External configuration
-  @property({ attribute: false })
-  accessor dashboardRef: WccDashboard;
-
-  // Panel state
-  @state()
-  accessor panelState: 'options' | 'recording' | 'preview' = 'options';
-
-  // Recording options
-  @state()
-  accessor recordingMode: 'viewport' | 'screen' = 'viewport';
-
-  @state()
-  accessor outputFormat: TOutputFormat = 'mp4';
-
-  @state()
-  accessor audioEnabled: boolean = false;
-
-  @state()
-  accessor selectedMicrophoneId: string = '';
-
-  @state()
-  accessor availableMicrophones: MediaDeviceInfo[] = [];
-
-  @state()
-  accessor audioLevel: number = 0;
-
-  // Recording state
-  @state()
-  accessor recordingDuration: number = 0;
-
-  // Preview/trim state
-  @state()
-  accessor previewVideoUrl: string = '';
-
-  @state()
-  accessor trimStart: number = 0;
-
-  @state()
-  accessor trimEnd: number = 0;
-
-  @state()
-  accessor videoDuration: number = 0;
-
-  @state()
-  accessor isDraggingTrim: 'start' | 'end' | null = null;
-
-  @state()
-  accessor isExporting: boolean = false;
-
-  // Service instance
-  private recorderService: RecorderService;
-
-  constructor() {
-    super();
-    this.recorderService = new RecorderService({
-      onDurationUpdate: (duration) => {
-        this.recordingDuration = duration;
-        this.dispatchEvent(new CustomEvent('duration-update', {
-          detail: { duration },
-          bubbles: true,
-          composed: true
-        }));
-      },
-      onRecordingComplete: (blob) => {
-        this.handleRecordingComplete(blob);
-      },
-      onAudioLevelUpdate: (level) => {
-        this.audioLevel = level;
-      },
-      onStreamEnded: () => {
-        this.stopRecording();
-      }
-    });
-  }
-
-  public static styles = [
-    css`
-      :host {
-        /* CSS Variables */
-        --background: #0a0a0a;
-        --foreground: #e5e5e5;
-        --input: #141414;
-        --primary: #3b82f6;
-        --border: rgba(255, 255, 255, 0.06);
-        --radius-sm: 2px;
-        --radius-md: 4px;
-        --radius-lg: 6px;
-      }
-
-      /* Recording Options Panel */
-      .recording-options-panel {
-        position: fixed;
-        right: 16px;
-        bottom: 116px;
-        width: 360px;
-        background: #0c0c0c;
-        border: 1px solid rgba(255, 255, 255, 0.1);
-        border-radius: var(--radius-md);
-        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
-        z-index: 1000;
-        overflow: hidden;
-        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
-      }
-
-      .recording-options-header {
-        padding: 0.75rem 1rem;
-        background: rgba(255, 255, 255, 0.02);
-        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-      }
-
-      .recording-options-title {
-        font-size: 0.8rem;
-        font-weight: 500;
-        color: #ccc;
-      }
-
-      .recording-options-close {
-        width: 24px;
-        height: 24px;
-        background: transparent;
-        border: none;
-        color: #666;
-        cursor: pointer;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        border-radius: var(--radius-sm);
-        transition: all 0.15s ease;
-      }
-
-      .recording-options-close:hover {
-        background: rgba(255, 255, 255, 0.05);
-        color: #999;
-      }
-
-      .recording-options-content {
-        padding: 1rem;
-      }
-
-      .recording-option-group {
-        margin-bottom: 1rem;
-      }
-
-      .recording-option-group:last-child {
-        margin-bottom: 0;
-      }
-
-      .recording-option-label {
-        font-size: 0.7rem;
-        font-weight: 500;
-        color: #888;
-        text-transform: uppercase;
-        letter-spacing: 0.05em;
-        margin-bottom: 0.5rem;
-      }
-
-      .recording-mode-buttons {
-        display: flex;
-        gap: 0.5rem;
-      }
-
-      .recording-mode-btn {
-        flex: 1;
-        padding: 0.6rem 0.75rem;
-        background: var(--input);
-        border: 1px solid transparent;
-        border-radius: var(--radius-sm);
-        color: #999;
-        font-size: 0.75rem;
-        cursor: pointer;
-        transition: all 0.15s ease;
-        text-align: center;
-      }
-
-      .recording-mode-btn:hover {
-        border-color: var(--primary);
-        color: #ccc;
-      }
-
-      .recording-mode-btn.selected {
-        background: rgba(59, 130, 246, 0.15);
-        border-color: var(--primary);
-        color: var(--primary);
-      }
-
-      .audio-toggle {
-        display: flex;
-        align-items: center;
-        gap: 0.5rem;
-        margin-bottom: 0.75rem;
-      }
-
-      .audio-toggle input[type="checkbox"] {
-        width: 1rem;
-        height: 1rem;
-        accent-color: var(--primary);
-      }
-
-      .audio-toggle label {
-        font-size: 0.75rem;
-        color: #999;
-        cursor: pointer;
-      }
-
-      .microphone-select {
-        width: 100%;
-        padding: 0.5rem 0.75rem;
-        background: var(--input);
-        border: 1px solid transparent;
-        border-radius: var(--radius-sm);
-        color: var(--foreground);
-        font-size: 0.75rem;
-        outline: none;
-        cursor: pointer;
-        transition: all 0.15s ease;
-      }
-
-      .microphone-select:focus {
-        border-color: var(--primary);
-      }
-
-      .microphone-select:disabled {
-        opacity: 0.5;
-        cursor: not-allowed;
-      }
-
-      .audio-level-container {
-        margin-top: 0.75rem;
-        padding: 0.5rem;
-        background: rgba(255, 255, 255, 0.02);
-        border-radius: var(--radius-sm);
-      }
-
-      .audio-level-label {
-        font-size: 0.65rem;
-        color: #666;
-        margin-bottom: 0.25rem;
-      }
-
-      .audio-level-bar {
-        height: 8px;
-        background: var(--input);
-        border-radius: 4px;
-        overflow: hidden;
-      }
-
-      .audio-level-fill {
-        height: 100%;
-        background: linear-gradient(90deg, #22c55e, #84cc16, #eab308);
-        border-radius: 4px;
-        transition: width 0.1s ease;
-      }
-
-      .start-recording-btn {
-        width: 100%;
-        padding: 0.75rem;
-        background: #dc2626;
-        border: none;
-        border-radius: var(--radius-sm);
-        color: white;
-        font-size: 0.8rem;
-        font-weight: 500;
-        cursor: pointer;
-        transition: all 0.15s ease;
-        margin-top: 1rem;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        gap: 0.5rem;
-      }
-
-      .start-recording-btn:hover {
-        background: #b91c1c;
-      }
-
-      .start-recording-btn .rec-dot {
-        width: 10px;
-        height: 10px;
-        background: white;
-        border-radius: 50%;
-      }
-
-      /* Preview Modal */
-      .preview-modal-overlay {
-        position: fixed;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        background: rgba(0, 0, 0, 0.8);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        z-index: 1000;
-        backdrop-filter: blur(4px);
-        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
-      }
-
-      .preview-modal {
-        width: 90%;
-        max-width: 800px;
-        background: #0c0c0c;
-        border: 1px solid rgba(255, 255, 255, 0.1);
-        border-radius: var(--radius-lg);
-        overflow: hidden;
-        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
-      }
-
-      .preview-modal-header {
-        padding: 1rem 1.25rem;
-        background: rgba(255, 255, 255, 0.02);
-        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-      }
-
-      .preview-modal-title {
-        font-size: 0.9rem;
-        font-weight: 500;
-        color: #ccc;
-      }
-
-      .preview-modal-close {
-        width: 28px;
-        height: 28px;
-        background: transparent;
-        border: none;
-        color: #666;
-        cursor: pointer;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        border-radius: var(--radius-sm);
-        font-size: 1.2rem;
-        transition: all 0.15s ease;
-      }
-
-      .preview-modal-close:hover {
-        background: rgba(255, 255, 255, 0.05);
-        color: #999;
-      }
-
-      .preview-modal-content {
-        padding: 1.25rem;
-      }
-
-      .preview-video-container {
-        background: #000;
-        border-radius: var(--radius-sm);
-        overflow: hidden;
-        aspect-ratio: 16 / 9;
-      }
-
-      .preview-video {
-        width: 100%;
-        height: 100%;
-        object-fit: contain;
-      }
-
-      .preview-modal-actions {
-        padding: 1rem 1.25rem;
-        border-top: 1px solid rgba(255, 255, 255, 0.05);
-        display: flex;
-        justify-content: flex-end;
-        gap: 0.75rem;
-      }
-
-      .preview-btn {
-        padding: 0.6rem 1.25rem;
-        border-radius: var(--radius-sm);
-        font-size: 0.8rem;
-        font-weight: 500;
-        cursor: pointer;
-        transition: all 0.15s ease;
-        display: inline-flex;
-        align-items: center;
-        gap: 0.5rem;
-      }
-
-      .preview-btn.secondary {
-        background: transparent;
-        border: 1px solid rgba(255, 255, 255, 0.1);
-        color: #999;
-      }
-
-      .preview-btn.secondary:hover {
-        border-color: rgba(255, 255, 255, 0.2);
-        color: #ccc;
-      }
-
-      .preview-btn.primary {
-        background: var(--primary);
-        border: none;
-        color: white;
-      }
-
-      .preview-btn.primary:hover {
-        background: #2563eb;
-      }
-
-      .preview-btn.primary:disabled {
-        background: #1e3a5f;
-        cursor: not-allowed;
-        opacity: 0.7;
-      }
-
-      /* Trim Timeline Styles */
-      .trim-section {
-        margin-top: 1.25rem;
-        padding-top: 1.25rem;
-        border-top: 1px solid rgba(255, 255, 255, 0.05);
-      }
-
-      .trim-section-header {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        margin-bottom: 0.75rem;
-      }
-
-      .trim-section-title {
-        font-size: 0.75rem;
-        font-weight: 500;
-        color: #888;
-        text-transform: uppercase;
-        letter-spacing: 0.05em;
-      }
-
-      .trim-duration-info {
-        font-size: 0.7rem;
-        color: #666;
-        font-family: 'Consolas', 'Monaco', monospace;
-      }
-
-      .trim-timeline {
-        position: relative;
-        height: 48px;
-        background: var(--input);
-        border-radius: var(--radius-sm);
-        margin-bottom: 0.75rem;
-        user-select: none;
-      }
-
-      .trim-track {
-        position: absolute;
-        top: 50%;
-        left: 12px;
-        right: 12px;
-        height: 6px;
-        background: #333;
-        transform: translateY(-50%);
-        border-radius: 3px;
-      }
-
-      .trim-selected {
-        position: absolute;
-        top: 50%;
-        height: 6px;
-        background: var(--primary);
-        transform: translateY(-50%);
-        border-radius: 3px;
-        pointer-events: none;
-      }
-
-      .trim-handle {
-        position: absolute;
-        top: 50%;
-        width: 16px;
-        height: 36px;
-        background: white;
-        border: 2px solid var(--primary);
-        border-radius: 4px;
-        transform: translate(-50%, -50%);
-        cursor: ew-resize;
-        z-index: 2;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        transition: background 0.15s ease, transform 0.1s ease;
-      }
-
-      .trim-handle:hover {
-        background: #e0e0e0;
-      }
-
-      .trim-handle:active {
-        background: var(--primary);
-        transform: translate(-50%, -50%) scale(1.05);
-      }
-
-      .trim-handle::before {
-        content: '';
-        width: 2px;
-        height: 16px;
-        background: #666;
-        border-radius: 1px;
-      }
-
-      .trim-handle:active::before {
-        background: white;
-      }
-
-      .trim-time-labels {
-        display: flex;
-        justify-content: space-between;
-        font-size: 0.65rem;
-        color: #666;
-        font-family: 'Consolas', 'Monaco', monospace;
-        padding: 0 12px;
-      }
-
-      .trim-actions {
-        display: flex;
-        gap: 0.5rem;
-        margin-top: 0.75rem;
-      }
-
-      .trim-action-btn {
-        flex: 1;
-        padding: 0.5rem 0.75rem;
-        background: var(--input);
-        border: 1px solid transparent;
-        border-radius: var(--radius-sm);
-        color: #999;
-        font-size: 0.75rem;
-        cursor: pointer;
-        transition: all 0.15s ease;
-        text-align: center;
-      }
-
-      .trim-action-btn:hover {
-        border-color: var(--primary);
-        color: #ccc;
-      }
-
-      .export-spinner {
-        display: inline-block;
-        width: 14px;
-        height: 14px;
-        border: 2px solid rgba(255, 255, 255, 0.3);
-        border-radius: 50%;
-        border-top-color: white;
-        animation: spin 0.8s linear infinite;
-        flex-shrink: 0;
-      }
-
-      @keyframes spin {
-        to { transform: rotate(360deg); }
-      }
-
-    `
-  ];
-
-  public render(): TemplateResult {
-    if (this.panelState === 'options') {
-      return this.renderOptionsPanel();
-    } else if (this.panelState === 'preview') {
-      return this.renderPreviewModal();
-    }
-    return html``;
-  }
-
-  private renderOptionsPanel(): TemplateResult {
-    return html`
-      <div class="recording-options-panel">
-        <div class="recording-options-header">
-          <span class="recording-options-title">Recording Settings</span>
-          <button class="recording-options-close" @click=${() => this.close()}>✕</button>
-        </div>
-        <div class="recording-options-content">
-          <div class="recording-option-group">
-            <div class="recording-option-label">Record Area</div>
-            <div class="recording-mode-buttons">
-              <button
-                class="recording-mode-btn ${this.recordingMode === 'viewport' ? 'selected' : ''}"
-                @click=${() => this.recordingMode = 'viewport'}
-              >
-                Viewport Only
-              </button>
-              <button
-                class="recording-mode-btn ${this.recordingMode === 'screen' ? 'selected' : ''}"
-                @click=${() => this.recordingMode = 'screen'}
-              >
-                Entire Screen
-              </button>
-            </div>
-          </div>
-
-          <div class="recording-option-group">
-            <div class="recording-option-label">Format</div>
-            <div class="recording-mode-buttons">
-              <button
-                class="recording-mode-btn ${this.outputFormat === 'mp4' ? 'selected' : ''}"
-                @click=${() => this.outputFormat = 'mp4'}
-              >
-                MP4 (H.264)
-              </button>
-              <button
-                class="recording-mode-btn ${this.outputFormat === 'webm' ? 'selected' : ''}"
-                @click=${() => this.outputFormat = 'webm'}
-              >
-                WebM (VP9)
-              </button>
-            </div>
-          </div>
-
-          <div class="recording-option-group">
-            <div class="recording-option-label">Audio</div>
-            <div class="audio-toggle">
-              <input
-                type="checkbox"
-                id="audioToggle"
-                ?checked=${this.audioEnabled}
-                @change=${(e: Event) => this.handleAudioToggle((e.target as HTMLInputElement).checked)}
-              />
-              <label for="audioToggle">Enable Microphone</label>
-            </div>
-
-            ${this.audioEnabled ? html`
-              <select
-                class="microphone-select"
-                .value=${this.selectedMicrophoneId}
-                @change=${(e: Event) => this.handleMicrophoneChange((e.target as HTMLSelectElement).value)}
-              >
-                <option value="">Select Microphone...</option>
-                ${this.availableMicrophones.map(mic => html`
-                  <option value=${mic.deviceId}>${mic.label || `Microphone ${mic.deviceId.slice(0, 8)}`}</option>
-                `)}
-              </select>
-
-              ${this.selectedMicrophoneId ? html`
-                <div class="audio-level-container">
-                  <div class="audio-level-label">Input Level</div>
-                  <div class="audio-level-bar">
-                    <div class="audio-level-fill" style="width: ${this.audioLevel}%"></div>
-                  </div>
-                </div>
-              ` : null}
-            ` : null}
-          </div>
-
-          <button class="start-recording-btn" @click=${() => this.startRecording()}>
-            <div class="rec-dot"></div>
-            Start Recording
-          </button>
-        </div>
-      </div>
-    `;
-  }
-
-  private renderPreviewModal(): TemplateResult {
-    return html`
-      <div class="preview-modal-overlay" @click=${(e: Event) => {
-        if ((e.target as HTMLElement).classList.contains('preview-modal-overlay')) {
-          this.discardRecording();
-        }
-      }}>
-        <div class="preview-modal">
-          <div class="preview-modal-header">
-            <span class="preview-modal-title">Recording Preview</span>
-            <button class="preview-modal-close" @click=${() => this.discardRecording()}>✕</button>
-          </div>
-          <div class="preview-modal-content">
-            <div class="preview-video-container">
-              <video
-                class="preview-video"
-                src=${this.previewVideoUrl}
-                controls
-                @loadedmetadata=${(e: Event) => this.handleVideoLoaded(e.target as HTMLVideoElement)}
-              ></video>
-            </div>
-
-            <!-- Trim Section -->
-            <div class="trim-section">
-              <div class="trim-section-header">
-                <span class="trim-section-title">Trim Video</span>
-                <span class="trim-duration-info">
-                  ${this.formatDuration(Math.floor(this.trimEnd - this.trimStart))}
-                  ${this.trimStart > 0 || this.trimEnd < this.videoDuration
-                    ? `(trimmed from ${this.formatDuration(Math.floor(this.videoDuration))})`
-                    : ''}
-                </span>
-              </div>
-
-              <div
-                class="trim-timeline"
-                @mousedown=${(e: MouseEvent) => this.handleTimelineClick(e)}
-                @mousemove=${(e: MouseEvent) => this.handleTimelineDrag(e)}
-                @mouseup=${() => this.handleTimelineDragEnd()}
-                @mouseleave=${() => this.handleTimelineDragEnd()}
-              >
-                <div class="trim-track"></div>
-                <div
-                  class="trim-selected"
-                  style="left: ${this.getHandlePositionStyle(this.trimStart)}; right: ${this.getHandlePositionFromEndStyle(this.trimEnd)};"
-                ></div>
-                <div
-                  class="trim-handle start-handle"
-                  style="left: ${this.getHandlePositionStyle(this.trimStart)};"
-                  @mousedown=${(e: MouseEvent) => { e.stopPropagation(); this.isDraggingTrim = 'start'; }}
-                ></div>
-                <div
-                  class="trim-handle end-handle"
-                  style="left: ${this.getHandlePositionStyle(this.trimEnd)};"
-                  @mousedown=${(e: MouseEvent) => { e.stopPropagation(); this.isDraggingTrim = 'end'; }}
-                ></div>
-              </div>
-
-              <div class="trim-time-labels">
-                <span>${this.formatDuration(Math.floor(this.trimStart))}</span>
-                <span>${this.formatDuration(Math.floor(this.trimEnd))}</span>
-              </div>
-
-              <div class="trim-actions">
-                <button class="trim-action-btn" @click=${() => this.resetTrim()}>
-                  Reset Trim
-                </button>
-                <button class="trim-action-btn" @click=${() => this.previewTrimmedSection()}>
-                  Preview Selection
-                </button>
-              </div>
-            </div>
-
-          </div>
-          <div class="preview-modal-actions">
-            <button class="preview-btn secondary" @click=${() => this.discardRecording()}>Discard</button>
-            <button
-              class="preview-btn primary"
-              ?disabled=${this.isExporting}
-              @click=${() => this.downloadRecording()}
-            >
-              ${this.isExporting
-                ? html`<span class="export-spinner"></span>${this.outputFormat === 'mp4' ? 'Converting to MP4...' : 'Exporting...'}`
-                : `Download ${this.outputFormat === 'mp4' ? 'MP4' : 'WebM'}`}
-            </button>
-          </div>
-        </div>
-      </div>
-    `;
-  }
-
-  // ==================== Audio Methods ====================
-
-  private async handleAudioToggle(enabled: boolean): Promise<void> {
-    this.audioEnabled = enabled;
-    if (enabled) {
-      this.availableMicrophones = await this.recorderService.loadMicrophones(true);
-      if (this.availableMicrophones.length > 0 && !this.selectedMicrophoneId) {
-        this.selectedMicrophoneId = this.availableMicrophones[0].deviceId;
-        await this.recorderService.startAudioMonitoring(this.selectedMicrophoneId);
-      }
-    } else {
-      this.recorderService.stopAudioMonitoring();
-      this.selectedMicrophoneId = '';
-      this.audioLevel = 0;
-    }
-  }
-
-  private async handleMicrophoneChange(deviceId: string): Promise<void> {
-    this.selectedMicrophoneId = deviceId;
-    if (deviceId) {
-      await this.recorderService.startAudioMonitoring(deviceId);
-    } else {
-      this.recorderService.stopAudioMonitoring();
-      this.audioLevel = 0;
-    }
-  }
-
-  // ==================== Recording Methods ====================
-
-  private async startRecording(): Promise<void> {
-    try {
-      let viewportElement: HTMLElement | undefined;
-      if (this.recordingMode === 'viewport' && this.dashboardRef) {
-        const wccFrame = await this.dashboardRef.wccFrame;
-        viewportElement = await wccFrame.getViewportElement();
-      }
-
-      await this.recorderService.startRecording({
-        mode: this.recordingMode,
-        audioDeviceId: this.audioEnabled ? this.selectedMicrophoneId : undefined,
-        viewportElement,
-      });
-
-      this.panelState = 'recording';
-      this.dispatchEvent(new CustomEvent('recording-start', {
-        bubbles: true,
-        composed: true
-      }));
-    } catch (error) {
-      console.error('Failed to start recording:', error);
-      this.panelState = 'options';
-    }
-  }
-
-  public stopRecording(): void {
-    this.recorderService.stopRecording();
-  }
-
-  private handleRecordingComplete(blob: Blob): void {
-    if (this.previewVideoUrl) {
-      URL.revokeObjectURL(this.previewVideoUrl);
-    }
-    this.previewVideoUrl = URL.createObjectURL(blob);
-    this.panelState = 'preview';
-    this.dispatchEvent(new CustomEvent('recording-stop', {
-      bubbles: true,
-      composed: true
-    }));
-  }
-
-  private discardRecording(): void {
-    if (this.previewVideoUrl) {
-      URL.revokeObjectURL(this.previewVideoUrl);
-      this.previewVideoUrl = '';
-    }
-    this.recorderService.reset();
-    this.trimStart = 0;
-    this.trimEnd = 0;
-    this.videoDuration = 0;
-    this.isExporting = false;
-    this.recordingDuration = 0;
-    this.close();
-  }
-
-  private async downloadRecording(): Promise<void> {
-    const recordedBlob = this.recorderService.recordedBlob;
-    if (!recordedBlob) return;
-
-    this.isExporting = true;
-
-    try {
-      let blobToDownload: Blob;
-
-      // Handle trimming if needed — always produces WebM
-      const needsTrim = this.trimStart > 0.1 || this.trimEnd < this.videoDuration - 0.1;
-
-      if (needsTrim) {
-        const video = this.shadowRoot?.querySelector('.preview-video') as HTMLVideoElement;
-        if (video) {
-          blobToDownload = await this.recorderService.exportTrimmedVideo(video, this.trimStart, this.trimEnd);
-        } else {
-          blobToDownload = recordedBlob;
-        }
-      } else {
-        blobToDownload = recordedBlob;
-      }
-
-      // Convert WebM → MP4 if MP4 format selected
-      if (this.outputFormat === 'mp4') {
-        blobToDownload = await this.recorderService.convertToMp4(blobToDownload);
-      }
-
-      // Trigger download
-      const timestamp = new Date().toISOString().replace(/[:.]/g, '-').slice(0, 19);
-      const ext = this.outputFormat === 'mp4' ? 'mp4' : 'webm';
-      const filename = `wcctools-recording-${timestamp}.${ext}`;
-
-      const url = URL.createObjectURL(blobToDownload);
-      const a = document.createElement('a');
-      a.href = url;
-      a.download = filename;
-      document.body.appendChild(a);
-      a.click();
-      document.body.removeChild(a);
-      URL.revokeObjectURL(url);
-
-      this.discardRecording();
-    } catch (error) {
-      console.error('Error exporting video:', error);
-      this.isExporting = false;
-    }
-  }
-
-  // ==================== Trim Methods ====================
-
-  private handleVideoLoaded(video: HTMLVideoElement): void {
-    // WebM files from MediaRecorder may have Infinity/NaN duration
-    // Fall back to the tracked recording duration
-    const duration = Number.isFinite(video.duration) ? video.duration : this.recordingDuration;
-    this.videoDuration = duration;
-    this.trimStart = 0;
-    this.trimEnd = duration;
-  }
-
-  private formatDuration(seconds: number): string {
-    const mins = Math.floor(seconds / 60);
-    const secs = seconds % 60;
-    return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
-  }
-
-  private getHandlePositionStyle(time: number): string {
-    if (this.videoDuration === 0) return '12px';
-    const percentage = time / this.videoDuration;
-    // Formula: 12px padding + percentage of remaining width (total - 24px padding)
-    // At 0%: 12px (left edge of track)
-    // At 100%: calc(100% - 12px) (right edge of track)
-    return `calc(12px + ${(percentage * 100).toFixed(2)}% - ${(percentage * 24).toFixed(2)}px)`;
-  }
-
-  private getHandlePositionFromEndStyle(time: number): string {
-    if (this.videoDuration === 0) return '12px';
-    const percentage = time / this.videoDuration;
-    const remainingPercentage = 1 - percentage;
-    // For CSS 'right' property: distance from right edge
-    // At trimEnd = 100%: right = 12px (at right edge of track)
-    // At trimEnd = 0%: right = calc(100% - 12px) (at left edge of track)
-    return `calc(12px + ${(remainingPercentage * 100).toFixed(2)}% - ${(remainingPercentage * 24).toFixed(2)}px)`;
-  }
-
-  private handleTimelineClick(e: MouseEvent): void {
-    if (this.isDraggingTrim) return;
-
-    const timeline = e.currentTarget as HTMLElement;
-    const rect = timeline.getBoundingClientRect();
-    const x = e.clientX - rect.left;
-    const percentage = Math.max(0, Math.min(1, (x - 12) / (rect.width - 24)));
-    const time = percentage * this.videoDuration;
-
-    const video = this.shadowRoot?.querySelector('.preview-video') as HTMLVideoElement;
-    if (video) {
-      video.currentTime = time;
-    }
-  }
-
-  private handleTimelineDrag(e: MouseEvent): void {
-    if (!this.isDraggingTrim) return;
-
-    const timeline = e.currentTarget as HTMLElement;
-    const rect = timeline.getBoundingClientRect();
-    const x = e.clientX - rect.left;
-    const percentage = Math.max(0, Math.min(1, (x - 12) / (rect.width - 24)));
-    const time = percentage * this.videoDuration;
-
-    const minDuration = 1;
-
-    if (this.isDraggingTrim === 'start') {
-      this.trimStart = Math.min(time, this.trimEnd - minDuration);
-      this.trimStart = Math.max(0, this.trimStart);
-    } else if (this.isDraggingTrim === 'end') {
-      this.trimEnd = Math.max(time, this.trimStart + minDuration);
-      this.trimEnd = Math.min(this.videoDuration, this.trimEnd);
-    }
-
-    const video = this.shadowRoot?.querySelector('.preview-video') as HTMLVideoElement;
-    if (video) {
-      video.currentTime = this.isDraggingTrim === 'start' ? this.trimStart : this.trimEnd;
-    }
-  }
-
-  private handleTimelineDragEnd(): void {
-    this.isDraggingTrim = null;
-  }
-
-  private resetTrim(): void {
-    this.trimStart = 0;
-    this.trimEnd = this.videoDuration;
-
-    const video = this.shadowRoot?.querySelector('.preview-video') as HTMLVideoElement;
-    if (video) {
-      video.currentTime = 0;
-    }
-  }
-
-  private previewTrimmedSection(): void {
-    const video = this.shadowRoot?.querySelector('.preview-video') as HTMLVideoElement;
-    if (!video) return;
-
-    video.currentTime = this.trimStart;
-    video.play();
-
-    const checkTime = () => {
-      if (video.currentTime >= this.trimEnd) {
-        video.pause();
-        video.removeEventListener('timeupdate', checkTime);
-      }
-    };
-
-    video.addEventListener('timeupdate', checkTime);
-  }
-
-  // ==================== Lifecycle ====================
-
-  private close(): void {
-    this.recorderService.stopAudioMonitoring();
-    this.dispatchEvent(new CustomEvent('close', {
-      bubbles: true,
-      composed: true
-    }));
-  }
-
-  async disconnectedCallback(): Promise<void> {
-    await super.disconnectedCallback();
-    this.recorderService.dispose();
-    if (this.previewVideoUrl) {
-      URL.revokeObjectURL(this.previewVideoUrl);
-    }
-  }
-}