From 73fdcd9166e5b083a254ccc1ff161765085bcc1a Mon Sep 17 00:00:00 2001 From: Varun Patil Date: Tue, 12 Sep 2023 09:54:16 -0700 Subject: [PATCH] Refactor implementation --- lib/Controller/OtherController.php | 1 + lib/SystemConfigDefault.php | 2 +- src/components/Settings.vue | 79 +++++++++++++------ src/components/admin/AdminMain.vue | 15 +++- src/components/admin/AdminTypes.ts | 7 +- src/components/admin/sections/FileSupport.vue | 31 -------- src/components/admin/sections/ViewerAdmin.vue | 49 ++++++++++++ src/components/viewer/Viewer.vue | 9 +-- src/components/viewer/types.ts | 4 +- src/mixins/UserConfig.ts | 10 +-- src/services/static-config.ts | 9 ++- src/types.ts | 4 +- 12 files changed, 137 insertions(+), 83 deletions(-) create mode 100644 src/components/admin/sections/ViewerAdmin.vue diff --git a/lib/Controller/OtherController.php b/lib/Controller/OtherController.php index b3a40755..9dbd140a 100644 --- a/lib/Controller/OtherController.php +++ b/lib/Controller/OtherController.php @@ -102,6 +102,7 @@ class OtherController extends GenericApiController 'enable_top_memories' => 'true' === $getAppConfig('enableTopMemories', 'true'), // viewer settings + 'high_res_cond_default' => Util::getSystemConfig('memories.viewer.high_res_cond_default'), 'livephoto_autoplay' => 'true' === $getAppConfig('livephotoAutoplay', 'true'), 'sidebar_filepath' => 'true' === $getAppConfig('sidebarFilepath', false), diff --git a/lib/SystemConfigDefault.php b/lib/SystemConfigDefault.php index 285d2ada..e1529c3e 100644 --- a/lib/SystemConfigDefault.php +++ b/lib/SystemConfigDefault.php @@ -23,7 +23,7 @@ return [ // Default viewer high resolution image loading condition // Valid values: 'always' | 'zoom' | 'never' - 'memories.viewer.high_res_cond' => 'zoom', + 'memories.viewer.high_res_cond_default' => 'zoom', // Disable transcoding 'memories.vod.disable' => true, diff --git a/src/components/Settings.vue b/src/components/Settings.vue index 38b879b0..38d83777 100644 --- a/src/components/Settings.vue +++ b/src/components/Settings.vue @@ -46,7 +46,7 @@ - + - - {{ t('memories', 'Load full size image on zoom') }} - - - - {{ t('memories', 'Always load full size image (not recommended)') }} - - {{ t('memories', 'Show full file path in sidebar') }} + +
+
{{ t('memories', 'High resolution image loading behavior') }}
+ {{ t('memories', 'Load high resolution image on zoom') }} + + {{ t('memories', 'Always load high resolution image (not recommended)') }} + + {{ t('memories', 'Never load high resolution image') }} + +
@@ -158,6 +168,8 @@ const NcCheckboxRadioSwitch = () => import('@nextcloud/vue/dist/Components/NcChe import MultiPathSelectionModal from './modal/MultiPathSelectionModal.vue'; +import type { IConfig } from '../types'; + export default defineComponent({ name: 'Settings', @@ -194,6 +206,10 @@ export default defineComponent({ user(): string { return utils.uid ?? String(); }, + + highResCond(): IConfig['high_res_cond_default'] { + return this.config.high_res_cond || this.config.high_res_cond_default || 'zoom'; + }, }, mounted() { @@ -244,12 +260,9 @@ export default defineComponent({ }, // Viewer settings - async updateFullResOnZoom() { - await this.updateSetting('full_res_on_zoom'); - }, - - async updateFullResAlways() { - await this.updateSetting('full_res_always'); + async updateHighResCond(val: IConfig['high_res_cond']) { + this.config.high_res_cond = val; + await this.updateSetting('high_res_cond'); }, async updateLivephotoAutoplay() { @@ -314,5 +327,21 @@ export default defineComponent({ #sign-out { margin-top: 10px; } + + .checkbox-radio-switch__label { + padding: 1px 14px; // was 4px 14px, make it more compact + } + + .radio-group { + margin-top: 6px; + + .title { + font-weight: 500; + } + + .checkbox-radio-switch-radio { + margin: 2px 16px; // indent for radio button + } + } } diff --git a/src/components/admin/AdminMain.vue b/src/components/admin/AdminMain.vue index 49a89808..a145ff1c 100644 --- a/src/components/admin/AdminMain.vue +++ b/src/components/admin/AdminMain.vue @@ -34,6 +34,7 @@ import Help from './sections/Help.vue'; import Exif from './sections/Exif.vue'; import Indexing from './sections/Indexing.vue'; import FileSupport from './sections/FileSupport.vue'; +import Viewer from './sections/ViewerAdmin.vue'; import Performance from './sections/Performance.vue'; import Apps from './sections/Apps.vue'; import Places from './sections/Places.vue'; @@ -54,7 +55,19 @@ export default defineComponent({ config: null as ISystemConfig | null, sconfig: null as IConfig | null, - components: [Help, Exif, Indexing, FileSupport, Performance, Apps, Places, Video, VideoTranscoder, VideoAccel], + components: [ + Help, + Exif, + Indexing, + FileSupport, + Viewer, + Performance, + Apps, + Places, + Video, + VideoTranscoder, + VideoAccel, + ], }), mounted() { diff --git a/src/components/admin/AdminTypes.ts b/src/components/admin/AdminTypes.ts index 45eb6bf7..445adc38 100644 --- a/src/components/admin/AdminTypes.ts +++ b/src/components/admin/AdminTypes.ts @@ -1,3 +1,5 @@ +import type { IConfig } from '../../types'; + /** System configuration */ export type ISystemConfig = { 'memories.exiftool': string; @@ -7,6 +9,8 @@ export type ISystemConfig = { 'memories.gis_type': number; + 'memories.viewer.high_res_cond_default': IConfig['high_res_cond_default']; + 'memories.vod.disable': boolean; 'memories.vod.ffmpeg': string; 'memories.vod.ffprobe': string; @@ -30,9 +34,6 @@ export type ISystemConfig = { preview_max_y: number; preview_max_memory: number; preview_max_filesize_image: number; - - 'memories.global_full_res_on_zoom': boolean; - 'memories.global_full_res_always': boolean; }; export type IBinaryStatus = 'ok' | 'not_found' | 'not_executable' | 'test_ok' | string; diff --git a/src/components/admin/sections/FileSupport.vue b/src/components/admin/sections/FileSupport.vue index 880a2dfc..c0fcf364 100644 --- a/src/components/admin/sections/FileSupport.vue +++ b/src/components/admin/sections/FileSupport.vue @@ -82,37 +82,6 @@ :value="String(config['preview_max_filesize_image'])" @change="update('preview_max_filesize_image', Number($event.target.value))" /> - -
- {{ - t( - 'memories', - 'You can set the image viewer to always request a full size image when an image is opened, or to open the full size image when an image is zoomed. Users can override this setting.' - ) - }} - {{ - t( - 'memories', - 'Always loading the full size image is not recommended if the images require transcoding (i.e. heic images) because it will cause a large amount of CPU usage.' - ) - }} -
- - - {{ t('memories', 'Load full size image on zoom') }} - - - - {{ t('memories', 'Always load full size image') }} - diff --git a/src/components/admin/sections/ViewerAdmin.vue b/src/components/admin/sections/ViewerAdmin.vue new file mode 100644 index 00000000..45476338 --- /dev/null +++ b/src/components/admin/sections/ViewerAdmin.vue @@ -0,0 +1,49 @@ + + + diff --git a/src/components/viewer/Viewer.vue b/src/components/viewer/Viewer.vue index 894dfc31..790dfae1 100644 --- a/src/components/viewer/Viewer.vue +++ b/src/components/viewer/Viewer.vue @@ -808,14 +808,7 @@ export default defineComponent({ : utils.isLocalPhoto(photo) ? nativex.API.IMAGE_FULL(photo.fileid) : API.IMAGE_DECODABLE(photo.fileid, photo.etag); - - const fullResOnZoom = this.config.override_global_full_res - ? this.config.full_res_on_zoom - : this.config.global_full_res_on_zoom; - const fullResAlways = this.config.override_global_full_res - ? this.config.full_res_always - : this.config.global_full_res_always; - const fullLoadCond = fullResAlways ? 'always' : fullResOnZoom ? 'zoom' : 'never'; + const fullLoadCond = this.config.high_res_cond || this.config.high_res_cond_default || 'zoom'; return { src: previewUrl, diff --git a/src/components/viewer/types.ts b/src/components/viewer/types.ts index 29dacd1a..9b75fcea 100644 --- a/src/components/viewer/types.ts +++ b/src/components/viewer/types.ts @@ -1,6 +1,6 @@ import Content from 'photoswipe/dist/types/slide/content'; import Slide, { _SlideData } from 'photoswipe/dist/types/slide/slide'; -import { IPhoto } from '../../types'; +import type { IPhoto, IConfig } from '../../types'; type PsAugment = { data: _SlideData & { @@ -11,7 +11,7 @@ type PsAugment = { /** The source of the high resolution image. */ highSrc: string | null; /** The condition for loading the high resolution image. */ - highSrcCond: 'always' | 'zoom' | 'never'; + highSrcCond: IConfig['high_res_cond']; /** The type of content. */ type: 'image' | 'video'; }; diff --git a/src/mixins/UserConfig.ts b/src/mixins/UserConfig.ts index a3d8545c..7094393a 100644 --- a/src/mixins/UserConfig.ts +++ b/src/mixins/UserConfig.ts @@ -10,13 +10,7 @@ import staticConfig from '../services/static-config'; const eventName: keyof utils.BusEvent = 'memories:user-config-changed'; -const localSettings: (keyof IConfig)[] = [ - 'square_thumbs', - 'full_res_on_zoom', - 'full_res_always', - 'show_face_rect', - 'album_list_sort', -]; +const localSettings: (keyof IConfig)[] = ['square_thumbs', 'high_res_cond', 'show_face_rect', 'album_list_sort']; export default defineComponent({ name: 'UserConfig', @@ -55,7 +49,7 @@ export default defineComponent({ if (!localSettings.includes(setting)) { await axios.put(API.CONFIG(remote ?? setting), { - value: value.toString(), + value: value?.toString() ?? '', }); } diff --git a/src/services/static-config.ts b/src/services/static-config.ts index bc035c94..47ce1132 100644 --- a/src/services/static-config.ts +++ b/src/services/static-config.ts @@ -88,6 +88,11 @@ class StaticConfig { this.config[key] = value; } + if (value == null) { + this.storage.removeItem(`memories_${key}`); + return; + } + this.storage.setItem(`memories_${key}`, value.toString()); } @@ -117,6 +122,7 @@ class StaticConfig { enable_top_memories: true, // viewer settings + high_res_cond_default: 'zoom', livephoto_autoplay: true, sidebar_filepath: false, @@ -130,8 +136,7 @@ class StaticConfig { // local settings square_thumbs: false, - full_res_on_zoom: true, - full_res_always: false, + high_res_cond: null, show_face_rect: false, album_list_sort: 1, }; diff --git a/src/types.ts b/src/types.ts index 01e4d25a..96d70fc7 100644 --- a/src/types.ts +++ b/src/types.ts @@ -275,6 +275,7 @@ export type IConfig = { enable_top_memories: boolean; // viewer settings + high_res_cond_default: 'always' | 'zoom' | 'never'; livephoto_autoplay: boolean; sidebar_filepath: boolean; @@ -288,8 +289,7 @@ export type IConfig = { // local settings square_thumbs: boolean; - full_res_on_zoom: boolean; - full_res_always: boolean; + high_res_cond: IConfig['high_res_cond_default'] | null; show_face_rect: boolean; album_list_sort: 1 | 2; };