From 07379d836c070f9fcb19823cab786674847e5c7f Mon Sep 17 00:00:00 2001
From: Varun Patil <varunpatil@ucla.edu>
Date: Sat, 10 Dec 2022 01:01:44 -0800
Subject: [PATCH] remove class vue dep (1)

---
 src/App.vue                         |  326 +++--
 src/components/FirstStart.vue       |  141 +-
 src/components/Metadata.vue         |  461 +++---
 src/components/ScrollerManager.vue  |  829 +++++------
 src/components/SelectionManager.vue | 1199 ++++++++--------
 src/components/Settings.vue         |  103 +-
 src/components/Timeline.vue         | 2027 ++++++++++++++-------------
 src/components/frame/Folder.vue     |  119 +-
 src/main.ts                         |    4 +
 9 files changed, 2632 insertions(+), 2577 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 3bc784da..c483b236 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -38,7 +38,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Mixins, Watch } from "vue-property-decorator";
+import Vue, { defineComponent } from "vue";
 
 import NcContent from "@nextcloud/vue/dist/Components/NcContent";
 import NcAppContent from "@nextcloud/vue/dist/Components/NcAppContent";
@@ -49,15 +49,12 @@ const NcAppNavigationSettings = () =>
   import("@nextcloud/vue/dist/Components/NcAppNavigationSettings");
 
 import { generateUrl } from "@nextcloud/router";
-import { getCurrentUser } from "@nextcloud/auth";
 import { translate as t } from "@nextcloud/l10n";
 
 import Timeline from "./components/Timeline.vue";
 import Settings from "./components/Settings.vue";
 import FirstStart from "./components/FirstStart.vue";
 import Metadata from "./components/Metadata.vue";
-import GlobalMixin from "./mixins/GlobalMixin";
-import UserConfig from "./mixins/UserConfig";
 
 import ImageMultiple from "vue-material-design-icons/ImageMultiple.vue";
 import FolderIcon from "vue-material-design-icons/Folder.vue";
@@ -70,7 +67,8 @@ import PeopleIcon from "vue-material-design-icons/AccountBoxMultiple.vue";
 import TagsIcon from "vue-material-design-icons/Tag.vue";
 import MapIcon from "vue-material-design-icons/Map.vue";
 
