added features

added a lot of features and bug fixes

index.html

@@ -253,11 +253,18 @@
             display: block;
         }
         
+        .progress-bar-container { /* Added container */
+             height: 10px; /* Increased height for easier clicking */
+             padding: 3px 0; /* Vertical padding */
+             cursor: pointer;
+             width: 100%;
+        }
         .progress-bar {
             height: 4px;
             background: #0a0a1a;
             border-radius: 2px;
             overflow: hidden;
+            pointer-events: none; /* Prevent clicks on the bar itself */
         }
         
         .progress-fill {
@@ -403,6 +410,65 @@
             margin-bottom: 12px;
             cursor: pointer;
             user-select: none;
+            -webkit-user-select: none; /* Safari */
+        }
+
+        /* Metadata Panel Styles (similar to settings) */
+        .metadata-panel {
+            position: fixed;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            background: #0a0a1a;
+            border: 1px solid #00ff9d;
+            box-shadow: 0 0 20px rgba(0, 255, 157, 0.5);
+            z-index: 101; /* Above settings */
+            padding: 20px;
+            border-radius: 5px;
+            max-width: 80vw; /* Wider */
+            width: 90%;
+            max-height: 80vh; /* Limit height */
+            opacity: 0;
+            pointer-events: none;
+            transition: all 0.3s ease;
+            display: flex; /* Use flex for layout */
+            flex-direction: column;
+        }
+
+        .metadata-panel.active {
+            opacity: 1;
+            pointer-events: all;
+        }
+
+        .metadata-content {
+            flex-grow: 1; /* Allow content to take available space */
+            overflow-y: auto; /* Enable vertical scroll */
+            background: #050510;
+            padding: 10px;
+            border: 1px solid #00b8ff;
+            border-radius: 3px;
+            font-size: 0.8rem;
+            white-space: pre-wrap; /* Wrap long lines */
+            word-break: break-all; /* Break long words/strings */
+            color: #00ff9d; /* Match body text */
+        }
+
+        .metadata-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0, 0, 0, 0.8); /* Darker overlay */
+            z-index: 100; /* Below panel, above rest */
+            opacity: 0;
+            pointer-events: none;
+            transition: opacity 0.3s ease;
+        }
+
+        .metadata-overlay.active {
+            opacity: 1;
+            pointer-events: all;
         }
         
         .checkbox-container input {
@@ -457,8 +523,12 @@
         }
         
         .scrollbar-hide {
-            -ms-overflow-style: none;
-            scrollbar-width: none;
+            -ms-overflow-style: none;  /* IE and Edge */
+            scrollbar-width: none;  /* Firefox */
+            cursor: grab; /* Add grab cursor */
+        }
+        .scrollbar-hide:active {
+             cursor: grabbing; /* Add grabbing cursor when dragging */
         }
         
         /* Cyberpunk scanline effect */
@@ -615,7 +685,7 @@
     <div id="settings-panel" class="settings-panel">
         <div class="flex justify-between items-center mb-4 border-b border-cyber-primary pb-2">
             <h3 class="text-xl">SYSTEM SETTINGS</h3>
-            <button id="close-settings" class="text-cyber-primary hover:text-cyber-accent">
+            <button id="close-settings" class="text-cyber-primary hover:text-cyber-accent" title="Close Settings">
                 <i class="fas fa-times"></i>
             </button>
         </div>
@@ -660,9 +730,26 @@
             </button>
         </div>
     </div>
-    
+
+    <!-- Metadata Panel -->
+    <div id="metadata-overlay" class="metadata-overlay"></div>
+    <div id="metadata-panel" class="metadata-panel">
+        <div class="flex justify-between items-center mb-4 border-b border-cyber-primary pb-2">
+            <h3 class="text-xl">FULL METADATA</h3>
+            <button id="close-metadata" class="text-cyber-primary hover:text-cyber-accent" title="Close Metadata">
+                <i class="fas fa-times"></i>
+            </button>
+        </div>
+        <pre id="full-metadata-content" class="metadata-content scrollbar-hide"></pre>
+         <div class="mt-4 pt-2 border-t border-cyber-primary text-right">
+             <button id="copy-metadata-btn" class="cyber-button bg-cyber-dark px-3 py-1 rounded cyber-border hover:shadow-cyber tooltip" data-tooltip="COPY METADATA" title="Copy Metadata">
+                 <i class="fas fa-copy mr-1"></i> COPY
+             </button>
+         </div>
+    </div>
+
     <!-- Main Container -->
-    <div class="container mx-auto p-4 max-w-6xl">
+    <div class="container mx-auto p-4">
         <!-- Header -->
         <div class="flex justify-between items-center mb-6">
             <div class="glitch-effect" data-text="WONTV1EW L33T">
@@ -679,10 +766,10 @@
                         <a href="#" id="open-folder-btn"><i class="fas fa-folder mr-2"></i> FOLDER</a>
                     </div>
                 </div>
-                <input type="file" id="file-input" class="hidden" multiple accept="image/*,video/*">
-                <input type="file" id="folder-input" class="hidden" webkitdirectory directory multiple accept="image/*,video/*">
+                <input type="file" id="file-input" class="hidden" multiple accept="image/*,video/*" aria-label="File Input">
+                <input type="file" id="folder-input" class="hidden" webkitdirectory directory multiple accept="image/*,video/*" aria-label="Folder Input">
                 
-                <button id="settings-btn" class="cyber-button bg-cyber-dark px-4 py-2 rounded cyber-border hover:shadow-cyber tooltip" data-tooltip="SETTINGS">
+                <button id="settings-btn" class="cyber-button bg-cyber-dark px-4 py-2 rounded cyber-border hover:shadow-cyber tooltip" data-tooltip="SETTINGS" title="Open Settings">
                     <i class="fas fa-cog"></i>
                 </button>
             </div>
@@ -691,7 +778,7 @@
         <!-- Main Content -->
         <div class="cyber-bg cyber-border rounded-xl overflow-hidden">
             <!-- Media Display Area -->
-            <div class="media-area relative h-[70vh] bg-black flex items-center justify-center">
+            <div class="media-area relative h-[75vh] bg-black flex items-center justify-center">
                 <div id="media-display" class="w-full h-full flex items-center justify-center relative">
                     <div id="no-media" class="text-cyber-secondary text-center p-8">
                         <i class="fas fa-images text-6xl mb-4 text-cyber-accent pulse"></i>
@@ -701,7 +788,7 @@
                     </div>
                     
                     <div id="image-container" class="hidden absolute inset-0 overflow-auto cursor-grab">
-                        <div id="image-wrapper" class="media-container">
+                        <div id="image-wrapper" class="media-container w-full h-full flex items-center justify-center">
                             <img id="current-image" class="max-w-full max-h-full" src="" alt="">
                         </div>
                     </div>
@@ -723,32 +810,36 @@
                 
                 <!-- Zoom Controls -->
                 <div id="zoom-controls" class="hidden absolute bottom-4 right-4 bg-cyber-dark bg-opacity-90 text-cyber-primary p-2 rounded cyber-border">
-                    <button id="zoom-in" class="p-2 hover:text-cyber-accent tooltip" data-tooltip="ZOOM IN (+)">
+                    <button id="zoom-in" class="p-2 hover:text-cyber-accent tooltip" data-tooltip="ZOOM IN (+)" title="Zoom In">
                         <i class="fas fa-search-plus"></i>
                     </button>
                     <div class="h-px bg-cyber-primary my-1"></div>
-                    <button id="zoom-out" class="p-2 hover:text-cyber-accent tooltip" data-tooltip="ZOOM OUT (-)">
+                    <button id="zoom-out" class="p-2 hover:text-cyber-accent tooltip" data-tooltip="ZOOM OUT (-)" title="Zoom Out">
                         <i class="fas fa-search-minus"></i>
                     </button>
                     <div class="h-px bg-cyber-primary my-1"></div>
-                    <button id="zoom-reset" class="p-2 hover:text-cyber-accent tooltip" data-tooltip="RESET ZOOM (0)">
+                    <button id="copy-image-btn" class="p-2 hover:text-cyber-accent tooltip" data-tooltip="COPY IMAGE (C)" title="Copy Image">
+                        <i class="fas fa-copy"></i>
+                    </button>
+                    <div class="h-px bg-cyber-primary my-1"></div>
+                    <button id="zoom-reset" class="p-2 hover:text-cyber-accent tooltip" data-tooltip="RESET ZOOM (0)" title="Reset Zoom">
                         <i class="fas fa-expand"></i>
                     </button>
                 </div>
                 
                 <!-- Video Controls -->
                 <div id="video-controls" class="hidden absolute bottom-4 left-4 right-4 bg-cyber-dark bg-opacity-90 text-cyber-primary p-3 rounded cyber-border flex items-center justify-between">
-                    <button id="play-pause" class="p-2 hover:text-cyber-accent tooltip" data-tooltip="PLAY/PAUSE (SPACE)">
+                    <button id="play-pause" class="p-2 hover:text-cyber-accent tooltip" data-tooltip="PLAY/PAUSE (SPACE)" title="Play/Pause">
                         <i class="fas fa-play" id="play-icon"></i>
                     </button>
