Some UI FIX

model/mediaService.js

@@ -25,7 +25,7 @@ MediaStruct.prototype.pushMeta = function(key, value) {
             'photochamberImport', 'height', 'width', 'iso', 'focal',
             'fNumber', 'exposureTime', 'camera', 'lensModel',
             'exposureTimeStr', 'libraryPath', 'compression',
-            'software', 'fileSize', 'geoHash'
+            'software', 'fileSize', 'geoHash', 'exposureProgram'
         ];
         if (['photochamberImport', 'dateTime'].indexOf(key) >= 0)
             type = 'date';
@@ -34,7 +34,7 @@ MediaStruct.prototype.pushMeta = function(key, value) {
         else if (['geoHash', 'gpsLocation'].indexOf(key) >= 0)
             type = 'geoData';
         else if (['artist', 'camera', 'lensModel', 'exposureTimeStr', 'libraryPath', 'compression',
-                'software', 'geoCountry', 'geoAdmin', 'geoCity'].indexOf(key) >= 0)
+                'software', 'geoCountry', 'geoAdmin', 'geoCity', 'exposureProgram'].indexOf(key) >= 0)
             type = 'string';
         else if (['fileSize'].indexOf(key) >= 0)
             type = 'octet';

router/api.js

@@ -96,7 +96,7 @@ module.exports = { register: app => {
             data: (await MediaService.fetchMediasWithAccess(
                 app,
                 isNaN(fromDate) ? 0 : fromDate,
-                isNaN(count) ? 25 : Math.min(150, count),
+                isNaN(count) ? 25 : Math.min(350, count),
                 req.sessionObj?.accessList)).map(MediaToJson),
             first: first,
             last: last
@@ -141,12 +141,14 @@ module.exports = { register: app => {
         let data = await MediaService.fetchOne(app, req.params.md5sum, req.sessionObj?.accessList);
         if (!data)
             return app.routerUtils.onPageNotFound(res);
-        //if (data.accessType === ACCESS_GRANT.readNoMeta) -> trim metadata
         const fileName = Path.basename(data.path);
-        res.setHeader("Content-Type", mime.lookup(data.path));
-        res.setHeader("Content-Length", fs.statSync(data.path)?.size || undefined);
         res.setHeader("Content-Disposition", `attachment; filename="${fileName}"`);
         res.setHeader("Cache-Control", "private, max-age=2630000"); // 1 month cache
+        if (data.accessType === ACCESS_GRANT.readNoMeta || req.body?.trim !== undefined) {
+            console.log("remove meta");//-> trim metadata
+        }
+        res.setHeader("Content-Type", mime.lookup(data.path));
+        res.setHeader("Content-Length", fs.statSync(data.path)?.size || undefined);
         fs.createReadStream(data.path).pipe(res);
     });
 }};

src/filetype/imagemagick.js

@@ -115,6 +115,13 @@ function readTags(data) {
     return result;
 }
 
+function exposureProgram(programId) {
+    if (isNaN(programId) || !programId)
+        return;
+    return [ "Manual", "Normal program", "Aperture priority", "Shutter priority",
+        "Creative program", "Action program", "Portrait mode", "Landscape mode"][programId];
+}
+
 module.exports.parse = async (fileObj) => {
     if (!fileObj.mimeType.startsWith('image/'))
         return {};
@@ -123,6 +130,7 @@ module.exports.parse = async (fileObj) => {
         return {};
     let result = {};
     result.artist = imdata.artist || undefined;
+    result.exposureProgram = exposureProgram(Number.parseInt(imdata.exposureProgram));
     result.exposureTime = exifSlash(imdata.exposureTime);
     result.exposureTimeStr = imdata.exposureTime || undefined;
     result.dateTime = exifDate(imdata.dateTimeDigitized || imdata.dateTimeOriginal);

static/public/css/style.css

@@ -129,7 +129,7 @@ body.filter-active #pch-navbar .bt-filter-inactive {
 }
 
 .pch-image.loading img {
-    display: none;
+    visibility: hidden;
 }
 
 .hidden {
@@ -161,6 +161,10 @@ body.filter-active #pch-navbar .bt-filter-inactive {
     height: 100%;
 }
 
+#pch-fullPageMedia .modal-title {
+    flex: 1;
+}
+
 #pch-fullPageMedia .modal-body {
     overflow: hidden;
     max-width: initial;

static/public/js/common.js

