beenull/photoprism
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

UX: Add Downscaling and RAW Conversion options to Advanced Settings tab

Browse source
This commit is contained in:
Michael Mayer 2020-12-19 01:11:22 +01:00
parent db98dfdc64
commit de955f8fc6
5 changed files with 207 additions and 71 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
frontend/src/model/config-options.js
View file

@ -49,22 +49,19 @@ export class ConfigOptions extends Model {
DisableTensorFlow: config.values.disable.tensorflow,
DetectNSFW: false,
UploadNSFW: config.values.uploadNSFW,
LogLevel: config.debug ? "debug" : "",
DarktablePresets: false,
ThumbUncached: true,
ThumbFilter: "",
ThumbSize: 0,
ThumbSizeUncached: 0,
JpegSize: 0,
JpegQuality: 0,
SiteUrl: config.values.siteUrl,
SitePreview: config.values.siteUrl,
SiteTitle: config.values.siteTitle,
SiteCaption: config.values.siteCaption,
SiteDescription: config.values.siteDescription,
SiteAuthor: config.values.siteAuthor,
HttpMode: "",
DarktablePresets: false,
BackupYaml: false,
ThumbFilter: "",
ThumbUncached: true,
ThumbSize: 0,
ThumbSizeUncached: 0,
JpegSize: 0,
JpegQuality: 0,
};
}

7
frontend/src/options/options.js
View file

@ -277,3 +277,10 @@ export const FeedbackCategories = () => [
{ value: "donations", text: $gettext("Donations") },
{ value: "other", text: $gettext("Other") },
];
export const ThumbFilters = () => [
{ value: "blackman", text: $gettext("Blackman: Lanczos Modification, Less Ringing Artifacts") },
{ value: "lanczos", text: $gettext("Lanczos: Detail Preservation, Minimal Artifacts") },
{ value: "cubic", text: $gettext("Cubic: Moderate Quality, Good Performance") },
{ value: "linear", text: $gettext("Linear: Very Smooth, Best Performance") },
];

82
frontend/src/pages/photos.vue
View file