-                    <div class="flex-1 mx-4">
+                    <div class="flex-1 mx-4 progress-bar-container"> <!-- Added container -->
                         <div class="progress-bar">
                             <div id="progress-fill" class="progress-fill" style="width: 0%"></div>
                         </div>
                     </div>
                     <div class="flex items-center space-x-3">
                         <i class="fas fa-volume-down"></i>
-                        <input type="range" id="volume-slider" class="volume-slider" min="0" max="1" step="0.01" value="1">
+                        <input type="range" id="volume-slider" class="volume-slider" min="0" max="1" step="0.01" value="1" aria-label="Volume">
                         <i class="fas fa-volume-up"></i>
                     </div>
                 </div>
@@ -784,7 +875,7 @@
                     <div class="flex items-center space-x-4">
                         <div class="flex items-center">
                             <span class="text-sm mr-2">SPEED:</span>
-                            <select id="slideshow-speed" class="bg-cyber-dark border border-cyber-primary rounded px-2 py-1 text-sm text-cyber-primary">
+                            <select id="slideshow-speed" class="bg-cyber-dark border border-cyber-primary rounded px-2 py-1 text-sm text-cyber-primary" aria-label="Slideshow Speed">
                                 <option value="1000">1 SEC</option>
                                 <option value="2000" selected>2 SEC</option>
                                 <option value="3000">3 SEC</option>
@@ -801,7 +892,7 @@
                     <div class="flex items-center space-x-4">
                         <div class="flex items-center">
                             <span class="text-sm mr-2">SIZE:</span>
-                            <select id="image-size" class="bg-cyber-dark border border-cyber-primary rounded px-2 py-1 text-sm text-cyber-primary">
+                            <select id="image-size" class="bg-cyber-dark border border-cyber-primary rounded px-2 py-1 text-sm text-cyber-primary" aria-label="Image Size">
                                 <option value="contain">FIT</option>
                                 <option value="cover">FILL</option>
                                 <option value="original">ORIGINAL</option>
@@ -810,16 +901,30 @@
                         <button id="toggle-sidebar" class="cyber-button bg-cyber-dark px-3 py-1 rounded cyber-border hover:shadow-cyber tooltip" data-tooltip="TOGGLE THUMBNAILS (T)">
                             <i class="fas fa-th mr-1"></i> THUMBNAILS
                         </button>
+                        <button id="toggle-fullscreen" class="cyber-button bg-cyber-dark px-3 py-1 rounded cyber-border hover:shadow-cyber tooltip" data-tooltip="FULLSCREEN (F)">
+                            <i class="fas fa-expand mr-1"></i><span class="button-text"> FULLSCREEN</span>
+                        </button>
                     </div>
                 </div>
                 
                 <!-- Status Bar -->
-                <div class="mt-4 flex justify-between items-center text-sm">
-                    <div>
-                        <span id="current-index" class="text-cyber-secondary">0/0</span>
-                        <span id="media-name" class="ml-2 text-cyber-primary"></span>
+                <div class="mt-4 text-xs space-y-1">
+                    <div class="flex justify-between items-center">
+                        <div>
+                            <span id="current-index" class="text-cyber-secondary mr-2">0/0</span>
+                            <span id="media-name" class="text-cyber-primary"></span>
+                        </div>
+                        <div id="status-message" class="text-cyber-accent pulse"></div>
+                    </div>
+                    <div class="flex justify-between items-center">
+                        <span id="media-dimensions" class="text-cyber-secondary mr-4"></span>
+                        <div class="flex items-center min-w-0"> <!-- Flex container for metadata and button -->
+                           <span id="media-metadata" class="text-cyber-secondary truncate mr-2" title="Metadata"></span>
+                           <button id="view-metadata-btn" class="hidden text-cyber-accent hover:text-cyber-primary text-xs tooltip" data-tooltip="VIEW FULL METADATA" title="View Full Metadata">
+                               <i class="fas fa-info-circle"></i>
+                           </button>
+                        </div>
                     </div>
-                    <div id="status-message" class="text-cyber-accent pulse"></div>
                 </div>
             </div>
         </div>
@@ -847,6 +952,7 @@
             const zoomInBtn = document.getElementById('zoom-in');
             const zoomOutBtn = document.getElementById('zoom-out');
             const zoomResetBtn = document.getElementById('zoom-reset');
+            const copyImageBtn = document.getElementById('copy-image-btn');
             const zoomControls = document.getElementById('zoom-controls');
             const playPauseBtn = document.getElementById('play-pause');
             const playPauseBottomBtn = document.getElementById('play-pause-bottom');
