improved image viewer and some css

static/css/style-fonts.css

@@ -31,5 +31,5 @@
     font-family: 'Material Icons Round';
     font-style: normal;
     font-weight: 400;
-    src: url('/static/fonts/material-icons-round-v108-latin-regular.woff2') format('woff2');
+    src: url('/static/fonts/MaterialIcons-Round.woff2') format('woff2');
 }

static/css/style-imageviewer.css

@@ -33,6 +33,7 @@
 #viewer-image {
     max-width: 100%;
     max-height: 60vh;
+    border-radius: 5px;
 }
 
 /* Viewer Title */
@@ -101,13 +102,13 @@
 
 /* View Image Container */
 #viewer-image-container {
-    background-color: var(--view-image-color);
+    background-color: #0000;
     width: 100%;
     height: auto;
     display: flex;
     justify-content: center;
     align-items: center;
-    margin-top: 50px;
+    margin-top: 20px;
 }
 
 /* Full Size and Proxy Size Links */
@@ -153,14 +154,24 @@
 }
 
 /* Responsive Design */
-@media only screen and (max-width: 750px) {
+@media only screen and (max-width: 880px) {
     #image-viewer {
         width: 100%;
-        height: 77%;
+        height: 100% !important;
-        margin-top: -33px;
+        margin-top: 28px;
         margin-right: 0%;
         border-top-right-radius: 0px;
         border-top-left-radius: 0px;
+        padding-top: 10px;
+        padding-bottom: 10px;
+    }
+
+    .material-icons-round {
+        font-size: 32px;
+    }
+
+    #viewer-image-container {
+        margin-top: 5px;
     }
 
     #viewer-image {

static/css/style-music.css

@@ -10,7 +10,7 @@
     position: relative;
     flex: 0 0 160px;
     aspect-ratio: 1;
-    border-radius: 8px;
+    border-radius: 5px;
     overflow: hidden;
     background: var(--placeholder-bg);
 }
@@ -42,12 +42,12 @@
 
 .duration-overlay {
     position: absolute;
-    bottom: 8px;
+    bottom: 2px;
-    right: 8px;
+    right: 2px;
     background: rgba(0, 0, 0, 0.8);
     color: white;
     padding: 4px 8px;
-    border-radius: 4px;
+    border-radius: 3px;
     font-size: 12px;
     font-weight: 500;
     backdrop-filter: blur(2px);
@@ -113,7 +113,5 @@
     .duration-overlay {
         font-size: 11px;
         padding: 3px 6px;
-        bottom: 6px;
-        right: 6px;
     }
 }

static/css/style.css

