diff --git a/js/utilities.js b/js/utilities.js index 3a39c2b..728ce76 100644 --- a/js/utilities.js +++ b/js/utilities.js @@ -2,39 +2,47 @@ function getLastFrameOfVideo(url) { // Take in a video URL and get the last frame from that video. // Used to compare video to canvas drawing via Rembrandt. - return new Promise((resolve, reject) => { + return new Promise(async (resolve, reject) => { var video = document.createElement("video"); var fabcan = document.createElement("canvas"); var fabctx = fabcan.getContext("2d"); - video.preload = "auto"; - video.crossOrigin = "anonymous"; - + video.addEventListener("error", reject); video.addEventListener("loadedmetadata", () => { fabcan.width = video.videoWidth; fabcan.height = video.videoHeight; - var callback = function () { - if (video.currentTime != video.duration) return getLastFrameOfVideo(url).then(resp => { - video.removeEventListener("seeked", callback); - resolve(resp); - }); - - video.removeEventListener("seeked", callback); + video.addEventListener("seeked", () => { fabctx.drawImage(video, 0, 0, video.videoWidth, video.videoHeight); resolve(fabcan.toDataURL()); - } + }); - video.addEventListener("seeked", callback); video.currentTime = video.duration; }); - video.src = url; + video.src = await videoURLToDataURL(url); video.load(); }); } +function videoURLToDataURL(url) { + // Takes the video URL and fully downloads the + // video, before converting it to a Data URL + + return new Promise(async (resolve, reject) => { + var resp = await fetch(url); + var reader = new FileReader(); + + reader.addEventListener("load", () => { + resolve(reader.result); + }); + + reader.addEventListener("error", reject); + reader.readAsDataURL(await resp.blob()); + }); +} + function convertCanvasToBlackAndWhite(canvas) { // Convert the canvas to black and white for better comparison diff --git a/manifest.json b/manifest.json index 6dd9650..5813a76 100644 --- a/manifest.json +++ b/manifest.json @@ -1,7 +1,7 @@ { "name": "KanjiThing", "description": "Learn kanji stroke order from the browser", - "version": "1.4.1", + "version": "1.4.2", "manifest_version": 3, "permissions": ["storage"], "action": {