helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-11-07 17:27:20 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

refactor(web): use ImmichApi to create urls (#2435)

Browse source
This commit is contained in:
Michel Heusschen 2023-05-14 04:52:29 +02:00 • committed by GitHub
parent 15fa8250cb
commit 4524aa0d06
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 53 additions and 51 deletions
Download patch file Download diff file Expand all files Collapse all files

5
web/src/lib/components/album-page/__tests__/album-card.spec.ts
View file

@ -79,11 +79,6 @@ describe('AlbumCard component', () => {
const albumImgElement = sut.getByTestId('album-image');
const albumNameElement = sut.getByTestId('album-name');
const albumDetailsElement = sut.getByTestId('album-details');
// TODO: is this expected?
expect(albumImgElement).toHaveAttribute(
'src',
'/api/asset/thumbnail/thumbnailIdOne?format=WEBP'
);
expect(albumImgElement).toHaveAttribute('alt', album.id);
await waitFor(() => expect(albumImgElement).toHaveAttribute('src', thumbnailUrl));

7
web/src/lib/components/album-page/album-card.svelte
View file

@ -23,10 +23,9 @@
export let isSharingView = false;
export let user: UserResponseDto;
let imageData = `/api/asset/thumbnail/${album.albumThumbnailAssetId}?format=${ThumbnailFormat.Webp}`;
if (!album.albumThumbnailAssetId) {
imageData = noThumbnailUrl;
}
$: imageData = album.albumThumbnailAssetId
? api.getAssetThumbnailUrl(album.albumThumbnailAssetId, ThumbnailFormat.Webp)
: noThumbnailUrl;
const dispatchClick = createEventDispatcher<OnClick>();
const dispatchShowContextMenu = createEventDispatcher<OnShowContextMenu>();

5
web/src/lib/components/asset-viewer/album-list-item.svelte
View file

@ -1,5 +1,5 @@
<script lang="ts">
import { AlbumResponseDto, ThumbnailFormat } from '@api';
import { AlbumResponseDto, ThumbnailFormat, api } from '@api';
import { createEventDispatcher } from 'svelte';
const dispatcher = createEventDispatcher();
@ -29,7 +29,8 @@
>
<div class="h-12 w-12">
<img
src={`/api/asset/thumbnail/${album.albumThumbnailAssetId}?format=${ThumbnailFormat.Webp}`}
src={album.albumThumbnailAssetId &&
api.getAssetThumbnailUrl(album.albumThumbnailAssetId, ThumbnailFormat.Webp)}
alt={album.albumName}
class={`object-cover h-full w-full transition-all z-0 rounded-xl duration-300 hover:shadow-lg`}
data-testid="album-image"

5
web/src/lib/components/asset-viewer/detail-panel.svelte
View file

@ -5,7 +5,7 @@
import CameraIris from 'svelte-material-icons/CameraIris.svelte';
import MapMarkerOutline from 'svelte-material-icons/MapMarkerOutline.svelte';
import { createEventDispatcher } from 'svelte';
import { AssetResponseDto, AlbumResponseDto, api } from '@api';
import { AssetResponseDto, AlbumResponseDto, api, ThumbnailFormat } from '@api';
import { asByteUnitString } from '../../utils/byte-units';
import { locale } from '$lib/stores/preferences.store';
import { DateTime } from 'luxon';
@ -241,7 +241,8 @@
<img
alt={album.albumName}
class="w-[50px] h-[50px] object-cover rounded"
src={`/api/asset/thumbnail/${album.albumThumbnailAssetId}?format=JPEG`}
src={album.albumThumbnailAssetId &&
api.getAssetThumbnailUrl(album.albumThumbnailAssetId, ThumbnailFormat.Jpeg)}
draggable="false"
/>
</div>

6
web/src/lib/components/asset-viewer/video-viewer.svelte
View file

@ -1,11 +1,11 @@
<script lang="ts">
import { api } from '@api';
import { fade } from 'svelte/transition';
import { createEventDispatcher } from 'svelte';
import LoadingSpinner from '../shared-components/loading-spinner.svelte';
import { getFileUrl } from '@api';
export let assetId: string;
export let publicSharedKey = '';
export let publicSharedKey: string | undefined = undefined;
let isVideoLoading = true;
const dispatch = createEventDispatcher();
@ -31,7 +31,7 @@
on:canplay={handleCanPlay}
on:ended={() => dispatch('onVideoEnded')}
>
<source src={getFileUrl(assetId, false, true, publicSharedKey)} type="video/mp4" />
<source src={api.getAssetFileUrl(assetId, false, true, publicSharedKey)} type="video/mp4" />
<track kind="captions" />
</video>

5
web/src/lib/components/shared-components/navigation-bar/account-info-panel.svelte
View file

@ -1,7 +1,6 @@
<script lang="ts">
import { UserResponseDto } from '@api';
import { UserResponseDto, api } from '@api';
import { createEventDispatcher } from 'svelte';
import { page } from '$app/stores';
import { fade } from 'svelte/transition';
import Cog from 'svelte-material-icons/Cog.svelte';
import Logout from 'svelte-material-icons/Logout.svelte';
@ -35,7 +34,7 @@
<img
transition:fade={{ duration: 100 }}
class:hidden={showProfilePictureFallback}
src={`${$page.url.origin}/api/user/profile-image/${user.id}`}
src={api.getProfileImageUrl(user.id)}
alt="profile-img"
class="inline rounded-full h-20 w-20 object-cover shadow-md border-2 border-immich-primary dark:border-immich-dark-primary"
draggable="false"

2
web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte
View file

@ -126,7 +126,7 @@
{#if user.profileImagePath}
<img
class:hidden={showProfilePictureFallback}
src={`${$page.url.origin}/api/user/profile-image/${user.id}`}
src={api.getProfileImageUrl(user.id)}
alt="profile-img"
class="inline rounded-full h-12 w-12 object-cover shadow-md border-2 border-immich-primary hover:border-immich-dark-primary dark:hover:border-immich-primary dark:border-immich-dark-primary transition-all"
draggable="false"

10
web/src/lib/components/sharedlinks-page/shared-link-card.svelte
View file

@ -1,5 +1,11 @@
<script lang="ts">
import { api, AssetResponseDto, SharedLinkResponseDto, SharedLinkType } from '@api';
import {
api,
AssetResponseDto,
SharedLinkResponseDto,
SharedLinkType,
ThumbnailFormat
} from '@api';
import LoadingSpinner from '../shared-components/loading-spinner.svelte';
import OpenInNew from 'svelte-material-icons/OpenInNew.svelte';
import Delete from 'svelte-material-icons/TrashCanOutline.svelte';
@ -69,7 +75,7 @@
{:then asset}
<img
id={asset.id}
src={`/api/asset/thumbnail/${asset.id}?format=WEBP`}
src={api.getAssetThumbnailUrl(asset.id, ThumbnailFormat.Webp)}
alt={asset.id}
class="object-cover w-[100px] h-[100px] rounded-lg"
loading="lazy"