@@ -855,9 +961,19 @@
             const playIconBottom = document.getElementById('play-icon-bottom');
             const toggleSlideshowBtn = document.getElementById('toggle-slideshow');
             const toggleSidebarBtn = document.getElementById('toggle-sidebar');
+            const toggleFullscreenBtn = document.getElementById('toggle-fullscreen');
             const currentIndexDisplay = document.getElementById('current-index');
             const mediaNameDisplay = document.getElementById('media-name');
+            const mediaDimensionsDisplay = document.getElementById('media-dimensions');
+            const mediaMetadataDisplay = document.getElementById('media-metadata');
+            const viewMetadataBtn = document.getElementById('view-metadata-btn');
+            const metadataOverlay = document.getElementById('metadata-overlay');
+            const metadataPanel = document.getElementById('metadata-panel');
+            const fullMetadataContent = document.getElementById('full-metadata-content');
+            const closeMetadataBtn = document.getElementById('close-metadata');
+            const copyMetadataBtn = document.getElementById('copy-metadata-btn');
             const progressFill = document.getElementById('progress-fill');
+            const progressBarContainer = document.querySelector('.progress-bar-container');
             const videoControls = document.getElementById('video-controls');
             const volumeSlider = document.getElementById('volume-slider');
             const imageSizeSelect = document.getElementById('image-size');
@@ -884,6 +1000,11 @@
             let skipVideosInSlideshow = true;
             let cyberEffectsEnabled = true;
             let matrixRainEnabled = true;
+            let isScrubbingVideo = false; // Added for video scrubbing
+            let isDraggingThumbnails = false; // Added for thumbnail dragging
+            let thumbnailDragStartX = 0; // Added for thumbnail dragging
+            let thumbnailScrollLeftStart = 0; // Added for thumbnail dragging
+            let fullMetadataText = ''; // Added to store full metadata
             
             // Initialize settings from localStorage
             loadSettings();
@@ -954,6 +1075,7 @@
             zoomInBtn.addEventListener('click', () => zoomImage(1.2));
             zoomOutBtn.addEventListener('click', () => zoomImage(0.8));
             zoomResetBtn.addEventListener('click', resetZoom);
+            copyImageBtn.addEventListener('click', copyImageToClipboard);
             
             // Playback controls
             playPauseBtn.addEventListener('click', togglePlayPause);
@@ -971,9 +1093,20 @@
                 playIconBottom.className = 'fas fa-play';
             });
             currentVideo.addEventListener('ended', goToNext);
-            volumeSlider.addEventListener('input', () => {
+            volumeSlider.addEventListener('input', () => { // Keep this for slider input
                 currentVideo.volume = volumeSlider.value;
             });
+            // Video Scrubbing Listeners
+            progressBarContainer.addEventListener('mousedown', startVideoScrub);
+            document.addEventListener('mousemove', videoScrub);
+            document.addEventListener('mouseup', stopVideoScrub);
+            document.addEventListener('mouseleave', stopVideoScrub); // Stop if mouse leaves window
+
+            // Thumbnail Drag Scrolling Listeners
+            thumbnailSidebar.addEventListener('mousedown', startThumbnailDrag);
+            document.addEventListener('mousemove', thumbnailDrag); // Listen on document for wider drag area
+            document.addEventListener('mouseup', stopThumbnailDrag);
+            document.addEventListener('mouseleave', stopThumbnailDrag); // Stop if mouse leaves window
             
             // Slideshow controls
             toggleSlideshowBtn.addEventListener('click', toggleSlideshow);
@@ -985,6 +1118,13 @@
                     applyImageSize();
                 }
             });
+
+            // Fullscreen controls
+            toggleFullscreenBtn.addEventListener('click', toggleFullScreen);
+            document.addEventListener('fullscreenchange', handleFullscreenChange);
+            document.addEventListener('webkitfullscreenchange', handleFullscreenChange); // Safari
+            document.addEventListener('mozfullscreenchange', handleFullscreenChange); // Firefox
+            document.addEventListener('MSFullscreenChange', handleFullscreenChange); // IE/Edge
             
             // Mouse wheel behavior
             mediaDisplay.addEventListener('wheel', handleWheelEvent);
@@ -1024,6 +1164,12 @@
                 matrixRainEnabled = e.target.checked;
                 toggleMatrixRain(matrixRainEnabled);
             });
