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

feat(web): remove duplicate asset calls (#1764)

Browse Source 
* feat(web): remove duplicate asset calls

* use source element instead of video.src
This commit is contained in:
Michel Heusschen 2023-02-15 18:56:19 +01:00 committed by GitHub
parent 1361f18964
commit e1c520b9e7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 31 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -304,7 +304,7 @@
on:onVideoEnded={() => (shouldPlayMotionPhoto = false)} on:onVideoEnded={() => (shouldPlayMotionPhoto = false)}
/> />
{:else} {:else}
<PhotoViewer {publicSharedKey} assetId={asset.id} on:close={closeViewer} /> <PhotoViewer {publicSharedKey} {asset} on:close={closeViewer} />
{/if} {/if}
{:else} {:else}
<VideoViewer {publicSharedKey} assetId={asset.id} on:close={closeViewer} /> <VideoViewer {publicSharedKey} assetId={asset.id} on:close={closeViewer} />

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

@ -10,22 +10,14 @@
NotificationType NotificationType
} from '../shared-components/notification/notification'; } from '../shared-components/notification/notification';
export let assetId: string; export let asset: AssetResponseDto;
export let publicSharedKey = ''; export let publicSharedKey = '';
let assetInfo: AssetResponseDto;
let assetData: string; let assetData: string;
let copyImageToClipboard: (src: string) => Promise<Blob>; let copyImageToClipboard: (src: string) => Promise<Blob>;
onMount(async () => { onMount(async () => {
const { data } = await api.assetApi.getAssetById(assetId, {
params: {
key: publicSharedKey
}
});
assetInfo = data;
//Import hack :( see https://github.com/vadimkorr/svelte-carousel/issues/27#issuecomment-851022295 //Import hack :( see https://github.com/vadimkorr/svelte-carousel/issues/27#issuecomment-851022295
const module = await import('copy-image-clipboard'); const module = await import('copy-image-clipboard');
copyImageToClipboard = module.copyImageToClipboard; copyImageToClipboard = module.copyImageToClipboard;
@ -33,7 +25,7 @@
const loadAssetData = async () => { const loadAssetData = async () => {
try { try {
const { data } = await api.assetApi.serveFile(assetInfo.id, false, true, { const { data } = await api.assetApi.serveFile(asset.id, false, true, {
params: { params: {
key: publicSharedKey key: publicSharedKey
}, },
@ -75,18 +67,15 @@
transition:fade={{ duration: 150 }} transition:fade={{ duration: 150 }}
class="flex place-items-center place-content-center h-full select-none" class="flex place-items-center place-content-center h-full select-none"
> >
{#if assetInfo} {#await loadAssetData()}
{#await loadAssetData()} <LoadingSpinner />
<LoadingSpinner /> {:then assetData}
{:then assetData} <img
<img transition:fade={{ duration: 150 }}
transition:fade={{ duration: 150 }} src={assetData}
src={assetData} alt={asset.id}
alt={assetId} class="object-contain h-full transition-all"
class="object-contain h-full transition-all" draggable="false"
loading="lazy" />
draggable="false" {/await}
/>
{/await}
{/if}
</div> </div>

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

@ -1,40 +1,17 @@
<script lang="ts"> <script lang="ts">
import { fade } from 'svelte/transition'; import { fade } from 'svelte/transition';
import { createEventDispatcher } from 'svelte';
import { createEventDispatcher, onMount } from 'svelte';
import LoadingSpinner from '../shared-components/loading-spinner.svelte'; import LoadingSpinner from '../shared-components/loading-spinner.svelte';
import { api, AssetResponseDto, getFileUrl } from '@api'; import { getFileUrl } from '@api';
export let assetId: string; export let assetId: string;
export let publicSharedKey = ''; export let publicSharedKey = '';
let asset: AssetResponseDto;
let isVideoLoading = true; let isVideoLoading = true;
let videoUrl: string;
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
onMount(async () => { const handleCanPlay = (ev: Event & { currentTarget: HTMLVideoElement }) => {
const { data: assetInfo } = await api.assetApi.getAssetById(assetId, { const playerNode = ev.currentTarget;
params: {
key: publicSharedKey
}
});
await loadVideoData(assetInfo);
asset = assetInfo;
});
const loadVideoData = async (assetInfo: AssetResponseDto) => {
isVideoLoading = true;
videoUrl = getFileUrl(assetInfo.id, false, true, publicSharedKey);
return assetInfo;
};
const handleCanPlay = (ev: Event) => {
const playerNode = ev.target as HTMLVideoElement;
playerNode.muted = true; playerNode.muted = true;
playerNode.play(); playerNode.play();
@ -48,21 +25,19 @@
transition:fade={{ duration: 150 }} transition:fade={{ duration: 150 }}
class="flex place-items-center place-content-center h-full select-none" class="flex place-items-center place-content-center h-full select-none"
> >
{#if asset} <video
<video controls
controls class="h-full object-contain"
class="h-full object-contain" on:canplay={handleCanPlay}
on:canplay={handleCanPlay} on:ended={() => dispatch('onVideoEnded')}
on:ended={() => dispatch('onVideoEnded')} >
> <source src={getFileUrl(assetId, false, true, publicSharedKey)} type="video/mp4" />
<source src={videoUrl} type="video/mp4" /> <track kind="captions" />
<track kind="captions" /> </video>
</video>
{#if isVideoLoading} {#if isVideoLoading}
<div class="absolute flex place-items-center place-content-center"> <div class="absolute flex place-items-center place-content-center">
<LoadingSpinner /> <LoadingSpinner />
</div> </div>
{/if}
{/if} {/if}
</div> </div>