feat(web): add Exif-Rating (#11580)

* Add Exif-Rating

* Integrate star rating as own component

* Add e2e tests for rating and validation

* Rename component and async handleChangeRating

* Display rating can be enabled in app settings

* Correct i18n reference

Co-authored-by: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com>

* Star rating: change from slider to buttons

* Star rating for clarity

* Design updates.

* Renaming and code optimization

* chore: clean up

* chore: e2e formatting

* light mode border and default value

---------

Co-authored-by: Christoph Suter <christoph@suter-burri.ch>
Co-authored-by: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com>
Co-authored-by: Mert <101130780+mertalev@users.noreply.github.com>
Co-authored-by: Jason Rasmussen <jrasm91@gmail.com>
Co-authored-by: Alex Tran <alex.tran1502@gmail.com>
This commit is contained in:
Christoph Suter 2024-08-09 19:45:52 +02:00 committed by GitHub
parent b1587a5dee
commit f33dbdfe9a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
37 changed files with 599 additions and 18 deletions

View file

@ -19,6 +19,13 @@
import { locale as i18nLocale, t } from 'svelte-i18n';
import { fade } from 'svelte/transition';
import { invalidateAll } from '$app/navigation';
import { preferences } from '$lib/stores/user.store';
import { updateMyPreferences } from '@immich/sdk';
import { handleError } from '../../utils/handle-error';
import {
notificationController,
NotificationType,
} from '$lib/components/shared-components/notification/notification';
let time = new Date();
@ -39,6 +46,7 @@
label: findLocale(editedLocale).name || fallbackLocale.name,
};
$: closestLanguage = getClosestAvailableLocale([$lang], langCodes);
$: ratingEnabled = $preferences?.rating?.enabled;
onMount(() => {
const interval = setInterval(() => {
@ -90,6 +98,17 @@
$locale = newLocale;
}
};
const handleRatingChange = async (enabled: boolean) => {
try {
const data = await updateMyPreferences({ userPreferencesUpdateDto: { rating: { enabled } } });
$preferences.rating.enabled = data.rating.enabled;
notificationController.show({ message: $t('saved_settings'), type: NotificationType.Info });
} catch (error) {
handleError(error, $t('errors.unable_to_update_settings'));
}
};
</script>
<section class="my-4">
@ -185,6 +204,14 @@
bind:checked={$sidebarSettings.sharing}
/>
</div>
<div class="ml-4">
<SettingSwitch
title={$t('rating')}
subtitle={$t('rating_description')}
bind:checked={ratingEnabled}
on:toggle={({ detail: enabled }) => handleRatingChange(enabled)}
/>
</div>
</div>
</div>
</section>