filadelfia_archive: Fix header

filadelfia_archive/app/api.js

@@ -21,9 +21,22 @@ function safeParseReponse(str, status, url) {
   }
 }
 
+let requests = new Set()
+let requestIndex = 0
+
+function clearLoading(request) {
+  requests.delete(request)
+  if (!requests.size) {
+    api.loading = false
+    window.requestAnimationFrame(m.redraw.bind(m))
+  }
+}
+
 const api = {
   loading: false,
   sendRequest: function(options, isPagination) {
+    let request = requestIndex++
+    requests.add(request)
     api.loading = true
     let token = Authentication.getToken()
     let pagination = isPagination
@@ -61,15 +74,14 @@ const api = {
       }
       return out
     }
-  
+
     return m.request(options)
       .then(function(res) {
-        api.loading = false
-        window.requestAnimationFrame(m.redraw.bind(m))
+        clearLoading(request)
         return res
       })
       .catch(function (error) {
-        api.loading = false
+        clearLoading(request)
         window.requestAnimationFrame(m.redraw.bind(m))
         if (error.status === 403) {
           Authentication.clearToken()
@@ -82,10 +94,15 @@ const api = {
       })
   },
 
-  uploadBanner: function(bannerFile, token) {
+  uploadBanner: function(bannerFile, token, reporter) {
+    let request = requestIndex++
+    requests.add(request)
+    api.loading = true
+
+    var report = reporter || function() {}
     var data = new FormData()
     data.append('file', bannerFile)
-    data.append('preview', JSON.stringify({
+    /*data.append('preview', JSON.stringify({
       "out": "base64",
       "format": "avif",
       "resize": {
@@ -96,10 +113,10 @@ const api = {
         "kernel": "mitchell"
       },
       "avif": {
-        "quality": 50,
+        "quality": 40,
         "effort": 9
       }
-    }))
+    }))*/
     data.append('medium', JSON.stringify({
       "format": "avif",
       "resize": {
@@ -115,29 +132,75 @@ const api = {
       }
     }))
 
+    report(lang.api_banner_upload)
+
     return api.sendRequest({
       method: 'POST',
       url: token.resize + '?token=' + token.token,
       body: data,
     })
-    .then(banner => {
+    .then(async (banner) => {
+      let preview = null
+      let quality = 60
+      while (!preview && quality > 10) {
+        report(lang.format(lang.api_banner_generate, quality))
+        let check = await api.sendRequest({
+          method: 'POST',
+          url: token.resize + '/' + banner.filename + '?token=' + token.token,
+          body: {
+            "preview": {
+              "out": "base64",
+              "format": "avif",
+              "resize": {
+                "width": 360,
+                "height": 203,
+                "fit": "cover",
+                "withoutEnlargement": true,
+                "kernel": "mitchell"
+              },
+              "avif": {
+                "quality": quality,
+                "effort": 9
+              }
+            },
+          },
+        })
+
+        if (check.preview.base64.length < 8000) {
+          preview = check.preview.base64
+        } else {
+          quality -= 5
+        }
+      }
+      report(null)
+
       api.sendRequest({
         method: 'DELETE',
         url: token.delete + banner.filename + '?token=' + token.token,
       }).catch(err => console.error(err))
 
       return {
-        file: banner,
+        file: bannerFile,
         size: bannerFile.size,
         medium: {
           filename: banner.medium.filename,
           path: banner.medium.path,
         },
         preview: {
-          base64: banner.preview.base64,
+          base64: preview,
         },
       }
     })
+    .then(
+      function(res) {
+        clearLoading(request)
+        return res
+      },
+      function(err) {
+        clearLoading(request)
+        return Promise.reject(err)
+      }
+    )
   },
 
   prettyFormatBytes: function(bytes) {
@@ -153,6 +216,8 @@ const api = {
   },
 
   uploadFileProgress: function(options, file, reporter) {
+    let request = requestIndex++
+    requests.add(request)
     api.loading = true
 
     return new Promise(function(res, rej) {
@@ -207,12 +272,10 @@ const api = {
       report(request, 0)
     })
     .then(function(res) {
-      api.loading = false
-      window.requestAnimationFrame(m.redraw.bind(m))
+      clearLoading(request)
       return res
     }, function(err) {
-      api.loading = false
-      window.requestAnimationFrame(m.redraw.bind(m))
+      clearLoading(request)
       return Promise.reject(err)
     })
   },

filadelfia_archive/app/lang.js

@@ -59,6 +59,10 @@ const i18n = {
 														'Villa við að eyða efni: {0}'],
 	article_error:				['Error while saving: {0}',
 														'Villa við að vista: {0}'],
+	api_banner_upload:	['Uploading banner image',
+														'Er að senda mynd'],
+	api_banner_generate:['Generating preview, testing quality {0}%',
+														'Bý til forsíðumynd, prufa {0}% gæði'],
 	months: {
 		'1':									['January',
 														'Janúar'],

filadelfia_archive/app/page_upload.js

@@ -19,6 +19,7 @@ const Upload = {
     this.cacheVideo = null
     this.cacheImage = null
     this.uploading = null
+    this.bannerStatus = null
     this.form = {
       title: 'Sunnudagssamkoma',
       date: d,
@@ -49,7 +50,10 @@ const Upload = {
         return this.cacheImage
       }
 
-      return api.uploadBanner(this.form.banner, res)
+      return api.uploadBanner(this.form.banner, res, (status) => {
+        this.bannerStatus = status
+        m.redraw()
+      })
       .then(imageData => {
         this.cacheImage = imageData
         return res
@@ -113,6 +117,7 @@ const Upload = {
       m.route.set('/')
     })
     .catch((error) => {
+      this.bannerStatus = null
       this.uploading = null
       if (!error) return
 
@@ -196,6 +201,10 @@ const Upload = {
               value: 'Begin upload',
             }),
             api.loading ? m('div.loading-spinner') : null,
+            this.bannerStatus ? [
+              m('p', this.bannerStatus),
+              m('.loading-bar', { style: `--progress: 0%` }),
+            ] : null,
             this.uploading ? [
               m('p', `${Math.floor(this.uploading.progress)}% (${this.uploading.perSecond}/s)`),
               m('.loading-bar', { style: `--progress: ${this.uploading.progress}%` }),

filadelfia_archive/build-package.json

@@ -7,7 +7,6 @@
     "@popperjs/core": "^2.11.8",
     "eltro": "^1.4.4",
     "esbuild": "^0.19.5",
-    "flaska": "^1.3.2",
     "mithril": "^2.2.2",
     "service-core": "^3.0.0-beta.17"
   }

filadelfia_archive/package.json

@@ -1,6 +1,6 @@
 {
   "name": "filadelfia_archive",
-  "version": "1.0.1",
+  "version": "1.0.8",
   "port": 4130,
   "description": "Filadelfia archive",
   "main": "index.js",
@@ -50,7 +50,9 @@
   "homepage": "https://git.nfp.is/nfp/nfp_sites",
   "dependencies": {
     "dot": "^2.0.0-beta.1",
-    "msnodesqlv8": "^2.4.7",
+    "flaska": "^1.3.2",
+    "formidable": "^1.2.6",
+    "msnodesqlv8": "^4.1.1",
     "nconf-lite": "^2.0.0"
   },
   "devDependencies": {
@@ -58,7 +60,6 @@
     "@popperjs/core": "^2.11.8",
     "eltro": "^1.4.4",
     "esbuild": "^0.19.5",
-    "flaska": "^1.3.2",
     "mithril": "^2.2.2",
     "service-core": "^3.0.0-beta.17"
   }

filadelfia_archive/public/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
-  <title>Filadelfia web portal</title>
+  <title>Filadelfia myndhvelfing</title>
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="apple-touch-icon" sizes="180x180" href="/assets/apple-touch-icon.png">
@@ -83,8 +83,9 @@ form p.separator { color: var(--color-alt); margin-top: 1.5rem; padding-bottom:
 
 #header { background: var(--bg-component); }
 
+#header nav { display: flex; }
 #header nav,
-#header .nav { display: flex; padding: 0.5rem 1rem 0.5rem 0; }
+#header .nav { text-align: center; padding: 0.5rem 1rem 0.5rem 0; justify-content: flex-end; flex-wrap: wrap; }
 
 #header nav a,
 #header nav button { margin-left: 1rem; }
@@ -103,7 +104,7 @@ form p.separator { color: var(--color-alt); margin-top: 1.5rem; padding-bottom:
 #header .upload { background: var(--main); color: var(--main-fg); }
 #header .nav { overflow-x: hidden; padding: 0.75rem 1rem 0.25rem; min-height: 4rem; align-items: flex-start; border-bottom: 1px solid #0001; }
 #header .nav:hover { overflow-x: auto; }
-#header .nav .inner { flex: 2 1 auto; display: flex; justify-content: center; }
+#header .nav .inner { padding-top: 0.5rem; }
 #header .nav a { margin: 0 0.25rem; padding: 0.25rem 1.5rem; border-radius: 3rem; }
 #header .nav a.empty { opacity: 0.5; }
 #header .nav a.active { background: var(--bg-component-alt); color: var(--color); text-decoration: none; }
@@ -131,7 +132,7 @@ footer a { font-size: 0.8rem; }
 .gallery-year { margin: 1rem; padding: 0 0 1rem; border-bottom: 1px solid var(--main); text-align: center; font-size: 2rem; }
 .gallery-month { margin: 0rem 1rem 1rem; font-size: 1.2rem; border-bottom: 1px solid #0003; }
 .gallery .group { display: flex; flex-wrap: wrap; }
-.gallery .group a { width: 40vw; max-width: 320px; aspect-ratio: 16 / 9; display: flex; flex-direction: column; justify-content: flex-end; background: url('./assets/placeholder.avif') center no-repeat; background-size: cover; margin: 0 1rem 1rem; text-align: center; border: 1px solid var(--main); }
+.gallery .group a { width: calc(50vw - 4rem); max-width: 320px; aspect-ratio: 16 / 9; display: flex; flex-direction: column; justify-content: flex-end; background: url('./assets/placeholder.avif') center no-repeat; background-size: cover; margin: 0 1rem 1rem; text-align: center; border: 1px solid var(--main); }
 
 .gallery .group a span { align-self: stretch; text-align: center; background: #fffb; }
 
@@ -145,7 +146,6 @@ footer a { font-size: 0.8rem; }
 .article { width: 100%; max-width: 1280px; padding: 0.5rem; align-self: center; margin-bottom: 5rem; }
 .article .full-error { margin-top: 1rem; }
 .article-name { flex: 2 1 auto; margin-left: 1rem; }
-.image-banner { height: 160px; }
 .article h1 { margin: 0; }
 .article h1,
 .article p { padding: 0 0.5rem 0.5rem; }
@@ -193,6 +193,16 @@ footer a { font-size: 0.8rem; }
 
 @keyframes stripes { to { background-size: 100% 100%; } }
 
+@media (pointer:coarse) {
+  #header .nav { overflow-x: scroll; }
+}
+@media screen and (max-width: 700px){
+  .gallery, .gallery-year { margin: 0.25rem; }
+  .gallery-month { margin: 0rem 0.25rem 0.25rem; }
+  .gallery .group a { margin: 0 0.25rem 0.25rem; width: calc(50vw - 1rem); font-size: min(3vw, 1rem); }
+  
+}
+
   </style>
 </head>
 <body>