This commit is contained in:
Alex Tran
2023-11-28 23:10:43 -06:00
parent 5da036ba00
commit 78932f3483
13 changed files with 22 additions and 33 deletions
+1 -1
View File
@@ -1,4 +1,4 @@
<!doctype html> <!DOCTYPE html>
<html lang="en" class="dark"> <html lang="en" class="dark">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
@@ -20,7 +20,7 @@
import ThemeButton from '../shared-components/theme-button.svelte'; import ThemeButton from '../shared-components/theme-button.svelte';
import { shouldIgnoreShortcut } from '$lib/utils/shortcut'; import { shouldIgnoreShortcut } from '$lib/utils/shortcut';
import { mdiFileImagePlusOutline, mdiFolderDownloadOutline } from '@mdi/js'; import { mdiFileImagePlusOutline, mdiFolderDownloadOutline } from '@mdi/js';
import UpdatePanel from '../shared-components/update-panel.svelte'; import UpdatePanel from '../shared-components/update-panel.svelte';
export let sharedLink: SharedLinkResponseDto; export let sharedLink: SharedLinkResponseDto;
export let user: UserResponseDto | undefined = undefined; export let user: UserResponseDto | undefined = undefined;
@@ -169,5 +169,4 @@
</section> </section>
</AssetGrid> </AssetGrid>
<UpdatePanel {assetStore} /> <UpdatePanel {assetStore} />
</main> </main>
@@ -5,7 +5,7 @@
import { getAssetFilename } from '$lib/utils/asset-utils'; import { getAssetFilename } from '$lib/utils/asset-utils';
import { AlbumResponseDto, AssetResponseDto, ThumbnailFormat, api } from '@api'; import { AlbumResponseDto, AssetResponseDto, ThumbnailFormat, api } from '@api';
import { DateTime } from 'luxon'; import { DateTime } from 'luxon';
import { createEventDispatcher } from 'svelte'; import { createEventDispatcher, onDestroy } from 'svelte';
import { slide } from 'svelte/transition'; import { slide } from 'svelte/transition';
import { asByteUnitString } from '../../utils/byte-units'; import { asByteUnitString } from '../../utils/byte-units';
import ImageThumbnail from '../assets/thumbnail/image-thumbnail.svelte'; import ImageThumbnail from '../assets/thumbnail/image-thumbnail.svelte';
@@ -57,10 +57,14 @@
$: people = asset.people || []; $: people = asset.people || [];
const subscribe = websocketStore.onAssetUpdate.subscribe(assetUpdate => { const unsubscribe = websocketStore.onAssetUpdate.subscribe((assetUpdate) => {
if (assetUpdate && assetUpdate.id === asset.id) { if (assetUpdate && assetUpdate.id === asset.id) {
asset = assetUpdate; asset = assetUpdate;
} }
});
onDestroy(() => {
unsubscribe();
}); });
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
@@ -275,8 +275,6 @@
<style> <style>
.main-view { .main-view {
box-shadow: box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.3), 0 8px 12px 6px rgba(0, 0, 0, 0.15);
0 4px 4px 0 rgba(0, 0, 0, 0.3),
0 8px 12px 6px rgba(0, 0, 0, 0.15);
} }
</style> </style>
@@ -21,7 +21,6 @@
.map((a) => a.id); .map((a) => a.id);
try { try {
await api.assetApi.updateAssets({ await api.assetApi.updateAssets({
assetBulkUpdateDto: { assetBulkUpdateDto: {
ids, ids,
@@ -413,7 +413,6 @@
{/if} {/if}
</Portal> </Portal>
<style> <style>
#asset-grid { #asset-grid {
contain: layout; contain: layout;
@@ -91,8 +91,6 @@
<style> <style>
.memory-card { .memory-card {
box-shadow: box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
} }
</style> </style>
@@ -29,6 +29,7 @@
}; };
const handleConfirm = () => { const handleConfirm = () => {
if (!point) return;
dispatch('confirm', point); dispatch('confirm', point);
}; };
</script> </script>
@@ -37,8 +38,6 @@
confirmColor="primary" confirmColor="primary"
cancelColor="secondary" cancelColor="secondary"
title="Change Location" title="Change Location"
prompt="Please select a new location:"
disabled={!point}
on:confirm={handleConfirm} on:confirm={handleConfirm}
on:cancel={handleCancel} on:cancel={handleCancel}
> >
@@ -3,26 +3,24 @@
import type { AssetStore } from '$lib/stores/assets.store'; import type { AssetStore } from '$lib/stores/assets.store';
import { notificationController, NotificationType } from './notification/notification'; import { notificationController, NotificationType } from './notification/notification';
export let assetStore: AssetStore | null; export let assetStore: AssetStore | null;
let assetUpdateCount = 0; let assetUpdateCount = 0;
let lastAssetName: string; let lastAssetName: string;
let timeoutId: string | number | NodeJS.Timeout | undefined; let timeoutId: string | number | NodeJS.Timeout | undefined;
websocketStore.onAssetUpdate.subscribe(asset => { websocketStore.onAssetUpdate.subscribe((asset) => {
if (asset && asset.originalFileName && assetStore) { if (asset && asset.originalFileName && assetStore) {
lastAssetName = asset.originalFileName; lastAssetName = asset.originalFileName;
assetUpdateCount++; assetUpdateCount++;
assetStore.updateAsset(asset,true); assetStore.updateAsset(asset, true);
assetStore.removeAsset(asset.id); // Update timeline assetStore.removeAsset(asset.id); // Update timeline
assetStore.addAsset(asset); assetStore.addAsset(asset);
clearTimeout(timeoutId); clearTimeout(timeoutId);
timeoutId = setTimeout(() => { timeoutId = setTimeout(() => {
if (assetUpdateCount === 1) { if (assetUpdateCount === 1) {
notificationController.show({ notificationController.show({
message: `Asset updated: ${lastAssetName}.`, message: `Asset updated: ${lastAssetName}.`,
type: NotificationType.Info, type: NotificationType.Info,
@@ -37,5 +35,4 @@
}, 500); }, 500);
} }
}); });
</script>
</script>
+1 -4
View File
@@ -73,10 +73,7 @@ export class AssetStore {
assets: AssetResponseDto[] = []; assets: AssetResponseDto[] = [];
albumAssets: Set<string> = new Set(); albumAssets: Set<string> = new Set();
constructor( constructor(options: AssetStoreOptions, private albumId?: string) {
options: AssetStoreOptions,
private albumId?: string,
) {
this.options = { ...options, size: TimeBucketSize.Month }; this.options = { ...options, size: TimeBucketSize.Month };
this.store$.set(this); this.store$.set(this);
} }
+1 -1
View File
@@ -98,4 +98,4 @@
/> />
</AssetGrid> </AssetGrid>
</UserPageLayout> </UserPageLayout>
<UpdatePanel {assetStore} /> <UpdatePanel {assetStore} />
-1
View File
@@ -5,7 +5,6 @@
import NavigationLoadingBar from '$lib/components/shared-components/navigation-loading-bar.svelte'; import NavigationLoadingBar from '$lib/components/shared-components/navigation-loading-bar.svelte';
import DownloadPanel from '$lib/components/asset-viewer/download-panel.svelte'; import DownloadPanel from '$lib/components/asset-viewer/download-panel.svelte';
import UploadPanel from '$lib/components/shared-components/upload-panel.svelte'; import UploadPanel from '$lib/components/shared-components/upload-panel.svelte';
import UpdatePanel from '$lib/components/shared-components/update-panel.svelte';
import NotificationList from '$lib/components/shared-components/notification/notification-list.svelte'; import NotificationList from '$lib/components/shared-components/notification/notification-list.svelte';
import VersionAnnouncementBox from '$lib/components/shared-components/version-announcement-box.svelte'; import VersionAnnouncementBox from '$lib/components/shared-components/version-announcement-box.svelte';
import type { LayoutData } from './$types'; import type { LayoutData } from './$types';
@@ -181,8 +181,8 @@
isDeleted(user) isDeleted(user)
? 'bg-red-300 dark:bg-red-900' ? 'bg-red-300 dark:bg-red-900'
: i % 2 == 0 : i % 2 == 0
? 'bg-immich-gray dark:bg-immich-dark-gray/75' ? 'bg-immich-gray dark:bg-immich-dark-gray/75'
: 'bg-immich-bg dark:bg-immich-dark-gray/50' : 'bg-immich-bg dark:bg-immich-dark-gray/50'
}`} }`}
> >
<td class="w-4/12 text-ellipsis break-all px-2 text-sm">{user.email}</td> <td class="w-4/12 text-ellipsis break-all px-2 text-sm">{user.email}</td>
@@ -247,8 +247,8 @@
isDeleted(user) isDeleted(user)
? 'bg-red-300 dark:bg-red-900' ? 'bg-red-300 dark:bg-red-900'
: i % 2 == 0 : i % 2 == 0
? 'bg-immich-gray dark:bg-immich-dark-gray/75' ? 'bg-immich-gray dark:bg-immich-dark-gray/75'
: 'bg-immich-bg dark:bg-immich-dark-gray/50' : 'bg-immich-bg dark:bg-immich-dark-gray/50'
}`} }`}
> >
<td class="w-1/4 text-ellipsis break-words px-2 text-sm">{user.name}</td> <td class="w-1/4 text-ellipsis break-words px-2 text-sm">{user.name}</td>