Merge pull request #63 from goniszewski/feat/support-display-screenshots

goniszewski · Mar 14, 2024 · dd2b2fe · dd2b2fe
2 parents 148f895 + 649d38c
commit dd2b2fe
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 26 deletions.
diff --git a/src/lib/components/BookmarkCard/BookmarkCard.svelte b/src/lib/components/BookmarkCard/BookmarkCard.svelte
@@ -1,26 +1,24 @@
 <script lang="ts">
 	import type { Bookmark } from '$lib/types/Bookmark.type';
 
-	import { enhance, applyAction } from '$app/forms';
+	import { applyAction, enhance } from '$app/forms';
+	import { bookmarksStore } from '$lib/stores/bookmarks.store';
 	import { editBookmarkStore } from '$lib/stores/edit-bookmark.store';
+	import { searchEngine } from '$lib/stores/search.store';
+	import { showBookmarkStore } from '$lib/stores/show-bookmark.store';
+	import { userSettingsStore } from '$lib/stores/user-settings.store';
+	import { removeBookmarkFromSearchIndex } from '$lib/utils/search';
+	import { showToast } from '$lib/utils/show-toast';
 	import {
-		IconEyeCheck,
-		IconEyeClosed,
-		IconBookmarkFilled,
 		IconBookmark,
+		IconBookmarkFilled,
+		IconClipboardText,
 		IconDots,
-		IconPhotoX,
 		IconExternalLink,
-		IconClipboardText
+		IconEyeCheck,
+		IconEyeClosed,
+		IconPhotoX
 	} from '@tabler/icons-svelte';
-	import { showBookmarkStore } from '$lib/stores/show-bookmark.store';
-	import { invalidate } from '$app/navigation';
-	import { showToast } from '$lib/utils/show-toast';
-	import { user } from '$lib/pb';
-	import { removeBookmarkFromSearchIndex } from '$lib/utils/search';
-	import { searchEngine } from '$lib/stores/search.store';
-	import { bookmarksStore } from '$lib/stores/bookmarks.store';
-	import { userSettingsStore } from '$lib/stores/user-settings.store';
 
 	export let bookmark: Bookmark = {} as Bookmark;
 	let importanceForm: HTMLFormElement;
@@ -53,8 +51,19 @@
 			on:keydown={onShowBookmark}
 		>
 			<div class="w-full h-36 flex items-center justify-center bg-base hover:bg-base-100">
-				{#if (!bookmark.main_image.endsWith('/') && bookmark.main_image) || bookmark.main_image_url}
+				{#if ((!bookmark.main_image.endsWith('/') && bookmark.main_image) || bookmark.main_image_url) && !bookmark.screenshot.endsWith('/') && bookmark.screenshot}
+					<img
+						src={bookmark.main_image || bookmark.main_image_url}
+						on:mouseover={(e) => (e.target.src = bookmark.screenshot)}
+						on:mouseleave={(e) => (e.target.src = bookmark.main_image || bookmark.main_image_url)}
+						on:focus={(e) => (e.target.src = bookmark.screenshot)}
+						class="w-full h-full object-cover transition duration-300 ease-in-out"
+						alt="Main"
+					/>
+				{:else if (!bookmark.main_image.endsWith('/') && bookmark.main_image) || bookmark.main_image_url}
 					<img src={bookmark.main_image || bookmark.main_image_url} alt="Main" />
+				{:else if !bookmark.screenshot.endsWith('/') || bookmark.screenshot}
+					<img src={bookmark.screenshot} alt="Screenshot" />
 				{:else}
 					<IconPhotoX class="m-auto my-16" />
 				{/if}

diff --git a/src/lib/components/ShowBookmarkContent/ShowBookmarkContent.svelte b/src/lib/components/ShowBookmarkContent/ShowBookmarkContent.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { writable, type Writable } from 'svelte/store';
-	import { page } from '$app/stores';
 
 	import { editBookmarkStore } from '$lib/stores/edit-bookmark.store';
 	import { showBookmarkStore } from '$lib/stores/show-bookmark.store';
@@ -13,9 +12,7 @@
 		closeModal();
 		editBookmarkStore.set($bookmark);
 	}
-	const bookmark = writable<Partial<Bookmark>>({});
-
-	$: $bookmark = { ...$showBookmarkStore };
+	const bookmark = writable<Bookmark>();
 
 	const bookmarkTagsInput: Writable<
 		| {
@@ -26,6 +23,7 @@
 		| null
 	> = writable(null);
 
+	$: $bookmark = { ...$showBookmarkStore };
 	$: $bookmarkTagsInput = $bookmark.tags?.map((t) => ({ value: t.id, label: t.name })) || null;
 </script>
 
@@ -49,15 +47,42 @@
 							{/if}
 							<p class="badge badge-ghost">{$bookmark.domain}</p>
 						</div>
-						<div class="">
+						<div
+							class="carousel carousel-center max-w-md space-x-4 bg-neutral rounded-box mx-auto h-72 p-1"
+						>
 							{#if ($bookmark.main_image && !$bookmark.main_image.endsWith('/')) || $bookmark.main_image_url}
-								<img
-									src={$bookmark.main_image || $bookmark.main_image_url}
-									alt="Main"
-									class="rounded-md max-w-[70vw] md:max-w-sm"
-								/>
+								<div id="main-image" class="carousel-item w-full">
+									<a
+										href={$bookmark.main_image || $bookmark.main_image_url}
+										target="_blank"
+										class="flex w-full"
+									>
+										<img
+											src={$bookmark.main_image || $bookmark.main_image_url}
+											class="w-full object-scale-down justify-self-center"
+											alt="Main"
+										/>
+									</a>
+								</div>
+							{/if}
+							{#if $bookmark.screenshot && !$bookmark.screenshot.endsWith('/')}
+								<div id="screenshot" class="carousel-item w-full">
+									<a href={$bookmark.screenshot} target="_blank" class="flex w-full">
+										<img
+											src={$bookmark.screenshot}
+											class="w-full object-scale-down justify-self-center"
+											alt="Screenshot"
+										/>
+									</a>
+								</div>
 							{/if}
 						</div>
+						{#if (($bookmark.main_image && !$bookmark.main_image.endsWith('/')) || $bookmark.main_image_url) && $bookmark.screenshot && !$bookmark.screenshot.endsWith('/')}
+							<div class="flex justify-center w-full py-2 gap-2">
+								<a href="#main-image" class="btn btn-xs">Main image</a>
+								<a href="#screenshot" class="btn btn-xs">Screenshot</a>
+							</div>
+						{/if}
 						<div>
 							<h3 class="text-xl">Tags</h3>
 							<div class="flex flex-wrap gap-2 m-1">

diff --git a/src/lib/stores/show-bookmark.store.ts b/src/lib/stores/show-bookmark.store.ts
@@ -1,4 +1,4 @@
 import type { Bookmark } from '$lib/types/Bookmark.type';
 import { writable } from 'svelte/store';
 
-export const showBookmarkStore = writable<Partial<Bookmark>>({});
+export const showBookmarkStore = writable<Bookmark>();
diff --git a/src/routes/+layout.server.ts b/src/routes/+layout.server.ts
@@ -101,6 +101,7 @@ export const load = (async ({ locals, url }) => {
 				...bookmark,
 				icon: getFileUrl('bookmarks', bookmark.id, bookmark.icon),
 				main_image: getFileUrl('bookmarks', bookmark.id, bookmark.main_image),
+				screenshot: getFileUrl('bookmarks', bookmark.id, bookmark.screenshot),
 				...bookmark.expand
 			}))
 		),