@ -1,14 +1,14 @@
<template>
<div class="p-page p-page-photos" v-infinite-scroll="loadMore" :infinite-scroll-disabled="scrollDisabled"
<div v-infinite-scroll="loadMore" class="p-page p-page-photos" :infinite-scroll-disabled="scrollDisabled"
:infinite-scroll-distance="10" :infinite-scroll-listen-for-event="'scrollRefresh'">
<p-photo-toolbar :settings="settings" :filter="filter" :filter-change="updateQuery" :dirty="dirty"
:refresh="refresh"></p-photo-toolbar>
<v-container fluid class="pa-4" v-if="loading">
<v-container v-if="loading" fluid class="pa-4">
<v-progress-linear color="secondary-dark" :indeterminate="true"></v-progress-linear>
</v-container>
<v-container fluid class="pa-0" v-else>
<v-container v-else fluid class="pa-0">
<p-scroll-top></p-scroll-top>
<p-photo-clipboard :refresh="refresh" :selection="selection" :context="context"></p-photo-clipboard>
@ -46,29 +46,10 @@ import Thumb from "model/thumb";
import Event from "pubsub-js";
export default {
name: 'p-page-photos',
name: 'PPagePhotos',
props: {
staticFilter: Object
},
watch: {
'$route'() {
const query = this.$route.query;
this.filter.q = query['q'] ? query['q'] : '';
this.filter.camera = query['camera'] ? parseInt(query['camera']) : 0;
this.filter.country = query['country'] ? query['country'] : '';
this.filter.lens = query['lens'] ? parseInt(query['lens']) : 0;
this.filter.year = query['year'] ? parseInt(query['year']) : 0;
this.filter.month = query['month'] ? parseInt(query['month']) : 0;
this.filter.color = query['color'] ? query['color'] : '';
this.filter.label = query['label'] ? query['label'] : '';
this.filter.order = this.sortOrder();
this.settings.view = this.viewType();
this.lastFilter = {};
this.routeName = this.$route.name;
this.search();
}
},
data() {
const query = this.$route.query;
const routeName = this.$route.name;
@ -143,6 +124,39 @@ export default {
return "";
}
},
watch: {
'$route'() {
const query = this.$route.query;
this.filter.q = query['q'] ? query['q'] : '';
this.filter.camera = query['camera'] ? parseInt(query['camera']) : 0;
this.filter.country = query['country'] ? query['country'] : '';
this.filter.lens = query['lens'] ? parseInt(query['lens']) : 0;
this.filter.year = query['year'] ? parseInt(query['year']) : 0;
this.filter.month = query['month'] ? parseInt(query['month']) : 0;
this.filter.color = query['color'] ? query['color'] : '';
this.filter.label = query['label'] ? query['label'] : '';
this.filter.order = this.sortOrder();
this.settings.view = this.viewType();
this.lastFilter = {};
this.routeName = this.$route.name;
this.search();
}
},
created() {
this.search();
this.subscriptions.push(Event.subscribe("import.completed", (ev, data) => this.onImportCompleted(ev, data)));
this.subscriptions.push(Event.subscribe("photos", (ev, data) => this.onUpdate(ev, data)));
this.subscriptions.push(Event.subscribe("touchmove.top", () => this.refresh()));
this.subscriptions.push(Event.subscribe("touchmove.bottom", () => this.loadMore()));
},
destroyed() {
for (let i = 0; i < this.subscriptions.length; i++) {
Event.unsubscribe(this.subscriptions[i]);
}
},
methods: {
viewType() {
let queryParam = this.$route.query['view'];
@ -187,7 +201,7 @@ export default {
},
editPhoto(index) {
let selection = this.results.map((p) => {
return p.getId()
return p.getId();
});
// Open Edit Dialog
@ -207,7 +221,7 @@ export default {
this.$viewer.show(Thumb.fromPhotos(this.results), index);
}
} else if (showMerged) {
this.$viewer.show(Thumb.fromFiles([selected]), 0)
this.$viewer.show(Thumb.fromFiles([selected]), 0);
} else {
this.viewerResults().then((results) => {
const thumbsIndex = results.findIndex(result => result.UID === selected.UID);
@ -339,7 +353,7 @@ export default {
}
if (JSON.stringify(this.$route.query) === JSON.stringify(query)) {
return
return;
}
this.$router.replace({query});
@ -449,7 +463,7 @@ export default {
if (!this.listen) return;
if (!data || !data.entities) {
return
return;
}
const type = ev.split('.')[1];
@ -522,19 +536,5 @@ export default {
}
},
},
created() {
this.search();
this.subscriptions.push(Event.subscribe("import.completed", (ev, data) => this.onImportCompleted(ev, data)));
this.subscriptions.push(Event.subscribe("photos", (ev, data) => this.onUpdate(ev, data)));
this.subscriptions.push(Event.subscribe("touchmove.top", () => this.refresh()));
this.subscriptions.push(Event.subscribe("touchmove.bottom", () => this.loadMore()));
},
destroyed() {
for (let i = 0; i < this.subscriptions.length; i++) {
Event.unsubscribe(this.subscriptions[i]);
}
},
};
</script>

151
frontend/src/pages/settings/advanced.vue
View file

@ -6,7 +6,7 @@
<v-card flat tile class="mt-0 px-1 application">
<v-card-title primary-title class="pb-0">
<h3 class="body-2 mb-0">
<translate>Global Options</translate>
<translate>Options</translate>
</h3>
</v-card-title>
@ -59,13 +59,13 @@
<v-flex xs12 sm6 lg3 class="px-2 pb-2 pt-2">
<v-checkbox
v-model="settings.DisableWebDAV"
v-model="settings.DisableBackups"
:disabled="busy"
class="ma-0 pa-0 input-private"
color="secondary-dark"
:label="$gettext('Disable WebDAV')"
:hint="$gettext('Disable built-in WebDAV server. Requires a restart.')"
prepend-icon="sync_disabled"
:label="$gettext('Disable Backups')"
:hint="$gettext('Don\'t backup photo and album metadata to YAML files.')"
prepend-icon="healing"
persistent-hint
@change="onChange"
>
@ -74,13 +74,13 @@
<v-flex xs12 sm6 lg3 class="px-2 pb-2 pt-2">
<v-checkbox
v-model="settings.DisableBackups"
v-model="settings.DisableWebDAV"
:disabled="busy"
class="ma-0 pa-0 input-private"
color="secondary-dark"
:label="$gettext('Disable Backups')"
:hint="$gettext('Don\'t backup photo and album metadata to YAML files.')"
prepend-icon="update_disabled"
:label="$gettext('Disable WebDAV')"
:hint="$gettext('Disable built-in WebDAV server. Requires a restart.')"
prepend-icon="sync_disabled"
persistent-hint
@change="onChange"
>
@ -133,6 +133,139 @@
</v-flex>
</v-layout>
</v-card-actions>
<v-card-title primary-title class="pb-0">
<h3 class="body-2 mb-0" :title="$gettext('Thumbnail Generation')">
<translate>Downscaling</translate>
</h3>
</v-card-title>
<v-card-actions>
<v-layout wrap align-top>
<v-flex xs12 class="px-2 pb-2">
<v-select
v-model="settings.ThumbFilter"
:disabled="busy"
:items="options.ThumbFilters()"
:label="$gettext('Resampling')"
color="secondary-dark"
background-color="secondary-light"
hide-details box
@change="onChange"
></v-select>
</v-flex>
<v-flex xs12 sm6 lg8 class="px-2 pb-2">
<v-subheader class="pa-0">{{ $gettextInterpolate($gettext('Uncached Size Limit: %{n}px'), {n: settings.ThumbSizeUncached}) }}</v-subheader>
<v-slider
v-model="settings.ThumbSizeUncached"
:min="720"
:max="7680"
:step="20"
hide-details
:disabled="busy"
class="mt-0"
@change="onChange"
></v-slider>
</v-flex>
<v-flex xs12 sm6 lg4 class="px-2 pb-2 pt-2">
<v-checkbox
v-model="settings.ThumbUncached"
:disabled="busy"
class="ma-0 pa-0"
color="secondary-dark"
:label="$gettext('Uncached Previews')"
:hint="$gettext('On-demand rendering requires a powerful CPU and is not recommended for smaller home servers, or NAS devices.')"
prepend-icon="memory"
persistent-hint
@change="onChange"
>
</v-checkbox>
</v-flex>
<v-flex xs12 sm6 lg8 class="px-2 pb-2">
<v-subheader class="pa-0">{{ $gettextInterpolate($gettext('Pre-Render Size Limit: %{n}px'), {n: settings.ThumbSize}) }}</v-subheader>
<v-slider
v-model="settings.ThumbSize"
:min="720"
:max="7680"
:step="20"
hide-details
:disabled="busy"
class="mt-0"
@change="onChange"
></v-slider>
</v-flex>
<v-flex xs12 sm6 lg4 class="px-2 pb-2">
<v-subheader class="pa-0">{{ $gettextInterpolate($gettext('JPEG Quality: %{n}'), {n: settings.JpegQuality}) }}</v-subheader>
<v-slider
v-model="settings.JpegQuality"
:min="25"
:max="100"
:disabled="busy"
class="mt-0"
@change="onChange"
></v-slider>
</v-flex>
</v-layout>
</v-card-actions>
<v-card-title primary-title class="pb-0">
<h3 class="body-2 mb-0">
<translate>RAW Conversion</translate>
</h3>
</v-card-title>
<v-card-actions>
<v-layout wrap align-top>
<v-flex xs12 sm8 class="px-2 pb-2">
<v-subheader class="pa-0">{{ $gettextInterpolate($gettext('JPEG Size Limit: %{n}px'), {n: settings.JpegSize}) }}</v-subheader>
<v-flex class="pr-3">
<v-slider
v-model="settings.JpegSize"
:min="720"
:max="30000"
:step="20"
:disabled="busy"
class="mt-0"
@change="onChange"
></v-slider>
</v-flex>
</v-flex>
<v-flex xs12 sm4 class="px-2 pb-2 pt-2">
<v-checkbox
v-model="settings.DarktablePresets"
:disabled="busy"
class="ma-0 pa-0"
color="secondary-dark"
:label="$gettext('Darktable Presets')"
:hint="$gettext('Disables concurrent conversion in favor of using existing presents. Only one file can be converted at a time.')"
prepend-icon="tonality"
persistent-hint
@change="onChange"
>
</v-checkbox>
</v-flex>
</v-layout>
</v-card-actions>
<!--
TODO: Remaining options
OriginalsLimit: 0,
Workers: 0,
WakeupInterval: 0,
SiteUrl: config.values.siteUrl,
SitePreview: config.values.siteUrl,
SiteTitle: config.values.siteTitle,
SiteCaption: config.values.siteCaption,
SiteDescription: config.values.siteDescription,
SiteAuthor: config.values.siteAuthor,
-->
</v-card>
</v-form>

3
internal/config/options.go
View file

@ -79,7 +79,7 @@ type Options struct {
DatabaseConnsIdle int `yaml:"DatabaseConnsIdle" json:"-" flag:"database-conns-idle"`
HttpHost string `yaml:"HttpHost" json:"-" flag:"http-host"`
HttpPort int `yaml:"HttpPort" json:"-" flag:"http-port"`
HttpMode string `yaml:"HttpMode" json:"HttpMode" flag:"http-mode"`
HttpMode string `yaml:"HttpMode" json:"-" flag:"http-mode"`
SipsBin string `yaml:"SipsBin" json:"-" flag:"sips-bin"`
RawtherapeeBin string `yaml:"RawtherapeeBin" json:"-" flag:"rawtherapee-bin"`
DarktableBin string `yaml:"DarktableBin" json:"-" flag:"darktable-bin"`
@ -87,7 +87,6 @@ type Options struct {
HeifConvertBin string `yaml:"HeifConvertBin" json:"-" flag:"heifconvert-bin"`
FFmpegBin string `yaml:"FFmpegBin" json:"-" flag:"ffmpeg-bin"`
ExifToolBin string `yaml:"ExifToolBin" json:"-" flag:"exiftool-bin"`
BackupYaml bool `yaml:"BackupYaml" json:"BackupYaml" flag:"backup-yaml"`
DetachServer bool `yaml:"DetachServer" json:"-" flag:"detach-server"`
DownloadToken string `yaml:"DownloadToken" json:"-" flag:"download-token"`
PreviewToken string `yaml:"PreviewToken" json:"-" flag:"preview-token"`