From: PhiTux <redacted>
Date: Sat, 4 Oct 2025 10:48:22 +0000 (+0200)
Subject: changed load-image-btn in read-mode
X-Git-Url: http://git.99rst.org/?a=commitdiff_plain;h=f4a5a92a40b85e4dc1b605da43256850ccfb3be8;p=DailyTxT.git

changed load-image-btn in read-mode
---

diff --git a/frontend/src/lib/ImageViewer.svelte b/frontend/src/lib/ImageViewer.svelte
index b2c7526..4526fc4 100644
--- a/frontend/src/lib/ImageViewer.svelte
+++ b/frontend/src/lib/ImageViewer.svelte
@@ -122,11 +122,20 @@
 				<Fa icon={faChevronLeft} fw />
 			</button>
 			{#key images[currentIndex].uuid_filename}
-				<img
-					class="fullscreen-image"
-					alt={images[currentIndex].filename}
-					src={images[currentIndex].src}
-				/>
+				{#if images[currentIndex].src}
+					<img
+						class="fullscreen-image"
+						alt={images[currentIndex].filename}
+						src={images[currentIndex].src}
+					/>
+				{:else}
+					<div
+						class="spinner-border text-light position-absolute top-50 start-50 translate-middle"
+						role="status"
+					>
+						<span class="visually-hidden">Loading...</span>
+					</div>
+				{/if}
 			{/key}
 			<div class="image-info">
 				<span class="image-name">{images[currentIndex].filename}</span>
@@ -153,7 +162,15 @@
 					class="image-container {index === currentIndex ? 'active' : ''}"
 					onclick={() => (currentIndex = index)}
 				>
-					<img class="image" alt={image.filename} src={image.src} />
+					<div class="image-thumb-wrapper">
+						{#if image.src}
+							<img class="image" alt={image.filename} src={image.src} />
+						{:else}
+							<div class="spinner-border text-light spinner-border-sm thumb-spinner" role="status">
+								<span class="visually-hidden">Loading...</span>
+							</div>
+						{/if}
+					</div>
 				</button>
 			{/each}
 		</div>
@@ -169,7 +186,15 @@
 			onclick={() => openFullscreen(index)}
 			transition:slide={{ axis: 'x' }}
 		>
-			<img class="image" alt={image.filename} src={image.src} transition:fade />
+			<div class="image-thumb-wrapper">
+				{#if image.src}
+					<img class="image" alt={image.filename} src={image.src} transition:fade />
+				{:else}
+					<div class="spinner-border text-secondary spinner-border-sm thumb-spinner" role="status">
+						<span class="visually-hidden">Loading...</span>
+					</div>
+				{/if}
+			</div>
 		</button>
 	{/each}
 </div>
@@ -244,6 +269,15 @@
 		transition: transform 0.3s ease;
 	}
 
+	.image-thumb-wrapper {
+		position: relative;
+		width: 150px;
+		height: 100px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
 	.fullscreen-overlay {
 		position: fixed;
 		top: 0;
diff --git a/frontend/src/routes/(authed)/+layout.svelte b/frontend/src/routes/(authed)/+layout.svelte
index fdda7db..cc24e3d 100644
--- a/frontend/src/routes/(authed)/+layout.svelte
+++ b/frontend/src/routes/(authed)/+layout.svelte
@@ -2798,6 +2798,7 @@
 		background-color: rgba(240, 240, 240, 0.9);
 		padding: 4px;
 		border-radius: 5px;
+		z-index: 10;
 	}
 
 	.modal-body {
diff --git a/frontend/src/routes/(authed)/read/+page.svelte b/frontend/src/routes/(authed)/read/+page.svelte
index 96058f4..83095a4 100644
--- a/frontend/src/routes/(authed)/read/+page.svelte
+++ b/frontend/src/routes/(authed)/read/+page.svelte
@@ -13,7 +13,7 @@
 	import { faCloudArrowDown } from '@fortawesome/free-solid-svg-icons';
 	import { Fa } from 'svelte-fa';
 	import ImageViewer from '$lib/ImageViewer.svelte';
-	import { alwaysShowSidenav } from '$lib/helpers.js';
+	import { alwaysShowSidenav, formatBytes } from '$lib/helpers.js';
 	import { getTranslate, getTolgee } from '@tolgee/svelte';
 
 	const { t } = getTranslate();
@@ -129,6 +129,7 @@
 					});
 				}
 			});
+			getImagesTotalSize();
 		}
 	});
 
@@ -210,6 +211,32 @@
 		}
 	}
 
+	let totalImageSize = $state(0);
+	let totalImageAmount = $state(0);
+	let imageSizeCalculated = false;
+	function getImagesTotalSize() {
+		if (imageSizeCalculated) return;
+		imageSizeCalculated = true;
+		totalImageSize = 0;
+		totalImageAmount = 0;
+
+		for (let i = 0; i < logs.length; i++) {
+			let log = logs[i];
+
+			// skip log if no images in this day/log
+			if (!log.images) {
+				continue;
+			}
+
+			log.images.forEach((image) => {
+				if (image.size) {
+					totalImageSize += image.size;
+					totalImageAmount += 1;
+				}
+			});
+		}
+	}
+
 	let cancelDownload = new AbortController();
 
 	function downloadFile(uuid) {
@@ -320,6 +347,7 @@
 			return;
 		}
 		isLoadingMonthForReading = true;
+		imageSizeCalculated = false;
 
 		axios
 			.get(API_URL + '/logs/loadMonthForReading', {
@@ -472,7 +500,10 @@
 										<div class="d-flex flex-row">
 											<button type="button" class="loadImageBtn" onclick={() => loadImages()}>
 												<Fa icon={faCloudArrowDown} class="me-2" size="2x" fw /><br />
-												{$t('read.load_images')}
+												{$t('read.load_images', {
+													count: totalImageAmount,
+													size: formatBytes(totalImageSize)
+												})}
 											</button>
 										</div>
 									{:else}
@@ -540,10 +571,14 @@
 		margin-top: 0.5rem;
 		border-radius: 5px;
 		transition: all ease 0.2s;
+		max-width: 200px;
+	}
+
+	:global(body[data-bs-theme='light'] .loadImageBtn) {
 		background-color: #ccc;
 	}
 
-	.loadImageBtn:hover {
+	:global(body[data-bs-theme='light'] .loadImageBtn:hover) {
 		background-color: #bbb;
 	}
 
diff --git a/frontend/src/routes/(authed)/write/+page.svelte b/frontend/src/routes/(authed)/write/+page.svelte
index 331d5cd..40abbbf 100644
--- a/frontend/src/routes/(authed)/write/+page.svelte
+++ b/frontend/src/routes/(authed)/write/+page.svelte
@@ -2025,6 +2025,10 @@
 </div>
 
 <style>
+	.text-muted.fst-italic {
+		color: rgba(228, 226, 230, 0.4) !important;
+	}
+
 	#sidenav {
 		padding-left: 1rem;
 		padding-right: 1rem;