+
+            // Metadata Panel Listeners
+            viewMetadataBtn.addEventListener('click', showMetadataPanel);
+            closeMetadataBtn.addEventListener('click', hideMetadataPanel);
+            metadataOverlay.addEventListener('click', hideMetadataPanel);
+            copyMetadataBtn.addEventListener('click', copyFullMetadata);
             
             // Functions
             function handleFileSelection(e) {
@@ -1049,6 +1195,9 @@
                     videoControls.classList.add('hidden');
                     currentIndexDisplay.textContent = '0/0';
                     mediaNameDisplay.textContent = '';
+                    mediaDimensionsDisplay.textContent = ''; // Clear dimensions
+                    mediaMetadataDisplay.textContent = ''; // Clear metadata
+                    viewMetadataBtn.classList.add('hidden'); // Hide view button
                     return;
                 }
                 
@@ -1064,10 +1213,28 @@
                         videoContainer.classList.add('hidden');
                         zoomControls.classList.remove('hidden');
                         videoControls.classList.add('hidden');
-                        resetZoom();
-                        applyImageSize();
+                        resetZoom(); // Reset zoom/pan first
+                        applyImageSize(); // Apply selected size mode
+
+                        // Get dimensions after image loads
+                        currentImage.onload = () => {
+                            mediaDimensionsDisplay.textContent = `Dimensions: ${currentImage.naturalWidth} x ${currentImage.naturalHeight}`;
+                            // Attempt to extract metadata for PNGs
+                            if (file.type === 'image/png') {
+                                extractAndDisplayPngMetadata(file);
+                            } else {
+                                mediaMetadataDisplay.textContent = '';
+                                viewMetadataBtn.classList.add('hidden'); // Hide view button
+                            }
+                        };
+                        // Clear dimensions/metadata if the image fails to load
+                        currentImage.onerror = () => {
+                             mediaDimensionsDisplay.textContent = 'Dimensions: Error';
+                             mediaMetadataDisplay.textContent = '';
+                             viewMetadataBtn.classList.add('hidden'); // Hide view button
+                        }
                     };
-                    reader.readAsDataURL(file);
+                    reader.readAsDataURL(file); // Read the file to trigger onload/onerror
                 } else if (file.type.startsWith('video/')) {
                     // Display video
                     const reader = new FileReader();
@@ -1080,6 +1247,9 @@
                         currentVideo.volume = volumeSlider.value;
                         playIcon.className = 'fas fa-play';
                         playIconBottom.className = 'fas fa-play';
+                        mediaDimensionsDisplay.textContent = '';
+                        mediaMetadataDisplay.textContent = '';
+                        viewMetadataBtn.classList.add('hidden'); // Hide view button
                     };
                     reader.readAsDataURL(file);
                 }
