diff --git a/static/css/style-fonts.css b/static/css/style-fonts.css
index c49eb14..9b9a915 100644
--- a/static/css/style-fonts.css
+++ b/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');
}
\ No newline at end of file
diff --git a/static/css/style-imageviewer.css b/static/css/style-imageviewer.css
index ac6874a..f738515 100644
--- a/static/css/style-imageviewer.css
+++ b/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%;
- margin-top: -33px;
+ height: 100% !important;
+ 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 {
diff --git a/static/css/style-music.css b/static/css/style-music.css
index fccc9cd..6654856 100644
--- a/static/css/style-music.css
+++ b/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;
- right: 8px;
+ bottom: 2px;
+ 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;
}
}
\ No newline at end of file
diff --git a/static/css/style.css b/static/css/style.css
index a09cc6d..60c20f3 100644
--- a/static/css/style.css
+++ b/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 {
- font-size: 16px;
-}
+/*
+this is so stupid, separate css into general style and per result page css style to avoid this
+.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);
- right: 0;
+ background: rgba(0, 0, 0, 0.8);
+ 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 {
diff --git a/static/fonts/MaterialIcons-Round.woff2 b/static/fonts/MaterialIcons-Round.woff2
index f94dba5..45ed1fb 100644
Binary files a/static/fonts/MaterialIcons-Round.woff2 and b/static/fonts/MaterialIcons-Round.woff2 differ
diff --git a/static/fonts/material-icons-round-v108-latin-regular.woff2 b/static/fonts/material-icons-round-v108-latin-regular.woff2
deleted file mode 100644
index c143837..0000000
Binary files a/static/fonts/material-icons-round-v108-latin-regular.woff2 and /dev/null differ
diff --git a/static/js/imageviewer.js b/static/js/imageviewer.js
index 4bd667f..6a328cb 100644
--- a/static/js/imageviewer.js
+++ b/static/js/imageviewer.js
@@ -28,26 +28,41 @@ document.addEventListener('DOMContentLoaded', function() {
![]()
-
- Show source website
- Show in fullscreen
-
+
+
`;
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.add('image_show');
+ imageView.classList.replace('image_hide', '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) {
- console.warn('Parent image div not found');
- return;
- }
+ fullImageUrl = imgElement.getAttribute('data-full') || imgElement.src;
+ sourceUrl = imgElement.getAttribute('data-source');
+ 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 = title;
- fullSizeLink.href = sourceUrl || proxyFullUrl;
-
- // 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
+
+ viewerTitle.textContent = imgElement.alt || 'Untitled';
+
+ viewerImage.onerror = () => viewerImage.src = proxyFullUrl;
+ viewerImage.onload = () => {};
+
viewerImage.src = fullImageUrl;
- }
+ }
- document.body.addEventListener('click', function(e) {
- let target = e.target;
- let clickableElement = target.closest('img.clickable, .img_title.clickable');
+ document.getElementById('viewer-copy-link').onclick = () => {
+ navigator.clipboard.writeText(window.location.origin + fullImageUrl).catch(console.error);
+ };
+ 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.add('image_hide');
+ imageView.classList.replace('image_show', '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 => {
- const parentImageDiv = img.closest('.image');
- if (parentImageDiv) {
- parentImageDiv.classList.remove('image_selected');
- }
- });
+
+ imageList.forEach(img => img.closest('.image')?.classList.remove('image_selected'));
}
- // Navigation functions
- function showPreviousImage() {
- if (currentIndex > 0) {
- currentIndex--;
- displayImage(currentIndex);
- }
- }
+ document.getElementById('viewer-close-button').onclick = closeImageViewer;
+ document.getElementById('viewer-prev-button').onclick = () => currentIndex > 0 && displayImage(--currentIndex);
+ document.getElementById('viewer-next-button').onclick = () => currentIndex < imageList.length - 1 && displayImage(++currentIndex);
- function showNextImage() {
- if (currentIndex < imageList.length - 1) {
- currentIndex++;
- 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();
- }
+ document.addEventListener('click', e => {
+ if (viewerOpen && !viewerOverlay.contains(e.target) && !e.target.closest('.image')) {
+ closeImageViewer();
}
});
- // Handle keyboard events for closing and navigation
- document.addEventListener('keydown', function(e) {
- if (viewerOpen) {
- if (e.key === 'Escape') {
- closeImageViewer();
- } else if (e.key === 'ArrowLeft') {
- showPreviousImage();
- } else if (e.key === 'ArrowRight') {
- showNextImage();
- }
- }
- });
-});
+ document.addEventListener('keydown', e => {
+ if (!viewerOpen) return;
+ if (e.key === 'Escape') closeImageViewer();
+ if (e.key === 'ArrowLeft' && currentIndex > 0) displayImage(--currentIndex);
+ if (e.key === 'ArrowRight' && currentIndex < imageList.length - 1) displayImage(++currentIndex);
+ });
+});
\ No newline at end of file