Merge pull request #446 from toasted-nutbread/dictionary-images

Dictionary images
This commit is contained in:
toasted-nutbread 2020-04-19 11:36:05 -04:00 committed by GitHub
commit a6344f635d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
20 changed files with 707 additions and 17 deletions

View File

@ -36,6 +36,7 @@
<script src="/bg/js/handlebars.js"></script> <script src="/bg/js/handlebars.js"></script>
<script src="/bg/js/japanese.js"></script> <script src="/bg/js/japanese.js"></script>
<script src="/bg/js/json-schema.js"></script> <script src="/bg/js/json-schema.js"></script>
<script src="/bg/js/media-utility.js"></script>
<script src="/bg/js/options.js"></script> <script src="/bg/js/options.js"></script>
<script src="/bg/js/profile-conditions.js"></script> <script src="/bg/js/profile-conditions.js"></script>
<script src="/bg/js/request.js"></script> <script src="/bg/js/request.js"></script>

View File

@ -31,8 +31,85 @@
"type": "array", "type": "array",
"description": "Array of definitions for the term/expression.", "description": "Array of definitions for the term/expression.",
"items": { "items": {
"oneOf": [
{
"type": "string", "type": "string",
"description": "Single definition for the term/expression." "description": "Single definition for the term/expression."
},
{
"type": "object",
"description": "Single detailed definition for the term/expression.",
"required": [
"type"
],
"properties": {
"type": {
"type": "string",
"description": "The type of the data for this definition.",
"enum": ["text", "image"]
}
},
"oneOf": [
{
"required": [
"type",
"text"
],
"additionalProperties": false,
"properties": {
"type": {
"type": "string",
"enum": ["text"]
},
"text": {
"type": "string",
"description": "Single definition for the term/expression."
}
}
},
{
"required": [
"type",
"path"
],
"additionalProperties": false,
"properties": {
"type": {
"type": "string",
"enum": ["image"]
},
"path": {
"type": "string",
"description": "Path to the image file in the archive."
},
"width": {
"type": "integer",
"description": "Preferred width of the image.",
"minimum": 1
},
"height": {
"type": "integer",
"description": "Preferred width of the image.",
"minimum": 1
},
"title": {
"type": "string",
"description": "Hover text for the image."
},
"description": {
"type": "string",
"description": "Description of the image."
},
"pixelated": {
"type": "boolean",
"description": "Whether or not the image should appear pixelated at sizes larger than the image's native resolution.",
"default": false
}
}
}
]
}
]
} }
}, },
{ {

View File

@ -111,7 +111,8 @@ class Backend {
['getAnkiModelFieldNames', {handler: this._onApiGetAnkiModelFieldNames.bind(this), async: true}], ['getAnkiModelFieldNames', {handler: this._onApiGetAnkiModelFieldNames.bind(this), async: true}],
['getDictionaryInfo', {handler: this._onApiGetDictionaryInfo.bind(this), async: true}], ['getDictionaryInfo', {handler: this._onApiGetDictionaryInfo.bind(this), async: true}],
['getDictionaryCounts', {handler: this._onApiGetDictionaryCounts.bind(this), async: true}], ['getDictionaryCounts', {handler: this._onApiGetDictionaryCounts.bind(this), async: true}],
['purgeDatabase', {handler: this._onApiPurgeDatabase.bind(this), async: true}] ['purgeDatabase', {handler: this._onApiPurgeDatabase.bind(this), async: true}],
['getMedia', {handler: this._onApiGetMedia.bind(this), async: true}]
]); ]);
this._commandHandlers = new Map([ this._commandHandlers = new Map([
@ -762,6 +763,10 @@ class Backend {
return await this.translator.purgeDatabase(); return await this.translator.purgeDatabase();
} }
async _onApiGetMedia({targets}) {
return await this.database.getMedia(targets);
}
// Command handlers // Command handlers
async _onCommandSearch(params) { async _onCommandSearch(params) {

View File

@ -33,7 +33,7 @@ class Database {
} }
try { try {
this.db = await Database._open('dict', 5, (db, transaction, oldVersion) => { this.db = await Database._open('dict', 6, (db, transaction, oldVersion) => {
Database._upgrade(db, transaction, oldVersion, [ Database._upgrade(db, transaction, oldVersion, [
{ {
version: 2, version: 2,
@ -90,6 +90,15 @@ class Database {
indices: ['dictionary', 'expression', 'reading', 'sequence', 'expressionReverse', 'readingReverse'] indices: ['dictionary', 'expression', 'reading', 'sequence', 'expressionReverse', 'readingReverse']
} }
} }
},
{
version: 6,
stores: {
media: {
primaryKey: {keyPath: 'id', autoIncrement: true},
indices: ['dictionary', 'path']
}
}
} }
]); ]);
}); });
@ -268,6 +277,34 @@ class Database {
return result; return result;
} }
async getMedia(targets) {
this._validate();
const count = targets.length;
const promises = [];
const results = new Array(count).fill(null);
const createResult = Database._createMedia;
const processRow = (row, [index, dictionaryName]) => {
if (row.dictionary === dictionaryName) {
results[index] = createResult(row, index);
}
};
const transaction = this.db.transaction(['media'], 'readonly');
const objectStore = transaction.objectStore('media');
const index = objectStore.index('path');
for (let i = 0; i < count; ++i) {
const {path, dictionaryName} = targets[i];
const only = IDBKeyRange.only(path);
promises.push(Database._getAll(index, only, [i, dictionaryName], processRow));
}
await Promise.all(promises);
return results;
}
async getDictionaryInfo() { async getDictionaryInfo() {
this._validate(); this._validate();
@ -432,6 +469,10 @@ class Database {
return {character, mode, data, dictionary, index}; return {character, mode, data, dictionary, index};
} }
static _createMedia(row, index) {
return Object.assign({}, row, {index});
}
static _getAll(dbIndex, query, context, processRow) { static _getAll(dbIndex, query, context, processRow) {
const fn = typeof dbIndex.getAll === 'function' ? Database._getAllFast : Database._getAllUsingCursor; const fn = typeof dbIndex.getAll === 'function' ? Database._getAllFast : Database._getAllUsingCursor;
return fn(dbIndex, query, context, processRow); return fn(dbIndex, query, context, processRow);

View File

@ -18,6 +18,7 @@
/* global /* global
* JSZip * JSZip
* JsonSchema * JsonSchema
* mediaUtility
* requestJson * requestJson
*/ */
@ -148,6 +149,22 @@ class DictionaryImporter {
} }
} }
// Extended data support
const extendedDataContext = {
archive,
media: new Map()
};
for (const entry of termList) {
const glossaryList = entry.glossary;
for (let i = 0, ii = glossaryList.length; i < ii; ++i) {
const glossary = glossaryList[i];
if (typeof glossary !== 'object' || glossary === null) { continue; }
glossaryList[i] = await this._formatDictionaryTermGlossaryObject(glossary, extendedDataContext, entry);
}
}
const media = [...extendedDataContext.media.values()];
// Add dictionary // Add dictionary
const summary = this._createSummary(dictionaryTitle, version, index, {prefixWildcardsSupported}); const summary = this._createSummary(dictionaryTitle, version, index, {prefixWildcardsSupported});
@ -188,6 +205,7 @@ class DictionaryImporter {
await bulkAdd('kanji', kanjiList); await bulkAdd('kanji', kanjiList);
await bulkAdd('kanjiMeta', kanjiMetaList); await bulkAdd('kanjiMeta', kanjiMetaList);
await bulkAdd('tagMeta', tagList); await bulkAdd('tagMeta', tagList);
await bulkAdd('media', media);
return {result: summary, errors}; return {result: summary, errors};
} }
@ -275,4 +293,76 @@ class DictionaryImporter {
return [termBank, termMetaBank, kanjiBank, kanjiMetaBank, tagBank]; return [termBank, termMetaBank, kanjiBank, kanjiMetaBank, tagBank];
} }
async _formatDictionaryTermGlossaryObject(data, context, entry) {
switch (data.type) {
case 'text':
return data.text;
case 'image':
return await this._formatDictionaryTermGlossaryImage(data, context, entry);
default:
throw new Error(`Unhandled data type: ${data.type}`);
}
}
async _formatDictionaryTermGlossaryImage(data, context, entry) {
const dictionary = entry.dictionary;
const {path, width: preferredWidth, height: preferredHeight, title, description, pixelated} = data;
if (context.media.has(path)) {
// Already exists
return data;
}
let errorSource = entry.expression;
if (entry.reading.length > 0) {
errorSource += ` (${entry.reading});`;
}
const file = context.archive.file(path);
if (file === null) {
throw new Error(`Could not find image at path ${JSON.stringify(path)} for ${errorSource}`);
}
const content = await file.async('base64');
const mediaType = mediaUtility.getImageMediaTypeFromFileName(path);
if (mediaType === null) {
throw new Error(`Could not determine media type for image at path ${JSON.stringify(path)} for ${errorSource}`);
}
let image;
try {
image = await mediaUtility.loadImageBase64(mediaType, content);
} catch (e) {
throw new Error(`Could not load image at path ${JSON.stringify(path)} for ${errorSource}`);
}
const width = image.naturalWidth;
const height = image.naturalHeight;
// Create image data
const mediaData = {
dictionary,
path,
mediaType,
width,
height,
content
};
context.media.set(path, mediaData);
// Create new data
const newData = {
type: 'image',
path,
width,
height
};
if (typeof preferredWidth === 'number') { newData.preferredWidth = preferredWidth; }
if (typeof preferredHeight === 'number') { newData.preferredHeight = preferredHeight; }
if (typeof title === 'string') { newData.title = title; }
if (typeof description === 'string') { newData.description = description; }
if (typeof pixelated === 'boolean') { newData.pixelated = pixelated; }
return newData;
}
} }

