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

20 video conversion for web view (#200)

Browse source 
* Added job for video conversion every 1 minute

* Handle get video as mp4 on the web

* Auto play video on web on hovered

* Added video player

* Added animation and video duration to thumbnail player

* Fixed issue with video not playing on hover

* Added animation when loading thumbnail
This commit is contained in:
Alex 2022-06-04 18:34:11 -05:00 • committed by GitHub
parent 53c3c916a6
commit ab6909bfbd
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
17 changed files with 371 additions and 50 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -12,10 +12,12 @@
import { serverEndpoint } from '../../constants';
import axios from 'axios';
import { downloadAssets } from '$lib/stores/download';
import VideoViewer from './video-viewer.svelte';
const dispatch = createEventDispatcher();
export let selectedAsset: ImmichAsset;
export let selectedIndex: number;
let viewDeviceId: string;
@ -157,7 +159,9 @@
</div>
<div
class="row-start-2 row-span-end col-start-1- col-span-full z-[1000] 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 ${
selectedAsset.type == 'VIDEO' ? '' : 'z-[999]'
}`}
on:mouseenter={() => {
halfLeftHover = true;
halfRightHover = false;
@ -168,7 +172,7 @@
on:click={navigateAssetBackward}
>
<button
class="rounded-full p-3 hover:bg-gray-500 hover:text-gray-700 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}
on:click={navigateAssetBackward}
>
@ -182,19 +186,16 @@
{#if selectedAsset.type == AssetType.IMAGE}
<PhotoViewer assetId={viewAssetId} deviceId={viewDeviceId} on:close={closeViewer} />
{:else}
<div
class="w-full h-full bg-immich-primary/10 flex flex-col place-items-center place-content-center "
on:click={closeViewer}
>
<h1 class="animate-pulse font-bold text-4xl">Video viewer is under construction</h1>
</div>
<VideoViewer assetId={viewAssetId} on:close={closeViewer} />
{/if}
{/if}
{/key}
</div>
<div
class="row-start-2 row-span-full col-start-3 col-span-2 z-[1000] 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 ${
selectedAsset.type == 'VIDEO' ? '' : 'z-[500]'
}`}
on:click={navigateAssetForward}
on:mouseenter={() => {
halfLeftHover = false;
@ -205,7 +206,7 @@
}}
>
<button
class="rounded-full p-3 hover:bg-gray-500 hover:text-gray-700 text-gray-500 mx-4"
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}
on:click={navigateAssetForward}
>

126
web/src/lib/components/asset-viewer/immich-thumbnail.svelte
View file