@@ -27,7 +27,7 @@ $(() => {
                 let chronology = window.chronology.isInitialized() ? "" : "&chronology"
                 let oldest = (MediaStorage.Instance.oldest?.date?.getTime() || 0);
                 let oldestArg = oldest ? `&from=${oldest}` : "";
-                let requestCount = 100;
+                let requestCount = 300;
                 $.get(`/api/media/list?count=${requestCount}${chronology}${oldestArg}`, data => {
                     MediaStorage.Instance.pushAll(data.data.map(i => new Media(i)));
                     if (data.first || data.last)

static/public/js/taskQueue.js

@@ -10,7 +10,7 @@ let LoadingTasks = (() => {
         activeTask = (tasks.shift());
         let taskResult = null;
         try {
-            activeTask.fnc();
+            taskResult = activeTask.fnc();
         }
         catch (err) {
             taskResult = Promise.reject(err);

static/public/js/uiMediaFullpage.js

@@ -96,7 +96,7 @@ $(() => {
         }
 
         if (!isRo)
-            for (let i of ['geoCountry']) {
+            for (let i of ['geoCountry', 'geoCity', 'geoAdmin']) {
                 if (!metaData[i]) {
                     let metaItem = displayMeta(i, "", false);
                     metaItem && metaList.appendChild(metaItem);
@@ -147,7 +147,7 @@ $(() => {
             let bt = document.createElement('button');
             bt.className = 'btn btn-outline-secondary';
             bt.type = 'button';
-            bt.innerHTML = '<i class="bi bi-pen"></i>';
+            bt.innerHTML = '<i class="bi bi-tags"></i>';
             inputGroup.appendChild(bt);
             bt.addEventListener('click', async () => { await MediaStorage.Instance.addTag(fullPageMediaDisplayed.md5sum, valInput.value); reloadCurrentMedia(); });
             inputGroup.addEventListener('submit', async evt => {
@@ -159,21 +159,33 @@ $(() => {
         return tagListUi;
     }
 
+    function displayDownloadBt(downloadLink) {
+        let bt = document.createElement("button");
+        bt.type = "button";
+        bt.className = "btn btn-primary";
+        bt.textContent = "Download";
+        bt.addEventListener("click", (evt) => {
+            let link = document.createElement('a');
+            link.target='_blank';
+            link.setAttribute("download", "");
+            link.href = downloadLink;
+            link.click();
+        });
+        return bt;
+    }
+
     function _displayMediaFullPage(fileName, imgUrl, metaData, downloadLink, writeAccess) {
         return new Promise(ok => {
             document.getElementById("pch-fullPagePreviewContainer").classList.add("loading");
             document.getElementById("pch-fullPageMedia-title").innerText = fileName;
             document.getElementById("pch-fullPagePreview").onceLoaded = ok;
             document.getElementById("pch-fullPagePreview").src = imgUrl ?? "";
+
             document.getElementById("pch-fullPageDetail").innerText = "";
-            document.getElementById("pch-fullPageDetail").appendChild(displayMetas(Object.assign({}, metaData || {}), !writeAccess));
+            if (downloadLink)
+                document.getElementById("pch-fullPageDetail").appendChild(displayDownloadBt(downloadLink));
             document.getElementById("pch-fullPageDetail").appendChild(displayTags(metaData?.fixedTags || [], metaData?.tags || [], writeAccess));
-            if (downloadLink) {
-                document.getElementById("pch-fullPageDetail-dlButton").classList.remove("hidden");
-                document.getElementById("pch-fullPageDetail-dlButton").dataset["link"] = downloadLink;
-            } else {
-                document.getElementById("pch-fullPageDetail-dlButton").classList.add("hidden");
-            }
+            document.getElementById("pch-fullPageDetail").appendChild(displayMetas(Object.assign({}, metaData || {}), !writeAccess));
         });
     }
 
@@ -225,7 +237,7 @@ $(() => {
         if (document.location.hash != `#${mediaItem.md5sum}`)
             history.pushState({}, '', `#${mediaItem.md5sum}`);
         const requestSizeQuery = requestSize ? `&w=${requestSize.width}&h=${requestSize.height}` : "";
-        return _displayMediaFullPage(mediaItem.fileName, `${mediaItem.thumbnail}?q=6${requestSizeQuery}`, meta, mediaItem.original, mediaItem.writeAccess);
+        return _displayMediaFullPage(mediaItem.fileName, `${mediaItem.thumbnail}?q=6${requestSizeQuery}`, meta, `${mediaItem.original}?trim`, mediaItem.writeAccess);
     }
 
     document.getElementById("pch-fullPageMedia-closeBt")
@@ -236,15 +248,6 @@ $(() => {
         domItem.onceLoaded && domItem.onceLoaded();
         domItem.onceLoaded = null;
     });
-    document.getElementById('pch-fullPageDetail-dlButton').addEventListener("click", (evt) => {
-        if (!evt.target?.dataset?.link)
-            return;
-        let link = document.createElement('a');
-        link.target='_blank';
-        link.setAttribute("download", "");
-        link.href = evt.target.dataset.link;
-        link.click();
-    });
     document.addEventListener("keydown", evt => {
         if (!fullPageMediaDisplayed)
             return;

templates/_fullPageMedia.js

@@ -15,12 +15,7 @@ module.exports = `
                         <img id="pch-fullPagePreview" class="img-fluid"/>
                     </div>
                 </div>
-                <div class="col col-12 col-xl-3">
-                    <div>
-                        <button type="button" class="btn btn-primary" id="pch-fullPageDetail-dlButton">Download</button>
-                    </div>
-                    <div id="pch-fullPageDetail" class="container-fluid"></div>
-                </div>
+                <div class="col col-12 col-xl-3"><div id="pch-fullPageDetail" class="container-fluid"></div></div>
             </div>
         </div>
     </div>