View File

@ -0,0 +1,98 @@
/*
* Copyright (C) 2020 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/>.
*/
/**
* mediaUtility is an object containing helper methods related to media processing.
*/
const mediaUtility = (() => {
/**
* Gets the file extension of a file path. URL search queries and hash
* fragments are not handled.
* @param path The path to the file.
* @returns The file extension, including the '.', or an empty string
* if there is no file extension.
*/
function getFileNameExtension(path) {
const match = /\.[^./\\]*$/.exec(path);
return match !== null ? match[0] : '';
}
/**
* Gets an image file's media type using a file path.
* @param path The path to the file.
* @returns The media type string if it can be determined from the file path,
* otherwise null.
*/
function getImageMediaTypeFromFileName(path) {
switch (getFileNameExtension(path).toLowerCase()) {
case '.apng':
return 'image/apng';
case '.bmp':
return 'image/bmp';
case '.gif':
return 'image/gif';
case '.ico':
case '.cur':
return 'image/x-icon';
case '.jpg':
case '.jpeg':
case '.jfif':
case '.pjpeg':
case '.pjp':
return 'image/jpeg';
case '.png':
return 'image/png';
case '.svg':
return 'image/svg+xml';
case '.tif':
case '.tiff':
return 'image/tiff';
case '.webp':
return 'image/webp';
default:
return null;
}
}
/**
* Attempts to load an image using a base64 encoded content and a media type.
* @param mediaType The media type for the image content.
* @param content The binary content for the image, encoded in base64.
* @returns A Promise which resolves with an HTMLImageElement instance on
* successful load, otherwise an error is thrown.
*/
function loadImageBase64(mediaType, content) {
return new Promise((resolve, reject) => {
const image = new Image();
const eventListeners = new EventListenerCollection();
eventListeners.addEventListener(image, 'load', () => {
eventListeners.removeAllEventListeners();
resolve(image);
}, false);
eventListeners.addEventListener(image, 'error', () => {
eventListeners.removeAllEventListeners();
reject(new Error('Image failed to load'));
}, false);
image.src = `data:${mediaType};base64,${content}`;
});
}
return {
getImageMediaTypeFromFileName,
loadImageBase64
};
})();

