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 1

fix(web): buffering for video player (#520)

Browse source 
* fix(web): buffering for video player

* chore(): missing file -_-

* refactor(web): using URL builder

* chore(): add semicolon

* fix(web): video player

* remove deadcode

Co-authored-by: Alex <alex.tran1502@gmail.com>
This commit is contained in:
Thanh Pham 2022-08-24 10:21:41 +07:00 • committed by GitHub
parent 3b55cdc0be
commit fb0fa742f5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 67 additions and 95 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -3,7 +3,7 @@
import { createEventDispatcher, onMount } from 'svelte';
import LoadingSpinner from '../shared-components/loading-spinner.svelte';
import { api, AssetResponseDto } from '@api';
import { api, AssetResponseDto, getFileUrl } from '@api';
export let assetId: string;
@ -13,48 +13,32 @@
let videoPlayerNode: HTMLVideoElement;
let isVideoLoading = true;
let videoUrl: string;
onMount(async () => {
const { data: assetInfo } = await api.assetApi.getAssetById(assetId);
asset = assetInfo;
await loadVideoData(assetInfo);
await loadVideoData();
asset = assetInfo;
});
const loadVideoData = async () => {
const loadVideoData = async (assetInfo: AssetResponseDto) => {
isVideoLoading = true;
try {
const { data } = await api.assetApi.serveFile(
asset.deviceAssetId,
asset.deviceId,
false,
true,
{
responseType: 'blob'
}
);
videoUrl = getFileUrl(assetInfo.deviceAssetId, assetInfo.deviceId, false, true);
if (!(data instanceof Blob)) {
return;
}
return assetInfo;
};
const videoData = URL.createObjectURL(data);
videoPlayerNode.src = videoData;
const handleCanPlay = (ev: Event) => {
const playerNode = ev.target as HTMLVideoElement;
videoPlayerNode.load();
playerNode.muted = true;
playerNode.play();
playerNode.muted = false;
videoPlayerNode.oncanplay = () => {
videoPlayerNode.muted = true;
videoPlayerNode.play();
videoPlayerNode.muted = false;
isVideoLoading = false;
};
return videoData;
} catch (e) {}
isVideoLoading = false;
};
</script>
@ -63,7 +47,13 @@
class="flex place-items-center place-content-center h-full select-none"
>
{#if asset}
<video controls class="h-full object-contain" bind:this={videoPlayerNode}>
<video
controls
class="h-full object-contain"
on:canplay={handleCanPlay}
bind:this={videoPlayerNode}
>
<source src={videoUrl} type="video/mp4" />
<track kind="captions" />
</video>