Kavita/UI/Web/src/app/admin/manage-media-settings/manage-media-settings.component.html
2024-11-09 12:05:17 -08:00

69 lines
2.9 KiB
HTML

<ng-container *transloco="let t; read: 'manage-media-settings'">
<form [formGroup]="settingsForm">
<div class="mb-4">
<p>
{{t('encode-as-description-part-1')}} <a href="https://caniuse.com/?search=webp" target="_blank" rel="noopener noreferrer">{{t('encode-as-description-part-2')}}</a>/<a href="https://caniuse.com/?search=avif" target="_blank" rel="noopener noreferrer">{{t('encode-as-description-part-3')}}</a>
</p>
<div class="alert alert-warning">
{{t('encode-as-warning')}}
</div>
</div>
<ng-container>
<div class="row g-0 mt-2">
@if(settingsForm.get('encodeMediaAs'); as formControl) {
<app-setting-item [title]="t('encode-as-label')" [subtitle]="t('encode-as-tooltip')">
<ng-template #view>
{{formControl!.value | encodeFormat}}
</ng-template>
<ng-template #edit>
<select class="form-select" formControlName="encodeMediaAs">
@for (opt of allEncodeFormats; track opt) {
<option [value]="opt">{{opt | encodeFormat}}</option>
}
</select>
</ng-template>
</app-setting-item>
}
</div>
<div class="row g-0 mt-2">
@if(settingsForm.get('coverImageSize'); as formControl) {
<app-setting-item [title]="t('cover-image-size-label')" [subtitle]="t('cover-image-size-tooltip')">
<ng-template #view>
{{formControl!.value | coverImageSize}}
</ng-template>
<ng-template #edit>
<select class="form-select" formControlName="coverImageSize">
@for (opt of allCoverImageSizes; track opt) {
<option [value]="opt">{{opt | coverImageSize}}</option>
}
</select>
</ng-template>
</app-setting-item>
}
</div>
<div class="row g-0 mt-2">
@if(settingsForm.get('bookmarksDirectory'); as formControl) {
<app-setting-item [title]="t('bookmark-dir-label')" [subtitle]="t('bookmark-dir-tooltip')">
<ng-template #view>
{{formControl!.value}}
</ng-template>
<ng-template #edit>
<div class="input-group">
<input readonly id="settings-bookmarksdir" class="form-control" formControlName="bookmarksDirectory" type="text" aria-describedby="change-bookmarks-dir">
<button id="change-bookmarks-dir" class="btn btn-primary" (click)="openDirectoryChooser(formControl.value, 'bookmarksDirectory')">
{{t('change')}}
</button>
</div>
</ng-template>
</app-setting-item>
}
</div>
</ng-container>
</form>
</ng-container>