Spitfire/Search
Spitfire/Search
1
0
Fork 0
Code Issues 7 Pull requests Projects Releases Packages Wiki Activity Actions

fixed invalid links on images when DriveCache was disabled
Some checks failed
Run Integration Tests / test (push) Failing after 21s
Details

Browse source
This commit is contained in:
partisan 2024-12-05 19:19:18 +01:00
parent b6c37452ca
commit 6c351c5f2b
4 changed files with 101 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
cache-images.go
View file

@ -511,6 +511,8 @@ func serveMissingImage(w http.ResponseWriter, r *http.Request) {
w.Header().Set("Cache-Control", "no-store, must-revalidate")
w.Header().Set("Pragma", "no-cache")
w.Header().Set("Expires", "0")
w.WriteHeader(http.StatusNotFound)
if config.DriveCacheEnabled {
w.WriteHeader(http.StatusNotFound)
}
http.ServeFile(w, r, missingImagePath)
}

41
static/js/dynamicscrollingimages.js
View file

@ -81,18 +81,23 @@
// Get the img element
let img = imageDiv.querySelector('img');
if (img) {
let id = img.getAttribute('data-id');
if (id) {
imageElements.push(img);
imageIds.push(id);
}
if (hardCacheEnabled) {
// Replace image with placeholder
img.src = '/static/images/placeholder.svg';
img.onerror = function() {
handleImageError(img);
};
let id = img.getAttribute('data-id');
if (id) {
imageElements.push(img);
imageIds.push(id);
}
} else {
// HardCacheEnabled is false; load images immediately
img.src = img.getAttribute('data-full');
img.onerror = function() {
handleImageError(img);
};
}
}
});
@ -152,12 +157,12 @@
}
// Initialize imageElements and imageIds
if (hardCacheEnabled) {
imageElements = Array.from(document.querySelectorAll('img[data-id]'));
imageIds = imageElements
.map(img => img.getAttribute('data-id'))
.filter(id => id); // Exclude empty IDs
imageElements = Array.from(document.querySelectorAll('img[data-id]'));
imageIds = imageElements
.map(img => img.getAttribute('data-id'))
.filter(id => id); // Exclude empty IDs
if (hardCacheEnabled) {
// Replace images with placeholders
imageElements.forEach(img => {
img.src = '/static/images/placeholder.svg';
@ -166,11 +171,19 @@
// Start checking image status
let imageStatusTimer = setInterval(checkImageStatus, imageStatusInterval);
checkImageStatus(); // Initial check
// After initial images are loaded, ensure the page is scrollable
window.addEventListener('load', ensureScrollable);
} else {
// HardCacheEnabled is false; load images immediately
imageElements.forEach(img => {
img.src = img.getAttribute('data-full');
img.onerror = function() {
handleImageError(img);
};
});
}
// After initial images are loaded, ensure the page is scrollable
window.addEventListener('load', ensureScrollable);
// Infinite scrolling
window.addEventListener('scroll', function() {
if (isFetching || noMoreImages) return;

39
templates/images.html
View file

@ -98,11 +98,19 @@
<div class="image">
{{ if $.HardCacheEnabled }}
<noscript>
<!-- JavaScript is disabled; serve actual images -->
<img src="{{ $result.ProxyFull }}" alt="{{ $result.Title }}" class="clickable" />
<!-- JavaScript is disabled; serve actual images without placeholders; serve proxy image since HardCache is enabled -->
<img
src="{{ $result.ProxyFull }}"
data-id="{{ $result.ID }}"
data-full="{{ $result.ProxyFull }}"
data-proxy-full="{{ $result.ProxyThumb }}"
data-source="{{ $result.Source }}"
alt="{{ $result.Title }}"
class="clickable"
/>
</noscript>
<!-- JavaScript is enabled; use placeholders -->
<!-- JavaScript is enabled; use placeholders; serve proxy image since HardCache is enabled -->
<img
src="/static/images/placeholder.svg"
data-id="{{ $result.ID }}"
@ -113,8 +121,29 @@
class="clickable placeholder-img"
/>
{{ else }}
<!-- HardCacheEnabled is false; serve images directly -->
<img src="{{ $result.ProxyFull }}" alt="{{ $result.Title }}" class="clickable" />
<!-- JavaScript is enabled; use placeholders; serve full image since HardCache is disabled -->
<img
src="/static/images/placeholder.svg"
data-id="{{ $result.ID }}"
data-full="{{ $result.ProxyFull }}"
data-proxy-full="{{ $result.ProxyThumb }}"
data-source="{{ $result.Source }}"
alt="{{ $result.Title }}"
class="clickable placeholder-img"
/>
<noscript>
<!-- JavaScript is disabled; serve actual images without placeholders; serve full image since HardCache is disabled -->
<img
src="{{ $result.ProxyFull }}"
data-id="{{ $result.ID }}"
data-full="{{ $result.ProxyFull }}"
data-proxy-full="{{ $result.ProxyThumb }}"
data-source="{{ $result.Source }}"
alt="{{ $result.Title }}"
class="clickable"
/>
</noscript>
{{ end }}
<div class="resolution">{{ $result.Width }} × {{ $result.Height }}</div>
<div class="details">

39
templates/images_only.html
View file

@ -1,6 +1,20 @@
{{ range $index, $result := .Results }}
<div class="image">
{{ if $.HardCacheEnabled }}
<noscript>
<!-- JavaScript is disabled; serve actual images without placeholders; serve proxy image since HardCache is enabled -->
<img
src="{{ $result.ProxyFull }}"
data-id="{{ $result.ID }}"
data-full="{{ $result.ProxyFull }}"
data-proxy-full="{{ $result.ProxyThumb }}"
data-source="{{ $result.Source }}"
alt="{{ $result.Title }}"
class="clickable"
/>
</noscript>
<!-- JavaScript is enabled; use placeholders; serve proxy image since HardCache is enabled -->
<img
src="/static/images/placeholder.svg"
data-id="{{ $result.ID }}"
@ -11,8 +25,29 @@
class="clickable placeholder-img"
/>
{{ else }}
<!-- HardCacheEnabled is false; serve images directly -->
<img src="{{ $result.ProxyFull }}" alt="{{ $result.Title }}" class="clickable" />
<!-- JavaScript is enabled; use placeholders; serve full image since HardCache is disabled -->
<img
src="/static/images/placeholder.svg"
data-id="{{ $result.ID }}"
data-full="{{ $result.ProxyFull }}"
data-proxy-full="{{ $result.ProxyThumb }}"
data-source="{{ $result.Source }}"
alt="{{ $result.Title }}"
class="clickable placeholder-img"
/>
<noscript>
<!-- JavaScript is disabled; serve actual images without placeholders; serve full image since HardCache is disabled -->
<img
src="{{ $result.ProxyFull }}"
data-id="{{ $result.ID }}"
data-full="{{ $result.ProxyFull }}"
data-proxy-full="{{ $result.ProxyThumb }}"
data-source="{{ $result.Source }}"
alt="{{ $result.Title }}"
class="clickable"
/>
</noscript>
{{ end }}
<div class="resolution">{{ $result.Width }} × {{ $result.Height }}</div>
<div class="details">