diff options
Diffstat (limited to 'ext/js/display')
| -rw-r--r-- | ext/js/display/display-content-manager.js | 97 | ||||
| -rw-r--r-- | ext/js/display/display-generator.js | 6 | ||||
| -rw-r--r-- | ext/js/display/display.js | 8 | ||||
| -rw-r--r-- | ext/js/display/sandbox/structured-content-generator.js | 8 |
4 files changed, 108 insertions, 11 deletions
diff --git a/ext/js/display/display-content-manager.js b/ext/js/display/display-content-manager.js new file mode 100644 index 00000000..a0dd7dd6 --- /dev/null +++ b/ext/js/display/display-content-manager.js @@ -0,0 +1,97 @@ +/* + * Copyright (C) 2020-2022 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/>. + */ + +/* global + * StringUtil + */ + +class DisplayContentManager { + constructor() { + this._token = {}; + this._mediaCache = new Map(); + this._loadMediaData = []; + } + + async loadMedia(path, dictionary, onLoad, onUnload) { + const token = this._token; + const data = {onUnload, loaded: false}; + + this._loadMediaData.push(data); + + const media = await this.getMedia(path, dictionary); + if (token !== this._token) { return; } + + onLoad(media.url); + data.loaded = true; + } + + unloadAll() { + for (const {onUnload, loaded} of this._loadMediaData) { + if (typeof onUnload === 'function') { + onUnload(loaded); + } + } + this._loadMediaData = []; + + for (const map of this._mediaCache.values()) { + for (const {url} of map.values()) { + if (url !== null) { + URL.revokeObjectURL(url); + } + } + } + this._mediaCache.clear(); + + this._token = {}; + } + + async getMedia(path, dictionary) { + let cachedData; + let dictionaryCache = this._mediaCache.get(dictionary); + if (typeof dictionaryCache !== 'undefined') { + cachedData = dictionaryCache.get(path); + } else { + dictionaryCache = new Map(); + this._mediaCache.set(dictionary, dictionaryCache); + } + + if (typeof cachedData === 'undefined') { + cachedData = { + promise: null, + data: null, + url: null + }; + dictionaryCache.set(path, cachedData); + cachedData.promise = this._getMediaData(path, dictionary, cachedData); + } + + return cachedData.promise; + } + + async _getMediaData(path, dictionary, cachedData) { + const token = this._token; + const data = (await yomichan.api.getMedia([{path, dictionary}]))[0]; + if (token === this._token && data !== null) { + const buffer = StringUtil.base64ToArrayBuffer(data.content); + const blob = new Blob([buffer], {type: data.mediaType}); + const url = URL.createObjectURL(blob); + cachedData.data = data; + cachedData.url = url; + } + return cachedData; + } +} diff --git a/ext/js/display/display-generator.js b/ext/js/display/display-generator.js index a28a00a2..1f485a4f 100644 --- a/ext/js/display/display-generator.js +++ b/ext/js/display/display-generator.js @@ -23,12 +23,12 @@ */ class DisplayGenerator { - constructor({japaneseUtil, mediaLoader, hotkeyHelpController=null}) { + constructor({japaneseUtil, contentManager, hotkeyHelpController=null}) { this._japaneseUtil = japaneseUtil; - this._mediaLoader = mediaLoader; + this._contentManager = contentManager; this._hotkeyHelpController = hotkeyHelpController; this._templates = null; - this._structuredContentGenerator = new StructuredContentGenerator(this._mediaLoader, document); + this._structuredContentGenerator = new StructuredContentGenerator(this._contentManager, document); this._pronunciationGenerator = new PronunciationGenerator(japaneseUtil); } diff --git a/ext/js/display/display.js b/ext/js/display/display.js index 5bebe0ed..a89008b4 100644 --- a/ext/js/display/display.js +++ b/ext/js/display/display.js @@ -16,6 +16,7 @@ */ /* global + * DisplayContentManager * DisplayGenerator * DisplayHistory * DisplayNotification @@ -24,7 +25,6 @@ * FrameEndpoint * Frontend * HotkeyHelpController - * MediaLoader * OptionToggleHotkeyHandler * PopupFactory * PopupMenu @@ -52,11 +52,11 @@ class Display extends EventDispatcher { this._styleNode = null; this._eventListeners = new EventListenerCollection(); this._setContentToken = null; - this._mediaLoader = new MediaLoader(); + this._contentManager = new DisplayContentManager(); this._hotkeyHelpController = new HotkeyHelpController(); this._displayGenerator = new DisplayGenerator({ japaneseUtil, - mediaLoader: this._mediaLoader, + contentManager: this._contentManager, hotkeyHelpController: this._hotkeyHelpController }); this._messageHandlers = new Map(); @@ -543,7 +543,7 @@ class Display extends EventDispatcher { this._closePopups(); this._closeAllPopupMenus(); this._eventListeners.removeAllEventListeners(); - this._mediaLoader.unloadAll(); + this._contentManager.unloadAll(); this._hideTagNotification(false); this._triggerContentClear(); this._dictionaryEntries = []; diff --git a/ext/js/display/sandbox/structured-content-generator.js b/ext/js/display/sandbox/structured-content-generator.js index e45713e7..799da586 100644 --- a/ext/js/display/sandbox/structured-content-generator.js +++ b/ext/js/display/sandbox/structured-content-generator.js @@ -16,8 +16,8 @@ */ class StructuredContentGenerator { - constructor(mediaLoader, document) { - this._mediaLoader = mediaLoader; + constructor(contentManager, document) { + this._contentManager = contentManager; this._document = document; } @@ -141,8 +141,8 @@ class StructuredContentGenerator { aspectRatioSizer.style.paddingTop = `${invAspectRatio * 100.0}%`; - if (this._mediaLoader !== null) { - this._mediaLoader.loadMedia( + if (this._contentManager !== null) { + this._contentManager.loadMedia( path, dictionary, (url) => this._setImageData(node, image, imageBackground, url, false), |