Cutlery/immich
1
0
Fork 1
mirror of https://github.com/immich-app/immich.git synced 2025-06-04 22:24:26 -04:00
Code Issues Packages Projects Releases Wiki Activity

Fixed navigating with keyboard skip assets (#531)

Browse Source 
* Cleaned up event listner
This commit is contained in:
Alex 2022-08-24 22:18:28 -07:00 committed by GitHub
parent bf2760ffef
commit e344503834
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 162 additions and 162 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
web/src/lib/components/asset-viewer/asset-viewer.svelte
View File

@ -1,5 +1,5 @@
<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';
@ -9,20 +9,20 @@
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 halfLeftHover = false;
let halfRightHover = false; let halfRightHover = false;
let isShowDetail = false; let isShowDetail = false;
onMount(() => { onMount(() => {
if (browser) {
document.addEventListener('keydown', (keyInfo) => handleKeyboardPress(keyInfo.key)); document.addEventListener('keydown', (keyInfo) => handleKeyboardPress(keyInfo.key));
} });
onDestroy(() => {
document.removeEventListener('keydown', (e) => {});
}); });
const handleKeyboardPress = (key: string) => { const handleKeyboardPress = (key: string) => {
@ -74,7 +74,7 @@
$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,
@ -150,16 +150,16 @@
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>
@ -182,7 +182,7 @@
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>
@ -193,7 +193,7 @@
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>