mirror of
https://github.com/immich-app/immich.git
synced 2025-01-21 00:52:43 -05:00
Fixed navigating with keyboard skip assets (#531)
* Cleaned up event listner
This commit is contained in:
Alex
GitHub
parent
bf2760ffef
commit
e344503834
1 changed files with 162 additions and 162 deletions
|
|
@ -1,207 +1,207 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { createEventDispatcher, onMount } from 'svelte';
|
import { createEventDispatcher, onMount, onDestroy } from 'svelte';
|
||||||
import { fly } from 'svelte/transition';
|
import { fly } from 'svelte/transition';
|
||||||
import AsserViewerNavBar from './asser-viewer-nav-bar.svelte';
|
import AsserViewerNavBar from './asser-viewer-nav-bar.svelte';
|
||||||
import ChevronRight from 'svelte-material-icons/ChevronRight.svelte';
|
import ChevronRight from 'svelte-material-icons/ChevronRight.svelte';
|
||||||
import ChevronLeft from 'svelte-material-icons/ChevronLeft.svelte';
|
import ChevronLeft from 'svelte-material-icons/ChevronLeft.svelte';
|
||||||
import PhotoViewer from './photo-viewer.svelte';
|
import PhotoViewer from './photo-viewer.svelte';
|
||||||
import DetailPanel from './detail-panel.svelte';
|
import DetailPanel from './detail-panel.svelte';
|
||||||
import { downloadAssets } from '$lib/stores/download';
|
import { downloadAssets } from '$lib/stores/download';
|
||||||
import VideoViewer from './video-viewer.svelte';
|
import VideoViewer from './video-viewer.svelte';
|
||||||
import { api, AssetResponseDto, AssetTypeEnum } from '@api';
|
import { api, AssetResponseDto, AssetTypeEnum } from '@api';
|
||||||
import { browser } from '$app/env';
|
|
||||||
|
|
||||||
const dispatch = createEventDispatcher();
|
export let asset: AssetResponseDto;
|
||||||
|
|
||||||
export let asset: AssetResponseDto;
|
const dispatch = createEventDispatcher();
|
||||||
|
let halfLeftHover = false;
|
||||||
|
let halfRightHover = false;
|
||||||
|
let isShowDetail = false;
|
||||||
|
|
||||||
let halfLeftHover = false;
|
onMount(() => {
|
||||||
let halfRightHover = false;
|
document.addEventListener('keydown', (keyInfo) => handleKeyboardPress(keyInfo.key));
|
||||||
let isShowDetail = false;
|
});
|
||||||
|
|
||||||
onMount(() => {
|
onDestroy(() => {
|
||||||
if (browser) {
|
document.removeEventListener('keydown', (e) => {});
|
||||||
document.addEventListener('keydown', (keyInfo) => handleKeyboardPress(keyInfo.key));
|
});
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const handleKeyboardPress = (key: string) => {
|
const handleKeyboardPress = (key: string) => {
|
||||||
switch (key) {
|
switch (key) {
|
||||||
case 'Escape':
|
case 'Escape':
|
||||||
closeViewer();
|
closeViewer();
|
||||||
return;
|
return;
|
||||||
case 'i':
|
case 'i':
|
||||||
isShowDetail = !isShowDetail;
|
isShowDetail = !isShowDetail;
|
||||||
return;
|
return;
|
||||||
case 'ArrowLeft':
|
case 'ArrowLeft':
|
||||||
navigateAssetBackward();
|
navigateAssetBackward();
|
||||||
return;
|
return;
|
||||||
case 'ArrowRight':
|
case 'ArrowRight':
|
||||||
navigateAssetForward();
|
navigateAssetForward();
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const closeViewer = () => {
|
const closeViewer = () => {
|
||||||
dispatch('close');
|
dispatch('close');
|
||||||
};
|
};
|
||||||
|
|
||||||
const navigateAssetForward = (e?: Event) => {
|
const navigateAssetForward = (e?: Event) => {
|
||||||
e?.stopPropagation();
|
e?.stopPropagation();
|
||||||
dispatch('navigate-forward');
|
dispatch('navigate-forward');
|
||||||
};
|
};
|
||||||
|
|
||||||
const navigateAssetBackward = (e?: Event) => {
|
const navigateAssetBackward = (e?: Event) => {
|
||||||
e?.stopPropagation();
|
e?.stopPropagation();
|
||||||
dispatch('navigate-backward');
|
dispatch('navigate-backward');
|
||||||
};
|
};
|
||||||
|
|
||||||
const showDetailInfoHandler = () => {
|
const showDetailInfoHandler = () => {
|
||||||
isShowDetail = !isShowDetail;
|
isShowDetail = !isShowDetail;
|
||||||
};
|
};
|
||||||
|
|
||||||
const downloadFile = async () => {
|
const downloadFile = async () => {
|
||||||
try {
|
try {
|
||||||
console.log(asset.exifInfo);
|
console.log(asset.exifInfo);
|
||||||
const imageName = asset.exifInfo?.imageName ? asset.exifInfo?.imageName : asset.id;
|
const imageName = asset.exifInfo?.imageName ? asset.exifInfo?.imageName : asset.id;
|
||||||
const imageExtension = asset.originalPath.split('.')[1];
|
const imageExtension = asset.originalPath.split('.')[1];
|
||||||
const imageFileName = imageName + '.' + imageExtension;
|
const imageFileName = imageName + '.' + imageExtension;
|
||||||
|
|
||||||
// If assets is already download -> return;
|
// If assets is already download -> return;
|
||||||
if ($downloadAssets[imageFileName]) {
|
if ($downloadAssets[imageFileName]) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
$downloadAssets[imageFileName] = 0;
|
$downloadAssets[imageFileName] = 0;
|
||||||
|
|
||||||
const {data, status} = await api.assetApi.downloadFile(
|
const { data, status } = await api.assetApi.downloadFile(
|
||||||
asset.deviceAssetId,
|
asset.deviceAssetId,
|
||||||
asset.deviceId,
|
asset.deviceId,
|
||||||
false,
|
false,
|
||||||
false,
|
false,
|
||||||
{
|
{
|
||||||
responseType: 'blob',
|
responseType: 'blob',
|
||||||
onDownloadProgress: (progressEvent) => {
|
onDownloadProgress: (progressEvent) => {
|
||||||
if (progressEvent.lengthComputable) {
|
if (progressEvent.lengthComputable) {
|
||||||
const total = progressEvent.total;
|
const total = progressEvent.total;
|
||||||
const current = progressEvent.loaded;
|
const current = progressEvent.loaded;
|
||||||
$downloadAssets[imageFileName] = Math.floor((current / total) * 100);
|
$downloadAssets[imageFileName] = Math.floor((current / total) * 100);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
if (!(data instanceof Blob)) {
|
if (!(data instanceof Blob)) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (status === 200) {
|
if (status === 200) {
|
||||||
const fileUrl = URL.createObjectURL(data);
|
const fileUrl = URL.createObjectURL(data);
|
||||||
const anchor = document.createElement('a');
|
const anchor = document.createElement('a');
|
||||||
anchor.href = fileUrl;
|
anchor.href = fileUrl;
|
||||||
anchor.download = imageFileName;
|
anchor.download = imageFileName;
|
||||||
|
|
||||||
document.body.appendChild(anchor);
|
document.body.appendChild(anchor);
|
||||||
anchor.click();
|
anchor.click();
|
||||||
document.body.removeChild(anchor);
|
document.body.removeChild(anchor);
|
||||||
|
|
||||||
URL.revokeObjectURL(fileUrl);
|
URL.revokeObjectURL(fileUrl);
|
||||||
|
|
||||||
// Remove item from download list
|
// Remove item from download list
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
const copy = $downloadAssets;
|
const copy = $downloadAssets;
|
||||||
delete copy[imageFileName];
|
delete copy[imageFileName];
|
||||||
$downloadAssets = copy;
|
$downloadAssets = copy;
|
||||||
}, 2000);
|
}, 2000);
|
||||||
}
|
}
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.log('Error downloading file ', e);
|
console.log('Error downloading file ', e);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<section
|
<section
|
||||||
id="immich-asset-viewer"
|
id="immich-asset-viewer"
|
||||||
class="fixed h-screen w-screen top-0 overflow-y-hidden bg-black z-[999] grid grid-rows-[64px_1fr] grid-cols-4 "
|
class="fixed 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">
|
<div class="col-start-1 col-span-4 row-start-1 row-span-1 z-[1000] transition-transform">
|
||||||
<AsserViewerNavBar
|
<AsserViewerNavBar
|
||||||
on:goBack={closeViewer}
|
on:goBack={closeViewer}
|
||||||
on:showDetail={showDetailInfoHandler}
|
on:showDetail={showDetailInfoHandler}
|
||||||
on:download={downloadFile}
|
on:download={downloadFile}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
class={`row-start-2 row-span-end col-start-1 col-span-2 flex place-items-center hover:cursor-pointer w-3/4 ${
|
class={`row-start-2 row-span-end col-start-1 col-span-2 flex place-items-center hover:cursor-pointer w-3/4 ${
|
||||||
asset.type === AssetTypeEnum.Video ? '' : 'z-[999]'
|
asset.type === AssetTypeEnum.Video ? '' : 'z-[999]'
|
||||||
}`}
|
}`}
|
||||||
on:mouseenter={() => {
|
on:mouseenter={() => {
|
||||||
halfLeftHover = true;
|
halfLeftHover = true;
|
||||||
halfRightHover = false;
|
halfRightHover = false;
|
||||||
}}
|
}}
|
||||||
on:mouseleave={() => {
|
on:mouseleave={() => {
|
||||||
halfLeftHover = false;
|
halfLeftHover = false;
|
||||||
}}
|
}}
|
||||||
on:click={navigateAssetBackward}
|
on:click={navigateAssetBackward}
|
||||||
>
|
>
|
||||||
<button
|
<button
|
||||||
class="rounded-full p-3 hover:bg-gray-500 hover:text-gray-700 z-[1000] text-gray-500 mx-4"
|
class="rounded-full p-3 hover:bg-gray-500 hover:text-gray-700 z-[1000] text-gray-500 mx-4"
|
||||||
class:navigation-button-hover={halfLeftHover}
|
class:navigation-button-hover={halfLeftHover}
|
||||||
on:click={navigateAssetBackward}
|
on:click={navigateAssetBackward}
|
||||||
>
|
>
|
||||||
<ChevronLeft size="36"/>
|
<ChevronLeft size="36" />
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="row-start-1 row-span-full col-start-1 col-span-4">
|
<div class="row-start-1 row-span-full col-start-1 col-span-4">
|
||||||
{#key asset.id}
|
{#key asset.id}
|
||||||
{#if asset.type === AssetTypeEnum.Image}
|
{#if asset.type === AssetTypeEnum.Image}
|
||||||
<PhotoViewer assetId={asset.id} deviceId={asset.deviceId} on:close={closeViewer}/>
|
<PhotoViewer assetId={asset.id} deviceId={asset.deviceId} on:close={closeViewer} />
|
||||||
{:else}
|
{:else}
|
||||||
<VideoViewer assetId={asset.id} on:close={closeViewer}/>
|
<VideoViewer assetId={asset.id} on:close={closeViewer} />
|
||||||
{/if}
|
{/if}
|
||||||
{/key}
|
{/key}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
class={`row-start-2 row-span-full col-start-3 col-span-2 flex justify-end place-items-center hover:cursor-pointer w-3/4 justify-self-end ${
|
class={`row-start-2 row-span-full col-start-3 col-span-2 flex justify-end place-items-center hover:cursor-pointer w-3/4 justify-self-end ${
|
||||||
asset.type === AssetTypeEnum.Video ? '' : 'z-[500]'
|
asset.type === AssetTypeEnum.Video ? '' : 'z-[500]'
|
||||||
}`}
|
}`}
|
||||||
on:click={navigateAssetForward}
|
on:click={navigateAssetForward}
|
||||||
on:mouseenter={() => {
|
on:mouseenter={() => {
|
||||||
halfLeftHover = false;
|
halfLeftHover = false;
|
||||||
halfRightHover = true;
|
halfRightHover = true;
|
||||||
}}
|
}}
|
||||||
on:mouseleave={() => {
|
on:mouseleave={() => {
|
||||||
halfRightHover = false;
|
halfRightHover = false;
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<button
|
<button
|
||||||
class="rounded-full p-3 hover:bg-gray-500 hover:text-gray-700 text-gray-500 mx-4 z-[1000]"
|
class="rounded-full p-3 hover:bg-gray-500 hover:text-gray-700 text-gray-500 mx-4 z-[1000]"
|
||||||
class:navigation-button-hover={halfRightHover}
|
class:navigation-button-hover={halfRightHover}
|
||||||
on:click={navigateAssetForward}
|
on:click={navigateAssetForward}
|
||||||
>
|
>
|
||||||
<ChevronRight size="36"/>
|
<ChevronRight size="36" />
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{#if isShowDetail}
|
{#if isShowDetail}
|
||||||
<div
|
<div
|
||||||
transition:fly={{ duration: 150 }}
|
transition:fly={{ duration: 150 }}
|
||||||
id="detail-panel"
|
id="detail-panel"
|
||||||
class="bg-immich-bg w-[360px] row-span-full transition-all "
|
class="bg-immich-bg w-[360px] row-span-full transition-all "
|
||||||
translate="yes"
|
translate="yes"
|
||||||
>
|
>
|
||||||
<DetailPanel {asset} on:close={() => (isShowDetail = false)}/>
|
<DetailPanel {asset} on:close={() => (isShowDetail = false)} />
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.navigation-button-hover {
|
.navigation-button-hover {
|
||||||
background-color: rgb(107 114 128 / var(--tw-bg-opacity));
|
background-color: rgb(107 114 128 / var(--tw-bg-opacity));
|
||||||
color: rgb(55 65 81 / var(--tw-text-opacity));
|
color: rgb(55 65 81 / var(--tw-text-opacity));
|
||||||
transition: all 150ms;
|
transition: all 150ms;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue