helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-11-07 17:27:20 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Revert "feat(web): avoid duplicate call + small refactor (#1731)" (#1750)

Browse source 
This reverts commit 53fb3a36f7.
This commit is contained in:
Alex 2023-02-13 16:27:15 -06:00 • committed by GitHub
parent 318fba6c97
commit db67093391
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 105 additions and 55 deletions
Download patch file Download diff file Expand all files Collapse all files

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

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