+${score}% β’ ${ep}
+${score}% β’ ${type}
+${msg}
`; + } + + 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 = 'Error loading gallery
'; + } + } 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); +}); \ No newline at end of file diff --git a/docker/src/scripts/gallery/image.js b/docker/src/scripts/gallery/image.js new file mode 100644 index 0000000..3a60d8c --- /dev/null +++ b/docker/src/scripts/gallery/image.js @@ -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 + ? ` Saved!` + : ` 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 = ` Copied!`; + setTimeout(() => btn.innerHTML = old, 2000); +} + +async function loadSimilarImages(item) { + if (!item.tags || item.tags.length === 0) { + document.getElementById('similar-section').innerHTML = 'No tags available to search for similar images.
'; + 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 = 'No similar images found.
'; + return; + } + + container.innerHTML = ` +Could not load similar images.
'; + } +} + +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 = ` +Error: HTML container 'item-main-content' not found. Please update gallery-image.html.
`; + document.getElementById('similar-section').style.display = 'none'; +} + +window.addEventListener('scroll', () => { + document.getElementById('navbar')?.classList.toggle('scrolled', window.scrollY > 50); +}); \ No newline at end of file diff --git a/docker/src/scripts/list.js b/docker/src/scripts/list.js new file mode 100644 index 0000000..fd6dd40 --- /dev/null +++ b/docker/src/scripts/list.js @@ -0,0 +1,368 @@ +const API_BASE = '/api'; +let currentList = []; +let filteredList = []; + +document.addEventListener('DOMContentLoaded', async () => { + await loadList(); + setupEventListeners(); +}); + +function getEntryLink(item) { + const isAnime = item.entry_type?.toUpperCase() === 'ANIME'; + const baseRoute = isAnime ? '/anime' : '/book'; + const source = item.source || 'anilist'; + + if (source === 'anilist') { + return `${baseRoute}/${item.entry_id}`; + } else { + return `${baseRoute}/${source}/${item.entry_id}`; + } +} + +async function populateSourceFilter() { + const select = document.getElementById('source-filter'); + if (!select) return; + + select.innerHTML = ` + + + `; + + try { + const response = await fetch(`${API_BASE}/extensions`); + if (response.ok) { + const data = await response.json(); + const extensions = data.extensions || []; + + extensions.forEach(extName => { + if (extName.toLowerCase() !== 'anilist' && extName.toLowerCase() !== 'local') { + const option = document.createElement('option'); + option.value = extName; + option.textContent = extName.charAt(0).toUpperCase() + extName.slice(1); + select.appendChild(option); + } + }); + } + } catch (error) { + console.error('Error loading extensions:', error); + } +} + +function updateLocalList(entryData, action) { + const entryId = entryData.entry_id; + const source = entryData.source; + + const findIndex = (list) => list.findIndex(e => + e.entry_id === entryId && e.source === source + ); + + const currentIndex = findIndex(currentList); + if (currentIndex !== -1) { + if (action === 'update') { + + currentList[currentIndex] = { ...currentList[currentIndex], ...entryData }; + } else if (action === 'delete') { + currentList.splice(currentIndex, 1); + } + } else if (action === 'update') { + + currentList.push(entryData); + } + + filteredList = [...currentList]; + + updateStats(); + applyFilters(); + window.ListModalManager.close(); +} + +function setupEventListeners() { + + document.querySelectorAll('.view-btn').forEach(btn => { + btn.addEventListener('click', () => { + document.querySelectorAll('.view-btn').forEach(b => b.classList.remove('active')); + btn.classList.add('active'); + const view = btn.dataset.view; + const container = document.getElementById('list-container'); + if (view === 'list') { + container.classList.add('list-view'); + } else { + container.classList.remove('list-view'); + } + }); + }); + + document.getElementById('status-filter').addEventListener('change', applyFilters); + document.getElementById('source-filter').addEventListener('change', applyFilters); + document.getElementById('type-filter').addEventListener('change', applyFilters); + document.getElementById('sort-filter').addEventListener('change', applyFilters); + + document.querySelector('.search-input').addEventListener('input', (e) => { + const query = e.target.value.toLowerCase(); + if (query) { + filteredList = currentList.filter(item => + item.title?.toLowerCase().includes(query) + ); + } else { + filteredList = [...currentList]; + } + applyFilters(); + }); + + document.getElementById('modal-save-btn')?.addEventListener('click', async () => { + + const entryToSave = window.ListModalManager.currentEntry || window.ListModalManager.currentData; + + if (!entryToSave) return; + + const success = await window.ListModalManager.save(entryToSave.entry_id, entryToSave.source); + + if (success) { + + const updatedEntry = window.ListModalManager.currentEntry; + updatedEntry.updated_at = new Date().toISOString(); + + updateLocalList(updatedEntry, 'update'); + } + + }); + + document.getElementById('modal-delete-btn')?.addEventListener('click', async () => { + const entryToDelete = window.ListModalManager.currentEntry || window.ListModalManager.currentData; + + if (!entryToDelete) return; + + const success = await window.ListModalManager.delete(entryToDelete.entry_id, entryToDelete.source); + + if (success) { + updateLocalList(entryToDelete, 'delete'); + } + + }); + + document.getElementById('add-list-modal')?.addEventListener('click', (e) => { + if (e.target.id === 'add-list-modal') { + window.ListModalManager.close(); + } + }); +} + +async function loadList() { + const loadingState = document.getElementById('loading-state'); + const emptyState = document.getElementById('empty-state'); + const container = document.getElementById('list-container'); + + await populateSourceFilter(); + + try { + loadingState.style.display = 'flex'; + emptyState.style.display = 'none'; + container.innerHTML = ''; + + const response = await fetch(`${API_BASE}/list`, { + headers: window.AuthUtils.getSimpleAuthHeaders() + }); + + if (!response.ok) { + throw new Error('Failed to load list'); + } + + const data = await response.json(); + currentList = data.results || []; + filteredList = [...currentList]; + + loadingState.style.display = 'none'; + + if (currentList.length === 0) { + emptyState.style.display = 'flex'; + } else { + updateStats(); + applyFilters(); + } + } catch (error) { + console.error('Error loading list:', error); + loadingState.style.display = 'none'; + if (window.NotificationUtils) { + window.NotificationUtils.error('Failed to load your list. Please try again.'); + } else { + alert('Failed to load your list. Please try again.'); + } + } +} + +function updateStats() { + + const total = currentList.length; + const watching = currentList.filter(item => item.status === 'WATCHING').length; + const completed = currentList.filter(item => item.status === 'COMPLETED').length; + const planning = currentList.filter(item => item.status === 'PLANNING').length; + + document.getElementById('total-count').textContent = total; + document.getElementById('watching-count').textContent = watching; + document.getElementById('completed-count').textContent = completed; + document.getElementById('planned-count').textContent = planning; +} + +function applyFilters() { + const statusFilter = document.getElementById('status-filter').value; + const sourceFilter = document.getElementById('source-filter').value; + const typeFilter = document.getElementById('type-filter').value; + const sortFilter = document.getElementById('sort-filter').value; + + let filtered = [...filteredList]; + + if (statusFilter !== 'all') { + filtered = filtered.filter(item => item.status === statusFilter); + } + + if (sourceFilter !== 'all') { + filtered = filtered.filter(item => item.source === sourceFilter); + } + + if (typeFilter !== 'all') { + filtered = filtered.filter(item => item.entry_type === typeFilter); + } + + switch (sortFilter) { + case 'title': + filtered.sort((a, b) => (a.title || '').localeCompare(b.title || '')); + break; + case 'score': + filtered.sort((a, b) => (b.score || 0) - (a.score || 0)); + break; + case 'progress': + filtered.sort((a, b) => (b.progress || 0) - (a.progress || 0)); + break; + case 'updated': + default: + + filtered.sort((a, b) => new Date(b.updated_at) - new Date(a.updated_at)); + break; + } + + renderList(filtered); +} + +function renderList(items) { + const container = document.getElementById('list-container'); + container.innerHTML = ''; + + if (items.length === 0) { + + if (currentList.length === 0) { + document.getElementById('empty-state').style.display = 'flex'; + } else { + + container.innerHTML = 'No entries match your filters
No extensions found for the selected filter (${filterType}).
`; + } +} + +async function loadMarketplace() { + extensionsGrid.innerHTML = ''; + + for (let i = 0; i < 6; i++) { + extensionsGrid.innerHTML += ` +Could not connect to the extension repository or local endpoint. Detail: ${error.message}
+Create your first profile to get started
+
+ User ID: ${integration.anilistUserId}
+Expires: ${new Date(integration.expiresAt).toLocaleDateString()}
++ Sync your anime list by logging in with AniList. +
++ You will be redirected and then returned here. +
+${unitLabel} ${progressText} - ${item.source}
+Update available: v1.x
+ + Click To Download + +Update available: v1.x
+ + + Click To Download + +Loading description...
+Episode --
+Update available: v1.x
+ + + Click To Download + +| # | +Title | + +Provider | +Action | +
|---|
Update available: v1.x
+ + + Click To Download + +Update available: v1.x
+ + + Click To Download + +Update available: v1.x
+ + + Click To Download + +Update available: v1.x
+ + + Click To Download + +Loading similar images...
+Update available: v1.x
+ + + Click To Download + +Loading your list...
+Update available: v1.x
+ + Click To Download + +Explore, install, and manage all available data source extensions for WaifuBoard.
+Update available: v1.x
+ + + Click To Download + +Update available: v1.x
+ + + Click To Download + +Select your profile to continue
+Update available: v1.x
+ + Click To Download + +