Template renderer media updates (#1802)

* Add TemplateRendererMediaProvider to abstract media-related functionality

* Update representation of injected media

* Update templates

* Update upgrade file

* Update tests

* Update test data

* Force media to be an object

* Update test data

2 files changed, 136 insertions, 22 deletions

diff --git a/ext/js/templates/template-renderer-media-provider.js b/ext/js/templates/template-renderer-media-provider.js
new file mode 100644
index 00000000..db4a6d18
--- /dev/null
+++ b/ext/js/templates/template-renderer-media-provider.js
@@ -0,0 +1,116 @@
+/*
+ * Copyright (C) 2021  Yomichan Authors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+class TemplateRendererMediaProvider {
+    constructor() {
+        this._requirements = null;
+    }
+
+    get requirements() {
+        return this._requirements;
+    }
+
+    set requirements(value) {
+        this._requirements = value;
+    }
+
+    hasMedia(root, args, namedArgs) {
+        const {media} = root;
+        const data = this._getMediaData(media, args, namedArgs);
+        return (data !== null);
+    }
+
+    getMedia(root, args, namedArgs) {
+        const {media} = root;
+        const data = this._getMediaData(media, args, namedArgs);
+        if (data !== null) {
+            const {format} = namedArgs;
+            const result = this._getFormattedValue(data, format);
+            if (typeof result === 'string') { return result; }
+        }
+        const defaultValue = namedArgs.default;
+        return typeof defaultValue !== 'undefined' ? defaultValue : '';
+    }
+
+    // Private
+
+    _addRequirement(value) {
+        if (this._requirements === null) { return; }
+        this._requirements.push(value);
+    }
+
+    _getFormattedValue(data, format) {
+        switch (format) {
+            case 'fileName':
+                {
+                    const {fileName} = data;
+                    if (typeof fileName === 'string') { return fileName; }
+                }
+                break;
+            case 'text':
+                {
+                    const {text} = data;
+                    if (typeof text === 'string') { return text; }
+                }
+                break;
+        }
+        return null;
+    }
+
+    _getMediaData(media, args, namedArgs) {
+        const type = args[0];
+        switch (type) {
+            case 'audio': return this._getSimpleMediaData(media, 'audio');
+            case 'screenshot': return this._getSimpleMediaData(media, 'screenshot');
+            case 'clipboardImage': return this._getSimpleMediaData(media, 'clipboardImage');
+            case 'clipboardText': return this._getSimpleMediaData(media, 'clipboardText');
+            case 'dictionaryMedia': return this._getDictionaryMedia(media, args[1], namedArgs);
+            default: return null;
+        }
+    }
+
+    _getSimpleMediaData(media, type) {
+        const result = media[type];
+        if (typeof result === 'object' && result !== null) { return result; }
+        this._addRequirement({type});
+        return null;
+    }
+
+    _getDictionaryMedia(media, path, namedArgs) {
+        const {dictionaryMedia} = media;
+        const {dictionary} = namedArgs;
+        if (
+            typeof dictionaryMedia !== 'undefined' &&
+            typeof dictionary === 'string' &&
+            Object.prototype.hasOwnProperty.call(dictionaryMedia, dictionary)
+        ) {
+            const dictionaryMedia2 = dictionaryMedia[dictionary];
+            if (Object.prototype.hasOwnProperty.call(dictionaryMedia2, path)) {
+                const result = dictionaryMedia2[path];
+                if (typeof result === 'object' && result !== null) {
+                    return result;
+                }
+            }
+        }
+        this._addRequirement({
+            type: 'dictionaryMedia',
+            dictionary,
+            path
+        });
+        return null;
+    }
+}
diff --git a/ext/js/templates/template-renderer.js b/ext/js/templates/template-renderer.js
index f9fbdeb5..02471c97 100644
--- a/ext/js/templates/template-renderer.js
+++ b/ext/js/templates/template-renderer.js
@@ -19,12 +19,14 @@
  * DictionaryDataUtil
  * Handlebars
  * StructuredContentGenerator
+ * TemplateRendererMediaProvider
  */
 
 class TemplateRenderer {
     constructor(japaneseUtil, cssStyleApplier) {
         this._japaneseUtil = japaneseUtil;
         this._cssStyleApplier = cssStyleApplier;
+        this._mediaProvider = new TemplateRendererMediaProvider();
         this._cache = new Map();
         this._cacheMaxSize = 5;
         this._helpersRegistered = false;
@@ -94,6 +96,7 @@ class TemplateRenderer {
         try {
             this._stateStack = [new Map()];
             this._requirements = requirements;
+            this._mediaProvider.requirements = requirements;
             this._cleanupCallbacks = cleanupCallbacks;
             const result = instance(data).trim();
             return {result, requirements};
@@ -101,6 +104,7 @@ class TemplateRenderer {
             for (const callback of cleanupCallbacks) { callback(); }
             this._stateStack = null;
             this._requirements = null;
+            this._mediaProvider.requirements = null;
             this._cleanupCallbacks = null;
         }
     }
@@ -162,7 +166,9 @@ class TemplateRenderer {
             ['join',             this._join.bind(this)],
             ['concat',           this._concat.bind(this)],
             ['pitchCategories',  this._pitchCategories.bind(this)],
-            ['formatGlossary',   this._formatGlossary.bind(this)]
+            ['formatGlossary',   this._formatGlossary.bind(this)],
+            ['hasMedia',         this._hasMedia.bind(this)],
+            ['getMedia',         this._getMedia.bind(this)]
         ];
 
         for (const [name, helper] of helpers) {
@@ -563,33 +569,13 @@ class TemplateRenderer {
         parentNode.replaceChild(fragment, textNode);
     }
 
-    _getDictionaryMedia(data, dictionary, path) {
-        const {media} = data;
-        if (typeof media === 'object' && media !== null && Object.prototype.hasOwnProperty.call(media, 'dictionaryMedia')) {
-            const {dictionaryMedia} = media;
-            if (typeof dictionaryMedia === 'object' && dictionaryMedia !== null && Object.prototype.hasOwnProperty.call(dictionaryMedia, dictionary)) {
-                const dictionaryMedia2 = dictionaryMedia[dictionary];
-                if (Object.prototype.hasOwnProperty.call(dictionaryMedia2, path)) {
-                    return dictionaryMedia2[path];
-                }
-            }
-        }
-        return null;
-    }
-
     _createStructuredContentGenerator(data) {
         const mediaLoader = {
             loadMedia: async (path, dictionary, onLoad, onUnload) => {
-                const imageUrl = this._getDictionaryMedia(data, dictionary, path);
+                const imageUrl = this._mediaProvider.getMedia(data, ['dictionaryMedia', path], {dictionary, format: 'fileName', default: null});
                 if (imageUrl !== null) {
                     onLoad(imageUrl);
                     this._cleanupCallbacks.push(() => onUnload(true));
-                } else {
-                    this._requirements.push({
-                        type: 'dictionaryMedia',
-                        dictionary,
-                        path
-                    });
                 }
             }
         };
@@ -619,4 +605,16 @@ class TemplateRenderer {
         const node = structuredContentGenerator.createStructuredContent(content.content, dictionary);
         return node !== null ? this._getHtml(node) : '';
     }
+
+    _hasMedia(context, ...args) {
+        const ii = args.length - 1;
+        const options = args[ii];
+        return this._mediaProvider.hasMedia(options.data.root, args.slice(0, ii), options.hash);
+    }
+
+    _getMedia(context, ...args) {
+        const ii = args.length - 1;
+        const options = args[ii];
+        return this._mediaProvider.getMedia(options.data.root, args.slice(0, ii), options.hash);
+    }
 }