From 1a960be76858b767bc394335ba7081276f12ec73 Mon Sep 17 00:00:00 2001
From: Varun Patil <varunpatil@ucla.edu>
Date: Sat, 15 Oct 2022 20:18:11 -0700
Subject: [PATCH] Add square photo config option

---
 src/components/Settings.vue |  9 +++++++++
 src/components/Timeline.vue | 17 ++++++++++++-----
 src/mixins/UserConfig.ts    |  1 +
 3 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/src/components/Settings.vue b/src/components/Settings.vue
index dcf9fc8d..bcb6057e 100644
--- a/src/components/Settings.vue
+++ b/src/components/Settings.vue
@@ -32,6 +32,11 @@
             {{ t('memories', 'Show hidden folders') }}
         </NcCheckboxRadioSwitch>
 
+        <NcCheckboxRadioSwitch :checked.sync="config_squareThumbs"
+            type="switch">
+            {{ t('memories', 'Square photos') }}
+        </NcCheckboxRadioSwitch>
+
         <button @click="updateAll()">
             {{ t('memories', 'Update') }}
         </button>
@@ -60,6 +65,10 @@ import { NcCheckboxRadioSwitch } from '@nextcloud/vue'
 })
 export default class Settings extends Mixins(UserConfig, GlobalMixin) {
     async updateAll() {
+        // Update localStorage
+        localStorage.setItem('memories_squareThumbs', this.config_squareThumbs ? '1' : '0');
+
+        // Update remote
         await this.updateSetting('showHidden');
         const res = await this.updateSetting('timelinePath');
         if (res.status === 200) {
diff --git a/src/components/Timeline.vue b/src/components/Timeline.vue
index 780371ec..11bcf241 100644
--- a/src/components/Timeline.vue
+++ b/src/components/Timeline.vue
@@ -285,16 +285,22 @@ export default class Timeline extends Mixins(GlobalMixin, UserConfig) {
         if (window.innerWidth <= 768) {
             // Mobile
             this.numCols = MOBILE_NUM_COLS;
-            this.rowHeight = this.rowWidth / this.numCols;
+            this.rowHeight = Math.floor(this.rowWidth / this.numCols);
             this.squareMode = true;
         } else {
             // Desktop
             this.rowWidth -= 40;
-            this.rowHeight = DESKTOP_ROW_HEIGHT;
-            this.squareMode = false;
+            this.squareMode = this.config_squareThumbs;
 
-            // As a heuristic, assume all images are 4:3 landscape
-            this.numCols = Math.floor(this.rowWidth / (this.rowHeight * 4 / 3));
+            if (this.squareMode) {
+                // Set columns first, then height
+                this.numCols = Math.max(3, Math.floor(this.rowWidth / DESKTOP_ROW_HEIGHT));
+                this.rowHeight = Math.floor(this.rowWidth / this.numCols);
+            } else {
+                // As a heuristic, assume all images are 4:3 landscape
+                this.rowHeight = DESKTOP_ROW_HEIGHT;
+                this.numCols = Math.floor(this.rowWidth / (this.rowHeight * 4 / 3));
+            }
         }
 
         this.scrollerManager.reflow();
@@ -644,6 +650,7 @@ export default class Timeline extends Mixins(GlobalMixin, UserConfig) {
             containerPadding: 0,
             boxSpacing: 0,
             targetRowHeight: this.rowHeight,
+            targetRowHeightTolerance: 0.1,
         });
 
         const head = this.heads[dayId];
diff --git a/src/mixins/UserConfig.ts b/src/mixins/UserConfig.ts
index c0682296..81ab3a94 100644
--- a/src/mixins/UserConfig.ts
+++ b/src/mixins/UserConfig.ts
@@ -34,6 +34,7 @@ export default class UserConfig extends Vue {
     config_showHidden = loadState('memories', 'showHidden') === "true";
     config_tagsEnabled = loadState('memories', 'systemtags');
     config_recognizeEnabled = loadState('memories', 'recognize');
+    config_squareThumbs = localStorage.getItem('memories_squareThumbs') === '1';
 
     created() {
         subscribe(eventName, this.updateLocalSetting)