View File

@ -85,6 +85,7 @@
<script src="/mixed/js/display-context.js"></script> <script src="/mixed/js/display-context.js"></script>
<script src="/mixed/js/display.js"></script> <script src="/mixed/js/display.js"></script>
<script src="/mixed/js/display-generator.js"></script> <script src="/mixed/js/display-generator.js"></script>
<script src="/mixed/js/media-loader.js"></script>
<script src="/mixed/js/scroll.js"></script> <script src="/mixed/js/scroll.js"></script>
<script src="/mixed/js/text-scanner.js"></script> <script src="/mixed/js/text-scanner.js"></script>
<script src="/mixed/js/template-handler.js"></script> <script src="/mixed/js/template-handler.js"></script>

View File

@ -51,6 +51,7 @@
<script src="/mixed/js/display-context.js"></script> <script src="/mixed/js/display-context.js"></script>
<script src="/mixed/js/display.js"></script> <script src="/mixed/js/display.js"></script>
<script src="/mixed/js/display-generator.js"></script> <script src="/mixed/js/display-generator.js"></script>
<script src="/mixed/js/media-loader.js"></script>
<script src="/mixed/js/scroll.js"></script> <script src="/mixed/js/scroll.js"></script>
<script src="/mixed/js/template-handler.js"></script> <script src="/mixed/js/template-handler.js"></script>

