Add new parameters to settings to configure 'on this day'

lib/Controller/OtherController.php

@@ -111,6 +111,10 @@ public function getUserConfig(): Http\Response
                 'video_loop' => 'true' === $getAppConfig('videoLoop', 'false'),
                 'sidebar_filepath' => 'true' === $getAppConfig('sidebarFilepath', false),
 
+                // on this day settings
+                'onthisday_day_range' => (int) $getAppConfig('onthisdayDayRange', '0'),
+                'onthisday_photos_per_year' => (int) $getAppConfig('onthisdayPhotosPerYear', '10'),
+
                 // folder settings
                 'folders_path' => $getAppConfig('foldersPath', '/'),
                 'show_hidden_folders' => 'true' === $getAppConfig('showHidden', false),

src/components/Settings.vue

@@ -120,6 +120,51 @@
         </div>
       </NcAppSettingsSection>
 
+      <NcAppSettingsSection id="onthisday-settings" :name="names.onthisday">
+        <div class="setting-row">
+          <label for="onthisday-range">
+            {{ t('memories', 'Day range:') }}
+          </label>
+          <input
+            id="onthisday-range"
+            v-model.number="config.onthisday_day_range"
+            type="number"
+            min="0"
+            max="7"
+            step="1"
+            @change="updateOnThisDayRange"
+          />
+          <span class="hint">{{ t('memories', '(0-7 days)') }}</span>
+        </div>
+        <p class="settings-hint">
+          {{
+            t(
+              'memories',
+              'Number of days before and after each anniversary to include. For example, 3 means photos from 3 days before to 3 days after.',
+            )
+          }}
+        </p>
+
+        <div class="setting-row">
+          <label for="onthisday-photos">
+            {{ t('memories', 'Photos per year:') }}
+          </label>
+          <input
+            id="onthisday-photos"
+            v-model.number="config.onthisday_photos_per_year"
+            type="number"
+            min="1"
+            max="50"
+            step="1"
+            @change="updateOnThisDayPhotos"
+          />
+          <span class="hint">{{ t('memories', '(1-50)') }}</span>
+        </div>
+        <p class="settings-hint">
+          {{ t('memories', 'Maximum number of photos to show per year when opening the viewer.') }}
+        </p>
+      </NcAppSettingsSection>
+
       <NcAppSettingsSection id="account-settings" :name="names.account" v-if="isNative">
         {{ t('memories', 'Logged in as {user}', { user }) }}
         <NcButton @click="logout" id="sign-out">
@@ -197,6 +242,33 @@
 input[type='text'] {
   width: 100%;
 }
+
+.setting-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin: 10px 0;
+}
+
+.setting-row label {
+  min-width: 150px;
+}
+
+.setting-row input[type='number'] {
+  width: 80px;
+  padding: 5px;
+}
+
+.setting-row .hint {
+  color: var(--color-text-maxcontrast);
+  font-size: 0.9em;
+}
+
+.settings-hint {
+  margin: 0 0 15px 0;
+  color: var(--color-text-maxcontrast);
+  font-size: 0.9em;
+}
 </style>
 
 <script lang="ts">
@@ -241,6 +313,7 @@ export default defineComponent({
       header: t('memories', 'Memories Settings'),
       general: t('memories', 'General'),
       viewer: t('memories', 'Photo Viewer'),
+      onthisday: t('memories', 'On This Day'),
       account: t('memories', 'Account'),
       folders: t('memories', 'Folders'),
       albums: t('memories', 'Albums'),
@@ -376,6 +449,15 @@ export default defineComponent({
       await this.updateSetting('metadata_in_slideshow', 'metadataInSlideshow');
     },
 
+    // On This Day settings
+    async updateOnThisDayRange() {
+      await this.updateSetting('onthisday_day_range', 'onthisdayDayRange');
+    },
+
+    async updateOnThisDayPhotos() {
+      await this.updateSetting('onthisday_photos_per_year', 'onthisdayPhotosPerYear');
+    },
+
     // Folders settings
     async updateShowHidden() {
       await this.updateSetting('show_hidden_folders', 'showHidden');

src/components/top-matter/OnThisDay.vue

@@ -37,6 +37,7 @@ import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js';
 
 import * as utils from '@services/utils';
 import * as dav from '@services/dav';
+import staticConfig from '@services/static-config';
 import type { IPhoto } from '@typings';
 
 import LeftMoveIcon from 'vue-material-design-icons/ChevronLeft.vue';
@@ -77,6 +78,10 @@ export default defineComponent({
         inner?: HTMLDivElement;
       };
     },
+
+    photosPerYear(): number {
+      return staticConfig.getSync('onthisday_photos_per_year');
+    },
   },
 
   mounted() {
@@ -159,7 +164,7 @@ export default defineComponent({
 
       // For each year, randomly choose 10 photos to display
       for (const year of this.years) {
-        year.photos = utils.randomSubarray(year.photos, 10);
+        year.photos = utils.randomSubarray(year.photos, this.photosPerYear);
       }
 
       // Choose preview photo

src/services/dav/onthisday.ts

@@ -1,6 +1,7 @@
 import axios from '@nextcloud/axios';
 
 import * as utils from '@services/utils';
+import staticConfig from '@services/static-config';
 import { API } from '@services/API';
 
 import type { IDay, IPhoto } from '@typings';
@@ -13,10 +14,12 @@ export async function getOnThisDayRaw() {
   const now = new Date();
   const nowUTC = new Date(now.getTime() - now.getTimezoneOffset() * 60000);
 
+  const dayRange = staticConfig.getSync('onthisday_day_range');
+
   // Populate dayIds
   for (let i = 1; i <= 120; i++) {
     // +- 3 days from this day
-    for (let j = -3; j <= 3; j++) {
+    for (let j = -dayRange; j <= dayRange; j++) {
       const d = new Date(nowUTC);
       d.setFullYear(d.getFullYear() - i);
       d.setDate(d.getDate() + j);

src/services/static-config.ts

@@ -144,6 +144,10 @@ class StaticConfig {
       sidebar_filepath: false,
       metadata_in_slideshow: false,
 
+      // on this day settings
+      onthisday_day_range: 0,
+      onthisday_photos_per_year: 10,
+
       // folder settings
       folders_path: '',
       show_hidden_folders: false,

src/typings/config.d.ts

@@ -32,6 +32,10 @@ declare module '@typings' {
     sidebar_filepath: boolean;
     metadata_in_slideshow: boolean;
 
+    // on this day settings
+    onthisday_day_range: number;
+    onthisday_photos_per_year: number;
+
     // folder settings
     folders_path: string;
     show_hidden_folders: boolean;