@design.estate/wcctools 5.1.0 → 6.1.0

package/dist_ts_web/services/recorder.service.js

@@ -1,353 +0,0 @@
-/**
- * RecorderService - Handles all MediaRecorder, audio monitoring, and video export logic.
- * Recording always uses MediaRecorder → WebM (the reliable browser path).
- * MP4 output is produced by converting WebM → MP4 via mediabunny at export time.
- */
-export class RecorderService {
-    // Recording state
-    mediaRecorder = null;
-    recordedChunks = [];
-    durationInterval = null;
-    _duration = 0;
-    _recordedBlob = null;
-    _isRecording = false;
-    _outputFormat = 'webm';
-    // Audio monitoring state
-    audioContext = null;
-    audioAnalyser = null;
-    audioMonitoringInterval = null;
-    monitoringStream = null;
-    // Current recording stream
-    currentStream = null;
-    // Event callbacks
-    events = {};
-    constructor(events) {
-        if (events) {
-            this.events = events;
-        }
-    }
-    // Public getters
-    get isRecording() {
-        return this._isRecording;
-    }
-    get duration() {
-        return this._duration;
-    }
-    get recordedBlob() {
-        return this._recordedBlob;
-    }
-    get outputFormat() {
-        return this._outputFormat;
-    }
-    // Update event callbacks
-    setEvents(events) {
-        this.events = { ...this.events, ...events };
-    }
-    // ==================== Microphone Management ====================
-    async loadMicrophones(requestPermission = false) {
-        try {
-            if (requestPermission) {
-                // Request permission by getting a temporary stream
-                const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
-                stream.getTracks().forEach(track => track.stop());
-            }
-            const devices = await navigator.mediaDevices.enumerateDevices();
-            return devices.filter(d => d.kind === 'audioinput');
-        }
-        catch (error) {
-            console.error('Error loading microphones:', error);
-            return [];
-        }
-    }
-    async startAudioMonitoring(deviceId) {
-        this.stopAudioMonitoring();
-        if (!deviceId)
-            return;
-        try {
-            const stream = await navigator.mediaDevices.getUserMedia({
-                audio: { deviceId: { exact: deviceId } }
-            });
-            this.monitoringStream = stream;
-            this.audioContext = new AudioContext();
-            const source = this.audioContext.createMediaStreamSource(stream);
-            this.audioAnalyser = this.audioContext.createAnalyser();
-            this.audioAnalyser.fftSize = 256;
-            source.connect(this.audioAnalyser);
-            const dataArray = new Uint8Array(this.audioAnalyser.frequencyBinCount);
-            this.audioMonitoringInterval = window.setInterval(() => {
-                if (this.audioAnalyser) {
-                    this.audioAnalyser.getByteFrequencyData(dataArray);
-                    const average = dataArray.reduce((a, b) => a + b) / dataArray.length;
-                    const level = Math.min(100, (average / 128) * 100);
-                    this.events.onAudioLevelUpdate?.(level);
-                }
-            }, 50);
-        }
-        catch (error) {
-            console.error('Error starting audio monitoring:', error);
-            this.events.onAudioLevelUpdate?.(0);
-        }
-    }
-    stopAudioMonitoring() {
-        if (this.audioMonitoringInterval) {
-            clearInterval(this.audioMonitoringInterval);
-            this.audioMonitoringInterval = null;
-        }
-        if (this.audioContext) {
-            this.audioContext.close();
-            this.audioContext = null;
-        }
-        if (this.monitoringStream) {
-            this.monitoringStream.getTracks().forEach(track => track.stop());
-            this.monitoringStream = null;
-        }
-        this.audioAnalyser = null;
-    }
-    // ==================== Recording Control ====================
-    async startRecording(options) {
-        try {
-            this._outputFormat = options.outputFormat || 'webm';
-            // Stop audio monitoring before recording
-            this.stopAudioMonitoring();
-            // Get video stream based on mode
-            const displayMediaOptions = {
-                video: {
-                    displaySurface: options.mode === 'viewport' ? 'browser' : 'monitor',
-                    frameRate: { ideal: 60 },
-                },
-                audio: false
-            };
-            // Add preferCurrentTab hint for viewport mode
-            if (options.mode === 'viewport') {
-                displayMediaOptions.preferCurrentTab = true;
-            }
-            const videoStream = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
-            // If viewport mode, try to crop to viewport element using Element Capture API
-            if (options.mode === 'viewport' && options.viewportElement) {
-                try {
-                    if ('CropTarget' in window) {
-                        const cropTarget = await window.CropTarget.fromElement(options.viewportElement);
-                        const [videoTrack] = videoStream.getVideoTracks();
-                        await videoTrack.cropTo(cropTarget);
-                    }
-                }
-                catch (e) {
-                    console.warn('Element Capture not supported, recording full tab:', e);
-                }
-            }
-            // Combine video with audio if enabled
-            let combinedStream = videoStream;
-            if (options.audioDeviceId) {
-                try {
-                    const audioStream = await navigator.mediaDevices.getUserMedia({
-                        audio: { deviceId: { exact: options.audioDeviceId } }
-                    });
-                    combinedStream = new MediaStream([
-                        ...videoStream.getVideoTracks(),
-                        ...audioStream.getAudioTracks()
-                    ]);
-                }
-                catch (audioError) {
-                    console.warn('Could not add audio:', audioError);
-                }
-            }
-            // Store stream for cleanup
-            this.currentStream = combinedStream;
-            // Handle stream ending (user clicks "Stop sharing")
-            videoStream.getVideoTracks()[0].onended = () => {
-                if (this._isRecording) {
-                    this.stopRecording();
-                    this.events.onStreamEnded?.();
-                }
-            };
-            // Always record as WebM — conversion to MP4 happens at export time
-            const mimeType = MediaRecorder.isTypeSupported('video/webm;codecs=vp9')
-                ? 'video/webm;codecs=vp9'
-                : 'video/webm';
-            this.mediaRecorder = new MediaRecorder(combinedStream, {
-                mimeType,
-                videoBitsPerSecond: 8_000_000, // 8 Mbps for smooth, high-quality capture
-            });
-            this.recordedChunks = [];
-            this.mediaRecorder.ondataavailable = (e) => {
-                if (e.data.size > 0) {
-                    this.recordedChunks.push(e.data);
-                }
-            };
-            this.mediaRecorder.onstop = () => this.handleRecordingComplete();
-            this.mediaRecorder.start(1000); // Capture in 1-second chunks
-            // Start duration timer
-            this._duration = 0;
-            this.durationInterval = window.setInterval(() => {
-                this._duration++;
-                this.events.onDurationUpdate?.(this._duration);
-            }, 1000);
-            this._isRecording = true;
-        }
-        catch (error) {
-            console.error('Error starting recording:', error);
-            this._isRecording = false;
-            this.events.onError?.(error);
-            throw error;
-        }
-    }
-    stopRecording() {
-        if (this.mediaRecorder && this.mediaRecorder.state !== 'inactive') {
-            this.mediaRecorder.stop();
-        }
-        if (this.durationInterval) {
-            clearInterval(this.durationInterval);
-            this.durationInterval = null;
-        }
-    }
-    async handleRecordingComplete() {
-        const blob = new Blob(this.recordedChunks, { type: 'video/webm' });
-        this._recordedBlob = blob;
-        // Stop all tracks
-        if (this.currentStream) {
-            this.currentStream.getTracks().forEach(track => track.stop());
-            this.currentStream = null;
-        }
-        this._isRecording = false;
-        this.events.onRecordingComplete?.(this._recordedBlob);
-    }
-    // ==================== Conversion & Export ====================
-    /**
-     * Converts a WebM blob to MP4 using mediabunny's Conversion API.
-     * Uses WebCodecs for hardware-accelerated H.264 encoding.
-     */
-    async convertToMp4(webmBlob) {
-        const { Input, Output, Conversion, BlobSource, BufferTarget, Mp4OutputFormat, WEBM, QUALITY_HIGH, } = await import('mediabunny');
-        const input = new Input({
-            source: new BlobSource(webmBlob),
-            formats: [WEBM],
-        });
-        const target = new BufferTarget();
-        const output = new Output({
-            format: new Mp4OutputFormat({ fastStart: 'in-memory' }),
-            target,
-        });
-        const conversion = await Conversion.init({
-            input,
-            output,
-            // Force transcoding from VP9 → H.264 and Opus → AAC
-            video: {
-                codec: 'avc',
-                bitrate: QUALITY_HIGH,
-                fit: 'contain',
-            },
-            audio: {
-                codec: 'aac',
-                bitrate: QUALITY_HIGH,
-            },
-        });
-        await conversion.execute();
-        const buffer = target.buffer;
-        if (!buffer || buffer.byteLength === 0) {
-            throw new Error('MP4 conversion produced empty output');
-        }
-        return new Blob([buffer], { type: 'video/mp4' });
-    }
-    async exportTrimmedVideo(videoElement, trimStart, trimEnd) {
-        return new Promise((resolve, reject) => {
-            // Create a canvas for capturing frames
-            const canvas = document.createElement('canvas');
-            canvas.width = videoElement.videoWidth || 1280;
-            canvas.height = videoElement.videoHeight || 720;
-            const ctx = canvas.getContext('2d');
-            if (!ctx) {
-                reject(new Error('Could not get canvas context'));
-                return;
-            }
-            // Create canvas stream for video
-            const canvasStream = canvas.captureStream(30);
-            // Try to capture audio from video element
-            let combinedStream;
-            try {
-                // Create audio context to capture video's audio
-                const audioCtx = new AudioContext();
-                const source = audioCtx.createMediaElementSource(videoElement);
-                const destination = audioCtx.createMediaStreamDestination();
-                source.connect(destination);
-                source.connect(audioCtx.destination); // Also play through speakers
-                // Combine video (from canvas) and audio (from video element)
-                combinedStream = new MediaStream([
-                    ...canvasStream.getVideoTracks(),
-                    ...destination.stream.getAudioTracks()
-                ]);
-                // Store audioCtx for cleanup
-                const cleanup = () => {
-                    audioCtx.close();
-                };
-                this.recordTrimmedStream(videoElement, canvas, ctx, combinedStream, trimStart, trimEnd, cleanup, resolve, reject);
-            }
-            catch (audioError) {
-                console.warn('Could not capture audio, recording video only:', audioError);
-                combinedStream = canvasStream;
-                this.recordTrimmedStream(videoElement, canvas, ctx, combinedStream, trimStart, trimEnd, () => { }, resolve, reject);
-            }
-        });
-    }
-    recordTrimmedStream(video, canvas, ctx, stream, trimStart, trimEnd, cleanup, resolve, reject) {
-        const mimeType = MediaRecorder.isTypeSupported('video/webm;codecs=vp9')
-            ? 'video/webm;codecs=vp9'
-            : 'video/webm';
-        const recorder = new MediaRecorder(stream, { mimeType });
-        const chunks = [];
-        recorder.ondataavailable = (e) => {
-            if (e.data.size > 0) {
-                chunks.push(e.data);
-            }
-        };
-        recorder.onstop = () => {
-            cleanup();
-            resolve(new Blob(chunks, { type: 'video/webm' }));
-        };
-        recorder.onerror = (e) => {
-            cleanup();
-            reject(new Error('Recording error: ' + e));
-        };
-        // Seek to trim start
-        video.currentTime = trimStart;
-        video.onseeked = () => {
-            // Start recording
-            recorder.start(100);
-            // Start playing
-            video.play();
-            // Draw frames to canvas
-            const drawFrame = () => {
-                if (video.currentTime >= trimEnd || video.paused || video.ended) {
-                    video.pause();
-                    video.onseeked = null;
-                    // Give a small delay before stopping to ensure last frame is captured
-                    setTimeout(() => {
-                        if (recorder.state === 'recording') {
-                            recorder.stop();
-                        }
-                    }, 100);
-                    return;
-                }
-                ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
-                requestAnimationFrame(drawFrame);
-            };
-            drawFrame();
-        };
-    }
-    // ==================== Cleanup ====================
-    reset() {
-        this._recordedBlob = null;
-        this.recordedChunks = [];
-        this._duration = 0;
-        this._isRecording = false;
-    }
-    dispose() {
-        this.stopRecording();
-        this.stopAudioMonitoring();
-        this.reset();
-        if (this.currentStream) {
-            this.currentStream.getTracks().forEach(track => track.stop());
-            this.currentStream = null;
-        }
-    }
-}
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicmVjb3JkZXIuc2VydmljZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3RzX3dlYi9zZXJ2aWNlcy9yZWNvcmRlci5zZXJ2aWNlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOzs7O0dBSUc7QUFtQkgsTUFBTSxPQUFPLGVBQWU7SUFDMUIsa0JBQWtCO0lBQ1YsYUFBYSxHQUF5QixJQUFJLENBQUM7SUFDM0MsY0FBYyxHQUFXLEVBQUUsQ0FBQztJQUM1QixnQkFBZ0IsR0FBa0IsSUFBSSxDQUFDO0lBQ3ZDLFNBQVMsR0FBVyxDQUFDLENBQUM7SUFDdEIsYUFBYSxHQUFnQixJQUFJLENBQUM7SUFDbEMsWUFBWSxHQUFZLEtBQUssQ0FBQztJQUM5QixhQUFhLEdBQWtCLE1BQU0sQ0FBQztJQUU5Qyx5QkFBeUI7SUFDakIsWUFBWSxHQUF3QixJQUFJLENBQUM7SUFDekMsYUFBYSxHQUF3QixJQUFJLENBQUM7SUFDMUMsdUJBQXVCLEdBQWtCLElBQUksQ0FBQztJQUM5QyxnQkFBZ0IsR0FBdUIsSUFBSSxDQUFDO0lBRXBELDJCQUEyQjtJQUNuQixhQUFhLEdBQXVCLElBQUksQ0FBQztJQUVqRCxrQkFBa0I7SUFDVixNQUFNLEdBQW9CLEVBQUUsQ0FBQztJQUVyQyxZQUFZLE1BQXdCO1FBQ2xDLElBQUksTUFBTSxFQUFFLENBQUM7WUFDWCxJQUFJLENBQUMsTUFBTSxHQUFHLE1BQU0sQ0FBQztRQUN2QixDQUFDO0lBQ0gsQ0FBQztJQUVELGlCQUFpQjtJQUNqQixJQUFJLFdBQVc7UUFDYixPQUFPLElBQUksQ0FBQyxZQUFZLENBQUM7SUFDM0IsQ0FBQztJQUVELElBQUksUUFBUTtRQUNWLE9BQU8sSUFBSSxDQUFDLFNBQVMsQ0FBQztJQUN4QixDQUFDO0lBRUQsSUFBSSxZQUFZO1FBQ2QsT0FBTyxJQUFJLENBQUMsYUFBYSxDQUFDO0lBQzVCLENBQUM7SUFFRCxJQUFJLFlBQVk7UUFDZCxPQUFPLElBQUksQ0FBQyxhQUFhLENBQUM7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