View File

@ -94,3 +94,10 @@ h2 { border-bottom-color: #2f2f2f; }
#term-pitch-accent-graph-dot-downstep>circle:last-of-type { #term-pitch-accent-graph-dot-downstep>circle:last-of-type {
fill: #ffffff; fill: #ffffff;
} }
.term-glossary-image-container {
background-color: #2f2f2f;
}
.term-glossary-image-container-overlay {
color: #888888;
}

View File

@ -94,3 +94,10 @@ h2 { border-bottom-color: #eeeeee; }
#term-pitch-accent-graph-dot-downstep>circle:last-of-type { #term-pitch-accent-graph-dot-downstep>circle:last-of-type {
fill: #000000; fill: #000000;
} }
.term-glossary-image-container {
background-color: #eeeeee;
}
.term-glossary-image-container-overlay {
color: #777777;
}

View File

@ -611,6 +611,121 @@ button.action-button {
stroke-width: 5; stroke-width: 5;
} }
.term-glossary-image-container {
display: inline-block;
white-space: nowrap;
max-width: 100%;
position: relative;
vertical-align: top;
line-height: 0;
font-size: 0.07142857em; /* 14px => 1px */
overflow: hidden;
}
.term-glossary-image-link {
cursor: inherit;
color: inherit;
}
.term-glossary-image-link[href]:hover {
cursor: pointer;
}
.term-glossary-image-container-overlay {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
font-size: 14em; /* 1px => 14px; */
line-height: 1.42857143; /* 14px => 20px */
display: table;
table-layout: fixed;
white-space: normal;
}
.term-glossary-item[data-has-image=true][data-image-load-state=load-error] .term-glossary-image-container-overlay:after {
content: "Image failed to load";
display: table-cell;
width: 100%;
height: 100%;
vertical-align: middle;
text-align: center;
padding: 0.25em;
}
.term-glossary-image {
display: inline-block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
vertical-align: top;
object-fit: contain;
border: none;
outline: none;
}
.term-glossary-image:not([src]) {
display: none;
}
.term-glossary-image[data-pixelated=true] {
image-rendering: auto;
image-rendering: -moz-crisp-edges;
image-rendering: -webkit-optimize-contrast;
image-rendering: pixelated;
image-rendering: crisp-edges;
}
.term-glossary-image-aspect-ratio-sizer {
content: "";
display: inline-block;
width: 0;
vertical-align: top;
font-size: 0;
}
.term-glossary-image-link-text:before {
content: "[";
}
.term-glossary-image-link-text:after {
content: "]";
}
:root[data-compact-glossaries=true] .term-glossary-image-container {
display: none;
position: absolute;
left: 0;
top: 100%;
z-index: 1;
}
:root[data-compact-glossaries=true] .entry:nth-last-of-type(1):not(:nth-of-type(1)) .term-glossary-image-container {
bottom: 100%;
top: auto;
}
:root[data-compact-glossaries=true] .term-glossary-image-link {
position: relative;
display: inline-block;
}
:root[data-compact-glossaries=true] .term-glossary-image-link:hover .term-glossary-image-container,
:root[data-compact-glossaries=true] .term-glossary-image-link:focus .term-glossary-image-container {
display: block;
}
:root:not([data-compact-glossaries=true]) .term-glossary-image-link-text {
display: none;
}
:root:not([data-compact-glossaries=true]) .term-glossary-image-description {
display: block;
}
/* /*
* Kanji * Kanji

View File

@ -35,6 +35,7 @@
</li></template> </li></template>
<template id="term-definition-disambiguation-template"><span class="term-definition-disambiguation"></span></template> <template id="term-definition-disambiguation-template"><span class="term-definition-disambiguation"></span></template>
<template id="term-glossary-item-template"><li class="term-glossary-item"><span class="term-glossary-separator"> </span><span class="term-glossary"></span></li></template> <template id="term-glossary-item-template"><li class="term-glossary-item"><span class="term-glossary-separator"> </span><span class="term-glossary"></span></li></template>
<template id="term-glossary-item-image-template"><li class="term-glossary-item" data-has-image="true"><span class="term-glossary-separator"> </span><span class="term-glossary"><a class="term-glossary-image-link" target="_blank" rel="noreferrer noopener"><span class="term-glossary-image-container"><span class="term-glossary-image-aspect-ratio-sizer"></span><img class="term-glossary-image" alt="" /><span class="term-glossary-image-container-overlay"></span></span><span class="term-glossary-image-link-text">Image</span></a> <span class="term-glossary-image-description"></span></span></li></template>
<template id="term-reason-template"><span class="term-reason"></span><span class="term-reason-separator"> </span></template> <template id="term-reason-template"><span class="term-reason"></span><span class="term-reason-separator"> </span></template>
<template id="term-pitch-accent-static-template"><svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <template id="term-pitch-accent-static-template"><svg xmlns="http://www.w3.org/2000/svg" style="display: none;">

View File

@ -140,6 +140,10 @@ function apiPurgeDatabase() {
return _apiInvoke('purgeDatabase'); return _apiInvoke('purgeDatabase');
} }
function apiGetMedia(targets) {
return _apiInvoke('getMedia', {targets});
}
function _apiInvoke(action, params={}) { function _apiInvoke(action, params={}) {
const data = {action, params}; const data = {action, params};
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {

View File

@ -22,7 +22,8 @@
*/ */
class DisplayGenerator { class DisplayGenerator {
constructor() { constructor({mediaLoader}) {
this._mediaLoader = mediaLoader;
this._templateHandler = null; this._templateHandler = null;
this._termPitchAccentStaticTemplateIsSetup = false; this._termPitchAccentStaticTemplateIsSetup = false;
} }
@ -176,16 +177,30 @@ class DisplayGenerator {
const onlyListContainer = node.querySelector('.term-definition-disambiguation-list'); const onlyListContainer = node.querySelector('.term-definition-disambiguation-list');
const glossaryContainer = node.querySelector('.term-glossary-list'); const glossaryContainer = node.querySelector('.term-glossary-list');
node.dataset.dictionary = details.dictionary; const dictionary = details.dictionary;
node.dataset.dictionary = dictionary;
this._appendMultiple(tagListContainer, this._createTag.bind(this), details.definitionTags); this._appendMultiple(tagListContainer, this._createTag.bind(this), details.definitionTags);
this._appendMultiple(onlyListContainer, this._createTermDisambiguation.bind(this), details.only); this._appendMultiple(onlyListContainer, this._createTermDisambiguation.bind(this), details.only);
this._appendMultiple(glossaryContainer, this._createTermGlossaryItem.bind(this), details.glossary); this._appendMultiple(glossaryContainer, this._createTermGlossaryItem.bind(this), details.glossary, dictionary);
return node; return node;
} }
_createTermGlossaryItem(glossary) { _createTermGlossaryItem(glossary, dictionary) {
if (typeof glossary === 'string') {
return this._createTermGlossaryItemText(glossary);
} else if (typeof glossary === 'object' && glossary !== null) {
switch (glossary.type) {
case 'image':
return this._createTermGlossaryItemImage(glossary, dictionary);
}
}
return null;
}
_createTermGlossaryItemText(glossary) {
const node = this._templateHandler.instantiate('term-glossary-item'); const node = this._templateHandler.instantiate('term-glossary-item');
const container = node.querySelector('.term-glossary'); const container = node.querySelector('.term-glossary');
if (container !== null) { if (container !== null) {
@ -194,6 +209,68 @@ class DisplayGenerator {
return node; return node;
} }
_createTermGlossaryItemImage(data, dictionary) {
const {path, width, height, preferredWidth, preferredHeight, title, description, pixelated} = data;
const usedWidth = (
typeof preferredWidth === 'number' ?
preferredWidth :
width
);
const aspectRatio = (
typeof preferredWidth === 'number' &&
typeof preferredHeight === 'number' ?
preferredWidth / preferredHeight :
width / height
);
const node = this._templateHandler.instantiate('term-glossary-item-image');
node.dataset.path = path;
node.dataset.dictionary = dictionary;
node.dataset.imageLoadState = 'not-loaded';
const imageContainer = node.querySelector('.term-glossary-image-container');
imageContainer.style.width = `${usedWidth}em`;
if (typeof title === 'string') {
imageContainer.title = title;
}
const aspectRatioSizer = node.querySelector('.term-glossary-image-aspect-ratio-sizer');
aspectRatioSizer.style.paddingTop = `${aspectRatio * 100.0}%`;
const image = node.querySelector('img.term-glossary-image');
const imageLink = node.querySelector('.term-glossary-image-link');
image.dataset.pixelated = `${pixelated === true}`;
if (this._mediaLoader !== null) {
this._mediaLoader.loadMedia(
path,
dictionary,
(url) => this._setImageData(node, image, imageLink, url, false),
() => this._setImageData(node, image, imageLink, null, true)
);
}
if (typeof description === 'string') {
const container = node.querySelector('.term-glossary-image-description');
this._appendMultilineText(container, description);
}
return node;
}
_setImageData(container, image, imageLink, url, unloaded) {
if (url !== null) {
image.src = url;
imageLink.href = url;
container.dataset.imageLoadState = 'loaded';
} else {
image.removeAttribute('src');
imageLink.removeAttribute('href');
container.dataset.imageLoadState = unloaded ? 'unloaded' : 'load-error';
}
}
_createTermDisambiguation(disambiguation) { _createTermDisambiguation(disambiguation) {
const node = this._templateHandler.instantiate('term-definition-disambiguation'); const node = this._templateHandler.instantiate('term-definition-disambiguation');
node.dataset.term = disambiguation; node.dataset.term = disambiguation;

View File

@ -20,6 +20,7 @@
* DOM * DOM
* DisplayContext * DisplayContext
* DisplayGenerator * DisplayGenerator
* MediaLoader
* WindowScroll * WindowScroll
* apiAudioGetUri * apiAudioGetUri
* apiBroadcastTab * apiBroadcastTab
@ -62,7 +63,8 @@ class Display {
this.clickScanPrevent = false; this.clickScanPrevent = false;
this.setContentToken = null; this.setContentToken = null;
this.displayGenerator = new DisplayGenerator(); this.mediaLoader = new MediaLoader();
this.displayGenerator = new DisplayGenerator({mediaLoader: this.mediaLoader});
this.windowScroll = new WindowScroll(); this.windowScroll = new WindowScroll();
this._onKeyDownHandlers = new Map([ this._onKeyDownHandlers = new Map([
@ -479,6 +481,8 @@ class Display {
const token = {}; // Unique identifier token const token = {}; // Unique identifier token
this.setContentToken = token; this.setContentToken = token;
try { try {
this.mediaLoader.unloadAll();
switch (type) { switch (type) {
case 'terms': case 'terms':
await this.setContentTerms(details.definitions, details.context, token); await this.setContentTerms(details.definitions, details.context, token);

View File

@ -0,0 +1,107 @@
/*
* Copyright (C) 2020 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
* apiGetMedia
*/
class MediaLoader {
constructor() {
this._token = {};
this._mediaCache = new Map();
this._loadMediaData = [];
}
async loadMedia(path, dictionaryName, onLoad, onUnload) {
const token = this.token;
const data = {onUnload, loaded: false};
this._loadMediaData.push(data);
const media = await this.getMedia(path, dictionaryName);
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, dictionaryName) {
let cachedData;
let dictionaryCache = this._mediaCache.get(dictionaryName);
if (typeof dictionaryCache !== 'undefined') {
cachedData = dictionaryCache.get(path);
} else {
dictionaryCache = new Map();
this._mediaCache.set(dictionaryName, dictionaryCache);
}
if (typeof cachedData === 'undefined') {
cachedData = {
promise: null,
data: null,
url: null
};
dictionaryCache.set(path, cachedData);
cachedData.promise = this._getMediaData(path, dictionaryName, cachedData);
}
return cachedData.promise;
}
async _getMediaData(path, dictionaryName, cachedData) {
const token = this._token;
const data = (await apiGetMedia([{path, dictionaryName}]))[0];
if (token === this._token && data !== null) {
const contentArrayBuffer = this._base64ToArrayBuffer(data.content);
const blob = new Blob([contentArrayBuffer], {type: data.mediaType});
const url = URL.createObjectURL(blob);
cachedData.data = data;
cachedData.url = url;
}
return cachedData;
}
_base64ToArrayBuffer(content) {
const binaryContent = window.atob(content);
const length = binaryContent.length;
const array = new Uint8Array(length);
for (let i = 0; i < length; ++i) {
array[i] = binaryContent.charCodeAt(i);
}
return array.buffer;
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 45 B

View File

@ -30,5 +30,6 @@
["打ち込む", "ぶちこむ", "tag1 tag2", "v5", 29, ["definition1a (打ち込む, ぶちこむ)", "definition1b (打ち込む, ぶちこむ)"], 6, "tag3 tag4 tag5"], ["打ち込む", "ぶちこむ", "tag1 tag2", "v5", 29, ["definition1a (打ち込む, ぶちこむ)", "definition1b (打ち込む, ぶちこむ)"], 6, "tag3 tag4 tag5"],
["打ち込む", "ぶちこむ", "tag1 tag2", "v5", 30, ["definition2a (打ち込む, ぶちこむ)", "definition2b (打ち込む, ぶちこむ)"], 6, "tag3 tag4 tag5"], ["打ち込む", "ぶちこむ", "tag1 tag2", "v5", 30, ["definition2a (打ち込む, ぶちこむ)", "definition2b (打ち込む, ぶちこむ)"], 6, "tag3 tag4 tag5"],
["打ち込む", "ぶちこむ", "tag1 tag2", "v5", 31, ["definition3a (打ち込む, ぶちこむ)", "definition3b (打ち込む, ぶちこむ)"], 6, "tag3 tag4 tag5"], ["打ち込む", "ぶちこむ", "tag1 tag2", "v5", 31, ["definition3a (打ち込む, ぶちこむ)", "definition3b (打ち込む, ぶちこむ)"], 6, "tag3 tag4 tag5"],
["打ち込む", "ぶちこむ", "tag1 tag2", "v5", 32, ["definition4a (打ち込む, ぶちこむ)", "definition4b (打ち込む, ぶちこむ)"], 6, "tag3 tag4 tag5"] ["打ち込む", "ぶちこむ", "tag1 tag2", "v5", 32, ["definition4a (打ち込む, ぶちこむ)", "definition4b (打ち込む, ぶちこむ)"], 6, "tag3 tag4 tag5"],
["画像", "がぞう", "tag1 tag2", "", 33, ["definition1a (画像, がぞう)", {"type": "image", "path": "image.gif", "width": 350, "height": 350, "description": "An image", "pixelated": true}], 7, "tag3 tag4 tag5"]
] ]

View File

@ -92,9 +92,56 @@ class XMLHttpRequest {
} }
} }
class Image {
constructor() {
this._src = '';
this._loadCallbacks = [];
}
get src() {
return this._src;
}
set src(value) {
this._src = value;
this._delayTriggerLoad();
}
get naturalWidth() {
return 100;
}
get naturalHeight() {
return 100;
}
addEventListener(eventName, callback) {
if (eventName === 'load') {
this._loadCallbacks.push(callback);
}
}
removeEventListener(eventName, callback) {
if (eventName === 'load') {
const index = this._loadCallbacks.indexOf(callback);
if (index >= 0) {
this._loadCallbacks.splice(index, 1);
}
}
}
async _delayTriggerLoad() {
await Promise.resolve();
for (const callback of this._loadCallbacks) {
callback();
}
}
}
const vm = new VM({ const vm = new VM({
chrome, chrome,
Image,
XMLHttpRequest, XMLHttpRequest,
indexedDB: global.indexedDB, indexedDB: global.indexedDB,
IDBKeyRange: global.IDBKeyRange, IDBKeyRange: global.IDBKeyRange,
@ -106,6 +153,7 @@ vm.execute([
'bg/js/json-schema.js', 'bg/js/json-schema.js',
'bg/js/dictionary.js', 'bg/js/dictionary.js',
'mixed/js/core.js', 'mixed/js/core.js',
'bg/js/media-utility.js',
'bg/js/request.js', 'bg/js/request.js',
'bg/js/dictionary-importer.js', 'bg/js/dictionary-importer.js',
'bg/js/database.js' 'bg/js/database.js'
@ -235,8 +283,8 @@ async function testDatabase1() {
true true
); );
vm.assert.deepStrictEqual(counts, { vm.assert.deepStrictEqual(counts, {
counts: [{kanji: 2, kanjiMeta: 2, terms: 32, termMeta: 12, tagMeta: 14}], counts: [{kanji: 2, kanjiMeta: 2, terms: 33, termMeta: 12, tagMeta: 14}],
total: {kanji: 2, kanjiMeta: 2, terms: 32, termMeta: 12, tagMeta: 14} total: {kanji: 2, kanjiMeta: 2, terms: 33, termMeta: 12, tagMeta: 14}
}); });
// Test find* functions // Test find* functions

View File

@ -38,12 +38,17 @@ function createTestDictionaryArchive(dictionary, dictionaryName) {
const archive = new (getJSZip())(); const archive = new (getJSZip())();
for (const fileName of fileNames) { for (const fileName of fileNames) {
const source = fs.readFileSync(path.join(dictionaryDirectory, fileName), {encoding: 'utf8'}); if (/\.json$/.test(fileName)) {
const json = JSON.parse(source); const content = fs.readFileSync(path.join(dictionaryDirectory, fileName), {encoding: 'utf8'});
const json = JSON.parse(content);
if (fileName === 'index.json' && typeof dictionaryName === 'string') { if (fileName === 'index.json' && typeof dictionaryName === 'string') {
json.title = dictionaryName; json.title = dictionaryName;
} }
archive.file(fileName, JSON.stringify(json, null, 0)); archive.file(fileName, JSON.stringify(json, null, 0));
} else {
const content = fs.readFileSync(path.join(dictionaryDirectory, fileName), {encoding: null});
archive.file(fileName, content);
}
} }
return archive; return archive;