From 1ce57c114cf16337748bf5b6e0a0e125b87d7869 Mon Sep 17 00:00:00 2001
From: Tim Keller <tjk@tjkeller.xyz>
Date: Fri, 20 Jun 2025 22:31:41 -0500
Subject: asset download and album search + set

---
 public/index.html | 14 +++++----
 src/albums.js     | 89 +++++++++++++++++++++++++++++++++++++++----------------
 src/connector.js  | 38 ++++++++++++++++++++++--
 src/slides.js     | 11 +++++--
 src/style.css     |  2 +-
 5 files changed, 117 insertions(+), 37 deletions(-)

diff --git a/public/index.html b/public/index.html
index 6e3fc70..7ddb58f 100644
--- a/public/index.html
+++ b/public/index.html
@@ -20,14 +20,18 @@
 				<div class="carousel-cell"><img class="carousel-img" src="" /></div>
 			</template>
 			<div class="grid grid-cols-3 w-full max-w-3xl m-auto justify-items-center py-4">
-				<button id="prevSlide" class="svg-btn size-12"><svg alt="Previous Slide" class="size-full"><use href="#sprite-skip_previous"></use></svg></button>
-				<button id="playPause" class="svg-btn size-12"><svg alt="Pause"          class="size-full"><use href="#sprite-pause"></use></svg></button>
-				<button id="nextSlide" class="svg-btn size-12"><svg alt="Next Slide"     class="size-full"><use href="#sprite-skip_next"></use></svg></button>
+				<button id="prev-slide" class="svg-btn size-12"><svg alt="Previous Slide" class="size-full"><use href="#sprite-skip_previous"></use></svg></button>
+				<button id="play-pause" class="svg-btn size-12"><svg alt="Pause"          class="size-full"><use href="#sprite-pause"></use></svg></button>
+				<button id="next-slide" class="svg-btn size-12"><svg alt="Next Slide"     class="size-full"><use href="#sprite-skip_next"></use></svg></button>
 			</div>
 		</div>
 		<div id="albums" class="hidden! overflow-y-scroll"><div class="px-4 m-auto max-w-3xl">
 			<div class="p-2 sticky top-0 z-20 bg-black">
 				<input class="rounded-input mx-auto mb-4 w-full" id="album-search" placeholder="Search your albums" />
+				<button id="albums-submit" class="rounded-btn">
+					<svg class="size-6"><use href="#sprite-check_circle"></use></svg>
+					Select
+				</button>
 			</div>
 			<div id="albums-container" class="m-auto z-10"></div>
 			<template id="album-template">
@@ -97,12 +101,12 @@
 						</div>
 						<select class="my-auto rounded-input" name="display_size">
 							<option value="thumbnail">Small Thumbnail (~15 kB)</option>
-							<option value="preview">Large Thumbnail (~150 kB)</option>
+							<option value="preview">Large Thumbnail (~400 kB)</option>
 							<option value="fullsize">Original Image</option>
 						</select>
 						<div>
 							<label class="settings-label">Max Cached Assets</label>
-							<p>Number of assets that can exist at once in RAM.<br>Each asset will take ~5x the display size in memory.</p>
+							<p>Number of assets that can exist at once in RAM.<br>Each asset will take ~10x the display size in memory.</p>
 						</div>
 						<input class="my-auto rounded-input" name="max_cache_assets" type="number" />
 					</div>
diff --git a/src/albums.js b/src/albums.js
index c1d85e3..ff7cd1d 100644
--- a/src/albums.js
+++ b/src/albums.js
@@ -1,30 +1,30 @@
 import apiConnector from "./connector.js"
 
