mirror of https://github.com/immich-app/immich.git
Merge branch 'main' of github.com:immich-app/immich
Alex Tran
commit
833c099025
@ -0,0 +1,14 @@
|
||||
import 'package:immich_mobile/shared/models/album.dart';
|
||||
import 'package:immich_mobile/shared/models/asset.dart';
|
||||
import 'package:immich_mobile/shared/models/exif_info.dart';
|
||||
import 'package:immich_mobile/shared/models/store.dart';
|
||||
import 'package:isar/isar.dart';
|
||||
|
||||
Future<void> clearAssetsAndAlbums(Isar db) async {
|
||||
await Store.delete(StoreKey.assetETag);
|
||||
await db.writeTxn(() async {
|
||||
await db.assets.clear();
|
||||
await db.exifInfos.clear();
|
||||
await db.albums.clear();
|
||||
});
|
||||
}
|
||||
@ -0,0 +1,41 @@
|
||||
import 'package:flutter_test/flutter_test.dart';
|
||||
import 'package:immich_mobile/utils/async_mutex.dart';
|
||||
|
||||
void main() {
|
||||
group('Test AsyncMutex grouped', () {
|
||||
test('test ordered execution', () async {
|
||||
AsyncMutex lock = AsyncMutex();
|
||||
List<int> events = [];
|
||||
expect(0, lock.enqueued);
|
||||
lock.run(
|
||||
() => Future.delayed(
|
||||
const Duration(milliseconds: 10),
|
||||
() => events.add(1),
|
||||
),
|
||||
);
|
||||
expect(1, lock.enqueued);
|
||||
lock.run(
|
||||
() => Future.delayed(
|
||||
const Duration(milliseconds: 3),
|
||||
() => events.add(2),
|
||||
),
|
||||
);
|
||||
expect(2, lock.enqueued);
|
||||
lock.run(
|
||||
() => Future.delayed(
|
||||
const Duration(milliseconds: 1),
|
||||
() => events.add(3),
|
||||
),
|
||||
);
|
||||
expect(3, lock.enqueued);
|
||||
await lock.run(
|
||||
() => Future.delayed(
|
||||
const Duration(milliseconds: 10),
|
||||
() => events.add(4),
|
||||
),
|
||||
);
|
||||
expect(0, lock.enqueued);
|
||||
expect(events, [1, 2, 3, 4]);
|
||||
});
|
||||
});
|
||||
}
|
||||
@ -0,0 +1,143 @@
|
||||
import 'package:flutter/widgets.dart';
|
||||
import 'package:flutter_test/flutter_test.dart';
|
||||
import 'package:immich_mobile/shared/models/album.dart';
|
||||
import 'package:immich_mobile/shared/models/asset.dart';
|
||||
import 'package:immich_mobile/shared/models/exif_info.dart';
|
||||
import 'package:immich_mobile/shared/models/logger_message.model.dart';
|
||||
import 'package:immich_mobile/shared/models/store.dart';
|
||||
import 'package:immich_mobile/shared/models/user.dart';
|
||||
import 'package:immich_mobile/shared/services/immich_logger.service.dart';
|
||||
import 'package:immich_mobile/shared/services/sync.service.dart';
|
||||
import 'package:isar/isar.dart';
|
||||
|
||||
void main() {
|
||||
Asset makeAsset({
|
||||
required String localId,
|
||||
String? remoteId,
|
||||
int deviceId = 1,
|
||||
int ownerId = 590700560494856554, // hash of "1"
|
||||
bool isLocal = false,
|
||||
}) {
|
||||
final DateTime date = DateTime(2000);
|
||||
return Asset(
|
||||
localId: localId,
|
||||
remoteId: remoteId,
|
||||
deviceId: deviceId,
|
||||
ownerId: ownerId,
|
||||
fileCreatedAt: date,
|
||||
fileModifiedAt: date,
|
||||
updatedAt: date,
|
||||
durationInSeconds: 0,
|
||||
type: AssetType.image,
|
||||
fileName: localId,
|
||||
isFavorite: false,
|
||||
isLocal: isLocal,
|
||||
);
|
||||
}
|
||||
|
||||
Isar loadDb() {
|
||||
return Isar.openSync(
|
||||
[
|
||||
ExifInfoSchema,
|
||||
AssetSchema,
|
||||
AlbumSchema,
|
||||
UserSchema,
|
||||
StoreValueSchema,
|
||||
LoggerMessageSchema
|
||||
],
|
||||
maxSizeMiB: 256,
|
||||
);
|
||||
}
|
||||
|
||||
group('Test SyncService grouped', () {
|
||||
late final Isar db;
|
||||
setUpAll(() async {
|
||||
WidgetsFlutterBinding.ensureInitialized();
|
||||
await Isar.initializeIsarCore(download: true);
|
||||
db = loadDb();
|
||||
ImmichLogger();
|
||||
db.writeTxnSync(() => db.clearSync());
|
||||
Store.init(db);
|
||||
await Store.put(
|
||||
StoreKey.currentUser,
|
||||
User(
|
||||
id: "1",
|
||||
updatedAt: DateTime.now(),
|
||||
email: "a@b.c",
|
||||
firstName: "first",
|
||||
lastName: "last",
|
||||
isAdmin: false,
|
||||
),
|
||||
);
|
||||
});
|
||||
final List<Asset> initialAssets = [
|
||||
makeAsset(localId: "1", remoteId: "0-1", deviceId: 0),
|
||||
makeAsset(localId: "1", remoteId: "2-1", deviceId: 2),
|
||||
makeAsset(localId: "1", remoteId: "1-1", isLocal: true),
|
||||
makeAsset(localId: "2", isLocal: true),
|
||||
makeAsset(localId: "3", isLocal: true),
|
||||
];
|
||||
setUp(() {
|
||||
db.writeTxnSync(() {
|
||||
db.assets.clearSync();
|
||||
db.assets.putAllSync(initialAssets);
|
||||
});
|
||||
});
|
||||
test('test inserting existing assets', () async {
|
||||
SyncService s = SyncService(db);
|
||||
final List<Asset> remoteAssets = [
|
||||
makeAsset(localId: "1", remoteId: "0-1", deviceId: 0),
|
||||
makeAsset(localId: "1", remoteId: "2-1", deviceId: 2),
|
||||
makeAsset(localId: "1", remoteId: "1-1"),
|
||||
];
|
||||
expect(db.assets.countSync(), 5);
|
||||
final bool c1 = await s.syncRemoteAssetsToDb(() => remoteAssets);
|
||||
expect(c1, false);
|
||||
expect(db.assets.countSync(), 5);
|
||||
});
|
||||
|
||||
test('test inserting new assets', () async {
|
||||
SyncService s = SyncService(db);
|
||||
final List<Asset> remoteAssets = [
|
||||
makeAsset(localId: "1", remoteId: "0-1", deviceId: 0),
|
||||
makeAsset(localId: "1", remoteId: "2-1", deviceId: 2),
|
||||
makeAsset(localId: "1", remoteId: "1-1"),
|
||||
makeAsset(localId: "2", remoteId: "1-2"),
|
||||
makeAsset(localId: "4", remoteId: "1-4"),
|
||||
makeAsset(localId: "1", remoteId: "3-1", deviceId: 3),
|
||||
];
|
||||
expect(db.assets.countSync(), 5);
|
||||
final bool c1 = await s.syncRemoteAssetsToDb(() => remoteAssets);
|
||||
expect(c1, true);
|
||||
expect(db.assets.countSync(), 7);
|
||||
});
|
||||
|
||||
test('test syncing duplicate assets', () async {
|
||||
SyncService s = SyncService(db);
|
||||
final List<Asset> remoteAssets = [
|
||||
makeAsset(localId: "1", remoteId: "0-1", deviceId: 0),
|
||||
makeAsset(localId: "1", remoteId: "1-1"),
|
||||
makeAsset(localId: "1", remoteId: "2-1", deviceId: 2),
|
||||
makeAsset(localId: "1", remoteId: "2-1b", deviceId: 2),
|
||||
makeAsset(localId: "1", remoteId: "2-1c", deviceId: 2),
|
||||
makeAsset(localId: "1", remoteId: "2-1d", deviceId: 2),
|
||||
];
|
||||
expect(db.assets.countSync(), 5);
|
||||
final bool c1 = await s.syncRemoteAssetsToDb(() => remoteAssets);
|
||||
expect(c1, true);
|
||||
expect(db.assets.countSync(), 8);
|
||||
final bool c2 = await s.syncRemoteAssetsToDb(() => remoteAssets);
|
||||
expect(c2, false);
|
||||
expect(db.assets.countSync(), 8);
|
||||
remoteAssets.removeAt(4);
|
||||
final bool c3 = await s.syncRemoteAssetsToDb(() => remoteAssets);
|
||||
expect(c3, true);
|
||||
expect(db.assets.countSync(), 7);
|
||||
remoteAssets.add(makeAsset(localId: "1", remoteId: "2-1e", deviceId: 2));
|
||||
remoteAssets.add(makeAsset(localId: "2", remoteId: "2-2", deviceId: 2));
|
||||
final bool c4 = await s.syncRemoteAssetsToDb(() => remoteAssets);
|
||||
expect(c4, true);
|
||||
expect(db.assets.countSync(), 9);
|
||||
});
|
||||
});
|
||||
}
|
||||
@ -0,0 +1,19 @@
|
||||
<script lang="ts">
|
||||
export let url: string;
|
||||
export let altText: string;
|
||||
export let heightStyle: string;
|
||||
export let widthStyle: string;
|
||||
|
||||
let loading = true;
|
||||
</script>
|
||||
|
||||
<img
|
||||
style:width={widthStyle}
|
||||
style:height={heightStyle}
|
||||
src={url}
|
||||
alt={altText}
|
||||
class="object-cover transition-opacity duration-300"
|
||||
class:opacity-0={loading}
|
||||
draggable="false"
|
||||
on:load|once={() => (loading = false)}
|
||||
/>
|
||||
@ -0,0 +1,140 @@
|
||||
<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 Star from 'svelte-material-icons/Star.svelte';
|
||||
import ImageThumbnail from './image-thumbnail.svelte';
|
||||
import VideoThumbnail from './video-thumbnail.svelte';
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
export let asset: AssetResponseDto;
|
||||
export let groupIndex = 0;
|
||||
export let thumbnailSize: 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;
|
||||
|
||||
let mouseOver = false;
|
||||
|
||||
$: dispatch('mouse-event', { isMouseOver: mouseOver, selectedGroupIndex: groupIndex });
|
||||
|
||||
$: [width, height] = (() => {
|
||||
if (thumbnailSize) {
|
||||
return [thumbnailSize, thumbnailSize];
|
||||
}
|
||||
|
||||
if (asset.exifInfo?.orientation === 'Rotate 90 CW') {
|
||||
return [176, 235];
|
||||
} else if (asset.exifInfo?.orientation === 'Horizontal (normal)') {
|
||||
return [313, 235];
|
||||
} else {
|
||||
return [235, 235];
|
||||
}
|
||||
})();
|
||||
|
||||
const thumbnailClickedHandler = () => {
|
||||
if (!disabled) {
|
||||
dispatch('click', { 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 {disabled ? 'bg-gray-300' : 'bg-immich-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="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">
|
||||
<Star size="24" class="text-white" />
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<ImageThumbnail
|
||||
url={api.getAssetThumbnailUrl(asset.id, format, publicSharedKey)}
|
||||
altText={asset.exifInfo?.imageName ?? asset.id}
|
||||
widthStyle="{width}px"
|
||||
heightStyle="{height}px"
|
||||
/>
|
||||
|
||||
{#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>
|
||||
</IntersectionObserver>
|
||||
@ -0,0 +1,88 @@
|
||||
<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';
|
||||
|
||||
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;
|
||||
|
||||
$: if (!enablePlayback) {
|
||||
// Reset remaining time when playback is disabled.
|
||||
remainingSeconds = durationInSeconds;
|
||||
|
||||
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}
|
||||
|
||||
<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);
|
||||
}}
|
||||
/>
|
||||
{/if}
|
||||
@ -1,311 +0,0 @@
|
||||
<script lang="ts">
|
||||
import IntersectionObserver from '$lib/components/asset-viewer/intersection-observer.svelte';
|
||||
import { AssetResponseDto, AssetTypeEnum, getFileUrl, 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 PauseCircleOutline from 'svelte-material-icons/PauseCircleOutline.svelte';
|
||||
import PlayCircleOutline from 'svelte-material-icons/PlayCircleOutline.svelte';
|
||||
import Star from 'svelte-material-icons/Star.svelte';
|
||||
import { fade, fly } from 'svelte/transition';
|
||||
import LoadingSpinner from './loading-spinner.svelte';
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
export let asset: AssetResponseDto;
|
||||
export let groupIndex = 0;
|
||||
export let thumbnailSize: number | undefined = undefined;
|
||||
export let format: ThumbnailFormat = ThumbnailFormat.Webp;
|
||||
export let selected = false;
|
||||
export let disabled = false;
|
||||
export let readonly = false;
|
||||
export let publicSharedKey = '';
|
||||
export let isRoundedCorner = false;
|
||||
|
||||
let mouseOver = false;
|
||||
let playMotionVideo = false;
|
||||
$: dispatch('mouse-event', { isMouseOver: mouseOver, selectedGroupIndex: groupIndex });
|
||||
|
||||
let mouseOverIcon = false;
|
||||
let videoPlayerNode: HTMLVideoElement;
|
||||
let isImageLoading = true;
|
||||
let isThumbnailVideoPlaying = false;
|
||||
let calculateVideoDurationIntervalHandler: NodeJS.Timer;
|
||||
let videoProgress = '00:00';
|
||||
let videoUrl: string;
|
||||
$: isPublicShared = publicSharedKey !== '';
|
||||
|
||||
const loadVideoData = async (isLivePhoto: boolean) => {
|
||||
isThumbnailVideoPlaying = false;
|
||||
|
||||
if (isLivePhoto && asset.livePhotoVideoId) {
|
||||
videoUrl = getFileUrl(asset.livePhotoVideoId, false, true, publicSharedKey);
|
||||
} else {
|
||||
videoUrl = getFileUrl(asset.id, false, true, publicSharedKey);
|
||||
}
|
||||
};
|
||||
|
||||
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) => {
|
||||
duration = duration || '0:00:00.00000';
|
||||
const timePart = duration.split(':');
|
||||
const hours = timePart[0];
|
||||
const minutes = timePart[1];
|
||||
const seconds = timePart[2];
|
||||
|
||||
if (hours != '0') {
|
||||
return `${hours}:${minutes}`;
|
||||
} else {
|
||||
return `${minutes}:${seconds.split('.')[0]}`;
|
||||
}
|
||||
};
|
||||
|
||||
const getSize = () => {
|
||||
if (thumbnailSize) {
|
||||
return `w-[${thumbnailSize}px] h-[${thumbnailSize}px]`;
|
||||
}
|
||||
|
||||
if (asset.exifInfo?.orientation === 'Rotate 90 CW') {
|
||||
return 'w-[176px] h-[235px]';
|
||||
} else if (asset.exifInfo?.orientation === 'Horizontal (normal)') {
|
||||
return 'w-[313px] h-[235px]';
|
||||
} else {
|
||||
return 'w-[235px] h-[235px]';
|
||||
}
|
||||
};
|
||||
|
||||
const handleMouseOverThumbnail = () => {
|
||||
mouseOver = true;
|
||||
};
|
||||
|
||||
const handleMouseLeaveThumbnail = () => {
|
||||
mouseOver = false;
|
||||
videoUrl = '';
|
||||
|
||||
clearInterval(calculateVideoDurationIntervalHandler);
|
||||
|
||||
isThumbnailVideoPlaying = false;
|
||||
videoProgress = '00:00';
|
||||
|
||||
if (videoPlayerNode) {
|
||||
videoPlayerNode.pause();
|
||||
}
|
||||
};
|
||||
|
||||
const handleCanPlay = (ev: Event) => {
|
||||
const playerNode = ev.target as HTMLVideoElement;
|
||||
|
||||
playerNode.muted = true;
|
||||
playerNode.play();
|
||||
|
||||
isThumbnailVideoPlaying = true;
|
||||
calculateVideoDurationIntervalHandler = setInterval(() => {
|
||||
videoProgress = getVideoDurationInString(Math.round(playerNode.currentTime));
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
$: getThumbnailBorderStyle = () => {
|
||||
if (selected) {
|
||||
return 'border-[20px] border-immich-primary/20';
|
||||
} else if (disabled) {
|
||||
return 'border-[20px] border-gray-300';
|
||||
} else if (isRoundedCorner) {
|
||||
return 'rounded-lg';
|
||||
} else {
|
||||
return '';
|
||||
}
|
||||
};
|
||||
|
||||
$: getOverlaySelectorIconStyle = () => {
|
||||
if (selected || disabled) {
|
||||
return '';
|
||||
} else {
|
||||
return 'bg-gradient-to-b from-gray-800/50';
|
||||
}
|
||||
};
|
||||
const thumbnailClickedHandler = () => {
|
||||
if (!disabled) {
|
||||
dispatch('click', { asset });
|
||||
}
|
||||
};
|
||||
|
||||
const onIconClickedHandler = (e: MouseEvent) => {
|
||||
e.stopPropagation();
|
||||
if (!disabled) {
|
||||
dispatch('select', { asset });
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<IntersectionObserver once={false} let:intersecting>
|
||||
<div
|
||||
style:width={`${thumbnailSize}px`}
|
||||
style:height={`${thumbnailSize}px`}
|
||||
class={`bg-gray-100 dark:bg-immich-dark-gray relative select-none ${getSize()} ${
|
||||
disabled ? 'cursor-not-allowed' : 'hover:cursor-pointer'
|
||||
}`}
|
||||
on:mouseenter={handleMouseOverThumbnail}
|
||||
on:mouseleave={handleMouseLeaveThumbnail}
|
||||
on:click={thumbnailClickedHandler}
|
||||
on:keydown={thumbnailClickedHandler}
|
||||
>
|
||||
{#if (mouseOver || selected || disabled) && !readonly}
|
||||
<div
|
||||
in:fade={{ duration: 200 }}
|
||||
class={`w-full ${getOverlaySelectorIconStyle()} via-white/0 to-white/0 absolute p-2 z-10`}
|
||||
>
|
||||
<button
|
||||
on:click={onIconClickedHandler}
|
||||
on:mouseenter={() => (mouseOverIcon = true)}
|
||||
on:mouseleave={() => (mouseOverIcon = false)}
|
||||
class="inline-block"
|
||||
>
|
||||
{#if selected}
|
||||
<CheckCircle size="24" color="#4250af" />
|
||||
{:else if disabled}
|
||||
<CheckCircle size="24" color="#252525" />
|
||||
{:else}
|
||||
<CheckCircle size="24" color={mouseOverIcon ? 'white' : '#d8dadb'} />
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if asset.isFavorite && !isPublicShared}
|
||||
<div class="w-full absolute bottom-2 left-2 z-10">
|
||||
<Star size="24" color={'white'} />
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Playback and info -->
|
||||
{#if asset.type === AssetTypeEnum.Video}
|
||||
<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}
|
||||
|
||||
{#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
|
||||
id={asset.id}
|
||||
style:width={`${thumbnailSize}px`}
|
||||
style:height={`${thumbnailSize}px`}
|
||||
src={`/api/asset/thumbnail/${asset.id}?format=${format}&key=${publicSharedKey}`}
|
||||
alt={asset.id}
|
||||
class={`object-cover ${getSize()} transition-all z-0 ${getThumbnailBorderStyle()}`}
|
||||
class:opacity-0={isImageLoading}
|
||||
loading="lazy"
|
||||
draggable="false"
|
||||
on:load|once={() => (isImageLoading = false)}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
{#if mouseOver && asset.type === AssetTypeEnum.Video}
|
||||
<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
|
||||
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}
|
||||
</div>
|
||||
</IntersectionObserver>
|
||||
|
||||
<style>
|
||||
img {
|
||||
transition: 0.2s ease all;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,24 @@
|
||||
import { describe, it, expect } from '@jest/globals';
|
||||
import { timeToSeconds } from './time-to-seconds';
|
||||
|
||||
describe('converting time to seconds', () => {
|
||||
it('parses hh:mm:ss correctly', () => {
|
||||
expect(timeToSeconds('01:02:03')).toBeCloseTo(3723);
|
||||
});
|
||||
|
||||
it('parses hh:mm:ss.SSS correctly', () => {
|
||||
expect(timeToSeconds('01:02:03.456')).toBeCloseTo(3723.456);
|
||||
});
|
||||
|
||||
it('parses h:m:s.S correctly', () => {
|
||||
expect(timeToSeconds('1:2:3.4')).toBeCloseTo(3723.4);
|
||||
});
|
||||
|
||||
it('parses hhh:mm:ss.SSS correctly', () => {
|
||||
expect(timeToSeconds('100:02:03.456')).toBeCloseTo(360123.456);
|
||||
});
|
||||
|
||||
it('ignores ignores double milliseconds hh:mm:ss.SSS.SSSSSS', () => {
|
||||
expect(timeToSeconds('01:02:03.456.123456')).toBeCloseTo(3723.456);
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,13 @@
|
||||
import { Duration } from 'luxon';
|
||||
|
||||
/**
|
||||
* Convert time like `01:02:03.456` to seconds.
|
||||
*/
|
||||
export function timeToSeconds(time: string) {
|
||||
const parts = time.split(':');
|
||||
parts[2] = parts[2].split('.').slice(0, 2).join('.');
|
||||
|
||||
const [hours, minutes, seconds] = parts.map(Number);
|
||||
|
||||
return Duration.fromObject({ hours, minutes, seconds }).as('seconds');
|
||||
}
|
||||
Loading…
Reference in New Issue