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

refactor(web): byte unit utils (#10332)

Browse source 
refactor byte unit utils
This commit is contained in:
Daniel Dietzler 2024-06-14 19:27:46 +02:00 • committed by GitHub
parent b4b654b53f
commit c896fe393f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
15 changed files with 99 additions and 87 deletions
Download patch file Download diff file Expand all files Collapse all files

6
web/src/lib/components/admin-page/server-stats/server-stats-panel.svelte
View file

@ -1,7 +1,7 @@
<script lang="ts">
import Icon from '$lib/components/elements/icon.svelte';
import { locale } from '$lib/stores/preferences.store';
import { asByteUnitString, getBytesWithUnit } from '$lib/utils/byte-units';
import { getByteUnitString, getBytesWithUnit } from '$lib/utils/byte-units';
import type { ServerStatsResponseDto } from '@immich/sdk';
import { mdiCameraIris, mdiChartPie, mdiPlayCircle } from '@mdi/js';
import StatsCard from './stats-card.svelte';
@ -102,9 +102,9 @@
<td class="w-1/4 text-ellipsis px-2 text-sm">{user.photos.toLocaleString($locale)}</td>
<td class="w-1/4 text-ellipsis px-2 text-sm">{user.videos.toLocaleString($locale)}</td>
<td class="w-1/4 text-ellipsis px-2 text-sm">
{asByteUnitString(user.usage, $locale, 0)}
{getByteUnitString(user.usage, $locale, 0)}
{#if user.quotaSizeInBytes}
/ {asByteUnitString(user.quotaSizeInBytes, $locale, 0)}
/ {getByteUnitString(user.quotaSizeInBytes, $locale, 0)}
{/if}
<span class="text-immich-primary dark:text-immich-dark-primary">
{#if user.quotaSizeInBytes}

5
web/src/lib/components/admin-page/server-stats/stats-card.svelte
View file

@ -1,10 +1,11 @@
<script lang="ts">
import Icon from '$lib/components/elements/icon.svelte';
import { ByteUnit } from '$lib/utils/byte-units';
export let icon: string;
export let title: string;
export let value: number;
export let unit: string | undefined = undefined;
export let unit: ByteUnit | undefined = undefined;
$: zeros = () => {
const maxLength = 13;
@ -26,7 +27,7 @@
class="text-immich-primary dark:text-immich-dark-primary">{value}</span
>
{#if unit}
<span class="absolute -top-5 right-2 text-base font-light text-gray-400">{unit}</span>
<span class="absolute -top-5 right-2 text-base font-light text-gray-400">{ByteUnit[unit]}</span>
{/if}
</div>
</div>

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

@ -32,7 +32,7 @@
import { DateTime } from 'luxon';
import { createEventDispatcher, onMount } from 'svelte';
import { slide } from 'svelte/transition';
import { asByteUnitString } from '$lib/utils/byte-units';
import { getByteUnitString } from '$lib/utils/byte-units';
import { handleError } from '$lib/utils/handle-error';
import ImageThumbnail from '../assets/thumbnail/image-thumbnail.svelte';
import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
@ -372,7 +372,7 @@
{@const { width, height } = getDimensions(asset.exifInfo)}
<p>{width} x {height}</p>
{/if}
<p>{asByteUnitString(asset.exifInfo.fileSizeInByte, $locale)}</p>
<p>{getByteUnitString(asset.exifInfo.fileSizeInByte, $locale)}</p>
</div>
{#if showAssetPath}
<p class="text-xs opacity-50 break-all" transition:slide={{ duration: 250 }}>

4
web/src/lib/components/asset-viewer/download-panel.svelte
View file

@ -2,7 +2,7 @@
import { type DownloadProgress, downloadAssets, downloadManager, isDownloading } from '$lib/stores/download';
import { locale } from '$lib/stores/preferences.store';
import { fly, slide } from 'svelte/transition';
import { asByteUnitString } from '../../utils/byte-units';
import { getByteUnitString } from '../../utils/byte-units';
import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
import { mdiClose } from '@mdi/js';
import { t } from 'svelte-i18n';
@ -27,7 +27,7 @@
<div class="flex place-items-center justify-between gap-2 text-xs font-medium">
<p class="truncate">■ {downloadKey}</p>
{#if download.total}
<p class="whitespace-nowrap">{asByteUnitString(download.total, $locale)}</p>
<p class="whitespace-nowrap">{getByteUnitString(download.total, $locale)}</p>
{/if}
</div>
<div class="flex place-items-center gap-2">

4
web/src/lib/components/forms/create-user-form.svelte
View file

@ -1,6 +1,5 @@
<script lang="ts">
import { serverInfo } from '$lib/stores/server-info.store';
import { convertToBytes } from '$lib/utils/byte-converter';
import { handleError } from '$lib/utils/handle-error';
import { createUserAdmin } from '@immich/sdk';
import { createEventDispatcher } from 'svelte';
@ -10,6 +9,7 @@
import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
import { featureFlags } from '$lib/stores/server-config.store';
import { t } from 'svelte-i18n';
import { ByteUnit, convertToBytes } from '$lib/utils/byte-units';
export let onClose: () => void;
@ -27,7 +27,7 @@
let quotaSize: number | undefined;
let isCreatingUser = false;
$: quotaSizeInBytes = quotaSize ? convertToBytes(quotaSize, 'GiB') : null;
$: quotaSizeInBytes = quotaSize ? convertToBytes(quotaSize, ByteUnit.GiB) : null;
$: quotaSizeWarning = quotaSizeInBytes && quotaSizeInBytes > $serverInfo.diskSizeRaw;
$: {

10
web/src/lib/components/forms/edit-user-form.svelte
View file

@ -2,7 +2,6 @@
import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
import { AppRoute } from '$lib/constants';
import { serverInfo } from '$lib/stores/server-info.store';
import { convertFromBytes, convertToBytes } from '$lib/utils/byte-converter';
import { handleError } from '$lib/utils/handle-error';
import { updateUserAdmin, type UserAdminResponseDto } from '@immich/sdk';
import { mdiAccountEditOutline } from '@mdi/js';
@ -10,6 +9,7 @@
import Button from '../elements/buttons/button.svelte';
import { dialogController } from '$lib/components/shared-components/dialog/dialog';
import { t } from 'svelte-i18n';
import { ByteUnit, convertFromBytes, convertToBytes } from '$lib/utils/byte-units';
export let user: UserAdminResponseDto;
export let canResetPassword = true;
@ -18,14 +18,14 @@
let error: string;
let success: string;
let quotaSize = user.quotaSizeInBytes ? convertFromBytes(user.quotaSizeInBytes, 'GiB') : null;
let quotaSize = user.quotaSizeInBytes ? convertFromBytes(user.quotaSizeInBytes, ByteUnit.GiB) : null;
const previousQutoa = user.quotaSizeInBytes;
$: quotaSizeWarning =
previousQutoa !== convertToBytes(Number(quotaSize), 'GiB') &&
previousQutoa !== convertToBytes(Number(quotaSize), ByteUnit.GiB) &&
!!quotaSize &&
convertToBytes(Number(quotaSize), 'GiB') > $serverInfo.diskSizeRaw;
convertToBytes(Number(quotaSize), ByteUnit.GiB) > $serverInfo.diskSizeRaw;
const dispatch = createEventDispatcher<{
close: void;
@ -42,7 +42,7 @@
email,
name,
storageLabel: storageLabel || '',
quotaSizeInBytes: quotaSize ? convertToBytes(Number(quotaSize), 'GiB') : null,
quotaSizeInBytes: quotaSize ? convertToBytes(Number(quotaSize), ByteUnit.GiB) : null,
},
});

8
web/src/lib/components/shared-components/status-box.svelte
View file

@ -3,7 +3,7 @@
import { locale } from '$lib/stores/preferences.store';
import { websocketStore } from '$lib/stores/websocket';
import { onMount } from 'svelte';
import { asByteUnitString } from '../../utils/byte-units';
import { getByteUnitString } from '../../utils/byte-units';
import LoadingSpinner from './loading-spinner.svelte';
import { mdiChartPie, mdiDns } from '@mdi/js';
import { serverInfo } from '$lib/stores/server-info.store';
@ -47,7 +47,7 @@
<div class="dark:text-immich-dark-fg">
<div
class="storage-status grid grid-cols-[64px_auto]"
title="Used {asByteUnitString(usedBytes, $locale, 3)} of {asByteUnitString(availableBytes, $locale, 3)}"
title="Used {getByteUnitString(usedBytes, $locale, 3)} of {getByteUnitString(availableBytes, $locale, 3)}"
>
<div class="pb-[2.15rem] pl-5 pr-6 text-immich-primary dark:text-immich-dark-primary group-hover:sm:pb-0 md:pb-0">
<Icon path={mdiChartPie} size="24" />
@ -61,8 +61,8 @@
<p class="text-xs">
{$t('storage_usage', {
values: {
used: asByteUnitString(usedBytes, $locale),
available: asByteUnitString(availableBytes, $locale),
used: getByteUnitString(usedBytes, $locale),
available: getByteUnitString(availableBytes, $locale),
},
})}
</p>

6
web/src/lib/components/shared-components/upload-asset-preview.svelte
View file

@ -2,7 +2,7 @@
import type { UploadAsset } from '$lib/models/upload-asset';
import { UploadState } from '$lib/models/upload-asset';
import { locale } from '$lib/stores/preferences.store';
import { asByteUnitString } from '$lib/utils/byte-units';
import { getByteUnitString } from '$lib/utils/byte-units';
import { fade } from 'svelte/transition';
import ImmichLogo from './immich-logo.svelte';
import { getFilenameExtension } from '$lib/utils/asset-utils';
@ -42,7 +42,7 @@
<input
disabled
class="w-full rounded-md border bg-gray-100 p-1 px-2 text-[10px] dark:border-immich-dark-gray dark:bg-gray-900"
value={`[${asByteUnitString(uploadAsset.file.size, $locale)}] ${uploadAsset.file.name}`}
value={`[${getByteUnitString(uploadAsset.file.size, $locale)}] ${uploadAsset.file.name}`}
/>
<div
@ -55,7 +55,7 @@
{#if uploadAsset.message}
{uploadAsset.message}
{:else}
{uploadAsset.progress}% - {asByteUnitString(uploadAsset.speed || 0, $locale)}/s - {uploadAsset.eta}s
{uploadAsset.progress}% - {getByteUnitString(uploadAsset.speed || 0, $locale)}/s - {uploadAsset.eta}s
{/if}
</p>
{:else if uploadAsset.state === UploadState.PENDING}

6
web/src/lib/components/user-settings-page/download-settings.svelte
View file

@ -13,13 +13,13 @@
import SettingInputField, {
SettingInputFieldType,
} from '$lib/components/shared-components/settings/setting-input-field.svelte';
import { convertFromBytes, convertToBytes } from '$lib/utils/byte-converter';
import { ByteUnit, convertFromBytes, convertToBytes } from '$lib/utils/byte-units';
let archiveSize = convertFromBytes($preferences?.download?.archiveSize || 4, 'GiB');
let archiveSize = convertFromBytes($preferences?.download?.archiveSize || 4, ByteUnit.GiB);
const handleSave = async () => {
try {
const dto = { download: { archiveSize: Math.floor(convertToBytes(archiveSize, 'GiB')) } };
const dto = { download: { archiveSize: Math.floor(convertToBytes(archiveSize, ByteUnit.GiB)) } };
const newPreferences = await updateMyPreferences({ userPreferencesUpdateDto: dto });
$preferences = newPreferences;