#13: Gallery view: details widget

package.json

@@ -14,30 +14,31 @@
 	},
 	"type": "module",
 	"dependencies": {
-		"@sveltejs/adapter-vercel": "^5.1.0",
-		"@tauri-apps/api": "^1.5.3",
-		"bits-ui": "^0.16.0",
-		"clsx": "^2.1.0",
-		"lucide-svelte": "^0.316.0",
-		"tailwind-merge": "^2.2.1",
-		"tailwind-variants": "^0.1.20",
-		"@tauri-apps/cli": "^1.5.11",
 		"@fortawesome/free-regular-svg-icons": "^6.5.1",
 		"@fortawesome/free-solid-svg-icons": "^6.5.1",
 		"@sveltejs/adapter-auto": "^3.0.0",
 		"@sveltejs/adapter-static": "^3.0.1",
+		"@sveltejs/adapter-vercel": "^5.1.0",
 		"@sveltejs/kit": "^2.0.0",
 		"@sveltejs/vite-plugin-svelte": "^3.0.0",
+		"@tauri-apps/api": "^1.5.3",
+		"@tauri-apps/cli": "^1.5.11",
 		"autoprefixer": "^10.4.17",
+		"bits-ui": "^0.16.0",
+		"clsx": "^2.1.0",
 		"dayjs": "^1.11.10",
+		"exifreader": "^4.23.3",
+		"lucide-svelte": "^0.316.0",
 		"postcss": "^8.4.33",
 		"prettier": "^3.1.1",
 		"prettier-plugin-svelte": "^3.1.2",
 		"prettier-plugin-tailwindcss": "^0.5.13",
-		"svelte": "^4.2.7",
+		"svelte": "^4.2.12",
 		"svelte-check": "^3.6.0",
 		"svelte-fa": "^4.0.2",
 		"svelte-sonner": "^0.3.19",
+		"tailwind-merge": "^2.2.1",
+		"tailwind-variants": "^0.1.20",
 		"tailwindcss": "^3.4.1",
 		"tslib": "^2.4.1",
 		"typescript": "^5.0.0",

src/lib/components/gallery/DetailField.svelte

@@ -3,7 +3,7 @@
 	import Fa from 'svelte-fa'
 
 	export let text: string = ''
-	export let value: string | number = ''
+	export let value: string | number | undefined = ''
 	export let icon: IconDefinition | null = null
 </script>
 
@@ -15,6 +15,6 @@
 		{text}
 	</p>
 	<p class="font-semibold">
-		{value || ''}
+		{value != undefined || value != null ? value : ''}
 	</p>
 </div>

src/lib/components/gallery/ImageDetails.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { faCalendarAlt, faFileAlt } from '@fortawesome/free-regular-svg-icons'
-	import { faListNumeric, faTag } from '@fortawesome/free-solid-svg-icons'
+	import { faCompress, faListNumeric, faTag } from '@fortawesome/free-solid-svg-icons'
 	import DetailField from '$lib/components/gallery/DetailField.svelte'
 	import dayjs from 'dayjs'
 	import type { ImageType } from '$lib/utils/types'
@@ -19,7 +19,7 @@
 		text="Tag"
 		value={image?.tags.reduce((acc, tag) => acc + tag + ', ', '').slice(0, -2)}
 	/>
-
-	<DetailField icon={faListNumeric} text="Size" value={image?.size} />
+	<DetailField icon={faListNumeric} text="Size" value={image?.resolution} />
 	<DetailField icon={faFileAlt} text="Format" value={image?.type} />
+	<DetailField icon={faCompress} text="EXIF" value={image?.compression} />
 </div>

src/lib/utils/types.ts

@@ -4,6 +4,8 @@ export type ImageType = {
 	tags: string[]
 	name: string
 	size: number
+	resolution: string
+	compression: number | undefined
 	lastModified: string
 	type: string
 	path: string

src/routes/+page.svelte

@@ -12,6 +12,7 @@
 	import { makeid } from '$lib/utils/tools'
 	import { galleryStore } from '$lib/store'
 	import type { ImageType } from '$lib/utils/types'
+	import ExifReader from 'exifreader'
 
 	let imageDropping = false
 	let deleteModal = false
@@ -97,14 +98,17 @@
 					modified_time: string
 					accessed_time: string
 				} = await invoke('get_file_metadata', { filePath: file })
+				const EXIF = await ExifReader.load(convertFileSrc(file), { async: true })
 
 				return {
 					id: makeid(5),
 					src: convertFileSrc(file),
 					name: file,
 					size: metadata.file_size,
-					lastModified: metadata.modified_time,
-					type: metadata.file_type,
+					lastModified: EXIF['ICC Profile Date'].value,
+					type: EXIF['FileType']?.value,
+					compression: EXIF['Compression']?.value,
+					resolution: `${EXIF['Image Width']?.value} x ${EXIF['Image Height']?.value}`,
 					tags: [],
 					path: file
 				} as ImageType
@@ -179,7 +183,7 @@
 				images = $galleryStore.images.filter((img) => {
 					return selectedTags.every((tag) => img.tags.includes(tag))
 				})
-				
+
 				break
 			default:
 				images = $galleryStore.images