@ -2,23 +2,30 @@
import { AssetType, type ImmichAsset } from '../../models/immich-asset';
import { session } from '$app/stores';
import { createEventDispatcher, onDestroy } from 'svelte';
import { fade } from 'svelte/transition';
import { fade, fly, slide } from 'svelte/transition';
import { serverEndpoint } from '../../constants';
import IntersectionObserver from '$lib/components/asset-viewer/intersection-observer.svelte';
import CheckCircle from 'svelte-material-icons/CheckCircle.svelte';
import PlayCircleOutline from 'svelte-material-icons/PlayCircleOutline.svelte';
import PauseCircleOutline from 'svelte-material-icons/PauseCircleOutline.svelte';
import LoadingSpinner from '../shared/loading-spinner.svelte';
const dispatch = createEventDispatcher();
export let asset: ImmichAsset;
export let groupIndex: number;
let imageContent: string;
let imageData: string;
let videoData: string;
let mouseOver: boolean = false;
$: dispatch('mouseEvent', { isMouseOver: mouseOver, selectedGroupIndex: groupIndex });
let mouseOverIcon: boolean = false;
let videoPlayerNode: HTMLVideoElement;
let isThumbnailVideoPlaying = false;
let calculateVideoDurationIntervalHandler: NodeJS.Timer;
let videoProgress = '00:00';
const loadImageData = async () => {
if ($session.user) {
@ -29,34 +36,54 @@
},
});
imageContent = URL.createObjectURL(await res.blob());
imageData = URL.createObjectURL(await res.blob());
return imageContent;
return imageData;
}
};
const loadVideoData = async () => {
const videoUrl = `/asset/file?aid=${asset.deviceAssetId}&did=${asset.deviceId}`;
isThumbnailVideoPlaying = false;
const videoUrl = `/asset/file?aid=${asset.deviceAssetId}&did=${asset.deviceId}&isWeb=true`;
if ($session.user) {
const res = await fetch(serverEndpoint + videoUrl, {
method: 'GET',
headers: {
Authorization: 'bearer ' + $session.user.accessToken,
},
});
try {
const res = await fetch(serverEndpoint + videoUrl, {
method: 'GET',
headers: {
Authorization: 'bearer ' + $session.user.accessToken,
},
});
const videoData = URL.createObjectURL(await res.blob());
videoData = URL.createObjectURL(await res.blob());
videoPlayerNode.src = videoData;
videoPlayerNode.src = videoData;
videoPlayerNode.load();
videoPlayerNode.oncanplay = () => {
console.log('Can play video');
};
videoPlayerNode.load();
return videoData;
videoPlayerNode.oncanplay = () => {
videoPlayerNode.muted = true;
videoPlayerNode.play();
isThumbnailVideoPlaying = true;
calculateVideoDurationIntervalHandler = setInterval(() => {
videoProgress = getVideoDurationInString(Math.round(videoPlayerNode.currentTime));
}, 1000);
};
return videoData;
} catch (e) {}
}
};
const getVideoDurationInString = (currentTime: number) => {
const minute = Math.floor(currentTime / 60);
const second = currentTime % 60;
const minuteText = minute >= 10 ? `${minute}` : `0${minute}`;
const secondText = second >= 10 ? `${second}` : `0${second}`;
return minuteText + ':' + secondText;
};
const parseVideoDuration = (duration: string) => {
const timePart = duration.split(':');
const hours = timePart[0];
@ -70,7 +97,9 @@
}
};
onDestroy(() => URL.revokeObjectURL(imageContent));
onDestroy(() => {
URL.revokeObjectURL(imageData);
});
const getSize = () => {
if (asset.exifInfo?.orientation === 'Rotate 90 CW') {
@ -81,19 +110,34 @@
return 'w-[235px] h-[235px]';
}
};
const handleMouseOverThumbnail = () => {
mouseOver = true;
};
const handleMouseLeaveThumbnail = () => {
mouseOver = false;
URL.revokeObjectURL(videoData);
if (calculateVideoDurationIntervalHandler) {
clearInterval(calculateVideoDurationIntervalHandler);
}
isThumbnailVideoPlaying = false;
videoProgress = '00:00';
};
</script>
<IntersectionObserver once={true} let:intersecting>
<div
class={`bg-gray-100 relative hover:cursor-pointer ${getSize()}`}
on:mouseenter={() => (mouseOver = true)}
on:mouseleave={() => (mouseOver = false)}
on:mouseenter={handleMouseOverThumbnail}
on:mouseleave={handleMouseLeaveThumbnail}
on:click={() => dispatch('viewAsset', { assetId: asset.id, deviceId: asset.deviceId })}
>
{#if mouseOver}
<div
in:fade={{ duration: 200 }}
class="w-full h-full bg-gradient-to-b from-gray-800/50 via-white/0 to-white/0 absolute p-2"
class="w-full bg-gradient-to-b from-gray-800/50 via-white/0 to-white/0 absolute p-2 z-10"
>
<div
on:mouseenter={() => (mouseOverIcon = true)}
@ -105,18 +149,44 @@
</div>
{/if}
<!-- Playback and info -->
{#if asset.type === AssetType.VIDEO}
<div class="absolute right-2 top-2 text-white text-xs font-medium flex gap-1 place-items-center">
{parseVideoDuration(asset.duration)}
<PlayCircleOutline size="24" />
<div class="absolute right-2 top-2 text-white text-xs font-medium flex gap-1 place-items-center z-10">
{#if isThumbnailVideoPlaying}
<span in:fly={{ x: -25, duration: 500 }}>
{videoProgress}
</span>
{:else}
<span in:fade={{ duration: 500 }}>
{parseVideoDuration(asset.duration)}
</span>
{/if}
{#if mouseOver}
{#if isThumbnailVideoPlaying}
<span in:fly={{ x: 25, duration: 500 }}>
<PauseCircleOutline size="24" />
</span>
{:else}
<span in:fade={{ duration: 250 }}>
<LoadingSpinner />
</span>
{/if}
{:else}
<span in:fade={{ duration: 500 }}>
<PlayCircleOutline size="24" />
</span>
{/if}
</div>
{/if}
<!-- Thumbnail -->
{#if intersecting}
{#await loadImageData()}
<div class={`bg-immich-primary/10 ${getSize()} flex place-items-center place-content-center`}>...</div>
{:then imageData}
<img
in:fade={{ duration: 250 }}
src={imageData}
alt={asset.id}
class={`object-cover ${getSize()} transition-all duration-100 z-0`}
@ -125,12 +195,12 @@
{/await}
{/if}
<!-- {#if mouseOver && asset.type === AssetType.VIDEO}
{#if mouseOver && asset.type === AssetType.VIDEO}
<div class="absolute w-full h-full top-0" on:mouseenter={loadVideoData}>
<video autoplay class="border-2 h-[200px]" width="250px" bind:this={videoPlayerNode}>
<video muted class="h-full object-cover" width="250px" bind:this={videoPlayerNode}>
<track kind="captions" />
</video>
</div>
{/if} -->
{/if}
</div>
</IntersectionObserver>

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

@ -0,0 +1,75 @@
<script lang="ts">
import { session } from '$app/stores';
import { serverEndpoint } from '$lib/constants';
import { fade } from 'svelte/transition';
import type { ImmichAsset, ImmichExif } from '$lib/models/immich-asset';
import { createEventDispatcher, onMount } from 'svelte';
import LoadingSpinner from '../shared/loading-spinner.svelte';
export let assetId: string;
let asset: ImmichAsset;
const dispatch = createEventDispatcher();
let videoPlayerNode: HTMLVideoElement;
let isVideoLoading = true;
onMount(async () => {
if ($session.user) {
const res = await fetch(serverEndpoint + '/asset/assetById/' + assetId, {
headers: {
Authorization: 'bearer ' + $session.user.accessToken,
},
});
asset = await res.json();
await loadVideoData();
}
});
const loadVideoData = async () => {
isVideoLoading = true;
const videoUrl = `/asset/file?aid=${asset.deviceAssetId}&did=${asset.deviceId}&isWeb=true`;
if ($session.user) {
try {
const res = await fetch(serverEndpoint + videoUrl, {
method: 'GET',
headers: {
Authorization: 'bearer ' + $session.user.accessToken,
},
});
const videoData = URL.createObjectURL(await res.blob());
videoPlayerNode.src = videoData;
videoPlayerNode.load();
videoPlayerNode.oncanplay = () => {
videoPlayerNode.muted = true;
videoPlayerNode.play();
videoPlayerNode.muted = false;
isVideoLoading = false;
};
return videoData;
} catch (e) {}
}
};
</script>
<div transition:fade={{ duration: 150 }} class="flex place-items-center place-content-center h-full select-none">
{#if asset}
<video controls class="h-full object-contain" bind:this={videoPlayerNode}>
<track kind="captions" />
</video>
{#if isVideoLoading}
<div class="absolute w-full h-full bg-black/50 flex place-items-center place-content-center">
<LoadingSpinner />
</div>
{/if}
{/if}
</div>

2
web/src/lib/components/shared/loading-spinner.svelte
View file

@ -1,7 +1,7 @@
<div>
<svg
role="status"
class="w-8 h-8 mr-2 text-gray-400 animate-spin dark:text-gray-600 fill-immich-primary"
class={`w-[24px] h-[24px] text-gray-400 animate-spin dark:text-gray-600 fill-immich-primary`}
viewBox="0 0 100 101"
fill="none"
xmlns="http://www.w3.org/2000/svg"