-@Component({
+export default defineComponent({
+  name: "App",
   components: {
     NcContent,
     NcAppContent,
@@ -93,132 +91,66 @@ import MapIcon from "vue-material-design-icons/Map.vue";
     TagsIcon,
     MapIcon,
   },
-})
-export default class App extends Mixins(GlobalMixin, UserConfig) {
-  // Outer element
 
-  private metadataComponent!: Metadata;
+  data() {
+    return {
+      navItems: [],
+      metadataComponent: null as Metadata,
+    };
+  },
 
-  private readonly navItemsAll = (self: typeof this) => [
-    {
-      name: "timeline",
-      icon: ImageMultiple,
-      title: t("memories", "Timeline"),
+  computed: {
+    ncVersion() {
+      const version = (<any>window.OC).config.version.split(".");
+      return Number(version[0]);
     },
-    {
-      name: "folders",
-      icon: FolderIcon,
-      title: t("memories", "Folders"),
+    recognize() {
+      if (!this.config_recognizeEnabled) {
+        return false;
+      }
+
+      if (this.config_facerecognitionInstalled) {
+        return t("memories", "People (Recognize)");
+      }
+
+      return t("memories", "People");
     },
-    {
-      name: "favorites",
-      icon: Star,
-      title: t("memories", "Favorites"),
+    facerecognition() {
+      if (!this.config_facerecognitionInstalled) {
+        return false;
+      }
+
+      if (this.config_recognizeEnabled) {
+        return t("memories", "People (Face Recognition)");
+      }
+
+      return t("memories", "People");
     },
-    {
-      name: "videos",
-      icon: Video,
-      title: t("memories", "Videos"),
+    isFirstStart() {
+      return this.config_timelinePath === "EMPTY";
     },
-    {
-      name: "albums",
-      icon: AlbumIcon,
-      title: t("memories", "Albums"),
-      if: self.showAlbums,
+    showAlbums() {
+      return this.config_albumsEnabled;
     },
-    {
-      name: "recognize",
-      icon: PeopleIcon,
-      title: self.recognize,
-      if: self.recognize,
+    removeOuterGap() {
+      return this.ncVersion >= 25;
     },
-    {
-      name: "facerecognition",
-      icon: PeopleIcon,
-      title: self.facerecognition,
-      if: self.facerecognition,
+    showNavigation() {
+      return this.$route.name !== "folder-share";
     },
-    {
-      name: "archive",
-      icon: ArchiveIcon,
-      title: t("memories", "Archive"),
+  },
+
+  watch: {
+    route() {
+      this.doRouteChecks();
     },
-    {
-      name: "thisday",
-      icon: CalendarIcon,
-      title: t("memories", "On this day"),
-    },
-    {
-      name: "tags",
-      icon: TagsIcon,
-      title: t("memories", "Tags"),
-      if: self.config_tagsEnabled,
-    },
-    {
-      name: "maps",
-      icon: MapIcon,
-      title: t("memories", "Maps"),
-      if: self.config_mapsEnabled,
-    },
-  ];
-
-  private navItems = [];
-
-  get ncVersion() {
-    const version = (<any>window.OC).config.version.split(".");
-    return Number(version[0]);
-  }
-
-  get recognize() {
-    if (!this.config_recognizeEnabled) {
-      return false;
-    }
-
-    if (this.config_facerecognitionInstalled) {
-      return t("memories", "People (Recognize)");
-    }
-
-    return t("memories", "People");
-  }
-
-  get facerecognition() {
-    if (!this.config_facerecognitionInstalled) {
-      return false;
-    }
-
-    if (this.config_recognizeEnabled) {
-      return t("memories", "People (Face Recognition)");
-    }
-
-    return t("memories", "People");
-  }
-
-  get isFirstStart() {
-    return this.config_timelinePath === "EMPTY";
-  }
-
-  get showAlbums() {
-    return this.config_albumsEnabled;
-  }
-
-  get removeOuterGap() {
-    return this.ncVersion >= 25;
-  }
-
-  get showNavigation() {
-    return this.$route.name !== "folder-share";
-  }
-
-  @Watch("$route")
-  routeChanged() {
-    this.doRouteChecks();
-  }
+  },
 
   mounted() {
     this.doRouteChecks();
 
     // Populate navigation
-    this.navItems = this.navItemsAll(this).filter(
+    this.navItems = this.navItemsAll().filter(
       (item) => typeof item.if === "undefined" || Boolean(item.if)
     );
 
@@ -242,10 +174,7 @@ export default class App extends Mixins(GlobalMixin, UserConfig) {
             if (this.metadataComponent) {
               this.metadataComponent.$destroy();
             }
-            this.metadataComponent = new Metadata({
-              // Better integration with vue parent component
-              parent: context,
-            });
+            this.metadataComponent = new Vue(Metadata);
             // Only mount after we have all the info we need
             await this.metadataComponent.update(fileInfo);
             this.metadataComponent.$mount(el);
@@ -260,56 +189,123 @@ export default class App extends Mixins(GlobalMixin, UserConfig) {
         })
       );
     }
-  }
+  },
 
-  async beforeMount() {
-    if ("serviceWorker" in navigator) {
-      // Use the window load event to keep the page load performant
-      window.addEventListener("load", async () => {
-        try {
-          const url = generateUrl("/apps/memories/service-worker.js");
-          const registration = await navigator.serviceWorker.register(url, {
-            scope: generateUrl("/apps/memories"),
-          });
-          console.log("SW registered: ", registration);
-        } catch (error) {
-          console.error("SW registration failed: ", error);
-        }
-      });
-    } else {
-      console.debug("Service Worker is not enabled on this browser.");
-    }
-  }
+  methods: {
+    navItemsAll() {
+      return [
+        {
+          name: "timeline",
+          icon: ImageMultiple,
+          title: t("memories", "Timeline"),
+        },
+        {
+          name: "folders",
+          icon: FolderIcon,
+          title: t("memories", "Folders"),
+        },
+        {
+          name: "favorites",
+          icon: Star,
+          title: t("memories", "Favorites"),
+        },
+        {
+          name: "videos",
+          icon: Video,
+          title: t("memories", "Videos"),
+        },
+        {
+          name: "albums",
+          icon: AlbumIcon,
+          title: t("memories", "Albums"),
+          if: this.showAlbums,
+        },
+        {
+          name: "recognize",
+          icon: PeopleIcon,
+          title: this.recognize,
+          if: this.recognize,
+        },
+        {
+          name: "facerecognition",
+          icon: PeopleIcon,
+          title: this.facerecognition,
+          if: this.facerecognition,
+        },
+        {
+          name: "archive",
+          icon: ArchiveIcon,
+          title: t("memories", "Archive"),
+        },
+        {
+          name: "thisday",
+          icon: CalendarIcon,
+          title: t("memories", "On this day"),
+        },
+        {
+          name: "tags",
+          icon: TagsIcon,
+          title: t("memories", "Tags"),
+          if: this.config_tagsEnabled,
+        },
+        {
+          name: "maps",
+          icon: MapIcon,
+          title: t("memories", "Maps"),
+          if: this.config_mapsEnabled,
+        },
+      ];
+    },
 
-  linkClick() {
-    const nav: any = this.$refs.nav;
-    if (globalThis.windowInnerWidth <= 1024) nav?.toggleNavigation(false);
-  }
+    async beforeMount() {
+      if ("serviceWorker" in navigator) {
+        // Use the window load event to keep the page load performant
+        window.addEventListener("load", async () => {
+          try {
+            const url = generateUrl("/apps/memories/service-worker.js");
+            const registration = await navigator.serviceWorker.register(url, {
+              scope: generateUrl("/apps/memories"),
+            });
+            console.log("SW registered: ", registration);
+          } catch (error) {
+            console.error("SW registration failed: ", error);
+          }
+        });
+      } else {
+        console.debug("Service Worker is not enabled on this browser.");
+      }
+    },
 
-  doRouteChecks() {
-    if (this.$route.name === "folder-share") {
-      this.putFolderShareToken(this.$route.params.token);
-    }
-  }
+    linkClick() {
+      const nav: any = this.$refs.nav;
+      if (globalThis.windowInnerWidth <= 1024) nav?.toggleNavigation(false);
+    },
 
-  putFolderShareToken(token: string) {
-    // Viewer looks for an input with ID sharingToken with the value as the token
-    // Create this element or update it otherwise files not gonna open
-    // https://github.com/nextcloud/viewer/blob/a8c46050fb687dcbb48a022a15a5d1275bf54a8e/src/utils/davUtils.js#L61
-    let tokenInput = document.getElementById(
-      "sharingToken"
-    ) as HTMLInputElement;
-    if (!tokenInput) {
-      tokenInput = document.createElement("input");
-      tokenInput.id = "sharingToken";
-      tokenInput.type = "hidden";
-      tokenInput.style.display = "none";
-      document.body.appendChild(tokenInput);
-    }
+    doRouteChecks() {
+      if (this.$route.name === "folder-share") {
+        this.putFolderShareToken(this.$route.params.token);
+      }
+    },
 
-    tokenInput.value = token;
-  }
-}
+    putFolderShareToken(token: string) {
+      // Viewer looks for an input with ID sharingToken with the value as the token
+      // Create this element or update it otherwise files not gonna open
+      // https://github.com/nextcloud/viewer/blob/a8c46050fb687dcbb48a022a15a5d1275bf54a8e/src/utils/davUtils.js#L61
+      let tokenInput = document.getElementById(
+        "sharingToken"
+      ) as HTMLInputElement;
+      if (!tokenInput) {
+        tokenInput = document.createElement("input");
+        tokenInput.id = "sharingToken";
+        tokenInput.type = "hidden";
+        tokenInput.style.display = "none";
+        document.body.appendChild(tokenInput);
+      }
+
+      tokenInput.value = token;
+    },
+  },
+});
 </script>
 
 <style scoped lang="scss">
diff --git a/src/components/FirstStart.vue b/src/components/FirstStart.vue
index 87141805..b377677f 100644
--- a/src/components/FirstStart.vue
+++ b/src/components/FirstStart.vue
@@ -47,7 +47,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Mixins } from "vue-property-decorator";
+import { defineComponent } from "vue";
 
 import NcContent from "@nextcloud/vue/dist/Components/NcContent";
 import NcAppContent from "@nextcloud/vue/dist/Components/NcAppContent";
@@ -57,95 +57,100 @@ import { getFilePickerBuilder } from "@nextcloud/dialogs";
 import { getCurrentUser } from "@nextcloud/auth";
 import axios from "@nextcloud/axios";
 
-import GlobalMixin from "../mixins/GlobalMixin";
-import UserConfig from "../mixins/UserConfig";
-
 import banner from "../assets/banner.svg";
 import { IDay } from "../types";
 import { API } from "../services/API";
 
-@Component({
+export default defineComponent({
+  name: "FirstStart",
   components: {
     NcContent,
     NcAppContent,
     NcButton,
   },
-})
-export default class FirstStart extends Mixins(GlobalMixin, UserConfig) {
-  banner = banner;
-  error = "";
-  info = "";
-  show = false;
-  chosenPath = "";
+
+  data() {
+    return {
+      banner,
+      error: "",
+      info: "",
+      show: false,
+      chosenPath: "",
+    };
+  },
 
   mounted() {
     window.setTimeout(() => {
       this.show = true;
     }, 300);
-  }
+  },
 
-  get isAdmin() {
-    return getCurrentUser().isAdmin;
-  }
+  computed: {
+    isAdmin() {
+      return getCurrentUser().isAdmin;
+    },
+  },
 
-  async begin() {
-    const path = await this.chooseFolder(
-      this.t("memories", "Choose the root of your timeline"),
-      "/"
-    );
-
-    // Get folder days
-    this.error = "";
-    this.info = "";
-    const query = new URLSearchParams();
-    query.set("timelinePath", path);
-    let url = API.Q(API.DAYS(), query);
-    const res = await axios.get<IDay[]>(url);
-
-    // Check response
-    if (res.status !== 200) {
-      this.error = this.t(
-        "memories",
-        "The selected folder does not seem to be valid. Try again."
+  methods: {
+    async begin() {
+      const path = await this.chooseFolder(
+        this.t("memories", "Choose the root of your timeline"),
+        "/"
       );
-      return;
-    }
 
-    // Count total photos
-    const n = res.data.reduce((acc, day) => acc + day.count, 0);
-    this.info = this.n(
-      "memories",
-      "Found {n} item in {path}",
-      "Found {n} items in {path}",
-      n,
-      {
-        n,
-        path,
+      // Get folder days
+      this.error = "";
+      this.info = "";
+      const query = new URLSearchParams();
+      query.set("timelinePath", path);
+      let url = API.Q(API.DAYS(), query);
+      const res = await axios.get<IDay[]>(url);
+
+      // Check response
+      if (res.status !== 200) {
+        this.error = this.t(
+          "memories",
+          "The selected folder does not seem to be valid. Try again."
+        );
+        return;
       }
-    );
-    this.chosenPath = path;
-  }
 
-  async finish() {
-    this.show = false;
-    await new Promise((resolve) => setTimeout(resolve, 500));
-    this.config_timelinePath = this.chosenPath;
-    await this.updateSetting("timelinePath");
-  }
+      // Count total photos
+      const n = res.data.reduce((acc, day) => acc + day.count, 0);
+      this.info = this.n(
+        "memories",
+        "Found {n} item in {path}",
+        "Found {n} items in {path}",
+        n,
+        {
+          n,
+          path,
+        }
+      );
+      this.chosenPath = path;
+    },
 
-  async chooseFolder(title: string, initial: string) {
-    const picker = getFilePickerBuilder(title)
-      .setMultiSelect(false)
-      .setModal(true)
-      .setType(1)
-      .addMimeTypeFilter("httpd/unix-directory")
-      .allowDirectories()
-      .startAt(initial)
-      .build();
+    async finish() {
+      this.show = false;
+      await new Promise((resolve) => setTimeout(resolve, 500));
+      this.config_timelinePath = this.chosenPath;
+      await this.updateSetting("timelinePath");
+    },
 
-    return await picker.pick();
-  }
-}
+    async chooseFolder(title: string, initial: string) {
+      const picker = getFilePickerBuilder(title)
+        .setMultiSelect(false)
+        .setModal(true)
+        .setType(1)
+        .addMimeTypeFilter("httpd/unix-directory")
+        .allowDirectories()
+        .startAt(initial)
+        .build();
+
+      return await picker.pick();
+    },
+  },
+});
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/Metadata.vue b/src/components/Metadata.vue
index 2bd62481..9b6f961b 100644
--- a/src/components/Metadata.vue
+++ b/src/components/Metadata.vue
@@ -45,8 +45,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Mixins } from "vue-property-decorator";
-import GlobalMixin from "../mixins/GlobalMixin";
+import { defineComponent } from "vue";
 
 import NcActions from "@nextcloud/vue/dist/Components/NcActions";
 import NcActionButton from "@nextcloud/vue/dist/Components/NcActionButton";
@@ -68,258 +67,266 @@ import InfoIcon from "vue-material-design-icons/InformationOutline.vue";
 import LocationIcon from "vue-material-design-icons/MapMarker.vue";
 import { API } from "../services/API";
 
-@Component({
+export default defineComponent({
+  name: "Metadata",
   components: {
     NcActions,
     NcActionButton,
     EditIcon,
   },
-})
-export default class Metadata extends Mixins(GlobalMixin) {
-  private fileInfo: IFileInfo = null;
-  private exif: { [prop: string]: any } = {};
-  private baseInfo: any = {};
-  private nominatim: any = null;
-  private state = 0;
 
-  public async update(fileInfo: IFileInfo) {
-    this.state = Math.random();
-    this.fileInfo = fileInfo;
-    this.exif = {};
-    this.nominatim = null;
-
-    const state = this.state;
-    const url = API.IMAGE_INFO(fileInfo.id);
-    const res = await axios.get<any>(url);
-    if (state !== this.state) return;
-
-    this.baseInfo = res.data;
-    this.exif = res.data.exif || {};
-
-    // Lazy loading
-    this.getNominatim().catch();
-  }
+  data() {
+    return {
+      fileInfo: null as IFileInfo,
+      exif: {} as { [prop: string]: any },
+      baseInfo: {} as any,
+      nominatim: null as any,
+      state: 0,
+    };
+  },
 
   mounted() {
     subscribe("files:file:updated", this.handleFileUpdated);
-  }
+  },
 
   beforeDestroy() {
     unsubscribe("files:file:updated", this.handleFileUpdated);
-  }
+  },
 
-  private handleFileUpdated({ fileid }) {
-    if (fileid && this.fileInfo?.id === fileid) {
-      this.update(this.fileInfo);
-    }
-  }
+  computed: {
+    topFields() {
+      let list: {
+        title: string;
+        subtitle: string[];
+        icon: any;
+        href?: string;
+        edit?: () => void;
+      }[] = [];
 
-  get topFields() {
-    let list: {
-      title: string;
-      subtitle: string[];
-      icon: any;
-      href?: string;
-      edit?: () => void;
-    }[] = [];
-
-    if (this.dateOriginal) {
-      list.push({
-        title: this.dateOriginalStr,
-        subtitle: this.dateOriginalTime,
-        icon: CalendarIcon,
-        edit: () => globalThis.editDate(globalThis.currentViewerPhoto),
-      });
-    }
-
-    if (this.camera) {
-      list.push({
-        title: this.camera,
-        subtitle: this.cameraSub,
-        icon: CameraIrisIcon,
-      });
-    }
-
-    if (this.imageInfo) {
-      list.push({
-        title: this.imageInfo,
-        subtitle: this.imageInfoSub,
-        icon: ImageIcon,
-      });
-    }
-
-    const title = this.exif?.["Title"];
-    const desc = this.exif?.["Description"];
-    if (title || desc) {
-      list.push({
-        title: title || this.t("memories", "No title"),
-        subtitle: [desc || this.t("memories", "No description")],
-        icon: InfoIcon,
-        edit: () => globalThis.editExif(globalThis.currentViewerPhoto),
-      });
-    }
-
-    if (this.address) {
-      list.push({
-        title: this.address,
-        subtitle: [],
-        icon: LocationIcon,
-        href: this.mapFullUrl,
-      });
-    }
-
-    return list;
-  }
-
-  /** Date taken info */
-  get dateOriginal() {
-    const dt = this.exif["DateTimeOriginal"] || this.exif["CreateDate"];
-    if (!dt) return null;
-
-    const m = moment.utc(dt, "YYYY:MM:DD HH:mm:ss");
-    if (!m.isValid()) return null;
-    m.locale(getCanonicalLocale());
-    return m;
-  }
-
-  get dateOriginalStr() {
-    if (!this.dateOriginal) return null;
-    return utils.getLongDateStr(this.dateOriginal.toDate(), true);
-  }
-
-  get dateOriginalTime() {
-    if (!this.dateOriginal) return null;
-
-    // Try to get timezone
-    let tz = this.exif["OffsetTimeOriginal"] || this.exif["OffsetTime"];
-    tz = tz ? "GMT" + tz : "";
-
-    let parts = [];
-    parts.push(this.dateOriginal.format("h:mm A"));
-    if (tz) parts.push(tz);
-
-    return parts;
-  }
-
-  /** Camera make and model info */
-  get camera() {
-    const make = this.exif["Make"];
-    const model = this.exif["Model"];
-    if (!make || !model) return null;
-    if (model.startsWith(make)) return model;
-    return `${make} ${model}`;
-  }
-
-  get cameraSub() {
-    const f = this.exif["FNumber"] || this.exif["Aperture"];
-    const s = this.shutterSpeed;
-    const len = this.exif["FocalLength"];
-    const iso = this.exif["ISO"];
-
-    const parts = [];
-    if (f) parts.push(`f/${f}`);
-    if (s) parts.push(`${s}`);
-    if (len) parts.push(`${len}mm`);
-    if (iso) parts.push(`ISO${iso}`);
-    return parts;
-  }
-
-  /** Convert shutter speed decimal to 1/x format */
-  get shutterSpeed() {
-    const speed = Number(
-      this.exif["ShutterSpeedValue"] ||
-        this.exif["ShutterSpeed"] ||
-        this.exif["ExposureTime"]
-    );
-    if (!speed) return null;
-
-    if (speed < 1) {
-      return `1/${Math.round(1 / speed)}`;
-    } else {
-      return `${Math.round(speed * 10) / 10}s`;
-    }
-  }
-
-  /** Image info */
-  get imageInfo() {
-    return this.fileInfo.basename || (<any>this.fileInfo).name;
-  }
-
-  get imageInfoSub() {
-    let parts = [];
-    let mp = Number(this.exif["Megapixels"]);
-
-    if (this.baseInfo.w && this.baseInfo.h) {
-      parts.push(`${this.baseInfo.w}x${this.baseInfo.h}`);
-
-      if (!mp) {
-        mp = (this.baseInfo.w * this.baseInfo.h) / 1000000;
+      if (this.dateOriginal) {
+        list.push({
+          title: this.dateOriginalStr,
+          subtitle: this.dateOriginalTime,
+          icon: CalendarIcon,
+          edit: () => globalThis.editDate(globalThis.currentViewerPhoto),
+        });
       }
-    }
 
-    if (mp) {
-      parts.unshift(`${mp.toFixed(1)}MP`);
-    }
+      if (this.camera) {
+        list.push({
+          title: this.camera,
+          subtitle: this.cameraSub,
+          icon: CameraIrisIcon,
+        });
+      }
 
-    return parts;
-  }
+      if (this.imageInfo) {
+        list.push({
+          title: this.imageInfo,
+          subtitle: this.imageInfoSub,
+          icon: ImageIcon,
+        });
+      }
 
-  get address() {
-    if (!this.lat || !this.lon) return null;
+      const title = this.exif?.["Title"];
+      const desc = this.exif?.["Description"];
+      if (title || desc) {
+        list.push({
+          title: title || this.t("memories", "No title"),
+          subtitle: [desc || this.t("memories", "No description")],
+          icon: InfoIcon,
+          edit: () => globalThis.editExif(globalThis.currentViewerPhoto),
+        });
+      }
 
-    if (!this.nominatim) return this.t("memories", "Loading …");
+      if (this.address) {
+        list.push({
+          title: this.address,
+          subtitle: [],
+          icon: LocationIcon,
+          href: this.mapFullUrl,
+        });
+      }
 
-    const n = this.nominatim;
-    const country = n.address.country_code?.toUpperCase();
+      return list;
+    },
 
-    if (n.address?.city && n.address.state) {
-      return `${n.address.city}, ${n.address.state}, ${country}`;
-    } else if (n.address?.state) {
-      return `${n.address.state}, ${country}`;
-    } else if (n.address?.country) {
-      return n.address.country;
-    } else {
-      return n.display_name;
-    }
-  }
+    /** Date taken info */
+    dateOriginal() {
+      const dt = this.exif["DateTimeOriginal"] || this.exif["CreateDate"];
+      if (!dt) return null;
 
-  get lat() {
-    return this.exif["GPSLatitude"];
-  }
+      const m = moment.utc(dt, "YYYY:MM:DD HH:mm:ss");
+      if (!m.isValid()) return null;
+      m.locale(getCanonicalLocale());
+      return m;
+    },
 
-  get lon() {
-    return this.exif["GPSLongitude"];
-  }
+    dateOriginalStr() {
+      if (!this.dateOriginal) return null;
+      return utils.getLongDateStr(this.dateOriginal.toDate(), true);
+    },
 
-  get mapUrl() {
-    const boxSize = 0.0075;
-    const bbox = [
-      this.lon - boxSize,
-      this.lat - boxSize,
-      this.lon + boxSize,
-      this.lat + boxSize,
-    ];
-    const m = `${this.lat},${this.lon}`;
-    return `https://www.openstreetmap.org/export/embed.html?bbox=${bbox.join()}&marker=${m}`;
-  }
+    dateOriginalTime() {
+      if (!this.dateOriginal) return null;
 
-  get mapFullUrl() {
-    return `https://www.openstreetmap.org/?mlat=${this.lat}&mlon=${this.lon}#map=18/${this.lat}/${this.lon}`;
-  }
+      // Try to get timezone
+      let tz = this.exif["OffsetTimeOriginal"] || this.exif["OffsetTime"];
+      tz = tz ? "GMT" + tz : "";
 
-  async getNominatim() {
-    const lat = this.lat;
-    const lon = this.lon;
-    if (!lat || !lon) return null;
+      let parts = [];
+      parts.push(this.dateOriginal.format("h:mm A"));
+      if (tz) parts.push(tz);
 
-    const state = this.state;
-    const n = await axios.get(
-      `https://nominatim.openstreetmap.org/reverse?lat=${lat}&lon=${lon}&format=json&zoom=18`
-    );
-    if (state !== this.state) return;
-    this.nominatim = n.data;
-  }
-}
+      return parts;
+    },
+
+    /** Camera make and model info */
+    camera() {
+      const make = this.exif["Make"];
+      const model = this.exif["Model"];
+      if (!make || !model) return null;
+      if (model.startsWith(make)) return model;
+      return `${make} ${model}`;
+    },
+
+    cameraSub() {
+      const f = this.exif["FNumber"] || this.exif["Aperture"];
+      const s = this.shutterSpeed;
+      const len = this.exif["FocalLength"];
+      const iso = this.exif["ISO"];
+
+      const parts = [];
+      if (f) parts.push(`f/${f}`);
+      if (s) parts.push(`${s}`);
+      if (len) parts.push(`${len}mm`);
+      if (iso) parts.push(`ISO${iso}`);
+      return parts;
+    },
+
+    /** Convert shutter speed decimal to 1/x format */
+    shutterSpeed() {
+      const speed = Number(
+        this.exif["ShutterSpeedValue"] ||
+          this.exif["ShutterSpeed"] ||
+          this.exif["ExposureTime"]
+      );
+      if (!speed) return null;
+
+      if (speed < 1) {
+        return `1/${Math.round(1 / speed)}`;
+      } else {
+        return `${Math.round(speed * 10) / 10}s`;
+      }
+    },
+
+    /** Image info */
+    imageInfo() {
+      return this.fileInfo.basename || (<any>this.fileInfo).name;
+    },
+
+    imageInfoSub() {
+      let parts = [];
+      let mp = Number(this.exif["Megapixels"]);
+
+      if (this.baseInfo.w && this.baseInfo.h) {
+        parts.push(`${this.baseInfo.w}x${this.baseInfo.h}`);
+
+        if (!mp) {
+          mp = (this.baseInfo.w * this.baseInfo.h) / 1000000;
+        }
+      }
+
+      if (mp) {
+        parts.unshift(`${mp.toFixed(1)}MP`);
+      }
+
+      return parts;
+    },
+
+    address() {
+      if (!this.lat || !this.lon) return null;
+
+      if (!this.nominatim) return this.t("memories", "Loading …");
+
+      const n = this.nominatim;
+      const country = n.address.country_code?.toUpperCase();
+
+      if (n.address?.city && n.address.state) {
+        return `${n.address.city}, ${n.address.state}, ${country}`;
+      } else if (n.address?.state) {
+        return `${n.address.state}, ${country}`;
+      } else if (n.address?.country) {
+        return n.address.country;
+      } else {
+        return n.display_name;
+      }
+    },
+
+    lat() {
+      return this.exif["GPSLatitude"];
+    },
+
+    lon() {
+      return this.exif["GPSLongitude"];
+    },
+
+    mapUrl() {
+      const boxSize = 0.0075;
+      const bbox = [
+        this.lon - boxSize,
+        this.lat - boxSize,
+        this.lon + boxSize,
+        this.lat + boxSize,
+      ];
+      const m = `${this.lat},${this.lon}`;
+      return `https://www.openstreetmap.org/export/embed.html?bbox=${bbox.join()}&marker=${m}`;
+    },
+
+    mapFullUrl() {
+      return `https://www.openstreetmap.org/?mlat=${this.lat}&mlon=${this.lon}#map=18/${this.lat}/${this.lon}`;
+    },
+  },
+
+  methods: {
+    async update(fileInfo: IFileInfo) {
+      this.state = Math.random();
+      this.fileInfo = fileInfo;
+      this.exif = {};
+      this.nominatim = null;
+
+      const state = this.state;
+      const url = API.IMAGE_INFO(fileInfo.id);
+      const res = await axios.get<any>(url);
+      if (state !== this.state) return;
+
+      this.baseInfo = res.data;
+      this.exif = res.data.exif || {};
+
+      // Lazy loading
+      this.getNominatim().catch();
+    },
+
+    handleFileUpdated({ fileid }) {
+      if (fileid && this.fileInfo?.id === fileid) {
+        this.update(this.fileInfo);
+      }
+    },
+
+    async getNominatim() {
+      const lat = this.lat;
+      const lon = this.lon;
+      if (!lat || !lon) return null;
+
+      const state = this.state;
+      const n = await axios.get(
+        `https://nominatim.openstreetmap.org/reverse?lat=${lat}&lon=${lon}&format=json&zoom=18`
+      );
+      if (state !== this.state) return;
+      this.nominatim = n.data;
+    },
+  },
+});
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/ScrollerManager.vue b/src/components/ScrollerManager.vue
index 6e010854..2772305a 100644
--- a/src/components/ScrollerManager.vue
+++ b/src/components/ScrollerManager.vue
@@ -49,9 +49,8 @@
 </template>
 
 <script lang="ts">
-import { Component, Mixins, Prop } from "vue-property-decorator";
+import { defineComponent, PropType } from "vue";
 import { IRow, IRowType, ITick } from "../types";
-import GlobalMixin from "../mixins/GlobalMixin";
 import ScrollIcon from "vue-material-design-icons/UnfoldMoreHorizontal.vue";
 
 import * as utils from "../services/Utils";
@@ -59,458 +58,468 @@ import * as utils from "../services/Utils";
 // Pixels to snap at
 const SNAP_OFFSET = -35;
 
-@Component({
+export default defineComponent({
+  name: "ScrollerManager",
   components: {
     ScrollIcon,
   },
-})
-export default class ScrollerManager extends Mixins(GlobalMixin) {
-  /** Rows from Timeline */
-  @Prop() rows!: IRow[];
-  /** Total height */
-  @Prop() height!: number;
-  /** Actual recycler component */
-  @Prop() recycler!: any;
-  /** Recycler before slot component */
-  @Prop() recyclerBefore!: any;
 
-  /** Last known height at adjustment */
-  private lastAdjustHeight = 0;
-  /** Height of the entire photo view */
-  private recyclerHeight: number = 100;
-  /** Rect of scroller */
-  private scrollerRect: DOMRect = null;
-  /** Computed ticks */
-  private ticks: ITick[] = [];
-  /** Computed cursor top */
-  private cursorY = 0;
-  /** Hover cursor top */
-  private hoverCursorY = -5;
-  /** Hover cursor text */
-  private hoverCursorText = "";
-  /** Scrolling using the scroller */
-  private scrollingTimer = 0;
-  /** Scrolling now using the scroller */
-  private scrollingNowTimer = 0;
-  /** Scrolling recycler */
-  private scrollingRecyclerTimer = 0;
-  /** Scrolling recycler now */
-  private scrollingRecyclerNowTimer = 0;
-  /** Recycler scrolling throttle */
-  private scrollingRecyclerUpdateTimer = 0;
-  /** View size reflow timer */
-  private reflowRequest = false;
-  /** Tick adjust timer */
-  private adjustRequest = false;
-  /** Scroller is being moved with interaction */
-  private interacting = false;
-  /** Track the last requested y position when interacting */
-  private lastRequestedRecyclerY = 0;
+  props: {
+    /** Rows from Timeline */
+    rows: Array as PropType<IRow[]>,
+    /** Total height */
+    height: Number,
+    /** Actual recycler component */
+    recycler: Object,
+    /** Recycler before slot component */
+    recyclerBefore: HTMLDivElement,
+  },
 
-  /** Get the visible ticks */
-  get visibleTicks() {
-    let key = 9999999900;
-    return this.ticks
-      .filter((tick) => tick.s)
-      .map((tick) => {
-        if (tick.text) {
-          tick.key = key = tick.dayId * 100;
-        } else {
-          tick.key = ++key; // days are sorted descending
-        }
-        return tick;
-      });
-  }
-
-  /** Reset state */
-  public reset() {
-    this.ticks = [];
-    this.cursorY = 0;
-    this.hoverCursorY = -5;
-    this.hoverCursorText = "";
-    this.reflowRequest = false;
-
-    // Clear all timers
-    clearTimeout(this.scrollingTimer);
-    clearTimeout(this.scrollingNowTimer);
-    clearTimeout(this.scrollingRecyclerTimer);
-    clearTimeout(this.scrollingRecyclerNowTimer);
-    clearTimeout(this.scrollingRecyclerUpdateTimer);
-    this.scrollingTimer = 0;
-    this.scrollingNowTimer = 0;
-    this.scrollingRecyclerTimer = 0;
-    this.scrollingRecyclerNowTimer = 0;
-    this.scrollingRecyclerUpdateTimer = 0;
-  }
-
-  /** Recycler scroll event, must be called by timeline */
-  public recyclerScrolled() {
-    // This isn't a renewing timer, it's a scheduled task
-    if (this.scrollingRecyclerUpdateTimer) return;
-    this.scrollingRecyclerUpdateTimer = window.setTimeout(() => {
-      this.scrollingRecyclerUpdateTimer = 0;
-      this.updateFromRecyclerScroll();
-    }, 100);
-
-    // Update that we're scrolling with the recycler
-    utils.setRenewingTimeout(this, "scrollingRecyclerNowTimer", null, 200);
-    utils.setRenewingTimeout(this, "scrollingRecyclerTimer", null, 1500);
-  }
-
-  /** Update cursor position from recycler scroll position */
-  public updateFromRecyclerScroll() {
-    // Ignore if not initialized or moving
-    if (!this.ticks.length || this.interacting) return;
-
-    // Get the scroll position
-    const scroll = this.recycler?.$el?.scrollTop || 0;
-
-    // Get cursor px position
-    const { top1, top2, y1, y2 } = this.getCoords(scroll, "y");
-    const topfrac = (scroll - y1) / (y2 - y1);
-    const rtop = top1 + (top2 - top1) * (topfrac || 0);
-
-    // Always move static cursor to right position
-    this.cursorY = rtop;
-
-    // Move hover cursor to same position unless hovering
-    // Regardless, we need this call because the internal mapping might have changed
-    if ((<HTMLElement>this.$refs.scroller).matches(":hover")) {
-      this.moveHoverCursor(this.hoverCursorY);
-    } else {
-      this.moveHoverCursor(rtop);
-    }
-  }
-
-  /** Re-create tick data in the next frame */
-  public async reflow() {
-    if (this.reflowRequest) return;
-    this.reflowRequest = true;
-    await this.$nextTick();
-    this.reflowNow();
-    this.reflowRequest = false;
-  }
-
-  /** Re-create tick data */
-  private reflowNow() {
-    // Ignore if not initialized
-    if (!this.recycler?.$refs.wrapper) return;
-
-    // Refresh height of recycler
-    this.recyclerHeight = this.recycler.$refs.wrapper.clientHeight;
-
-    // Recreate ticks data
-    this.recreate();
-
-    // Adjust top
-    this.adjustNow();
-  }
-
-  /** Recreate from scratch */
-  private recreate() {
-    // Clear and override any adjust timer
-    this.ticks = [];
-
-    // Ticks
-    let prevYear = 9999;
-    let prevMonth = 0;
-
-    // Get a new tick
-    const getTick = (
-      dayId: number,
-      isMonth = false,
-      text?: string | number
-    ): ITick => {
-      return {
-        dayId,
-        isMonth,
-        text,
-        y: 0,
-        count: 0,
-        topF: 0,
-        top: 0,
-        s: false,
-      };
+  data() {
+    return {
+      /** Last known height at adjustment */
+      lastAdjustHeight: 0,
+      /** Height of the entire photo view */
+      recyclerHeight: 100,
+      /** Rect of scroller */
+      scrollerRect: null as DOMRect,
+      /** Computed ticks */
+      ticks: [] as ITick[],
+      /** Computed cursor top */
+      cursorY: 0,
+      /** Hover cursor top */
+      hoverCursorY: -5,
+      /** Hover cursor text */
+      hoverCursorText: "",
+      /** Scrolling using the scroller */
+      scrollingTimer: 0,
+      /** Scrolling now using the scroller */
+      scrollingNowTimer: 0,
+      /** Scrolling recycler */
+      scrollingRecyclerTimer: 0,
+      /** Scrolling recycler now */
+      scrollingRecyclerNowTimer: 0,
+      /** Recycler scrolling throttle */
+      scrollingRecyclerUpdateTimer: 0,
+      /** View size reflow timer */
+      reflowRequest: false,
+      /** Tick adjust timer */
+      adjustRequest: false,
+      /** Scroller is being moved with interaction */
+      interacting: false,
+      /** Track the last requested y position when interacting */
+      lastRequestedRecyclerY: 0,
     };
+  },
 
-    // Iterate over rows
-    for (const row of this.rows) {
-      if (row.type === IRowType.HEAD) {
-        // Create tick
-        if (this.TagDayIDValueSet.has(row.dayId)) {
-          // Blank tick
-          this.ticks.push(getTick(row.dayId));
-        } else {
-          // Make date string
-          const dateTaken = utils.dayIdToDate(row.dayId);
+  computed: {
+    /** Get the visible ticks */
+    visibleTicks() {
+      let key = 9999999900;
+      return this.ticks
+        .filter((tick) => tick.s)
+        .map((tick) => {
+          if (tick.text) {
+            tick.key = key = tick.dayId * 100;
+          } else {
+            tick.key = ++key; // days are sorted descending
+          }
+          return tick;
+        });
+    },
+  },
 
+  methods: {
+    /** Reset state */
+    reset() {
+      this.ticks = [];
+      this.cursorY = 0;
+      this.hoverCursorY = -5;
+      this.hoverCursorText = "";
+      this.reflowRequest = false;
+
+      // Clear all timers
+      clearTimeout(this.scrollingTimer);
+      clearTimeout(this.scrollingNowTimer);
+      clearTimeout(this.scrollingRecyclerTimer);
+      clearTimeout(this.scrollingRecyclerNowTimer);
+      clearTimeout(this.scrollingRecyclerUpdateTimer);
+      this.scrollingTimer = 0;
+      this.scrollingNowTimer = 0;
+      this.scrollingRecyclerTimer = 0;
+      this.scrollingRecyclerNowTimer = 0;
+      this.scrollingRecyclerUpdateTimer = 0;
+    },
+
+    /** Recycler scroll event, must be called by timeline */
+    recyclerScrolled() {
+      // This isn't a renewing timer, it's a scheduled task
+      if (this.scrollingRecyclerUpdateTimer) return;
+      this.scrollingRecyclerUpdateTimer = window.setTimeout(() => {
+        this.scrollingRecyclerUpdateTimer = 0;
+        this.updateFromRecyclerScroll();
+      }, 100);
+
+      // Update that we're scrolling with the recycler
+      utils.setRenewingTimeout(this, "scrollingRecyclerNowTimer", null, 200);
+      utils.setRenewingTimeout(this, "scrollingRecyclerTimer", null, 1500);
+    },
+
+    /** Update cursor position from recycler scroll position */
+    updateFromRecyclerScroll() {
+      // Ignore if not initialized or moving
+      if (!this.ticks.length || this.interacting) return;
+
+      // Get the scroll position
+      const scroll = this.recycler?.$el?.scrollTop || 0;
+
+      // Get cursor px position
+      const { top1, top2, y1, y2 } = this.getCoords(scroll, "y");
+      const topfrac = (scroll - y1) / (y2 - y1);
+      const rtop = top1 + (top2 - top1) * (topfrac || 0);
+
+      // Always move static cursor to right position
+      this.cursorY = rtop;
+
+      // Move hover cursor to same position unless hovering
+      // Regardless, we need this call because the internal mapping might have changed
+      if ((<HTMLElement>this.$refs.scroller).matches(":hover")) {
+        this.moveHoverCursor(this.hoverCursorY);
+      } else {
+        this.moveHoverCursor(rtop);
+      }
+    },
+
+    /** Re-create tick data in the next frame */
+    async reflow() {
+      if (this.reflowRequest) return;
+      this.reflowRequest = true;
+      await this.$nextTick();
+      this.reflowNow();
+      this.reflowRequest = false;
+    },
+
+    /** Re-create tick data */
+    reflowNow() {
+      // Ignore if not initialized
+      if (!this.recycler?.$refs.wrapper) return;
+
+      // Refresh height of recycler
+      this.recyclerHeight = this.recycler.$refs.wrapper.clientHeight;
+
+      // Recreate ticks data
+      this.recreate();
+
+      // Adjust top
+      this.adjustNow();
+    },
+
+    /** Recreate from scratch */
+    recreate() {
+      // Clear and override any adjust timer
+      this.ticks = [];
+
+      // Ticks
+      let prevYear = 9999;
+      let prevMonth = 0;
+
+      // Get a new tick
+      const getTick = (
+        dayId: number,
+        isMonth = false,
+        text?: string | number
+      ): ITick => {
+        return {
+          dayId,
+          isMonth,
+          text,
+          y: 0,
+          count: 0,
+          topF: 0,
+          top: 0,
+          s: false,
+        };
+      };
+
+      // Iterate over rows
+      for (const row of this.rows) {
+        if (row.type === IRowType.HEAD) {
           // Create tick
-          const dtYear = dateTaken.getUTCFullYear();
-          const dtMonth = dateTaken.getUTCMonth();
-          const isMonth = dtMonth !== prevMonth || dtYear !== prevYear;
-          const text = dtYear === prevYear ? undefined : dtYear;
-          this.ticks.push(getTick(row.dayId, isMonth, text));
+          if (this.TagDayIDValueSet.has(row.dayId)) {
+            // Blank tick
+            this.ticks.push(getTick(row.dayId));
+          } else {
+            // Make date string
+            const dateTaken = utils.dayIdToDate(row.dayId);
 
-          prevMonth = dtMonth;
-          prevYear = dtYear;
+            // Create tick
+            const dtYear = dateTaken.getUTCFullYear();
+            const dtMonth = dateTaken.getUTCMonth();
+            const isMonth = dtMonth !== prevMonth || dtYear !== prevYear;
+            const text = dtYear === prevYear ? undefined : dtYear;
+            this.ticks.push(getTick(row.dayId, isMonth, text));
+
+            prevMonth = dtMonth;
+            prevYear = dtYear;
+          }
         }
       }
-    }
-  }
+    },
 
-  /**
-   * Update tick positions without truncating the list
-   * This is much cheaper than reflowing the whole thing
-   */
-  public async adjust() {
-    if (this.adjustRequest) return;
-    this.adjustRequest = true;
-    await this.$nextTick();
-    this.adjustNow();
-    this.adjustRequest = false;
-  }
+    /**
+     * Update tick positions without truncating the list
+     * This is much cheaper than reflowing the whole thing
+     */
+    async adjust() {
+      if (this.adjustRequest) return;
+      this.adjustRequest = true;
+      await this.$nextTick();
+      this.adjustNow();
+      this.adjustRequest = false;
+    },
 
-  /** Do adjustment synchronously */
-  private adjustNow() {
-    // Refresh height of recycler
-    this.recyclerHeight = this.recycler.$refs.wrapper.clientHeight;
-    const extraY = this.recyclerBefore?.clientHeight || 0;
+    /** Do adjustment synchronously */
+    adjustNow() {
+      // Refresh height of recycler
+      this.recyclerHeight = this.recycler.$refs.wrapper.clientHeight;
+      const extraY = this.recyclerBefore?.clientHeight || 0;
 
-    // Start with the first tick. Walk over all rows counting the
-    // y position. When you hit a row with the tick, update y and
-    // top values and move to the next tick.
-    let tickId = 0;
-    let y = extraY;
-    let count = 0;
+      // Start with the first tick. Walk over all rows counting the
+      // y position. When you hit a row with the tick, update y and
+      // top values and move to the next tick.
+      let tickId = 0;
+      let y = extraY;
+      let count = 0;
 
-    // We only need to recompute top and visible ticks if count
-    // of some tick has changed.
-    let needRecomputeTop = false;
+      // We only need to recompute top and visible ticks if count
+      // of some tick has changed.
+      let needRecomputeTop = false;
 
-    // Check if height changed
-    if (this.lastAdjustHeight !== this.height) {
-      needRecomputeTop = true;
-      this.lastAdjustHeight = this.height;
-    }
-
-    for (const row of this.rows) {
-      // Check if tick is valid
-      if (tickId >= this.ticks.length) break;
-
-      // Check if we hit the next tick
-      const tick = this.ticks[tickId];
-      if (tick.dayId === row.dayId) {
-        tick.y = y;
-
-        // Check if count has changed
-        needRecomputeTop ||= tick.count !== count;
-        tick.count = count;
-
-        // Move to next tick
-        count += row.day.count;
-        tickId++;
+      // Check if height changed
+      if (this.lastAdjustHeight !== this.height) {
+        needRecomputeTop = true;
+        this.lastAdjustHeight = this.height;
       }
 
-      y += row.size;
-    }
+      for (const row of this.rows) {
+        // Check if tick is valid
+        if (tickId >= this.ticks.length) break;
 
-    // Compute visible ticks
-    if (needRecomputeTop) {
-      this.setTicksTop(count);
-      this.computeVisibleTicks();
-    }
-  }
+        // Check if we hit the next tick
+        const tick = this.ticks[tickId];
+        if (tick.dayId === row.dayId) {
+          tick.y = y;
 
-  /** Mark ticks as visible or invisible */
-  private computeVisibleTicks() {
-    // Kind of unrelated here, but refresh rect
-    this.scrollerRect = (
-      this.$refs.scroller as HTMLElement
-    ).getBoundingClientRect();
+          // Check if count has changed
+          needRecomputeTop ||= tick.count !== count;
+          tick.count = count;
 
-    // Do another pass to figure out which points are visible
-    // This is not as bad as it looks, it's actually 12*O(n)
-    // because there are only 12 months in a year
-    const fontSizePx = parseFloat(
-      getComputedStyle(this.$refs.cursorSt as any).fontSize
-    );
-    const minGap = fontSizePx + (globalThis.windowInnerWidth <= 768 ? 5 : 2);
-    let prevShow = -9999;
-    for (const [idx, tick] of this.ticks.entries()) {
-      // Conservative
-      tick.s = false;
-
-      // These aren't for showing
-      if (!tick.isMonth) continue;
-
-      // You can't see these anyway, why bother?
-      if (tick.top < minGap || tick.top > this.height - minGap) continue;
-
-      // Will overlap with the previous tick. Skip anyway.
-      if (tick.top - prevShow < minGap) continue;
-
-      // This is a labelled tick then show it anyway for the sake of best effort
-      if (tick.text) {
-        prevShow = tick.top;
-        tick.s = true;
-        continue;
-      }
-
-      // Lookahead for next labelled tick
-      // If showing this tick would overlap the next one, don't show this one
-      let i = idx + 1;
-      while (i < this.ticks.length) {
-        if (this.ticks[i].text) {
-          break;
+          // Move to next tick
+          count += row.day.count;
+          tickId++;
         }
-        i++;
+
+        y += row.size;
       }
-      if (i < this.ticks.length) {
-        // A labelled tick was found
-        const nextLabelledTick = this.ticks[i];
-        if (
-          tick.top + minGap > nextLabelledTick.top &&
-          nextLabelledTick.top < this.height - minGap
-        ) {
-          // make sure this will be shown
+
+      // Compute visible ticks
+      if (needRecomputeTop) {
+        this.setTicksTop(count);
+        this.computeVisibleTicks();
+      }
+    },
+
+    /** Mark ticks as visible or invisible */
+    computeVisibleTicks() {
+      // Kind of unrelated here, but refresh rect
+      this.scrollerRect = (
+        this.$refs.scroller as HTMLElement
+      ).getBoundingClientRect();
+
+      // Do another pass to figure out which points are visible
+      // This is not as bad as it looks, it's actually 12*O(n)
+      // because there are only 12 months in a year
+      const fontSizePx = parseFloat(
+        getComputedStyle(this.$refs.cursorSt as any).fontSize
+      );
+      const minGap = fontSizePx + (globalThis.windowInnerWidth <= 768 ? 5 : 2);
+      let prevShow = -9999;
+      for (const [idx, tick] of this.ticks.entries()) {
+        // Conservative
+        tick.s = false;
+
+        // These aren't for showing
+        if (!tick.isMonth) continue;
+
+        // You can't see these anyway, why bother?
+        if (tick.top < minGap || tick.top > this.height - minGap) continue;
+
+        // Will overlap with the previous tick. Skip anyway.
+        if (tick.top - prevShow < minGap) continue;
+
+        // This is a labelled tick then show it anyway for the sake of best effort
+        if (tick.text) {
+          prevShow = tick.top;
+          tick.s = true;
           continue;
         }
+
+        // Lookahead for next labelled tick
+        // If showing this tick would overlap the next one, don't show this one
+        let i = idx + 1;
+        while (i < this.ticks.length) {
+          if (this.ticks[i].text) {
+            break;
+          }
+          i++;
+        }
+        if (i < this.ticks.length) {
+          // A labelled tick was found
+          const nextLabelledTick = this.ticks[i];
+          if (
+            tick.top + minGap > nextLabelledTick.top &&
+            nextLabelledTick.top < this.height - minGap
+          ) {
+            // make sure this will be shown
+            continue;
+          }
+        }
+
+        // Show this tick
+        tick.s = true;
+        prevShow = tick.top;
+      }
+    },
+
+    setTicksTop(total: number) {
+      for (const tick of this.ticks) {
+        tick.topF = this.height * (tick.count / total);
+        tick.top = utils.roundHalf(tick.topF);
+      }
+    },
+
+    /** Change actual position of the hover cursor */
+    moveHoverCursor(y: number) {
+      this.hoverCursorY = y;
+
+      // Get index of previous tick
+      let idx = utils.binarySearch(this.ticks, y, "topF");
+      if (idx === 0) {
+        // use this tick
+      } else if (idx >= 1 && idx <= this.ticks.length) {
+        idx = idx - 1;
+      } else {
+        return;
       }
 
-      // Show this tick
-      tick.s = true;
-      prevShow = tick.top;
-    }
-  }
+      // DayId of current hover
+      const dayId = this.ticks[idx]?.dayId;
 
-  private setTicksTop(total: number) {
-    for (const tick of this.ticks) {
-      tick.topF = this.height * (tick.count / total);
-      tick.top = utils.roundHalf(tick.topF);
-    }
-  }
+      // Special days
+      if (dayId === undefined || this.TagDayIDValueSet.has(dayId)) {
+        this.hoverCursorText = "";
+        return;
+      }
 
-  /** Change actual position of the hover cursor */
-  private moveHoverCursor(y: number) {
-    this.hoverCursorY = y;
+      const date = utils.dayIdToDate(dayId);
+      this.hoverCursorText = utils.getShortDateStr(date);
+    },
 
-    // Get index of previous tick
-    let idx = utils.binarySearch(this.ticks, y, "topF");
-    if (idx === 0) {
-      // use this tick
-    } else if (idx >= 1 && idx <= this.ticks.length) {
-      idx = idx - 1;
-    } else {
-      return;
-    }
+    /** Handle mouse hover */
+    mousemove(event: MouseEvent) {
+      if (event.buttons) {
+        this.mousedown(event);
+      }
+      this.moveHoverCursor(event.offsetY);
+    },
 
-    // DayId of current hover
-    const dayId = this.ticks[idx]?.dayId;
+    /** Handle mouse leave */
+    mouseleave() {
+      this.interactend();
+      this.moveHoverCursor(this.cursorY);
+    },
 
-    // Special days
-    if (dayId === undefined || this.TagDayIDValueSet.has(dayId)) {
-      this.hoverCursorText = "";
-      return;
-    }
+    /** Binary search and get coords surrounding position */
+    getCoords(y: number, field: "topF" | "y") {
+      // Top of first and second ticks
+      let top1 = 0,
+        top2 = 0,
+        y1 = 0,
+        y2 = 0;
 
-    const date = utils.dayIdToDate(dayId);
-    this.hoverCursorText = utils.getShortDateStr(date);
-  }
+      // Get index of previous tick
+      let idx = utils.binarySearch(this.ticks, y, field);
+      if (idx <= 0) {
+        top1 = 0;
+        top2 = this.ticks[0].topF;
+        y1 = 0;
+        y2 = this.ticks[0].y;
+      } else if (idx >= this.ticks.length) {
+        const t = this.ticks[this.ticks.length - 1];
+        top1 = t.topF;
+        top2 = this.height;
+        y1 = t.y;
+        y2 = this.recyclerHeight;
+      } else {
+        const t1 = this.ticks[idx - 1];
+        const t2 = this.ticks[idx];
+        top1 = t1.topF;
+        top2 = t2.topF;
+        y1 = t1.y;
+        y2 = t2.y;
+      }
 
-  /** Handle mouse hover */
-  private mousemove(event: MouseEvent) {
-    if (event.buttons) {
-      this.mousedown(event);
-    }
-    this.moveHoverCursor(event.offsetY);
-  }
+      return { top1, top2, y1, y2 };
+    },
 
-  /** Handle mouse leave */
-  private mouseleave() {
-    this.interactend();
-    this.moveHoverCursor(this.cursorY);
-  }
+    /** Move to given scroller Y */
+    moveto(y: number, snap: boolean) {
+      // Move cursor immediately to prevent jank
+      this.cursorY = y;
+      this.hoverCursorY = y;
 
-  /** Binary search and get coords surrounding position */
-  private getCoords(y: number, field: "topF" | "y") {
-    // Top of first and second ticks
-    let top1 = 0,
-      top2 = 0,
-      y1 = 0,
-      y2 = 0;
+      const { top1, top2, y1, y2 } = this.getCoords(y, "topF");
+      const yfrac = (y - top1) / (top2 - top1);
+      const ry = y1 + (y2 - y1) * (yfrac || 0);
+      const targetY = snap ? y1 + SNAP_OFFSET : ry;
 
-    // Get index of previous tick
-    let idx = utils.binarySearch(this.ticks, y, field);
-    if (idx <= 0) {
-      top1 = 0;
-      top2 = this.ticks[0].topF;
-      y1 = 0;
-      y2 = this.ticks[0].y;
-    } else if (idx >= this.ticks.length) {
-      const t = this.ticks[this.ticks.length - 1];
-      top1 = t.topF;
-      top2 = this.height;
-      y1 = t.y;
-      y2 = this.recyclerHeight;
-    } else {
-      const t1 = this.ticks[idx - 1];
-      const t2 = this.ticks[idx];
-      top1 = t1.topF;
-      top2 = t2.topF;
-      y1 = t1.y;
-      y2 = t2.y;
-    }
+      if (this.lastRequestedRecyclerY !== targetY) {
+        this.lastRequestedRecyclerY = targetY;
+        this.recycler.scrollToPosition(targetY);
+      }
 
-    return { top1, top2, y1, y2 };
-  }
+      this.handleScroll();
+    },
 
-  /** Move to given scroller Y */
-  private moveto(y: number, snap: boolean) {
-    // Move cursor immediately to prevent jank
-    this.cursorY = y;
-    this.hoverCursorY = y;
+    /** Handle mouse click */
+    mousedown(event: MouseEvent) {
+      this.interactstart(); // end called on mouseup
+      this.moveto(event.offsetY, false);
+    },
 
-    const { top1, top2, y1, y2 } = this.getCoords(y, "topF");
-    const yfrac = (y - top1) / (top2 - top1);
-    const ry = y1 + (y2 - y1) * (yfrac || 0);
-    const targetY = snap ? y1 + SNAP_OFFSET : ry;
+    /** Handle touch */
+    touchmove(event: any) {
+      let y = event.targetTouches[0].pageY - this.scrollerRect.top;
+      y = Math.max(0, y - 20); // middle of touch finger
+      this.moveto(y, true);
+    },
 
-    if (this.lastRequestedRecyclerY !== targetY) {
-      this.lastRequestedRecyclerY = targetY;
-      this.recycler.scrollToPosition(targetY);
-    }
+    interactstart() {
+      this.interacting = true;
+    },
 
-    this.handleScroll();
-  }
+    interactend() {
+      this.interacting = false;
+      this.recyclerScrolled(); // make sure final position is correct
+    },
 
-  /** Handle mouse click */
-  private mousedown(event: MouseEvent) {
-    this.interactstart(); // end called on mouseup
-    this.moveto(event.offsetY, false);
-  }
-
-  /** Handle touch */
-  private touchmove(event: any) {
-    let y = event.targetTouches[0].pageY - this.scrollerRect.top;
-    y = Math.max(0, y - 20); // middle of touch finger
-    this.moveto(y, true);
-  }
-
-  private interactstart() {
-    this.interacting = true;
-  }
-
-  private interactend() {
-    this.interacting = false;
-    this.recyclerScrolled(); // make sure final position is correct
-  }
-
-  /** Update scroller is being used to scroll recycler */
-  private handleScroll() {
-    utils.setRenewingTimeout(this, "scrollingNowTimer", null, 200);
-    utils.setRenewingTimeout(this, "scrollingTimer", null, 1500);
-  }
-}
+    /** Update scroller is being used to scroll recycler */
+    handleScroll() {
+      utils.setRenewingTimeout(this, "scrollingNowTimer", null, 200);
+      utils.setRenewingTimeout(this, "scrollingTimer", null, 1500);
+    },
+  },
+});
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/SelectionManager.vue b/src/components/SelectionManager.vue
index e194df18..c1870be6 100644
--- a/src/components/SelectionManager.vue
+++ b/src/components/SelectionManager.vue
@@ -48,9 +48,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Emit, Mixins, Prop, Watch } from "vue-property-decorator";
-import GlobalMixin from "../mixins/GlobalMixin";
-import UserConfig from "../mixins/UserConfig";
+import { defineComponent, PropType } from "vue";
 
 import { showError } from "@nextcloud/dialogs";
 
@@ -91,7 +89,8 @@ import AlbumRemoveIcon from "vue-material-design-icons/BookRemove.vue";
 
 type Selection = Map<number, IPhoto>;
 
-@Component({
+export default defineComponent({
+  name: "SelectionManager",
   components: {
     NcActions,
     NcActionButton,
@@ -102,46 +101,35 @@ type Selection = Map<number, IPhoto>;
 
     CloseIcon,
   },
-})
-export default class SelectionManager extends Mixins(GlobalMixin, UserConfig) {
-  @Prop() public heads: { [dayid: number]: IHeadRow };
 
-  /** List of rows for multi selection */
-  @Prop() public rows: IRow[];
+  props: {
+    heads: Object as PropType<{ [dayid: number]: IHeadRow }>,
+    /** List of rows for multi selection */
+    rows: Array as PropType<IRow[]>,
+    /** Rows are in ascending order (desc is normal) */
+    isreverse: Boolean,
+    /** Recycler element to scroll during touch multi-select */
+    recycler: Object,
+  },
 
-  /** Rows are in ascending order (desc is normal) */
-  @Prop() public isreverse: boolean;
+  data() {
+    return {
+      show: false,
+      size: 0,
+      selection: new Map<number, IPhoto>(),
+      defaultActions: null as ISelectionAction[],
 
-  /** Recycler element to scroll during touch multi-select */
-  @Prop() public recycler: any;
-
-  private show = false;
-  private size = 0;
-  private readonly selection!: Selection;
-  private readonly defaultActions: ISelectionAction[];
-
-  private touchAnchor: IPhoto = null;
-  private touchTimer: number = 0;
-  private touchPrevSel!: Selection;
-  private prevOver!: IPhoto;
-  private touchScrollInterval: number = 0;
-  private touchScrollDelta: number = 0;
-  private prevTouch: Touch = null;
-
-  @Emit("refresh")
-  refresh() {}
-
-  @Emit("delete")
-  deletePhotos(photos: IPhoto[]) {}
-
-  @Emit("updateLoading")
-  updateLoading(delta: number) {}
-
-  constructor() {
-    super();
-
-    this.selection = new Map<number, IPhoto>();
+      touchAnchor: null as IPhoto,
+      touchTimer: 0,
+      touchPrevSel: null as Selection,
+      prevOver: null as IPhoto,
+      touchScrollInterval: 0,
+      touchScrollDelta: 0,
+      prevTouch: null as Touch,
+    };
+  },
 
+  mounted() {
     // Make default actions
     this.defaultActions = [
       {
@@ -230,628 +218,649 @@ export default class SelectionManager extends Mixins(GlobalMixin, UserConfig) {
       this.editDateSelection(getSel(photo));
     globalThis.editExif = (photo: IPhoto) =>
       this.editExifSelection(getSel(photo));
-  }
+  },
 
-  /** Download is not allowed on some public shares */
-  private allowDownload(): boolean {
-    return this.state_noDownload;
-  }
-
-  /** Archive is not allowed only on folder routes */
-  private allowArchive() {
-    return this.$route.name !== "folders";
-  }
-
-  /** Is archive route */
-  private routeIsArchive() {
-    return this.$route.name === "archive";
-  }
-
-  /** Is album route */
-  private routeIsAlbum() {
-    return this.config_albumsEnabled && this.$route.name === "albums";
-  }
-
-  /** Public route that can't modify anything */
-  private routeIsPublic() {
-    return this.$route.name === "folder-share";
-  }
-
-  @Watch("show")
-  onShowChange() {
-    const klass = "has-top-bar";
-    if (this.show) {
-      document.body.classList.add(klass);
-    } else {
-      document.body.classList.remove(klass);
-    }
-  }
-
-  /** Trigger to update props from selection set */
-  private selectionChanged() {
-    this.show = this.selection.size > 0;
-    this.size = this.selection.size;
-  }
-
-  /** Is this fileid (or anything if not specified) selected */
-  public has(fileid?: number) {
-    if (fileid === undefined) {
-      return this.selection.size > 0;
-    }
-    return this.selection.has(fileid);
-  }
-
-  /** Get the actions list */
-  private getActions(): ISelectionAction[] {
-    return this.defaultActions.filter(
-      (a) => (!a.if || a.if(this)) && (!this.routeIsPublic() || a.allowPublic)
-    );
-  }
-
-  /** Click on an action */
-  private async click(action: ISelectionAction) {
-    try {
-      this.updateLoading(1);
-      await action.callback(this.selection);
-    } catch (error) {
-      console.error(error);
-    } finally {
-      this.updateLoading(-1);
-    }
-  }
-
-  /** Clicking on photo */
-  public clickPhoto(photo: IPhoto, event: PointerEvent, rowIdx: number) {
-    if (photo.flag & this.c.FLAG_PLACEHOLDER) return;
-    if (event.pointerType === "touch") return; // let touch events handle this
-
-    if (this.has()) {
-      if (event.shiftKey) {
-        this.selectMulti(photo, this.rows, rowIdx);
+  watch: {
+    show() {
+      const klass = "has-top-bar";
+      if (this.show) {
+        document.body.classList.add(klass);
       } else {
-        this.selectPhoto(photo);
+        document.body.classList.remove(klass);
       }
-    } else {
-      this.openViewer(photo);
-    }
-  }
+    },
+  },
 
-  /** Tap on */
-  protected touchstartPhoto(photo: IPhoto, event: TouchEvent, rowIdx: number) {
-    if (photo.flag & this.c.FLAG_PLACEHOLDER) return;
-    this.rows[rowIdx].virtualSticky = true;
+  methods: {
+    refresh() {
+      this.$emit("refresh");
+    },
 
-    this.resetTouchParams();
+    deletePhotos(photos: IPhoto[]) {
+      this.$emit("deletePhotos", photos);
+    },
 
-    this.touchAnchor = photo;
-    this.prevOver = photo;
-    this.touchPrevSel = new Map(this.selection);
-    this.touchTimer = window.setTimeout(() => {
-      if (this.touchAnchor === photo) {
-        this.selectPhoto(photo, true);
+    updateLoading(delta: number) {
+      this.$emit("updateLoading", delta);
+    },
+
+    /** Download is not allowed on some public shares */
+    allowDownload(): boolean {
+      return this.state_noDownload;
+    },
+
+    /** Archive is not allowed only on folder routes */
+    allowArchive() {
+      return this.$route.name !== "folders";
+    },
+
+    /** Is archive route */
+    routeIsArchive() {
+      return this.$route.name === "archive";
+    },
+
+    /** Is album route */
+    routeIsAlbum() {
+      return this.config_albumsEnabled && this.$route.name === "albums";
+    },
+
+    /** Public route that can't modify anything */
+    routeIsPublic() {
+      return this.$route.name === "folder-share";
+    },
+
+    /** Trigger to update props from selection set */
+    selectionChanged() {
+      this.show = this.selection.size > 0;
+      this.size = this.selection.size;
+    },
+
+    /** Is this fileid (or anything if not specified) selected */
+    has(fileid?: number) {
+      if (fileid === undefined) {
+        return this.selection.size > 0;
       }
-      this.touchTimer = 0;
-    }, 600);
-  }
+      return this.selection.has(fileid);
+    },
 
-  /** Tap off */
-  protected touchendPhoto(photo: IPhoto, event: TouchEvent, rowIdx: number) {
-    if (photo.flag & this.c.FLAG_PLACEHOLDER) return;
-    delete this.rows[rowIdx].virtualSticky;
+    /** Get the actions list */
+    getActions(): ISelectionAction[] {
+      return (
+        this.defaultActions?.filter(
+          (a) =>
+            (!a.if || a.if(this)) && (!this.routeIsPublic() || a.allowPublic)
+        ) || []
+      );
+    },
 
-    if (this.touchTimer) this.clickPhoto(photo, {} as any, rowIdx);
-    this.resetTouchParams();
-  }
+    /** Click on an action */
+    async click(action: ISelectionAction) {
+      try {
+        this.updateLoading(1);
+        await action.callback(this.selection);
+      } catch (error) {
+        console.error(error);
+      } finally {
+        this.updateLoading(-1);
+      }
+    },
 
-  private resetTouchParams() {
-    window.clearTimeout(this.touchTimer);
-    this.touchTimer = 0;
-    this.touchAnchor = null;
-    this.prevOver = undefined;
+    /** Clicking on photo */
+    clickPhoto(photo: IPhoto, event: PointerEvent, rowIdx: number) {
+      if (photo.flag & this.c.FLAG_PLACEHOLDER) return;
+      if (event.pointerType === "touch") return; // let touch events handle this
 
-    window.cancelAnimationFrame(this.touchScrollInterval);
-    this.touchScrollInterval = 0;
+      if (this.has()) {
+        if (event.shiftKey) {
+          this.selectMulti(photo, this.rows, rowIdx);
+        } else {
+          this.selectPhoto(photo);
+        }
+      } else {
+        this.openViewer(photo);
+      }
+    },
 
-    this.prevTouch = null;
-  }
+    /** Tap on */
+    touchstartPhoto(photo: IPhoto, event: TouchEvent, rowIdx: number) {
+      if (photo.flag & this.c.FLAG_PLACEHOLDER) return;
+      this.rows[rowIdx].virtualSticky = true;
 
-  /**
-   * Tap over
-   * photo and rowIdx are that of the *anchor*
-   */
-  protected touchmovePhoto(anchor: IPhoto, event: TouchEvent, rowIdx: number) {
-    if (anchor.flag & this.c.FLAG_PLACEHOLDER) return;
+      this.resetTouchParams();
 
-    if (this.touchTimer) {
-      // Touch is not held, just cancel
+      this.touchAnchor = photo;
+      this.prevOver = photo;
+      this.touchPrevSel = new Map(this.selection);
+      this.touchTimer = window.setTimeout(() => {
+        if (this.touchAnchor === photo) {
+          this.selectPhoto(photo, true);
+        }
+        this.touchTimer = 0;
+      }, 600);
+    },
+
+    /** Tap off */
+    touchendPhoto(photo: IPhoto, event: TouchEvent, rowIdx: number) {
+      if (photo.flag & this.c.FLAG_PLACEHOLDER) return;
+      delete this.rows[rowIdx].virtualSticky;
+
+      if (this.touchTimer) this.clickPhoto(photo, {} as any, rowIdx);
+      this.resetTouchParams();
+    },
+
+    resetTouchParams() {
       window.clearTimeout(this.touchTimer);
       this.touchTimer = 0;
       this.touchAnchor = null;
-      return;
-    } else if (!this.touchAnchor) {
-      // Touch was previously cancelled
-      return;
-    }
+      this.prevOver = undefined;
 
-    // Prevent scrolling
-    event.preventDefault();
-
-    // Use first touch -- can't do much
-    const touch: Touch = event.touches[0];
-    if (!touch) return;
-    this.prevTouch = touch;
-
-    // Scroll if at top or bottom
-    const scrollUp = touch.clientY > 50 && touch.clientY < 110; // 50 topbar
-    const scrollDown = touch.clientY > globalThis.windowInnerHeight - 60;
-    if (scrollUp || scrollDown) {
-      if (scrollUp) {
-        this.touchScrollDelta = (-1 * (110 - touch.clientY)) / 3;
-      } else {
-        this.touchScrollDelta =
-          (touch.clientY - globalThis.windowInnerHeight + 60) / 3;
-      }
-
-      if (this.touchAnchor && !this.touchScrollInterval) {
-        let frameCount = 3;
-
-        const fun = () => {
-          this.recycler.$el.scrollTop += this.touchScrollDelta;
-
-          if (frameCount++ >= 3) {
-            this.touchMoveSelect(this.prevTouch, rowIdx);
-            frameCount = 0;
-          }
-
-          if (this.touchScrollInterval) {
-            this.touchScrollInterval = window.requestAnimationFrame(fun);
-          }
-        };
-        this.touchScrollInterval = window.requestAnimationFrame(fun);
-      }
-    } else {
       window.cancelAnimationFrame(this.touchScrollInterval);
       this.touchScrollInterval = 0;
-    }
 
-    this.touchMoveSelect(touch, rowIdx);
-  }
+      this.prevTouch = null;
+    },
 
-  /** Multi-select triggered by touchmove */
-  private touchMoveSelect(touch: Touch, rowIdx: number) {
-    // Which photo is the cursor over, if any
-    const elems = document.elementsFromPoint(touch.clientX, touch.clientY);
-    const photoComp: any = elems.find((e) => e.classList.contains("p-outer"));
-    let overPhoto: IPhoto = photoComp?.__vue__?.data;
-    if (overPhoto && overPhoto.flag & this.c.FLAG_PLACEHOLDER) overPhoto = null;
+    /**
+     * Tap over
+     * photo and rowIdx are that of the *anchor*
+     */
+    touchmovePhoto(anchor: IPhoto, event: TouchEvent, rowIdx: number) {
+      if (anchor.flag & this.c.FLAG_PLACEHOLDER) return;
 
-    // Do multi-selection "till" overPhoto "from" anchor
-    // This logic is completely different from the desktop because of the
-    // existence of a definitive "anchor" element. We just need to find
-    // rverything between the anchor and the current photo
-    if (overPhoto && this.prevOver !== overPhoto) {
-      this.prevOver = overPhoto;
+      if (this.touchTimer) {
+        // Touch is not held, just cancel
+        window.clearTimeout(this.touchTimer);
+        this.touchTimer = 0;
+        this.touchAnchor = null;
+        return;
+      } else if (!this.touchAnchor) {
+        // Touch was previously cancelled
+        return;
+      }
 
-      // days reverse XOR rows reverse
-      let reverse: boolean;
-      if (overPhoto.dayid === this.touchAnchor.dayid) {
-        const l = overPhoto.d.detail;
-        const ai = l.indexOf(this.touchAnchor);
-        const oi = l.indexOf(overPhoto);
-        if (ai === -1 || oi === -1) return; // Shouldn't happen
-        reverse = ai > oi;
+      // Prevent scrolling
+      event.preventDefault();
+
+      // Use first touch -- can't do much
+      const touch: Touch = event.touches[0];
+      if (!touch) return;
+      this.prevTouch = touch;
+
+      // Scroll if at top or bottom
+      const scrollUp = touch.clientY > 50 && touch.clientY < 110; // 50 topbar
+      const scrollDown = touch.clientY > globalThis.windowInnerHeight - 60;
+      if (scrollUp || scrollDown) {
+        if (scrollUp) {
+          this.touchScrollDelta = (-1 * (110 - touch.clientY)) / 3;
+        } else {
+          this.touchScrollDelta =
+            (touch.clientY - globalThis.windowInnerHeight + 60) / 3;
+        }
+
+        if (this.touchAnchor && !this.touchScrollInterval) {
+          let frameCount = 3;
+
+          const fun = () => {
+            this.recycler.$el.scrollTop += this.touchScrollDelta;
+
+            if (frameCount++ >= 3) {
+              this.touchMoveSelect(this.prevTouch, rowIdx);
+              frameCount = 0;
+            }
+
+            if (this.touchScrollInterval) {
+              this.touchScrollInterval = window.requestAnimationFrame(fun);
+            }
+          };
+          this.touchScrollInterval = window.requestAnimationFrame(fun);
+        }
       } else {
-        reverse = overPhoto.dayid > this.touchAnchor.dayid != this.isreverse;
+        window.cancelAnimationFrame(this.touchScrollInterval);
+        this.touchScrollInterval = 0;
       }
 
-      const newSelection = new Map(this.touchPrevSel);
-      const updatedDays = new Set<number>();
+      this.touchMoveSelect(touch, rowIdx);
+    },
 
-      // Walk over rows
-      let i = rowIdx;
-      let j = this.rows[i].photos.indexOf(this.touchAnchor);
-      while (true) {
-        if (j < 0) {
-          while (i > 0 && !this.rows[--i].photos);
-          if (!this.rows[i].photos) break;
-          j = this.rows[i].photos.length - 1;
-          continue;
-        } else if (j >= this.rows[i].photos.length) {
-          while (i < this.rows.length - 1 && !this.rows[++i].photos);
-          if (!this.rows[i].photos) break;
-          j = 0;
-          continue;
+    /** Multi-select triggered by touchmove */
+    touchMoveSelect(touch: Touch, rowIdx: number) {
+      // Which photo is the cursor over, if any
+      const elems = document.elementsFromPoint(touch.clientX, touch.clientY);
+      const photoComp: any = elems.find((e) => e.classList.contains("p-outer"));
+      let overPhoto: IPhoto = photoComp?.__vue__?.data;
+      if (overPhoto && overPhoto.flag & this.c.FLAG_PLACEHOLDER)
+        overPhoto = null;
+
+      // Do multi-selection "till" overPhoto "from" anchor
+      // This logic is completely different from the desktop because of the
+      // existence of a definitive "anchor" element. We just need to find
+      // rverything between the anchor and the current photo
+      if (overPhoto && this.prevOver !== overPhoto) {
+        this.prevOver = overPhoto;
+
+        // days reverse XOR rows reverse
+        let reverse: boolean;
+        if (overPhoto.dayid === this.touchAnchor.dayid) {
+          const l = overPhoto.d.detail;
+          const ai = l.indexOf(this.touchAnchor);
+          const oi = l.indexOf(overPhoto);
+          if (ai === -1 || oi === -1) return; // Shouldn't happen
+          reverse = ai > oi;
+        } else {
+          reverse = overPhoto.dayid > this.touchAnchor.dayid != this.isreverse;
         }
 
-        let p = this.rows[i]?.photos?.[j];
-        if (!p) break; // shouldn't happen, ever
+        const newSelection = new Map(this.touchPrevSel);
+        const updatedDays = new Set<number>();
 
-        // This is there now
-        newSelection.set(p.fileid, p);
+        // Walk over rows
+        let i = rowIdx;
+        let j = this.rows[i].photos.indexOf(this.touchAnchor);
+        while (true) {
+          if (j < 0) {
+            while (i > 0 && !this.rows[--i].photos);
+            if (!this.rows[i].photos) break;
+            j = this.rows[i].photos.length - 1;
+            continue;
+          } else if (j >= this.rows[i].photos.length) {
+            while (i < this.rows.length - 1 && !this.rows[++i].photos);
+            if (!this.rows[i].photos) break;
+            j = 0;
+            continue;
+          }
 
-        // Perf: only update heads if not selected
-        if (!(p.flag & this.c.FLAG_SELECTED)) {
-          this.selectPhoto(p, true, true);
-          updatedDays.add(p.dayid);
+          let p = this.rows[i]?.photos?.[j];
+          if (!p) break; // shouldn't happen, ever
+
+          // This is there now
+          newSelection.set(p.fileid, p);
+
+          // Perf: only update heads if not selected
+          if (!(p.flag & this.c.FLAG_SELECTED)) {
+            this.selectPhoto(p, true, true);
+            updatedDays.add(p.dayid);
+          }
+
+          // We're trying to update too much -- something went wrong
+          if (newSelection.size - this.selection.size > 50) break;
+
+          // Check goal
+          if (p === overPhoto) break;
+          j += reverse ? -1 : 1;
         }
 
-        // We're trying to update too much -- something went wrong
-        if (newSelection.size - this.selection.size > 50) break;
+        // Remove unselected
+        for (const [fileid, p] of this.selection) {
+          if (!newSelection.has(fileid)) {
+            this.selectPhoto(p, false, true);
+            updatedDays.add(p.dayid);
+          }
+        }
 
-        // Check goal
-        if (p === overPhoto) break;
-        j += reverse ? -1 : 1;
+        // Update heads
+        for (const dayid of updatedDays) {
+          this.updateHeadSelected(this.heads[dayid]);
+        }
+
+        this.$forceUpdate();
+      }
+    },
+
+    /** Add a photo to selection list */
+    selectPhoto(photo: IPhoto, val?: boolean, noUpdate?: boolean) {
+      if (
+        photo.flag & this.c.FLAG_PLACEHOLDER ||
+        photo.flag & this.c.FLAG_IS_FOLDER ||
+        photo.flag & this.c.FLAG_IS_TAG
+      ) {
+        return; // ignore placeholders
       }
 
-      // Remove unselected
-      for (const [fileid, p] of this.selection) {
-        if (!newSelection.has(fileid)) {
-          this.selectPhoto(p, false, true);
-          updatedDays.add(p.dayid);
+      const nval = val ?? !this.selection.has(photo.fileid);
+      if (nval) {
+        photo.flag |= this.c.FLAG_SELECTED;
+        this.selection.set(photo.fileid, photo);
+        this.selectionChanged();
+      } else {
+        photo.flag &= ~this.c.FLAG_SELECTED;
+
+        // Only do this if the photo in the selection set is this one.
+        // The problem arises when there are duplicates (e.g. face rect)
+        // in the list, which creates an inconsistent state if we do this.
+        if (this.selection.get(photo.fileid) === photo) {
+          this.selection.delete(photo.fileid);
+          this.selectionChanged();
         }
       }
 
-      // Update heads
-      for (const dayid of updatedDays) {
-        this.updateHeadSelected(this.heads[dayid]);
+      if (!noUpdate) {
+        this.updateHeadSelected(this.heads[photo.d.dayid]);
+        this.$forceUpdate();
+      }
+    },
+
+    /** Multi-select */
+    selectMulti(photo: IPhoto, rows: IRow[], rowIdx: number) {
+      const pRow = rows[rowIdx];
+      const pIdx = pRow.photos.indexOf(photo);
+      if (pIdx === -1) return;
+
+      const updateDaySet = new Set<number>();
+      let behind = [];
+      let behindFound = false;
+
+      // Look behind
+      for (let i = rowIdx; i > rowIdx - 100; i--) {
+        if (i < 0) break;
+        if (rows[i].type !== IRowType.PHOTOS) continue;
+        if (!rows[i].photos?.length) break;
+
+        const sj = i === rowIdx ? pIdx : rows[i].photos.length - 1;
+        for (let j = sj; j >= 0; j--) {
+          const p = rows[i].photos[j];
+          if (p.flag & this.c.FLAG_PLACEHOLDER || !p.fileid) continue;
+          if (p.flag & this.c.FLAG_SELECTED) {
+            behindFound = true;
+            break;
+          }
+          behind.push(p);
+          updateDaySet.add(p.d.dayid);
+        }
+
+        if (behindFound) break;
       }
 
+      // Select everything behind
+      if (behindFound) {
+        // Clear everything in front in this day
+        const pdIdx = photo.d.detail.indexOf(photo);
+        for (let i = pdIdx + 1; i < photo.d.detail.length; i++) {
+          const p = photo.d.detail[i];
+          if (p.flag & this.c.FLAG_SELECTED) this.selectPhoto(p, false, true);
+        }
+
+        // Clear everything else in front
+        Array.from(this.selection.values())
+          .filter((p: IPhoto) => {
+            return this.isreverse
+              ? p.d.dayid > photo.d.dayid
+              : p.d.dayid < photo.d.dayid;
+          })
+          .forEach((photo: IPhoto) => {
+            this.selectPhoto(photo, false, true);
+            updateDaySet.add(photo.d.dayid);
+          });
+
+        behind.forEach((p) => this.selectPhoto(p, true, true));
+        updateDaySet.forEach((d) => this.updateHeadSelected(this.heads[d]));
+        this.$forceUpdate();
+      }
+    },
+
+    /** Select or deselect all photos in a head */
+    selectHead(head: IHeadRow) {
+      head.selected = !head.selected;
+      for (const row of head.day.rows) {
+        for (const photo of row.photos) {
+          this.selectPhoto(photo, head.selected, true);
+        }
+      }
       this.$forceUpdate();
-    }
-  }
+    },
 
-  /** Add a photo to selection list */
-  public selectPhoto(photo: IPhoto, val?: boolean, noUpdate?: boolean) {
-    if (
-      photo.flag & this.c.FLAG_PLACEHOLDER ||
-      photo.flag & this.c.FLAG_IS_FOLDER ||
-      photo.flag & this.c.FLAG_IS_TAG
-    ) {
-      return; // ignore placeholders
-    }
+    /** Check if the day for a photo is selected entirely */
+    updateHeadSelected(head: IHeadRow) {
+      let selected = true;
 
-    const nval = val ?? !this.selection.has(photo.fileid);
-    if (nval) {
-      photo.flag |= this.c.FLAG_SELECTED;
-      this.selection.set(photo.fileid, photo);
-      this.selectionChanged();
-    } else {
-      photo.flag &= ~this.c.FLAG_SELECTED;
+      // Check if all photos are selected
+      for (const row of head.day.rows) {
+        for (const photo of row.photos) {
+          if (!(photo.flag & this.c.FLAG_SELECTED)) {
+            selected = false;
+            break;
+          }
+        }
+      }
 
-      // Only do this if the photo in the selection set is this one.
-      // The problem arises when there are duplicates (e.g. face rect)
-      // in the list, which creates an inconsistent state if we do this.
-      if (this.selection.get(photo.fileid) === photo) {
+      // Update head
+      head.selected = selected;
+    },
+
+    /** Clear all selected photos */
+    clearSelection(only?: IPhoto[]) {
+      const heads = new Set<IHeadRow>();
+      const toClear = only || this.selection.values();
+      Array.from(toClear).forEach((photo: IPhoto) => {
+        photo.flag &= ~this.c.FLAG_SELECTED;
+        heads.add(this.heads[photo.d.dayid]);
         this.selection.delete(photo.fileid);
         this.selectionChanged();
-      }
-    }
-
-    if (!noUpdate) {
-      this.updateHeadSelected(this.heads[photo.d.dayid]);
+      });
+      heads.forEach(this.updateHeadSelected);
       this.$forceUpdate();
-    }
-  }
+    },
 
-  /** Multi-select */
-  public selectMulti(photo: IPhoto, rows: IRow[], rowIdx: number) {
-    const pRow = rows[rowIdx];
-    const pIdx = pRow.photos.indexOf(photo);
-    if (pIdx === -1) return;
+    /** Restore selections from new day object */
+    restoreDay(day: IDay) {
+      if (!this.has()) {
+        return;
+      }
 
-    const updateDaySet = new Set<number>();
-    let behind = [];
-    let behindFound = false;
+      // FileID => Photo for new day
+      const dayMap = new Map<number, IPhoto>();
+      day.detail.forEach((photo) => {
+        dayMap.set(photo.fileid, photo);
+      });
 
-    // Look behind
-    for (let i = rowIdx; i > rowIdx - 100; i--) {
-      if (i < 0) break;
-      if (rows[i].type !== IRowType.PHOTOS) continue;
-      if (!rows[i].photos?.length) break;
-
-      const sj = i === rowIdx ? pIdx : rows[i].photos.length - 1;
-      for (let j = sj; j >= 0; j--) {
-        const p = rows[i].photos[j];
-        if (p.flag & this.c.FLAG_PLACEHOLDER || !p.fileid) continue;
-        if (p.flag & this.c.FLAG_SELECTED) {
-          behindFound = true;
-          break;
+      this.selection.forEach((photo, fileid) => {
+        // Process this day only
+        if (photo.dayid !== day.dayid) {
+          return;
         }
-        behind.push(p);
-        updateDaySet.add(p.d.dayid);
-      }
 
-      if (behindFound) break;
-    }
-
-    // Select everything behind
-    if (behindFound) {
-      // Clear everything in front in this day
-      const pdIdx = photo.d.detail.indexOf(photo);
-      for (let i = pdIdx + 1; i < photo.d.detail.length; i++) {
-        const p = photo.d.detail[i];
-        if (p.flag & this.c.FLAG_SELECTED) this.selectPhoto(p, false, true);
-      }
-
-      // Clear everything else in front
-      Array.from(this.selection.values())
-        .filter((p) => {
-          return this.isreverse
-            ? p.d.dayid > photo.d.dayid
-            : p.d.dayid < photo.d.dayid;
-        })
-        .forEach((photo: IPhoto) => {
-          this.selectPhoto(photo, false, true);
-          updateDaySet.add(photo.d.dayid);
-        });
-
-      behind.forEach((p) => this.selectPhoto(p, true, true));
-      updateDaySet.forEach((d) => this.updateHeadSelected(this.heads[d]));
-      this.$forceUpdate();
-    }
-  }
-
-  /** Select or deselect all photos in a head */
-  public selectHead(head: IHeadRow) {
-    head.selected = !head.selected;
-    for (const row of head.day.rows) {
-      for (const photo of row.photos) {
-        this.selectPhoto(photo, head.selected, true);
-      }
-    }
-    this.$forceUpdate();
-  }
-
-  /** Check if the day for a photo is selected entirely */
-  private updateHeadSelected(head: IHeadRow) {
-    let selected = true;
-
-    // Check if all photos are selected
-    for (const row of head.day.rows) {
-      for (const photo of row.photos) {
-        if (!(photo.flag & this.c.FLAG_SELECTED)) {
-          selected = false;
-          break;
+        // Remove all selections that are not in the new day
+        if (!dayMap.has(fileid)) {
+          this.selection.delete(fileid);
+          return;
         }
-      }
-    }
 
-    // Update head
-    head.selected = selected;
-  }
+        // Update the photo object
+        const newPhoto = dayMap.get(fileid);
+        this.selection.set(fileid, newPhoto);
+        newPhoto.flag |= this.c.FLAG_SELECTED;
+      });
 
-  /** Clear all selected photos */
-  public clearSelection(only?: IPhoto[]) {
-    const heads = new Set<IHeadRow>();
-    const toClear = only || this.selection.values();
-    Array.from(toClear).forEach((photo: IPhoto) => {
-      photo.flag &= ~this.c.FLAG_SELECTED;
-      heads.add(this.heads[photo.d.dayid]);
-      this.selection.delete(photo.fileid);
       this.selectionChanged();
-    });
-    heads.forEach(this.updateHeadSelected);
-    this.$forceUpdate();
-  }
+    },
 
-  /** Restore selections from new day object */
-  public restoreDay(day: IDay) {
-    if (!this.has()) {
-      return;
-    }
-
-    // FileID => Photo for new day
-    const dayMap = new Map<number, IPhoto>();
-    day.detail.forEach((photo) => {
-      dayMap.set(photo.fileid, photo);
-    });
-
-    this.selection.forEach((photo, fileid) => {
-      // Process this day only
-      if (photo.dayid !== day.dayid) {
-        return;
-      }
-
-      // Remove all selections that are not in the new day
-      if (!dayMap.has(fileid)) {
-        this.selection.delete(fileid);
-        return;
-      }
-
-      // Update the photo object
-      const newPhoto = dayMap.get(fileid);
-      this.selection.set(fileid, newPhoto);
-      newPhoto.flag |= this.c.FLAG_SELECTED;
-    });
-
-    this.selectionChanged();
-  }
-
-  /**
-   * Download the currently selected files
-   */
-  private async downloadSelection(selection: Selection) {
-    if (selection.size >= 100) {
-      if (
-        !confirm(
-          this.t(
-            "memories",
-            "You are about to download a large number of files. Are you sure?"
+    /**
+     * Download the currently selected files
+     */
+    async downloadSelection(selection: Selection) {
+      if (selection.size >= 100) {
+        if (
+          !confirm(
+            this.t(
+              "memories",
+              "You are about to download a large number of files. Are you sure?"
+            )
           )
-        )
-      ) {
-        return;
+        ) {
+          return;
+        }
       }
-    }
-    await dav.downloadFilesByPhotos(Array.from(selection.values()));
-  }
+      await dav.downloadFilesByPhotos(Array.from(selection.values()));
+    },
 
-  /**
-   * Check if all files selected currently are favorites
-   */
-  private allSelectedFavorites(selection: Selection) {
-    return Array.from(selection.values()).every(
-      (p) => p.flag & this.c.FLAG_IS_FAVORITE
-    );
-  }
-
-  /**
-   * Favorite the currently selected photos
-   */
-  private async favoriteSelection(selection: Selection) {
-    const val = !this.allSelectedFavorites(selection);
-    for await (const favIds of dav.favoritePhotos(
-      Array.from(selection.values()),
-      val
-    )) {
-    }
-    this.clearSelection();
-  }
-
-  /**
-   * Delete the currently selected photos
-   */
-  private async deleteSelection(selection: Selection) {
-    if (selection.size >= 100) {
-      if (
-        !confirm(
-          this.t(
-            "memories",
-            "You are about to delete a large number of files. Are you sure?"
-          )
-        )
-      ) {
-        return;
-      }
-    }
-
-    for await (const delIds of dav.deletePhotos(
-      Array.from(selection.values())
-    )) {
-      const delPhotos = delIds
-        .filter((id) => id)
-        .map((id) => selection.get(id));
-      this.deletePhotos(delPhotos);
-    }
-  }
-
-  /**
-   * Open the edit date dialog
-   */
-  private async editDateSelection(selection: Selection) {
-    (<any>this.$refs.editDate).open(Array.from(selection.values()));
-  }
-
-  /**
-   * Open the edit date dialog
-   */
-  private async editExifSelection(selection: Selection) {
-    if (selection.size !== 1) return;
-    (<any>this.$refs.editExif).open(selection.values().next().value);
-  }
-
-  /**
-   * Open the files app with the selected file (one)
-   * Opens a new window.
-   */
-  private async viewInFolder(selection: Selection) {
-    if (selection.size !== 1) return;
-    dav.viewInFolder(selection.values().next().value);
-  }
-
-  /**
-   * Archive the currently selected photos
-   */
-  private async archiveSelection(selection: Selection) {
-    if (selection.size >= 100) {
-      if (
-        !confirm(
-          this.t(
-            "memories",
-            "You are about to touch a large number of files. Are you sure?"
-          )
-        )
-      ) {
-        return;
-      }
-    }
-
-    for await (let delIds of dav.archiveFilesByIds(
-      Array.from(selection.keys()),
-      !this.routeIsArchive()
-    )) {
-      delIds = delIds.filter((x) => x);
-      if (delIds.length === 0) {
-        continue;
-      }
-      const delPhotos = delIds.map((id) => selection.get(id));
-      this.deletePhotos(delPhotos);
-    }
-  }
-
-  /**
-   * Move selected photos to album
-   */
-  private async addToAlbum(selection: Selection) {
-    (<any>this.$refs.addToAlbumModal).open(Array.from(selection.values()));
-  }
-
-  /**
-   * Move selected photos to another person
-   */
-  private async moveSelectionToPerson(selection: Selection) {
-    if (!this.config_showFaceRect) {
-      showError(
-        this.t(
-          "memories",
-          'You must enable "Mark person in preview" to use this feature'
-        )
+    /**
+     * Check if all files selected currently are favorites
+     */
+    allSelectedFavorites(selection: Selection) {
+      return Array.from(selection.values()).every(
+        (p) => p.flag & this.c.FLAG_IS_FAVORITE
       );
-      return;
-    }
-    (<any>this.$refs.faceMoveModal).open(Array.from(selection.values()));
-  }
+    },
 
-  /**
-   * Remove currently selected photos from person
-   */
-  private async removeSelectionFromPerson(selection: Selection) {
-    // Make sure route is valid
-    const { user, name } = this.$route.params;
-    if (this.$route.name !== "recognize" || !user || !name) {
-      return;
-    }
+    /**
+     * Favorite the currently selected photos
+     */
+    async favoriteSelection(selection: Selection) {
+      const val = !this.allSelectedFavorites(selection);
+      for await (const favIds of dav.favoritePhotos(
+        Array.from(selection.values()),
+        val
+      )) {
+      }
+      this.clearSelection();
+    },
 
-    // Check photo ownership
-    if (this.$route.params.user !== getCurrentUser()?.uid) {
-      showError(
-        this.t("memories", 'Only user "{user}" can update this person', {
-          user,
-        })
-      );
-      return;
-    }
+    /**
+     * Delete the currently selected photos
+     */
+    async deleteSelection(selection: Selection) {
+      if (selection.size >= 100) {
+        if (
+          !confirm(
+            this.t(
+              "memories",
+              "You are about to delete a large number of files. Are you sure?"
+            )
+          )
+        ) {
+          return;
+        }
+      }
 
-    // Run query
-    for await (let delIds of dav.removeFaceImages(
-      user,
-      name,
-      Array.from(selection.values())
-    )) {
-      const delPhotos = delIds.filter((x) => x).map((id) => selection.get(id));
-      this.deletePhotos(delPhotos);
-    }
-  }
+      for await (const delIds of dav.deletePhotos(
+        Array.from(selection.values())
+      )) {
+        const delPhotos = delIds
+          .filter((id) => id)
+          .map((id) => selection.get(id));
+        this.deletePhotos(delPhotos);
+      }
+    },
 
-  /** Open viewer with given photo */
-  private openViewer(photo: IPhoto) {
-    this.$router.push({
-      path: this.$route.path,
-      query: this.$route.query,
-      hash: utils.getViewerHash(photo),
-    });
-  }
-}
+    /**
+     * Open the edit date dialog
+     */
+    async editDateSelection(selection: Selection) {
+      (<any>this.$refs.editDate).open(Array.from(selection.values()));
+    },
+
+    /**
+     * Open the edit date dialog
+     */
+    async editExifSelection(selection: Selection) {
+      if (selection.size !== 1) return;
+      (<any>this.$refs.editExif).open(selection.values().next().value);
+    },
+
+    /**
+     * Open the files app with the selected file (one)
+     * Opens a new window.
+     */
+    async viewInFolder(selection: Selection) {
+      if (selection.size !== 1) return;
+      dav.viewInFolder(selection.values().next().value);
+    },
+
+    /**
+     * Archive the currently selected photos
+     */
+    async archiveSelection(selection: Selection) {
+      if (selection.size >= 100) {
+        if (
+          !confirm(
+            this.t(
+              "memories",
+              "You are about to touch a large number of files. Are you sure?"
+            )
+          )
+        ) {
+          return;
+        }
+      }
+
+      for await (let delIds of dav.archiveFilesByIds(
+        Array.from(selection.keys()),
+        !this.routeIsArchive()
+      )) {
+        delIds = delIds.filter((x) => x);
+        if (delIds.length === 0) {
+          continue;
+        }
+        const delPhotos = delIds.map((id) => selection.get(id));
+        this.deletePhotos(delPhotos);
+      }
+    },
+
+    /**
+     * Move selected photos to album
+     */
+    async addToAlbum(selection: Selection) {
+      (<any>this.$refs.addToAlbumModal).open(Array.from(selection.values()));
+    },
+
+    /**
+     * Move selected photos to another person
+     */
+    async moveSelectionToPerson(selection: Selection) {
+      if (!this.config_showFaceRect) {
+        showError(
+          this.t(
+            "memories",
+            'You must enable "Mark person in preview" to use this feature'
+          )
+        );
+        return;
+      }
+      (<any>this.$refs.faceMoveModal).open(Array.from(selection.values()));
+    },
+
+    /**
+     * Remove currently selected photos from person
+     */
+    async removeSelectionFromPerson(selection: Selection) {
+      // Make sure route is valid
+      const { user, name } = this.$route.params;
+      if (this.$route.name !== "recognize" || !user || !name) {
+        return;
+      }
+
+      // Check photo ownership
+      if (this.$route.params.user !== getCurrentUser()?.uid) {
+        showError(
+          this.t("memories", 'Only user "{user}" can update this person', {
+            user,
+          })
+        );
+        return;
+      }
+
+      // Run query
+      for await (let delIds of dav.removeFaceImages(
+        user,
+        name,
+        Array.from(selection.values())
+      )) {
+        const delPhotos = delIds
+          .filter((x) => x)
+          .map((id) => selection.get(id));
+        this.deletePhotos(delPhotos);
+      }
+    },
+
+    /** Open viewer with given photo */
+    openViewer(photo: IPhoto) {
+      this.$router.push({
+        path: this.$route.path,
+        query: this.$route.query,
+        hash: utils.getViewerHash(photo),
+      });
+    },
+  },
+});
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/Settings.vue b/src/components/Settings.vue
index 1a938efc..4437122c 100644
--- a/src/components/Settings.vue
+++ b/src/components/Settings.vue
@@ -69,9 +69,7 @@ input[type="text"] {
 </style>
 
 <script lang="ts">
-import { Component, Mixins } from "vue-property-decorator";
-import GlobalMixin from "../mixins/GlobalMixin";
-import UserConfig from "../mixins/UserConfig";
+import { defineComponent } from "vue";
 
 import { getFilePickerBuilder } from "@nextcloud/dialogs";
 const NcCheckboxRadioSwitch = () =>
@@ -79,62 +77,69 @@ const NcCheckboxRadioSwitch = () =>
 
 import MultiPathSelectionModal from "./modal/MultiPathSelectionModal.vue";
 
-@Component({
+export default defineComponent({
+  name: "Settings",
+
   components: {
     NcCheckboxRadioSwitch,
     MultiPathSelectionModal,
   },
-})
-export default class Settings extends Mixins(UserConfig, GlobalMixin) {
-  get pathSelTitle() {
-    return this.t("memories", "Choose Timeline Paths");
-  }
 
-  async chooseFolder(title: string, initial: string) {
-    const picker = getFilePickerBuilder(title)
-      .setMultiSelect(false)
-      .setModal(true)
-      .setType(1)
-      .addMimeTypeFilter("httpd/unix-directory")
-      .allowDirectories()
-      .startAt(initial)
-      .build();
+  computed: {
+    pathSelTitle() {
+      return this.t("memories", "Choose Timeline Paths");
+    },
+  },
 
-    return await picker.pick();
-  }
+  methods: {
+    async chooseFolder(title: string, initial: string) {
+      const picker = getFilePickerBuilder(title)
+        .setMultiSelect(false)
+        .setModal(true)
+        .setType(1)
+        .addMimeTypeFilter("httpd/unix-directory")
+        .allowDirectories()
+        .startAt(initial)
+        .build();
 
-  async chooseTimelinePath() {
-    (<any>this.$refs.multiPathModal).open(this.config_timelinePath.split(";"));
-  }
+      return await picker.pick();
+    },
 
-  async saveTimelinePath(paths: string[]) {
-    if (!paths || !paths.length) return;
+    async chooseTimelinePath() {
+      (<any>this.$refs.multiPathModal).open(
+        this.config_timelinePath.split(";")
+      );
+    },
 
-    const newPath = paths.join(";");
-    if (newPath !== this.config_timelinePath) {
-      this.config_timelinePath = newPath;
-      await this.updateSetting("timelinePath");
-    }
-  }
+    async saveTimelinePath(paths: string[]) {
+      if (!paths || !paths.length) return;
 
-  async chooseFoldersPath() {
-    let newPath = await this.chooseFolder(
-      this.t("memories", "Choose the root for the folders view"),
-      this.config_foldersPath
-    );
-    if (newPath === "") newPath = "/";
-    if (newPath !== this.config_foldersPath) {
-      this.config_foldersPath = newPath;
-      await this.updateSetting("foldersPath");
-    }
-  }
+      const newPath = paths.join(";");
+      if (newPath !== this.config_timelinePath) {
+        this.config_timelinePath = newPath;
+        await this.updateSetting("timelinePath");
+      }
+    },
 
-  async updateSquareThumbs() {
-    await this.updateSetting("squareThumbs");
-  }
+    async chooseFoldersPath() {
+      let newPath = await this.chooseFolder(
+        this.t("memories", "Choose the root for the folders view"),
+        this.config_foldersPath
+      );
+      if (newPath === "") newPath = "/";
+      if (newPath !== this.config_foldersPath) {
+        this.config_foldersPath = newPath;
+        await this.updateSetting("foldersPath");
+      }
+    },
 
-  async updateShowHidden() {
-    await this.updateSetting("showHidden");
-  }
-}
+    async updateSquareThumbs() {
+      await this.updateSetting("squareThumbs");
+    },
+
+    async updateShowHidden() {
+      await this.updateSetting("showHidden");
+    },
+  },
+});
 </script>
\ No newline at end of file
diff --git a/src/components/Timeline.vue b/src/components/Timeline.vue
index 34063ad6..b8a46a00 100644
--- a/src/components/Timeline.vue
+++ b/src/components/Timeline.vue
@@ -141,9 +141,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Mixins, Watch } from "vue-property-decorator";
-import GlobalMixin from "../mixins/GlobalMixin";
-import UserConfig from "../mixins/UserConfig";
+import { defineComponent } from "vue";
 
 import axios from "@nextcloud/axios";
 import { showError } from "@nextcloud/dialogs";
@@ -174,7 +172,9 @@ const SCROLL_LOAD_DELAY = 100; // Delay in loading data when scrolling
 const DESKTOP_ROW_HEIGHT = 200; // Height of row on desktop
 const MOBILE_ROW_HEIGHT = 120; // Approx row height on mobile
 
-@Component({
+export default defineComponent({
+  name: "Timeline",
+
   components: {
     Folder,
     Tag,
@@ -191,1086 +191,1099 @@ const MOBILE_ROW_HEIGHT = 120; // Approx row height on mobile
     PeopleIcon,
     ImageMultipleIcon,
   },
-})
-export default class Timeline extends Mixins(GlobalMixin, UserConfig) {
-  /** Loading days response */
-  private loading = 0;
-  /** Main list of rows */
-  private list: IRow[] = [];
-  /** Computed number of columns */
-  private numCols = 0;
-  /** Header rows for dayId key */
-  private heads: { [dayid: number]: IHeadRow } = {};
 
-  /** Computed row height */
-  private rowHeight = 100;
-  /** Computed row width */
-  private rowWidth = 100;
+  data() {
+    return {
+      /** Loading days response */
+      loading: 0,
+      /** Main list of rows */
+      list: [] as IRow[],
+      /** Computed number of columns */
+      numCols: 0,
+      /** Header rows for dayId key */
+      heads: {} as { [dayid: number]: IHeadRow },
 
-  /** Current start index */
-  private currentStart = 0;
-  /** Current end index */
-  private currentEnd = 0;
-  /** Resizing timer */
-  private resizeTimer = null as number | null;
-  /** Height of the scroller */
-  private scrollerHeight = 100;
+      /** Computed row height */
+      rowHeight: 100,
+      /** Computed row width */
+      rowWidth: 100,
 
-  /** Set of dayIds for which images loaded */
-  private loadedDays = new Set<number>();
-  /** Set of dayIds for which image size is calculated */
-  private sizedDays = new Set<number>();
-  /** Days to load in the next call */
-  private fetchDayQueue = [] as number[];
-  /** Timer to load day call */
-  private fetchDayTimer = null as number | null;
+      /** Current start index */
+      currentStart: 0,
+      /** Current end index */
+      currentEnd: 0,
+      /** Resizing timer */
+      resizeTimer: null as number | null,
+      /** Height of the scroller */
+      scrollerHeight: 100,
 
-  /** State for request cancellations */
-  private state = Math.random();
+      /** Set of dayIds for which images loaded */
+      loadedDays: new Set<number>(),
+      /** Set of dayIds for which image size is calculated */
+      sizedDays: new Set<number>(),
+      /** Days to load in the next call */
+      fetchDayQueue: [] as number[],
+      /** Timer to load day call */
+      fetchDayTimer: null as number | null,
 
-  /** Selection manager component */
-  private selectionManager!: SelectionManager & any;
-  /** Scroller manager component */
-  private scrollerManager!: ScrollerManager & any;
+      /** State for request cancellations */
+      state: Math.random(),
+
+      /** Selection manager component */
+      selectionManager: null as SelectionManager & any,
+      /** Scroller manager component */
+      scrollerManager: null as ScrollerManager & any,
+    };
+  },
 
   mounted() {
     this.selectionManager = this.$refs.selectionManager;
     this.scrollerManager = this.$refs.scrollerManager;
     this.routeChange(this.$route);
-  }
+  },
 
-  @Watch("$route")
-  async routeChange(to: any, from?: any) {
-    if (from?.path !== to.path) {
-      await this.refresh();
-    }
-
-    // The viewer might change the route immediately again
-    await this.$nextTick();
-
-    // Check if hash has changed
-    const viewerIsOpen = (this.$refs.viewer as any).isOpen;
-    if (from?.hash !== to.hash && to.hash?.startsWith("#v") && !viewerIsOpen) {
-      // Open viewer
-      const parts = to.hash.split("/");
-      if (parts.length !== 3) return;
-
-      // Get params
-      const dayid = parseInt(parts[1]);
-      const key = parts[2];
-      if (isNaN(dayid) || !key) return;
-
-      // Get day
-      const day = this.heads[dayid]?.day;
-      if (day && !day.detail) {
-        const state = this.state;
-        await this.fetchDay(dayid, true);
-        if (state !== this.state) return;
-      }
-
-      // Find photo
-      const photo = day?.detail?.find((p) => p.key === key);
-      if (!photo) return;
-
-      // Scroll to photo if initializing
-      if (!from) {
-        const index = this.list.findIndex(
-          (r) => r.day.dayid === dayid && r.photos?.includes(photo)
-        );
-        if (index !== -1) {
-          (this.$refs.recycler as any).scrollToItem(index);
-        }
-      }
-
-      (this.$refs.viewer as any).open(photo, this.list);
-    } else if (
-      from?.hash?.startsWith("#v") &&
-      !to.hash?.startsWith("#v") &&
-      viewerIsOpen
-    ) {
-      // Close viewer
-      (this.$refs.viewer as any).close();
-    }
-  }
+  watch: {
+    async $route(to: any, from?: any) {
+      await this.routeChange(to, from);
+    },
+  },
 
   beforeDestroy() {
     unsubscribe(this.config_eventName, this.softRefresh);
     unsubscribe("files:file:created", this.softRefresh);
     this.resetState();
-  }
+  },
 
   created() {
     subscribe(this.config_eventName, this.softRefresh);
     subscribe("files:file:created", this.softRefresh);
     window.addEventListener("resize", this.handleResizeWithDelay);
-  }
+  },
 
   destroyed() {
     window.removeEventListener("resize", this.handleResizeWithDelay);
-  }
+  },
 
-  get routeIsBase() {
-    return this.$route.name === "timeline";
-  }
+  computed: {
+    routeIsBase() {
+      return this.$route.name === "timeline";
+    },
+    routeIsPeople() {
+      return ["recognize", "facerecognition"].includes(this.$route.name);
+    },
+    routeIsArchive() {
+      return this.$route.name === "archive";
+    },
+    isMonthView() {
+      return this.$route.name === "albums";
+    },
+    /** Get view name for dynamic top matter */
+    viewName() {
+      switch (this.$route.name) {
+        case "timeline":
+          return this.t("memories", "Your Timeline");
+        case "favorites":
+          return this.t("memories", "Favorites");
+        case "recognize":
+        case "facerecognition":
+          return this.t("memories", "People");
+        case "videos":
+          return this.t("memories", "Videos");
+        case "albums":
+          return this.t("memories", "Albums");
+        case "archive":
+          return this.t("memories", "Archive");
+        case "thisday":
+          return this.t("memories", "On this day");
+        case "tags":
+          return this.t("memories", "Tags");
+        default:
+          return "";
+      }
+    },
+    emptyViewDescription() {
+      switch (this.$route.name) {
+        case "facerecognition":
+          if (this.config_facerecognitionEnabled)
+            return this.t(
+              "memories",
+              "You will find your friends soon. Please, be patient."
+            );
+          else
+            return this.t(
+              "memories",
+              "Face Recognition is disabled. Enable in settings to find your friends."
+            );
+        case "timeline":
+        case "favorites":
+        case "recognize":
+        case "videos":
+        case "albums":
+        case "archive":
+        case "thisday":
+        case "tags":
+        default:
+          return "";
+      }
+    },
+  },
 
-  get routeIsPeople() {
-    return ["recognize", "facerecognition"].includes(this.$route.name);
-  }
+  methods: {
+    async routeChange(to: any, from?: any) {
+      if (from?.path !== to.path) {
+        await this.refresh();
+      }
 
-  get routeIsArchive() {
-    return this.$route.name === "archive";
-  }
+      // The viewer might change the route immediately again
+      await this.$nextTick();
 
-  updateLoading(delta: number) {
-    this.loading += delta;
-  }
+      // Check if hash has changed
+      const viewerIsOpen = (this.$refs.viewer as any).isOpen;
+      if (
+        from?.hash !== to.hash &&
+        to.hash?.startsWith("#v") &&
+        !viewerIsOpen
+      ) {
+        // Open viewer
+        const parts = to.hash.split("/");
+        if (parts.length !== 3) return;
 
-  isMobile() {
-    return globalThis.windowInnerWidth <= 768;
-  }
+        // Get params
+        const dayid = parseInt(parts[1]);
+        const key = parts[2];
+        if (isNaN(dayid) || !key) return;
 
-  isMobileLayout() {
-    return globalThis.windowInnerWidth <= 600;
-  }
+        // Get day
+        const day = this.heads[dayid]?.day;
+        if (day && !day.detail) {
+          const state = this.state;
+          await this.fetchDay(dayid, true);
+          if (state !== this.state) return;
+        }
 
-  get isMonthView() {
-    return this.$route.name === "albums";
-  }
+        // Find photo
+        const photo = day?.detail?.find((p) => p.key === key);
+        if (!photo) return;
 
-  allowBreakout() {
-    return this.isMobileLayout() && !this.config_squareThumbs;
-  }
+        // Scroll to photo if initializing
+        if (!from) {
+          const index = this.list.findIndex(
+            (r) => r.day.dayid === dayid && r.photos?.includes(photo)
+          );
+          if (index !== -1) {
+            (this.$refs.recycler as any).scrollToItem(index);
+          }
+        }
 
-  /** Create new state */
-  async createState() {
-    // Wait for one tick before doing anything
-    await this.$nextTick();
+        (this.$refs.viewer as any).open(photo, this.list);
+      } else if (
+        from?.hash?.startsWith("#v") &&
+        !to.hash?.startsWith("#v") &&
+        viewerIsOpen
+      ) {
+        // Close viewer
+        (this.$refs.viewer as any).close();
+      }
+    },
+    updateLoading(delta: number) {
+      this.loading += delta;
+    },
 
-    // Fit to window
-    this.recomputeSizes();
+    isMobile() {
+      return globalThis.windowInnerWidth <= 768;
+    },
 
-    // Timeline recycler init
-    (this.$refs.recycler as any).$el.addEventListener(
-      "scroll",
-      this.scrollPositionChange,
-      { passive: true }
-    );
+    isMobileLayout() {
+      return globalThis.windowInnerWidth <= 600;
+    },
 
-    // Get data
-    await this.fetchDays();
-  }
+    allowBreakout() {
+      return this.isMobileLayout() && !this.config_squareThumbs;
+    },
 
-  /** Reset all state */
-  async resetState() {
-    this.selectionManager.clearSelection();
-    this.loading = 0;
-    this.list = [];
-    this.heads = {};
-    this.currentStart = 0;
-    this.currentEnd = 0;
-    this.scrollerManager.reset();
-    this.state = Math.random();
-    this.loadedDays.clear();
-    this.sizedDays.clear();
-    this.fetchDayQueue = [];
-    window.clearTimeout(this.fetchDayTimer);
-    window.clearTimeout(this.resizeTimer);
-  }
+    /** Create new state */
+    async createState() {
+      // Wait for one tick before doing anything
+      await this.$nextTick();
 
-  /** Recreate everything */
-  async refresh() {
-    await this.resetState();
-    await this.createState();
-  }
-
-  /** Re-process days */
-  async softRefresh() {
-    this.selectionManager.clearSelection();
-    await this.fetchDays(true);
-  }
-
-  /** Do resize after some time */
-  handleResizeWithDelay() {
-    // Update global vars
-    globalThis.windowInnerWidth = window.innerWidth;
-    globalThis.windowInnerHeight = window.innerHeight;
-
-    // Reflow after timer
-    if (this.resizeTimer) {
-      clearTimeout(this.resizeTimer);
-    }
-    this.resizeTimer = window.setTimeout(() => {
+      // Fit to window
       this.recomputeSizes();
-      this.resizeTimer = null;
-    }, 100);
-  }
 
-  /** Recompute static sizes of containers */
-  recomputeSizes() {
-    // Size of outer container
-    const e = this.$refs.container as Element;
-    let height = e.clientHeight;
-    const width = e.clientWidth;
+      // Timeline recycler init
+      (this.$refs.recycler as any).$el.addEventListener(
+        "scroll",
+        this.scrollPositionChange,
+        { passive: true }
+      );
 
-    // Scroller spans the container height
-    this.scrollerHeight = height;
+      // Get data
+      await this.fetchDays();
+    },
 
-    // Static top matter to exclude from recycler height
-    const topmatter = this.$refs.topmatter as any;
-    const tmHeight = topmatter.$el?.clientHeight || 0;
+    /** Reset all state */
+    async resetState() {
+      this.selectionManager.clearSelection();
+      this.loading = 0;
+      this.list = [];
+      this.heads = {};
+      this.currentStart = 0;
+      this.currentEnd = 0;
+      this.scrollerManager.reset();
+      this.state = Math.random();
+      this.loadedDays.clear();
+      this.sizedDays.clear();
+      this.fetchDayQueue = [];
+      window.clearTimeout(this.fetchDayTimer);
+      window.clearTimeout(this.resizeTimer);
+    },
 
-    // Recycler height
-    const recycler = this.$refs.recycler as any;
-    const targetHeight = height - tmHeight - 4;
-    const targetWidth = this.isMobile() ? width : width - 40;
-    const heightChanged = recycler.$el.clientHeight !== targetHeight;
-    const widthChanged = this.rowWidth !== targetWidth;
+    /** Recreate everything */
+    async refresh() {
+      await this.resetState();
+      await this.createState();
+    },
 
-    if (heightChanged) {
-      recycler.$el.style.height = targetHeight + "px";
-    }
+    /** Re-process days */
+    async softRefresh() {
+      this.selectionManager.clearSelection();
+      await this.fetchDays(true);
+    },
 
-    if (widthChanged) {
-      this.rowWidth = targetWidth;
-    }
+    /** Do resize after some time */
+    handleResizeWithDelay() {
+      // Update global vars
+      globalThis.windowInnerWidth = window.innerWidth;
+      globalThis.windowInnerHeight = window.innerHeight;
 
-    if (!heightChanged && !widthChanged) {
-      // If the target size is the same, nothing else could have
-      // possibly changed either, so just skip
-      return;
-    }
+      // Reflow after timer
+      if (this.resizeTimer) {
+        clearTimeout(this.resizeTimer);
+      }
+      this.resizeTimer = window.setTimeout(() => {
+        this.recomputeSizes();
+        this.resizeTimer = null;
+      }, 100);
+    },
 
-    if (this.isMobileLayout()) {
-      // Mobile
-      this.numCols = Math.max(3, Math.floor(this.rowWidth / MOBILE_ROW_HEIGHT));
-      this.rowHeight = Math.floor(this.rowWidth / this.numCols);
-    } else {
-      // Desktop
-      if (this.config_squareThumbs) {
+    /** Recompute static sizes of containers */
+    recomputeSizes() {
+      // Size of outer container
+      const e = this.$refs.container as Element;
+      let height = e.clientHeight;
+      const width = e.clientWidth;
+
+      // Scroller spans the container height
+      this.scrollerHeight = height;
+
+      // Static top matter to exclude from recycler height
+      const topmatter = this.$refs.topmatter as any;
+      const tmHeight = topmatter.$el?.clientHeight || 0;
+
+      // Recycler height
+      const recycler = this.$refs.recycler as any;
+      const targetHeight = height - tmHeight - 4;
+      const targetWidth = this.isMobile() ? width : width - 40;
+      const heightChanged = recycler.$el.clientHeight !== targetHeight;
+      const widthChanged = this.rowWidth !== targetWidth;
+
+      if (heightChanged) {
+        recycler.$el.style.height = targetHeight + "px";
+      }
+
+      if (widthChanged) {
+        this.rowWidth = targetWidth;
+      }
+
+      if (!heightChanged && !widthChanged) {
+        // If the target size is the same, nothing else could have
+        // possibly changed either, so just skip
+        return;
+      }
+
+      if (this.isMobileLayout()) {
+        // Mobile
         this.numCols = Math.max(
           3,
-          Math.floor(this.rowWidth / DESKTOP_ROW_HEIGHT)
+          Math.floor(this.rowWidth / MOBILE_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.ceil(this.rowWidth / ((this.rowHeight * 4) / 3));
-      }
-    }
-
-    // Reflow if there are elements (this isn't an init call)
-    // An init call reaches here when the top matter size changes
-    if (this.list.length > 0) {
-      // At this point we're sure the size has changed, so we need
-      // to invalidate everything related to sizes
-      this.sizedDays.clear();
-      this.scrollerManager.adjust();
-
-      // Explicitly request a scroll event
-      this.loadScrollChanges(this.currentStart, this.currentEnd);
-    }
-  }
-
-  /**
-   * Triggered when position of scroll change.
-   * This does NOT indicate the items have changed, only that
-   * the pixel position of the recycler has changed.
-   */
-  scrollPositionChange(event?: any) {
-    this.scrollerManager.recyclerScrolled(event);
-  }
-
-  /** Trigger when recycler view changes */
-  scrollChange(startIndex: number, endIndex: number) {
-    if (startIndex === this.currentStart && endIndex === this.currentEnd) {
-      return;
-    }
-
-    // Reset image state
-    for (let i = startIndex; i < endIndex; i++) {
-      const row = this.list[i];
-      if (!row) {
-        continue;
-      }
-
-      // Initialize photos and add placeholders
-      if (row.pct && !row.photos.length) {
-        row.photos = new Array(row.pct);
-        for (let j = 0; j < row.pct; j++) {
-          // Any row that has placeholders has ONLY placeholders
-          // so we can calculate the display width
-          row.photos[j] = {
-            flag: this.c.FLAG_PLACEHOLDER,
-            fileid: Math.random(),
-            dispW: utils.roundHalf(this.rowWidth / this.numCols),
-            dispX: utils.roundHalf((j * this.rowWidth) / this.numCols),
-            dispH: this.rowHeight,
-            dispY: 0,
-          };
-        }
-        delete row.pct;
-      }
-    }
-
-    // Check if this was requested by a refresh
-    const force = this.currentEnd === -1;
-
-    // Make sure we don't do this too often
-    this.currentStart = startIndex;
-    this.currentEnd = endIndex;
-
-    // Check if this was requested specifically
-    if (force) {
-      this.loadScrollChanges(startIndex, endIndex);
-      return;
-    }
-
-    setTimeout(() => {
-      // Get the overlapping range between startIndex and
-      // currentStart and endIndex and currentEnd.
-      // This is the range of rows that we need to update.
-      const start = Math.max(startIndex, this.currentStart);
-      const end = Math.min(endIndex, this.currentEnd);
-
-      if (end - start > 0) {
-        this.loadScrollChanges(start, end);
-      }
-    }, SCROLL_LOAD_DELAY);
-  }
-
-  /** Load image data for given view */
-  loadScrollChanges(startIndex: number, endIndex: number) {
-    // Make sure start and end valid
-    startIndex = Math.max(0, startIndex);
-    endIndex = Math.min(this.list.length - 1, endIndex);
-
-    // Fetch all visible days
-    for (let i = startIndex; i <= endIndex; i++) {
-      let item = this.list[i];
-      if (!item) continue;
-      if (this.loadedDays.has(item.dayId)) {
-        if (!this.sizedDays.has(item.dayId)) {
-          // Just quietly reflow without refetching
-          this.processDay(item.dayId, item.day.detail);
-        }
-        continue;
-      }
-
-      this.fetchDay(item.dayId);
-    }
-  }
-
-  /** Get query string for API calls */
-  getQuery() {
-    const query = new URLSearchParams();
-
-    // Favorites
-    if (this.$route.name === "favorites") {
-      query.set("fav", "1");
-    }
-
-    // Videos
-    if (this.$route.name === "videos") {
-      query.set("vid", "1");
-    }
-
-    // Folder
-    if (this.$route.name === "folders") {
-      query.set("folder", utils.getFolderRoutePath(this.config_foldersPath));
-    }
-
-    // Archive
-    if (this.$route.name === "archive") {
-      query.set("archive", "1");
-    }
-
-    // People
-    if (
-      this.routeIsPeople &&
-      this.$route.params.user &&
-      this.$route.params.name
-    ) {
-      query.set(
-        this.$route.name, // "recognize" or "facerecognition"
-        `${this.$route.params.user}/${this.$route.params.name}`
-      );
-
-      // Face rect
-      if (this.config_showFaceRect) {
-        query.set("facerect", "1");
-      }
-    }
-
-    // Tags
-    if (this.$route.name === "tags" && this.$route.params.name) {
-      query.set("tag", this.$route.params.name);
-    }
-
-    // Albums
-    if (this.$route.name === "albums" && this.$route.params.name) {
-      query.set(
-        "album",
-        `${this.$route.params.user}/${this.$route.params.name}`
-      );
-    }
-
-    // Month view
-    if (this.isMonthView) {
-      query.set("monthView", "1");
-      query.set("reverse", "1");
-    }
-
-    return query;
-  }
-
-  /** Get view name for dynamic top matter */
-  get viewName() {
-    switch (this.$route.name) {
-      case "timeline":
-        return this.t("memories", "Your Timeline");
-      case "favorites":
-        return this.t("memories", "Favorites");
-      case "recognize":
-      case "facerecognition":
-        return this.t("memories", "People");
-      case "videos":
-        return this.t("memories", "Videos");
-      case "albums":
-        return this.t("memories", "Albums");
-      case "archive":
-        return this.t("memories", "Archive");
-      case "thisday":
-        return this.t("memories", "On this day");
-      case "tags":
-        return this.t("memories", "Tags");
-      default:
-        return "";
-    }
-  }
-
-  /** Get name of header */
-  getHeadName(head: IHeadRow) {
-    // Check cache
-    if (head.name) {
-      return head.name;
-    }
-
-    // Special headers
-    if (this.TagDayIDValueSet.has(head.dayId)) {
-      return (head.name = "");
-    }
-
-    // Make date string
-    // The reason this function is separate from processDays is
-    // because this call is terribly slow even on desktop
-    const dateTaken = utils.dayIdToDate(head.dayId);
-    let name: string;
-    if (this.isMonthView) {
-      name = utils.getMonthDateStr(dateTaken);
-    } else {
-      name = utils.getLongDateStr(dateTaken, true);
-    }
-
-    // Cache and return
-    head.name = name;
-    return head.name;
-  }
-
-  /* Get a friendly description of empty view */
-  get emptyViewDescription() {
-    switch (this.$route.name) {
-      case "facerecognition":
-        if (this.config_facerecognitionEnabled)
-          return this.t(
-            "memories",
-            "You will find your friends soon. Please, be patient."
+        // Desktop
+        if (this.config_squareThumbs) {
+          this.numCols = Math.max(
+            3,
+            Math.floor(this.rowWidth / DESKTOP_ROW_HEIGHT)
           );
-        else
-          return this.t(
-            "memories",
-            "Face Recognition is disabled. Enable in settings to find your friends."
-          );
-      case "timeline":
-      case "favorites":
-      case "recognize":
-      case "videos":
-      case "albums":
-      case "archive":
-      case "thisday":
-      case "tags":
-      default:
-        return "";
-    }
-  }
+          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.ceil(this.rowWidth / ((this.rowHeight * 4) / 3));
+        }
+      }
 
-  /** Fetch timeline main call */
-  async fetchDays(noCache = false) {
-    const url = API.Q(API.DAYS(), this.getQuery());
-    const cacheUrl = this.$route.name + url;
+      // Reflow if there are elements (this isn't an init call)
+      // An init call reaches here when the top matter size changes
+      if (this.list.length > 0) {
+        // At this point we're sure the size has changed, so we need
+        // to invalidate everything related to sizes
+        this.sizedDays.clear();
+        this.scrollerManager.adjust();
 
-    // Try cache first
-    let cache: IDay[];
+        // Explicitly request a scroll event
+        this.loadScrollChanges(this.currentStart, this.currentEnd);
+      }
+    },
 
-    // Make sure to refresh scroll later
-    this.currentEnd = -1;
+    /**
+     * Triggered when position of scroll change.
+     * This does NOT indicate the items have changed, only that
+     * the pixel position of the recycler has changed.
+     */
+    scrollPositionChange(event?: any) {
+      this.scrollerManager.recyclerScrolled(event);
+    },
 
-    try {
-      this.loading++;
-      const startState = this.state;
+    /** Trigger when recycler view changes */
+    scrollChange(startIndex: number, endIndex: number) {
+      if (startIndex === this.currentStart && endIndex === this.currentEnd) {
+        return;
+      }
 
-      let data: IDay[] = [];
-      if (this.$route.name === "thisday") {
-        data = await dav.getOnThisDayData();
-      } else if (this.$route.name === "tags" && !this.$route.params.name) {
-        data = await dav.getTagsData();
-      } else if (this.routeIsPeople && !this.$route.params.name) {
-        data = await dav.getPeopleData(this.$route.name as any);
-      } else if (this.$route.name === "albums" && !this.$route.params.name) {
-        data = await dav.getAlbumsData("3");
-      } else {
-        // Try the cache
-        try {
-          cache = noCache ? null : await utils.getCachedData(cacheUrl);
-          if (cache) {
-            await this.processDays(cache);
-            this.loading--;
+      // Reset image state
+      for (let i = startIndex; i < endIndex; i++) {
+        const row = this.list[i];
+        if (!row) {
+          continue;
+        }
+
+        // Initialize photos and add placeholders
+        if (row.pct && !row.photos.length) {
+          row.photos = new Array(row.pct);
+          for (let j = 0; j < row.pct; j++) {
+            // Any row that has placeholders has ONLY placeholders
+            // so we can calculate the display width
+            row.photos[j] = {
+              flag: this.c.FLAG_PLACEHOLDER,
+              fileid: Math.random(),
+              dispW: utils.roundHalf(this.rowWidth / this.numCols),
+              dispX: utils.roundHalf((j * this.rowWidth) / this.numCols),
+              dispH: this.rowHeight,
+              dispY: 0,
+            };
           }
-        } catch {
-          console.warn(`Failed to process days cache: ${cacheUrl}`);
-          cache = null;
+          delete row.pct;
+        }
+      }
+
+      // Check if this was requested by a refresh
+      const force = this.currentEnd === -1;
+
+      // Make sure we don't do this too often
+      this.currentStart = startIndex;
+      this.currentEnd = endIndex;
+
+      // Check if this was requested specifically
+      if (force) {
+        this.loadScrollChanges(startIndex, endIndex);
+        return;
+      }
+
+      setTimeout(() => {
+        // Get the overlapping range between startIndex and
+        // currentStart and endIndex and currentEnd.
+        // This is the range of rows that we need to update.
+        const start = Math.max(startIndex, this.currentStart);
+        const end = Math.min(endIndex, this.currentEnd);
+
+        if (end - start > 0) {
+          this.loadScrollChanges(start, end);
+        }
+      }, SCROLL_LOAD_DELAY);
+    },
+
+    /** Load image data for given view */
+    loadScrollChanges(startIndex: number, endIndex: number) {
+      // Make sure start and end valid
+      startIndex = Math.max(0, startIndex);
+      endIndex = Math.min(this.list.length - 1, endIndex);
+
+      // Fetch all visible days
+      for (let i = startIndex; i <= endIndex; i++) {
+        let item = this.list[i];
+        if (!item) continue;
+        if (this.loadedDays.has(item.dayId)) {
+          if (!this.sizedDays.has(item.dayId)) {
+            // Just quietly reflow without refetching
+            this.processDay(item.dayId, item.day.detail);
+          }
+          continue;
         }
 
-        // Get from network
-        const res = await axios.get<IDay[]>(url);
-        if (res.status !== 200) throw res; // don't cache this
-        data = res.data;
+        this.fetchDay(item.dayId);
+      }
+    },
+
+    /** Get query string for API calls */
+    getQuery() {
+      const query = new URLSearchParams();
+
+      // Favorites
+      if (this.$route.name === "favorites") {
+        query.set("fav", "1");
       }
 
-      // Put back into cache
-      utils.cacheData(cacheUrl, data);
-
-      // Make sure we're still on the same page
-      if (this.state !== startState) return;
-      await this.processDays(data);
-    } catch (err) {
-      console.error(err);
-      showError(err?.response?.data?.message || err.message);
-    } finally {
-      if (!cache) this.loading--;
-    }
-  }
-
-  /** Process the data for days call including folders */
-  async processDays(data: IDay[]) {
-    const list: typeof this.list = [];
-    const heads: typeof this.heads = {};
-
-    // Store the preloads in a separate map.
-    // This is required since otherwise the inner detail objects
-    // do not become reactive (which happens only after assignment).
-    const preloads: {
-      [dayId: number]: {
-        day: IDay;
-        detail: IPhoto[];
-      };
-    } = {};
-
-    let prevDay: IDay | null = null;
-    for (const day of data) {
-      // Initialization
-      day.rows = [];
-
-      // Nothing here
-      if (day.count === 0) {
-        continue;
+      // Videos
+      if (this.$route.name === "videos") {
+        query.set("vid", "1");
       }
 
-      // Store the preloads
-      if (day.detail) {
-        preloads[day.dayid] = {
-          day: day,
-          detail: day.detail,
+      // Folder
+      if (this.$route.name === "folders") {
+        query.set("folder", utils.getFolderRoutePath(this.config_foldersPath));
+      }
+
+      // Archive
+      if (this.$route.name === "archive") {
+        query.set("archive", "1");
+      }
+
+      // People
+      if (
+        this.routeIsPeople &&
+        this.$route.params.user &&
+        this.$route.params.name
+      ) {
+        query.set(
+          this.$route.name, // "recognize" or "facerecognition"
+          `${this.$route.params.user}/${this.$route.params.name}`
+        );
+
+        // Face rect
+        if (this.config_showFaceRect) {
+          query.set("facerect", "1");
+        }
+      }
+
+      // Tags
+      if (this.$route.name === "tags" && this.$route.params.name) {
+        query.set("tag", this.$route.params.name);
+      }
+
+      // Albums
+      if (this.$route.name === "albums" && this.$route.params.name) {
+        query.set(
+          "album",
+          `${this.$route.params.user}/${this.$route.params.name}`
+        );
+      }
+
+      // Month view
+      if (this.isMonthView) {
+        query.set("monthView", "1");
+        query.set("reverse", "1");
+      }
+
+      return query;
+    },
+
+    /** Get name of header */
+    getHeadName(head: IHeadRow) {
+      // Check cache
+      if (head.name) {
+        return head.name;
+      }
+
+      // Special headers
+      if (this.TagDayIDValueSet.has(head.dayId)) {
+        return (head.name = "");
+      }
+
+      // Make date string
+      // The reason this function is separate from processDays is
+      // because this call is terribly slow even on desktop
+      const dateTaken = utils.dayIdToDate(head.dayId);
+      let name: string;
+      if (this.isMonthView) {
+        name = utils.getMonthDateStr(dateTaken);
+      } else {
+        name = utils.getLongDateStr(dateTaken, true);
+      }
+
+      // Cache and return
+      head.name = name;
+      return head.name;
+    },
+
+    /** Fetch timeline main call */
+    async fetchDays(noCache = false) {
+      const url = API.Q(API.DAYS(), this.getQuery());
+      const cacheUrl = this.$route.name + url;
+
+      // Try cache first
+      let cache: IDay[];
+
+      // Make sure to refresh scroll later
+      this.currentEnd = -1;
+
+      try {
+        this.loading++;
+        const startState = this.state;
+
+        let data: IDay[] = [];
+        if (this.$route.name === "thisday") {
+          data = await dav.getOnThisDayData();
+        } else if (this.$route.name === "tags" && !this.$route.params.name) {
+          data = await dav.getTagsData();
+        } else if (this.routeIsPeople && !this.$route.params.name) {
+          data = await dav.getPeopleData(this.$route.name as any);
+        } else if (this.$route.name === "albums" && !this.$route.params.name) {
+          data = await dav.getAlbumsData("3");
+        } else {
+          // Try the cache
+          try {
+            cache = noCache ? null : await utils.getCachedData(cacheUrl);
+            if (cache) {
+              await this.processDays(cache);
+              this.loading--;
+            }
+          } catch {
+            console.warn(`Failed to process days cache: ${cacheUrl}`);
+            cache = null;
+          }
+
+          // Get from network
+          const res = await axios.get<IDay[]>(url);
+          if (res.status !== 200) throw res; // don't cache this
+          data = res.data;
+        }
+
+        // Put back into cache
+        utils.cacheData(cacheUrl, data);
+
+        // Make sure we're still on the same page
+        if (this.state !== startState) return;
+        await this.processDays(data);
+      } catch (err) {
+        console.error(err);
+        showError(err?.response?.data?.message || err.message);
+      } finally {
+        if (!cache) this.loading--;
+      }
+    },
+
+    /** Process the data for days call including folders */
+    async processDays(data: IDay[]) {
+      const list: typeof this.list = [];
+      const heads: typeof this.heads = {};
+
+      // Store the preloads in a separate map.
+      // This is required since otherwise the inner detail objects
+      // do not become reactive (which happens only after assignment).
+      const preloads: {
+        [dayId: number]: {
+          day: IDay;
+          detail: IPhoto[];
         };
-        delete day.detail;
+      } = {};
+
+      let prevDay: IDay | null = null;
+      for (const day of data) {
+        // Initialization
+        day.rows = [];
+
+        // Nothing here
+        if (day.count === 0) {
+          continue;
+        }
+
+        // Store the preloads
+        if (day.detail) {
+          preloads[day.dayid] = {
+            day: day,
+            detail: day.detail,
+          };
+          delete day.detail;
+        }
+
+        // Create header for this day
+        const head: IHeadRow = {
+          id: `${day.dayid}-head`,
+          num: -1,
+          size: 40,
+          type: IRowType.HEAD,
+          selected: false,
+          dayId: day.dayid,
+          day: day,
+        };
+
+        // Special headers
+        if (this.TagDayIDValueSet.has(day.dayid)) {
+          head.size = 10;
+        } else if (
+          this.$route.name === "thisday" &&
+          (!prevDay || Math.abs(prevDay.dayid - day.dayid) > 30)
+        ) {
+          // thisday view with new year title
+          head.size = 67;
+          head.super = utils.getFromNowStr(utils.dayIdToDate(day.dayid));
+        }
+
+        // Add header to list
+        heads[day.dayid] = head;
+        list.push(head);
+
+        // Dummy rows for placeholders
+        let nrows = Math.ceil(day.count / this.numCols);
+
+        // Check if already loaded - we can learn
+        let prevRows: IRow[] | null = null;
+        if (this.loadedDays.has(day.dayid)) {
+          prevRows = this.heads[day.dayid]?.day.rows;
+          nrows = prevRows?.length || nrows;
+        }
+
+        // Add rows
+        for (let i = 0; i < nrows; i++) {
+          const row = this.addRow(day);
+          list.push(row);
+
+          // Add placeholder count
+          const leftNum = day.count - i * this.numCols;
+          row.pct = leftNum > this.numCols ? this.numCols : leftNum;
+          row.photos = [];
+
+          // Learn from existing row
+          if (prevRows && i < prevRows.length) {
+            row.size = prevRows[i].size;
+            row.photos = prevRows[i].photos;
+          }
+        }
+
+        // Continue processing
+        prevDay = day;
       }
 
-      // Create header for this day
-      const head: IHeadRow = {
-        id: `${day.dayid}-head`,
-        num: -1,
-        size: 40,
-        type: IRowType.HEAD,
-        selected: false,
+      // Store globally
+      this.list = list;
+      this.heads = heads;
+      this.loadedDays.clear();
+      this.sizedDays.clear();
+
+      // Iterate the preload map
+      // Now the inner detail objects are reactive
+      for (const dayId in preloads) {
+        this.processDay(Number(dayId), preloads[dayId].detail);
+      }
+
+      // Fix view height variable
+      await this.scrollerManager.reflow();
+      this.scrollPositionChange();
+    },
+
+    /** API url for Day call */
+    getDayUrl(dayId: number | string) {
+      return API.Q(API.DAY(dayId), this.getQuery());
+    },
+
+    /** Fetch image data for one dayId */
+    async fetchDay(dayId: number, now = false) {
+      const head = this.heads[dayId];
+      if (!head) return;
+
+      // Do this in advance to prevent duplicate requests
+      this.loadedDays.add(dayId);
+      this.sizedDays.add(dayId);
+
+      // Look for cache
+      const cacheUrl = this.getDayUrl(dayId);
+      try {
+        this.processDay(dayId, await utils.getCachedData(cacheUrl));
+      } catch {
+        console.warn(`Failed to process day cache: ${cacheUrl}`);
+      }
+
+      // Aggregate fetch requests
+      this.fetchDayQueue.push(dayId);
+
+      // Only single queries allowed for month vie
+      if (now || this.isMonthView) {
+        return this.fetchDayExpire();
+      }
+
+      // Defer for aggregation
+      if (!this.fetchDayTimer) {
+        this.fetchDayTimer = window.setTimeout(() => {
+          this.fetchDayTimer = null;
+          this.fetchDayExpire();
+        }, 150);
+      }
+    },
+
+    async fetchDayExpire() {
+      if (this.fetchDayQueue.length === 0) return;
+
+      // Construct URL
+      const url = this.getDayUrl(this.fetchDayQueue.join(","));
+      this.fetchDayQueue = [];
+
+      try {
+        const startState = this.state;
+        const res = await axios.get<IPhoto[]>(url);
+        if (res.status !== 200) throw res;
+        const data = res.data;
+        if (this.state !== startState) return;
+
+        // Bin the data into separate days
+        // It is already sorted in dayid DESC
+        const dayMap = new Map<number, IPhoto[]>();
+        for (const photo of data) {
+          if (!dayMap.get(photo.dayid)) dayMap.set(photo.dayid, []);
+          dayMap.get(photo.dayid).push(photo);
+        }
+
+        // Store cache asynchronously
+        // Do this regardless of whether the state has
+        // changed since the data is already fetched
+        //
+        // These loops cannot be combined because processDay
+        // creates circular references which cannot be stringified
+        for (const [dayId, photos] of dayMap) {
+          utils.cacheData(this.getDayUrl(dayId), photos);
+        }
+
+        // Process each day as needed
+        for (const [dayId, photos] of dayMap) {
+          // Check if the response has any delta
+          const head = this.heads[dayId];
+          if (head.day.detail?.length) {
+            if (
+              head.day.detail.length === photos.length &&
+              head.day.detail.every(
+                (p, i) =>
+                  p.fileid === photos[i].fileid &&
+                  p.etag === photos[i].etag &&
+                  p.filename === photos[i].filename
+              )
+            ) {
+              continue;
+            }
+          }
+
+          // Pass ahead
+          this.processDay(dayId, photos);
+        }
+      } catch (e) {
+        showError(this.t("memories", "Failed to load some photos"));
+        console.error(e);
+      }
+    },
+
+    /**
+     * Process items from day response.
+     *
+     * @param dayId id of day
+     * @param data photos
+     */
+    processDay(dayId: number, data: IPhoto[]) {
+      if (!data) return;
+
+      const head = this.heads[dayId];
+      const day = head.day;
+      this.loadedDays.add(dayId);
+      this.sizedDays.add(dayId);
+
+      // Convert server flags to bitflags
+      data.forEach(utils.convertFlags);
+
+      // Filter out items we don't want to show at all
+      if (!this.config_showHidden && dayId === this.TagDayID.FOLDERS) {
+        // Hidden folders and folders without previews
+        data = data.filter(
+          (p) =>
+            !(
+              p.flag & this.c.FLAG_IS_FOLDER &&
+              ((<IFolder>p).name.startsWith(".") ||
+                !(<IFolder>p).previews.length)
+            )
+        );
+      }
+
+      // Set and make reactive
+      day.count = data.length;
+      day.detail = data;
+
+      // Reset rows including placeholders
+      for (const row of head.day.rows || []) {
+        row.photos = [];
+      }
+
+      // Force all to square
+      const squareMode = this.isMobileLayout() || this.config_squareThumbs;
+
+      // Create justified layout with correct params
+      const justify = getLayout(
+        day.detail.map((p) => {
+          return {
+            width: p.w || this.rowHeight,
+            height: p.h || this.rowHeight,
+            forceSquare: Boolean(
+              (p.flag & this.c.FLAG_IS_FOLDER) | (p.flag & this.c.FLAG_IS_TAG)
+            ),
+          };
+        }),
+        {
+          rowWidth: this.rowWidth,
+          rowHeight: this.rowHeight,
+          squareMode: squareMode,
+          numCols: this.numCols,
+          allowBreakout: this.allowBreakout(),
+          seed: dayId,
+        }
+      );
+
+      // Check if some rows were added
+      let addedRows: IRow[] = [];
+
+      // Recycler scroll top
+      let scrollTop = (<any>this.$refs.recycler).$el.scrollTop;
+      let needAdjust = false;
+
+      // Get index and Y position of header in O(n)
+      let headIdx = 0;
+      let headY = 0;
+      for (const row of this.list) {
+        if (row === head) break;
+        headIdx++;
+        headY += row.size;
+      }
+      let rowIdx = headIdx + 1;
+      let rowY = headY + head.size;
+
+      // Duplicate detection, e.g. for face rects
+      const seen = new Map<number, number>();
+
+      // Previous justified row
+      let prevJustifyTop = justify[0]?.top || 0;
+
+      // Add all rows
+      let dataIdx = 0;
+      while (dataIdx < data.length) {
+        // Check if we ran out of rows
+        if (
+          rowIdx >= this.list.length ||
+          this.list[rowIdx].type === IRowType.HEAD
+        ) {
+          const newRow = this.addRow(day);
+          addedRows.push(newRow);
+          this.list.splice(rowIdx, 0, newRow);
+
+          // Scroll down if new row is above the current visible position
+          if (rowY < scrollTop) {
+            scrollTop += newRow.size;
+          }
+          needAdjust = true;
+        }
+
+        // Get row
+        const row = this.list[rowIdx];
+
+        // Go to the next row
+        const jbox = justify[dataIdx];
+        if (jbox.top !== prevJustifyTop) {
+          prevJustifyTop = jbox.top;
+          rowIdx++;
+          rowY += row.size;
+          continue;
+        }
+
+        // Set row height
+        const jH = utils.roundHalf(jbox.rowHeight || jbox.height);
+        const delta = jH - row.size;
+        // If the difference is too small, it's not worth risking an adjustment
+        // especially on square layouts on mobile. Also don't do this if animating.
+        if (Math.abs(delta) > 0) {
+          if (rowY < scrollTop) {
+            scrollTop += delta;
+          }
+          needAdjust = true;
+          row.size = jH;
+        }
+
+        // Add the photo to the row
+        const photo = data[dataIdx];
+        photo.d = day; // backref to day
+
+        // Get aspect ratio
+        const setPos = () => {
+          photo.dispW = utils.roundHalf(jbox.width);
+          photo.dispX = utils.roundHalf(jbox.left);
+          photo.dispH = utils.roundHalf(jbox.height);
+          photo.dispY = 0;
+          photo.dispRowNum = row.num;
+        };
+        if (photo.dispW !== undefined) {
+          // photo already displayed: animate
+          window.setTimeout(setPos, 50);
+
+          if (
+            photo.dispRowNum !== undefined &&
+            photo.dispRowNum !== row.num &&
+            photo.dispRowNum >= 0 &&
+            photo.dispRowNum < day.rows.length
+          ) {
+            // Row change animation
+            const start = Math.min(photo.dispRowNum, row.num);
+            const end = Math.max(photo.dispRowNum, row.num);
+            const sizeDelta = day.rows.slice(start, end).reduce((acc, r) => {
+              acc += r.size;
+              return acc;
+            }, 0);
+            photo.dispY = sizeDelta * (photo.dispRowNum < row.num ? -1 : 1);
+            photo.dispH = day.rows[photo.dispRowNum].size;
+          }
+        } else {
+          setPos();
+        }
+
+        // Move to next index of photo
+        dataIdx++;
+
+        // Duplicate detection.
+        // These may be valid, e.g. in face rects. All we need to have
+        // is a unique Vue key for the v-for loop.
+        if (seen.has(photo.fileid)) {
+          const val = seen.get(photo.fileid);
+          photo.key = `${photo.fileid}-${val}`;
+          seen.set(photo.fileid, val + 1);
+        } else {
+          photo.key = `${photo.fileid}`;
+          seen.set(photo.fileid, 1);
+        }
+
+        // Add photo to row
+        row.photos.push(photo);
+      }
+
+      // Restore selection day
+      this.selectionManager.restoreDay(day);
+
+      // Rows that were removed
+      const removedRows: IRow[] = [];
+      let headRemoved = false;
+
+      // No rows, splice everything including the header
+      if (data.length === 0) {
+        removedRows.push(...this.list.splice(headIdx, 1));
+        rowIdx = headIdx - 1;
+        headRemoved = true;
+        delete this.heads[dayId];
+      }
+
+      // Get rid of any extra rows
+      let spliceCount = 0;
+      for (
+        let i = rowIdx + 1;
+        i < this.list.length && this.list[i].type !== IRowType.HEAD;
+        i++
+      ) {
+        spliceCount++;
+      }
+      if (spliceCount > 0) {
+        removedRows.push(...this.list.splice(rowIdx + 1, spliceCount));
+      }
+
+      // Update size delta for removed rows and remove from day
+      for (const row of removedRows) {
+        // Scroll up if if above visible range
+        if (rowY < scrollTop) {
+          scrollTop -= row.size;
+        }
+        needAdjust = true;
+
+        // Remove from day
+        const idx = head.day.rows.indexOf(row);
+        if (idx >= 0) head.day.rows.splice(idx, 1);
+      }
+
+      // This will be true even if the head is being spliced
+      // because one row is always removed in that case
+      if (needAdjust) {
+        if (headRemoved) {
+          // If the head was removed, we need a reflow,
+          // or adjust isn't going to work right
+          this.scrollerManager.reflow();
+        } else {
+          // Otherwise just adjust the ticks
+          this.scrollerManager.adjust();
+        }
+
+        // Scroll to new position
+        (<any>this.$refs.recycler).$el.scrollTop = scrollTop;
+      }
+    },
+
+    /** Add and get a new blank photos row */
+    addRow(day: IDay): IRow {
+      let rowType = IRowType.PHOTOS;
+      if (day.dayid === this.TagDayID.FOLDERS) {
+        rowType = IRowType.FOLDERS;
+      }
+
+      // Create new row
+      const row = {
+        id: `${day.dayid}-${day.rows.length}`,
+        num: day.rows.length,
+        photos: [],
+        type: rowType,
+        size: this.rowHeight,
         dayId: day.dayid,
         day: day,
       };
 
-      // Special headers
-      if (this.TagDayIDValueSet.has(day.dayid)) {
-        head.size = 10;
-      } else if (
-        this.$route.name === "thisday" &&
-        (!prevDay || Math.abs(prevDay.dayid - day.dayid) > 30)
-      ) {
-        // thisday view with new year title
-        head.size = 67;
-        head.super = utils.getFromNowStr(utils.dayIdToDate(day.dayid));
+      // Add to day
+      day.rows.push(row);
+
+      return row;
+    },
+
+    /**
+     * Delete elements from main view with some animation
+     *
+     * This is also going to update day.detail for you and make
+     * a call to processDay so just pass it the list of ids to
+     * delete and the days that were updated.
+     *
+     * @param delPhotos photos to delete
+     */
+    async deleteFromViewWithAnimation(delPhotos: IPhoto[]) {
+      // Only keep photos with day
+      delPhotos = delPhotos.filter((p) => p?.d);
+      if (delPhotos.length === 0) return;
+
+      // Get all days that need to be updatd
+      const updatedDays = new Set<IDay>(delPhotos.map((p) => p.d));
+      const delPhotosSet = new Set(delPhotos);
+
+      // Animate the deletion
+      for (const photo of delPhotos) {
+        photo.flag |= this.c.FLAG_LEAVING;
       }
 
-      // Add header to list
-      heads[day.dayid] = head;
-      list.push(head);
+      // wait for 200ms
+      await new Promise((resolve) => setTimeout(resolve, 200));
 
-      // Dummy rows for placeholders
-      let nrows = Math.ceil(day.count / this.numCols);
+      // clear selection at this point
+      this.selectionManager.clearSelection(delPhotos);
 
-      // Check if already loaded - we can learn
-      let prevRows: IRow[] | null = null;
-      if (this.loadedDays.has(day.dayid)) {
-        prevRows = this.heads[day.dayid]?.day.rows;
-        nrows = prevRows?.length || nrows;
+      // Reflow all touched days
+      for (const day of updatedDays) {
+        const newDetail = day.detail.filter((p) => !delPhotosSet.has(p));
+        this.processDay(day.dayid, newDetail);
       }
-
-      // Add rows
-      for (let i = 0; i < nrows; i++) {
-        const row = this.addRow(day);
-        list.push(row);
-
-        // Add placeholder count
-        const leftNum = day.count - i * this.numCols;
-        row.pct = leftNum > this.numCols ? this.numCols : leftNum;
-        row.photos = [];
-
-        // Learn from existing row
-        if (prevRows && i < prevRows.length) {
-          row.size = prevRows[i].size;
-          row.photos = prevRows[i].photos;
-        }
-      }
-
-      // Continue processing
-      prevDay = day;
-    }
-
-    // Store globally
-    this.list = list;
-    this.heads = heads;
-    this.loadedDays.clear();
-    this.sizedDays.clear();
-
-    // Iterate the preload map
-    // Now the inner detail objects are reactive
-    for (const dayId in preloads) {
-      this.processDay(Number(dayId), preloads[dayId].detail);
-    }
-
-    // Fix view height variable
-    await this.scrollerManager.reflow();
-    this.scrollPositionChange();
-  }
-
-  /** API url for Day call */
-  private getDayUrl(dayId: number | string) {
-    return API.Q(API.DAY(dayId), this.getQuery());
-  }
-
-  /** Fetch image data for one dayId */
-  async fetchDay(dayId: number, now = false) {
-    const head = this.heads[dayId];
-    if (!head) return;
-
-    // Do this in advance to prevent duplicate requests
-    this.loadedDays.add(dayId);
-    this.sizedDays.add(dayId);
-
-    // Look for cache
-    const cacheUrl = this.getDayUrl(dayId);
-    try {
-      this.processDay(dayId, await utils.getCachedData(cacheUrl));
-    } catch {
-      console.warn(`Failed to process day cache: ${cacheUrl}`);
-    }
-
-    // Aggregate fetch requests
-    this.fetchDayQueue.push(dayId);
-
-    // Only single queries allowed for month vie
-    if (now || this.isMonthView) {
-      return this.fetchDayExpire();
-    }
-
-    // Defer for aggregation
-    if (!this.fetchDayTimer) {
-      this.fetchDayTimer = window.setTimeout(() => {
-        this.fetchDayTimer = null;
-        this.fetchDayExpire();
-      }, 150);
-    }
-  }
-
-  async fetchDayExpire() {
-    if (this.fetchDayQueue.length === 0) return;
-
-    // Construct URL
-    const url = this.getDayUrl(this.fetchDayQueue.join(","));
-    this.fetchDayQueue = [];
-
-    try {
-      const startState = this.state;
-      const res = await axios.get<IPhoto[]>(url);
-      if (res.status !== 200) throw res;
-      const data = res.data;
-      if (this.state !== startState) return;
-
-      // Bin the data into separate days
-      // It is already sorted in dayid DESC
-      const dayMap = new Map<number, IPhoto[]>();
-      for (const photo of data) {
-        if (!dayMap.get(photo.dayid)) dayMap.set(photo.dayid, []);
-        dayMap.get(photo.dayid).push(photo);
-      }
-
-      // Store cache asynchronously
-      // Do this regardless of whether the state has
-      // changed since the data is already fetched
-      //
-      // These loops cannot be combined because processDay
-      // creates circular references which cannot be stringified
-      for (const [dayId, photos] of dayMap) {
-        utils.cacheData(this.getDayUrl(dayId), photos);
-      }
-
-      // Process each day as needed
-      for (const [dayId, photos] of dayMap) {
-        // Check if the response has any delta
-        const head = this.heads[dayId];
-        if (head.day.detail?.length) {
-          if (
-            head.day.detail.length === photos.length &&
-            head.day.detail.every(
-              (p, i) =>
-                p.fileid === photos[i].fileid &&
-                p.etag === photos[i].etag &&
-                p.filename === photos[i].filename
-            )
-          ) {
-            continue;
-          }
-        }
-
-        // Pass ahead
-        this.processDay(dayId, photos);
-      }
-    } catch (e) {
-      showError(this.t("memories", "Failed to load some photos"));
-      console.error(e);
-    }
-  }
-
-  /**
-   * Process items from day response.
-   *
-   * @param dayId id of day
-   * @param data photos
-   */
-  processDay(dayId: number, data: IPhoto[]) {
-    if (!data) return;
-
-    const head = this.heads[dayId];
-    const day = head.day;
-    this.loadedDays.add(dayId);
-    this.sizedDays.add(dayId);
-
-    // Convert server flags to bitflags
-    data.forEach(utils.convertFlags);
-
-    // Filter out items we don't want to show at all
-    if (!this.config_showHidden && dayId === this.TagDayID.FOLDERS) {
-      // Hidden folders and folders without previews
-      data = data.filter(
-        (p) =>
-          !(
-            p.flag & this.c.FLAG_IS_FOLDER &&
-            ((<IFolder>p).name.startsWith(".") || !(<IFolder>p).previews.length)
-          )
-      );
-    }
-
-    // Set and make reactive
-    day.count = data.length;
-    day.detail = data;
-
-    // Reset rows including placeholders
-    for (const row of head.day.rows || []) {
-      row.photos = [];
-    }
-
-    // Force all to square
-    const squareMode = this.isMobileLayout() || this.config_squareThumbs;
-
-    // Create justified layout with correct params
-    const justify = getLayout(
-      day.detail.map((p) => {
-        return {
-          width: p.w || this.rowHeight,
-          height: p.h || this.rowHeight,
-          forceSquare: Boolean(
-            (p.flag & this.c.FLAG_IS_FOLDER) | (p.flag & this.c.FLAG_IS_TAG)
-          ),
-        };
-      }),
-      {
-        rowWidth: this.rowWidth,
-        rowHeight: this.rowHeight,
-        squareMode: squareMode,
-        numCols: this.numCols,
-        allowBreakout: this.allowBreakout(),
-        seed: dayId,
-      }
-    );
-
-    // Check if some rows were added
-    let addedRows: IRow[] = [];
-
-    // Recycler scroll top
-    let scrollTop = (<any>this.$refs.recycler).$el.scrollTop;
-    let needAdjust = false;
-
-    // Get index and Y position of header in O(n)
-    let headIdx = 0;
-    let headY = 0;
-    for (const row of this.list) {
-      if (row === head) break;
-      headIdx++;
-      headY += row.size;
-    }
-    let rowIdx = headIdx + 1;
-    let rowY = headY + head.size;
-
-    // Duplicate detection, e.g. for face rects
-    const seen = new Map<number, number>();
-
-    // Previous justified row
-    let prevJustifyTop = justify[0]?.top || 0;
-
-    // Add all rows
-    let dataIdx = 0;
-    while (dataIdx < data.length) {
-      // Check if we ran out of rows
-      if (
-        rowIdx >= this.list.length ||
-        this.list[rowIdx].type === IRowType.HEAD
-      ) {
-        const newRow = this.addRow(day);
-        addedRows.push(newRow);
-        this.list.splice(rowIdx, 0, newRow);
-
-        // Scroll down if new row is above the current visible position
-        if (rowY < scrollTop) {
-          scrollTop += newRow.size;
-        }
-        needAdjust = true;
-      }
-
-      // Get row
-      const row = this.list[rowIdx];
-
-      // Go to the next row
-      const jbox = justify[dataIdx];
-      if (jbox.top !== prevJustifyTop) {
-        prevJustifyTop = jbox.top;
-        rowIdx++;
-        rowY += row.size;
-        continue;
-      }
-
-      // Set row height
-      const jH = utils.roundHalf(jbox.rowHeight || jbox.height);
-      const delta = jH - row.size;
-      // If the difference is too small, it's not worth risking an adjustment
-      // especially on square layouts on mobile. Also don't do this if animating.
-      if (Math.abs(delta) > 0) {
-        if (rowY < scrollTop) {
-          scrollTop += delta;
-        }
-        needAdjust = true;
-        row.size = jH;
-      }
-
-      // Add the photo to the row
-      const photo = data[dataIdx];
-      photo.d = day; // backref to day
-
-      // Get aspect ratio
-      const setPos = () => {
-        photo.dispW = utils.roundHalf(jbox.width);
-        photo.dispX = utils.roundHalf(jbox.left);
-        photo.dispH = utils.roundHalf(jbox.height);
-        photo.dispY = 0;
-        photo.dispRowNum = row.num;
-      };
-      if (photo.dispW !== undefined) {
-        // photo already displayed: animate
-        window.setTimeout(setPos, 50);
-
-        if (
-          photo.dispRowNum !== undefined &&
-          photo.dispRowNum !== row.num &&
-          photo.dispRowNum >= 0 &&
-          photo.dispRowNum < day.rows.length
-        ) {
-          // Row change animation
-          const start = Math.min(photo.dispRowNum, row.num);
-          const end = Math.max(photo.dispRowNum, row.num);
-          const sizeDelta = day.rows.slice(start, end).reduce((acc, r) => {
-            acc += r.size;
-            return acc;
-          }, 0);
-          photo.dispY = sizeDelta * (photo.dispRowNum < row.num ? -1 : 1);
-          photo.dispH = day.rows[photo.dispRowNum].size;
-        }
-      } else {
-        setPos();
-      }
-
-      // Move to next index of photo
-      dataIdx++;
-
-      // Duplicate detection.
-      // These may be valid, e.g. in face rects. All we need to have
-      // is a unique Vue key for the v-for loop.
-      if (seen.has(photo.fileid)) {
-        const val = seen.get(photo.fileid);
-        photo.key = `${photo.fileid}-${val}`;
-        seen.set(photo.fileid, val + 1);
-      } else {
-        photo.key = `${photo.fileid}`;
-        seen.set(photo.fileid, 1);
-      }
-
-      // Add photo to row
-      row.photos.push(photo);
-    }
-
-    // Restore selection day
-    this.selectionManager.restoreDay(day);
-
-    // Rows that were removed
-    const removedRows: IRow[] = [];
-    let headRemoved = false;
-
-    // No rows, splice everything including the header
-    if (data.length === 0) {
-      removedRows.push(...this.list.splice(headIdx, 1));
-      rowIdx = headIdx - 1;
-      headRemoved = true;
-      delete this.heads[dayId];
-    }
-
-    // Get rid of any extra rows
-    let spliceCount = 0;
-    for (
-      let i = rowIdx + 1;
-      i < this.list.length && this.list[i].type !== IRowType.HEAD;
-      i++
-    ) {
-      spliceCount++;
-    }
-    if (spliceCount > 0) {
-      removedRows.push(...this.list.splice(rowIdx + 1, spliceCount));
-    }
-
-    // Update size delta for removed rows and remove from day
-    for (const row of removedRows) {
-      // Scroll up if if above visible range
-      if (rowY < scrollTop) {
-        scrollTop -= row.size;
-      }
-      needAdjust = true;
-
-      // Remove from day
-      const idx = head.day.rows.indexOf(row);
-      if (idx >= 0) head.day.rows.splice(idx, 1);
-    }
-
-    // This will be true even if the head is being spliced
-    // because one row is always removed in that case
-    if (needAdjust) {
-      if (headRemoved) {
-        // If the head was removed, we need a reflow,
-        // or adjust isn't going to work right
-        this.scrollerManager.reflow();
-      } else {
-        // Otherwise just adjust the ticks
-        this.scrollerManager.adjust();
-      }
-
-      // Scroll to new position
-      (<any>this.$refs.recycler).$el.scrollTop = scrollTop;
-    }
-  }
-
-  /** Add and get a new blank photos row */
-  addRow(day: IDay): IRow {
-    let rowType = IRowType.PHOTOS;
-    if (day.dayid === this.TagDayID.FOLDERS) {
-      rowType = IRowType.FOLDERS;
-    }
-
-    // Create new row
-    const row = {
-      id: `${day.dayid}-${day.rows.length}`,
-      num: day.rows.length,
-      photos: [],
-      type: rowType,
-      size: this.rowHeight,
-      dayId: day.dayid,
-      day: day,
-    };
-
-    // Add to day
-    day.rows.push(row);
-
-    return row;
-  }
-
-  /**
-   * Delete elements from main view with some animation
-   *
-   * This is also going to update day.detail for you and make
-   * a call to processDay so just pass it the list of ids to
-   * delete and the days that were updated.
-   *
-   * @param delPhotos photos to delete
-   */
-  async deleteFromViewWithAnimation(delPhotos: IPhoto[]) {
-    // Only keep photos with day
-    delPhotos = delPhotos.filter((p) => p?.d);
-    if (delPhotos.length === 0) return;
-
-    // Get all days that need to be updatd
-    const updatedDays = new Set<IDay>(delPhotos.map((p) => p.d));
-    const delPhotosSet = new Set(delPhotos);
-
-    // Animate the deletion
-    for (const photo of delPhotos) {
-      photo.flag |= this.c.FLAG_LEAVING;
-    }
-
-    // wait for 200ms
-    await new Promise((resolve) => setTimeout(resolve, 200));
-
-    // clear selection at this point
-    this.selectionManager.clearSelection(delPhotos);
-
-    // Reflow all touched days
-    for (const day of updatedDays) {
-      const newDetail = day.detail.filter((p) => !delPhotosSet.has(p));
-      this.processDay(day.dayid, newDetail);
-    }
-  }
-}
+    },
+  },
+});
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/frame/Folder.vue b/src/components/frame/Folder.vue
index c6e3ab59..29bf7f45 100644
--- a/src/components/frame/Folder.vue
+++ b/src/components/frame/Folder.vue
@@ -29,82 +29,89 @@
 </template>
 
 <script lang="ts">
-import { Component, Prop, Watch, Mixins } from "vue-property-decorator";
+import { defineComponent, PropType } from "vue";
 import { IFolder, IPhoto } from "../../types";
-import GlobalMixin from "../../mixins/GlobalMixin";
-import UserConfig from "../../mixins/UserConfig";
 
 import { getPreviewUrl } from "../../services/FileUtils";
 
 import FolderIcon from "vue-material-design-icons/Folder.vue";
 
-@Component({
+export default defineComponent({
+  name: "Folder",
   components: {
     FolderIcon,
   },
-})
-export default class Folder extends Mixins(GlobalMixin, UserConfig) {
-  @Prop() data: IFolder;
 
-  // Separate property because the one on data isn't reactive
-  private previews: IPhoto[] = [];
+  props: {
+    data: Object as PropType<IFolder>,
+  },
 
-  // Error occured fetching thumbs
-  private error = false;
+  data() {
+    return {
+      // Separate property because the one on data isn't reactive
+      previews: [] as IPhoto[],
+      // Error occured fetching thumbs
+      error: false,
+      // Passthrough
+      getPreviewUrl,
+    };
+  },
 
-  /** Passthrough */
-  private getPreviewUrl = getPreviewUrl;
+  computed: {
+    /** Open folder */
+    target() {
+      const path = this.data.path
+        .split("/")
+        .filter((x) => x)
+        .slice(2) as string[];
+
+      // Remove base path if present
+      const basePath = this.config_foldersPath.split("/").filter((x) => x);
+      if (
+        path.length >= basePath.length &&
+        path.slice(0, basePath.length).every((x, i) => x === basePath[i])
+      ) {
+        path.splice(0, basePath.length);
+      }
+
+      return { name: "folders", params: { path: path as any } };
+    },
+  },
 
   mounted() {
     this.refreshPreviews();
-  }
+  },
 
-  @Watch("data")
-  dataChanged() {
-    this.refreshPreviews();
-  }
+  watch: {
+    data() {
+      this.refreshPreviews();
+    },
+  },
 
-  /** Refresh previews */
-  refreshPreviews() {
-    // Reset state
-    this.error = false;
+  methods: {
+    /** Refresh previews */
+    refreshPreviews() {
+      // Reset state
+      this.error = false;
 
-    // Check if valid path present
-    if (!this.data.path) {
-      this.error = true;
-      return;
-    }
-
-    // Get preview infos
-    const previews = this.data.previews;
-    if (previews) {
-      if (previews.length > 0 && previews.length < 4) {
-        this.previews = [previews[0]];
-      } else {
-        this.previews = previews.slice(0, 4);
+      // Check if valid path present
+      if (!this.data.path) {
+        this.error = true;
+        return;
       }
-    }
-  }
 
-  /** Open folder */
-  get target() {
-    const path = this.data.path
-      .split("/")
-      .filter((x) => x)
-      .slice(2) as string[];
-
-    // Remove base path if present
-    const basePath = this.config_foldersPath.split("/").filter((x) => x);
-    if (
-      path.length >= basePath.length &&
-      path.slice(0, basePath.length).every((x, i) => x === basePath[i])
-    ) {
-      path.splice(0, basePath.length);
-    }
-
-    return { name: "folders", params: { path: path as any } };
-  }
-}
+      // Get preview infos
+      const previews = this.data.previews;
+      if (previews) {
+        if (previews.length > 0 && previews.length < 4) {
+          this.previews = [previews[0]];
+        } else {
+          this.previews = previews.slice(0, 4);
+        }
+      }
+    },
+  },
+});
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/main.ts b/src/main.ts
index fc1c85b3..110ac257 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -4,6 +4,8 @@ import "reflect-metadata";
 import Vue from "vue";
 import VueVirtualScroller from "vue-virtual-scroller";
 import "vue-virtual-scroller/dist/vue-virtual-scroller.css";
+import GlobalMixin from "./mixins/GlobalMixin";
+import UserConfig from "./mixins/UserConfig";
 
 import App from "./App.vue";
 import router from "./router";
@@ -64,6 +66,8 @@ if (!globalThis.videoClientIdPersistent) {
   );
 }
 
+Vue.mixin(GlobalMixin);
+Vue.mixin(UserConfig);
 Vue.use(VueVirtualScroller);
 
 // https://github.com/nextcloud/photos/blob/156f280c0476c483cb9ce81769ccb0c1c6500a4e/src/main.js