Refactor implementation

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),
 

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,

src/components/Settings.vue

@@ -46,7 +46,7 @@
         </NcCheckboxRadioSwitch>
       </NcAppSettingsSection>
 
-      <NcAppSettingsSection id="viewer-settings" :title="t('memories', 'Viewer')">
+      <NcAppSettingsSection id="viewer-settings" :title="t('memories', 'Photo Viewer')">
         <NcCheckboxRadioSwitch
           :checked.sync="config.livephoto_autoplay"
           @update:checked="updateLivephotoAutoplay"
@@ -55,24 +55,6 @@
           {{ t('memories', 'Autoplay Live Photos') }}
         </NcCheckboxRadioSwitch>
 
-        <NcCheckboxRadioSwitch
-          :checked.sync="config.full_res_on_zoom"
-          @update:checked="updateFullResOnZoom"
-          type="switch"
-          :disabled="!config.override_global_full_res"
-        >
-          {{ t('memories', 'Load full size image on zoom') }}
-        </NcCheckboxRadioSwitch>
-
-        <NcCheckboxRadioSwitch
-          :checked.sync="config.full_res_always"
-          @update:checked="updateFullResAlways"
-          :disabled="!config.override_global_full_res"
-          type="switch"
-        >
-          {{ t('memories', 'Always load full size image (not recommended)') }}
-        </NcCheckboxRadioSwitch>
-
         <NcCheckboxRadioSwitch
           :checked.sync="config.sidebar_filepath"
           @update:checked="updateSidebarFilepath"
@@ -80,6 +62,34 @@
         >
           {{ t('memories', 'Show full file path in sidebar') }}
         </NcCheckboxRadioSwitch>
+
+        <div class="radio-group">
+          <div class="title">{{ t('memories', 'High resolution image loading behavior') }}</div>
+          <NcCheckboxRadioSwitch
+            :checked="highResCond"
+            value="zoom"
+            name="vhrc_radio"
+            type="radio"
+            @update:checked="updateHighResCond($event)"
+            >{{ t('memories', 'Load high resolution image on zoom') }}
+          </NcCheckboxRadioSwitch>
+          <NcCheckboxRadioSwitch
+            :checked="highResCond"
+            value="always"
+            name="vhrc_radio"
+            type="radio"
+            @update:checked="updateHighResCond($event)"
+            >{{ t('memories', 'Always load high resolution image (not recommended)') }}
+          </NcCheckboxRadioSwitch>
+          <NcCheckboxRadioSwitch
+            :checked="highResCond"
+            value="never"
+            name="vhrc_radio"
+            type="radio"
+            @update:checked="updateHighResCond($event)"
+            >{{ t('memories', 'Never load high resolution image') }}
+          </NcCheckboxRadioSwitch>
+        </div>
       </NcAppSettingsSection>
 
       <NcAppSettingsSection id="account-settings" :title="t('memories', 'Account')" v-if="isNative">
@@ -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() {
+    async updateHighResCond(val: IConfig['high_res_cond']) {
-      await this.updateSetting('full_res_on_zoom');
+      this.config.high_res_cond = val;
-    },
+      await this.updateSetting('high_res_cond');
-
-    async updateFullResAlways() {
-      await this.updateSetting('full_res_always');
     },
 
     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
+    }
+  }
 }
 </style>

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() {

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;

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))"
     />
-
-    <br />
-    {{
-      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.'
-      )
-    }}
-    <br />
-
-    <NcCheckboxRadioSwitch
-      :checked.sync="config['memories.global_full_res_on_zoom']"
-      @update:checked="update('memories.global_full_res_on_zoom')"
-      type="switch"
-    >
-      {{ t('memories', 'Load full size image on zoom') }}
-    </NcCheckboxRadioSwitch>
-
-    <NcCheckboxRadioSwitch
-      :checked.sync="config['memories.global_full_res_always']"
-      @update:checked="update('memories.global_full_res_always')"
-      type="switch"
-    >
-      {{ t('memories', 'Always load full size image') }}
-    </NcCheckboxRadioSwitch>
   </div>
 </template>
 

src/components/admin/sections/ViewerAdmin.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="admin-section">
+    <h2>{{ $options.title }}</h2>
+
+    {{ t('memories', 'Default high resolution image loading behavior of the photo viewer.') }}
+    {{ t('memories', 'The configuration here also applies to public link shares.') }}
+    {{ t('memories', 'Users may override this setting.') }}
+    <br />
+
+    <NcCheckboxRadioSwitch
+      :checked.sync="config['memories.viewer.high_res_cond_default']"
+      value="zoom"
+      name="vhrc_radio"
+      type="radio"
+      @update:checked="update('memories.viewer.high_res_cond_default')"
+      >{{ t('memories', 'Load high resolution image on zoom') }}
+    </NcCheckboxRadioSwitch>
+    <NcCheckboxRadioSwitch
+      :checked.sync="config['memories.viewer.high_res_cond_default']"
+      value="always"
+      name="vhrc_radio"
+      type="radio"
+      @update:checked="update('memories.viewer.high_res_cond_default')"
+      >{{ t('memories', 'Always load high resolution image (not recommended if using HEIC/TIFF)') }}
+    </NcCheckboxRadioSwitch>
+    <NcCheckboxRadioSwitch
+      :checked.sync="config['memories.viewer.high_res_cond_default']"
+      value="never"
+      name="vhrc_radio"
+      type="radio"
+      @update:checked="update('memories.viewer.high_res_cond_default')"
+      >{{ t('memories', 'Never load high resolution image') }}
+    </NcCheckboxRadioSwitch>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+import { translate as t } from '@nextcloud/l10n';
+
+import AdminMixin from '../AdminMixin';
+
+export default defineComponent({
+  name: 'Viewer',
+  title: t('memories', 'Photo Viewer'),
+  mixins: [AdminMixin],
+});
+</script>

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 fullLoadCond = this.config.high_res_cond || this.config.high_res_cond_default || 'zoom';
-      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';
 
       return {
         src: previewUrl,

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';
   };

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)[] = [
+const localSettings: (keyof IConfig)[] = ['square_thumbs', 'high_res_cond', 'show_face_rect', 'album_list_sort'];
-  'square_thumbs',
-  'full_res_on_zoom',
-  'full_res_always',
-  '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() ?? '',
         });
       }
 

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,
+      high_res_cond: null,
-      full_res_always: false,
       show_face_rect: false,
       album_list_sort: 1,
     };

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;
+  high_res_cond: IConfig['high_res_cond_default'] | null;
-  full_res_always: boolean;
   show_face_rect: boolean;
   album_list_sort: 1 | 2;
 };