@@ -1142,26 +1312,56 @@
             
             function goToPrevious() {
                 if (mediaFiles.length === 0) return;
-                
-                currentIndex = (currentIndex - 1 + mediaFiles.length) % mediaFiles.length;
-                displayCurrentMedia();
-                
-                // If slideshow is running and current media is video and skip videos is enabled
-                if (isSlideshowRunning && skipVideosInSlideshow && mediaFiles[currentIndex].type.startsWith('video/')) {
-                    setTimeout(goToPrevious, 100); // Skip this video
+
+                let prevIndex = currentIndex;
+                let attempts = 0;
+                const maxAttempts = mediaFiles.length;
+
+                do {
+                    prevIndex = (prevIndex - 1 + mediaFiles.length) % mediaFiles.length;
+                    attempts++;
+                    // Stop if we've looped through all files or found an image (or if not skipping videos)
+                    if (attempts >= maxAttempts || !isSlideshowRunning || !skipVideosInSlideshow || mediaFiles[prevIndex].type.startsWith('image/')) {
+                        break;
+                    }
+                } while (true);
+
+                // Only update if we found a valid index (prevents infinite loop if only videos exist and skipping is on)
+                if (attempts < maxAttempts || !mediaFiles[prevIndex].type.startsWith('video/')) {
+                   currentIndex = prevIndex;
+                   displayCurrentMedia();
+                } else if (isSlideshowRunning) {
+                    // If only videos exist and we're skipping, stop the slideshow
+                    stopSlideshow();
+                    showStatusMessage("Slideshow stopped: No images found to display.");
                 }
             }
             
             function goToNext() {
                 if (mediaFiles.length === 0) return;
-                
-                currentIndex = (currentIndex + 1) % mediaFiles.length;
-                displayCurrentMedia();
-                
-                // If slideshow is running and current media is video and skip videos is enabled
-                if (isSlideshowRunning && skipVideosInSlideshow && mediaFiles[currentIndex].type.startsWith('video/')) {
-                    setTimeout(goToNext, 100); // Skip this video
-                }
+
+                let nextIndex = currentIndex;
+                let attempts = 0;
+                const maxAttempts = mediaFiles.length;
+
+                do {
+                    nextIndex = (nextIndex + 1) % mediaFiles.length;
+                    attempts++;
+                     // Stop if we've looped through all files or found an image (or if not skipping videos)
+                    if (attempts >= maxAttempts || !isSlideshowRunning || !skipVideosInSlideshow || mediaFiles[nextIndex].type.startsWith('image/')) {
+                        break;
+                    }
+                } while (true);
+
+                // Only update if we found a valid index (prevents infinite loop if only videos exist and skipping is on)
+                 if (attempts < maxAttempts || !mediaFiles[nextIndex].type.startsWith('video/')) {
+                    currentIndex = nextIndex;
+                    displayCurrentMedia();
+                 } else if (isSlideshowRunning) {
+                     // If only videos exist and we're skipping, stop the slideshow
+                     stopSlideshow();
+                     showStatusMessage("Slideshow stopped: No images found to display.");
+                 }
             }
             
             function zoomImage(factor) {
@@ -1216,23 +1416,35 @@
             }
             
             function togglePlayPause() {
-                if (!mediaFiles[currentIndex]?.type.startsWith('video/')) {
+                const currentFile = mediaFiles[currentIndex];
+
+                // If it's an image, toggle slideshow
+                if (currentFile?.type.startsWith('image/')) {
                     if (!isSlideshowRunning) {
-                        toggleSlideshow();
+                        startSlideshow(); // Explicitly start
                     } else {
                         stopSlideshow();
                     }
                     return;
                 }
-                
-                if (currentVideo.paused) {
-                    currentVideo.play();
-                    playIcon.className = 'fas fa-pause';
-                    playIconBottom.className = 'fas fa-pause';
-                } else {
-                    currentVideo.pause();
-                    playIcon.className = 'fas fa-play';
-                    playIconBottom.className = 'fas fa-play';
+
+                // If it's a video, toggle play/pause
+                if (currentFile?.type.startsWith('video/')) {
+                    // Check if video source is actually loaded before trying to play
+                    if (currentVideo.readyState >= 1) { // HAVE_METADATA or higher
+                         if (currentVideo.paused) {
+                            currentVideo.play().catch(e => console.error("Video play error:", e)); // Add catch for potential errors
+                            playIcon.className = 'fas fa-pause';
+                            playIconBottom.className = 'fas fa-pause';
+                        } else {
+                            currentVideo.pause();
+                            playIcon.className = 'fas fa-play';
+                            playIconBottom.className = 'fas fa-play';
+                        }
+                    } else {
+                        console.warn("Video not ready to play.");
+                        // Optionally show a status message to the user
+                    }
                 }
             }
             
@@ -1250,8 +1462,11 @@
             }
             
             function updateVideoProgress() {
-                const percent = (currentVideo.currentTime / currentVideo.duration) * 100;
-                progressFill.style.width = `${percent}%`;
+                // Only update if not currently scrubbing
+                if (!isScrubbingVideo && currentVideo.duration) {
+                    const percent = (currentVideo.currentTime / currentVideo.duration) * 100;
+                    progressFill.style.width = `${percent}%`;
+                }
             }
             
             function toggleSlideshow() {
@@ -1368,17 +1583,29 @@
                             currentVideo.volume = Math.max(0, currentVideo.volume - 0.1);
                             volumeSlider.value = currentVideo.volume;
                         }
-                        break;
+                        break; // Fixed missing break
                     case 't':
                     case 'T':
                         toggleThumbnailSidebar();
                         break;
+                    case 'c':
+                    case 'C':
+                        copyImageToClipboard();
+                        break;
+                    case 'f':
+                    case 'F':
+                        toggleFullScreen();
+                        break;
                     case 's':
                     case 'S':
                         toggleSlideshow();
                         break;
                     case 'Escape':
-                        closeSettings();
+                        if (metadataPanel.classList.contains('active')) {
+                            hideMetadataPanel();
+                        } else {
+                            closeSettings();
+                        }
                         break;
                 }
             }
@@ -1483,7 +1710,239 @@
                     matrixRainContainer.style.display = 'none';
                 }
             }
