3 files changed, 54 insertions, 5 deletions
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
 }