Add square photo config option

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

src/components/Timeline.vue

@@ -285,17 +285,23 @@ 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 = this.config_squareThumbs;
-            this.squareMode = false;
 
+            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];

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)