-        });
+            
+            function toggleFullScreen() {
+                if (!document.fullscreenElement &&    // Standard syntax
+                    !document.mozFullScreenElement && // Firefox
+                    !document.webkitFullscreenElement && // Chrome, Safari and Opera
+                    !document.msFullscreenElement) {  // IE/Edge
+                    if (document.documentElement.requestFullscreen) {
+                        document.documentElement.requestFullscreen();
+                    } else if (document.documentElement.mozRequestFullScreen) { /* Firefox */
+                        document.documentElement.mozRequestFullScreen();
+                    } else if (document.documentElement.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
+                        document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
+                    } else if (document.documentElement.msRequestFullscreen) { /* IE/Edge */
+                        document.documentElement.msRequestFullscreen();
+                    }
+                } else {
+                    if (document.exitFullscreen) {
+                        document.exitFullscreen();
+                    } else if (document.mozCancelFullScreen) { /* Firefox */
+                        document.mozCancelFullScreen();
+                    } else if (document.webkitExitFullscreen) { /* Chrome, Safari and Opera */
+                        document.webkitExitFullscreen();
+                    } else if (document.msExitFullscreen) { /* IE/Edge */
+                        document.msExitFullscreen();
+                    }
+                }
+            }
+
+            function handleFullscreenChange() {
+                const button = toggleFullscreenBtn; // Use the variable directly
+                const icon = button.querySelector('i');
+                const textSpan = button.querySelector('span.button-text'); // Target the span
+
+                if (document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement) {
+                    icon.className = 'fas fa-compress mr-1';
+                    if (textSpan) textSpan.textContent = ' EXIT FS'; // Update span text
+                    button.setAttribute('data-tooltip', 'EXIT FULLSCREEN (F)');
+                } else {
+                    icon.className = 'fas fa-expand mr-1';
+                    if (textSpan) textSpan.textContent = ' FULLSCREEN'; // Update span text
+                    button.setAttribute('data-tooltip', 'FULLSCREEN (F)');
+                }
+            }
+
+            // --- New Functions ---
+
+            async function copyImageToClipboard() {
+                if (!mediaFiles[currentIndex]?.type.startsWith('image/')) {
+                    showStatusMessage('COPY FAILED: NO IMAGE LOADED');
+                    return;
+                }
+
+                try {
+                    const response = await fetch(currentImage.src);
+                    const blob = await response.blob();
+                    
+                    // Ensure blob type is correct, default to png if needed
+                    let imageType = blob.type;
+                    if (!imageType.startsWith('image/')) {
+                        console.warn('Blob type unknown, assuming image/png for clipboard');
+                        imageType = 'image/png';
+                    }
+
+                    await navigator.clipboard.write([
+                        new ClipboardItem({
+                            [imageType]: blob
+                        })
+                    ]);
+                    showStatusMessage('IMAGE COPIED TO CLIPBOARD');
+                } catch (err) {
+                    console.error('Failed to copy image:', err);
+                    showStatusMessage('COPY FAILED: SEE CONSOLE');
+                }
+            }
+
+            // --- Video Scrubbing Functions ---
+            function startVideoScrub(e) {
+                if (!mediaFiles[currentIndex]?.type.startsWith('video/')) return;
+                isScrubbingVideo = true;
+                updateVideoTimeFromScrub(e);
+            }
+
+            function videoScrub(e) {
+                if (!isScrubbingVideo) return;
+                updateVideoTimeFromScrub(e);
+            }
+
+            function stopVideoScrub() {
+                if (isScrubbingVideo) {
+                    isScrubbingVideo = false;
+                    // Optional: Resume playback if it was playing before scrub
+                    // if (!currentVideo.paused) currentVideo.play();
+                }
+            }
+
+            function updateVideoTimeFromScrub(e) {
+                 const rect = progressBarContainer.getBoundingClientRect();
+                 const offsetX = e.clientX - rect.left;
+                 const width = rect.width;
+                 let percentage = offsetX / width;
+                 percentage = Math.max(0, Math.min(1, percentage)); // Clamp between 0 and 1
+
+                 if (currentVideo.duration) {
+                     currentVideo.currentTime = percentage * currentVideo.duration;
+                     // Manually update progress fill during scrub
+                     progressFill.style.width = `${percentage * 100}%`;
+                 }
+            }
+
+             // --- Thumbnail Drag Scrolling Functions ---
+             function startThumbnailDrag(e) {
+                 isDraggingThumbnails = true;
+                 thumbnailDragStartX = e.pageX - thumbnailSidebar.offsetLeft;
+                 thumbnailScrollLeftStart = thumbnailSidebar.scrollLeft;
+                 thumbnailSidebar.style.cursor = 'grabbing'; // Change cursor
+                 thumbnailSidebar.style.userSelect = 'none'; // Prevent text selection
+             }
+
+             function thumbnailDrag(e) {
+                 if (!isDraggingThumbnails) return;
+                 e.preventDefault(); // Prevent default drag behavior
+                 const x = e.pageX - thumbnailSidebar.offsetLeft;
+                 const walk = (x - thumbnailDragStartX) * 1.5; // Multiplier for faster scroll
+                 thumbnailSidebar.scrollLeft = thumbnailScrollLeftStart - walk;
+             }
+
+             function stopThumbnailDrag() {
+                 if (isDraggingThumbnails) {
+                     isDraggingThumbnails = false;
+                     thumbnailSidebar.style.cursor = 'grab'; // Reset cursor
+                     thumbnailSidebar.style.removeProperty('user-select');
+                 }
+             }
+
+             // --- Metadata Panel Functions ---
+             function showMetadataPanel() {
+                 fullMetadataContent.textContent = fullMetadataText; // Populate with stored full text
+                 metadataPanel.classList.add('active');
+                 metadataOverlay.classList.add('active');
+             }
+
+             function hideMetadataPanel() {
+                 metadataPanel.classList.remove('active');
+                 metadataOverlay.classList.remove('active');
+             }
+
+             function copyFullMetadata() {
+                 navigator.clipboard.writeText(fullMetadataText)
+                     .then(() => showStatusMessage('METADATA COPIED'))
+                     .catch(err => {
+                         console.error('Failed to copy metadata:', err);
+                         showStatusMessage('METADATA COPY FAILED');
+                     });
+             }
+
+             // --- Update Metadata Display Logic ---
+             function updateMetadataDisplay(metadata) {
+                 fullMetadataText = Object.entries(metadata).map(([k, v]) => `${k}: ${v}`).join('\n'); // Store full text
+
+                 let displayText = metadata['parameters'] || metadata['Comment'] || metadata['Description'] || Object.entries(metadata).slice(0, 2).map(([k, v]) => `${k}: ${v.substring(0, 50)}...`).join('; ');
+                 let isTruncated = false;
+                 if (displayText.length > 100) {
+                     displayText = displayText.substring(0, 97) + '...';
+                     isTruncated = true;
+                 }
+                 mediaMetadataDisplay.textContent = `Metadata: ${displayText}`;
+                 mediaMetadataDisplay.title = fullMetadataText; // Full metadata in tooltip
+
+                 if (isTruncated || Object.keys(metadata).length > 0) { // Show button if truncated or if any metadata exists
+                     viewMetadataBtn.classList.remove('hidden');
+                 } else {
+                     viewMetadataBtn.classList.add('hidden');
+                 }
+             }
+
+             // Modify extractAndDisplayPngMetadata to use the new update function
+             async function extractAndDisplayPngMetadata(file) {
+                 mediaMetadataDisplay.textContent = 'Metadata: Reading...';
+                 mediaMetadataDisplay.title = '';
+                 viewMetadataBtn.classList.add('hidden'); // Hide button initially
+                 fullMetadataText = ''; // Clear stored text
+
+                 try {
+                     const buffer = await file.arrayBuffer();
+                     const dataView = new DataView(buffer);
+
+                     if (dataView.getUint32(0) !== 0x89504E47 || dataView.getUint32(4) !== 0x0D0A1A0A) {
+                         mediaMetadataDisplay.textContent = 'Metadata: Not a valid PNG';
+                         return;
+                     }
+
+                     let offset = 8;
+                     let metadata = {};
+                     let foundMetadata = false;
+
+                     while (offset < buffer.byteLength) {
+                         const length = dataView.getUint32(offset);
+                         const typeCode = dataView.getUint32(offset + 4);
+                         const type = String.fromCharCode(
+                             (typeCode >> 24) & 0xFF, (typeCode >> 16) & 0xFF, (typeCode >> 8) & 0xFF, typeCode & 0xFF
+                         );
+
+                         if (type === 'tEXt') {
+                             const chunkDataOffset = offset + 8;
+                             const chunkData = new Uint8Array(buffer, chunkDataOffset, length);
+                             const separatorIndex = chunkData.findIndex(byte => byte === 0);
+                             if (separatorIndex !== -1) {
+                                 const decoder = new TextDecoder("iso-8859-1");
+                                 const keyword = decoder.decode(chunkData.slice(0, separatorIndex));
+                                 const text = decoder.decode(chunkData.slice(separatorIndex + 1));
+                                 metadata[keyword] = text;
+                                 foundMetadata = true;
+                             }
+                         }
+                         // TODO: Add iTXt/zTXt parsing if needed
+
+                         if (type === 'IEND') break;
+                         offset += 12 + length;
+                     }
+
+                     if (foundMetadata) {
+                         updateMetadataDisplay(metadata); // Use the new function to display/store
+                     } else {
+                         mediaMetadataDisplay.textContent = 'Metadata: None found';
+                     }
+
+                 } catch (error) {
+                     console.error("Error reading PNG metadata:", error);
+                     mediaMetadataDisplay.textContent = 'Metadata: Error reading';
+                 }
+             }
+
+        }); // End of DOMContentLoaded listener
     </script>
-<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Freefall/media-viewer-pro" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</body>
 </html>