mirror of
https://github.com/immich-app/immich
synced 2025-11-07 17:27:20 +00:00
View assets detail and download operation (#198)
* Fixed not displaying default user profile picture * Added buttons to close viewer and micro-interaction for navigating assets left, right * Add additional buttons to the control bar * Display EXIF info * Added map to detail info * Handle user input keyboard * Fixed incorrect file name when downloading multiple files * Implemented download panel
This commit is contained in:
Alex
GitHub
parent
6924aa5eb1
commit
53c3c916a6
19 changed files with 798 additions and 100 deletions
|
|
@ -0,0 +1,22 @@
|
|||
<script lang="ts">
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
|
||||
import ArrowLeft from 'svelte-material-icons/ArrowLeft.svelte';
|
||||
import DotsVertical from 'svelte-material-icons/DotsVertical.svelte';
|
||||
import CloudDownloadOutline from 'svelte-material-icons/CloudDownloadOutline.svelte';
|
||||
import TrashCanOutline from 'svelte-material-icons/TrashCanOutline.svelte';
|
||||
import InformationOutline from 'svelte-material-icons/InformationOutline.svelte';
|
||||
import CircleIconButton from '../shared/circle_icon_button.svelte';
|
||||
const dispatch = createEventDispatcher();
|
||||
</script>
|
||||
|
||||
<div class="h-16 bg-black/5 flex justify-between place-items-center px-3 transition-transform duration-200 z-[9999]">
|
||||
<div>
|
||||
<CircleIconButton logo={ArrowLeft} on:click={() => dispatch('goBack')} />
|
||||
</div>
|
||||
<div class="text-white flex gap-2">
|
||||
<CircleIconButton logo={CloudDownloadOutline} on:click={() => dispatch('download')} />
|
||||
<!-- <CircleIconButton logo={DotsVertical} on:click={() => console.log('Options')} /> -->
|
||||
<CircleIconButton logo={InformationOutline} on:click={() => dispatch('showDetail')} />
|
||||
</div>
|
||||
</div>
|
||||
234
web/src/lib/components/asset-viewer/asset-viewer.svelte
Normal file
234
web/src/lib/components/asset-viewer/asset-viewer.svelte
Normal file
|
|
@ -0,0 +1,234 @@
|
|||
<script lang="ts">
|
||||
import { createEventDispatcher, onDestroy, onMount } from 'svelte';
|
||||
import { fly, slide } from 'svelte/transition';
|
||||
import AsserViewerNavBar from './asser-viewer-nav-bar.svelte';
|
||||
import { flattenAssetGroupByDate } from '$lib/stores/assets';
|
||||
import ChevronRight from 'svelte-material-icons/ChevronRight.svelte';
|
||||
import ChevronLeft from 'svelte-material-icons/ChevronLeft.svelte';
|
||||
import { AssetType, type ImmichAsset, type ImmichExif } from '../../models/immich-asset';
|
||||
import PhotoViewer from './photo-viewer.svelte';
|
||||
import DetailPanel from './detail-panel.svelte';
|
||||
import { session } from '$app/stores';
|
||||
import { serverEndpoint } from '../../constants';
|
||||
import axios from 'axios';
|
||||
import { downloadAssets } from '$lib/stores/download';
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
export let selectedAsset: ImmichAsset;
|
||||
export let selectedIndex: number;
|
||||
|
||||
let viewDeviceId: string;
|
||||
let viewAssetId: string;
|
||||
|
||||
let halfLeftHover = false;
|
||||
let halfRightHover = false;
|
||||
let isShowDetail = false;
|
||||
|
||||
onMount(() => {
|
||||
viewAssetId = selectedAsset.id;
|
||||
viewDeviceId = selectedAsset.deviceId;
|
||||
pushState(viewAssetId);
|
||||
|
||||
document.addEventListener('keydown', (keyInfo) => handleKeyboardPress(keyInfo.key));
|
||||
});
|
||||
|
||||
onDestroy(() => {
|
||||
document.removeEventListener('keydown', (b) => {
|
||||
console.log('destroyed', b);
|
||||
});
|
||||
});
|
||||
|
||||
const handleKeyboardPress = (key: string) => {
|
||||
switch (key) {
|
||||
case 'Escape':
|
||||
closeViewer();
|
||||
return;
|
||||
case 'i':
|
||||
isShowDetail = !isShowDetail;
|
||||
return;
|
||||
case 'ArrowLeft':
|
||||
navigateAssetBackward();
|
||||
return;
|
||||
case 'ArrowRight':
|
||||
navigateAssetForward();
|
||||
return;
|
||||
}
|
||||
};
|
||||
|
||||
const closeViewer = () => {
|
||||
history.pushState(null, '', `/photos`);
|
||||
dispatch('close');
|
||||
};
|
||||
|
||||
const navigateAssetForward = () => {
|
||||
const nextAsset = $flattenAssetGroupByDate[selectedIndex + 1];
|
||||
viewDeviceId = nextAsset.deviceId;
|
||||
viewAssetId = nextAsset.id;
|
||||
|
||||
selectedIndex = selectedIndex + 1;
|
||||
selectedAsset = $flattenAssetGroupByDate[selectedIndex];
|
||||
pushState(viewAssetId);
|
||||
};
|
||||
|
||||
const navigateAssetBackward = () => {
|
||||
const lastAsset = $flattenAssetGroupByDate[selectedIndex - 1];
|
||||
viewDeviceId = lastAsset.deviceId;
|
||||
viewAssetId = lastAsset.id;
|
||||
|
||||
selectedIndex = selectedIndex - 1;
|
||||
selectedAsset = $flattenAssetGroupByDate[selectedIndex];
|
||||
pushState(viewAssetId);
|
||||
};
|
||||
|
||||
const pushState = (assetId: string) => {
|
||||
// add a URL to the browser's history
|
||||
// changes the current URL in the address bar but doesn't perform any SvelteKit navigation
|
||||
history.pushState(null, '', `/photos/${assetId}`);
|
||||
};
|
||||
|
||||
const showDetailInfoHandler = () => {
|
||||
isShowDetail = !isShowDetail;
|
||||
};
|
||||
|
||||
const downloadFile = async () => {
|
||||
if ($session.user) {
|
||||
const url = `${serverEndpoint}/asset/download?aid=${selectedAsset.deviceAssetId}&did=${selectedAsset.deviceId}&isThumb=false`;
|
||||
|
||||
try {
|
||||
const imageName = selectedAsset.exifInfo?.imageName ? selectedAsset.exifInfo?.imageName : selectedAsset.id;
|
||||
const imageExtension = selectedAsset.originalPath.split('.')[1];
|
||||
const imageFileName = imageName + '.' + imageExtension;
|
||||
|
||||
// If assets is already download -> return;
|
||||
if ($downloadAssets[imageFileName]) {
|
||||
return;
|
||||
}
|
||||
$downloadAssets[imageFileName] = 0;
|
||||
|
||||
const res = await axios.get(url, {
|
||||
responseType: 'blob',
|
||||
headers: {
|
||||
Authorization: 'Bearer ' + $session.user.accessToken,
|
||||
},
|
||||
onDownloadProgress: (progressEvent) => {
|
||||
if (progressEvent.lengthComputable) {
|
||||
const total = progressEvent.total;
|
||||
const current = progressEvent.loaded;
|
||||
let percentCompleted = Math.floor((current / total) * 100);
|
||||
|
||||
$downloadAssets[imageFileName] = percentCompleted;
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
if (res.status === 200) {
|
||||
const fileUrl = URL.createObjectURL(new Blob([res.data]));
|
||||
const anchor = document.createElement('a');
|
||||
anchor.href = fileUrl;
|
||||
anchor.download = imageFileName;
|
||||
|
||||
document.body.appendChild(anchor);
|
||||
anchor.click();
|
||||
document.body.removeChild(anchor);
|
||||
|
||||
URL.revokeObjectURL(fileUrl);
|
||||
|
||||
// Remove item from download list
|
||||
setTimeout(() => {
|
||||
const copy = $downloadAssets;
|
||||
delete copy[imageFileName];
|
||||
$downloadAssets = copy;
|
||||
}, 2000);
|
||||
}
|
||||
} catch (e) {
|
||||
console.log('Error downloading file ', e);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<section
|
||||
id="immich-asset-viewer"
|
||||
class="absolute h-screen w-screen top-0 overflow-y-hidden bg-black z-[999] grid grid-rows-[64px_1fr] grid-cols-4 "
|
||||
>
|
||||
<div class="col-start-1 col-span-4 row-start-1 row-span-1 z-[1000] transition-transform">
|
||||
<AsserViewerNavBar on:goBack={closeViewer} on:showDetail={showDetailInfoHandler} on:download={downloadFile} />
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="row-start-2 row-span-end col-start-1- col-span-full z-[1000] flex place-items-center hover:cursor-pointer w-3/4"
|
||||
on:mouseenter={() => {
|
||||
halfLeftHover = true;
|
||||
halfRightHover = false;
|
||||
}}
|
||||
on:mouseleave={() => {
|
||||
halfLeftHover = false;
|
||||
}}
|
||||
on:click={navigateAssetBackward}
|
||||
>
|
||||
<button
|
||||
class="rounded-full p-3 hover:bg-gray-500 hover:text-gray-700 text-gray-500 mx-4"
|
||||
class:navigation-button-hover={halfLeftHover}
|
||||
on:click={navigateAssetBackward}
|
||||
>
|
||||
<ChevronLeft size="36" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="row-start-1 row-span-full col-start-1 col-span-4">
|
||||
{#key selectedIndex}
|
||||
{#if viewAssetId && viewDeviceId}
|
||||
{#if selectedAsset.type == AssetType.IMAGE}
|
||||
<PhotoViewer assetId={viewAssetId} deviceId={viewDeviceId} on:close={closeViewer} />
|
||||
{:else}
|
||||
<div
|
||||
class="w-full h-full bg-immich-primary/10 flex flex-col place-items-center place-content-center "
|
||||
on:click={closeViewer}
|
||||
>
|
||||
<h1 class="animate-pulse font-bold text-4xl">Video viewer is under construction</h1>
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
{/key}
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="row-start-2 row-span-full col-start-3 col-span-2 z-[1000] flex justify-end place-items-center hover:cursor-pointer w-3/4 justify-self-end"
|
||||
on:click={navigateAssetForward}
|
||||
on:mouseenter={() => {
|
||||
halfLeftHover = false;
|
||||
halfRightHover = true;
|
||||
}}
|
||||
on:mouseleave={() => {
|
||||
halfRightHover = false;
|
||||
}}
|
||||
>
|
||||
<button
|
||||
class="rounded-full p-3 hover:bg-gray-500 hover:text-gray-700 text-gray-500 mx-4"
|
||||
class:navigation-button-hover={halfRightHover}
|
||||
on:click={navigateAssetForward}
|
||||
>
|
||||
<ChevronRight size="36" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{#if isShowDetail}
|
||||
<div
|
||||
transition:fly={{ duration: 150 }}
|
||||
id="detail-panel"
|
||||
class="bg-immich-bg w-[360px] row-span-full transition-all "
|
||||
translate="yes"
|
||||
>
|
||||
<DetailPanel asset={selectedAsset} on:close={() => (isShowDetail = false)} />
|
||||
</div>
|
||||
{/if}
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.navigation-button-hover {
|
||||
background-color: rgb(107 114 128 / var(--tw-bg-opacity));
|
||||
color: rgb(55 65 81 / var(--tw-text-opacity));
|
||||
transition: all 150ms;
|
||||
}
|
||||
</style>
|
||||
164
web/src/lib/components/asset-viewer/detail-panel.svelte
Normal file
164
web/src/lib/components/asset-viewer/detail-panel.svelte
Normal file
|
|
@ -0,0 +1,164 @@
|
|||
<script lang="ts">
|
||||
import Close from 'svelte-material-icons/Close.svelte';
|
||||
import Calendar from 'svelte-material-icons/Calendar.svelte';
|
||||
import ImageOutline from 'svelte-material-icons/ImageOutline.svelte';
|
||||
import CameraIris from 'svelte-material-icons/CameraIris.svelte';
|
||||
import MapMarkerOutline from 'svelte-material-icons/MapMarkerOutline.svelte';
|
||||
import moment from 'moment';
|
||||
import type { ImmichAsset } from '../../models/immich-asset';
|
||||
import { createEventDispatcher, onMount } from 'svelte';
|
||||
import { browser } from '$app/env';
|
||||
|
||||
// Map Property
|
||||
let map: any;
|
||||
let leaflet: any;
|
||||
let marker: any;
|
||||
|
||||
export let asset: ImmichAsset;
|
||||
$: {
|
||||
// Redraw map
|
||||
if (map && leaflet) {
|
||||
map.removeLayer(marker);
|
||||
map.setView([asset.exifInfo?.latitude || 0, asset.exifInfo?.longitude || 0], 17);
|
||||
marker = leaflet.marker([asset.exifInfo?.latitude || 0, asset.exifInfo?.longitude || 0]);
|
||||
map.addLayer(marker);
|
||||
}
|
||||
}
|
||||
|
||||
onMount(async () => {
|
||||
if (browser) {
|
||||
// @ts-ignore
|
||||
leaflet = await import('leaflet');
|
||||
map = leaflet.map('map').setView([asset.exifInfo?.latitude || 0, asset.exifInfo?.longitude || 0], 17);
|
||||
|
||||
leaflet
|
||||
.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
|
||||
})
|
||||
.addTo(map);
|
||||
|
||||
marker = leaflet.marker([asset.exifInfo?.latitude || 0, asset.exifInfo?.longitude || 0]);
|
||||
|
||||
map.addLayer(marker);
|
||||
}
|
||||
});
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
const getHumanReadableString = (sizeInByte: number) => {
|
||||
const pepibyte = 1.126 * Math.pow(10, 15);
|
||||
const tebibyte = 1.1 * Math.pow(10, 12);
|
||||
const gibibyte = 1.074 * Math.pow(10, 9);
|
||||
const mebibyte = 1.049 * Math.pow(10, 6);
|
||||
const kibibyte = 1024;
|
||||
// Pebibyte
|
||||
if (sizeInByte >= pepibyte) {
|
||||
// Pe
|
||||
return `${(sizeInByte / pepibyte).toFixed(1)}PB`;
|
||||
} else if (tebibyte <= sizeInByte && sizeInByte < pepibyte) {
|
||||
// Te
|
||||
return `${(sizeInByte / tebibyte).toFixed(1)}TB`;
|
||||
} else if (gibibyte <= sizeInByte && sizeInByte < tebibyte) {
|
||||
// Gi
|
||||
return `${(sizeInByte / gibibyte).toFixed(1)}GB`;
|
||||
} else if (mebibyte <= sizeInByte && sizeInByte < gibibyte) {
|
||||
// Mega
|
||||
return `${(sizeInByte / mebibyte).toFixed(1)}MB`;
|
||||
} else if (kibibyte <= sizeInByte && sizeInByte < mebibyte) {
|
||||
// Kibi
|
||||
return `${(sizeInByte / kibibyte).toFixed(1)}KB`;
|
||||
} else {
|
||||
return `${sizeInByte}B`;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<section class="p-2">
|
||||
<div class="flex place-items-center gap-2">
|
||||
<button
|
||||
class="rounded-full p-3 flex place-items-center place-content-center hover:bg-gray-200 transition-colors"
|
||||
on:click={() => dispatch('close')}
|
||||
>
|
||||
<Close size="24" color="#232323" />
|
||||
</button>
|
||||
|
||||
<p class="text-black text-lg">Info</p>
|
||||
</div>
|
||||
|
||||
<div class="px-4 py-4">
|
||||
<p class="text-sm pb-4">DETAILS</p>
|
||||
|
||||
{#if asset.exifInfo?.dateTimeOriginal}
|
||||
<div class="flex gap-4 py-4">
|
||||
<div>
|
||||
<Calendar size="24" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p>{moment(asset.exifInfo.dateTimeOriginal).format('MMM DD')}</p>
|
||||
<div class="flex gap-2 text-sm">
|
||||
<p>
|
||||
{moment(
|
||||
asset.exifInfo.dateTimeOriginal
|
||||
.toString()
|
||||
.slice(0, asset.exifInfo.dateTimeOriginal.toString().length - 1),
|
||||
).format('ddd, hh:mm A')}
|
||||
</p>
|
||||
<p>GMT{moment(asset.exifInfo.dateTimeOriginal).format('Z')}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>{/if}
|
||||
|
||||
{#if asset.exifInfo?.fileSizeInByte}
|
||||
<div class="flex gap-4 py-4">
|
||||
<div><ImageOutline size="24" /></div>
|
||||
|
||||
<div>
|
||||
<p>{`${asset.exifInfo.imageName}.${asset.originalPath.split('.')[1]}` || ''}</p>
|
||||
<div class="flex text-sm gap-2">
|
||||
<p>{((asset.exifInfo.exifImageHeight * asset.exifInfo.exifImageWidth) / 1_000_000).toFixed(0)}MP</p>
|
||||
<p>{asset.exifInfo.exifImageHeight} x {asset.exifInfo.exifImageWidth}</p>
|
||||
<p>{getHumanReadableString(asset.exifInfo.fileSizeInByte)}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if asset.exifInfo?.fNumber}
|
||||
<div class="flex gap-4 py-4">
|
||||
<div><CameraIris size="24" /></div>
|
||||
|
||||
<div>
|
||||
<p>{asset.exifInfo.make || ''} {asset.exifInfo.model || ''}</p>
|
||||
<div class="flex text-sm gap-2">
|
||||
<p>{`f/${asset.exifInfo.fNumber}` || ''}</p>
|
||||
<p>{`1/${1 / asset.exifInfo.exposureTime}` || ''}</p>
|
||||
<p>{`${asset.exifInfo.focalLength}mm` || ''}</p>
|
||||
<p>{`ISO${asset.exifInfo.iso}` || ''}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if asset.exifInfo?.city}
|
||||
<div class="flex gap-4 py-4">
|
||||
<div><MapMarkerOutline size="24" /></div>
|
||||
|
||||
<div>
|
||||
<p>{asset.exifInfo.city}</p>
|
||||
<div class="flex text-sm gap-2">
|
||||
<p>{asset.exifInfo.state},</p>
|
||||
<p>{asset.exifInfo.country}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class={`${asset.exifInfo?.latitude ? 'visible' : 'hidden'}`}>
|
||||
<div class="h-[360px] w-full" id="map" />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
@import 'https://unpkg.com/leaflet@1.7.1/dist/leaflet.css';
|
||||
</style>
|
||||
26
web/src/lib/components/asset-viewer/download-panel.svelte
Normal file
26
web/src/lib/components/asset-viewer/download-panel.svelte
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
<script lang="ts">
|
||||
import { downloadAssets, isDownloading } from '$lib/stores/download';
|
||||
import { fly, slide } from 'svelte/transition';
|
||||
</script>
|
||||
|
||||
{#if $isDownloading}
|
||||
<div
|
||||
transition:fly={{ x: -100, duration: 350 }}
|
||||
class="w-[315px] max-h-[270px] bg-immich-bg border rounded-2xl shadow-sm absolute bottom-10 left-2 p-4 z-[10000] text-sm"
|
||||
>
|
||||
<p class="text-gray-500 text-xs mb-2">DOWNLOADING</p>
|
||||
<div class="max-h-[200px] my-2 overflow-y-auto mb-2 flex flex-col text-sm">
|
||||
{#each Object.keys($downloadAssets) as fileName}
|
||||
<div class="mb-2" transition:slide>
|
||||
<p class="font-medium text-xs truncate">■ {fileName}</p>
|
||||
<div class="flex flex-row-reverse place-items-center gap-5">
|
||||
<p><span class="text-immich-primary font-medium">{$downloadAssets[fileName]}</span>/100</p>
|
||||
<div class="w-full bg-gray-200 rounded-full h-[7px] dark:bg-gray-700">
|
||||
<div class="bg-immich-primary h-[7px] rounded-full" style={`width: ${$downloadAssets[fileName]}%`} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
136
web/src/lib/components/asset-viewer/immich-thumbnail.svelte
Normal file
136
web/src/lib/components/asset-viewer/immich-thumbnail.svelte
Normal file
|
|
@ -0,0 +1,136 @@
|
|||
<script lang="ts">
|
||||
import { AssetType, type ImmichAsset } from '../../models/immich-asset';
|
||||
import { session } from '$app/stores';
|
||||
import { createEventDispatcher, onDestroy } from 'svelte';
|
||||
import { fade } from 'svelte/transition';
|
||||
import { serverEndpoint } from '../../constants';
|
||||
import IntersectionObserver from '$lib/components/asset-viewer/intersection-observer.svelte';
|
||||
import CheckCircle from 'svelte-material-icons/CheckCircle.svelte';
|
||||
import PlayCircleOutline from 'svelte-material-icons/PlayCircleOutline.svelte';
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
export let asset: ImmichAsset;
|
||||
export let groupIndex: number;
|
||||
|
||||
let imageContent: string;
|
||||
let mouseOver: boolean = false;
|
||||
$: dispatch('mouseEvent', { isMouseOver: mouseOver, selectedGroupIndex: groupIndex });
|
||||
|
||||
let mouseOverIcon: boolean = false;
|
||||
let videoPlayerNode: HTMLVideoElement;
|
||||
|
||||
const loadImageData = async () => {
|
||||
if ($session.user) {
|
||||
const res = await fetch(serverEndpoint + '/asset/thumbnail/' + asset.id, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
Authorization: 'bearer ' + $session.user.accessToken,
|
||||
},
|
||||
});
|
||||
|
||||
imageContent = URL.createObjectURL(await res.blob());
|
||||
|
||||
return imageContent;
|
||||
}
|
||||
};
|
||||
|
||||
const loadVideoData = async () => {
|
||||
const videoUrl = `/asset/file?aid=${asset.deviceAssetId}&did=${asset.deviceId}`;
|
||||
if ($session.user) {
|
||||
const res = await fetch(serverEndpoint + videoUrl, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
Authorization: 'bearer ' + $session.user.accessToken,
|
||||
},
|
||||
});
|
||||
|
||||
const videoData = URL.createObjectURL(await res.blob());
|
||||
|
||||
videoPlayerNode.src = videoData;
|
||||
videoPlayerNode.load();
|
||||
videoPlayerNode.oncanplay = () => {
|
||||
console.log('Can play video');
|
||||
};
|
||||
|
||||
return videoData;
|
||||
}
|
||||
};
|
||||
|
||||
const parseVideoDuration = (duration: string) => {
|
||||
const timePart = duration.split(':');
|
||||
const hours = timePart[0];
|
||||
const minutes = timePart[1];
|
||||
const seconds = timePart[2];
|
||||
|
||||
if (hours != '0') {
|
||||
return `${hours}:${minutes}`;
|
||||
} else {
|
||||
return `${minutes}:${seconds.split('.')[0]}`;
|
||||
}
|
||||
};
|
||||
|
||||
onDestroy(() => URL.revokeObjectURL(imageContent));
|
||||
|
||||
const getSize = () => {
|
||||
if (asset.exifInfo?.orientation === 'Rotate 90 CW') {
|
||||
return 'w-[176px] h-[235px]';
|
||||
} else if (asset.exifInfo?.orientation === 'Horizontal (normal)') {
|
||||
return 'w-[313px] h-[235px]';
|
||||
} else {
|
||||
return 'w-[235px] h-[235px]';
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<IntersectionObserver once={true} let:intersecting>
|
||||
<div
|
||||
class={`bg-gray-100 relative hover:cursor-pointer ${getSize()}`}
|
||||
on:mouseenter={() => (mouseOver = true)}
|
||||
on:mouseleave={() => (mouseOver = false)}
|
||||
on:click={() => dispatch('viewAsset', { assetId: asset.id, deviceId: asset.deviceId })}
|
||||
>
|
||||
{#if mouseOver}
|
||||
<div
|
||||
in:fade={{ duration: 200 }}
|
||||
class="w-full h-full bg-gradient-to-b from-gray-800/50 via-white/0 to-white/0 absolute p-2"
|
||||
>
|
||||
<div
|
||||
on:mouseenter={() => (mouseOverIcon = true)}
|
||||
on:mouseleave={() => (mouseOverIcon = false)}
|
||||
class="inline-block"
|
||||
>
|
||||
<CheckCircle size="24" color={mouseOverIcon ? 'white' : '#d8dadb'} />
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if asset.type === AssetType.VIDEO}
|
||||
<div class="absolute right-2 top-2 text-white text-xs font-medium flex gap-1 place-items-center">
|
||||
{parseVideoDuration(asset.duration)}
|
||||
<PlayCircleOutline size="24" />
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if intersecting}
|
||||
{#await loadImageData()}
|
||||
<div class={`bg-immich-primary/10 ${getSize()} flex place-items-center place-content-center`}>...</div>
|
||||
{:then imageData}
|
||||
<img
|
||||
src={imageData}
|
||||
alt={asset.id}
|
||||
class={`object-cover ${getSize()} transition-all duration-100 z-0`}
|
||||
loading="lazy"
|
||||
/>
|
||||
{/await}
|
||||
{/if}
|
||||
|
||||
<!-- {#if mouseOver && asset.type === AssetType.VIDEO}
|
||||
<div class="absolute w-full h-full top-0" on:mouseenter={loadVideoData}>
|
||||
<video autoplay class="border-2 h-[200px]" width="250px" bind:this={videoPlayerNode}>
|
||||
<track kind="captions" />
|
||||
</video>
|
||||
</div>
|
||||
{/if} -->
|
||||
</div>
|
||||
</IntersectionObserver>
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
export let once = false;
|
||||
export let top = 0;
|
||||
export let bottom = 0;
|
||||
export let left = 0;
|
||||
export let right = 0;
|
||||
|
||||
let intersecting = false;
|
||||
let container: any;
|
||||
|
||||
onMount(() => {
|
||||
if (typeof IntersectionObserver !== 'undefined') {
|
||||
const rootMargin = `${bottom}px ${left}px ${top}px ${right}px`;
|
||||
|
||||
const observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
intersecting = entries[0].isIntersecting;
|
||||
if (intersecting && once) {
|
||||
observer.unobserve(container);
|
||||
}
|
||||
},
|
||||
{
|
||||
rootMargin,
|
||||
},
|
||||
);
|
||||
|
||||
observer.observe(container);
|
||||
return () => observer.unobserve(container);
|
||||
}
|
||||
|
||||
// The following is a fallback for older browsers
|
||||
function handler() {
|
||||
const bcr = container.getBoundingClientRect();
|
||||
|
||||
intersecting =
|
||||
bcr.bottom + bottom > 0 &&
|
||||
bcr.right + right > 0 &&
|
||||
bcr.top - top < window.innerHeight &&
|
||||
bcr.left - left < window.innerWidth;
|
||||
|
||||
if (intersecting && once) {
|
||||
window.removeEventListener('scroll', handler);
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('scroll', handler);
|
||||
return () => window.removeEventListener('scroll', handler);
|
||||
});
|
||||
</script>
|
||||
|
||||
<div bind:this={container}>
|
||||
<slot {intersecting} />
|
||||
</div>
|
||||
59
web/src/lib/components/asset-viewer/photo-viewer.svelte
Normal file
59
web/src/lib/components/asset-viewer/photo-viewer.svelte
Normal file
|
|
@ -0,0 +1,59 @@
|
|||
<script lang="ts">
|
||||
import { session } from '$app/stores';
|
||||
import { serverEndpoint } from '$lib/constants';
|
||||
import { fade } from 'svelte/transition';
|
||||
|
||||
import type { ImmichAsset, ImmichExif } from '$lib/models/immich-asset';
|
||||
import { createEventDispatcher, onMount } from 'svelte';
|
||||
import LoadingSpinner from '../shared/loading-spinner.svelte';
|
||||
|
||||
export let assetId: string;
|
||||
export let deviceId: string;
|
||||
|
||||
let assetInfo: ImmichAsset;
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
onMount(async () => {
|
||||
if ($session.user) {
|
||||
const res = await fetch(serverEndpoint + '/asset/assetById/' + assetId, {
|
||||
headers: {
|
||||
Authorization: 'bearer ' + $session.user.accessToken,
|
||||
},
|
||||
});
|
||||
assetInfo = await res.json();
|
||||
}
|
||||
});
|
||||
|
||||
const loadAssetData = async () => {
|
||||
const assetUrl = `/asset/file?aid=${assetInfo.deviceAssetId}&did=${deviceId}&isWeb=true`;
|
||||
if ($session.user) {
|
||||
const res = await fetch(serverEndpoint + assetUrl, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
Authorization: 'bearer ' + $session.user.accessToken,
|
||||
},
|
||||
});
|
||||
|
||||
const assetData = URL.createObjectURL(await res.blob());
|
||||
|
||||
return assetData;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<div transition:fade={{ duration: 150 }} class="flex place-items-center place-content-center h-full select-none">
|
||||
{#if assetInfo}
|
||||
{#await loadAssetData()}
|
||||
<LoadingSpinner />
|
||||
{:then assetData}
|
||||
<img
|
||||
transition:fade={{ duration: 150 }}
|
||||
src={assetData}
|
||||
alt={assetId}
|
||||
class="object-contain h-full transition-all"
|
||||
loading="lazy"
|
||||
/>
|
||||
{/await}
|
||||
{/if}
|
||||
</div>
|
||||
Loading…
Add table
Add a link
Reference in a new issue