refactor codebase. Reorganize file structure. Replace webpack for vite. Setup setuptools for application. Move closer to distributable appv0.3.0

author: Tim Keller <tjk@tjkeller.xyz> 2025-12-09 22:16:48 -0600
committer: Tim Keller <tjk@tjkeller.xyz> 2025-12-09 22:16:57 -0600
commit: 3e7fdfb6c8a50c59ac933f701526ad1815dded92 (patch)
tree: d2c699ff93e23d0fe45845a4c2dc05d820ec317b /src/client/index.html
parent: 39738b84e9164b0f2d01f22440548c4393160013 (diff)
download: immich-frame-0.3.0.tar.xz
immich-frame-0.3.0.zip
1 files changed, 138 insertions, 0 deletions
diff --git a/src/client/index.html b/src/client/index.html
new file mode 100644
index 0000000..dcecf89
--- /dev/null
+++ b/src/client/index.html
@@ -0,0 +1,138 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
+	<script src="/src/index.js" type="module" defer></script>
+</head>
+<body class="bg-black text-white fill-white h-dvh max-h-screen flex flex-col m-0 overflow-hidden">
+	<header></header>
+	<main class="my-4 overflow-hidden h-full flex flex-col">
+		<!-- Slideshow Page -->
+		<div id="slideshow" class="hidden! overflow-hidden h-full flex flex-col">
+			<div class="flex justify-end pe-[10vw] w-full absolute bg-gradient-to-b from-black/40 z-20">
+				<div id="slideshow-share" class="z-10">
+					<button id="share"    class="svg-btn p-3 size-13"><svg alt="Share"    class="size-7"><use href="/__spritemap#sprite-share"></use></svg></button>
+					<button id="download" class="svg-btn p-3 size-13"><svg alt="Download" class="size-7"><use href="/__spritemap#sprite-download"></use></svg></button>
+				</div>
+			</div>
+			<div id="slideshow-carousel" class="h-full"></div>
+			<template id="carousel-cell-template">
+				<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="prev-slide" class="svg-btn size-12"><svg alt="Previous Slide" class="size-full"><use href="/__spritemap#sprite-skip_previous"></use></svg></button>
+				<button id="play-pause" class="svg-btn size-12"><svg alt="Pause"          class="size-full"><use href="/__spritemap#sprite-pause"></use></svg></button>
+				<button id="next-slide" class="svg-btn size-12"><svg alt="Next Slide"     class="size-full"><use href="/__spritemap#sprite-skip_next"></use></svg></button>
+			</div>
+		</div>
+		<!-- Albums Page -->
+		<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="/__spritemap#sprite-check_circle"></use></svg>
+					Select
+				</button>
+			</div>
+			<div id="albums-container" class="m-auto z-10"></div>
+			<template id="album-template">
+				<div class="album group">
+					<svg class="opacity-0 self-center size-6 group-hover:opacity-50
+							group-data-selected:opacity-100 group-data-selected:fill-blue-300" alt="Select Album">
+						<use href="/__spritemap#sprite-check_circle"></use>
+					</svg>
+					<img class="aspect-square object-cover rounded-2xl group-hover:shadow-md" />
+					<div class="flex justify-between self-center text-lg">
+						<div>
+							<span class="album-name font-bold group-hover:text-blue-300"></span>
+							<div class="album-info">
+								<span><span class="album-assets-count"></span> items</span>
+								<span class="album-shared">&bull; Shared</span>
+							</div>
+						</div>
+					</div>
+					<a target="_blank" class="opacity-0 group-hover:opacity-100 absolute bottom-4 right-4">
+						<svg class="size-6" alt="View album in Immich"><use href="/__spritemap#sprite-open_in_new"></use></svg>
+					</a>
+				</div>
+			</template>
+		</div></div>
+		<!-- Settings Page -->
+		<div id="settings" class="hidden! overflow-y-scroll">
+			<form class="flex flex-col gap-4 m-auto max-w-3xl mx-auto px-4">
+				<fieldset class="rounded-fieldset">
+					<h2 class="fieldset-header">
+						<svg class="size-6 inline"><use href="/__spritemap#sprite-camera"></use></svg>
+						Immich Server
+					</h2>
+					<div>
+						<label class="settings-label">Immich URL</label>
+						<p>Complete Immich base url (e.g. <span class="font-medium">http://immich.local</span>)</p>
+					</div>
+					<input class="rounded-input" name="immich_url" type="text" />
+					<div>
+						<label class="settings-label">Immich API Key</label>
+						<p>Generate an API key in User Settings</p>
+					</div>
+					<input class="rounded-input" name="immich_api_key" type="text" />
+				</fieldset>
+				<fieldset class="rounded-fieldset">
+					<h2 class="fieldset-header">
+						<svg class="size-6 inline"><use href="/__spritemap#sprite-photo_frame"></use></svg>
+						Display
+					</h2>
+					<div class="grid md:grid-cols-[16fr_9fr] gap-4">
+						<div>
+							<label class="settings-label">Image Duration</label>
+							<p>Number of seconds each image will be displayed.</p>
+						</div>
+						<input class="my-auto rounded-input" name="image_duration" type="number" step="0.1" />
+						<div>
+							<label class="settings-label">Transition Duration</label>
+							<p>Number of seconds each image transition will take.<br>Set as 0 to disable.</p>
+						</div>
+						<input class="my-auto rounded-input" name="transition_duration" type="number" step="0.1" />
+						<div>
+							<label class="settings-label">Max Framerate</label>
+							<p>Target display framerate.<br>Simple transitions look good at 12-15 fps.</p>
+						</div>
+						<input class="my-auto rounded-input" name="max_framerate" type="number" step="0.1" />
+						<div>
+							<label class="settings-label">Display Size</label>
+							<p>Image size to load on the display.<br>Large thumbnail size is suitable for FHD.</p>
+						</div>
+						<select class="my-auto rounded-input" name="display_size">
+							<option value="thumbnail">Small Thumbnail (~15 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 ~10x the display size in memory.</p>
+						</div>
+						<input class="my-auto rounded-input" name="max_cache_assets" type="number" />
+					</div>
+				</fieldset>
+				<input id="settings-submit" class="rounded-btn ml-auto" type="submit" value="Save Settings" />
+				<br>
+				<div class="text-white/50 text-right flex flex-col gap-1">
+					<p>Immich Pix Frame</p>
+					<p>© <a class="text-white/70" href="https://tjkeller.xyz">Tim Keller</a> 2025</p>
+					<p>GPL-3.0 License</p>
+					<p><a class="text-white/70" href="https://github.com/tjkeller-xyz/immich-pix-frame">View Source</a></p>
+				</div>
+			</form>
+		</div>
+	</main>
+	<footer class="w-full">
+		<div class="max-w-5xl m-auto">
+			<div id="menu" class="flex w-full p-2 gap-4 box-border border-t border-gray-500">
+				<a class="nav-btn" href="/slideshow"><svg class="size-6"><use href="/__spritemap#sprite-slideshow"  ></use></svg><span class="max-[425px]:hidden">Slideshow</span></a>
+				<a class="nav-btn" href="/albums"   ><svg class="size-6"><use href="/__spritemap#sprite-photo_album"></use></svg><span class="max-[425px]:hidden">Albums</span></a>
+				<a class="nav-btn" href="/settings" ><svg class="size-6"><use href="/__spritemap#sprite-settings"   ></use></svg><span class="max-[425px]:hidden">Settings</span></a>
+			</div>
+		</div>
+	</footer>
+</body>
+</html>
author	Tim Keller <tjk@tjkeller.xyz>	2025-12-09 22:16:48 -0600
committer	Tim Keller <tjk@tjkeller.xyz>	2025-12-09 22:16:57 -0600
commit	3e7fdfb6c8a50c59ac933f701526ad1815dded92 (patch)
tree	d2c699ff93e23d0fe45845a4c2dc05d820ec317b /src/client/index.html
parent	39738b84e9164b0f2d01f22440548c4393160013 (diff)
download	immich-frame-0.3.0.tar.xz immich-frame-0.3.0.zip