Source: media/thumbnail/thumbnailGalleryCover.js

  1. import { WebVTTThumbnail } from "./WebVTTThumbnail.js";
  2. import { WebVTTThumbnailUtils } from "./WebVTTThumbnailUtils.js";
  3. import { IntervalTimeout, TimeConversion } from '../utils/helperTools.js'
  4. export { createCoverOverlay, TextOverlay, ThumbnailPositionOnElementHover, ThumbnailLoopOnImageHover, ThumbnailPositionOnElementHoverViaTimestamp, ThumbnailPositionOnImageHover, ThumbnailPositionOnSeekbarHover };
  6. /**
  7.  * Create an overlay to a cover image providing media related information like duration and resolution.
  8.  * @param {Object} target - Target element to attach overlay as child element.
  9.  * @param {Object} dataSourceElement - Element that provides the information via data attributes.
  10.  */
  11. function createCoverOverlay(target, dataSourceElement) {
  12.     const div = document.createElement('div');
  13.     div.className = "video-cover-text-container";
  14.     div.innerHTML = '<i class="overlay-item fas fa-film"></i>';
  15.     new TextOverlay(div, dataSourceElement, 'data-text-duration');
  16.     new TextOverlay(div, dataSourceElement, 'data-text-resolution');
  17.     target.append(div);
  18. }
  20. /**
  21.  * Create a text overlay.
  22.  * @author ckraemme <ckraemme@awi.de>
  23.  * @private
  24.  */
  25. class TextOverlay {
  26.     /**
  27.      * Append data attributes as text overlay to a target element.
  28.      * @param {Object} target - Target element to append text overlay as child.
  29.      * @param {Object} dataSourceElement - Element that contains data attributes.
  30.      * @param {RegExp} dataSourceSelector - Regex expression to select the data attribute.
  31.      */
  32.     constructor(target, dataSourceElement, dataSourceSelector) {
  33.         this.target = target;
  34.         this.dataSourceElement = dataSourceElement;
  35.         this.dataSourceSelector = dataSourceSelector;
  36.         this.addOverlayTextElements_();
  37.     }
  39.     /**
  40.      * Get specific data attributes in an HTML element.
  41.      * @param {Object} target - Target element with data attributes.
  42.      * @param {RegExp} regexSelector - Regex expression to select the data attribute.
  43.      * @returns {Array} Contains the filtered attributes.
  44.      */
  45.     static filterAttributesByName(target, regexSelector) {
  46.         const re = new RegExp(regexSelector);
  47.         let collectAttributes = target.attributes;
  48.         const filteredAttributes = [...collectAttributes].filter(item => re.test(item.name));
  49.         return filteredAttributes
  50.     }
  52.     /**
  53.      * For each filtered data attribute, create a overlay text.
  54.      * @private
  55.      */
  56.     addOverlayTextElements_() {
  57.         const textDataAttributes = TextOverlay.filterAttributesByName(this.dataSourceElement, this.dataSourceSelector);
  58.         textDataAttributes.forEach((item) => {
  59.             this.addOverlayText_(item);
  60.         });
  61.     }
  63.     /**
  64.      * Create the overlay text element and append it as child to the target element.
  65.      * @param {String} item - Specific data attribute.
  66.      * @private
  67.      */
  68.     addOverlayText_(item) {
  69.         const re = new RegExp(this.dataSourceSelector);
  70.         const attributeName = item.name;
  71.         const attributeValue = item.value;
  72.         if (attributeValue) {
  73.             const textElement = document.createElement('span');
  74.             textElement.className = "overlay-item " + attributeName.replace(re, 'overlay-text-');
  75.             textElement.innerText = attributeValue;
  76.             textElement.style.cursor = 'default';
  77.             this.target.appendChild(textElement);
  78.         }
  79.     }
  80. }
  83. /**
  84.  * Show thumbnails of a webVTT file relative to the position of an element that is hovered.
  85.  * @author ckraemme <ckraemme@awi.de>
  86.  * @private
  87.  */
  88. class ThumbnailPositionOnElementHover {
  90.     /**
  91.      * Provide a mouse controlled thumbnail playback. Construct the object and attach all required event listeners to the element.
  92.      * @param {Object} hoverElement - Hover element where event listeners should be attached.
  93.      * @param {Object} targetElement - Target element that should contain timestamp and canvas element.
  94.      * @param {Number} canvasWidth - Canvas width in pixel.
  95.      * @param {Number} canvasHeight - Canvas height in pixel.
  96.      * @param {String} vttUrl - URL to the webVTT file.
  97.      * @param {Object} timestampTextElement - Text element to show timestamps as inner text.
  98.      * @param {String} timestampTextOnPointerLeave - Timestamp text that is shown when the pointer leaves the element.
  99.      * @param {Number} showNextThumbnailEveryNthPixel - Skip thumbnails that are to close in order to avoid a too sensitive mouse pointer.
  100.      */
  101.     constructor(hoverElement, targetElement, canvasWidth, canvasHeight, vttUrl, timestampTextElement = null, timestampTextOnPointerLeave, showNextThumbnailEveryNthPixel = 10) {
  102.         this.manifestData, this.canvasElement;
  103.         this.canvasWidth = canvasWidth;
  104.         this.canvasHeight = canvasHeight;
  105.         this.vttUrl = vttUrl;
  106.         this.targetElement = targetElement;
  107.         this.showNextThumbnailEveryNthPixel = showNextThumbnailEveryNthPixel;
  108.         this.stateToPreventDuplicateBuilds = 0;
  109.         this.hoverElement = hoverElement;
  110.         this.timestampTextElement = timestampTextElement;
  111.         this.timestampTextOnPointerLeave = timestampTextOnPointerLeave;
  112.         this.hoverElement.addEventListener('pointerenter', this.coverPointerEnter_.bind(this));
  113.         this.hoverElement.addEventListener('pointerleave', this.coverPointerLeave_.bind(this));
  114.     }
  116.     /**
  117.      * Read the manifest file and attach an event lister when the element is hovered.
  118.      * @param {Event} event - Pointerenter event.
  119.      * @private 
  120.      */
  121.     coverPointerEnter_(event) {
  122.         if (this.stateToPreventDuplicateBuilds === 0) {
  123.             this.stateToPreventDuplicateBuilds = 1;
  124.             let webVTT = new WebVTTThumbnail(this.vttUrl);
  125.             webVTT.init(-1, false).then(() => {
  126.                 this.manifestData = webVTT.manifestData;
  127.                 this.coverPointerHover_(event);
  128.                 this.pointerMoveListener = this.coverPointerHover_.bind(this);
  129.                 this.hoverElement.addEventListener('pointermove', this.pointerMoveListener);
  130.             })
  131.         }
  132.     }
  134.     /**
  135.      * Create or update the thumbnail frame in the canvas and timestamp.
  136.      * @param {Event} event - Pointermove event.
  137.      * @private 
  138.      */
  139.     coverPointerHover_(event) {
  140.         const reducedManifestObjectNumber = Math.round(event.target.clientWidth / this.showNextThumbnailEveryNthPixel);
  141.         const manifestDataReduced = WebVTTThumbnailUtils.reduceManifestEvenlyDistributed(this.manifestData, reducedManifestObjectNumber);
  142.         const [manifestDataAtTimestamp,] = WebVTTThumbnailUtils.getManifestObjectOnHover(event, manifestDataReduced);
  143.         this.generateThumbnail_(manifestDataAtTimestamp, manifestDataAtTimestamp['time_start']);
  144.     }
  146.     generateThumbnail_(manifestDataAtTimestamp, timestampTextElementText) {
  147.         if (typeof this.canvasElement == 'undefined')
  148.             this.canvasElement = ThumbnailCanvas.createThumbnailCanvas(this.targetElement);
  150.         if (this.timestampTextElement != null)
  151.             this.timestampTextElement.innerText = timestampTextElementText;
  153.         ThumbnailCanvas.paintThumbnail(manifestDataAtTimestamp, this.canvasElement, this.canvasWidth, this.canvasHeight);
  154.     }
  156.     /**
  157.      * Remove all attached elements and events.
  158.      * @param {Event} event - Pointerleave event.
  159.      * @private 
  160.      */
  161.     coverPointerLeave_(event) {
  162.         if (this.stateToPreventDuplicateBuilds === 1) {
  163.             if (ThumbnailCanvas.removeThumbnailCanvas(this.targetElement)) {
  164.                 this.canvasElement = undefined;
  165.                 this.hoverElement.removeEventListener('pointermove', this.pointerMoveListener);
  166.                 if (this.timestampTextElement != null && this.timestampTextOnPointerLeave != null)
  167.                     this.timestampTextElement.innerText = this.timestampTextOnPointerLeave;
  168.                 this.stateToPreventDuplicateBuilds = 0;
  169.             }
  170.             else
  171.                 setTimeout(() => { this.coverPointerLeave_(event) }, 100);
  172.         }
  173.     }
  174. }
  176. /**
  177.  * Overwrite the default ThumbnailPositionOnElementHover class and replace the referenced element.
  178.  * Here, the seek bar is used to show thumbnails referenced in a webVTT file. It is based on the position of a pointer that hovers the seek bar.
  179.  * @extends ThumbnailPositionOnElementHover
  180.  * @author ckraemme <ckraemme@awi.de>
  181.  */
  182. class ThumbnailPositionOnSeekbarHover extends ThumbnailPositionOnElementHover {
  184.     /**
  185.      * Note: This class is based on class inheritance.
  186.      * Only new initialized or removed parameters are described here.
  187.      * Observe: showNextThumbnailEveryNthPixel can be omitted, as it is not used in the coverPointerHover_() method defined here.
  188.      */
  189.     constructor(hoverElement, targetElement, canvasWidth, canvasHeight, vttUrl, timestampTextElement = null, timestampTextOnPointerLeave) {
  190.         super(hoverElement, targetElement, canvasWidth, canvasHeight, vttUrl, timestampTextElement, timestampTextOnPointerLeave);
  191.     }
  193.     /**
  194.      * Overwrites ThumbnailPositionOnElementHover.coverPointerHover_() due to the required seek bar specificity.
  195.      * @param {Event} event - Pointermove event.
  196.      * @private 
  197.      */
  198.     coverPointerHover_(event) {
  199.         const isSeekbar = true;
  200.         const [manifestDataAtTimestamp, currentTimeHHMMSSms] = WebVTTThumbnailUtils.getManifestObjectOnHover(event, this.manifestData, isSeekbar);
  201.         this.generateThumbnail_(manifestDataAtTimestamp, currentTimeHHMMSSms.split('.')[0]);
  202.     }
  204. }
  206. /**
  207.  * Overwrite the default ThumbnailPositionOnElementHover class and replace the referenced element.
  208.  * Here, a time element is used to show thumbnails referenced in a webVTT file. It is based on the inner text of an html element that indicates the time when hovering the seek bar.
  209.  * @extends ThumbnailPositionOnElementHover
  210.  * @author ckraemme <ckraemme@awi.de>
  211.  */
  212. class ThumbnailPositionOnElementHoverViaTimestamp extends ThumbnailPositionOnElementHover {
  214.     /**
  215.      * Note: This class is based on class inheritance.
  216.      * Only new initialized or removed parameters are described here.
  217.      * Observe: showNextThumbnailEveryNthPixel can be omitted, as it is not used in the coverPointerHover_() method defined here.
  218.      * @param {Object} timeElementSelector - Selector of time element that contains the timestamp as innerText.
  219.      */
  221.     constructor(hoverElement, targetElement, timeElementSelector, canvasWidth, canvasHeight, vttUrl, timestampTextElement = null, timestampTextOnPointerLeave) {
  222.         // observe: timeElementSelector as additional input argument
  223.         super(hoverElement, targetElement, canvasWidth, canvasHeight, vttUrl, timestampTextElement, timestampTextOnPointerLeave);
  224.         this.timeElementSelector = timeElementSelector;
  225.     }
  227.     /**
  228.      * Overwrites ThumbnailPositionOnElementHover.coverPointerHover_() due to the required seek bar specificity.
  229.      * @param {Event} event - Pointermove event.
  230.      * @private 
  231.      */
  232.     coverPointerHover_(event) {
  233.         const delayReadingOfTimeElement_ms = 20; // wait until the time element changed - could be replaced by a mutation observer in the future
  234.         setTimeout(() => {
  235.             const currentTimeHHMMSS = document.querySelector(this.timeElementSelector)?.innerText;
  236.             const currentTimeHHMMSSms = TimeConversion.time2IsoDayTime(currentTimeHHMMSS)
  237.             const manifestDataAtTimestamp = WebVTTThumbnailUtils.getManifestObjectViaTimestamp(currentTimeHHMMSSms, this.manifestData);
  238.             this.generateThumbnail_(manifestDataAtTimestamp, currentTimeHHMMSSms.split('.')[0]);
  239.         }, delayReadingOfTimeElement_ms);
  240.     }
  241. }
  243. /**
  244.  * Show thumbnails referenced in a webVTT file relative to the hover position of an image element.
  245.  * @extends ThumbnailPositionOnElementHover
  246.  * @author ckraemme <ckraemme@awi.de>
  247.  */
  248. class ThumbnailPositionOnImageHover extends ThumbnailPositionOnElementHover {
  250.     /**
  251.      * Provide a mouse controlled thumbnail playback. Construct the object and attach all required event listeners to the image element.
  252.      * @param {Object} imageElement - Image element where event listeners should be attached.
  253.      * @param {String} imageElementDataAttributeWebVTTUrl - Name of the data attribute in the image element.
  254.      * @param {Object} timestampTextElement - Text element to show timestamps as inner text.
  255.      * @param {String} timestampTextOnPointerLeave - Timestamp text that is shown when the pointer leaves the element.
  256.      */
  257.     constructor(imageElement, imageElementDataAttributeWebVTTUrl = "data-src-webvtt", timestampTextElement = null, timestampTextOnPointerLeave) {
  258.         const vttUrl = imageElement.getAttribute(imageElementDataAttributeWebVTTUrl);
  259.         const imageContainer = imageElement.parentElement;
  260.         const coverContainer = document.createElement('div');
  261.         coverContainer.className = 'cover-container';
  262.         imageContainer.appendChild(coverContainer);
  263.         const canvasWidth = imageElement.width;
  264.         const canvasHeight = imageElement.height;
  265.         const hoverElement = coverContainer;
  266.         super(hoverElement, coverContainer, canvasWidth, canvasHeight, vttUrl, timestampTextElement, timestampTextOnPointerLeave);
  267.     }
  268. }
  270. /**
  271.  * Play thumbnails referenced in a webVTT file in a loop on top of an image element that is hovered.
  272.  * @author ckraemme <ckraemme@awi.de>
  273.  */
  274. class ThumbnailLoopOnImageHover {
  275.     /**
  276.      * Create a canvas element on top of an image element where thumbnails are shown when the image is hovered.
  277.      * @param {Object} imageElement - Image element that provides the url to the webVTT file as data attribute.
  278.      * @param {string} imageElementDataAttributeWebVTTUrl - Name of the data attribute in the image element.
  279.      * @param {Number} timeIntervalMilliseconds - Time interval between thumbnail images. Allows playback speed control.
  280.      */
  281.     constructor(imageElement, imageElementDataAttributeWebVTTUrl = "data-src-webvtt", timeIntervalMilliseconds = 100) {
  283.         this.playback;
  284.         this.timeIntervalMilliseconds = timeIntervalMilliseconds;
  285.         this.stateToPreventDuplicateBuilds = 0;
  286.         this.imageElement = imageElement;
  287.         this.vttUrl = imageElement.getAttribute(imageElementDataAttributeWebVTTUrl);
  289.         const coverContainer = imageElement.parentElement;
  290.         coverContainer.addEventListener('mouseenter', this.coverMouseEnter_.bind(this));
  291.         coverContainer.addEventListener('mouseleave', this.coverMouseLeave_.bind(this));
  292.     }
  294.     /**
  295.      * Play a loop of thumbnail images provided via a webVTT file.
  296.      * @param {Object} imageElement - Image element where thumbnail loop is attached as sibling.
  297.      * @param {String} vttUrl - URL to the webVTT file.
  298.      * @param {Number} currentFrame - Current thumbnail frame. Starts with zero.
  299.      * @param {Number} timeIntervalMilliseconds - Time interval between thumbnail images. Allows playback speed control.
  300.      * @param {Boolean} reversePlayback - If true play thumbnails in reverse order.
  301.      * @param {Object} timestampTextElement - Text element to show timestamps as inner text.
  302.      * @param {String} timestampTextOnRemove - Timestamp text that is shown when the thumbnail loop is removed.
  303.      */
  304.     static playThumbnailLoop(imageElement, vttUrl, currentFrame = 0, timeIntervalMilliseconds = 100, reversePlayback = false, timestampTextElement = null, timestampTextOnRemove) {
  305.         let webVTT = new WebVTTThumbnail(vttUrl);
  306.         return webVTT.init(-1, false).then(() => {
  307.             return new ThumbnailLoop(imageElement.parentElement, webVTT.manifestData, imageElement.width, imageElement.height, currentFrame, timeIntervalMilliseconds, reversePlayback, timestampTextElement, timestampTextOnRemove);
  308.         });
  309.     }
  311.     /**
  312.      * Start thumbnail playback loop.
  313.      * @param {Event} event - Pointerenter event.
  314.      * @private
  315.      */
  316.     coverMouseEnter_(event) {
  317.         if (this.stateToPreventDuplicateBuilds === 0) {
  318.             this.stateToPreventDuplicateBuilds = 1;
  319.             const currentFrame = 0;
  320.             ThumbnailLoopOnImageHover.playThumbnailLoop(this.imageElement, this.vttUrl, currentFrame, this.timeIntervalMilliseconds).then(playback => this.playback = playback);
  321.         }
  322.     }
  324.     /**
  325.      * Stop and destroy thumbnail playback loop.
  326.      * @param {Event} event - Pointerleave event.
  327.      * @private
  328.      */
  329.     coverMouseLeave_(event) {
  330.         if (this.stateToPreventDuplicateBuilds === 1) {
  331.             if (typeof this.playback !== 'undefined') {
  332.                 this.playback.remove();
  333.                 this.stateToPreventDuplicateBuilds = 0;
  334.             }
  335.             else
  336.                 setTimeout(() => { this.coverMouseLeave_(event) }, 1000);
  337.         }
  338.     }
  339. }
  341. /**
  342.  * Create an thumbnail loop and provide methods for controlling the playback.
  343.  * @author ckraemme <ckraemme@awi.de>
  344.  * @private
  345.  */
  346. class ThumbnailLoop {
  348.     /**
  349.      * Create a thumbnail loop playback.
  350.      * @param {Object} targetElement - Target element.
  351.      * @param {Object} manifestData - Manifest data object providing all thumbnail related information.
  352.      * @param {Number} containerWidth - Container width in pixel.
  353.      * @param {Number} containerHeight - Container height in pixel.
  354.      * @param {Number} currentFrame - Current thumbnail frame. Starts with zero.
  355.      * @param {Number} timeIntervalMilliseconds - Time interval between thumbnail images. Allows playback speed control.
  356.      * @param {Boolean} reversePlayback - If true play thumbnails in reverse order.
  357.      * @param {Object} timestampTextElement - Text element to show timestamps as inner text.
  358.      * @param {String} timestampTextOnRemove - Timestamp text that is shown when the thumbnail loop is removed.
  359.      */
  360.     constructor(targetElement, manifestData, containerWidth, containerHeight, currentFrame = 0, timeIntervalMilliseconds = 100, reversePlayback = false, timestampTextElement = null, timestampTextOnRemove) {
  361.         this.targetElement = targetElement;
  362.         this.manifestData = manifestData;
  363.         this.containerWidth = containerWidth;
  364.         this.containerHeight = containerHeight;
  365.         this.currentFrame = currentFrame;
  366.         this.timeIntervalMilliseconds = timeIntervalMilliseconds;
  367.         this.reversePlayback = reversePlayback;
  368.         this.timestampTextElement = timestampTextElement;
  369.         this.timestampTextOnRemove = timestampTextOnRemove;
  371.         this.canvasElement = ThumbnailCanvas.createThumbnailCanvas(targetElement);
  372.         this.intervalTimer = new IntervalTimeout(this.looping_.bind(this), timeIntervalMilliseconds);
  373.         this.intervalTimer.setInterval();
  375.     }
  377.     /**
  378.      * Create the thumbnail playback loop effect by controlling and painting the frames.
  379.      * @private 
  380.      */
  381.     looping_() {
  382.         this.intervalTimer.delayMS = this.timeIntervalMilliseconds;
  383.         const boundary = false;
  384.         if (this.reversePlayback === false)
  385.             this.skipFrame(1, boundary);
  386.         else
  387.             this.skipFrame(-1, boundary);
  388.         this.paintCurrentFrame();
  389.     }
  391.     /**
  392.      * Paint current thumbnail frame to the canvas.
  393.      */
  394.     paintCurrentFrame() {
  395.         ThumbnailCanvas.paintThumbnail(this.manifestData[this.currentFrame], this.canvasElement, this.containerWidth, this.containerHeight);
  396.         if (this.timestampTextElement != null)
  397.             this.timestampTextElement.innerText = this.manifestData[this.currentFrame]['time_start'];
  398.     }
  400.     /**
  401.      * Pause thumbnail loop playback.
  402.      */
  403.     pause() {
  404.         this.intervalTimer.clearInterval();
  405.         this.intervalTimer.timeoutID = null;
  406.     }
  408.     /**
  409.      * Pause thumbnail loop playback.
  410.      * @param {Number} numberOfFrames - Amount of frames that should be skipped starting from the current playback position (can be positive and negative).
  411.      * @param {Boolean} boundary - If true, limit the amount of skipped frames to the number of available frames. Else, start at the other end like in a loop.
  412.      */
  413.     skipFrame(numberOfFrames, boundary = true) {
  414.         var newPosition;
  415.         if (boundary) {
  416.             const firstBoundaryValue = Math.max(0, this.currentFrame + numberOfFrames);
  417.             newPosition = Math.min(firstBoundaryValue, this.manifestData.length - 1)
  418.         }
  419.         else {
  420.             newPosition = (this.currentFrame + numberOfFrames) % this.manifestData.length
  421.             if (newPosition < 0)
  422.                 newPosition = this.manifestData.length + newPosition;
  423.         }
  424.         this.currentFrame = newPosition;
  425.     }
  427.     /**
  428.      * Resume thumbnail loop playback.
  429.      */
  430.     resume() {
  431.         if (this.intervalTimer.timeoutID == null)
  432.             this.intervalTimer.setInterval();
  433.     }
  435.     /**
  436.      * Remove thumbnail loop object containing all child elements.
  437.      * @param {Boolean} removeTargetCompletely - Indicates to remove target element too.
  438.      */
  439.     remove(removeTargetCompletely = false) {
  440.         if (ThumbnailCanvas.removeThumbnailCanvas(this.targetElement)) {
  441.             if (removeTargetCompletely)
  442.                 this.targetElement.remove();
  443.             this.intervalTimer.clearInterval();
  444.             if (this.timestampTextElement != null && this.timestampTextOnRemove != null)
  445.                 this.timestampTextElement.innerText = this.timestampTextOnRemove;
  446.         }
  447.         else
  448.             setTimeout(() => { this.remove(removeTargetCompletely) }, 100);
  449.     }
  450. }
  452. /**
  453.  * Class that provides tools to create, paint images on and remove canvas in the context of the webVTT thumbnails. 
  454.  * @author ckraemme <ckraemme@awi.de>
  455.  */
  456. class ThumbnailCanvas {
  457.     /**
  458.      * Create canvas element, set default canvas settings and append it to a target element.
  459.      * @param {Object} targetElement - Target element to append canvas as child.
  460.      * @returns {Object} Canvas element.
  461.      */
  462.     static createThumbnailCanvas(targetElement) {
  463.         const canvasElement = document.createElement('canvas');
  464.         const context = canvasElement.getContext('2d');
  465.         context.imageSmoothingEnabled = true;
  466.         context.imageSmoothingQuality = "high";
  467.         targetElement.append(canvasElement);
  468.         return canvasElement
  469.     }
  471.     /**
  472.      * Remove the first canvas element found in a target element.
  473.      * @param {Object} targetElement - Target element that contain a canvas.
  474.      * @returns {Boolean} Return true when canvas could be removed, else false.
  475.      */
  476.     static removeThumbnailCanvas(targetElement) {
  477.         const canvas = targetElement.querySelector('canvas');
  478.         if (canvas)
  479.             canvas.remove();
  480.         else
  481.             return false
  482.         return true
  483.     }
  485.     /**
  486.      * Paint the image from a thumbnail object to a canvas element.
  487.      * @param {Object} thumbnailObject - Thumbnail object, i.e.,  Object { time_start: "00:00:00.000", time_end: "00:00:00.280", data: "thumb.jpeg#xywh=0,0,250,141", url: "https://localhost/Desktop/marine-data/thumbnail-hover/thumb.jpeg", image: img }.
  488.      * @param {Object} canvasElement - Target canvas element.
  489.      * @param {Object} canvasWidth - Canvas width in pixel.
  490.      * @param {Object} canvasHeight - Canvas height in pixel.
  491.      */
  492.     static paintThumbnail(thumbnailObject, canvasElement, canvasWidth, canvasHeight) {
  493.         const imageSprite = thumbnailObject.data.includes('#xywh')
  494.         if (imageSprite)
  495.             var [x, y, frameWidth, frameHeight] = thumbnailObject.data.split('#xywh=')[1].split(',');
  496.         else
  497.             var [x, y, frameWidth, frameHeight] = [0, 0, thumbnailObject.image.width, thumbnailObject.image.height];
  499.         if (canvasHeight === undefined)
  500.             canvasHeight = canvasWidth * frameHeight / frameWidth;
  501.         if (canvasWidth === undefined)
  502.             canvasWidth = canvasHeight * frameWidth / frameHeight;
  503.         canvasElement.width = canvasWidth;
  504.         canvasElement.height = canvasHeight;
  506.         const context = canvasElement.getContext('2d');
  507.         context.clearRect(0, 0, canvasElement.width, canvasElement.height);
  508.         context.drawImage(thumbnailObject.image, x, y, frameWidth, frameHeight, 0, 0, canvasWidth, canvasHeight);
  509.     }
  510. }