cjones/immich
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'immich-main' into feat/shared-album-owner-labels

Browse Source
This commit is contained in:
CJPeckover
2025-08-25 18:27:51 -04:00
parent d0b49846dc d04675fb41
commit 55a196bfa0
67 changed files with 959 additions and 545 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/package.json
View File

@@ -1,6 +1,6 @@
{
"name": "immich-web",
"version": "1.139.2",
"version": "1.139.4",
"license": "GNU Affero General Public License version 3",
"type": "module",
"scripts": {

2
web/src/lib/components/onboarding-page/onboarding-theme.svelte
View File

@@ -24,7 +24,7 @@
</button>
<button
type="button"
class="dark w-1/2 aspect-square bg-light rounded-3xl dark:border-[3px] dark:border-immich-dark-primary border border-transparent"
class="w-1/2 aspect-square bg-dark dark:bg-light rounded-3xl transition-all shadow-sm hover:shadow-xl dark:border-[3px] dark:border-immich-dark-primary border border-transparent"
onclick={() => themeManager.setTheme(Theme.DARK)}
>
<div

3
web/src/lib/components/shared-components/number-range-input.svelte
View File

@@ -25,7 +25,8 @@
}: Props = $props();
const oninput = () => {
if (!value) {
// value can be 0
if (value === undefined) {
return;
}

2
web/src/lib/modals/AlbumPickerModal.svelte
View File

@@ -133,7 +133,7 @@
await onEnter();
break;
}
case 'm': {
case 'Control': {
e.preventDefault();
handleMultiSelect();
break;

4
web/src/lib/utils.ts
View File

@@ -74,6 +74,10 @@ class ApiError extends Error {
}
}
export const sleep = (ms: number) => {
return new Promise((resolve) => setTimeout(resolve, ms));
};
export const uploadRequest = async <T>(options: UploadRequestOptions): Promise<{ data: T; status: number }> => {
const { onUploadProgress: onProgress, data, url } = options;

9
web/src/lib/utils/asset-utils.ts
View File

@@ -9,7 +9,7 @@ import { assetsSnapshot } from '$lib/managers/timeline-manager/utils.svelte';
import type { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
import { isSelectingAllAssets } from '$lib/stores/assets-store.svelte';
import { preferences } from '$lib/stores/user.store';
import { downloadRequest, withError } from '$lib/utils';
import { downloadRequest, sleep, withError } from '$lib/utils';
import { getByteUnitString } from '$lib/utils/byte-units';
import { getFormatter } from '$lib/utils/i18n';
import { navigate } from '$lib/utils/navigation';
@@ -278,7 +278,12 @@ export const downloadFile = async (asset: AssetResponseDto) => {
const queryParams = asQueryString(authManager.params);
for (const { filename, id } of assets) {
for (const [i, { filename, id }] of assets.entries()) {
if (i !== 0) {
// play nice with Safari
await sleep(500);
}
try {
notificationController.show({
type: NotificationType.Info,

32
web/src/lib/utils/date-time.spec.ts
View File

@@ -11,15 +11,41 @@ describe('converting time to seconds', () => {
});
it('parses h:m:s.S correctly', () => {
expect(timeToSeconds('1:2:3.4')).toBeCloseTo(3723.4);
expect(timeToSeconds('1:2:3.4')).toBe(0); // Non-standard format, Luxon returns NaN
});
it('parses hhh:mm:ss.SSS correctly', () => {
expect(timeToSeconds('100:02:03.456')).toBeCloseTo(360_123.456);
expect(timeToSeconds('100:02:03.456')).toBe(0); // Non-standard format, Luxon returns NaN
});
it('ignores ignores double milliseconds hh:mm:ss.SSS.SSSSSS', () => {
expect(timeToSeconds('01:02:03.456.123456')).toBeCloseTo(3723.456);
expect(timeToSeconds('01:02:03.456.123456')).toBe(0); // Non-standard format, Luxon returns NaN
});
// Test edge cases that can cause crashes
it('handles "0" string input', () => {
expect(timeToSeconds('0')).toBe(0);
});
it('handles empty string input', () => {
expect(timeToSeconds('')).toBe(0);
});
it('parses HH:MM format correctly', () => {
expect(timeToSeconds('01:02')).toBe(3720); // 1 hour 2 minutes = 3720 seconds
});
it('handles malformed time strings', () => {
expect(timeToSeconds('invalid')).toBe(0);
});
it('parses single hour format correctly', () => {
expect(timeToSeconds('01')).toBe(3600); // Luxon interprets "01" as 1 hour
});
it('handles time strings with invalid numbers', () => {
expect(timeToSeconds('aa:bb:cc')).toBe(0);
expect(timeToSeconds('01:bb:03')).toBe(0);
});
});

10
web/src/lib/utils/date-time.ts
View File

@@ -7,14 +7,14 @@ import { get } from 'svelte/store';
* 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('.');
if (!time || time === '0') {
return 0;
}
const [hours, minutes, seconds] = parts.map(Number);
const seconds = Duration.fromISOTime(time).as('seconds');
return Duration.fromObject({ hours, minutes, seconds }).as('seconds');
return Number.isNaN(seconds) ? 0 : seconds;
}
export function parseUtcDate(date: string) {
return DateTime.fromISO(date, { zone: 'UTC' }).toUTC();
}

18
web/src/routes/(user)/utilities/duplicates/[[photos=photos]]/[[assetId=id]]/+page.svelte
View File

@@ -11,6 +11,7 @@
import { AppRoute } from '$lib/constants';
import DuplicatesInformationModal from '$lib/modals/DuplicatesInformationModal.svelte';
import ShortcutsModal from '$lib/modals/ShortcutsModal.svelte';
import { assetViewingStore } from '$lib/stores/asset-viewing.store';
import { locale } from '$lib/stores/preferences.store';
import { featureFlags } from '$lib/stores/server-config.store';
import { stackAssets } from '$lib/utils/asset-utils';
@@ -60,6 +61,7 @@
};
let duplicates = $state(data.duplicates);
const { isViewing: showAssetViewer } = assetViewingStore;
const correctDuplicatesIndex = (index: number) => {
return Math.max(0, Math.min(index, duplicates.length - 1));
@@ -189,9 +191,21 @@
const handlePrevious = async () => {
await correctDuplicatesIndexAndGo(Math.max(duplicatesIndex - 1, 0));
};
const handlePreviousShortcut = async () => {
if ($showAssetViewer) {
return;
}
await handlePrevious();
};
const handleNext = async () => {
await correctDuplicatesIndexAndGo(Math.min(duplicatesIndex + 1, duplicates.length - 1));
};
const handleNextShortcut = async () => {
if ($showAssetViewer) {
return;
}
await handleNext();
};
const handleLast = async () => {
await correctDuplicatesIndexAndGo(duplicates.length - 1);
};
@@ -203,8 +217,8 @@
<svelte:document
use:shortcuts={[
{ shortcut: { key: 'ArrowLeft' }, onShortcut: handlePrevious },
{ shortcut: { key: 'ArrowRight' }, onShortcut: handleNext },
{ shortcut: { key: 'ArrowLeft' }, onShortcut: handlePreviousShortcut },
{ shortcut: { key: 'ArrowRight' }, onShortcut: handleNextShortcut },
]}
/>

21
web/src/service-worker/broadcast-channel.ts
View File

@@ -1,4 +1,4 @@
import { cancelLoad, getCachedOrFetch } from './fetch-event';
import { handleCancel, handlePreload } from './request';
export const installBroadcastChannelListener = () => {
const broadcast = new BroadcastChannel('immich');
@@ -7,12 +7,19 @@ export const installBroadcastChannelListener = () => {
if (!event.data) {
return;
}
const urlstring = event.data.url;
const url = new URL(urlstring, event.origin);
if (event.data.type === 'cancel') {
cancelLoad(url.toString());
} else if (event.data.type === 'preload') {
getCachedOrFetch(url);
const url = new URL(event.data.url, event.origin);
switch (event.data.type) {
case 'preload': {
handlePreload(url);
break;
}
case 'cancel': {
handleCancel(url);
break;
}
}
};
};

124
web/src/service-worker/cache.ts
View File

@@ -1,104 +1,42 @@
import { build, files, version } from '$service-worker';
import { version } from '$service-worker';
const useCache = true;
const CACHE = `cache-${version}`;
export const APP_RESOURCES = [
...build, // the app itself
...files, // everything in `static`
];
let cache: Cache | undefined;
export async function getCache() {
if (cache) {
return cache;
let _cache: Cache | undefined;
const getCache = async () => {
if (_cache) {
return _cache;
}
cache = await caches.open(CACHE);
return cache;
}
_cache = await caches.open(CACHE);
return _cache;
};
export const isURL = (request: URL | RequestInfo): request is URL => (request as URL).href !== undefined;
export const isRequest = (request: RequestInfo): request is Request => (request as Request).url !== undefined;
export const get = async (key: string) => {
const cache = await getCache();
if (!cache) {
return;
}
export async function deleteOldCaches() {
return cache.match(key);
};
export const put = async (key: string, response: Response) => {
if (response.status !== 200) {
return;
}
const cache = await getCache();
if (!cache) {
return;
}
cache.put(key, response.clone());
};
export const prune = async () => {
for (const key of await caches.keys()) {
if (key !== CACHE) {
await caches.delete(key);
}
}
}
const pendingRequests = new Map<string, AbortController>();
const canceledRequests = new Set<string>();
export async function cancelLoad(urlString: string) {
const pending = pendingRequests.get(urlString);
if (pending) {
canceledRequests.add(urlString);
pending.abort();
pendingRequests.delete(urlString);
}
}
export async function getCachedOrFetch(request: URL | Request | string) {
const response = await checkCache(request);
if (response) {
return response;
}
const urlString = getCacheKey(request);
const cancelToken = new AbortController();
try {
pendingRequests.set(urlString, cancelToken);
const response = await fetch(request, {
signal: cancelToken.signal,
});
checkResponse(response);
await setCached(response, urlString);
return response;
} catch (error) {
if (canceledRequests.has(urlString)) {
canceledRequests.delete(urlString);
return new Response(undefined, {
status: 499,
statusText: 'Request canceled: Instructions unclear, accidentally interrupted myself',
});
}
throw error;
} finally {
pendingRequests.delete(urlString);
}
}
export async function checkCache(url: URL | Request | string) {
if (!useCache) {
return;
}
const cache = await getCache();
return await cache.match(url);
}
export async function setCached(response: Response, cacheKey: URL | Request | string) {
if (cache && response.status === 200) {
const cache = await getCache();
cache.put(cacheKey, response.clone());
}
}
function checkResponse(response: Response) {
if (!(response instanceof Response)) {
throw new TypeError('Fetch did not return a valid Response object');
}
}
export function getCacheKey(request: URL | Request | string) {
if (isURL(request)) {
return request.toString();
} else if (isRequest(request)) {
return request.url;
} else {
return request;
}
}
};

113
web/src/service-worker/fetch-event.ts
View File

@@ -1,113 +0,0 @@
import { version } from '$service-worker';
import { APP_RESOURCES, checkCache, getCacheKey, setCached } from './cache';
const CACHE = `cache-${version}`;
export const isURL = (request: URL | RequestInfo): request is URL => (request as URL).href !== undefined;
export const isRequest = (request: RequestInfo): request is Request => (request as Request).url !== undefined;
export async function deleteOldCaches() {
for (const key of await caches.keys()) {
if (key !== CACHE) {
await caches.delete(key);
}
}
}
const pendingLoads = new Map<string, AbortController>();
export async function cancelLoad(urlString: string) {
const pending = pendingLoads.get(urlString);
if (pending) {
pending.abort();
pendingLoads.delete(urlString);
}
}
export async function getCachedOrFetch(request: URL | Request | string) {
const response = await checkCache(request);
if (response) {
return response;
}
try {
return await fetchWithCancellation(request);
} catch {
return new Response(undefined, {
status: 499,
statusText: 'Request canceled: Instructions unclear, accidentally interrupted myself',
});
}
}
async function fetchWithCancellation(request: URL | Request | string) {
const cacheKey = getCacheKey(request);
const cancelToken = new AbortController();
try {
pendingLoads.set(cacheKey, cancelToken);
const response = await fetch(request, {
signal: cancelToken.signal,
});
checkResponse(response);
setCached(response, cacheKey);
return response;
} finally {
pendingLoads.delete(cacheKey);
}
}
function checkResponse(response: Response) {
if (!(response instanceof Response)) {
throw new TypeError('Fetch did not return a valid Response object');
}
}
function isIgnoredFileType(pathname: string): boolean {
return /\.(png|ico|txt|json|ts|ttf|css|js|svelte)$/.test(pathname);
}
function isIgnoredPath(pathname: string): boolean {
return (
/^\/(src|api)(\/.*)?$/.test(pathname) || /node_modules/.test(pathname) || /^\/@(vite|id)(\/.*)?$/.test(pathname)
);
}
function isAssetRequest(pathname: string): boolean {
return /^\/api\/assets\/[a-f0-9-]+\/(original|thumbnail)/.test(pathname);
}
export function handleFetchEvent(event: FetchEvent): void {
if (event.request.method !== 'GET') {
return;
}
const url = new URL(event.request.url);
// Only handle requests to the same origin
if (url.origin !== self.location.origin) {
return;
}
// Do not cache app resources
if (APP_RESOURCES.includes(url.pathname)) {
return;
}
// Cache requests for thumbnails
if (isAssetRequest(url.pathname)) {
event.respondWith(getCachedOrFetch(event.request));
return;
}
// Do not cache ignored file types or paths
if (isIgnoredFileType(url.pathname) || isIgnoredPath(url.pathname)) {
return;
}
// At this point, the only remaining requests for top level routes
// so serve the Svelte SPA fallback page
const slash = new URL('/', url.origin);
event.respondWith(getCachedOrFetch(slash));
}

23
web/src/service-worker/index.ts
View File

@@ -3,14 +3,16 @@
/// <reference lib="esnext" />
/// <reference lib="webworker" />
import { installBroadcastChannelListener } from './broadcast-channel';
import { deleteOldCaches } from './cache';
import { handleFetchEvent } from './fetch-event';
import { prune } from './cache';
import { handleRequest } from './request';
const ASSET_REQUEST_REGEX = /^\/api\/assets\/[a-f0-9-]+\/(original|thumbnail)/;
const sw = globalThis as unknown as ServiceWorkerGlobalScope;
const handleActivate = (event: ExtendableEvent) => {
event.waitUntil(sw.clients.claim());
event.waitUntil(deleteOldCaches());
event.waitUntil(prune());
};
const handleInstall = (event: ExtendableEvent) => {
@@ -18,7 +20,20 @@ const handleInstall = (event: ExtendableEvent) => {
// do not preload app resources
};
const handleFetch = (event: FetchEvent): void => {
if (event.request.method !== 'GET') {
return;
}
// Cache requests for thumbnails
const url = new URL(event.request.url);
if (url.origin === self.location.origin && ASSET_REQUEST_REGEX.test(url.pathname)) {
event.respondWith(handleRequest(event.request));
return;
}
};
sw.addEventListener('install', handleInstall, { passive: true });
sw.addEventListener('activate', handleActivate, { passive: true });
sw.addEventListener('fetch', handleFetchEvent, { passive: true });
sw.addEventListener('fetch', handleFetch, { passive: true });
installBroadcastChannelListener();

73
web/src/service-worker/request.ts Normal file
View File

@@ -0,0 +1,73 @@
import { get, put } from './cache';
const pendingRequests = new Map<string, AbortController>();
const isURL = (request: URL | RequestInfo): request is URL => (request as URL).href !== undefined;
const isRequest = (request: RequestInfo): request is Request => (request as Request).url !== undefined;
const assertResponse = (response: Response) => {
if (!(response instanceof Response)) {
throw new TypeError('Fetch did not return a valid Response object');
}
};
const getCacheKey = (request: URL | Request) => {
if (isURL(request)) {
return request.toString();
}
if (isRequest(request)) {
return request.url;
}
throw new Error(`Invalid request: ${request}`);
};
export const handlePreload = async (request: URL | Request) => {
try {
return await handleRequest(request);
} catch (error) {
console.error(`Preload failed: ${error}`);
}
};
export const handleRequest = async (request: URL | Request) => {
const cacheKey = getCacheKey(request);
const cachedResponse = await get(cacheKey);
if (cachedResponse) {
return cachedResponse;
}
try {
const cancelToken = new AbortController();
pendingRequests.set(cacheKey, cancelToken);
const response = await fetch(request, { signal: cancelToken.signal });
assertResponse(response);
put(cacheKey, response);
return response;
} catch (error) {
if (error.name === 'AbortError') {
// dummy response avoids network errors in the console for these requests
return new Response(undefined, { status: 204 });
}
console.log('Not an abort error', error);
throw error;
} finally {
pendingRequests.delete(cacheKey);
}
};
export const handleCancel = (url: URL) => {
const cacheKey = getCacheKey(url);
const pendingRequest = pendingRequests.get(cacheKey);
if (!pendingRequest) {
return;
}
pendingRequest.abort();
pendingRequests.delete(cacheKey);
};

1
web/src/test-data/factories/asset-factory.ts
View File

@@ -6,6 +6,7 @@ import { Sync } from 'factory.ts';
export const assetFactory = Sync.makeFactory<AssetResponseDto>({
id: Sync.each(() => faker.string.uuid()),
createdAt: Sync.each(() => faker.date.past().toISOString()),
deviceAssetId: Sync.each(() => faker.string.uuid()),
ownerId: Sync.each(() => faker.string.uuid()),
deviceId: '',