Organized the differences between server and docker versions.
We are launching a docker version (server version) today so we want to just organize the repo so its easier to navigate.
This commit is contained in:
391
desktop/src/scripts/gallery/gallery.js
Normal file
391
desktop/src/scripts/gallery/gallery.js
Normal file
@@ -0,0 +1,391 @@
|
||||
const providerSelector = document.getElementById('provider-selector');
|
||||
const searchInput = document.getElementById('main-search-input');
|
||||
const resultsContainer = document.getElementById('gallery-results');
|
||||
|
||||
let currentPage = 1;
|
||||
let currentProvider = '';
|
||||
let currentQuery = '';
|
||||
const perPage = 48;
|
||||
let isLoading = false;
|
||||
let favorites = new Set();
|
||||
let favoritesMode = false;
|
||||
|
||||
let msnry = null;
|
||||
|
||||
const sentinel = document.createElement('div');
|
||||
sentinel.id = 'infinite-scroll-sentinel';
|
||||
sentinel.style.height = '1px';
|
||||
sentinel.style.marginBottom = '300px';
|
||||
sentinel.style.display = 'none';
|
||||
resultsContainer.parentNode.appendChild(sentinel);
|
||||
|
||||
function getAuthHeaders(extra = {}) {
|
||||
const token = localStorage.getItem("token");
|
||||
return token
|
||||
? { ...extra, Authorization: `Bearer ${token}` }
|
||||
: extra;
|
||||
}
|
||||
|
||||
function initializeMasonry() {
|
||||
if (typeof Masonry === 'undefined') {
|
||||
setTimeout(initializeMasonry, 100);
|
||||
return;
|
||||
}
|
||||
if (msnry) msnry.destroy();
|
||||
msnry = new Masonry(resultsContainer, {
|
||||
itemSelector: '.gallery-card',
|
||||
columnWidth: '.gallery-card',
|
||||
percentPosition: true,
|
||||
gutter: 0,
|
||||
transitionDuration: '0.4s'
|
||||
});
|
||||
msnry.layout();
|
||||
}
|
||||
initializeMasonry();
|
||||
|
||||
function getTagsArray(item) {
|
||||
if (Array.isArray(item.tags)) return item.tags;
|
||||
if (typeof item.tags === 'string') {
|
||||
return item.tags
|
||||
.split(',')
|
||||
.map(t => t.trim())
|
||||
.filter(t => t.length > 0);
|
||||
}
|
||||
return [];
|
||||
}
|
||||
|
||||
function getProxiedImageUrl(item) {
|
||||
const imageUrl = item.image || item.image_url;
|
||||
|
||||
if (!imageUrl || !item.headers) {
|
||||
return imageUrl;
|
||||
}
|
||||
|
||||
let proxyUrl = `/api/proxy?url=${encodeURIComponent(imageUrl)}`;
|
||||
|
||||
const headers = item.headers;
|
||||
const lowerCaseHeaders = {};
|
||||
for (const key in headers) {
|
||||
if (Object.prototype.hasOwnProperty.call(headers, key)) {
|
||||
lowerCaseHeaders[key.toLowerCase()] = headers[key];
|
||||
}
|
||||
}
|
||||
|
||||
const referer = lowerCaseHeaders.referer;
|
||||
if (referer) {
|
||||
proxyUrl += `&referer=${encodeURIComponent(referer)}`;
|
||||
}
|
||||
|
||||
const origin = lowerCaseHeaders.origin;
|
||||
if (origin) {
|
||||
proxyUrl += `&origin=${encodeURIComponent(origin)}`;
|
||||
}
|
||||
|
||||
const userAgent = lowerCaseHeaders['user-agent'];
|
||||
if (userAgent) {
|
||||
proxyUrl += `&userAgent=${encodeURIComponent(userAgent)}`;
|
||||
}
|
||||
|
||||
return proxyUrl;
|
||||
}
|
||||
|
||||
async function loadFavorites() {
|
||||
try {
|
||||
const res = await fetch('/api/gallery/favorites', {
|
||||
headers: getAuthHeaders()
|
||||
});
|
||||
if (!res.ok) return;
|
||||
const data = await res.json();
|
||||
favorites.clear();
|
||||
(data.favorites || []).forEach(fav => favorites.add(fav.id));
|
||||
} catch (err) {
|
||||
console.error('Error loading favorites:', err);
|
||||
}
|
||||
}
|
||||
|
||||
async function toggleFavorite(item) {
|
||||
const id = item.id;
|
||||
const isFav = favorites.has(id);
|
||||
|
||||
try {
|
||||
if (isFav) {
|
||||
await fetch(`/api/gallery/favorites/${encodeURIComponent(id)}`, {
|
||||
method: 'DELETE',
|
||||
headers: getAuthHeaders()
|
||||
});
|
||||
favorites.delete(id);
|
||||
} else {
|
||||
const tagsArray = getTagsArray(item);
|
||||
|
||||
const serializedHeaders = item.headers ? JSON.stringify(item.headers) : "";
|
||||
|
||||
await fetch('/api/gallery/favorites', {
|
||||
method: 'POST',
|
||||
headers: getAuthHeaders({
|
||||
'Content-Type': 'application/json'
|
||||
}),
|
||||
body: JSON.stringify({
|
||||
id: item.id,
|
||||
title: item.title || tagsArray.join(', ') || 'Untitled',
|
||||
image_url: item.image || item.image_url,
|
||||
thumbnail_url: item.image || item.image_url,
|
||||
tags: tagsArray.join(','),
|
||||
provider: item.provider || "",
|
||||
headers: serializedHeaders
|
||||
})
|
||||
});
|
||||
|
||||
|
||||
favorites.add(id);
|
||||
}
|
||||
|
||||
document.querySelectorAll(`.gallery-card[data-id="${CSS.escape(id)}"] .fav-btn`).forEach(btn => {
|
||||
btn.classList.toggle('favorited', !isFav);
|
||||
btn.innerHTML = !isFav
|
||||
? '<i class="fas fa-heart"></i>'
|
||||
: '<i class="far fa-heart"></i>';
|
||||
});
|
||||
|
||||
if (providerSelector.value === 'favorites' && isFav) {
|
||||
setTimeout(() => searchGallery(false), 300);
|
||||
}
|
||||
|
||||
} catch (err) {
|
||||
console.error('Error toggling favorite:', err);
|
||||
alert('Error updating favorite');
|
||||
}
|
||||
}
|
||||
|
||||
function createGalleryCard(item, isLoadMore = false) {
|
||||
const card = document.createElement('a');
|
||||
card.className = 'gallery-card grid-item';
|
||||
card.href = `/gallery/${item.provider || currentProvider || 'unknown'}/${encodeURIComponent(item.id)}`;
|
||||
card.dataset.id = item.id;
|
||||
|
||||
const img = document.createElement('img');
|
||||
img.className = 'gallery-card-img';
|
||||
|
||||
img.src = getProxiedImageUrl(item);
|
||||
img.alt = getTagsArray(item).join(', ') || 'Image';
|
||||
if (isLoadMore) {
|
||||
img.loading = 'lazy';
|
||||
}
|
||||
|
||||
const favBtn = document.createElement('button');
|
||||
favBtn.className = 'fav-btn';
|
||||
const isFav = favorites.has(item.id);
|
||||
favBtn.classList.toggle('favorited', isFav);
|
||||
favBtn.innerHTML = isFav ? '<i class="fas fa-heart"></i>' : '<i class="far fa-heart"></i>';
|
||||
favBtn.onclick = (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
toggleFavorite(item);
|
||||
};
|
||||
|
||||
card.appendChild(favBtn);
|
||||
card.appendChild(img);
|
||||
|
||||
if (currentProvider !== 'favorites') {
|
||||
const badge = document.createElement('div');
|
||||
badge.className = 'provider-badge';
|
||||
badge.textContent = item.provider || 'Global';
|
||||
card.appendChild(badge);
|
||||
} else {
|
||||
const badge = document.createElement('div');
|
||||
badge.className = 'provider-badge';
|
||||
badge.textContent = 'Favorites';
|
||||
badge.style.background = 'rgba(255,107,107,0.7)';
|
||||
card.appendChild(badge);
|
||||
}
|
||||
|
||||
img.onload = img.onerror = () => {
|
||||
card.classList.add('is-loaded');
|
||||
if (msnry) msnry.layout();
|
||||
};
|
||||
|
||||
return card;
|
||||
}
|
||||
|
||||
function showSkeletons(count, append = false) {
|
||||
const skeleton = `<div class="gallery-card skeleton grid-item"><div class="poster-skeleton"></div></div>`;
|
||||
if (!append) {
|
||||
resultsContainer.innerHTML = '';
|
||||
initializeMasonry();
|
||||
}
|
||||
const elements = [];
|
||||
for (let i = 0; i < count; i++) {
|
||||
const div = document.createElement('div');
|
||||
div.innerHTML = skeleton;
|
||||
const el = div.firstChild;
|
||||
resultsContainer.appendChild(el);
|
||||
elements.push(el);
|
||||
}
|
||||
if (msnry) {
|
||||
msnry.appended(elements);
|
||||
msnry.layout();
|
||||
}
|
||||
sentinel.style.display = 'none';
|
||||
observer.unobserve(sentinel);
|
||||
}
|
||||
|
||||
async function searchGallery(isLoadMore = false) {
|
||||
if (isLoading) return;
|
||||
|
||||
const query = searchInput.value.trim();
|
||||
const provider = providerSelector.value;
|
||||
const page = isLoadMore ? currentPage + 1 : 1;
|
||||
|
||||
favoritesMode = (provider === 'favorites');
|
||||
|
||||
currentQuery = query;
|
||||
currentProvider = provider;
|
||||
|
||||
if (!isLoadMore) {
|
||||
currentPage = 1;
|
||||
showSkeletons(perPage);
|
||||
} else {
|
||||
showSkeletons(8, true);
|
||||
}
|
||||
|
||||
isLoading = true;
|
||||
|
||||
try {
|
||||
let data;
|
||||
|
||||
if (favoritesMode) {
|
||||
const res = await fetch('/api/gallery/favorites', {
|
||||
headers: getAuthHeaders()
|
||||
});
|
||||
data = await res.json();
|
||||
|
||||
let favoritesResults = data.favorites || [];
|
||||
if (query) {
|
||||
const lowerQuery = query.toLowerCase();
|
||||
favoritesResults = favoritesResults.filter(fav =>
|
||||
(fav.title && fav.title.toLowerCase().includes(lowerQuery)) ||
|
||||
(fav.tags && fav.tags.toLowerCase().includes(lowerQuery))
|
||||
);
|
||||
}
|
||||
|
||||
data.results = favoritesResults.map(fav => ({
|
||||
id: fav.id,
|
||||
image: fav.image_url,
|
||||
image_url: fav.image_url,
|
||||
provider: fav.provider,
|
||||
tags: fav.tags
|
||||
}));
|
||||
data.hasNextPage = false;
|
||||
|
||||
} else if (provider && provider !== '') {
|
||||
const res = await fetch(`/api/gallery/search/provider?provider=${provider}&q=${encodeURIComponent(query)}&page=${page}&perPage=${perPage}`);
|
||||
data = await res.json();
|
||||
} else {
|
||||
const res = await fetch(`/api/gallery/search?q=${encodeURIComponent(query)}&page=${page}&perPage=${perPage}`);
|
||||
data = await res.json();
|
||||
}
|
||||
|
||||
const results = data.results || [];
|
||||
|
||||
const skeletons = resultsContainer.querySelectorAll('.gallery-card.skeleton');
|
||||
const toRemove = isLoadMore ? Array.from(skeletons).slice(-8) : skeletons;
|
||||
if (msnry) msnry.remove(toRemove);
|
||||
toRemove.forEach(el => el.remove());
|
||||
|
||||
const newCards = results.map((item, index) => createGalleryCard(item, isLoadMore));
|
||||
newCards.forEach(card => resultsContainer.appendChild(card));
|
||||
if (msnry) msnry.appended(newCards);
|
||||
|
||||
if (results.length === 0 && !isLoadMore) {
|
||||
const msg = favoritesMode
|
||||
? (query ? 'No favorites found matching your search' : 'You don\'t have any favorite images yet')
|
||||
: 'No results found';
|
||||
resultsContainer.innerHTML = `<p style="text-align:center;color:var(--text-secondary);padding:4rem;font-size:1.1rem;">${msg}</p>`;
|
||||
}
|
||||
|
||||
if (msnry) msnry.layout();
|
||||
|
||||
if (!favoritesMode && data.hasNextPage) {
|
||||
sentinel.style.display = 'block';
|
||||
observer.observe(sentinel);
|
||||
} else {
|
||||
sentinel.style.display = 'none';
|
||||
observer.unobserve(sentinel);
|
||||
}
|
||||
|
||||
if (isLoadMore) currentPage++;
|
||||
else currentPage = 1;
|
||||
|
||||
} catch (err) {
|
||||
console.error('Error:', err);
|
||||
if (!isLoadMore) {
|
||||
resultsContainer.innerHTML = '<p style="text-align:center;color:red;padding:4rem;">Error loading gallery</p>';
|
||||
}
|
||||
} finally {
|
||||
isLoading = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function loadExtensions() {
|
||||
try {
|
||||
const res = await fetch('/api/extensions/gallery');
|
||||
const data = await res.json();
|
||||
|
||||
providerSelector.innerHTML = '';
|
||||
|
||||
const favoritesOption = document.createElement('option');
|
||||
favoritesOption.value = 'favorites';
|
||||
favoritesOption.textContent = 'Favorites';
|
||||
providerSelector.appendChild(favoritesOption);
|
||||
|
||||
(data.extensions || []).forEach(ext => {
|
||||
const opt = document.createElement('option');
|
||||
opt.value = ext;
|
||||
opt.textContent = ext.charAt(0).toUpperCase() + ext.slice(1);
|
||||
providerSelector.appendChild(opt);
|
||||
});
|
||||
|
||||
} catch (err) {
|
||||
console.error('Error loading extensions:', err);
|
||||
}
|
||||
}
|
||||
|
||||
providerSelector.addEventListener('change', () => {
|
||||
if (providerSelector.value === 'favorites') {
|
||||
searchInput.placeholder = "Search in favorites...";
|
||||
} else {
|
||||
searchInput.placeholder = "Search in gallery...";
|
||||
}
|
||||
searchGallery(false);
|
||||
});
|
||||
|
||||
let searchTimeout;
|
||||
|
||||
searchInput.addEventListener('input', () => {
|
||||
clearTimeout(searchTimeout);
|
||||
searchTimeout = setTimeout(() => {
|
||||
searchGallery(false);
|
||||
}, 500);
|
||||
});
|
||||
searchInput.addEventListener('keydown', e => {
|
||||
if (e.key === 'Enter') {
|
||||
clearTimeout(searchTimeout);
|
||||
searchGallery(false);
|
||||
}
|
||||
});
|
||||
|
||||
const observer = new IntersectionObserver(entries => {
|
||||
if (entries[0].isIntersecting && !isLoading && !favoritesMode) {
|
||||
observer.unobserve(sentinel);
|
||||
searchGallery(true);
|
||||
}
|
||||
}, { rootMargin: '1000px' });
|
||||
|
||||
loadFavorites().then(() => {
|
||||
loadExtensions().then(() => {
|
||||
searchGallery(false);
|
||||
});
|
||||
});
|
||||
|
||||
window.addEventListener('scroll', () => {
|
||||
document.getElementById('navbar')?.classList.toggle('scrolled', window.scrollY > 50);
|
||||
});
|
||||
320
desktop/src/scripts/gallery/image.js
Normal file
320
desktop/src/scripts/gallery/image.js
Normal file
@@ -0,0 +1,320 @@
|
||||
const itemMainContentContainer = document.getElementById('item-main-content');
|
||||
let currentItem = null;
|
||||
|
||||
function getAuthHeaders(extra = {}) {
|
||||
const token = localStorage.getItem("token");
|
||||
return token
|
||||
? { ...extra, Authorization: `Bearer ${token}` }
|
||||
: extra;
|
||||
}
|
||||
|
||||
function getProxiedItemUrl(url, headers = null) {
|
||||
if (!url || !headers) {
|
||||
return url;
|
||||
}
|
||||
|
||||
let proxyUrl = `/api/proxy?url=${encodeURIComponent(url)}`;
|
||||
|
||||
const lowerCaseHeaders = {};
|
||||
for (const key in headers) {
|
||||
if (Object.prototype.hasOwnProperty.call(headers, key)) {
|
||||
lowerCaseHeaders[key.toLowerCase()] = headers[key];
|
||||
}
|
||||
}
|
||||
|
||||
const referer = lowerCaseHeaders.referer;
|
||||
if (referer) {
|
||||
proxyUrl += `&referer=${encodeURIComponent(referer)}`;
|
||||
}
|
||||
|
||||
const origin = lowerCaseHeaders.origin;
|
||||
if (origin) {
|
||||
proxyUrl += `&origin=${encodeURIComponent(origin)}`;
|
||||
}
|
||||
|
||||
const userAgent = lowerCaseHeaders['user-agent'];
|
||||
if (userAgent) {
|
||||
proxyUrl += `&userAgent=${encodeURIComponent(userAgent)}`;
|
||||
}
|
||||
|
||||
return proxyUrl;
|
||||
}
|
||||
|
||||
function getUrlParams() {
|
||||
const path = window.location.pathname.split('/').filter(s => s);
|
||||
if (path.length < 3 || path[0] !== 'gallery') return null;
|
||||
|
||||
if (path[1] === 'favorites' && path[2]) {
|
||||
return { fromFavorites: true, id: path[2] };
|
||||
} else {
|
||||
return { provider: path[1], id: path.slice(2).join('/') };
|
||||
}
|
||||
}
|
||||
|
||||
async function toggleFavorite() {
|
||||
if (!currentItem?.id) return;
|
||||
|
||||
const btn = document.getElementById('fav-btn');
|
||||
const wasFavorited = btn.classList.contains('favorited');
|
||||
|
||||
try {
|
||||
if (wasFavorited) {
|
||||
await fetch(`/api/gallery/favorites/${encodeURIComponent(currentItem.id)}`, {
|
||||
method: 'DELETE',
|
||||
headers: getAuthHeaders()
|
||||
});
|
||||
} else {
|
||||
const serializedHeaders = currentItem.headers ? JSON.stringify(currentItem.headers) : "";
|
||||
const tagsString = Array.isArray(currentItem.tags) ? currentItem.tags.join(',') : (currentItem.tags || '');
|
||||
|
||||
await fetch('/api/gallery/favorites', {
|
||||
method: 'POST',
|
||||
headers: getAuthHeaders({
|
||||
'Content-Type': 'application/json'
|
||||
}),
|
||||
body: JSON.stringify({
|
||||
id: currentItem.id,
|
||||
title: currentItem.title || 'Waifu',
|
||||
image_url: currentItem.originalImage,
|
||||
thumbnail_url: currentItem.originalImage,
|
||||
tags: tagsString,
|
||||
provider: currentItem.provider || "",
|
||||
headers: serializedHeaders
|
||||
})
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
btn.classList.toggle('favorited', !wasFavorited);
|
||||
btn.innerHTML = !wasFavorited
|
||||
? `<i class="fas fa-heart"></i> Saved!`
|
||||
: `<i class="far fa-heart"></i> Save Image`;
|
||||
|
||||
} catch (err) {
|
||||
console.error('Error toggling favorite:', err);
|
||||
alert('Error updating favorites');
|
||||
}
|
||||
}
|
||||
|
||||
function copyLink() {
|
||||
navigator.clipboard.writeText(window.location.href);
|
||||
const btn = document.getElementById('copy-link-btn');
|
||||
const old = btn.innerHTML;
|
||||
btn.innerHTML = `<i class="fas fa-check"></i> Copied!`;
|
||||
setTimeout(() => btn.innerHTML = old, 2000);
|
||||
}
|
||||
|
||||
async function loadSimilarImages(item) {
|
||||
if (!item.tags || item.tags.length === 0) {
|
||||
document.getElementById('similar-section').innerHTML = '<p style="text-align:center;color:var(--color-text-secondary);padding:3rem 0;">No tags available to search for similar images.</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
const firstTag = item.tags[0];
|
||||
const container = document.getElementById('similar-section');
|
||||
|
||||
try {
|
||||
const res = await fetch(`/api/gallery/search?q=${encodeURIComponent(firstTag)}&perPage=20`);
|
||||
if (!res.ok) throw new Error();
|
||||
|
||||
const data = await res.json();
|
||||
const results = (data.results || [])
|
||||
.filter(r => r.id !== item.id)
|
||||
.slice(0, 15);
|
||||
|
||||
if (results.length === 0) {
|
||||
container.innerHTML = '<p style="text-align:center;color:var(--color-text-secondary);padding:3rem 0;">No similar images found.</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
container.innerHTML = `
|
||||
<h3 style="text-align:center;margin:2rem 0 1.5rem;font-size:1.7rem;">
|
||||
More images tagged with "<span style="color:var(--color-primary);">${firstTag}</span>"
|
||||
</h3>
|
||||
<div class="similar-grid">
|
||||
${results.map(img => {
|
||||
const imageUrl = img.image || img.image_url || img.thumbnail_url;
|
||||
const proxiedUrl = getProxiedItemUrl(imageUrl, img.headers);
|
||||
|
||||
return `
|
||||
<a href="/gallery/${img.provider || 'unknown'}/${encodeURIComponent(img.id)}" class="similar-card">
|
||||
<img src="${proxiedUrl}" alt="Similar" loading="lazy">
|
||||
<div class="similar-overlay">${img.provider || 'Global'}</div>
|
||||
</a>
|
||||
`;
|
||||
}).join('')}
|
||||
</div>
|
||||
`;
|
||||
|
||||
} catch (err) {
|
||||
container.innerHTML = '<p style="text-align:center;color:var(--color-text-secondary);opacity:0.6;padding:3rem 0;">Could not load similar images.</p>';
|
||||
}
|
||||
}
|
||||
|
||||
function renderItem(item) {
|
||||
const proxiedFullImage = getProxiedItemUrl(item.fullImage, item.headers);
|
||||
|
||||
let sourceText;
|
||||
if (item.fromFavorites) {
|
||||
sourceText = item.headers && item.provider && item.provider !== 'Favorites'
|
||||
? `Source: ${item.provider}`
|
||||
: 'Favorites';
|
||||
} else {
|
||||
sourceText = `Source: ${item.provider}`;
|
||||
}
|
||||
|
||||
const originalProviderText = (item.fromFavorites && item.provider && item.provider !== 'Favorites')
|
||||
? ` (Original: ${item.provider})`
|
||||
: '';
|
||||
|
||||
itemMainContentContainer.innerHTML = `
|
||||
<div class="item-content-flex-wrapper">
|
||||
<div class="image-col">
|
||||
<img class="item-image loaded" src="${proxiedFullImage}" alt="${item.title}">
|
||||
</div>
|
||||
|
||||
<div class="info-col">
|
||||
<div class="info-header">
|
||||
<span class="provider-name">
|
||||
${sourceText}${originalProviderText}
|
||||
</span>
|
||||
<h1>${item.title}</h1>
|
||||
</div>
|
||||
|
||||
<div class="actions-row">
|
||||
<button id="fav-btn" class="action-btn fav-action">
|
||||
<i class="far fa-heart"></i> Save Image
|
||||
</button>
|
||||
|
||||
<button id="copy-link-btn" class="action-btn copy-link-btn">
|
||||
<i class="fas fa-link"></i> Copy Link
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="tags-section">
|
||||
<h3>Tags</h3>
|
||||
<div class="tag-list">
|
||||
${item.tags.length > 0
|
||||
? item.tags.map(tag => `
|
||||
<a class="tag-item">${tag}</a>
|
||||
`).join('')
|
||||
: '<span style="opacity:0.6;color:var(--color-text-secondary);">No tags</span>'
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
document.getElementById('fav-btn').addEventListener('click', toggleFavorite);
|
||||
document.getElementById('copy-link-btn').addEventListener('click', copyLink);
|
||||
|
||||
loadSimilarImages(item);
|
||||
}
|
||||
|
||||
function renderError(msg) {
|
||||
itemMainContentContainer.innerHTML = `
|
||||
<div style="text-align:center;padding:8rem 1rem;">
|
||||
<i class="fa-solid fa-heart-crack" style="font-size:5rem;color:#ff6b6b;opacity:0.7;"></i>
|
||||
<h2 style="margin:2rem 0;color:var(--color-text-primary);">Image Not Available</h2>
|
||||
<p style="color:var(--color-text-secondary);max-width:600px;margin:0 auto 2rem;">${msg}</p>
|
||||
<a href="/gallery" style="padding:1rem 2.5rem;background:var(--color-primary);color:white;border-radius:99px;text-decoration:none;font-weight:600;">
|
||||
Back to Gallery
|
||||
</a>
|
||||
</div>
|
||||
`;
|
||||
|
||||
document.getElementById('similar-section').style.display = 'none';
|
||||
}
|
||||
|
||||
async function loadFromFavorites(id) {
|
||||
try {
|
||||
const res = await fetch(`/api/gallery/favorites/${encodeURIComponent(id)}`, {
|
||||
headers: getAuthHeaders()
|
||||
});
|
||||
if (!res.ok) throw new Error('Not found');
|
||||
|
||||
const { favorite: fav } = await res.json();
|
||||
|
||||
const item = {
|
||||
id: fav.id,
|
||||
title: fav.title || 'No title',
|
||||
fullImage: fav.image_url,
|
||||
originalImage: fav.image_url,
|
||||
tags: typeof fav.tags === 'string' ? fav.tags.split(',').map(t => t.trim()).filter(Boolean) : (fav.tags || []),
|
||||
provider: 'Favorites',
|
||||
fromFavorites: true,
|
||||
headers: fav.headers
|
||||
};
|
||||
|
||||
currentItem = item;
|
||||
renderItem(item);
|
||||
document.getElementById('page-title').textContent = `WaifuBoard - ${item.title}`;
|
||||
|
||||
document.getElementById('fav-btn')?.classList.add('favorited');
|
||||
const btn = document.getElementById('fav-btn');
|
||||
if (btn) {
|
||||
btn.innerHTML = `<i class="fa-solid fa-heart"></i> Saved!`;
|
||||
}
|
||||
|
||||
} catch (err) {
|
||||
renderError('This image is no longer in your favorites.');
|
||||
}
|
||||
}
|
||||
|
||||
async function loadFromProvider(provider, id) {
|
||||
try {
|
||||
const res = await fetch(`/api/gallery/fetch/${id}?provider=${provider}`);
|
||||
if (!res.ok) throw new Error();
|
||||
|
||||
const data = await res.json();
|
||||
|
||||
if (!data.image) throw new Error();
|
||||
|
||||
const item = {
|
||||
id,
|
||||
title: data.title || 'Beautiful Art',
|
||||
fullImage: data.image,
|
||||
originalImage: data.image,
|
||||
tags: data.tags || [],
|
||||
provider,
|
||||
headers: data.headers
|
||||
};
|
||||
|
||||
currentItem = item;
|
||||
renderItem(item);
|
||||
document.getElementById('page-title').textContent = `WaifuBoard - ${item.title}`;
|
||||
|
||||
const favRes = await fetch(`/api/gallery/favorites/${encodeURIComponent(id)}`, {
|
||||
headers: getAuthHeaders()
|
||||
});
|
||||
if (favRes.ok) {
|
||||
document.getElementById('fav-btn')?.classList.add('favorited');
|
||||
const btn = document.getElementById('fav-btn');
|
||||
if (btn) {
|
||||
btn.innerHTML = `<i class="fa-solid fa-heart"></i> Saved!`;
|
||||
}
|
||||
}
|
||||
|
||||
} catch (err) {
|
||||
renderError('Image not found.');
|
||||
}
|
||||
}
|
||||
|
||||
if (itemMainContentContainer) {
|
||||
const params = getUrlParams();
|
||||
if (!params) {
|
||||
renderError('Invalid URL');
|
||||
} else if (params.fromFavorites) {
|
||||
loadFromFavorites(params.id);
|
||||
} else {
|
||||
loadFromProvider(params.provider, params.id);
|
||||
}
|
||||
} else {
|
||||
document.getElementById('item-content').innerHTML = `<p style="text-align:center;padding:5rem;color:red;">Error: HTML container 'item-main-content' not found. Please update gallery-image.html.</p>`;
|
||||
document.getElementById('similar-section').style.display = 'none';
|
||||
}
|
||||
|
||||
window.addEventListener('scroll', () => {
|
||||
document.getElementById('navbar')?.classList.toggle('scrolled', window.scrollY > 50);
|
||||
});
|
||||
Reference in New Issue
Block a user