From 51be71d8943f6e5e0c4b28358f227860c73d53a7 Mon Sep 17 00:00:00 2001 From: Tim Keller Date: Sun, 11 May 2025 13:35:06 -0500 Subject: work --- src/albums.js | 6 +++--- src/connector.js | 39 +++++++++++++++++++++++++++++++++++++++ src/slides.js | 14 ++++++++++++-- 3 files changed, 54 insertions(+), 5 deletions(-) create mode 100644 src/connector.js diff --git a/src/albums.js b/src/albums.js index 5628e6d..e10dd54 100644 --- a/src/albums.js +++ b/src/albums.js @@ -1,4 +1,4 @@ -import immichConnector from "./immich.js" +import apiConnector from "./connector.js" export default async function initAlbums(albumsPageContainer) { // TODO empty cells animation @@ -8,7 +8,7 @@ export default async function initAlbums(albumsPageContainer) { async function createAlbum(res) { console.log(res.albumName, res.id, res.startDate, res.endDate, res.assetCount, res.shared) const albumClone = albumTemplate.content.cloneNode(true) - albumClone.querySelector(".album-thumb").src = await immichConnector.fetchImageSrc(res.albumThumbnailAssetId) + albumClone.querySelector(".album-thumb").src = apiConnector.albumThumbSrc(res.albumThumbnailAssetId) albumClone.querySelector(".album-name").textContent = res.albumName albumClone.querySelector(".album-assets-count").textContent = res.assetCount.toLocaleString() if (!res.shared) @@ -17,7 +17,7 @@ export default async function initAlbums(albumsPageContainer) { albumsContainer.appendChild(albumClone) } - const albumsResponse = await immichConnector.fetchAlbums() + const albumsResponse = await apiConnector.fetchAlbums() for (const res of albumsResponse) createAlbum(res) diff --git a/src/connector.js b/src/connector.js new file mode 100644 index 0000000..1fa513b --- /dev/null +++ b/src/connector.js @@ -0,0 +1,39 @@ +class APIConnector { + constructor(url) { + this.url = url ?? "" + } + + #fetch(endpoint) { + return fetch(this.url + "/api" + endpoint) + } + + fetch(endpoint) { + return this.#fetch(endpoint) + .then(response => { + if (!response.ok) + throw new Error(`HTTP error! Status: ${response.status}`) + return response.json() + }) + .then(data => { + return data + }) + .catch(error => { + console.error("Fetch error:", error) + }) + } + + seek(increment) { + return this.fetch(`/seek?increment=${increment}`) + } + + fetchAlbums() { + return this.fetch("/albums/get") + } + + albumThumbSrc(key) { + return `${this.url}/api/albums/thumb/${key}` + } +} + +const apiConnector = new APIConnector("http://localhost:5000") +export default apiConnector diff --git a/src/slides.js b/src/slides.js index 149db98..8b4080f 100644 --- a/src/slides.js +++ b/src/slides.js @@ -1,7 +1,8 @@ const Flickity = require("flickity") import "flickity/dist/flickity.min.css" +import apiConnector from "./connector.js" -export default function initSlides() { +export default function initSlides(slidesContainer) { /* Flickity function for scrolling to ensure next and prev pics are always * visible and to transition between states */ function scroll(progress) { @@ -43,7 +44,7 @@ export default function initSlides() { function imageLoaded(e) { positionImageStatic(e.target) } function initImages() { - const imgs = document.querySelectorAll("#slideshow-carousel img") + const imgs = slidesContainer.querySelectorAll("#slideshow-carousel img") for (let i = 0; i < imgs.length; i++) { const img = imgs[i] img.dataset.index = i @@ -65,5 +66,14 @@ export default function initSlides() { flkty.on("scroll", scroll) flkty.on("staticClick", staticClick) initImages() + + /* initialize seek buttons */ + const seekPrevButton = slidesContainer.querySelector("#prevSlide") + const seekNextButton = slidesContainer.querySelector("#nextSlide") + + seekPrevButton.addEventListener("click", () => { apiConnector.seek(-1) }) + seekNextButton.addEventListener("click", () => { apiConnector.seek(+1) }) + + /* done */ return true } -- cgit v1.2.3