refactor(web): drop axios (#7490)
* refactor: downloadApi * refactor: assetApi * chore: drop axios * chore: tidy up * chore: fix exports * fix: show notification when download starts
This commit is contained in:
Jason Rasmussen
Generated
+19
-89
@@ -13,7 +13,6 @@
|
||||
"@mdi/js": "^7.4.47",
|
||||
"@photo-sphere-viewer/core": "^5.7.1",
|
||||
"@zoom-image/svelte": "^0.2.6",
|
||||
"axios": "^1.6.7",
|
||||
"buffer": "^6.0.3",
|
||||
"copy-image-clipboard": "^2.1.2",
|
||||
"dom-to-image": "^2.6.0",
|
||||
@@ -28,7 +27,6 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@faker-js/faker": "^8.4.1",
|
||||
"@floating-ui/dom": "^1.6.3",
|
||||
"@socket.io/component-emitter": "^3.1.0",
|
||||
"@sveltejs/adapter-static": "^3.0.1",
|
||||
"@sveltejs/enhanced-img": "^0.1.8",
|
||||
@@ -49,7 +47,6 @@
|
||||
"eslint-plugin-svelte": "^2.35.1",
|
||||
"eslint-plugin-unicorn": "^51.0.1",
|
||||
"factory.ts": "^1.4.1",
|
||||
"identity-obj-proxy": "^3.0.0",
|
||||
"postcss": "^8.4.35",
|
||||
"prettier": "^3.2.5",
|
||||
"prettier-plugin-organize-imports": "^3.2.4",
|
||||
@@ -72,14 +69,6 @@
|
||||
"@oazapfts/runtime": "^1.0.0",
|
||||
"@types/node": "^20.11.0",
|
||||
"typescript": "^5.3.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"axios": "^1.6.7"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"axios": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@aashutoshrathi/word-wrap": {
|
||||
@@ -922,31 +911,6 @@
|
||||
"npm": ">=6.14.13"
|
||||
}
|
||||
},
|
||||
"node_modules/@floating-ui/core": {
|
||||
"version": "1.6.0",
|
||||
"resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.0.tgz",
|
||||
"integrity": "sha512-PcF++MykgmTj3CIyOQbKA/hDzOAiqI3mhuoN44WRCopIs1sgoDoU4oty4Jtqaj/y3oDU6fnVSm4QG0a3t5i0+g==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@floating-ui/utils": "^0.2.1"
|
||||
}
|
||||
},
|
||||
"node_modules/@floating-ui/dom": {
|
||||
"version": "1.6.3",
|
||||
"resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.3.tgz",
|
||||
"integrity": "sha512-RnDthu3mzPlQ31Ss/BTwQ1zjzIhr3lk1gZB1OC56h/1vEtaXkESrOqL5fQVMfXpwGtRwX+YsZBdyHtJMQnkArw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@floating-ui/core": "^1.0.0",
|
||||
"@floating-ui/utils": "^0.2.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@floating-ui/utils": {
|
||||
"version": "0.2.1",
|
||||
"resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.1.tgz",
|
||||
"integrity": "sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@humanwhocodes/config-array": {
|
||||
"version": "0.11.14",
|
||||
"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",
|
||||
@@ -3031,7 +2995,10 @@
|
||||
"node_modules/asynckit": {
|
||||
"version": "0.4.0",
|
||||
"resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
|
||||
"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
|
||||
"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/autoprefixer": {
|
||||
"version": "10.4.17",
|
||||
@@ -3082,16 +3049,6 @@
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/axios": {
|
||||
"version": "1.6.7",
|
||||
"resolved": "https://registry.npmjs.org/axios/-/axios-1.6.7.tgz",
|
||||
"integrity": "sha512-/hDJGff6/c7u0hDkvkGxR/oy6CbCs8ziCsC7SqmhjfozqiJGc8Z11wrv9z9lYfY4K8l+H9TpjcMDX0xOZmx+RA==",
|
||||
"dependencies": {
|
||||
"follow-redirects": "^1.15.4",
|
||||
"form-data": "^4.0.0",
|
||||
"proxy-from-env": "^1.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/axobject-query": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.0.0.tgz",
|
||||
@@ -3525,6 +3482,9 @@
|
||||
"version": "1.0.8",
|
||||
"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
|
||||
"integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"delayed-stream": "~1.0.0"
|
||||
},
|
||||
@@ -3799,6 +3759,9 @@
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
|
||||
"integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"node": ">=0.4.0"
|
||||
}
|
||||
@@ -4655,25 +4618,6 @@
|
||||
"integrity": "sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/follow-redirects": {
|
||||
"version": "1.15.5",
|
||||
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.5.tgz",
|
||||
"integrity": "sha512-vSFWUON1B+yAw1VN4xMfxgn5fTUiaOzAJCKBwIIgT/+7CuGy9+r+5gITvP62j3RmaD5Ph65UaERdOSRGUzZtgw==",
|
||||
"funding": [
|
||||
{
|
||||
"type": "individual",
|
||||
"url": "https://github.com/sponsors/RubenVerborgh"
|
||||
}
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=4.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"debug": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/for-each": {
|
||||
"version": "0.3.3",
|
||||
"resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
|
||||
@@ -4687,6 +4631,9 @@
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
|
||||
"integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"asynckit": "^0.4.0",
|
||||
"combined-stream": "^1.0.8",
|
||||
@@ -4960,12 +4907,6 @@
|
||||
"uglify-js": "^3.1.4"
|
||||
}
|
||||
},
|
||||
"node_modules/harmony-reflect": {
|
||||
"version": "1.6.2",
|
||||
"resolved": "https://registry.npmjs.org/harmony-reflect/-/harmony-reflect-1.6.2.tgz",
|
||||
"integrity": "sha512-HIp/n38R9kQjDEziXyDTuW3vvoxxyxjxFzXLrBr18uB47GnSt+G9D29fqrpM5ZkspMcPICud3XsBJQ4Y2URg8g==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/has": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
|
||||
@@ -5126,18 +5067,6 @@
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/identity-obj-proxy": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/identity-obj-proxy/-/identity-obj-proxy-3.0.0.tgz",
|
||||
"integrity": "sha512-00n6YnVHKrinT9t0d9+5yZC6UBNJANpYEQvL2LlX6Ab9lnmxzIRcEmTPuyGScvl1+jKuCICX1Z0Ab1pPKKdikA==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"harmony-reflect": "^1.4.6"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=4"
|
||||
}
|
||||
},
|
||||
"node_modules/ieee754": {
|
||||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
|
||||
@@ -6193,6 +6122,9 @@
|
||||
"version": "1.52.0",
|
||||
"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
|
||||
"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"node": ">= 0.6"
|
||||
}
|
||||
@@ -6201,6 +6133,9 @@
|
||||
"version": "2.1.35",
|
||||
"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
|
||||
"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"mime-db": "1.52.0"
|
||||
},
|
||||
@@ -7039,11 +6974,6 @@
|
||||
"resolved": "https://registry.npmjs.org/protocol-buffers-schema/-/protocol-buffers-schema-3.6.0.tgz",
|
||||
"integrity": "sha512-TdDRD+/QNdrCGCE7v8340QyuXd4kIWIgapsE2+n/SaGiSSbomYl4TjHlvIoCWRpE7wFt02EpB35VVA2ImcBVqw=="
|
||||
},
|
||||
"node_modules/proxy-from-env": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
|
||||
"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
|
||||
},
|
||||
"node_modules/psl": {
|
||||
"version": "1.9.0",
|
||||
"resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",
|
||||
|
||||
@@ -23,7 +23,6 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@faker-js/faker": "^8.4.1",
|
||||
"@floating-ui/dom": "^1.6.3",
|
||||
"@socket.io/component-emitter": "^3.1.0",
|
||||
"@sveltejs/adapter-static": "^3.0.1",
|
||||
"@sveltejs/enhanced-img": "^0.1.8",
|
||||
@@ -44,7 +43,6 @@
|
||||
"eslint-plugin-svelte": "^2.35.1",
|
||||
"eslint-plugin-unicorn": "^51.0.1",
|
||||
"factory.ts": "^1.4.1",
|
||||
"identity-obj-proxy": "^3.0.0",
|
||||
"postcss": "^8.4.35",
|
||||
"prettier": "^3.2.5",
|
||||
"prettier-plugin-organize-imports": "^3.2.4",
|
||||
@@ -64,7 +62,6 @@
|
||||
"@mdi/js": "^7.4.47",
|
||||
"@photo-sphere-viewer/core": "^5.7.1",
|
||||
"@zoom-image/svelte": "^0.2.6",
|
||||
"axios": "^1.6.7",
|
||||
"buffer": "^6.0.3",
|
||||
"copy-image-clipboard": "^2.1.2",
|
||||
"dom-to-image": "^2.6.0",
|
||||
|
||||
@@ -1,14 +0,0 @@
|
||||
import { AssetApi, DownloadApi, configuration } from '@immich/sdk/axios';
|
||||
|
||||
class ImmichApi {
|
||||
public downloadApi: DownloadApi;
|
||||
public assetApi: AssetApi;
|
||||
|
||||
constructor(parameters: configuration.ConfigurationParameters) {
|
||||
const config = new configuration.Configuration(parameters);
|
||||
this.downloadApi = new DownloadApi(config);
|
||||
this.assetApi = new AssetApi(config);
|
||||
}
|
||||
}
|
||||
|
||||
export const api = new ImmichApi({ basePath: '/api' });
|
||||
@@ -1,14 +1,18 @@
|
||||
import { createObjectURLMock } from '$lib/__mocks__/jsdom-url.mock';
|
||||
import { api } from '$lib/api';
|
||||
import { ThumbnailFormat } from '@immich/sdk';
|
||||
import sdk, { ThumbnailFormat } from '@immich/sdk';
|
||||
import { albumFactory } from '@test-data';
|
||||
import '@testing-library/jest-dom';
|
||||
import { fireEvent, render, waitFor, type RenderResult } from '@testing-library/svelte';
|
||||
import type { MockedObject } from 'vitest';
|
||||
import AlbumCard from '../album-card.svelte';
|
||||
|
||||
vi.mock('$lib/api');
|
||||
const apiMock: MockedObject<typeof api> = api as MockedObject<typeof api>;
|
||||
vi.mock('@immich/sdk', async (originalImport) => {
|
||||
const module = await originalImport<typeof import('@immich/sdk')>();
|
||||
const mock = { ...module, getAssetThumbnail: vi.fn() };
|
||||
return { ...mock, default: mock };
|
||||
});
|
||||
|
||||
const sdkMock: MockedObject<typeof sdk> = sdk as MockedObject<typeof sdk>;
|
||||
|
||||
describe('AlbumCard component', () => {
|
||||
let sut: RenderResult<AlbumCard>;
|
||||
@@ -48,7 +52,7 @@ describe('AlbumCard component', () => {
|
||||
await waitFor(() => expect(albumImgElement).toHaveAttribute('src'));
|
||||
|
||||
expect(albumImgElement).toHaveAttribute('alt', album.id);
|
||||
expect(apiMock.assetApi.getAssetThumbnail).not.toHaveBeenCalled();
|
||||
expect(sdkMock.getAssetThumbnail).not.toHaveBeenCalled();
|
||||
|
||||
expect(albumNameElement).toHaveTextContent(album.albumName);
|
||||
expect(albumDetailsElement).toHaveTextContent(new RegExp(detailsText));
|
||||
@@ -57,17 +61,7 @@ describe('AlbumCard component', () => {
|
||||
it('shows album data and loads the thumbnail image when available', async () => {
|
||||
const thumbnailFile = new File([new Blob()], 'fileThumbnail');
|
||||
const thumbnailUrl = 'blob:thumbnailUrlOne';
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-ignore
|
||||
// TODO: there needs to be a more robust mock of the @api to avoid mockResolvedValueOnce ts error
|
||||
// this is a workaround to make ts checks not fail but the test will pass as expected
|
||||
apiMock.assetApi.getAssetThumbnail.mockResolvedValue({
|
||||
data: thumbnailFile,
|
||||
config: {},
|
||||
headers: {},
|
||||
status: 200,
|
||||
statusText: '',
|
||||
});
|
||||
sdkMock.getAssetThumbnail.mockResolvedValue(thumbnailFile);
|
||||
createObjectURLMock.mockReturnValueOnce(thumbnailUrl);
|
||||
|
||||
const album = albumFactory.build({
|
||||
@@ -85,14 +79,11 @@ describe('AlbumCard component', () => {
|
||||
await waitFor(() => expect(albumImgElement).toHaveAttribute('src', thumbnailUrl));
|
||||
|
||||
expect(albumImgElement).toHaveAttribute('alt', album.id);
|
||||
expect(apiMock.assetApi.getAssetThumbnail).toHaveBeenCalledTimes(1);
|
||||
expect(apiMock.assetApi.getAssetThumbnail).toHaveBeenCalledWith(
|
||||
{
|
||||
id: 'thumbnailIdOne',
|
||||
format: ThumbnailFormat.Jpeg,
|
||||
},
|
||||
{ responseType: 'blob' },
|
||||
);
|
||||
expect(sdkMock.getAssetThumbnail).toHaveBeenCalledTimes(1);
|
||||
expect(sdkMock.getAssetThumbnail).toHaveBeenCalledWith({
|
||||
id: 'thumbnailIdOne',
|
||||
format: ThumbnailFormat.Jpeg,
|
||||
});
|
||||
expect(createObjectURLMock).toHaveBeenCalledWith(thumbnailFile);
|
||||
|
||||
expect(albumNameElement).toHaveTextContent('some album name');
|
||||
|
||||
@@ -1,10 +1,9 @@
|
||||
<script lang="ts">
|
||||
import { api } from '$lib/api';
|
||||
import Icon from '$lib/components/elements/icon.svelte';
|
||||
import { locale } from '$lib/stores/preferences.store';
|
||||
import { user } from '$lib/stores/user.store';
|
||||
import { getAssetThumbnailUrl } from '$lib/utils';
|
||||
import { ThumbnailFormat, getUserById, type AlbumResponseDto } from '@immich/sdk';
|
||||
import { ThumbnailFormat, getAssetThumbnail, getUserById, type AlbumResponseDto } from '@immich/sdk';
|
||||
import { mdiDotsVertical } from '@mdi/js';
|
||||
import { createEventDispatcher, onMount } from 'svelte';
|
||||
import { getContextMenuPosition } from '../../utils/context-menu';
|
||||
@@ -25,24 +24,13 @@
|
||||
const dispatchClick = createEventDispatcher<OnClick>();
|
||||
const dispatchShowContextMenu = createEventDispatcher<OnShowContextMenu>();
|
||||
|
||||
const loadHighQualityThumbnail = async (thubmnailId: string | null) => {
|
||||
if (thubmnailId == undefined) {
|
||||
const loadHighQualityThumbnail = async (assetId: string | null) => {
|
||||
if (!assetId) {
|
||||
return;
|
||||
}
|
||||
|
||||
const { data } = await api.assetApi.getAssetThumbnail(
|
||||
{
|
||||
id: thubmnailId,
|
||||
format: ThumbnailFormat.Jpeg,
|
||||
},
|
||||
{
|
||||
responseType: 'blob',
|
||||
},
|
||||
);
|
||||
|
||||
if (data instanceof Blob) {
|
||||
return URL.createObjectURL(data);
|
||||
}
|
||||
const data = await getAssetThumbnail({ id: assetId, format: ThumbnailFormat.Jpeg });
|
||||
return URL.createObjectURL(data);
|
||||
};
|
||||
|
||||
const showAlbumContextMenu = (e: MouseEvent) =>
|
||||
|
||||
@@ -1,22 +1,13 @@
|
||||
<script lang="ts">
|
||||
import { api } from '$lib/api';
|
||||
import { getKey } from '$lib/utils';
|
||||
import { type AssetResponseDto } from '@immich/sdk';
|
||||
import { serveFile, type AssetResponseDto } from '@immich/sdk';
|
||||
import { fade } from 'svelte/transition';
|
||||
import LoadingSpinner from '../shared-components/loading-spinner.svelte';
|
||||
|
||||
export let asset: AssetResponseDto;
|
||||
|
||||
const loadAssetData = async () => {
|
||||
const { data } = await api.assetApi.serveFile(
|
||||
{ id: asset.id, isThumb: false, isWeb: false, key: getKey() },
|
||||
{ responseType: 'blob' },
|
||||
);
|
||||
if (data instanceof Blob) {
|
||||
return URL.createObjectURL(data);
|
||||
} else {
|
||||
throw new TypeError('Invalid data format');
|
||||
}
|
||||
const data = await serveFile({ id: asset.id, isWeb: false, isThumb: false });
|
||||
return URL.createObjectURL(data);
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
@@ -1,10 +1,9 @@
|
||||
<script lang="ts">
|
||||
import { api } from '$lib/api';
|
||||
import { photoViewer } from '$lib/stores/assets.store';
|
||||
import { boundingBoxesArray } from '$lib/stores/people.store';
|
||||
import { alwaysLoadOriginalFile } from '$lib/stores/preferences.store';
|
||||
import { photoZoomState } from '$lib/stores/zoom-image.store';
|
||||
import { getKey, handlePromiseError } from '$lib/utils';
|
||||
import { downloadRequest, getAssetFileUrl, handlePromiseError } from '$lib/utils';
|
||||
import { isWebCompatibleImage } from '$lib/utils/asset-utils';
|
||||
import { getBoundingBox } from '$lib/utils/people-utils';
|
||||
import { shouldIgnoreShortcut } from '$lib/utils/shortcut';
|
||||
@@ -51,17 +50,11 @@
|
||||
abortController?.abort();
|
||||
abortController = new AbortController();
|
||||
|
||||
const { data } = await api.assetApi.serveFile(
|
||||
{ id: asset.id, isThumb: false, isWeb: !loadOriginal, key: getKey() },
|
||||
{
|
||||
responseType: 'blob',
|
||||
signal: abortController.signal,
|
||||
},
|
||||
);
|
||||
|
||||
if (!(data instanceof Blob)) {
|
||||
return;
|
||||
}
|
||||
// TODO: Use sdk once it supports signals
|
||||
const { data } = await downloadRequest({
|
||||
url: getAssetFileUrl(asset.id, !loadOriginal, false),
|
||||
signal: abortController.signal,
|
||||
});
|
||||
|
||||
assetData = URL.createObjectURL(data);
|
||||
} catch {
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
import Icon from '$lib/components/elements/icon.svelte';
|
||||
import { mdiAlertOutline, mdiCheckCircleOutline, mdiPencilOutline, mdiRefresh } from '@mdi/js';
|
||||
import { validate, type LibraryResponseDto } from '@immich/sdk';
|
||||
import type { ValidateLibraryImportPathResponseDto } from '@immich/sdk/axios';
|
||||
import type { ValidateLibraryImportPathResponseDto } from '@immich/sdk';
|
||||
import { NotificationType, notificationController } from '../shared-components/notification/notification';
|
||||
|
||||
export let library: LibraryResponseDto;
|
||||
|
||||
@@ -35,7 +35,7 @@
|
||||
return;
|
||||
} catch (error) {
|
||||
console.error('Error [login-form] [oauth.callback]', error);
|
||||
oauthError = (await getServerErrorMessage(error)) || 'Unable to complete OAuth login';
|
||||
oauthError = getServerErrorMessage(error) || 'Unable to complete OAuth login';
|
||||
oauthLoading = false;
|
||||
}
|
||||
}
|
||||
@@ -73,7 +73,7 @@
|
||||
await onSuccess();
|
||||
return;
|
||||
} catch (error) {
|
||||
errorMessage = (await getServerErrorMessage(error)) || 'Incorrect email or password';
|
||||
errorMessage = getServerErrorMessage(error) || 'Incorrect email or password';
|
||||
loading = false;
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -13,6 +13,101 @@ import {
|
||||
type UserResponseDto,
|
||||
} from '@immich/sdk';
|
||||
|
||||
interface DownloadRequestOptions<T = unknown> {
|
||||
method?: 'GET' | 'POST' | 'PUT' | 'DELETE';
|
||||
url: string;
|
||||
data?: T;
|
||||
signal?: AbortSignal;
|
||||
onDownloadProgress?: (event: ProgressEvent<XMLHttpRequestEventTarget>) => void;
|
||||
}
|
||||
|
||||
interface UploadRequestOptions {
|
||||
url: string;
|
||||
data: FormData;
|
||||
onUploadProgress?: (event: ProgressEvent<XMLHttpRequestEventTarget>) => void;
|
||||
}
|
||||
|
||||
class AbortError extends Error {
|
||||
name = 'AbortError';
|
||||
}
|
||||
|
||||
class ApiError extends Error {
|
||||
name = 'ApiError';
|
||||
|
||||
constructor(
|
||||
public message: string,
|
||||
public statusCode: number,
|
||||
public details: string,
|
||||
) {
|
||||
super(message);
|
||||
}
|
||||
}
|
||||
|
||||
export const uploadRequest = async <T>(options: UploadRequestOptions): Promise<{ data: T; status: number }> => {
|
||||
const { onUploadProgress: onProgress, data, url } = options;
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
const xhr = new XMLHttpRequest();
|
||||
|
||||
xhr.addEventListener('error', (error) => reject(error));
|
||||
xhr.addEventListener('load', () => {
|
||||
if (xhr.readyState === 4 && xhr.status >= 200 && xhr.status < 300) {
|
||||
resolve({ data: xhr.response as T, status: xhr.status });
|
||||
} else {
|
||||
reject(new ApiError(xhr.statusText, xhr.status, xhr.response));
|
||||
}
|
||||
});
|
||||
|
||||
if (onProgress) {
|
||||
xhr.addEventListener('progress', (event) => onProgress(event));
|
||||
}
|
||||
|
||||
xhr.open('POST', url);
|
||||
xhr.responseType = 'json';
|
||||
xhr.send(data);
|
||||
});
|
||||
};
|
||||
|
||||
export const downloadRequest = <TBody = unknown>(options: DownloadRequestOptions<TBody> | string) => {
|
||||
if (typeof options === 'string') {
|
||||
options = { url: options };
|
||||
}
|
||||
|
||||
const { signal, method, url, data: body, onDownloadProgress: onProgress } = options;
|
||||
|
||||
return new Promise<{ data: Blob; status: number }>((resolve, reject) => {
|
||||
const xhr = new XMLHttpRequest();
|
||||
|
||||
xhr.addEventListener('error', (error) => reject(error));
|
||||
xhr.addEventListener('abort', () => reject(new AbortError()));
|
||||
xhr.addEventListener('load', () => {
|
||||
if (xhr.readyState === 4 && xhr.status >= 200 && xhr.status < 300) {
|
||||
resolve({ data: xhr.response as Blob, status: xhr.status });
|
||||
} else {
|
||||
reject(new ApiError(xhr.statusText, xhr.status, xhr.responseText));
|
||||
}
|
||||
});
|
||||
|
||||
if (onProgress) {
|
||||
xhr.addEventListener('progress', (event) => onProgress(event));
|
||||
}
|
||||
|
||||
if (signal) {
|
||||
signal.addEventListener('abort', () => xhr.abort());
|
||||
}
|
||||
|
||||
xhr.open(method || 'GET', url);
|
||||
xhr.responseType = 'blob';
|
||||
|
||||
if (body) {
|
||||
xhr.setRequestHeader('Content-Type', 'application/json');
|
||||
xhr.send(JSON.stringify(body));
|
||||
} else {
|
||||
xhr.send();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
export const getJobName = (jobName: JobName) => {
|
||||
const names: Record<JobName, string> = {
|
||||
[JobName.ThumbnailGeneration]: 'Generate Thumbnails',
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
import { api } from '$lib/api';
|
||||
import { notificationController, NotificationType } from '$lib/components/shared-components/notification/notification';
|
||||
import { downloadManager } from '$lib/stores/download';
|
||||
import { downloadRequest, getKey } from '$lib/utils';
|
||||
import {
|
||||
addAssetsToAlbum as addAssets,
|
||||
defaults,
|
||||
getDownloadInfo,
|
||||
type AssetResponseDto,
|
||||
type AssetTypeEnum,
|
||||
@@ -12,7 +13,6 @@ import {
|
||||
type UserResponseDto,
|
||||
} from '@immich/sdk';
|
||||
import { DateTime } from 'luxon';
|
||||
import { getKey } from '../utils';
|
||||
import { handleError } from './handle-error';
|
||||
|
||||
export const addAssetsToAlbum = async (albumId: string, assetIds: Array<string>): Promise<BulkIdResponseDto[]> =>
|
||||
@@ -61,6 +61,7 @@ export const downloadArchive = async (fileName: string, options: DownloadInfoDto
|
||||
const archive = downloadInfo.archives[index];
|
||||
const suffix = downloadInfo.archives.length === 1 ? '' : `+${index + 1}`;
|
||||
const archiveName = fileName.replace('.zip', `${suffix}-${DateTime.now().toFormat('yyyy-LL-dd-HH-mm-ss')}.zip`);
|
||||
const key = getKey();
|
||||
|
||||
let downloadKey = `${archiveName} `;
|
||||
if (downloadInfo.archives.length > 1) {
|
||||
@@ -71,14 +72,14 @@ export const downloadArchive = async (fileName: string, options: DownloadInfoDto
|
||||
downloadManager.add(downloadKey, archive.size, abort);
|
||||
|
||||
try {
|
||||
const { data } = await api.downloadApi.downloadArchive(
|
||||
{ assetIdsDto: { assetIds: archive.assetIds }, key: getKey() },
|
||||
{
|
||||
responseType: 'blob',
|
||||
signal: abort.signal,
|
||||
onDownloadProgress: (event) => downloadManager.update(downloadKey, event.loaded),
|
||||
},
|
||||
);
|
||||
// TODO use sdk once it supports progress events
|
||||
const { data } = await downloadRequest({
|
||||
method: 'POST',
|
||||
url: defaults.baseUrl + '/download/archive' + (key ? `?key=${key}` : ''),
|
||||
data: { assetIds: archive.assetIds },
|
||||
signal: abort.signal,
|
||||
onDownloadProgress: (event) => downloadManager.update(downloadKey, event.loaded),
|
||||
});
|
||||
|
||||
downloadBlob(data, archiveName);
|
||||
} catch (error) {
|
||||
@@ -120,25 +121,21 @@ export const downloadFile = async (asset: AssetResponseDto) => {
|
||||
try {
|
||||
const abort = new AbortController();
|
||||
downloadManager.add(downloadKey, size, abort);
|
||||
|
||||
const { data } = await api.downloadApi.downloadFile(
|
||||
{ id, key: getKey() },
|
||||
{
|
||||
responseType: 'blob',
|
||||
onDownloadProgress: ({ event }) => {
|
||||
if (event.lengthComputable) {
|
||||
downloadManager.update(downloadKey, event.loaded, event.total);
|
||||
}
|
||||
},
|
||||
signal: abort.signal,
|
||||
},
|
||||
);
|
||||
const key = getKey();
|
||||
|
||||
notificationController.show({
|
||||
type: NotificationType.Info,
|
||||
message: `Downloading asset ${asset.originalFileName}`,
|
||||
});
|
||||
|
||||
// TODO use sdk once it supports progress events
|
||||
const { data } = await downloadRequest({
|
||||
method: 'POST',
|
||||
url: defaults.baseUrl + `/download/asset/${id}` + (key ? `?key=${key}` : ''),
|
||||
signal: abort.signal,
|
||||
onDownloadProgress: (event) => downloadManager.update(downloadKey, event.loaded, event.total),
|
||||
});
|
||||
|
||||
downloadBlob(data, filename);
|
||||
} catch (error) {
|
||||
handleError(error, `Error downloading ${filename}`);
|
||||
|
||||
@@ -1,10 +1,9 @@
|
||||
import { api } from '$lib/api';
|
||||
import { UploadState } from '$lib/models/upload-asset';
|
||||
import { uploadAssetsStore } from '$lib/stores/upload';
|
||||
import { getKey } from '$lib/utils';
|
||||
import { getKey, uploadRequest } from '$lib/utils';
|
||||
import { addAssetsToAlbum } from '$lib/utils/asset-utils';
|
||||
import { ExecutorQueue } from '$lib/utils/executor-queue';
|
||||
import { getSupportedMediaTypes, type AssetFileUploadResponseDto } from '@immich/sdk';
|
||||
import { defaults, getSupportedMediaTypes, type AssetFileUploadResponseDto } from '@immich/sdk';
|
||||
import { getServerErrorMessage, handleError } from './handle-error';
|
||||
|
||||
let _extensions: string[];
|
||||
@@ -72,26 +71,28 @@ async function fileUploader(asset: File, albumId: string | undefined = undefined
|
||||
const deviceAssetId = getDeviceAssetId(asset);
|
||||
|
||||
return new Promise((resolve) => resolve(uploadAssetsStore.markStarted(deviceAssetId)))
|
||||
.then(() =>
|
||||
api.assetApi.uploadFile(
|
||||
{
|
||||
deviceAssetId,
|
||||
deviceId: 'WEB',
|
||||
fileCreatedAt,
|
||||
fileModifiedAt: new Date(asset.lastModified).toISOString(),
|
||||
isFavorite: false,
|
||||
duration: '0:00:00.000000',
|
||||
assetData: new File([asset], asset.name),
|
||||
key: getKey(),
|
||||
},
|
||||
{
|
||||
onUploadProgress: ({ event }) => {
|
||||
const { loaded, total } = event;
|
||||
uploadAssetsStore.updateProgress(deviceAssetId, loaded, total);
|
||||
},
|
||||
},
|
||||
),
|
||||
)
|
||||
.then(() => {
|
||||
const formData = new FormData();
|
||||
for (const [key, value] of Object.entries({
|
||||
deviceAssetId,
|
||||
deviceId: 'WEB',
|
||||
fileCreatedAt,
|
||||
fileModifiedAt: new Date(asset.lastModified).toISOString(),
|
||||
isFavorite: 'false',
|
||||
duration: '0:00:00.000000',
|
||||
assetData: new File([asset], asset.name),
|
||||
})) {
|
||||
formData.append(key, value);
|
||||
}
|
||||
|
||||
const key = getKey();
|
||||
|
||||
return uploadRequest<AssetFileUploadResponseDto>({
|
||||
url: defaults.baseUrl + '/asset/upload' + (key ? `?key=${key}` : ''),
|
||||
data: formData,
|
||||
onUploadProgress: (event) => uploadAssetsStore.updateProgress(deviceAssetId, event.loaded, event.total),
|
||||
});
|
||||
})
|
||||
.then(async (response) => {
|
||||
if (response.status == 200 || response.status == 201) {
|
||||
const res: AssetFileUploadResponseDto = response.data;
|
||||
@@ -118,9 +119,9 @@ async function fileUploader(asset: File, albumId: string | undefined = undefined
|
||||
return res.id;
|
||||
}
|
||||
})
|
||||
.catch(async (error) => {
|
||||
.catch((error) => {
|
||||
handleError(error, 'Unable to upload file');
|
||||
const reason = (await getServerErrorMessage(error)) || error;
|
||||
const reason = getServerErrorMessage(error) || error;
|
||||
uploadAssetsStore.updateAsset(deviceAssetId, { state: UploadState.ERROR, error: reason });
|
||||
return undefined;
|
||||
});
|
||||
|
||||
@@ -1,24 +1,9 @@
|
||||
import { isHttpError } from '@immich/sdk';
|
||||
import { isAxiosError } from 'axios';
|
||||
import { notificationController, NotificationType } from '../components/shared-components/notification/notification';
|
||||
|
||||
export async function getServerErrorMessage(error: unknown) {
|
||||
export function getServerErrorMessage(error: unknown) {
|
||||
if (isHttpError(error)) {
|
||||
return error.data?.message || error.data;
|
||||
}
|
||||
|
||||
if (isAxiosError(error)) {
|
||||
let data = error.response?.data;
|
||||
if (data instanceof Blob) {
|
||||
const response = await data.text();
|
||||
try {
|
||||
data = JSON.parse(response);
|
||||
} catch {
|
||||
data = { message: response };
|
||||
}
|
||||
}
|
||||
|
||||
return data?.message;
|
||||
return error.data?.message || error.message;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -29,18 +14,17 @@ export function handleError(error: unknown, message: string) {
|
||||
|
||||
console.error(`[handleError]: ${message}`, error, (error as Error)?.stack);
|
||||
|
||||
getServerErrorMessage(error)
|
||||
.then((serverMessage) => {
|
||||
if (serverMessage) {
|
||||
serverMessage = `${String(serverMessage).slice(0, 75)}\n(Immich Server Error)`;
|
||||
}
|
||||
try {
|
||||
let serverMessage = getServerErrorMessage(error);
|
||||
if (serverMessage) {
|
||||
serverMessage = `${String(serverMessage).slice(0, 75)}\n(Immich Server Error)`;
|
||||
}
|
||||
|
||||
notificationController.show({
|
||||
message: serverMessage || message,
|
||||
type: NotificationType.Error,
|
||||
});
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error(error);
|
||||
notificationController.show({
|
||||
message: serverMessage || message,
|
||||
type: NotificationType.Error,
|
||||
});
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user