Fixes memory issues

static/public/js/filters.js

@@ -59,7 +59,7 @@ window.FilterManager = (() => {
         }
 
         match(mediaItem) {
-            const dateTime = mediaItem.date.getTime();
+            const dateTime = mediaItem.getDateTs();
             if (dateTime < this.#minDate || dateTime > this.#maxDate)
                 return false;
             for (let i in this.#filters) {

static/public/js/indexedCache.js

@@ -43,7 +43,7 @@
 
         #reduceMedia(media) {
             let mediaRawData = {
-                date: media.date.getTime(),
+                date: media.getDateTs(),
                 md5sum: media.md5sum,
                 fixedSum: media.fixedSum,
                 path: media.path,

static/public/js/medias.js

@@ -1,7 +1,21 @@
 
 class Media {
+    #date = 0;
+    md5sum = "";
+    fixedSum = "";
+    path = "";
+    fileName = "";
+    meta = {};
+    fixedTags = [];
+    version = 0;
+    tags = [];
+    writeAccess = false;
+    thumbnail = "";
+    original = "";
+    ui = null;
+
     constructor(data) {
-        this.date = new Date(data.date);
+        this.#date = data.date;
         this.md5sum = data.md5sum;
         this.fixedSum = data.fixedSum;
         this.path = data.path;
@@ -28,6 +42,14 @@ class Media {
         }
     }
 
+    getDateTs() {
+        return this.#date;
+    }
+
+    getDate() {
+        return new Date(this.#date);
+    }
+
     resize(maxWidth, maxHeight) {
         let ratio = Math.min(1, Math.max(
             maxWidth / (this.meta?.width?.value || maxWidth),
@@ -131,7 +153,7 @@ class MediaStorage extends EventTarget
         LoadingTasks.push(() => {
             return new Promise(ok => {
                 let chronology = window.chronology.isInitialized() ? "" : "&chronology"
-                let oldest = isUpdate !== true ? (this.oldest?.date?.getTime() || 0) : 0;
+                let oldest = isUpdate !== true ? (this.oldest?.getDateTs() || 0) : 0;
                 let oldestArg = oldest ? `&from=${oldest}` : "";
                 let requestCount = 300;
                 $.get(`/api/media/list?count=${requestCount}${chronology}${oldestArg}&version=${this.#dbVersion}`, data => {
@@ -207,10 +229,10 @@ class MediaStorage extends EventTarget
         for (let i of arr) {
             this.loadingVersion = Math.max(this.loadingVersion, i.version);
             if (partialLoad !== true) {
-                this.oldest = !this.oldest || this.oldest.date.getTime() > i.date.getTime() ? i : this.oldest;
-                this.newest = !this.newest || this.newest.date.getTime() < i.date.getTime() ? i : this.newest;
+                this.oldest = !this.oldest || this.oldest.getDateTs() > i.getDateTs() ? i : this.oldest;
+                this.newest = !this.newest || this.newest.getDateTs() < i.getDateTs() ? i : this.newest;
             }
-            if (this.medias.length && this.medias[this.medias.length -1].date.getTime() < i.date.getTime())
+            if (this.medias.length && this.medias[this.medias.length -1].getDateTs() < i.getDateTs())
                 reorder = true;
             let previous = this.medias.find(x => x.fixedSum === i.fixedSum);
             if (previous) {
@@ -224,7 +246,7 @@ class MediaStorage extends EventTarget
         for (let i of newItems)
             this.dispatchEvent(new CustomEvent("newMedia", { detail: i }));
         if (reorder) {
-            this.medias.sort((a, b) => b.date.getTime() - a.date.getTime());
+            this.medias.sort((a, b) => b.getDateTs() - a.getDateTs());
             this.dispatchEvent(new CustomEvent("rebuildMedia"));
         }
     }

static/public/js/uiMedia.js

@@ -13,6 +13,21 @@ $(() => {
             document.getElementById("pch-mediaList").classList.remove("selection");
     }
 
+    let setSelectionCheckboxValue = function(media, value) {
+        media.ui.checkbox.checked = value;
+        let indexInSelection = selectedThumbnails.indexOf(media.fixedSum);
+        if (value && indexInSelection < 0) {
+            selectedThumbnails.push(media.fixedSum);
+            onItemSelected(media);
+            return true;
+        } else if (!value && indexInSelection >= 0) {
+            selectedThumbnails.splice(indexInSelection, 1);
+            onItemDeselected(media);
+            return true;
+        }
+        return false;
+    }
+
     function buildThumbnail(mediaItem) {
         if (mediaItem.ui)
             return mediaItem.ui;
@@ -47,20 +62,6 @@ $(() => {
         container.appendChild(img);
         container.appendChild(checkbox);
         container.appendChild(editButton);
-        let setSelectionCheckboxValue = function(media, value) {
-            media.ui.checkbox.checked = value;
-            let indexInSelection = selectedThumbnails.indexOf(media.fixedSum);
-            if (value && indexInSelection < 0) {
-                selectedThumbnails.push(media.fixedSum);
-                onItemSelected(media);
-                return true;
-            } else if (!value && indexInSelection >= 0) {
-                selectedThumbnails.splice(indexInSelection, 1);
-                onItemDeselected(media);
-                return true;
-            }
-            return false;
-        }
         let cascadeSetSelectionCheckboxValue = function(value) {
             if (!setSelectionCheckboxValue(mediaItem, value))
                 return;
@@ -112,8 +113,7 @@ $(() => {
         return mediaItem.ui = {
             root: container,
             img: img,
-            checkbox: checkbox,
-            setSelectionCheckboxValue: value => setSelectionCheckboxValue(mediaItem, value)
+            checkbox: checkbox
         };
     }
 
@@ -140,14 +140,15 @@ $(() => {
         buildThumbnail(media);
         if (!media.ui)
             return;
-        let yearUpdated = !container.dataset.lastItemYear || container.dataset.lastItemYear != media.date.getUTCFullYear();
+        let yearUpdated = !container.dataset.lastItemYear || container.dataset.lastItemYear != media.getDate().getUTCFullYear();
+        const mediaDate = media.getDate();
         if (yearUpdated) {
-            container.appendChild(buildYear(media.date));
-            container.dataset.lastItemYear = media.date.getUTCFullYear();
+            container.appendChild(buildYear(mediaDate));
+            container.dataset.lastItemYear = mediaDate.getUTCFullYear();
         }
-        if (yearUpdated || container.dataset.lastItemMonth === undefined || container.dataset.lastItemMonth != media.date.getUTCMonth()) {
-            container.appendChild(buildMonth(media.date));
-            container.dataset.lastItemMonth = media.date.getUTCMonth();
+        if (yearUpdated || container.dataset.lastItemMonth === undefined || container.dataset.lastItemMonth != mediaDate.getUTCMonth()) {
+            container.appendChild(buildMonth(mediaDate));
+            container.dataset.lastItemMonth = mediaDate.getUTCMonth();
         }
         container.appendChild(media.ui.root);
 
@@ -165,7 +166,7 @@ $(() => {
         targetDisplayedItems = displayItemBatchCount;
         for (let i of selectedThumbnails) {
             let media = MediaStorage.Instance.getMediaLocal(i);
-            media?.ui?.setSelectionCheckboxValue(false);
+            media?.ui?.setSelectionCheckboxValue(media, false);
         }
         lastSelection = null;
         for (let i of MediaStorage.Instance.medias)

static/public/js/uiMediaFullpage.js

@@ -272,7 +272,7 @@ $(() => {
         document.getElementById("pch-fullPagePreview").parentNode.style.maxHeight = "100%";
         let meta = {
             ...mediaItem.meta,
-            date: { type: 'date', value: mediaItem.date } || undefined,
+            date: { type: 'date', value: mediaItem.getDate() } || undefined,
             filename: mediaItem.filename ? { type: 'string', value: mediaItem.fileName } : undefined,
             fixedTags: mediaItem.fixedTags,
             tags: mediaItem.tags