electrobun 0.0.19-beta.113 → 0.0.19-beta.115

package/templates/photo-booth/src/mainview/index.ts

@@ -10,14 +10,18 @@ const rpc = Electroview.defineRPC<PhotoBoothRPC>({
   }
 });
 
+// Initialize Electrobun with RPC
 const electrobun = new Electrobun.Electroview({ rpc });
 
 interface Photo {
     id: string;
     dataUrl: string;
     timestamp: Date;
+    type: 'camera' | 'screen';
 }
 
+type CaptureMode = 'camera' | 'screen';
+
 class PhotoBooth {
     private video: HTMLVideoElement;
     private canvas: HTMLCanvasElement;
@@ -25,16 +29,23 @@ class PhotoBooth {
     private gallery: HTMLElement;
     private cameraSelect: HTMLSelectElement;
     private timerToggle: HTMLInputElement;
-    private changeSourceBtn: HTMLButtonElement;
+    private cameraModeBtn: HTMLButtonElement;
+    private screenModeBtn: HTMLButtonElement;
+    private startCameraBtn: HTMLButtonElement;
+    private selectScreenBtn: HTMLButtonElement;
     private status: HTMLElement;
     private statusText: HTMLElement;
     private countdown: HTMLElement;
     private modal: HTMLElement;
     private modalImage: HTMLImageElement;
+    private captureBtnText: HTMLElement;
+    private cameraIcon: HTMLElement;
+    private screenIcon: HTMLElement;
     
     private stream: MediaStream | null = null;
     private photos: Photo[] = [];
     private currentPhotoId: string | null = null;
+    private currentMode: CaptureMode = 'camera';
 
     constructor() {
         // Get DOM elements
@@ -44,25 +55,33 @@ class PhotoBooth {
         this.gallery = document.getElementById('gallery') as HTMLElement;
         this.cameraSelect = document.getElementById('cameraSelect') as HTMLSelectElement;
         this.timerToggle = document.getElementById('timerToggle') as HTMLInputElement;
-        this.changeSourceBtn = document.getElementById('changeSourceBtn') as HTMLButtonElement;
+        this.cameraModeBtn = document.getElementById('cameraModeBtn') as HTMLButtonElement;
+        this.screenModeBtn = document.getElementById('screenModeBtn') as HTMLButtonElement;
+        this.startCameraBtn = document.getElementById('startCameraBtn') as HTMLButtonElement;
+        this.selectScreenBtn = document.getElementById('selectScreenBtn') as HTMLButtonElement;
         this.status = document.getElementById('status') as HTMLElement;
         this.statusText = this.status.querySelector('.status-text') as HTMLElement;
         this.countdown = document.getElementById('countdown') as HTMLElement;
         this.modal = document.getElementById('photoModal') as HTMLElement;
         this.modalImage = document.getElementById('modalImage') as HTMLImageElement;
+        this.captureBtnText = this.captureBtn.querySelector('.capture-btn-text') as HTMLElement;
+        this.cameraIcon = this.captureBtn.querySelector('.capture-icon-camera') as HTMLElement;
+        this.screenIcon = this.captureBtn.querySelector('.capture-icon-screen') as HTMLElement;
 
         this.initializeEventListeners();
-        this.initializeCamera();
+        this.initializeApp();
     }
 
     private initializeEventListeners() {
+        // Mode toggle buttons
+        this.cameraModeBtn.addEventListener('click', () => this.setMode('camera'));
+        this.screenModeBtn.addEventListener('click', () => this.setMode('screen'));
+
         // Capture button
-        this.captureBtn.addEventListener('click', (e) => {
-            console.log('Capture button clicked - event:', e);
-            this.capturePhoto();
-        });
+        this.captureBtn.addEventListener('click', () => this.capturePhoto());
 
-        // Camera selector
+        // Camera controls
+        this.startCameraBtn.addEventListener('click', () => this.startCamera());
         this.cameraSelect.addEventListener('change', (e) => {
             const deviceId = (e.target as HTMLSelectElement).value;
             if (deviceId) {
@@ -70,12 +89,8 @@ class PhotoBooth {
             }
         });
 
-        // Change source button for screen capture
-        this.changeSourceBtn.addEventListener('click', (e) => {
-            console.log('Change source button clicked - event:', e);
-            e.preventDefault();
-            this.changeScreenSource();
-        });
+        // Screen controls
+        this.selectScreenBtn.addEventListener('click', () => this.selectScreen());
 
         // Modal controls
         document.getElementById('modalClose')?.addEventListener('click', () => this.closeModal());
@@ -88,174 +103,70 @@ class PhotoBooth {
                 this.closeModal();
             }
         });
-
-        // No need to listen for results - we'll handle them in saveCurrentPhoto
     }
 
-    private async initializeCamera() {
-        try {
-            // First, get available cameras without requesting permission
-            await this.getAvailableCameras();
-            
-            // Check if cameras are available but don't request permission yet
-            const devices = await navigator.mediaDevices.enumerateDevices();
-            const videoDevices = devices.filter(device => device.kind === 'videoinput');
-            
-            if (videoDevices.length > 0) {
-                // Camera available but don't access it until user clicks capture
-                this.setStatus('Camera available - click capture to start', false);
-                this.captureBtn.disabled = false;
-            } else {
-                console.log('No cameras found, enabling screen capture mode');
-                // No cameras found, enable screen capture mode
-                this.enableScreenCaptureMode();
-            }
-
-        } catch (error) {
-            console.log('Camera enumeration failed, enabling screen capture mode:', error);
-            // If camera enumeration fails, enable screen capture mode
-            this.enableScreenCaptureMode();
-        }
+    private async initializeApp() {
+        // Set initial mode
+        this.setMode('camera');
+        
+        // Check available cameras
+        await this.populateCameraList();
     }
 
-    private enableScreenCaptureMode() {
-        // Check what media APIs are available
-        console.log('MediaDevices available:', !!navigator.mediaDevices);
-        console.log('getUserMedia available:', !!(navigator.mediaDevices && navigator.mediaDevices.getUserMedia));
-        console.log('getDisplayMedia available:', !!(navigator.mediaDevices && (navigator.mediaDevices as any).getDisplayMedia));
-        console.log('WebRTC APIs available:', !!window.RTCPeerConnection);
+    private setMode(mode: CaptureMode) {
+        this.currentMode = mode;
         
-        this.setStatus('Screen capture mode', true);
-        this.captureBtn.disabled = false;
+        // Update UI classes
+        document.body.classList.toggle('mode-screen', mode === 'screen');
         
-        // Hide camera selector and show change source button
-        this.cameraSelect.style.display = 'none';
-        this.changeSourceBtn.style.display = 'flex';
+        // Update mode buttons
+        this.cameraModeBtn.classList.toggle('active', mode === 'camera');
+        this.screenModeBtn.classList.toggle('active', mode === 'screen');
         
-        // Update UI to indicate screen capture mode
-        const captureBtn = this.captureBtn;
-        captureBtn.innerHTML = `
-            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <rect x="2" y="3" width="20" height="14" rx="2" ry="2"/>
-                <line x1="8" y1="21" x2="16" y2="21"/>
-                <line x1="12" y1="17" x2="12" y2="21"/>
-            </svg>
-            Take Screenshot
-        `;
+        // Update capture button
+        this.cameraIcon.style.display = mode === 'camera' ? 'block' : 'none';
+        this.screenIcon.style.display = mode === 'screen' ? 'block' : 'none';
+        this.captureBtnText.textContent = mode === 'camera' ? 'Take Photo' : 'Take Screenshot';
         
-        if (navigator.mediaDevices && (navigator.mediaDevices as any).getDisplayMedia) {
-            this.showStatus('No camera found. Click "Take Screenshot" to capture your screen instead!', 'info');
-            
-            console.log('getDisplayMedia is available - ready for screen capture');
-        } else {
-            this.showStatus('Screen capture not supported in this WebKit version.', 'error');
-            this.captureBtn.disabled = true;
+        // Reset state when switching modes
+        this.stopStream();
+        this.captureBtn.disabled = true;
+        
+        // Reset video display and hide any placeholders
+        this.video.style.display = 'block';
+        const placeholder = this.video.parentElement?.querySelector('.native-capture-placeholder') as HTMLElement;
+        if (placeholder) {
+            placeholder.style.display = 'none';
         }
-    }
-
-    private async tryCamera() {
-        // Request camera permission and start stream
-        const constraints: MediaStreamConstraints = {
-            video: {
-                width: { ideal: 1280 },
-                height: { ideal: 720 }
-                // Removed facingMode constraint as it's not supported on most desktop cameras
-            },
-            audio: false
-        };
-
-        this.stream = await navigator.mediaDevices.getUserMedia(constraints);
-        this.video.srcObject = this.stream;
-
-        // Update status
-        this.setStatus('Camera active', true);
-        this.captureBtn.disabled = false;
-
-        // Update camera list with active camera
-        const videoTrack = this.stream.getVideoTracks()[0];
-        const settings = videoTrack.getSettings();
-        if (settings.deviceId) {
-            this.cameraSelect.value = settings.deviceId;
+        
+        // Update status based on mode
+        if (mode === 'camera') {
+            this.setStatus('Click "Start Camera" to begin', false);
+            this.startCameraBtn.style.display = 'flex';
+            this.selectScreenBtn.style.display = 'none';
+        } else {
+            this.setStatus('Screen capture mode - tests getDisplayMedia browser API', false);
+            this.selectScreenBtn.style.display = 'flex';
+            this.startCameraBtn.style.display = 'none';
         }
     }
 
-    private async tryScreenCapture() {
-        console.log('tryScreenCapture called');
-        
-        // Stop existing stream if any
+    private stopStream() {
         if (this.stream) {
-            console.log('Stopping existing stream');
             this.stream.getTracks().forEach(track => track.stop());
-        }
-
-        // Check if getDisplayMedia is available
-        if (!navigator.mediaDevices || !(navigator.mediaDevices as any).getDisplayMedia) {
-            throw new Error('getDisplayMedia not supported in this browser');
-        }
-
-        console.log('Requesting display media...');
-        // Request screen capture (requires user gesture)
-        this.stream = await (navigator.mediaDevices as any).getDisplayMedia({
-            video: true,
-            audio: false
-        });
-        
-        console.log('Display media obtained:', this.stream);
-        
-        this.video.srcObject = this.stream;
-
-        // Wait for video to be ready
-        await new Promise<void>((resolve) => {
-            const onLoadedData = () => {
-                this.video.removeEventListener('loadeddata', onLoadedData);
-                resolve();
-            };
-            
-            if (this.video.readyState >= 2) {
-                // Video is already loaded
-                resolve();
-            } else {
-                this.video.addEventListener('loadeddata', onLoadedData);
-            }
-        });
-
-        // Update status to indicate screen capture
-        this.setStatus('Screen capture active', true);
-        this.captureBtn.disabled = false;
-
-        // Hide camera selector and show change source button
-        this.cameraSelect.style.display = 'none';
-        this.changeSourceBtn.style.display = 'flex';
-
-        // Listen for when the user stops sharing (e.g., closes the share dialog)
-        this.stream.getVideoTracks()[0].addEventListener('ended', () => {
-            this.setStatus('Screen sharing stopped', false, true);
-            this.showStatus('Screen sharing was stopped. Click "Change Source" to select a new source.', 'info');
-        });
-    }
-
-    private async changeScreenSource() {
-        console.log('Change source button clicked');
-        try {
-            console.log('Attempting screen capture...');
-            // Always try screen capture when user explicitly asks to change source
-            await this.tryScreenCapture();
-            console.log('Screen capture successful');
-            this.showStatus('Screen source changed successfully!', 'success');
-        } catch (error) {
-            console.error('Failed to change screen source:', error);
-            this.showStatus(`Screen capture failed: ${error.message}`, 'error');
+            this.stream = null;
+            this.video.srcObject = null;
         }
     }
 
-    private async getAvailableCameras() {
+    private async populateCameraList() {
         try {
             const devices = await navigator.mediaDevices.enumerateDevices();
             const videoDevices = devices.filter(device => device.kind === 'videoinput');
-
+            
             // Clear existing options
             this.cameraSelect.innerHTML = '<option value="">Select Camera</option>';
-
+            
             // Add camera options
             videoDevices.forEach((device, index) => {
                 const option = document.createElement('option');
@@ -263,230 +174,229 @@ class PhotoBooth {
                 option.textContent = device.label || `Camera ${index + 1}`;
                 this.cameraSelect.appendChild(option);
             });
-
-            // Show/hide camera selector based on available cameras
-            this.cameraSelect.style.display = videoDevices.length > 1 ? 'block' : 'none';
-
+            
+            if (videoDevices.length > 0) {
+                this.startCameraBtn.style.display = 'flex';
+            } else {
+                this.setStatus('No cameras found on this device', false);
+            }
         } catch (error) {
-            console.error('Error enumerating devices:', error);
+            console.error('Error enumerating cameras:', error);
+            this.setStatus('Unable to access camera list', false);
         }
     }
 
-    private async switchCamera(deviceId: string) {
+    private async startCamera() {
         try {
-            // Stop current stream
-            if (this.stream) {
-                this.stream.getTracks().forEach(track => track.stop());
-            }
-
-            // Start new stream with selected camera
             const constraints: MediaStreamConstraints = {
                 video: {
-                    deviceId: { exact: deviceId },
                     width: { ideal: 1280 },
                     height: { ideal: 720 }
                 },
                 audio: false
             };
 
+            // If a specific camera is selected, use it
+            const selectedCamera = this.cameraSelect.value;
+            if (selectedCamera) {
+                (constraints.video as MediaTrackConstraints).deviceId = selectedCamera;
+            }
+
             this.stream = await navigator.mediaDevices.getUserMedia(constraints);
             this.video.srcObject = this.stream;
 
-            // Wait for video to be ready after switching
-            await new Promise<void>((resolve) => {
-                const onLoadedData = () => {
-                    this.video.removeEventListener('loadeddata', onLoadedData);
-                    resolve();
-                };
-                
-                if (this.video.readyState >= 2) {
-                    // Video is already loaded
-                    resolve();
-                } else {
-                    this.video.addEventListener('loadeddata', onLoadedData);
-                }
-            });
-
-            this.setStatus('Camera switched', true);
-            this.showStatus('Camera switched successfully!', 'success');
+            // Update status and enable capture
+            this.setStatus('Camera active - ready to take photos', true);
+            this.captureBtn.disabled = false;
+            this.startCameraBtn.style.display = 'none';
 
         } catch (error) {
-            console.error('Error switching camera:', error);
-            this.showStatus('Failed to switch camera', 'error');
+            console.error('Error starting camera:', error);
+            this.setStatus(`Camera error: ${(error as Error).message}`, false);
         }
     }
 
-    private async capturePhoto() {
-        console.log('capturePhoto called, stream exists:', !!this.stream);
-        
-        // If no stream is available, try to get one (camera or screen capture)
-        if (!this.stream) {
-            console.log('No stream available, trying to get one...');
-            try {
-                // Check if cameras are available first
-                const devices = await navigator.mediaDevices.enumerateDevices();
-                const videoDevices = devices.filter(device => device.kind === 'videoinput');
-                
-                if (videoDevices.length > 0) {
-                    // Try camera first
-                    console.log('Cameras available, trying camera...');
-                    await this.tryCamera();
-                } else {
-                    // No cameras, try screen capture
-                    console.log('No cameras available, trying screen capture...');
-                    await this.tryScreenCapture();
-                }
-                console.log('Stream obtained successfully');
-            } catch (error) {
-                console.error('Failed to get stream in capturePhoto:', error);
-                this.showStatus(`Failed to get camera/screen: ${error.message}`, 'error');
-                return;
-            }
+    private async switchCamera(deviceId: string) {
+        if (this.stream) {
+            this.stopStream();
         }
+        
+        try {
+            const constraints: MediaStreamConstraints = {
+                video: {
+                    deviceId: deviceId,
+                    width: { ideal: 1280 },
+                    height: { ideal: 720 }
+                },
+                audio: false
+            };
 
-        if (this.timerToggle.checked) {
-            // Use timer
-            this.captureBtn.disabled = true;
-            await this.runCountdown();
-            this.takePhoto();
+            this.stream = await navigator.mediaDevices.getUserMedia(constraints);
+            this.video.srcObject = this.stream;
+            this.setStatus('Camera switched successfully', true);
             this.captureBtn.disabled = false;
-        } else {
-            // Immediate capture
-            this.takePhoto();
-        }
-    }
-
-    private async runCountdown() {
-        for (let i = 3; i > 0; i--) {
-            this.countdown.textContent = i.toString();
-            this.countdown.classList.add('active');
-            await new Promise(resolve => setTimeout(resolve, 1000));
+        } catch (error) {
+            console.error('Error switching camera:', error);
+            this.setStatus('Failed to switch camera', false);
         }
-        this.countdown.classList.remove('active');
     }
 
-    private takePhoto() {
-        console.log('Taking photo - video dimensions:', this.video.videoWidth, 'x', this.video.videoHeight);
-        console.log('Video readyState:', this.video.readyState);
-        console.log('Stream state:', this.stream ? 'exists' : 'null');
-        
-        // Check if video is ready - give it more time if needed
-        if (!this.video.videoWidth || !this.video.videoHeight) {
-            // Try waiting a bit more for the video to load
-            setTimeout(() => {
-                if (this.video.videoWidth && this.video.videoHeight) {
-                    console.log('Video ready after timeout, retrying...');
-                    this.takePhoto();
-                } else {
-                    this.showStatus(`Video not ready (${this.video.videoWidth}x${this.video.videoHeight}). Please try "Change Source".`, 'error');
+    private async selectScreen() {
+        try {
+            // Log what's available for debugging
+            console.log('Browser capabilities:');
+            console.log('  navigator.mediaDevices:', !!navigator.mediaDevices);
+            console.log('  getDisplayMedia:', !!(navigator.mediaDevices && (navigator.mediaDevices as any).getDisplayMedia));
+            console.log('  getUserMedia:', !!(navigator.mediaDevices && navigator.mediaDevices.getUserMedia));
+            console.log('  User agent:', navigator.userAgent);
+            
+            // Check if getDisplayMedia is available
+            if (navigator.mediaDevices && (navigator.mediaDevices as any).getDisplayMedia) {
+                console.log('getDisplayMedia is available, attempting screen capture');
+                
+                try {
+                    this.stream = await (navigator.mediaDevices as any).getDisplayMedia({
+                        video: true,
+                        audio: false
+                    });
+                    
+                    this.video.srcObject = this.stream;
+                    this.setStatus('Screen capture active - ready to take screenshots', true);
+                    this.captureBtn.disabled = false;
+                    this.selectScreenBtn.style.display = 'none';
+
+                    // Listen for when the user stops sharing
+                    if (this.stream) {
+                        const videoTracks = this.stream.getVideoTracks();
+                        if (videoTracks.length > 0) {
+                            videoTracks[0].addEventListener('ended', () => {
+                                this.setStatus('Screen sharing stopped', false);
+                                this.captureBtn.disabled = true;
+                                this.selectScreenBtn.style.display = 'flex';
+                            });
+                        }
+                    }
+                } catch (permissionError) {
+                    // Handle permission denial or other getDisplayMedia errors
+                    console.log('getDisplayMedia failed:', permissionError);
+                    throw new Error(`Screen capture failed: ${(permissionError as Error).message}`);
                 }
-            }, 1000);
-            return;
+            } else {
+                // getDisplayMedia not available
+                console.log('getDisplayMedia not available in this browser');
+                throw new Error('getDisplayMedia API is not available in this browser. This may be due to:\n• WKWebView limitations\n• Browser version\n• Security restrictions\n• Platform limitations');
+            }
+        } catch (error) {
+            console.error('Error selecting screen:', error);
+            this.setStatus(`Screen capture error: ${(error as Error).message}`, false);
         }
+    }
 
-        // Check if stream is still active
-        if (!this.stream || this.stream.getVideoTracks().length === 0) {
-            this.showStatus('Stream not active. Please change source and try again.', 'error');
-            return;
-        }
-        
-        const videoTrack = this.stream.getVideoTracks()[0];
-        if (!videoTrack || videoTrack.readyState !== 'live') {
-            this.showStatus('Video track not live. Please change source and try again.', 'error');
-            return;
+    private async capturePhoto() {
+        if (this.currentMode === 'camera') {
+            await this.captureCameraPhoto();
+        } else {
+            await this.captureScreenshot();
         }
+    }
 
-        // Set canvas size to match video
-        this.canvas.width = this.video.videoWidth;
-        this.canvas.height = this.video.videoHeight;
-
-        // Draw video frame to canvas
-        const ctx = this.canvas.getContext('2d');
-        if (!ctx) {
-            this.showStatus('Canvas not available', 'error');
+    private async captureCameraPhoto() {
+        if (!this.stream) {
+            this.setStatus('No camera stream available', false);
             return;
         }
 
-        ctx.drawImage(this.video, 0, 0);
+        try {
+            // Optional timer countdown
+            if (this.timerToggle.checked) {
+                await this.showCountdown();
+            }
 
-        // Convert to data URL
-        const dataUrl = this.canvas.toDataURL('image/png');
+            // Capture from video stream
+            const context = this.canvas.getContext('2d');
+            if (!context) return;
 
-        // Verify we got valid image data
-        if (dataUrl === 'data:,' || dataUrl.length < 100) {
-            this.showStatus('Failed to capture image data. Please try again.', 'error');
-            return;
-        }
+            this.canvas.width = this.video.videoWidth;
+            this.canvas.height = this.video.videoHeight;
+            context.drawImage(this.video, 0, 0);
 
-        // Create photo object
-        const photo: Photo = {
-            id: Date.now().toString(),
-            dataUrl: dataUrl,
-            timestamp: new Date()
-        };
+            // Convert to data URL
+            const dataUrl = this.canvas.toDataURL('image/png');
 
-        // Add to photos array
-        this.photos.unshift(photo);
+            // Add to gallery
+            const photo: Photo = {
+                id: Date.now().toString(),
+                dataUrl: dataUrl,
+                timestamp: new Date(),
+                type: 'camera'
+            };
 
-        // Update gallery
-        this.updateGallery();
+            this.photos.push(photo);
+            this.addPhotoToGallery(photo);
+            this.setStatus('Photo captured!', true);
+            this.playCaptureFeedback();
 
-        // Flash effect
-        this.flashEffect();
+        } catch (error) {
+            console.error('Error capturing photo:', error);
+            this.setStatus(`Capture failed: ${(error as Error).message}`, false);
+        }
+    }
 
-        // Show success message
-        this.showStatus('Screenshot captured!', 'success');
+    private async captureScreenshot() {
+        try {
+            if (this.stream) {
+                // We have a screen share stream from getDisplayMedia - capture it
+                await this.captureCameraPhoto(); // Same capture logic, but from screen stream
+            } else {
+                // No stream available - this shouldn't happen if selectScreen worked
+                throw new Error('No screen capture stream available. Make sure to select a screen first.');
+            }
+        } catch (error) {
+            console.error('Error capturing screenshot:', error);
+            this.setStatus(`Screenshot failed: ${(error as Error).message}`, false);
+        }
     }
 
-    private flashEffect() {
-        const flash = document.createElement('div');
-        flash.style.cssText = `
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background: white;
-            opacity: 0.8;
-            z-index: 999;
-            pointer-events: none;
-        `;
-        document.body.appendChild(flash);
+    private async showCountdown() {
+        for (let i = 3; i > 0; i--) {
+            this.countdown.textContent = i.toString();
+            this.countdown.style.display = 'flex';
+            await new Promise(resolve => setTimeout(resolve, 1000));
+        }
+        this.countdown.style.display = 'none';
+    }
 
+    private playCaptureFeedback() {
+        // Flash effect
+        document.body.style.backgroundColor = 'white';
         setTimeout(() => {
-            flash.style.transition = 'opacity 0.3s';
-            flash.style.opacity = '0';
-            setTimeout(() => flash.remove(), 300);
+            document.body.style.backgroundColor = '';
         }, 100);
     }
 
-    private updateGallery() {
-        if (this.photos.length === 0) {
-            this.gallery.innerHTML = '<div class="empty-state">No photos/screenshots yet. Click the capture button to get started!</div>';
-            return;
+    private addPhotoToGallery(photo: Photo) {
+        // Remove empty state if it exists
+        const emptyState = this.gallery.querySelector('.empty-state');
+        if (emptyState) {
+            emptyState.remove();
         }
 
-        this.gallery.innerHTML = this.photos.map(photo => `
-            <div class="photo-item" data-id="${photo.id}">
-                <img src="${photo.dataUrl}" alt="Photo ${photo.id}">
-                <div class="photo-time">${this.formatTime(photo.timestamp)}</div>
+        // Create photo element
+        const photoElement = document.createElement('div');
+        photoElement.className = 'photo-item';
+        photoElement.dataset['photoId'] = photo.id;
+        
+        const typeIcon = photo.type === 'camera' ? '📷' : '🖥️';
+        photoElement.innerHTML = `
+            <img src="${photo.dataUrl}" alt="Captured ${photo.type}">
+            <div class="photo-info">
+                <span class="photo-type">${typeIcon}</span>
+                <span class="photo-time">${photo.timestamp.toLocaleTimeString()}</span>
             </div>
-        `).join('');
-
-        // Add click listeners to photos
-        this.gallery.querySelectorAll('.photo-item').forEach(item => {
-            item.addEventListener('click', () => {
-                const id = item.getAttribute('data-id');
-                if (id) this.openModal(id);
-            });
-        });
-    }
+        `;
 
-    private formatTime(date: Date): string {
-        return date.toLocaleTimeString('en-US', { 
-            hour: '2-digit', 
-            minute: '2-digit' 
-        });
+        photoElement.addEventListener('click', () => this.openModal(photo.id));
+        this.gallery.insertBefore(photoElement, this.gallery.firstChild);
     }
 
     private openModal(photoId: string) {
@@ -495,11 +405,11 @@ class PhotoBooth {
 
         this.currentPhotoId = photoId;
         this.modalImage.src = photo.dataUrl;
-        this.modal.classList.add('active');
+        this.modal.style.display = 'flex';
     }
 
     private closeModal() {
-        this.modal.classList.remove('active');
+        this.modal.style.display = 'none';
         this.currentPhotoId = null;
     }
 
@@ -509,66 +419,73 @@ class PhotoBooth {
         const photo = this.photos.find(p => p.id === this.currentPhotoId);
         if (!photo) return;
 
-        // Generate filename with timestamp
-        const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
-        const filename = `photo-booth-${timestamp}.png`;
-
         try {
-            // Call RPC method to save photo
-            if (electrobun.rpc) {
-                const result = await electrobun.rpc.request.savePhoto({
-                    dataUrl: photo.dataUrl,
-                    filename: filename
-                });
-
-                if (result.success) {
-                    this.showStatus(`Photo saved to ${result.path}`, 'success');
-                } else if (result.reason === 'canceled') {
-                    this.showStatus('Save canceled', 'info');
-                } else {
-                    this.showStatus(`Failed to save photo: ${result.error}`, 'error');
+            const filename = `${photo.type}-${new Date().toISOString().slice(0, 19).replace(/[:.]/g, '-')}.png`;
+            const result = await electrobun.rpc!.request.savePhoto({
+                dataUrl: photo.dataUrl,
+                filename: filename
+            });
+
+            if (result.success) {
+                this.showStatus('Photo saved successfully!', 'success');
+                if (result.path) {
+                    console.log('Photo saved to:', result.path);
                 }
+            } else if (result.reason === 'canceled') {
+                this.showStatus('Save canceled', 'info');
             } else {
-                this.showStatus('RPC not available', 'error');
+                this.showStatus('Failed to save photo', 'error');
             }
         } catch (error) {
-            console.error('Error calling savePhoto RPC:', error);
-            this.showStatus('Failed to save photo', 'error');
+            console.error('Error saving photo:', error);
+            this.showStatus('Error saving photo', 'error');
         }
     }
 
     private deleteCurrentPhoto() {
         if (!this.currentPhotoId) return;
 
-        // Remove from photos array
-        this.photos = this.photos.filter(p => p.id !== this.currentPhotoId);
+        const photoIndex = this.photos.findIndex(p => p.id === this.currentPhotoId);
+        if (photoIndex === -1) return;
 
-        // Update gallery
-        this.updateGallery();
+        // Remove from array
+        this.photos.splice(photoIndex, 1);
 
-        // Close modal
-        this.closeModal();
+        // Remove from DOM
+        const photoElement = this.gallery.querySelector(`[data-photo-id="${this.currentPhotoId}"]`);
+        if (photoElement) {
+            photoElement.remove();
+        }
 
+        // Show empty state if no photos left
+        if (this.photos.length === 0) {
+            this.gallery.innerHTML = `
+                <div class="empty-state">
+                    No photos/screenshots yet. Take some photos or screenshots to get started!
+                </div>
+            `;
+        }
+
+        this.closeModal();
         this.showStatus('Photo deleted', 'info');
     }
 
-    private setStatus(text: string, active: boolean, error: boolean = false) {
-        this.statusText.textContent = text;
+    private setStatus(message: string, active: boolean, error: boolean = false) {
+        this.statusText.textContent = message;
         this.status.classList.toggle('active', active && !error);
         this.status.classList.toggle('error', error);
     }
 
     private showStatus(message: string, type: 'success' | 'error' | 'info') {
-        // You could implement a toast notification here
         console.log(`[${type}] ${message}`);
         
         // Update status bar temporarily
         const originalText = this.statusText.textContent;
         const originalClasses = this.status.className;
         
-        this.statusText.textContent = message;
-        this.status.className = 'status ' + type;
+        this.setStatus(message, type === 'success', type === 'error');
         
+        // Restore original status after 3 seconds
         setTimeout(() => {
             this.statusText.textContent = originalText;
             this.status.className = originalClasses;
@@ -576,9 +493,7 @@ class PhotoBooth {
     }
 }
 
-// Initialize app when DOM is ready
-if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', () => new PhotoBooth());
-} else {
+// Initialize the app when DOM is loaded
+document.addEventListener('DOMContentLoaded', () => {
     new PhotoBooth();
-}
+});