From e88d63fc6d251bc298eb721fee1cbb9f5f4b752e Mon Sep 17 00:00:00 2001 From: toasted-nutbread Date: Tue, 6 Jul 2021 19:43:53 -0400 Subject: 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 --- ext/js/data/anki-note-builder.js | 126 +++++++++++++++++++-- ext/js/data/anki-note-data-creator.js | 40 ++----- ext/js/display/display-anki.js | 95 +++------------- .../templates/template-renderer-media-provider.js | 116 +++++++++++++++++++ ext/js/templates/template-renderer.js | 42 ++++--- 5 files changed, 277 insertions(+), 142 deletions(-) create mode 100644 ext/js/templates/template-renderer-media-provider.js (limited to 'ext/js') diff --git a/ext/js/data/anki-note-builder.js b/ext/js/data/anki-note-builder.js index 6077eec1..c69d6741 100644 --- a/ext/js/data/anki-note-builder.js +++ b/ext/js/data/anki-note-builder.js @@ -37,12 +37,13 @@ class AnkiNoteBuilder { modelName, fields, tags=[], - injectedMedia=null, + requirements=[], checkForDuplicates=true, duplicateScope='collection', resultOutputMode='split', glossaryLayoutMode='default', - compactTags=false + compactTags=false, + mediaOptions=null }) { let duplicateScopeDeckName = null; let duplicateScopeCheckChildren = false; @@ -52,7 +53,19 @@ class AnkiNoteBuilder { duplicateScopeCheckChildren = true; } - const commonData = this._createData(dictionaryEntry, mode, context, resultOutputMode, glossaryLayoutMode, compactTags, injectedMedia); + const allErrors = []; + let media; + if (requirements.length > 0 && mediaOptions !== null) { + let errors; + ({media, errors} = await this._injectMedia(dictionaryEntry, requirements, mediaOptions)); + for (const error of errors) { + allErrors.push(deserializeError(error)); + } + } else { + media = {}; + } + + const commonData = this._createData(dictionaryEntry, mode, context, resultOutputMode, glossaryLayoutMode, compactTags, media); const formattedFieldValuePromises = []; for (const [, fieldValue] of fields) { const formattedFieldValuePromise = this._formatField(fieldValue, commonData, template); @@ -60,15 +73,14 @@ class AnkiNoteBuilder { } const formattedFieldValues = await Promise.all(formattedFieldValuePromises); - const errors = []; const uniqueRequirements = new Map(); const noteFields = {}; for (let i = 0, ii = fields.length; i < ii; ++i) { const fieldName = fields[i][0]; - const {value, errors: fieldErrors, requirements} = formattedFieldValues[i]; + const {value, errors: fieldErrors, requirements: fieldRequirements} = formattedFieldValues[i]; noteFields[fieldName] = value; - errors.push(...fieldErrors); - for (const requirement of requirements) { + allErrors.push(...fieldErrors); + for (const requirement of fieldRequirements) { const key = JSON.stringify(requirement); if (uniqueRequirements.has(key)) { continue; } uniqueRequirements.set(key, requirement); @@ -89,7 +101,7 @@ class AnkiNoteBuilder { } } }; - return {note, errors, requirements: [...uniqueRequirements.values()]}; + return {note, errors: allErrors, requirements: [...uniqueRequirements.values()]}; } async getRenderingData({ @@ -99,16 +111,42 @@ class AnkiNoteBuilder { resultOutputMode='split', glossaryLayoutMode='default', compactTags=false, - injectedMedia=null, marker=null }) { - const commonData = this._createData(dictionaryEntry, mode, context, resultOutputMode, glossaryLayoutMode, compactTags, injectedMedia); + const commonData = this._createData(dictionaryEntry, mode, context, resultOutputMode, glossaryLayoutMode, compactTags, {}); return await this._templateRenderer.getModifiedData({marker, commonData}, 'ankiNote'); } + getDictionaryEntryDetailsForNote(dictionaryEntry) { + const {type} = dictionaryEntry; + if (type === 'kanji') { + const {character} = dictionaryEntry; + return {type, character}; + } + + const {headwords} = dictionaryEntry; + let bestIndex = -1; + for (let i = 0, ii = headwords.length; i < ii; ++i) { + const {term, reading, sources} = headwords[i]; + for (const {deinflectedText} of sources) { + if (term === deinflectedText) { + bestIndex = i; + i = ii; + break; + } else if (reading === deinflectedText && bestIndex < 0) { + bestIndex = i; + break; + } + } + } + + const {term, reading} = headwords[Math.max(0, bestIndex)]; + return {type, term, reading}; + } + // Private - _createData(dictionaryEntry, mode, context, resultOutputMode, glossaryLayoutMode, compactTags, injectedMedia) { + _createData(dictionaryEntry, mode, context, resultOutputMode, glossaryLayoutMode, compactTags, media) { return { dictionaryEntry, mode, @@ -116,7 +154,7 @@ class AnkiNoteBuilder { resultOutputMode, glossaryLayoutMode, compactTags, - injectedMedia + media }; } @@ -236,4 +274,68 @@ class AnkiNoteBuilder { } } } + + async _injectMedia(dictionaryEntry, requirements, mediaOptions) { + const timestamp = Date.now(); + + // Parse requirements + let injectAudio = false; + let injectScreenshot = false; + let injectClipboardImage = false; + let injectClipboardText = false; + const injectDictionaryMedia = []; + for (const requirement of requirements) { + const {type} = requirement; + switch (type) { + case 'audio': injectAudio = true; break; + case 'screenshot': injectScreenshot = true; break; + case 'clipboardImage': injectClipboardImage = true; break; + case 'clipboardText': injectClipboardText = true; break; + case 'dictionaryMedia': injectDictionaryMedia.push(requirement); break; + } + } + + // Generate request data + const dictionaryEntryDetails = this.getDictionaryEntryDetailsForNote(dictionaryEntry); + let audioDetails = null; + let screenshotDetails = null; + const clipboardDetails = {image: injectClipboardImage, text: injectClipboardText}; + if (injectAudio && dictionaryEntryDetails.type !== 'kanji') { + const audioOptions = mediaOptions.audio; + if (typeof audioOptions === 'object' && audioOptions !== null) { + const {sources, preferredAudioIndex} = audioOptions; + audioDetails = {sources, preferredAudioIndex}; + } + } + if (injectScreenshot) { + const screenshotOptions = mediaOptions.screenshot; + if (typeof screenshotOptions === 'object' && screenshotOptions !== null) { + const {format, quality, contentOrigin: {tabId, frameId}} = screenshotOptions; + if (typeof tabId === 'number' && typeof frameId === 'number') { + screenshotDetails = {tabId, frameId, format, quality}; + } + } + } + + // Inject media + // TODO : injectDictionaryMedia + const {result: {audioFileName, screenshotFileName, clipboardImageFileName, clipboardText}, errors} = await yomichan.api.injectAnkiNoteMedia( + timestamp, + dictionaryEntryDetails, + audioDetails, + screenshotDetails, + clipboardDetails + ); + + // Format results + const dictionaryMedia = {}; // TODO + const media = { + audio: (typeof audioFileName === 'string' ? {fileName: audioFileName} : null), + screenshot: (typeof screenshotFileName === 'string' ? {fileName: screenshotFileName} : null), + clipboardImage: (typeof clipboardImageFileName === 'string' ? {fileName: clipboardImageFileName} : null), + clipboardText: (typeof clipboardText === 'string' ? {text: clipboardText} : null), + dictionaryMedia + }; + return {media, errors}; + } } diff --git a/ext/js/data/anki-note-data-creator.js b/ext/js/data/anki-note-data-creator.js index 6a6bfd36..3622e837 100644 --- a/ext/js/data/anki-note-data-creator.js +++ b/ext/js/data/anki-note-data-creator.js @@ -44,15 +44,16 @@ class AnkiNoteDataCreator { glossaryLayoutMode, compactTags, context, - injectedMedia=null + media }) { const self = this; - const definition = this.createCachedValue(this._getDefinition.bind(this, dictionaryEntry, injectedMedia, context, resultOutputMode)); + const definition = this.createCachedValue(this._getDefinition.bind(this, dictionaryEntry, context, resultOutputMode)); const uniqueExpressions = this.createCachedValue(this._getUniqueExpressions.bind(this, dictionaryEntry)); const uniqueReadings = this.createCachedValue(this._getUniqueReadings.bind(this, dictionaryEntry)); const context2 = this.createCachedValue(this._getPublicContext.bind(this, context)); const pitches = this.createCachedValue(this._getPitches.bind(this, dictionaryEntry)); const pitchCount = this.createCachedValue(this._getPitchCount.bind(this, pitches)); + if (typeof media !== 'object' || media === null || Array.isArray(media)) { media = {}; } const result = { marker, get definition() { return self.getCachedValue(definition); }, @@ -68,7 +69,8 @@ class AnkiNoteDataCreator { get uniqueReadings() { return self.getCachedValue(uniqueReadings); }, get pitches() { return self.getCachedValue(pitches); }, get pitchCount() { return self.getCachedValue(pitchCount); }, - get context() { return self.getCachedValue(context2); } + get context() { return self.getCachedValue(context2); }, + media }; Object.defineProperty(result, 'dictionaryEntry', { configurable: false, @@ -178,29 +180,22 @@ class AnkiNoteDataCreator { return pitches.reduce((i, v) => i + v.pitches.length, 0); } - _getDefinition(dictionaryEntry, injectedMedia, context, resultOutputMode) { + _getDefinition(dictionaryEntry, context, resultOutputMode) { switch (dictionaryEntry.type) { case 'term': - return this._getTermDefinition(dictionaryEntry, injectedMedia, context, resultOutputMode); + return this._getTermDefinition(dictionaryEntry, context, resultOutputMode); case 'kanji': - return this._getKanjiDefinition(dictionaryEntry, injectedMedia, context); + return this._getKanjiDefinition(dictionaryEntry, context); default: return {}; } } - _getKanjiDefinition(dictionaryEntry, injectedMedia, context) { + _getKanjiDefinition(dictionaryEntry, context) { const self = this; const {character, dictionary, onyomi, kunyomi, definitions} = dictionaryEntry; - const { - screenshotFileName=null, - clipboardImageFileName=null, - clipboardText=null, - audioFileName=null - } = this._asObject(injectedMedia); - let {url} = this._asObject(context); if (typeof url !== 'string') { url = ''; } @@ -219,10 +214,6 @@ class AnkiNoteDataCreator { get tags() { return self.getCachedValue(tags); }, get stats() { return self.getCachedValue(stats); }, get frequencies() { return self.getCachedValue(frequencies); }, - screenshotFileName, - clipboardImageFileName, - clipboardText, - audioFileName, url, get cloze() { return self.getCachedValue(cloze); } }; @@ -265,7 +256,7 @@ class AnkiNoteDataCreator { return results; } - _getTermDefinition(dictionaryEntry, injectedMedia, context, resultOutputMode) { + _getTermDefinition(dictionaryEntry, context, resultOutputMode) { const self = this; let type = 'term'; @@ -276,13 +267,6 @@ class AnkiNoteDataCreator { const {inflections, score, dictionaryIndex, dictionaryPriority, sourceTermExactMatchCount, definitions} = dictionaryEntry; - const { - screenshotFileName=null, - clipboardImageFileName=null, - clipboardText=null, - audioFileName=null - } = this._asObject(injectedMedia); - let {url} = this._asObject(context); if (typeof url !== 'string') { url = ''; } @@ -331,10 +315,6 @@ class AnkiNoteDataCreator { get frequencies() { return self.getCachedValue(frequencies); }, get pitches() { return self.getCachedValue(pitches); }, sourceTermExactMatchCount, - screenshotFileName, - clipboardImageFileName, - clipboardText, - audioFileName, url, get cloze() { return self.getCachedValue(cloze); }, get furiganaSegments() { return self.getCachedValue(furiganaSegments); } diff --git a/ext/js/display/display-anki.js b/ext/js/display/display-anki.js index b9fbb2bc..f5456ebb 100644 --- a/ext/js/display/display-anki.js +++ b/ext/js/display/display-anki.js @@ -100,7 +100,6 @@ class DisplayAnki { resultOutputMode: this.resultOutputMode, glossaryLayoutMode: this._glossaryLayoutMode, compactTags: this._compactTags, - injectedMedia: null, marker: 'test' }); } catch (e) { @@ -119,7 +118,7 @@ class DisplayAnki { let errors; let requirements; try { - ({note: note, errors, requirements} = await this._createNote(dictionaryEntry, mode, false, [])); + ({note: note, errors, requirements} = await this._createNote(dictionaryEntry, mode, [])); } catch (e) { errors = [e]; } @@ -237,33 +236,6 @@ class DisplayAnki { }; } - _getDictionaryEntryDetailsForNote(dictionaryEntry) { - const {type} = dictionaryEntry; - if (type === 'kanji') { - const {character} = dictionaryEntry; - return {type, character}; - } - - const {headwords} = dictionaryEntry; - let bestIndex = -1; - for (let i = 0, ii = headwords.length; i < ii; ++i) { - const {term, reading, sources} = headwords[i]; - for (const {deinflectedText} of sources) { - if (term === deinflectedText) { - bestIndex = i; - i = ii; - break; - } else if (reading === deinflectedText && bestIndex < 0) { - bestIndex = i; - break; - } - } - } - - const {term, reading} = headwords[Math.max(0, bestIndex)]; - return {type, term, reading}; - } - async _updateDictionaryEntryDetails() { const {dictionaryEntries} = this._display; const token = {}; @@ -390,7 +362,7 @@ class DisplayAnki { const progressIndicatorVisible = this._display.progressIndicatorVisible; const overrideToken = progressIndicatorVisible.setOverride(true); try { - const {note, errors, requirements: outputRequirements} = await this._createNote(dictionaryEntry, mode, true, requirements); + const {note, errors, requirements: outputRequirements} = await this._createNote(dictionaryEntry, mode, requirements); allErrors.push(...errors); if (outputRequirements.length > 0) { @@ -494,7 +466,7 @@ class DisplayAnki { const modes = this._dictionaryEntryTypeModeMap.get(type); if (typeof modes === 'undefined') { continue; } for (const mode of modes) { - const notePromise = this._createNote(dictionaryEntry, mode, false, []); + const notePromise = this._createNote(dictionaryEntry, mode, []); notePromises.push(notePromise); noteTargets.push({index: i, mode}); } @@ -544,25 +516,18 @@ class DisplayAnki { return results; } - async _createNote(dictionaryEntry, mode, injectMedia, _requirements) { + async _createNote(dictionaryEntry, mode, requirements) { const context = this._noteContext; const modeOptions = this._modeOptions.get(mode); if (typeof modeOptions === 'undefined') { throw new Error(`Unsupported note type: ${mode}`); } const template = this._ankiFieldTemplates; const {deck: deckName, model: modelName} = modeOptions; const fields = Object.entries(modeOptions.fields); + const contentOrigin = this._display.getContentOrigin(); + const details = this._ankiNoteBuilder.getDictionaryEntryDetailsForNote(dictionaryEntry); + const audioDetails = (details.type === 'term' ? this._display.getAnkiNoteMediaAudioDetails(details.term, details.reading) : null); - const errors = []; - let injectedMedia = null; - if (injectMedia) { - let errors2; - ({result: injectedMedia, errors: errors2} = await this._injectAnkiNoteMedia(dictionaryEntry, fields)); - for (const error of errors2) { - errors.push(deserializeError(error)); - } - } - - const {note, errors: createNoteErrors, requirements: outputRequirements} = await this._ankiNoteBuilder.createNote({ + const {note, errors, requirements: outputRequirements} = await this._ankiNoteBuilder.createNote({ dictionaryEntry, mode, context, @@ -576,45 +541,19 @@ class DisplayAnki { resultOutputMode: this.resultOutputMode, glossaryLayoutMode: this._glossaryLayoutMode, compactTags: this._compactTags, - injectedMedia, - errors + mediaOptions: { + audio: audioDetails, + screenshot: { + format: this._screenshotFormat, + quality: this._screenshotQuality, + contentOrigin + } + }, + requirements }); - errors.push(...createNoteErrors); return {note, errors, requirements: outputRequirements}; } - async _injectAnkiNoteMedia(dictionaryEntry, fields) { - const timestamp = Date.now(); - - const dictionaryEntryDetails = this._getDictionaryEntryDetailsForNote(dictionaryEntry); - - const audioDetails = ( - dictionaryEntryDetails.type !== 'kanji' && AnkiUtil.fieldsObjectContainsMarker(fields, 'audio') ? - this._display.getAnkiNoteMediaAudioDetails(dictionaryEntryDetails.term, dictionaryEntryDetails.reading) : - null - ); - - const {tabId, frameId} = this._display.getContentOrigin(); - const screenshotDetails = ( - AnkiUtil.fieldsObjectContainsMarker(fields, 'screenshot') && typeof tabId === 'number' ? - {tabId, frameId, format: this._screenshotFormat, quality: this._screenshotQuality} : - null - ); - - const clipboardDetails = { - image: AnkiUtil.fieldsObjectContainsMarker(fields, 'clipboard-image'), - text: AnkiUtil.fieldsObjectContainsMarker(fields, 'clipboard-text') - }; - - return await yomichan.api.injectAnkiNoteMedia( - timestamp, - dictionaryEntryDetails, - audioDetails, - screenshotDetails, - clipboardDetails - ); - } - _getModes(isTerms) { return isTerms ? ['term-kanji', 'term-kana'] : ['kanji']; } 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 . + */ + +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); + } } -- cgit v1.2.3