KevinMidboe/immich
1
0
Fork 0
mirror of https://github.com/KevinMidboe/immich.git synced 2025-10-29 17:40:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

View assets detail and download operation (#198)

Browse Source 
* 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
2022-06-03 11:04:30 -05:00
committed by GitHub
parent 6924aa5eb1
commit 53c3c916a6
19 changed files with 798 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
web/src/routes/photos/index.svelte
View File

@@ -27,20 +27,18 @@
import NavigationBar from '../../lib/components/shared/navigation-bar.svelte';
import SideBarButton from '$lib/components/shared/side-bar-button.svelte';
import CheckCircle from 'svelte-material-icons/CheckCircle.svelte';
import ChevronRight from 'svelte-material-icons/ChevronRight.svelte';
import ChevronLeft from 'svelte-material-icons/ChevronLeft.svelte';
import ImageOutline from 'svelte-material-icons/ImageOutline.svelte';
import { AppSideBarSelection } from '$lib/models/admin-sidebar-selection';
import { onMount } from 'svelte';
import { fade, fly } from 'svelte/transition';
import { fly } from 'svelte/transition';
import { session } from '$app/stores';
import { assetsGroupByDate, flattenAssetGroupByDate } from '$lib/stores/assets';
import ImmichThumbnail from '../../lib/components/photos/immich-thumbnail.svelte';
import ImmichThumbnail from '../../lib/components/asset-viewer/immich-thumbnail.svelte';
import moment from 'moment';
import PhotoViewer from '../../lib/components/photos/photo_viewer.svelte';
import type { ImmichAsset } from '../../lib/models/immich-asset';
import { AssetType } from '../../lib/models/immich-asset';
import LoadingSpinner from '../../lib/components/shared/loading-spinner.svelte';
import AssetViewer from '../../lib/components/asset-viewer/asset-viewer.svelte';
import DownloadPanel from '../../lib/components/asset-viewer/download-panel.svelte';
export let user: ImmichUser;
let selectedAction: AppSideBarSelection;
@@ -52,8 +50,6 @@
}
let isShowAsset = false;
let viewDeviceId: string = '';
let viewAssetId: string = '';
let currentViewAssetIndex = 0;
let currentSelectedAsset: ImmichAsset;
@@ -78,30 +74,10 @@
const viewAssetHandler = (event: CustomEvent) => {
const { assetId, deviceId }: { assetId: string; deviceId: string } = event.detail;
viewDeviceId = deviceId;
viewAssetId = assetId;
currentViewAssetIndex = $flattenAssetGroupByDate.findIndex((a) => a.id == assetId);
currentSelectedAsset = $flattenAssetGroupByDate[currentViewAssetIndex];
isShowAsset = true;
};
const navigateAssetForward = () => {
const nextAsset = $flattenAssetGroupByDate[currentViewAssetIndex + 1];
viewDeviceId = nextAsset.deviceId;
viewAssetId = nextAsset.id;
currentViewAssetIndex = currentViewAssetIndex + 1;
currentSelectedAsset = $flattenAssetGroupByDate[currentViewAssetIndex];
};
const navigateAssetBackward = () => {
const lastAsset = $flattenAssetGroupByDate[currentViewAssetIndex - 1];
viewDeviceId = lastAsset.deviceId;
viewAssetId = lastAsset.id;
currentViewAssetIndex = currentViewAssetIndex - 1;
currentSelectedAsset = $flattenAssetGroupByDate[currentViewAssetIndex];
// pushState(assetId);
};
</script>
@@ -137,7 +113,7 @@
on:mouseleave={() => (isMouseOverGroup = false)}
>
<!-- Date group title -->
<p class="font-medium text-sm text-immich-primary mb-2 flex place-items-center h-6">
<p class="font-medium text-sm text-black mb-2 flex place-items-center h-6">
{#if selectedGroupThumbnail === groupIndex && isMouseOverGroup}
<div
in:fly={{ x: -24, duration: 200, opacity: 0.5 }}
@@ -152,7 +128,7 @@
</p>
<!-- Image grid -->
<div class="flex flex-wrap gap-2">
<div class="flex flex-wrap gap-1">
{#each assetsInDateGroup as asset}
<ImmichThumbnail
{asset}
@@ -171,34 +147,9 @@
<!-- Overlay Asset Viewer -->
{#if isShowAsset}
<section
class="absolute w-screen h-screen top-0 overflow-y-hidden bg-black z-[9999] flex justify-between place-items-center"
>
<button
class="rounded-full p-4 hover:bg-gray-500 hover:text-gray-700 text-gray-500 mx-4"
on:click={navigateAssetBackward}
>
<ChevronLeft size="48" />
</button>
{#key currentViewAssetIndex}
{#if currentSelectedAsset.type == AssetType.IMAGE}
<PhotoViewer assetId={viewAssetId} deviceId={viewDeviceId} on:close={() => (isShowAsset = false)} />
{:else}
<div
class="w-full h-full bg-immich-primary/10 flex flex-col place-items-center place-content-center "
on:click={() => (isShowAsset = false)}
>
<h1 class="animate-pulse font-bold text-4xl">Video viewer is under construction</h1>
</div>
{/if}
{/key}
<button
class="rounded-full p-4 hover:bg-gray-500 hover:text-gray-700 bg-black text-gray-500 mx-4"
on:click={navigateAssetForward}
>
<ChevronRight size="48" />
</button>
</section>
<AssetViewer
selectedAsset={currentSelectedAsset}
selectedIndex={currentViewAssetIndex}
on:close={() => (isShowAsset = false)}
/>
{/if}