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

feat: support iOS LivePhoto backup (#950)

Browse source
This commit is contained in:
Alex 2022-11-18 23:12:54 -06:00 • committed by GitHub
parent 83e2cabbcc
commit 8bc64be77b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
30 changed files with 678 additions and 243 deletions
Download patch file Download diff file Expand all files Collapse all files

60
web/src/lib/components/shared-components/immich-thumbnail.svelte
View file

@ -5,6 +5,8 @@
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 MotionPlayOutline from 'svelte-material-icons/MotionPlayOutline.svelte';
import MotionPauseOutline from 'svelte-material-icons/MotionPauseOutline.svelte';
import LoadingSpinner from './loading-spinner.svelte';
import { AssetResponseDto, AssetTypeEnum, getFileUrl, ThumbnailFormat } from '@api';
@ -19,6 +21,7 @@
let imageData: string;
let mouseOver = false;
let playMotionVideo = false;
$: dispatch('mouse-event', { isMouseOver: mouseOver, selectedGroupIndex: groupIndex });
let mouseOverIcon = false;
@ -28,10 +31,15 @@
let videoProgress = '00:00';
let videoUrl: string;
const loadVideoData = async () => {
const loadVideoData = async (isLivePhoto: boolean) => {
isThumbnailVideoPlaying = false;
videoUrl = getFileUrl(asset.id, false, true);
if (isLivePhoto && asset.livePhotoVideoId) {
console.log('get file url');
videoUrl = getFileUrl(asset.livePhotoVideoId, false, true);
} else {
videoUrl = getFileUrl(asset.id, false, true);
}
};
const getVideoDurationInString = (currentTime: number) => {
@ -202,6 +210,32 @@
</div>
{/if}
{#if asset.type === AssetTypeEnum.Image && asset.livePhotoVideoId}
<div
class="absolute right-2 top-2 text-white text-xs font-medium flex gap-1 place-items-center z-10"
>
<span
in:fade={{ duration: 500 }}
on:mouseenter={() => {
playMotionVideo = true;
loadVideoData(true);
}}
on:mouseleave={() => (playMotionVideo = false)}
>
{#if playMotionVideo}
<span in:fade={{ duration: 500 }}>
<MotionPauseOutline size="24" />
</span>
{:else}
<span in:fade={{ duration: 500 }}>
<MotionPlayOutline size="24" />
</span>
{/if}
</span>
<!-- {/if} -->
</div>
{/if}
<!-- Thumbnail -->
{#if intersecting}
<img
@ -217,7 +251,27 @@
{/if}
{#if mouseOver && asset.type === AssetTypeEnum.Video}
<div class="absolute w-full h-full top-0" on:mouseenter={loadVideoData}>
<div class="absolute w-full h-full top-0" on:mouseenter={() => loadVideoData(false)}>
{#if videoUrl}
<video
muted
autoplay
preload="none"
class="h-full object-cover"
width="250px"
style:width={`${thumbnailSize}px`}
on:canplay={handleCanPlay}
bind:this={videoPlayerNode}
>
<source src={videoUrl} type="video/mp4" />
<track kind="captions" />
</video>
{/if}
</div>
{/if}
{#if playMotionVideo && asset.type === AssetTypeEnum.Image && asset.livePhotoVideoId}
<div class="absolute w-full h-full top-0">
{#if videoUrl}
<video
muted