import { DeesElement, property, html, customElement, type TemplateResult, state } from '@design.estate/dees-element'; import { WccDashboard } from './wcc-dashboard.js'; import type { TTemplateFactory } from './wcctools.helpers.js'; export type TPropertyType = 'String' | 'Number' | 'Boolean' | 'Object' | 'Enum' | 'Array'; export type TEnvironment = 'native' | 'desktop' | 'tablet' | 'phablet' | 'phone'; export type TTheme = 'bright' | 'dark'; let environment: TEnvironment = 'native'; export const setEnvironment = (envArg) => { environment = envArg; }; @customElement('wcc-properties') export class WccProperties extends DeesElement { @property({ type: WccDashboard }) accessor dashboardRef: WccDashboard; @property() accessor selectedItem: TTemplateFactory | DeesElement; @property() accessor selectedViewport: TEnvironment = 'native'; @property() accessor selectedTheme: TTheme = 'dark'; @property() accessor warning: string = null; @property() accessor isFullscreen: boolean = false; @state() accessor propertyContent: TemplateResult[] = []; @state() accessor editingProperties: Array<{ id: string; name: string; value: any; element: HTMLElement; editorValue: string; editorError: string; }> = []; // Recording state properties @state() accessor recordingState: 'idle' | 'options' | 'recording' | 'preview' = 'idle'; @state() accessor recordingMode: 'viewport' | 'screen' = 'screen'; @state() accessor audioEnabled: boolean = false; @state() accessor selectedMicrophoneId: string = ''; @state() accessor availableMicrophones: MediaDeviceInfo[] = []; @state() accessor audioLevel: number = 0; @state() accessor recordingDuration: number = 0; @state() accessor recordedBlob: Blob | null = null; @state() accessor previewVideoUrl: string = ''; // Recording private members private mediaRecorder: MediaRecorder | null = null; private recordedChunks: Blob[] = []; private durationInterval: number | null = null; private audioContext: AudioContext | null = null; private audioAnalyser: AnalyserNode | null = null; private audioMonitoringInterval: number | null = null; private currentStream: MediaStream | null = null; public editorHeight: number = 300; public render(): TemplateResult { return html` ${this.editingProperties.length > 0 ? html`

Property Editors

${this.editingProperties.length === 0 ? html`

{ }

No properties being edited

Click "Edit Object/Array" buttons to start editing

` : null} ${this.editingProperties.map(prop => html`

${prop.name}

${prop.editorError ? html`

${prop.editorError}

` : null}

`)}

` : null}

${this.propertyContent}

Theme

{ this.selectTheme('dark'); }} > Darkbrightness_3

{ this.selectTheme('bright'); }} > Brightflare

Viewport

{ this.selectViewport('phone'); }} > Phonesmartphone

{ this.selectViewport('phablet'); }} > Phabletsmartphone

{ this.selectViewport('tablet'); }} > Tablettablet

{ this.selectViewport('native'); }} > Desktopdesktop_windows

this.toggleFullscreen()}> ${this.isFullscreen ? 'fullscreen_exit' : 'fullscreen'}

this.handleRecordingButtonClick()} > ${this.recordingState === 'recording' ? html`

${this.formatDuration(this.recordingDuration)} ` : html`

${this.warning ? html`

${this.warning}

` : null}

${this.recordingState === 'options' ? html`

Recording Settings

Record Area

Audio

this.handleAudioToggle((e.target as HTMLInputElement).checked)} /> Enable Microphone

${this.audioEnabled ? html` ${this.selectedMicrophoneId ? html`

Input Level

` : null} ` : null}

` : null} ${this.recordingState === 'preview' && this.previewVideoUrl ? html` ` : null} `; } private async findElementRecursively(container: Element, elementClass: any, maxDepth: number = 5): Promise { if (maxDepth <= 0) return null; try { // Check direct children for (const child of Array.from(container.children)) { if (child instanceof elementClass) { return child as HTMLElement; } } // Search in all children recursively for (const child of Array.from(container.children)) { // First, always check the light DOM children const found = await this.findElementRecursively(child, elementClass, maxDepth - 1); if (found) return found; // Also check shadow root if it exists if (child.shadowRoot) { const shadowFound = await this.findElementRecursively(child.shadowRoot as any, elementClass, maxDepth - 1); if (shadowFound) return shadowFound; } } } catch (error) { console.error('Error in findElementRecursively:', error); } return null; } public async createProperties() { console.log('creating properties for:'); console.log(this.selectedItem); // Clear any previous warnings this.warning = null; const isEnumeration = (propertyArg): boolean => { const keys = Object.keys(propertyArg.type); const values = []; for (const key of keys) { let value = propertyArg.type[key]; if (typeof value === 'number') { value = value.toString(); } values.push(value); } for (const key of keys) { if (values.indexOf(key) < 0) { return false; } } return true; }; const getEnumValues = (propertyArg): any[] => { console.log(JSON.stringify(propertyArg)); const enumValues: any[] = []; Object.keys(propertyArg.type).forEach((valueArg: string) => { enumValues.push(valueArg); }); return enumValues; }; const determinePropertyType = async (propertyArg: any): Promise => { const typeName: any | undefined = propertyArg.type.name; if (typeName) { return typeName; } else { return Array.isArray(propertyArg) ? 'Array' : isEnumeration(propertyArg) ? 'Enum' : 'Object'; } }; if (this.selectedItem && (this.selectedItem as any).demo) { console.log(`Got Dees-Element for property evaluation.`); const anonItem: any = this.selectedItem; if (!anonItem) { this.warning = 'no element selected'; return; } console.log(anonItem.elementProperties); const wccFrame = await this.dashboardRef.wccFrame; // Wait for render to complete and any demo wrappers to run await new Promise(resolve => setTimeout(resolve, 200)); // Try to find the element with recursive search const viewport = await wccFrame.getViewportElement(); let firstFoundInstantiatedElement: HTMLElement = await this.findElementRecursively( viewport, this.selectedItem as any ); // Retry logic if element not found let retries = 0; while (!firstFoundInstantiatedElement && retries < 5) { await new Promise(resolve => setTimeout(resolve, 200)); try { firstFoundInstantiatedElement = await this.findElementRecursively( viewport, this.selectedItem as any ); } catch (error) { console.error('Error during element search retry:', error); } retries++; } if (!firstFoundInstantiatedElement) { this.warning = `no first instantiated element found for >>${anonItem.name}<< after ${retries} retries`; this.propertyContent = []; return; } const classProperties: Map = anonItem.elementProperties; if (!classProperties) { this.warning = `selected element >>${anonItem.name}<< does not expose element properties`; return; } this.warning = null; const propertyArray: TemplateResult[] = []; for (const key of classProperties.keys()) { if (key === 'goBright' || key === 'domtools') { continue; } try { const property = classProperties.get(key); const propertyTypeString = await determinePropertyType(property); propertyArray.push( html`

${key} (${propertyTypeString})

${(() => { switch (propertyTypeString) { case 'Boolean': return html``; case 'String': return html``; case 'Number': return html``; case 'Enum': const enumValues: any[] = getEnumValues(property); return html``; case 'Object': case 'Array': return html``; default: return html`

Unsupported type

`; } })()}

` ); } catch (error) { console.error(`Error processing property ${key}:`, error); // Continue with next property even if this one fails } } this.propertyContent = propertyArray; } else { console.log(`Cannot extract properties of ${(this.selectedItem as any)?.name}`); this.warning = `You selected a page.`; return null; } } public selectTheme(themeArg: TTheme) { this.selectedTheme = themeArg; this.dispatchEvent( new CustomEvent('selectedTheme', { detail: themeArg, }) ); console.log(this.dashboardRef.selectedType); this.dashboardRef.buildUrl(); } public async scheduleUpdate() { try { await this.createProperties(); } catch (error) { console.error('Error creating properties:', error); // Clear property content on error to show clean state this.propertyContent = []; } // Always call super.scheduleUpdate to ensure component updates super.scheduleUpdate(); } public selectViewport(viewport: TEnvironment) { this.selectedViewport = viewport; setEnvironment(viewport); this.dispatchEvent( new CustomEvent('selectedViewport', { detail: viewport, }) ); this.dashboardRef.buildUrl(); } private openAdvancedEditor(propertyName: string, value: any, element: HTMLElement) { // Check if this property is already being edited const existingEditor = this.editingProperties.find(p => p.name === propertyName && p.element === element); if (existingEditor) { return; // Property is already open for editing } const newEditor = { id: `${propertyName}-${Date.now()}`, name: propertyName, value: value, element: element, editorValue: JSON.stringify(value, null, 2), editorError: '' }; this.editingProperties = [...this.editingProperties, newEditor]; // Notify parent to resize frame if this is the first editor if (this.editingProperties.length === 1) { this.dispatchEvent( new CustomEvent('editorStateChanged', { detail: { isOpen: true }, bubbles: true }) ); } } private handleEditorSave(editorId: string) { const editor = this.editingProperties.find(p => p.id === editorId); if (!editor) return; try { const parsedValue = JSON.parse(editor.editorValue); editor.element[editor.name] = parsedValue; // Remove this editor from the list this.editingProperties = this.editingProperties.filter(p => p.id !== editorId); // If no more editors, notify parent to resize frame if (this.editingProperties.length === 0) { this.dispatchEvent( new CustomEvent('editorStateChanged', { detail: { isOpen: false }, bubbles: true }) ); } // Refresh properties display this.createProperties(); } catch (error) { // Update error for this specific editor const editorIndex = this.editingProperties.findIndex(p => p.id === editorId); if (editorIndex !== -1) { this.editingProperties[editorIndex].editorError = `Invalid JSON: ${error.message}`; this.requestUpdate(); } } } private handleEditorCancel(editorId: string) { // Remove this editor from the list this.editingProperties = this.editingProperties.filter(p => p.id !== editorId); // If no more editors, notify parent to resize frame if (this.editingProperties.length === 0) { this.dispatchEvent( new CustomEvent('editorStateChanged', { detail: { isOpen: false }, bubbles: true }) ); } } private closeAllEditors() { this.editingProperties = []; // Notify parent to resize frame back this.dispatchEvent( new CustomEvent('editorStateChanged', { detail: { isOpen: false }, bubbles: true }) ); } private toggleFullscreen() { this.dispatchEvent( new CustomEvent('toggleFullscreen', { bubbles: true }) ); } // ==================== Recording Methods ==================== 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 handleRecordingButtonClick() { if (this.recordingState === 'recording') { this.stopRecording(); } else if (this.recordingState === 'idle') { this.recordingState = 'options'; // Don't request permissions here - just show the options panel // Permissions will be requested when user enables audio or starts recording } else if (this.recordingState === 'options') { this.recordingState = 'idle'; this.stopAudioMonitoring(); } } private async loadMicrophones(requestPermission: boolean = false) { try { // Only request permission if explicitly asked (when user enables audio toggle) if (requestPermission) { await navigator.mediaDevices.getUserMedia({ audio: true }).then(stream => { stream.getTracks().forEach(track => track.stop()); }); } const devices = await navigator.mediaDevices.enumerateDevices(); this.availableMicrophones = devices.filter(d => d.kind === 'audioinput'); // Auto-select the first microphone if available and we have permission if (requestPermission && this.availableMicrophones.length > 0 && !this.selectedMicrophoneId) { this.selectedMicrophoneId = this.availableMicrophones[0].deviceId; // Start monitoring after auto-selecting await this.startAudioMonitoring(); } } catch (error) { console.error('Error loading microphones:', error); this.availableMicrophones = []; } } private async handleAudioToggle(enabled: boolean) { this.audioEnabled = enabled; if (enabled) { // Request permission and load microphones when user explicitly enables audio await this.loadMicrophones(true); } else { this.stopAudioMonitoring(); this.selectedMicrophoneId = ''; this.audioLevel = 0; } } private async handleMicrophoneChange(deviceId: string) { this.selectedMicrophoneId = deviceId; if (deviceId) { await this.startAudioMonitoring(); } else { this.stopAudioMonitoring(); this.audioLevel = 0; } } private async startAudioMonitoring() { this.stopAudioMonitoring(); if (!this.selectedMicrophoneId) return; try { const stream = await navigator.mediaDevices.getUserMedia({ audio: { deviceId: { exact: this.selectedMicrophoneId } } }); 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; this.audioLevel = Math.min(100, (average / 128) * 100); } }, 50); // Store stream for cleanup this.currentStream = stream; } catch (error) { console.error('Error starting audio monitoring:', error); this.audioLevel = 0; } } private stopAudioMonitoring() { if (this.audioMonitoringInterval) { clearInterval(this.audioMonitoringInterval); this.audioMonitoringInterval = null; } if (this.audioContext) { this.audioContext.close(); this.audioContext = null; } if (this.currentStream) { this.currentStream.getTracks().forEach(track => track.stop()); this.currentStream = null; } this.audioAnalyser = null; } private async startRecording() { try { // Stop audio monitoring before recording this.stopAudioMonitoring(); // Get video stream based on mode const displayMediaOptions: DisplayMediaStreamOptions = { video: { displaySurface: this.recordingMode === 'viewport' ? 'browser' : 'monitor' } as MediaTrackConstraints, audio: false }; // Add preferCurrentTab hint for viewport mode if (this.recordingMode === 'viewport') { (displayMediaOptions as any).preferCurrentTab = true; } const videoStream = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions); // If viewport mode, try to crop to viewport element using Element Capture API if (this.recordingMode === 'viewport') { try { const wccFrame = await this.dashboardRef.wccFrame; const viewport = await wccFrame.getViewportElement(); // Check if Element Capture API is available (Chrome 104+) if ('CropTarget' in window) { const cropTarget = await (window as any).CropTarget.fromElement(viewport); const [videoTrack] = videoStream.getVideoTracks(); await (videoTrack as any).cropTo(cropTarget); } } catch (e) { console.warn('Element Capture not supported, recording full tab:', e); } } // Combine video with audio if enabled let combinedStream = videoStream; if (this.audioEnabled && this.selectedMicrophoneId) { try { const audioStream = await navigator.mediaDevices.getUserMedia({ audio: { deviceId: { exact: this.selectedMicrophoneId } } }); combinedStream = new MediaStream([ ...videoStream.getVideoTracks(), ...audioStream.getAudioTracks() ]); } catch (audioError) { console.warn('Could not add audio:', audioError); } } // Store stream for cleanup this.currentStream = combinedStream; // Create MediaRecorder const mimeType = MediaRecorder.isTypeSupported('video/webm;codecs=vp9') ? 'video/webm;codecs=vp9' : 'video/webm'; this.mediaRecorder = new MediaRecorder(combinedStream, { mimeType }); this.recordedChunks = []; this.mediaRecorder.ondataavailable = (e) => { if (e.data.size > 0) { this.recordedChunks.push(e.data); } }; this.mediaRecorder.onstop = () => this.handleRecordingComplete(); // Handle stream ending (user clicks "Stop sharing") videoStream.getVideoTracks()[0].onended = () => { if (this.recordingState === 'recording') { this.stopRecording(); } }; this.mediaRecorder.start(1000); // Capture in 1-second chunks // Start duration timer this.recordingDuration = 0; this.durationInterval = window.setInterval(() => { this.recordingDuration++; }, 1000); this.recordingState = 'recording'; } catch (error) { console.error('Error starting recording:', error); this.recordingState = 'idle'; } } private stopRecording() { if (this.mediaRecorder && this.mediaRecorder.state !== 'inactive') { this.mediaRecorder.stop(); } if (this.durationInterval) { clearInterval(this.durationInterval); this.durationInterval = null; } } private handleRecordingComplete() { // Create blob from recorded chunks this.recordedBlob = new Blob(this.recordedChunks, { type: 'video/webm' }); // Create preview URL if (this.previewVideoUrl) { URL.revokeObjectURL(this.previewVideoUrl); } this.previewVideoUrl = URL.createObjectURL(this.recordedBlob); // Stop all tracks if (this.currentStream) { this.currentStream.getTracks().forEach(track => track.stop()); this.currentStream = null; } this.recordingState = 'preview'; } private discardRecording() { if (this.previewVideoUrl) { URL.revokeObjectURL(this.previewVideoUrl); this.previewVideoUrl = ''; } this.recordedBlob = null; this.recordedChunks = []; this.recordingDuration = 0; this.recordingState = 'idle'; } private downloadRecording() { if (!this.recordedBlob) return; const timestamp = new Date().toISOString().replace(/[:.]/g, '-').slice(0, 19); const filename = `wcctools-recording-${timestamp}.webm`; const a = document.createElement('a'); a.href = this.previewVideoUrl; a.download = filename; document.body.appendChild(a); a.click(); document.body.removeChild(a); // Clean up after download this.discardRecording(); } }