File meta display

model/mediaService.js

@@ -16,8 +16,19 @@ function MediaStruct(i) {
 }
 
 MediaStruct.prototype.pushMeta = function(key, value) {
-    if (key && value && !this.meta[key])
-        this.meta[key] = value;
+    if (key && value && !this.meta[key]) {
+        let type = '';
+        if (['photochamberImport', 'dateTime'].indexOf(key) >= 0)
+            type = 'date';
+        else if (['height', 'width', 'iso', 'focal', 'fNumber', 'exposureTime'].indexOf(key) >= 0)
+            type = 'number';
+        else if (['artist', 'camera', 'lensModel', 'exposureTimeStr', 'libraryPath', 'compression', 'software'].indexOf(key) >= 0)
+            type = 'string';
+        else if (['fileSize'].indexOf(key) >= 0)
+            type = 'octet';
+        else console.log(key, value);
+        this.meta[key] = { type: type, value: value };
+    }
 }
 
 MediaStruct.prototype.pushTag = function(tag) {
@@ -30,6 +41,7 @@ MediaStruct.prototype.HaveAccess = function(accessList) {
         return false;
     accessList = accessList || {};
     for (let i in accessList) {
+        // FIXME
     }
     return true;
 }

static/public/css/style.css

@@ -122,6 +122,12 @@
     word-break: break-word;
 }
 
+#pch-fullPageDetail > ul {
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+}
+
 .login-wrapper {
     position: fixed;
     top: 0;

static/public/js/medias.js

@@ -6,12 +6,19 @@ class Media {
         this.path = data.path;
         this.fileName = data.fileName;
         this.meta = data.meta || {};
-        this.meta.height = this.meta.height ? parseInt(this.meta.height) : undefined;
-        this.meta.width = this.meta.width ? parseInt(this.meta.width) : undefined;
         this.tags = data.tags || [];
         this.thumbnail = `/api/media/thumbnail/${data.md5sum}.jpg`;
         this.original = `/api/media/original/${data.md5sum}`;
         this.ui = null;
+
+        for (let i in this.meta) {
+            if (this.meta[i].type === 'date')
+                this.meta[i].value = new Date(parseInt(this.meta[i].value));
+            else if (this.meta[i].type === 'number' || this.meta[i].type === 'octet')
+                this.meta[i].value = parseInt(this.meta[i].value);
+            else if (this.meta[i].type === 'string')
+                this.meta[i].value = '' + this.meta[i].value;
+        }
     }
 
     resize(maxWidth, maxHeight) {

static/public/js/uiMedia.js

@@ -137,6 +137,70 @@ $(() => {
         redraw(container, evt.detail);
     });
 
+    function serializeFileSize(size) {
+        let units = [ 'o', 'Ko', 'Mo', 'Go', 'To' ];
+        let idx = 0;
+        while (size >= 800 && idx < units.length) {
+            ++idx;
+            size /= 1024;
+        }
+        size = Math.floor(size * 100) / 100;
+        return `${size} ${units[idx]}`;
+    }
+
+    function displayMeta(key, value) {
+        let li = document.createElement("li");
+        let type = value?.type || null;
+        let val = (value?.value ? value.value : value) || null;
+        if (!val)
+            return null;
+        if (type === 'date')
+            val = val.toLocaleString();
+        if (["dimension", "height", "width"].indexOf(key) >= 0)
+            val += ' px';
+        if (["fileSize"].indexOf(key) >= 0)
+            val = serializeFileSize(val);
+        let keyTranslate = {
+            fileSize: "File Size",
+            photochamberImport: "Photochamber Imported",
+            lensModel: "Lens Model",
+            exposureTimeStr: "Exposure Time"
+        };
+        let keyStr = keyTranslate[key] || (key[0].toUpperCase()+key.substr(1));
+        li.innerText = `${keyStr}: ${val}`;
+        return li;
+    }
+
+    function displayMetas(metaData) {
+        let metaList = document.createElement("ul");
+
+        metaData.libraryPath = null;
+
+        if (metaData.exposureTime && metaData.exposureTimeStr)
+            metaData.exposureTime = null;
+
+        if (metaData.date && metaData.dateTime)
+            metaData.dateTime = null;
+
+        if (metaData.height && metaData.width) {
+            metaData.dimension = { type: "string", value: `${metaData.width.value} x ${metaData.height.value}` }
+            metaData.height = metaData.width = null;
+        }
+
+        for (let i of [ "date", "dimension", "height", "width", "fileSize" ]) {
+            let metaItem = displayMeta(i, metaData[i]);
+            metaItem && metaList.appendChild(metaItem);
+            metaData[i] = null;
+        }
+
+        // FIXME sort and filter
+        for (let i in metaData) {
+            let metaItem = displayMeta(i, metaData[i]);
+            metaItem && metaList.appendChild(metaItem);
+        }
+        return metaList;
+    }
+
     function _displayMediaFullPage(fileName, imgUrl, metaData, downloadLink) {
         return new Promise(ok => {
             document.getElementById("pch-fullPagePreviewContainer").classList.add("loading");
@@ -144,13 +208,7 @@ $(() => {
             document.getElementById("pch-fullPagePreview").onceLoaded = ok;
             document.getElementById("pch-fullPagePreview").src = imgUrl;
             document.getElementById("pch-fullPageDetail").innerText = "";
-            let metaList = document.createElement("ul");
-            for (let i in metaData || {}) {
-                let li = document.createElement("li");
-                li.innerText = `${i}: ${metaData[i]}`;
-                metaList.appendChild(li);
-            }
-            document.getElementById("pch-fullPageDetail").appendChild(metaList);
+            document.getElementById("pch-fullPageDetail").appendChild(displayMetas(Object.create(metaData || {})));
             if (downloadLink) {
                 document.getElementById("pch-fullPageDetail-dlButton").classList.remove("hidden");
                 document.getElementById("pch-fullPageDetail-dlButton").dataset["link"] = downloadLink;
@@ -183,9 +241,11 @@ $(() => {
         document.getElementById("pch-fullPagePreview").parentNode.style.maxHeight = "100%";
         let meta = {
             ...mediaItem.meta,
-            date: mediaItem.date || undefined,
-            filename: mediaItem.fileName || undefined
+            date: { type: 'date', value: mediaItem.date } || undefined,
+            filename: mediaItem.filename ? { type: 'string', value: mediaItem.fileName } : undefined
         };
+        if (document.location.hash != `#${mediaItem.md5sum}`)
+            history.pushState({}, '', `#${mediaItem.md5sum}`);
         return _displayMediaFullPage(mediaItem.fileName, `${mediaItem.thumbnail}?w=${requestSize.width}&h=${requestSize.height}&q=6`, meta, mediaItem.original);
     }