fix(web): events as props (#12825)

This commit is contained in:
Daniel Dietzler 2024-09-21 00:24:46 +02:00 committed by GitHub
parent 124eb8251b
commit 8cd3f6b884
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
22 changed files with 47 additions and 46 deletions

View file

@ -99,7 +99,7 @@
]}
name="vcodec"
isEdited={config.ffmpeg.targetVideoCodec !== savedConfig.ffmpeg.targetVideoCodec}
on:select={() => (config.ffmpeg.acceptedVideoCodecs = [config.ffmpeg.targetVideoCodec])}
onSelect={() => (config.ffmpeg.acceptedVideoCodecs = [config.ffmpeg.targetVideoCodec])}
/>
<SettingSelect
@ -114,7 +114,7 @@
]}
name="acodec"
isEdited={config.ffmpeg.targetAudioCodec !== savedConfig.ffmpeg.targetAudioCodec}
on:select={() =>
onSelect={() =>
config.ffmpeg.acceptedAudioCodecs.includes(config.ffmpeg.targetAudioCodec)
? null
: config.ffmpeg.acceptedAudioCodecs.push(config.ffmpeg.targetAudioCodec)}

View file

@ -96,7 +96,7 @@
title={$t('admin.image_prefer_wide_gamut')}
subtitle={$t('admin.image_prefer_wide_gamut_setting_description')}
checked={config.image.colorspace === Colorspace.P3}
on:toggle={(e) => (config.image.colorspace = e.detail ? Colorspace.P3 : Colorspace.Srgb)}
onToggle={(isChecked) => (config.image.colorspace = isChecked ? Colorspace.P3 : Colorspace.Srgb)}
isEdited={config.image.colorspace !== savedConfig.image.colorspace}
{disabled}
/>
@ -105,7 +105,7 @@
title={$t('admin.image_prefer_embedded_preview')}
subtitle={$t('admin.image_prefer_embedded_preview_setting_description')}
checked={config.image.extractEmbedded}
on:toggle={() => (config.image.extractEmbedded = !config.image.extractEmbedded)}
onToggle={() => (config.image.extractEmbedded = !config.image.extractEmbedded)}
isEdited={config.image.extractEmbedded !== savedConfig.image.extractEmbedded}
{disabled}
/>

View file

@ -15,5 +15,13 @@
{#if projectionType === ProjectionType.EQUIRECTANGULAR}
<PanoramaViewer asset={{ id: assetId, type: AssetTypeEnum.Video }} />
{:else}
<VideoNativeViewer {loopVideo} {checksum} {assetId} {onPreviousAsset} {onNextAsset} />
<VideoNativeViewer
{loopVideo}
{checksum}
{assetId}
{onPreviousAsset}
{onNextAsset}
on:onVideoEnded
on:onVideoStarted
/>
{/if}

View file

@ -32,7 +32,7 @@
>
<div class="grid-col-2 grid gap-8 md:grid-cols-3 lg:grid-cols-6 xl:grid-cols-8 2xl:grid-cols-10">
{#each showPeople as person (person.id)}
<FaceThumbnail {person} on:click={() => onSelect(person)} circle border selectable />
<FaceThumbnail {person} onClick={() => onSelect(person)} circle border selectable />
{/each}
</div>
</div>

View file

@ -83,8 +83,8 @@
bind:name={searchName}
{showLoadingSpinner}
{placeholder}
on:reset={handleReset}
on:search={({ detail }) => handleSearch(detail.force ?? false)}
onReset={handleReset}
onSearch={({ force }) => handleSearch(force ?? false)}
/>
{:else}
<input

View file

@ -168,7 +168,7 @@
circle
selectable
thumbnailSize={180}
on:click={handleRemoveSelectedPerson}
onClick={handleRemoveSelectedPerson}
/>
</div>
</div>

View file

@ -52,7 +52,7 @@
<form on:submit|preventDefault={handleSubmit} autocomplete="off" id="create-tag-form">
<div class="my-4 flex flex-col gap-2">
<Combobox
on:select={({ detail: option }) => handleSelect(option)}
onSelect={handleSelect}
label={$t('tag')}
options={allTags.map((tag) => ({ id: tag.id, label: tag.value, value: tag.id }))}
placeholder={$t('search_tags')}

View file

@ -84,7 +84,7 @@
{/if}
</AssetSelectControlBar>
{:else}
<ControlAppBar on:close={() => goto(AppRoute.PHOTOS)} backIcon={mdiArrowLeft} showBackButton={false}>
<ControlAppBar onClose={() => goto(AppRoute.PHOTOS)} backIcon={mdiArrowLeft} showBackButton={false}>
<svelte:fragment slot="leading">
<ImmichLogoSmallLink width={innerWidth} />
</svelte:fragment>

View file

@ -20,7 +20,7 @@
title={$t('show_supporter_badge')}
subtitle={$t('show_supporter_badge_description')}
bind:checked={$preferences.purchase.showSupportBadge}
on:toggle={({ detail }) => setSupportBadgeVisibility(detail)}
onToggle={setSupportBadgeVisibility}
/>
</div>

View file

@ -56,7 +56,7 @@
<div class="w-full">
<Combobox
label={$t('make')}
on:select={({ detail }) => (filters.make = detail?.value)}
onSelect={(option) => (filters.make = option?.value)}
options={asComboboxOptions(makes)}
placeholder={$t('search_camera_make')}
selectedOption={asSelectedOption(makeFilter)}
@ -66,7 +66,7 @@
<div class="w-full">
<Combobox
label={$t('model')}
on:select={({ detail }) => (filters.model = detail?.value)}
onSelect={(option) => (filters.model = option?.value)}
options={asComboboxOptions(models)}
placeholder={$t('search_camera_model')}
selectedOption={asSelectedOption(modelFilter)}

View file

@ -73,7 +73,7 @@
<div class="w-full">
<Combobox
label={$t('country')}
on:select={({ detail }) => (filters.country = detail?.value)}
onSelect={(option) => (filters.country = option?.value)}
options={asComboboxOptions(countries)}
placeholder={$t('search_country')}
selectedOption={asSelectedOption(filters.country)}
@ -83,7 +83,7 @@
<div class="w-full">
<Combobox
label={$t('state')}
on:select={({ detail }) => (filters.state = detail?.value)}
onSelect={(option) => (filters.state = option?.value)}
options={asComboboxOptions(states)}
placeholder={$t('search_state')}
selectedOption={asSelectedOption(filters.state)}
@ -93,7 +93,7 @@
<div class="w-full">
<Combobox
label={$t('city')}
on:select={({ detail }) => (filters.city = detail?.value)}
onSelect={(option) => (filters.city = option?.value)}
options={asComboboxOptions(cities)}
placeholder={$t('search_city')}
selectedOption={asSelectedOption(filters.city)}

View file

@ -32,14 +32,7 @@
<p class="text-sm dark:text-immich-dark-fg">{subtitle}</p>
</div>
<div class="flex items-center">
<Combobox
label={title}
hideLabel={true}
{selectedOption}
{options}
placeholder={comboboxPlaceholder}
on:select={({ detail }) => onSelect(detail)}
/>
<Combobox label={title} hideLabel={true} {selectedOption} {options} placeholder={comboboxPlaceholder} {onSelect} />
<slot />
</div>
</div>

View file

@ -99,7 +99,7 @@
title={$t('theme_selection')}
subtitle={$t('theme_selection_description')}
bind:checked={$colorTheme.system}
on:toggle={handleToggleColorTheme}
onToggle={handleToggleColorTheme}
/>
</div>
@ -119,7 +119,7 @@
title={$t('default_locale')}
subtitle={$t('default_locale_description')}
checked={$locale == undefined}
on:toggle={handleToggleLocaleBrowser}
onToggle={handleToggleLocaleBrowser}
>
<p class="mt-2 dark:text-gray-400">{selectedDate}</p>
</SettingSwitch>
@ -142,7 +142,7 @@
title={$t('display_original_photos')}
subtitle={$t('display_original_photos_setting_description')}
bind:checked={$alwaysLoadOriginalFile}
on:toggle={() => ($alwaysLoadOriginalFile = !$alwaysLoadOriginalFile)}
onToggle={() => ($alwaysLoadOriginalFile = !$alwaysLoadOriginalFile)}
/>
</div>
<div class="ml-4">
@ -150,7 +150,7 @@
title={$t('video_hover_setting')}
subtitle={$t('video_hover_setting_description')}
bind:checked={$playVideoThumbnailOnHover}
on:toggle={() => ($playVideoThumbnailOnHover = !$playVideoThumbnailOnHover)}
onToggle={() => ($playVideoThumbnailOnHover = !$playVideoThumbnailOnHover)}
/>
</div>
<div class="ml-4">
@ -158,7 +158,7 @@
title={$t('loop_videos')}
subtitle={$t('loop_videos_description')}
bind:checked={$loopVideo}
on:toggle={() => ($loopVideo = !$loopVideo)}
onToggle={() => ($loopVideo = !$loopVideo)}
/>
</div>

View file

@ -177,7 +177,7 @@
title={$t('show_in_timeline')}
subtitle={$t('show_in_timeline_setting_description')}
bind:checked={partner.inTimeline}
on:toggle={({ detail }) => handleShowOnTimelineChanged(partner, detail)}
onToggle={(isChecked) => handleShowOnTimelineChanged(partner, isChecked)}
/>
{/if}
</div>

View file

@ -115,7 +115,7 @@
title={$t('show_supporter_badge')}
subtitle={$t('show_supporter_badge_description')}
bind:checked={$preferences.purchase.showSupportBadge}
on:toggle={({ detail }) => setSupportBadgeVisibility(detail)}
onToggle={setSupportBadgeVisibility}
/>
</div>