-export default async function initAlbums(albumsPageContainer) {
-	const albumsContainer = albumsPageContainer.querySelector("#albums-container")
-	const albumTemplate = albumsPageContainer.querySelector("#album-template")
-
-	// create albums
-	async function createAlbum(res) {
-		const albumClone = albumTemplate.content.cloneNode(true)
-		albumClone.firstElementChild.dataset.key = res.id
-		albumClone.querySelector("a").href = apiConnector.albumSrc(res.id)
-		albumClone.querySelector("img").src = apiConnector.assetThumbnailSrc(res.albumThumbnailAssetId)
-		albumClone.querySelector(".album-name").textContent = res.albumName
-		albumClone.querySelector(".album-assets-count").textContent = res.assetCount.toLocaleString()
-		if (!res.shared)
-			albumClone.querySelector(".album-shared").remove()
-
-		albumsContainer.appendChild(albumClone)
-	}
+class Album {
+	static albums = []
+	static albumTemplate = null
+	static albumContainer = null
+
+	constructor(data) {
+		this.data = data
+		// create clone element
+		const e = Album.albumTemplate.content.cloneNode(true)
+		e.firstElementChild.dataset.key = data.id
+		e.querySelector("a").href = apiConnector.albumSrc(data.id)
+		e.querySelector("img").src = apiConnector.assetThumbnailSrc(data.albumThumbnailAssetId)
+		e.querySelector(".album-name").textContent = data.albumName
+		e.querySelector(".album-assets-count").textContent = data.assetCount.toLocaleString()
+		if (!data.shared)
+			e.querySelector(".album-shared").remove()
 
-	const albumsResponse = await apiConnector.fetchAlbums()
+		Album.albums.push(this)
+		Album.albumsContainer.appendChild(e)
+		this.element = Album.albumsContainer.lastElementChild
+	}
 
-	for (const res of albumsResponse)
-		createAlbum(res)
+	toggleVisibility(visible) { this.element.classList.toggle("hidden!", !visible) }
 
-	// album selection
-	albumsContainer.addEventListener("click", e => {
+	static albumSelect(e) {
 		// find album element
 		let album = e.target
 		while (album && !album.classList.contains("album"))
@@ -33,12 +33,51 @@ export default async function initAlbums(albumsPageContainer) {
 		if (album === null)
 			return
 
-		console.log(album)
 		if (album.dataset.selected)
 			delete album.dataset.selected
 		else
 			album.dataset.selected = "1"
-	})
+	}
+
+	static albumsFilter(e) {
+		const q = e.target.value.toLowerCase()
+		for (const album of Album.albums) {
+			const match = album.data.albumName.toLowerCase().includes(q)
+			album.toggleVisibility(match)
+		}
+	}
+
+	static getSelected() {
+		const s = []
+		for (const album of Album.albums)
+			if (album.element.dataset.selected)
+				s.push(album.data.id)
+		return s
+	}
 
-	return true
+	static submitSelected() {
+		apiConnector.updateAlbums(Album.getSelected())
+	}
+
+	static async initAlbums(albumsPageContainer) {
+		Album.albumsContainer = albumsPageContainer.querySelector("#albums-container")
+		Album.albumTemplate   = albumsPageContainer.querySelector("#album-template")
+		const albumSearch     = albumsPageContainer.querySelector("#album-search")
+		const albumsSubmit    = albumsPageContainer.querySelector("#albums-submit")
+
+		// create albums
+		const albumsResponse = await apiConnector.fetchAlbums()
+
+		for (const res of albumsResponse)
+			new Album(res)
+
+		// album selection
+		Album.albumsContainer.addEventListener("click", Album.albumSelect)
+		albumSearch.addEventListener("input", Album.albumsFilter)
+		albumsSubmit.addEventListener("click", Album.submitSelected)
+
+		return true
+	}
 }
+
+export default Album.initAlbums
diff --git a/src/connector.js b/src/connector.js
index 29f0cff..5d8b62f 100644
--- a/src/connector.js
+++ b/src/connector.js
@@ -5,18 +5,24 @@ class APIConnector {
 		this.url = url ?? ""
 		this.socket = io(url)
 
-		this.asset_index = 0
+		this.assetIndex = 0
 		this.movement = 0
 		this.assets = null
+		this.currentAsset = null
 		this.seekCallbacks = []
 
 		this.socket.on("seek", e => {
 			this.assetIndex = e.asset_index
 			this.movement = e.movement
 			this.assets = e.assets
+			this.currentAsset = e.current_asset
 			for (const cb of this.seekCallbacks)
 				cb()
 		})
+
+		this.downloadAnchor = document.createElement("a")
+		this.downloadAnchor.classList = "hidden"
+		document.body.appendChild(this.downloadAnchor)
 	}
 
 	fetch(endpoint, c) {
@@ -34,6 +40,28 @@ class APIConnector {
 			})
 	}
 
+	async assetDownload(key) {
+		const filename = await this.assetFileName(key)
+		console.log(filename)
+		fetch(this.assetFullsizeSrc(key))
+			.then(response => {
+				if (!response.ok)
+					throw new Error(`HTTP error! Status: ${response.status}`)
+				return response.blob()
+			})
+			.then(blob => {
+				const blobUrl = URL.createObjectURL(blob)
+				this.downloadAnchor.href = blobUrl
+				this.downloadAnchor.download = filename
+
+				this.downloadAnchor.click()
+				URL.revokeObjectURL(blobUrl)
+			})
+			.catch(error => {
+				console.error("Fetch error:", error)
+			})
+	}
+
 	post(endpoint, body) {
 		return this.fetch(endpoint, {
 			method: "POST",
@@ -48,11 +76,15 @@ class APIConnector {
 
 	fetchAlbums() { return this.fetch("/albums") }
 	fetchConfig() { return this.fetch("/config") }
+	updateAlbums(albums) { return this.post("/albums/update", albums) }
 	updateConfig(config) { return this.post("/config/update", config) }
 
-	albumSrc(key)          { return `${this.url}/api/redirect/albums/${key}` }
-	assetSrc(key)          { return `${this.url}/api/asset/${key}` }
+	albumSrc(key) { return `${this.url}/api/redirect/albums/${key}` }
+
+	assetPreviewSrc(key)   { return `${this.url}/api/asset/${key}` }
 	assetThumbnailSrc(key) { return `${this.url}/api/asset/${key}/thumbnail` }
+	assetFullsizeSrc(key)  { return `${this.url}/api/asset/${key}/fullsize` }
+	assetFileName(key)     { return this.fetch(`/asset/${key}/filename`).then(d => d.filename) }
 }
 
 const apiConnector = new APIConnector("http://localhost:5000")
diff --git a/src/slides.js b/src/slides.js
index fad6472..e4f6406 100644
--- a/src/slides.js
+++ b/src/slides.js
@@ -32,14 +32,19 @@ class Slides {
 		this.initImages()
 
 		/* initialize seek buttons */
-		const seekPrevButton = this.slidesContainer.querySelector("#prevSlide")
-		const seekNextButton = this.slidesContainer.querySelector("#nextSlide")
+		const seekPrevButton = this.slidesContainer.querySelector("#prev-slide")
+		const seekNextButton = this.slidesContainer.querySelector("#next-slide")
 
 		seekPrevButton.addEventListener("click", () => { this.flickity.previous() ; this.seek() })
 		seekNextButton.addEventListener("click", () => { this.flickity.next()     ; this.seek() })
 
 		/* initialize seek callback */
 		apiConnector.seekCallbacks.push(c => { this.seekCallback() })
+
+		/* initialize top controls */
+		const assetDownloadButton = this.slidesContainer.querySelector("#download")
+
+		assetDownloadButton.addEventListener("click", () => { apiConnector.assetDownload(apiConnector.currentAsset) })
 	}
 
 	seek() {
@@ -72,7 +77,7 @@ class Slides {
 			const x = (i + this.selectedIndex + 6) % this.flickity.cells.length
 			const e = this.flickity.cells[x].element
 			const img = e.firstElementChild
-			img.src = apiConnector.assetSrc(apiConnector.assets[i])
+			img.src = apiConnector.assetPreviewSrc(apiConnector.assets[i])
 		}
 	}
 
diff --git a/src/style.css b/src/style.css
index a41fa4c..b762eb3 100644
--- a/src/style.css
+++ b/src/style.css
@@ -44,5 +44,5 @@
 	@apply rounded-2xl bg-zinc-800 p-4
 }
 .rounded-btn {
-	@apply rounded-full w-fit bg-blue-200 px-4 py-2 text-black font-medium
+	@apply rounded-full w-fit bg-blue-300 px-4 py-2 text-black fill-black font-medium cursor-pointer flex gap-1
 }
-- 
cgit v1.2.3