package/ts_web/elements/wcc-contextmenu.ts

@@ -1,291 +0,0 @@
-import { DeesElement, property, html, customElement, type TemplateResult, state, css, cssManager } from '@design.estate/dees-element';
-
-export interface IContextMenuItem {
-  name: string;
-  iconName?: string;
-  action: () => void | Promise<void>;
-  disabled?: boolean;
-}
-
-export interface IContextMenuOptions {
-  /** The element the menu belongs to: focus returns to it when the menu closes */
-  ownerElement?: HTMLElement;
-}
-
-@customElement('wcc-contextmenu')
-export class WccContextmenu extends DeesElement {
-  /**
-   * Show a context menu at the event's position. The menu takes focus (its first item),
-   * is operated with the arrow keys, Home/End, Enter/Space and Escape/Tab, and returns
-   * focus to `ownerElement` when it closes from the keyboard or after an action.
-   */
-  public static async show(
-    event: MouseEvent,
-    menuItems: IContextMenuItem[],
-    options: IContextMenuOptions = {}
-  ): Promise<void> {
-    event.preventDefault();
-    event.stopPropagation();
-
-    // Remove any existing context menu
-    const existing = document.querySelector('wcc-contextmenu');
-    if (existing) {
-      existing.remove();
-    }
-
-    const menu = new WccContextmenu();
-    menu.menuItems = menuItems;
-    menu.x = event.clientX;
-    menu.y = event.clientY;
-    menu.ownerElement = options.ownerElement ?? null;
-
-    document.body.appendChild(menu);
-
-    // Wait for render then adjust position if needed
-    await menu.updateComplete;
-    menu.adjustPosition();
-    menu.focusItem(0);
-  }
-
-  /** Focus returns here when the menu closes from the keyboard or after an action */
-  private ownerElement: HTMLElement | null = null;
-  private closing = false;
-
-  @property({ type: Array })
-  accessor menuItems: IContextMenuItem[] = [];
-
-  @property({ type: Number })
-  accessor x: number = 0;
-
-  @property({ type: Number })
-  accessor y: number = 0;
-
-  @state()
-  accessor visible: boolean = false;
-
-  private boundHandleOutsideClick = this.handleOutsideClick.bind(this);
-  private boundHandleKeydown = this.handleKeydown.bind(this);
-
-  public static styles = [
-    css`
-      :host {
-        position: fixed;
-        z-index: 10000;
-        opacity: 0;
-        transform: scale(0.95) translateY(-5px);
-        transition: opacity 0.15s ease, transform 0.15s ease;
-        pointer-events: none;
-      }
-
-      :host(.visible) {
-        opacity: 1;
-        transform: scale(1) translateY(0);
-        pointer-events: auto;
-      }
-
-      .menu {
-        min-width: 160px;
-        background: #0f0f0f;
-        border: 1px solid rgba(255, 255, 255, 0.1);
-        border-radius: 6px;
-        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
-        padding: 4px 0;
-        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
-        font-size: 12px;
-      }
-
-      .menu-item {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        padding: 8px 12px;
-        color: #ccc;
-        cursor: pointer;
-        transition: background 0.1s ease;
-        user-select: none;
-      }
-
-      .menu {
-        outline: none;
-      }
-
-      .menu-item:hover,
-      .menu-item:focus {
-        background: rgba(59, 130, 246, 0.15);
-        color: #fff;
-        outline: none;
-      }
-
-      .menu-item:focus-visible {
-        box-shadow: inset 0 0 0 2px #3b82f6;
-      }
-
-      .menu-item.disabled {
-        opacity: 0.4;
-        cursor: not-allowed;
-        pointer-events: none;
-      }
-
-      .menu-item .icon {
-        font-family: 'Material Symbols Outlined';
-        font-size: 16px;
-        font-weight: normal;
-        font-style: normal;
-        line-height: 1;
-        letter-spacing: normal;
-        text-transform: none;
-        white-space: nowrap;
-        word-wrap: normal;
-        direction: ltr;
-        font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
-        opacity: 0.7;
-      }
-
-      .menu-item:hover .icon {
-        opacity: 1;
-      }
-
-      .menu-item .label {
-        flex: 1;
-      }
-    `
-  ];
-
-  public render(): TemplateResult {
-    return html`
-      <div class="menu" role="menu" tabindex="-1" @keydown=${this.handleMenuKeydown}>
-        ${this.menuItems.map(item => html`
-          <div
-            class="menu-item ${item.disabled ? 'disabled' : ''}"
-            role="menuitem"
-            tabindex="-1"
-            aria-disabled=${item.disabled ? 'true' : 'false'}
-            @click=${() => this.handleItemClick(item)}
-          >
-            ${item.iconName ? html`<span class="icon" aria-hidden="true">${item.iconName}</span>` : null}
-            <span class="label">${item.name}</span>
-          </div>
-        `)}
-      </div>
-    `;
-  }
-
-  async connectedCallback() {
-    await super.connectedCallback();
-    // Delay adding listeners to avoid immediate close
-    requestAnimationFrame(() => {
-      document.addEventListener('click', this.boundHandleOutsideClick);
-      document.addEventListener('contextmenu', this.boundHandleOutsideClick);
-      document.addEventListener('keydown', this.boundHandleKeydown);
-      this.classList.add('visible');
-    });
-  }
-
-  async disconnectedCallback() {
-    await super.disconnectedCallback();
-    document.removeEventListener('click', this.boundHandleOutsideClick);
-    document.removeEventListener('contextmenu', this.boundHandleOutsideClick);
-    document.removeEventListener('keydown', this.boundHandleKeydown);
-  }
-
-  private adjustPosition() {
-    const rect = this.getBoundingClientRect();
-    const windowWidth = window.innerWidth;
-    const windowHeight = window.innerHeight;
-
-    let x = this.x;
-    let y = this.y;
-
-    // Adjust if menu goes off right edge
-    if (x + rect.width > windowWidth - 10) {
-      x = windowWidth - rect.width - 10;
-    }
-
-    // Adjust if menu goes off bottom edge
-    if (y + rect.height > windowHeight - 10) {
-      y = windowHeight - rect.height - 10;
-    }
-
-    // Ensure not off left or top
-    if (x < 10) x = 10;
-    if (y < 10) y = 10;
-
-    this.style.left = `${x}px`;
-    this.style.top = `${y}px`;
-  }
-
-  private handleOutsideClick(e: Event) {
-    const path = e.composedPath();
-    if (!path.includes(this)) {
-      this.close();
-    }
-  }
-
-  private handleKeydown(e: KeyboardEvent) {
-    if (e.key === 'Escape') {
-      this.close(true);
-    }
-  }
-
-  private getEnabledItems(): HTMLElement[] {
-    return Array.from(this.shadowRoot?.querySelectorAll<HTMLElement>('.menu-item:not(.disabled)') ?? []);
-  }
-
-  /** Focus an enabled item by index (wrapping); the menu itself if there is none */
-  private focusItem(indexArg: number) {
-    const items = this.getEnabledItems();
-    if (items.length === 0) {
-      (this.shadowRoot?.querySelector('.menu') as HTMLElement | null)?.focus({ preventScroll: true });
-      return;
-    }
-    const index = ((indexArg % items.length) + items.length) % items.length;
-    items[index].focus({ preventScroll: true });
-  }
-
-  private handleMenuKeydown = (e: KeyboardEvent) => {
-    const items = this.getEnabledItems();
-    const current = items.indexOf(this.shadowRoot?.activeElement as HTMLElement);
-    switch (e.key) {
-      case 'ArrowDown':
-        this.focusItem(current + 1);
-        break;
-      case 'ArrowUp':
-        this.focusItem(current < 0 ? -1 : current - 1);
-        break;
-      case 'Home':
-        this.focusItem(0);
-        break;
-      case 'End':
-        this.focusItem(-1);
-        break;
-      case 'Enter':
-      case ' ':
-        if (current >= 0) items[current].click();
-        break;
-      case 'Escape':
-      case 'Tab':
-        this.close(true);
-        break;
-      default:
-        return;
-    }
-    e.preventDefault();
-    e.stopPropagation();
-  };
-
-  private async handleItemClick(item: IContextMenuItem) {
-    if (item.disabled) return;
-    await item.action();
-    this.close(true);
-  }
-
-  private close(returnFocus = false) {
-    if (this.closing) return;
-    this.closing = true;
-    if (returnFocus && this.ownerElement?.isConnected) {
-      this.ownerElement.focus({ preventScroll: true });
-    }
-    this.classList.remove('visible');
-    setTimeout(() => this.remove(), 150);
-  }
-}