Simplify thumbs in front-end (#2678)

* simplify thumbs in front-end
* Fix blur overflow

---------

Co-authored-by: aSouchereau <dev@souch.ca>

resources/js/components/gallery/thumbs/AlbumThumb.vue

@@ -44,7 +44,7 @@
 	</router-link>
 </template>
 <script setup lang="ts">
-import { computed, ref, type Ref } from "vue";
+import { computed, ref } from "vue";
 import ThumbBadge from "@/components/gallery/thumbs/ThumbBadge.vue";
 import AlbumThumbImage from "@/components/gallery/thumbs/AlbumThumbImage.vue";
 import { useAuthStore } from "@/stores/Auth";

resources/js/components/gallery/thumbs/AlbumThumbImage.vue

@@ -27,9 +27,11 @@
 	</span>
 </template>
 <script setup lang="ts">
-import Constants from "@/services/constants";
+import { useImageHelpers } from "@/utils/Helpers";
 import { watch, ref, computed } from "vue";
 
+const { isNotEmpty, getPlayIcon, getPlaceholderIcon, getNoImageIcon, getPaswwordIcon } = useImageHelpers();
+
 const props = defineProps<{
 	thumb: App.Http.Resources.Models.ThumbResource | undefined | null;
 	class: string;
@@ -41,8 +43,7 @@ const src = ref("");
 const srcSet = ref("");
 const placeholderSrc = ref("");
 const classObject = computed(() => ({
-	"invert brightness-25 dark:invert-0 dark:brightness-100":
-		src.value === Constants.BASE_URL + "/img/no_images.svg" || src.value === Constants.BASE_URL + "/img/password.svg",
+	"invert brightness-25 dark:invert-0 dark:brightness-100": src.value === getNoImageIcon() || src.value === getPaswwordIcon(),
 	invisible: !isImageLoaded.value,
 }));
 
@@ -55,25 +56,19 @@ function load(thumb: App.Http.Resources.Models.ThumbResource | undefined | null,
 		placeholderSrc.value = thumb?.placeholder as string;
 	}
 	if (thumb?.thumb === "uploads/thumb/") {
-		src.value = Constants.BASE_URL + "/img/placeholder.png";
+		src.value = getPlaceholderIcon();
 		if (thumb.type.includes("video")) {
-			src.value = Constants.BASE_URL + "/img/play-icon.png";
+			src.value = getPlayIcon();
 		}
 		if (thumb.type.includes("raw")) {
-			src.value = Constants.BASE_URL + "/img/no_images.svg";
+			src.value = getNoImageIcon();
 		}
 	} else {
-		src.value = isNotEmpty(thumb?.thumb)
-			? (thumb?.thumb as string)
-			: Constants.BASE_URL + (isPasswordProtected ? "/img/password.svg" : "/img/no_images.svg");
+		src.value = isNotEmpty(thumb?.thumb) ? (thumb?.thumb as string) : isPasswordProtected ? getPaswwordIcon() : getNoImageIcon();
 	}
 	srcSet.value = isNotEmpty(thumb?.thumb2x) ? (thumb?.thumb2x as string) : "";
 }
 
-function isNotEmpty(link: string | null | undefined): boolean {
-	return link !== "" && link !== null && link !== undefined;
-}
-
 load(props.thumb, props.isPasswordProtected);
 
 watch(

resources/js/components/gallery/thumbs/PhotoThumb.vue

@@ -8,9 +8,19 @@
 		:data-album-id="props.album?.id"
 	>
 		<span
-			class="thumbimg w-full h-full border-none"
+			class="thumbimg absolute w-full h-full border-none overflow-hidden"
 			:class="(props.photo.precomputed.is_video ? 'video' : '') + ' ' + (props.photo.precomputed.is_livephoto ? 'livephoto' : '')"
 		>
+			<img
+				v-show="props.photo.size_variants.placeholder?.url"
+				:alt="$t('lychee.PHOTO_PLACEHOLDER')"
+				class="absolute w-full h-full top-0 left-0 blur-md"
+				:class="{ 'animate-fadeout animate-fill-forwards': isImageLoaded }"
+				:src="props.photo.size_variants.placeholder?.url ?? ''"
+				data-overlay="false"
+				draggable="false"
+			/>
+
 			<img
 				alt="Photo thumbnail"
 				class="h-full w-full border-none object-cover object-center"
@@ -21,6 +31,7 @@
 				data-overlay="false"
 				draggable="false"
 				:loading="props.isLazy ? 'lazy' : 'eager'"
+				@load="onImageLoad"
 			/>
 		</span>
 		<div class="overlay w-full absolute bottom-0 m-0 bg-gradient-to-t from-[#00000066] text-shadow-sm" :class="cssOverlay">
@@ -48,13 +59,15 @@
 	</router-link>
 </template>
 <script setup lang="ts">
-import { computed, ref, type Ref } from "vue";
+import { computed, ref, watch } from "vue";
 import { useAuthStore } from "@/stores/Auth";
 import MiniIcon from "@/components/icons/MiniIcon.vue";
 import ThumbBadge from "@/components/gallery/thumbs/ThumbBadge.vue";
 import { useLycheeStateStore } from "@/stores/LycheeState";
 import { storeToRefs } from "pinia";
-import Constants from "@/services/constants";
+import { useImageHelpers } from "@/utils/Helpers";
+
+const { getNoImageIcon, getPlayIcon } = useImageHelpers();
 
 const props = defineProps<{
 	isSelected: boolean;
@@ -69,8 +82,13 @@ const props = defineProps<{
 
 const auth = useAuthStore();
 const lycheeStore = useLycheeStateStore();
-const srcPlay = ref(Constants.BASE_URL + "/img/play-icon.png");
-const srcNoImage = ref(Constants.BASE_URL + "/img/no_images.svg");
+const srcPlay = ref(getPlayIcon());
+const srcNoImage = ref(getNoImageIcon());
+const isImageLoaded = ref(false);
+
+function onImageLoad() {
+	isImageLoaded.value = true;
+}
 
 // @ts-expect-error
 const is_cover_id = computed(() => props.album?.cover_id === props.photo.id);
@@ -97,4 +115,11 @@ const cssOverlay = computed(() => {
 	}
 	return "";
 });
+
+watch(
+	() => props.photo,
+	() => {
+		isImageLoaded.value = false;
+	},
+);
 </script>

resources/js/utils/Helpers.ts

@@ -0,0 +1,53 @@
+import Constants from "@/services/constants";
+
+export function useImageHelpers() {
+	function isNotEmpty(link: string | null | undefined): boolean {
+		return link !== "" && link !== null && link !== undefined;
+	}
+
+	function getPlayIcon(): string {
+		return Constants.BASE_URL + "/img/play-icon.png";
+	}
+
+	function getPlaceholderIcon(): string {
+		return Constants.BASE_URL + "/img/placeholder.png";
+	}
+
+	function getNoImageIcon(): string {
+		return Constants.BASE_URL + "/img/no_images.svg";
+	}
+
+	function getPaswwordIcon(): string {
+		return Constants.BASE_URL + "/img/password.svg";
+	}
+
+	return {
+		isNotEmpty,
+		getPlayIcon,
+		getPlaceholderIcon,
+		getNoImageIcon,
+		getPaswwordIcon,
+	};
+}
+
+export const EmptyAlbumCallbacks = {
+	setAsCover: () => {},
+	toggleRename: () => {},
+	toggleMerge: () => {},
+	toggleMove: () => {},
+	toggleDelete: () => {},
+	toggleDownload: () => {},
+};
+
+export const EmptyPhotoCallbacks = {
+	star: () => {},
+	unstar: () => {},
+	setAsCover: () => {},
+	setAsHeader: () => {},
+	toggleTag: () => {},
+	toggleRename: () => {},
+	toggleCopyTo: () => {},
+	toggleMove: () => {},
+	toggleDelete: () => {},
+	toggleDownload: () => {},
+};