@@ -303,6 +303,7 @@ html {
 }
 
 .btn-nostyle {
+    font-family: 'Inter', Arial, Helvetica, sans-serif !important;
     background-color: inherit;
     border: none;
     padding: 0px;
@@ -383,10 +384,11 @@ hr {
 .results .video_title {
     font-size: 16px;
 }
-
+/* 
-.video_title {
+this is so stupid, separate css into general style and per result page css style to avoid this
-    font-size: 16px;
+.video_title h3 {
-}
+    margin-top: 0px !important;
+} */
 
 .video_title a {
     color: var(--link);
@@ -406,6 +408,7 @@ hr {
     width: 254px;
     height: 143px;
     object-fit: cover;
+    border-radius: 5px;
 }
 
 .video__img__results {
@@ -436,13 +439,19 @@ hr {
 .duration {
     position: absolute;
     color: #fff;
-    font-size: 11px;
+    font-size: 12px;
+    font-weight: 500;
     padding: .5em;
-    background: rgba(0, 0, 0, .5);
+    background: rgba(0, 0, 0, 0.8);
-    right: 0;
+    color: white;
+    padding: 4px 8px;
     margin-top: -28px !important;
     line-height: 1.3;
     letter-spacing: -0.4px;
+    bottom: 2px;
+    right: 2px;
+    border-radius: 3px;
+    backdrop-filter: blur(2px);
 }
 
 .pipe {

static/js/imageviewer.js

@@ -28,26 +28,41 @@ document.addEventListener('DOMContentLoaded', function() {
                 <img id="viewer-image" class="view-image-img" src="" alt="">
             </div>
             <p class="image-alt" id="viewer-title"></p>
-            <p>
+            <br>
-                <a class="full-size" id="viewer-full-size-link" href="#" target="_blank">Show source website</a>
+            <div class="search-type-icons" style="display:flex; justify-content:center; gap:15px; flex-wrap: wrap;">
-                <a class="proxy-size" id="viewer-proxy-size-link" href="#" target="_blank">Show in fullscreen</a>
+                <div class="icon-button">
-            </p>
+                    <button class="material-icons-round clickable btn-nostyle" id="viewer-copy-link">
+                        <span class="material-icons-round">&#xe37c;</span>
+                        <p>Copy link</p>
+                    </button>
+                </div>
+                <div class="icon-button">
+                    <button class="material-icons-round clickable btn-nostyle" id="viewer-open-image">
+                        <span class="material-icons-round">&#xe193;</span>
+                        <p>Open image</p>
+                    </button>
+                </div>
+                <div class="icon-button">
+                    <button class="material-icons-round clickable btn-nostyle" id="viewer-open-source">
+                        <span class="material-icons-round">&#xe366;</span>
+                        <p>Go to source</p>
+                    </button>
+                </div>
+                <div class="icon-button">
+                    <button class="material-icons-round clickable btn-nostyle" id="viewer-download-image">
+                        <span class="material-icons-round">&#xe2d1;</span>
+                        <p>Download</p>
+                    </button>
+                </div>
+            </div>
         </div>
     `;
 
     const imageView = viewerOverlay.querySelector('#image-viewer');
-    if (!imageView) {
-        console.error('imageView is null');
-    }
-
     const imagesContainer = document.querySelector('.images');
-    if (!imagesContainer) {
-        console.error('imagesContainer is null');
-    }
 
     function openImageViewer(element) {
-        initializeImageList(); // Update the image list
+        initializeImageList();
-
         const parentImageDiv = element.closest('.image');
         if (!parentImageDiv) return;
 
@@ -61,75 +76,62 @@ document.addEventListener('DOMContentLoaded', function() {
         document.body.classList.add('viewer-open');
         viewerOverlay.style.display = 'block';
 
-        imageView.classList.remove('image_hide');
+        imageView.classList.replace('image_hide', 'image_show');
-        imageView.classList.add('image_show');
     }
 
+    let fullImageUrl, sourceUrl, proxyFullUrl;
+
     function displayImage(index) {
         if (index < 0 || index >= imageList.length) return;
 
-        // Remove the `.image_selected` class from all images
         imageList.forEach(img => {
             const parentImageDiv = img.closest('.image');
-            if (parentImageDiv) {
+            parentImageDiv?.classList.remove('image_selected');
-                parentImageDiv.classList.remove('image_selected');
-            }
         });
-    
+
         const imgElement = imageList[index];
         const parentImageDiv = imgElement.closest('.image');
+        parentImageDiv?.classList.add('image_selected');
 
-        if (!parentImageDiv) {
+        fullImageUrl = imgElement.getAttribute('data-full') || imgElement.src;
-            console.warn('Parent image div not found');
+        sourceUrl = imgElement.getAttribute('data-source');
-            return;
+        proxyFullUrl = imgElement.getAttribute('data-proxy-full') || fullImageUrl;
-        }
 
-        // Add the `.image_selected` class to the currently displayed image
-        parentImageDiv.classList.add('image_selected');
-    
-        // Use the `data-full` attribute for the full image URL
-        let fullImageUrl = imgElement.getAttribute('data-full') || imgElement.src;
-        const title = imgElement.alt || 'Untitled';
-    
-        // Get the source URL from the data-source attribute
-        const sourceUrl = imgElement.getAttribute('data-source');
-    
-        // Fallback logic: if sourceUrl is null, use `data-proxy-full` or a meaningful default
-        const proxyFullUrl = imgElement.getAttribute('data-proxy-full') || fullImageUrl;
-
-        // Elements in the viewer
         const viewerImage = document.getElementById('viewer-image');
         const viewerTitle = document.getElementById('viewer-title');
-        const fullSizeLink = document.getElementById('viewer-full-size-link');
+
-        const proxySizeLink = document.getElementById('viewer-proxy-size-link');
+        viewerTitle.textContent = imgElement.alt || 'Untitled';
-    
+
-        viewerTitle.textContent = title;
+        viewerImage.onerror = () => viewerImage.src = proxyFullUrl;
-        fullSizeLink.href = sourceUrl || proxyFullUrl;
+        viewerImage.onload = () => {};
-    
+
-        // Remove previous event listeners to avoid stacking
-        viewerImage.onload = null;
-        viewerImage.onerror = null;
-    
-        // Set up the error handler to switch to the proxy image if the full image fails to load
-        viewerImage.onerror = function() {
-            // Use the proxy image as a fallback
-            viewerImage.src = proxyFullUrl;
-            proxySizeLink.href = proxyFullUrl;
-        };
-    
-        // Set up the load handler to ensure the proxySizeLink is set correctly if the image loads
-        viewerImage.onload = function() {
-            proxySizeLink.href = fullImageUrl;
-        };
-    
-        // Start loading the image
         viewerImage.src = fullImageUrl;
-    }    
+    }
 
-    document.body.addEventListener('click', function(e) {
+    document.getElementById('viewer-copy-link').onclick = () => {
-        let target = e.target;
+        navigator.clipboard.writeText(window.location.origin + fullImageUrl).catch(console.error);
-        let clickableElement = target.closest('img.clickable, .img_title.clickable');
+    };
 
+    document.getElementById('viewer-open-image').onclick = () => {
+        window.open(fullImageUrl, '_blank');
+    };
+
+    document.getElementById('viewer-open-source').onclick = () => {
+        window.open(sourceUrl || proxyFullUrl, '_blank');
+    };
+
+    document.getElementById('viewer-download-image').onclick = (event) => {
+        event.stopPropagation();
+        const a = document.createElement('a');
+        a.href = fullImageUrl;
+        a.download = fullImageUrl.split('/').pop();
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+    };
+
+    document.body.addEventListener('click', e => {
+        const clickableElement = e.target.closest('img.clickable, .img_title.clickable');
         if (clickableElement) {
             e.preventDefault();
             openImageViewer(clickableElement);
@@ -137,65 +139,31 @@ document.addEventListener('DOMContentLoaded', function() {
     });
 
     function closeImageViewer() {
-        imageView.classList.remove('image_show');
+        imageView.classList.replace('image_show', 'image_hide');
-        imageView.classList.add('image_hide');
         viewerOpen = false;
         currentIndex = -1;
 
         imagesContainer.classList.add('images_viewer_hidden');
         document.body.classList.remove('viewer-open');
         viewerOverlay.style.display = 'none';
-    
+
-        // Remove `.image_selected` from all images
+        imageList.forEach(img => img.closest('.image')?.classList.remove('image_selected'));
-        imageList.forEach(img => {
-            const parentImageDiv = img.closest('.image');
-            if (parentImageDiv) {
-                parentImageDiv.classList.remove('image_selected');
-            }
-        });
     }
 
-    // Navigation functions
+    document.getElementById('viewer-close-button').onclick = closeImageViewer;
-    function showPreviousImage() {
+    document.getElementById('viewer-prev-button').onclick = () => currentIndex > 0 && displayImage(--currentIndex);
-        if (currentIndex > 0) {
+    document.getElementById('viewer-next-button').onclick = () => currentIndex < imageList.length - 1 && displayImage(++currentIndex);
-            currentIndex--;
-            displayImage(currentIndex);
-        }
-    }
 
-    function showNextImage() {
+    document.addEventListener('click', e => {
-        if (currentIndex < imageList.length - 1) {
+        if (viewerOpen && !viewerOverlay.contains(e.target) && !e.target.closest('.image')) {
-            currentIndex++;
+            closeImageViewer();
-            displayImage(currentIndex);
-        }
-    }
-
-    // Event listeners for navigation and closing
-    document.getElementById('viewer-close-button').addEventListener('click', closeImageViewer);
-    document.getElementById('viewer-prev-button').addEventListener('click', showPreviousImage);
-    document.getElementById('viewer-next-button').addEventListener('click', showNextImage);
-
-    // Close viewer when clicking outside the image
-    document.addEventListener('click', function(e) {
-        if (viewerOpen) {
-            const target = e.target;
-            const clickedInsideViewer = viewerOverlay.contains(target) || target.closest('.image');
-            if (!clickedInsideViewer) {
-                closeImageViewer();
-            }
         }
     });
 
-    // Handle keyboard events for closing and navigation
+    document.addEventListener('keydown', e => {
-    document.addEventListener('keydown', function(e) {
+        if (!viewerOpen) return;
-        if (viewerOpen) {
+        if (e.key === 'Escape') closeImageViewer();
-            if (e.key === 'Escape') {
+        if (e.key === 'ArrowLeft' && currentIndex > 0) displayImage(--currentIndex);
-                closeImageViewer();
+        if (e.key === 'ArrowRight' && currentIndex < imageList.length - 1) displayImage(++currentIndex);
-            } else if (e.key === 'ArrowLeft') {
+    });
-                showPreviousImage();
+});
-            } else if (e.key === 'ArrowRight') {
-                showNextImage();
-            }
-        }
-    });    
-});