Merge pull request #79 from dewanakl/improve-ui

fix: cache pool, refactor code, and add dir auto

Author: dewanakl

assets/images/placeholder.webp

@@ -8,7 +8,7 @@ import { storage } from '../../common/storage.js';
 import { session } from '../../common/session.js';
 import { offline } from '../../common/offline.js';
 import { comment } from '../components/comment.js';
-import { request, HTTP_GET, HTTP_PATCH, HTTP_PUT } from '../../connection/request.js';
+import { pool, request, HTTP_GET, HTTP_PATCH, HTTP_PUT } from '../../connection/request.js';
 
 export const admin = (() => {
 
@@ -310,7 +310,7 @@ export const admin = (() => {
     /**
      * @returns {void}
      */
-    const domLoaded = () => {
+    const pageLoaded = () => {
         lang.init();
         lang.setDefault('en');
 
@@ -346,7 +346,7 @@ export const admin = (() => {
             storage('information').clear();
         }
 
-        document.addEventListener('DOMContentLoaded', domLoaded);
+        window.addEventListener('load', () => pool.init(pageLoaded, ['gif']));
 
         return {
             util,

js/app/admin/admin.js

@@ -178,7 +178,7 @@ export const card = (() => {
         const data = util.convertMarkdownToHTML(util.escapeHtml(moreMaxLength ? (c.comment.slice(0, maxCommentLength) + '...') : c.comment));
 
         return head + `
-        <p class="text-theme-auto my-1 mx-0 p-0" style="white-space: pre-wrap !important; font-size: 0.95rem;" data-comment="${util.base64Encode(c.comment)}" id="content-${c.uuid}">${data}</p>
+        <p dir="auto" class="text-theme-auto my-1 mx-0 p-0" style="white-space: pre-wrap !important; font-size: 0.95rem;" data-comment="${util.base64Encode(c.comment)}" id="content-${c.uuid}">${data}</p>
         ${moreMaxLength ? `<p class="d-block mb-2 mt-0 mx-0 p-0"><a class="text-theme-auto" role="button" style="font-size: 0.85rem;" data-show="false" onclick="undangan.comment.showMore(this, '${c.uuid}')">Selengkapnya</a></p>` : ''}`;
     };
 
@@ -203,19 +203,13 @@ export const card = (() => {
      * @param {ReturnType<typeof dto.getCommentResponse>[]} cs
      * @returns {Promise<string>}
      */
-    const renderContentMany = (cs) => {
-        return gif.prepareCache()
-            .then(() => Promise.all(cs.map((i) => renderContent(i))))
-            .then((r) => r.join(''));
-    };
+    const renderContentMany = (cs) => Promise.all(cs.map((i) => renderContent(i))).then((r) => r.join(''));
 
     /**
      * @param {ReturnType<typeof dto.getCommentResponse>} cs
      * @returns {Promise<string>}
      */
-    const renderContentSingle = (cs) => {
-        return gif.prepareCache().then(() => renderContent(cs));
-    };
+    const renderContentSingle = (cs) => renderContent(cs);
 
     /**
      * @param {string} id 

js/app/components/card.js

@@ -79,11 +79,6 @@ export const gif = (() => {
         });
     };
 
-    /**
-     * @returns {Promise<void>}
-     */
-    const prepareCache = () => c.open();
-
     /**
      * @param {string} url
      * @returns {Promise<string>}
@@ -562,6 +557,5 @@ export const gif = (() => {
         buttonCancel,
         removeGifSearch,
         removeButtonBack,
-        prepareCache,
     };
 })();

js/app/components/gif.js

@@ -12,6 +12,7 @@ import { session } from '../../common/session.js';
 import { offline } from '../../common/offline.js';
 import { comment } from '../components/comment.js';
 import * as confetti from '../../libs/confetti.js';
+import { pool } from '../../connection/request.js';
 
 export const guest = (() => {
 
@@ -315,7 +316,7 @@ export const guest = (() => {
     /**
      * @returns {void}
      */
-    const domLoaded = () => {
+    const pageLoaded = () => {
         lang.init();
         offline.init();
         comment.init();
@@ -359,8 +360,7 @@ export const guest = (() => {
                 img.load();
             }
 
-            // fetch after document is loaded.
-            const load = () => session.guest(params.get('k') ?? token).then(({ data }) => {
+            session.guest(params.get('k') ?? token).then(({ data }) => {
                 document.dispatchEvent(new Event('undangan.session'));
                 progress.complete('config');
 
@@ -377,8 +377,6 @@ export const guest = (() => {
                     .catch(() => progress.invalid('comment'));
 
             }).catch(() => progress.invalid('config'));
-
-            window.addEventListener('load', load);
         }
     };
 
@@ -397,7 +395,15 @@ export const guest = (() => {
             storage('comment').clear();
         }
 
-        document.addEventListener('DOMContentLoaded', domLoaded);
+        window.addEventListener('load', () => {
+            pool.init(pageLoaded, [
+                'image',
+                'video',
+                'audio',
+                'libs',
+                'gif',
+            ]);
+        });
 
         return {
             util,

js/app/guest/guest.js

@@ -94,12 +94,9 @@ export const image = (() => {
          * @returns {Promise<void>}
          */
         const runGroup = async (filter) => {
+            urlCache.length = 0;
             imgs.filter(filter).forEach((el) => el.hasAttribute('data-src') ? getByFetch(el) : getByDefault(el));
-
-            if (urlCache.length) {
-                await c.run(urlCache, progress.getAbort());
-                urlCache.length = 0;
-            }
+            await c.run(urlCache, progress.getAbort());
         };
 
         await runGroup((el) => el.hasAttribute('fetchpriority'));

js/app/guest/image.js

@@ -49,6 +49,7 @@ export const progress = (() => {
 
         if (loaded === total) {
             valid = false;
+            cancelProgress = null;
             document.dispatchEvent(new Event('undangan.progress.done'));
         }
     };

js/app/guest/progress.js

@@ -113,10 +113,6 @@ export const video = (() => {
             });
         };
 
-        if (!window.isSecureContext) {
-            return fetchBasic();
-        }
-
         return c.has(src).then((res) => {
             if (!res) {
                 return c.del(src).then(fetchBasic).then((r) => c.set(src, r));

js/app/guest/video.js

@@ -1,30 +1,5 @@
 import { request, cacheWrapper, HTTP_GET } from './request.js';
 
-const objectPool = (() => {
-    /**
-     * @type {Map<string, Promise<Cache>>|null}
-     */
-    let cachePool = null;
-
-    return {
-        /**
-         * @param {string} name
-         * @returns {Promise<Cache>}
-         */
-        getInstance: (name) => {
-            if (!cachePool) {
-                cachePool = new Map();
-            }
-
-            if (!cachePool.has(name)) {
-                cachePool.set(name, window.caches.open(name));
-            }
-
-            return cachePool.get(name);
-        },
-    };
-})();
-
 export const cache = (cacheName) => {
 
     /**
@@ -38,49 +13,38 @@ export const cache = (cacheName) => {
     const inFlightRequests = new Map();
 
     /**
-     * @type {Cache|null}
+     * @type {ReturnType<typeof cacheWrapper>}
      */
-    let cacheObject = null;
+    const cw = cacheWrapper(cacheName);
 
     let ttl = 1000 * 60 * 60 * 6;
 
     let forceCache = false;
 
-    /**
-     * @returns {Promise<Cache>|null}
-     */
-    const open = async () => {
-        if (!cacheObject && window.isSecureContext) {
-            cacheObject = await objectPool.getInstance(cacheName);
-        }
-
-        return cacheObject;
-    };
-
     /**
      * @param {string|URL} input 
      * @param {Response} res 
      * @returns {Response}
      */
-    const set = (input, res) => open().then(cacheWrapper).then((cw) => {
+    const set = (input, res) => {
         if (!res.ok) {
             throw new Error(res.statusText);
         }
 
         return cw.set(input, res, forceCache, ttl);
-    });
+    };
 
     /**
      * @param {string|URL} input 
      * @returns {Promise<Response|null>}
      */
-    const has = (input) => open().then(cacheWrapper).then((cw) => cw.has(input));
+    const has = (input) => cw.has(input);
 
     /**
      * @param {string|URL} input 
      * @returns {Promise<boolean>}
      */
-    const del = (input) => open().then(cacheWrapper).then((cw) => cw.del(input));
+    const del = (input) => cw.del(input);
 
     /**
      * @param {string} input
@@ -101,8 +65,8 @@ export const cache = (cacheName) => {
          */
         const fetchPut = () => request(HTTP_GET, input).withCancel(cancel).withRetry().default();
 
-        const inflightPromise = open()
-            .then(() => window.isSecureContext ? has(input).then((res) => res ? Promise.resolve(res) : del(input).then(fetchPut).then((r) => set(input, r))) : fetchPut())
+        const inflightPromise = has(input)
+            .then((res) => res ? Promise.resolve(res) : del(input).then(fetchPut).then((r) => set(input, r)))
             .then((r) => r.blob())
             .then((b) => objectUrls.set(input, URL.createObjectURL(b)))
             .then(() => objectUrls.get(input))
@@ -117,13 +81,9 @@ export const cache = (cacheName) => {
      * @param {Promise<void>|null} cancel
      * @returns {Promise<void>}
      */
-    const run = (items, cancel = null) => open().then(() => {
+    const run = (items, cancel = null) => {
         const uniq = new Map();
 
-        if (!window.isSecureContext) {
-            console.warn('Cache is not supported in insecure context');
-        }
-
         if (items.length === 0) {
             return Promise.resolve();
         }
@@ -143,7 +103,7 @@ export const cache = (cacheName) => {
                 return r;
             })
         ));
-    });
+    };
 
     /**
      * @param {string} input