mirror of
https://github.com/immich-app/immich
synced 2025-11-07 17:27:20 +00:00
Jason Rasmussen
GitHub
parent
7c2f7d6c51
commit
f55b3add80
242 changed files with 12794 additions and 13426 deletions
|
|
@ -1,47 +1,47 @@
|
|||
<script lang="ts">
|
||||
import { imageLoad } from '$lib/utils/image-load';
|
||||
import { fade } from 'svelte/transition';
|
||||
import { thumbHashToDataURL } from 'thumbhash';
|
||||
import { Buffer } from 'buffer';
|
||||
import { imageLoad } from '$lib/utils/image-load';
|
||||
import { fade } from 'svelte/transition';
|
||||
import { thumbHashToDataURL } from 'thumbhash';
|
||||
import { Buffer } from 'buffer';
|
||||
|
||||
export let url: string;
|
||||
export let altText: string;
|
||||
export let heightStyle: string | undefined = undefined;
|
||||
export let widthStyle: string;
|
||||
export let thumbhash: string | null = null;
|
||||
export let curve = false;
|
||||
export let shadow = false;
|
||||
export let circle = false;
|
||||
export let url: string;
|
||||
export let altText: string;
|
||||
export let heightStyle: string | undefined = undefined;
|
||||
export let widthStyle: string;
|
||||
export let thumbhash: string | null = null;
|
||||
export let curve = false;
|
||||
export let shadow = false;
|
||||
export let circle = false;
|
||||
|
||||
let complete = false;
|
||||
let complete = false;
|
||||
</script>
|
||||
|
||||
<img
|
||||
style:width={widthStyle}
|
||||
style:height={heightStyle}
|
||||
src={url}
|
||||
alt={altText}
|
||||
class="object-cover transition-opacity duration-300"
|
||||
class:rounded-lg={curve}
|
||||
class:shadow-lg={shadow}
|
||||
class:rounded-full={circle}
|
||||
class:opacity-0={!thumbhash && !complete}
|
||||
draggable="false"
|
||||
use:imageLoad
|
||||
on:image-load|once={() => (complete = true)}
|
||||
style:width={widthStyle}
|
||||
style:height={heightStyle}
|
||||
src={url}
|
||||
alt={altText}
|
||||
class="object-cover transition-opacity duration-300"
|
||||
class:rounded-lg={curve}
|
||||
class:shadow-lg={shadow}
|
||||
class:rounded-full={circle}
|
||||
class:opacity-0={!thumbhash && !complete}
|
||||
draggable="false"
|
||||
use:imageLoad
|
||||
on:image-load|once={() => (complete = true)}
|
||||
/>
|
||||
|
||||
{#if thumbhash && !complete}
|
||||
<img
|
||||
style:width={widthStyle}
|
||||
style:height={heightStyle}
|
||||
src={thumbHashToDataURL(Buffer.from(thumbhash, 'base64'))}
|
||||
alt={altText}
|
||||
class="absolute object-cover top-0"
|
||||
class:rounded-lg={curve}
|
||||
class:shadow-lg={shadow}
|
||||
class:rounded-full={circle}
|
||||
draggable="false"
|
||||
out:fade={{ duration: 300 }}
|
||||
/>
|
||||
<img
|
||||
style:width={widthStyle}
|
||||
style:height={heightStyle}
|
||||
src={thumbHashToDataURL(Buffer.from(thumbhash, 'base64'))}
|
||||
alt={altText}
|
||||
class="absolute object-cover top-0"
|
||||
class:rounded-lg={curve}
|
||||
class:shadow-lg={shadow}
|
||||
class:rounded-full={circle}
|
||||
draggable="false"
|
||||
out:fade={{ duration: 300 }}
|
||||
/>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -1,158 +1,158 @@
|
|||
<script lang="ts">
|
||||
import IntersectionObserver from '$lib/components/asset-viewer/intersection-observer.svelte';
|
||||
import { timeToSeconds } from '$lib/utils/time-to-seconds';
|
||||
import { api, AssetResponseDto, AssetTypeEnum, ThumbnailFormat } from '@api';
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import CheckCircle from 'svelte-material-icons/CheckCircle.svelte';
|
||||
import MotionPauseOutline from 'svelte-material-icons/MotionPauseOutline.svelte';
|
||||
import MotionPlayOutline from 'svelte-material-icons/MotionPlayOutline.svelte';
|
||||
import Heart from 'svelte-material-icons/Heart.svelte';
|
||||
import ArchiveArrowDownOutline from 'svelte-material-icons/ArchiveArrowDownOutline.svelte';
|
||||
import ImageThumbnail from './image-thumbnail.svelte';
|
||||
import VideoThumbnail from './video-thumbnail.svelte';
|
||||
import ImageBrokenVariant from 'svelte-material-icons/ImageBrokenVariant.svelte';
|
||||
import IntersectionObserver from '$lib/components/asset-viewer/intersection-observer.svelte';
|
||||
import { timeToSeconds } from '$lib/utils/time-to-seconds';
|
||||
import { api, AssetResponseDto, AssetTypeEnum, ThumbnailFormat } from '@api';
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import CheckCircle from 'svelte-material-icons/CheckCircle.svelte';
|
||||
import MotionPauseOutline from 'svelte-material-icons/MotionPauseOutline.svelte';
|
||||
import MotionPlayOutline from 'svelte-material-icons/MotionPlayOutline.svelte';
|
||||
import Heart from 'svelte-material-icons/Heart.svelte';
|
||||
import ArchiveArrowDownOutline from 'svelte-material-icons/ArchiveArrowDownOutline.svelte';
|
||||
import ImageThumbnail from './image-thumbnail.svelte';
|
||||
import VideoThumbnail from './video-thumbnail.svelte';
|
||||
import ImageBrokenVariant from 'svelte-material-icons/ImageBrokenVariant.svelte';
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
export let asset: AssetResponseDto;
|
||||
export let groupIndex = 0;
|
||||
export let thumbnailSize: number | undefined = undefined;
|
||||
export let thumbnailWidth: number | undefined = undefined;
|
||||
export let thumbnailHeight: number | undefined = undefined;
|
||||
export let format: ThumbnailFormat = ThumbnailFormat.Webp;
|
||||
export let selected = false;
|
||||
export let disabled = false;
|
||||
export let readonly = false;
|
||||
export let publicSharedKey: string | undefined = undefined;
|
||||
export let showArchiveIcon = false;
|
||||
export let asset: AssetResponseDto;
|
||||
export let groupIndex = 0;
|
||||
export let thumbnailSize: number | undefined = undefined;
|
||||
export let thumbnailWidth: number | undefined = undefined;
|
||||
export let thumbnailHeight: number | undefined = undefined;
|
||||
export let format: ThumbnailFormat = ThumbnailFormat.Webp;
|
||||
export let selected = false;
|
||||
export let disabled = false;
|
||||
export let readonly = false;
|
||||
export let publicSharedKey: string | undefined = undefined;
|
||||
export let showArchiveIcon = false;
|
||||
|
||||
let mouseOver = false;
|
||||
let mouseOver = false;
|
||||
|
||||
$: dispatch('mouse-event', { isMouseOver: mouseOver, selectedGroupIndex: groupIndex });
|
||||
$: dispatch('mouse-event', { isMouseOver: mouseOver, selectedGroupIndex: groupIndex });
|
||||
|
||||
$: [width, height] = (() => {
|
||||
if (thumbnailSize) {
|
||||
return [thumbnailSize, thumbnailSize];
|
||||
}
|
||||
$: [width, height] = (() => {
|
||||
if (thumbnailSize) {
|
||||
return [thumbnailSize, thumbnailSize];
|
||||
}
|
||||
|
||||
if (thumbnailWidth && thumbnailHeight) {
|
||||
return [thumbnailWidth, thumbnailHeight];
|
||||
}
|
||||
if (thumbnailWidth && thumbnailHeight) {
|
||||
return [thumbnailWidth, thumbnailHeight];
|
||||
}
|
||||
|
||||
return [235, 235];
|
||||
})();
|
||||
return [235, 235];
|
||||
})();
|
||||
|
||||
const thumbnailClickedHandler = () => {
|
||||
if (!disabled) {
|
||||
dispatch('click', { asset });
|
||||
}
|
||||
};
|
||||
const thumbnailClickedHandler = () => {
|
||||
if (!disabled) {
|
||||
dispatch('click', { asset });
|
||||
}
|
||||
};
|
||||
|
||||
const onIconClickedHandler = (e: MouseEvent) => {
|
||||
e.stopPropagation();
|
||||
if (!disabled) {
|
||||
dispatch('select', { asset });
|
||||
}
|
||||
};
|
||||
const onIconClickedHandler = (e: MouseEvent) => {
|
||||
e.stopPropagation();
|
||||
if (!disabled) {
|
||||
dispatch('select', { asset });
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<IntersectionObserver once={false} let:intersecting>
|
||||
<div
|
||||
style:width="{width}px"
|
||||
style:height="{height}px"
|
||||
class="relative group overflow-hidden {disabled
|
||||
? 'bg-gray-300'
|
||||
: 'bg-immich-primary/20 dark:bg-immich-dark-primary/20'}"
|
||||
class:cursor-not-allowed={disabled}
|
||||
class:hover:cursor-pointer={!disabled}
|
||||
on:mouseenter={() => (mouseOver = true)}
|
||||
on:mouseleave={() => (mouseOver = false)}
|
||||
on:click={thumbnailClickedHandler}
|
||||
on:keydown={thumbnailClickedHandler}
|
||||
>
|
||||
{#if intersecting}
|
||||
<div class="absolute w-full h-full z-20">
|
||||
<!-- Select asset button -->
|
||||
{#if !readonly}
|
||||
<button
|
||||
on:click={onIconClickedHandler}
|
||||
class="absolute p-2 group-hover:block"
|
||||
class:group-hover:block={!disabled}
|
||||
class:hidden={!selected}
|
||||
class:cursor-not-allowed={disabled}
|
||||
role="checkbox"
|
||||
aria-checked={selected}
|
||||
{disabled}
|
||||
>
|
||||
{#if disabled}
|
||||
<CheckCircle size="24" class="text-zinc-800" />
|
||||
{:else if selected}
|
||||
<CheckCircle size="24" class="text-immich-primary" />
|
||||
{:else}
|
||||
<CheckCircle size="24" class="text-white/80 hover:text-white" />
|
||||
{/if}
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
<div
|
||||
style:width="{width}px"
|
||||
style:height="{height}px"
|
||||
class="relative group overflow-hidden {disabled
|
||||
? 'bg-gray-300'
|
||||
: 'bg-immich-primary/20 dark:bg-immich-dark-primary/20'}"
|
||||
class:cursor-not-allowed={disabled}
|
||||
class:hover:cursor-pointer={!disabled}
|
||||
on:mouseenter={() => (mouseOver = true)}
|
||||
on:mouseleave={() => (mouseOver = false)}
|
||||
on:click={thumbnailClickedHandler}
|
||||
on:keydown={thumbnailClickedHandler}
|
||||
>
|
||||
{#if intersecting}
|
||||
<div class="absolute w-full h-full z-20">
|
||||
<!-- Select asset button -->
|
||||
{#if !readonly}
|
||||
<button
|
||||
on:click={onIconClickedHandler}
|
||||
class="absolute p-2 group-hover:block"
|
||||
class:group-hover:block={!disabled}
|
||||
class:hidden={!selected}
|
||||
class:cursor-not-allowed={disabled}
|
||||
role="checkbox"
|
||||
aria-checked={selected}
|
||||
{disabled}
|
||||
>
|
||||
{#if disabled}
|
||||
<CheckCircle size="24" class="text-zinc-800" />
|
||||
{:else if selected}
|
||||
<CheckCircle size="24" class="text-immich-primary" />
|
||||
{:else}
|
||||
<CheckCircle size="24" class="text-white/80 hover:text-white" />
|
||||
{/if}
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="h-full w-full bg-gray-100 dark:bg-immich-dark-gray absolute select-none transition-transform"
|
||||
class:scale-[0.85]={selected}
|
||||
>
|
||||
<!-- Gradient overlay on hover -->
|
||||
<div
|
||||
class="absolute w-full h-full bg-gradient-to-b from-black/25 via-[transparent_25%] opacity-0 group-hover:opacity-100 transition-opacity z-10"
|
||||
/>
|
||||
<div
|
||||
class="h-full w-full bg-gray-100 dark:bg-immich-dark-gray absolute select-none transition-transform"
|
||||
class:scale-[0.85]={selected}
|
||||
>
|
||||
<!-- Gradient overlay on hover -->
|
||||
<div
|
||||
class="absolute w-full h-full bg-gradient-to-b from-black/25 via-[transparent_25%] opacity-0 group-hover:opacity-100 transition-opacity z-10"
|
||||
/>
|
||||
|
||||
<!-- Favorite asset star -->
|
||||
{#if asset.isFavorite && !publicSharedKey}
|
||||
<div class="absolute bottom-2 left-2 z-10">
|
||||
<Heart size="24" class="text-white" />
|
||||
</div>
|
||||
{/if}
|
||||
<!-- Favorite asset star -->
|
||||
{#if asset.isFavorite && !publicSharedKey}
|
||||
<div class="absolute bottom-2 left-2 z-10">
|
||||
<Heart size="24" class="text-white" />
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if showArchiveIcon && asset.isArchived}
|
||||
<div class="absolute {asset.isFavorite ? 'bottom-10' : 'bottom-2'} left-2 z-10">
|
||||
<ArchiveArrowDownOutline size="24" class="text-white" />
|
||||
</div>
|
||||
{/if}
|
||||
{#if showArchiveIcon && asset.isArchived}
|
||||
<div class="absolute {asset.isFavorite ? 'bottom-10' : 'bottom-2'} left-2 z-10">
|
||||
<ArchiveArrowDownOutline size="24" class="text-white" />
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if asset.resized}
|
||||
<ImageThumbnail
|
||||
url={api.getAssetThumbnailUrl(asset.id, format, publicSharedKey)}
|
||||
altText={asset.originalFileName}
|
||||
widthStyle="{width}px"
|
||||
heightStyle="{height}px"
|
||||
thumbhash={asset.thumbhash}
|
||||
/>
|
||||
{:else}
|
||||
<div class="w-full h-full p-4 flex items-center justify-center">
|
||||
<ImageBrokenVariant size="48" />
|
||||
</div>
|
||||
{/if}
|
||||
{#if asset.resized}
|
||||
<ImageThumbnail
|
||||
url={api.getAssetThumbnailUrl(asset.id, format, publicSharedKey)}
|
||||
altText={asset.originalFileName}
|
||||
widthStyle="{width}px"
|
||||
heightStyle="{height}px"
|
||||
thumbhash={asset.thumbhash}
|
||||
/>
|
||||
{:else}
|
||||
<div class="w-full h-full p-4 flex items-center justify-center">
|
||||
<ImageBrokenVariant size="48" />
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if asset.type === AssetTypeEnum.Video}
|
||||
<div class="absolute w-full h-full top-0">
|
||||
<VideoThumbnail
|
||||
url={api.getAssetFileUrl(asset.id, false, true, publicSharedKey)}
|
||||
enablePlayback={mouseOver}
|
||||
durationInSeconds={timeToSeconds(asset.duration)}
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
{#if asset.type === AssetTypeEnum.Video}
|
||||
<div class="absolute w-full h-full top-0">
|
||||
<VideoThumbnail
|
||||
url={api.getAssetFileUrl(asset.id, false, true, publicSharedKey)}
|
||||
enablePlayback={mouseOver}
|
||||
durationInSeconds={timeToSeconds(asset.duration)}
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if asset.type === AssetTypeEnum.Image && asset.livePhotoVideoId}
|
||||
<div class="absolute w-full h-full top-0">
|
||||
<VideoThumbnail
|
||||
url={api.getAssetFileUrl(asset.livePhotoVideoId, false, true, publicSharedKey)}
|
||||
pauseIcon={MotionPauseOutline}
|
||||
playIcon={MotionPlayOutline}
|
||||
showTime={false}
|
||||
playbackOnIconHover
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{#if asset.type === AssetTypeEnum.Image && asset.livePhotoVideoId}
|
||||
<div class="absolute w-full h-full top-0">
|
||||
<VideoThumbnail
|
||||
url={api.getAssetFileUrl(asset.livePhotoVideoId, false, true, publicSharedKey)}
|
||||
pauseIcon={MotionPauseOutline}
|
||||
playIcon={MotionPlayOutline}
|
||||
showTime={false}
|
||||
playbackOnIconHover
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</IntersectionObserver>
|
||||
|
|
|
|||
|
|
@ -1,88 +1,86 @@
|
|||
<script lang="ts">
|
||||
import { Duration } from 'luxon';
|
||||
import PauseCircleOutline from 'svelte-material-icons/PauseCircleOutline.svelte';
|
||||
import PlayCircleOutline from 'svelte-material-icons/PlayCircleOutline.svelte';
|
||||
import AlertCircleOutline from 'svelte-material-icons/AlertCircleOutline.svelte';
|
||||
import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
|
||||
import { Duration } from 'luxon';
|
||||
import PauseCircleOutline from 'svelte-material-icons/PauseCircleOutline.svelte';
|
||||
import PlayCircleOutline from 'svelte-material-icons/PlayCircleOutline.svelte';
|
||||
import AlertCircleOutline from 'svelte-material-icons/AlertCircleOutline.svelte';
|
||||
import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
|
||||
|
||||
export let url: string;
|
||||
export let durationInSeconds = 0;
|
||||
export let enablePlayback = false;
|
||||
export let playbackOnIconHover = false;
|
||||
export let showTime = true;
|
||||
export let playIcon = PlayCircleOutline;
|
||||
export let pauseIcon = PauseCircleOutline;
|
||||
export let url: string;
|
||||
export let durationInSeconds = 0;
|
||||
export let enablePlayback = false;
|
||||
export let playbackOnIconHover = false;
|
||||
export let showTime = true;
|
||||
export let playIcon = PlayCircleOutline;
|
||||
export let pauseIcon = PauseCircleOutline;
|
||||
|
||||
let remainingSeconds = durationInSeconds;
|
||||
let loading = true;
|
||||
let error = false;
|
||||
let player: HTMLVideoElement;
|
||||
let remainingSeconds = durationInSeconds;
|
||||
let loading = true;
|
||||
let error = false;
|
||||
let player: HTMLVideoElement;
|
||||
|
||||
$: if (!enablePlayback) {
|
||||
// Reset remaining time when playback is disabled.
|
||||
remainingSeconds = durationInSeconds;
|
||||
$: if (!enablePlayback) {
|
||||
// Reset remaining time when playback is disabled.
|
||||
remainingSeconds = durationInSeconds;
|
||||
|
||||
if (player) {
|
||||
// Cancel video buffering.
|
||||
player.src = '';
|
||||
}
|
||||
}
|
||||
if (player) {
|
||||
// Cancel video buffering.
|
||||
player.src = '';
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="absolute right-0 top-0 text-white text-xs font-medium flex gap-1 place-items-center z-20"
|
||||
>
|
||||
{#if showTime}
|
||||
<span class="pt-2">
|
||||
{Duration.fromObject({ seconds: remainingSeconds }).toFormat('m:ss')}
|
||||
</span>
|
||||
{/if}
|
||||
<div class="absolute right-0 top-0 text-white text-xs font-medium flex gap-1 place-items-center z-20">
|
||||
{#if showTime}
|
||||
<span class="pt-2">
|
||||
{Duration.fromObject({ seconds: remainingSeconds }).toFormat('m:ss')}
|
||||
</span>
|
||||
{/if}
|
||||
|
||||
<span
|
||||
class="pt-2 pr-2"
|
||||
on:mouseenter={() => {
|
||||
if (playbackOnIconHover) {
|
||||
enablePlayback = true;
|
||||
}
|
||||
}}
|
||||
on:mouseleave={() => {
|
||||
if (playbackOnIconHover) {
|
||||
enablePlayback = false;
|
||||
}
|
||||
}}
|
||||
>
|
||||
{#if enablePlayback}
|
||||
{#if loading}
|
||||
<LoadingSpinner />
|
||||
{:else if error}
|
||||
<AlertCircleOutline size="24" class="text-red-600" />
|
||||
{:else}
|
||||
<svelte:component this={pauseIcon} size="24" />
|
||||
{/if}
|
||||
{:else}
|
||||
<svelte:component this={playIcon} size="24" />
|
||||
{/if}
|
||||
</span>
|
||||
<span
|
||||
class="pt-2 pr-2"
|
||||
on:mouseenter={() => {
|
||||
if (playbackOnIconHover) {
|
||||
enablePlayback = true;
|
||||
}
|
||||
}}
|
||||
on:mouseleave={() => {
|
||||
if (playbackOnIconHover) {
|
||||
enablePlayback = false;
|
||||
}
|
||||
}}
|
||||
>
|
||||
{#if enablePlayback}
|
||||
{#if loading}
|
||||
<LoadingSpinner />
|
||||
{:else if error}
|
||||
<AlertCircleOutline size="24" class="text-red-600" />
|
||||
{:else}
|
||||
<svelte:component this={pauseIcon} size="24" />
|
||||
{/if}
|
||||
{:else}
|
||||
<svelte:component this={playIcon} size="24" />
|
||||
{/if}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{#if enablePlayback}
|
||||
<video
|
||||
bind:this={player}
|
||||
class="w-full h-full object-cover"
|
||||
muted
|
||||
autoplay
|
||||
src={url}
|
||||
on:play={() => {
|
||||
loading = false;
|
||||
error = false;
|
||||
}}
|
||||
on:error={() => {
|
||||
error = true;
|
||||
loading = false;
|
||||
}}
|
||||
on:timeupdate={({ currentTarget }) => {
|
||||
const remaining = currentTarget.duration - currentTarget.currentTime;
|
||||
remainingSeconds = Math.min(Math.ceil(remaining), durationInSeconds);
|
||||
}}
|
||||
/>
|
||||
<video
|
||||
bind:this={player}
|
||||
class="w-full h-full object-cover"
|
||||
muted
|
||||
autoplay
|
||||
src={url}
|
||||
on:play={() => {
|
||||
loading = false;
|
||||
error = false;
|
||||
}}
|
||||
on:error={() => {
|
||||
error = true;
|
||||
loading = false;
|
||||
}}
|
||||
on:timeupdate={({ currentTarget }) => {
|
||||
const remaining = currentTarget.duration - currentTarget.currentTime;
|
||||
remainingSeconds = Math.min(Math.ceil(remaining), durationInSeconds);
|
||||
}}
|
||||
/>
|
||||
{/if}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue