From 159dcaf1c032a372c3a22c3c365770eb94d64ba4 Mon Sep 17 00:00:00 2001 From: SharkPool <139097378+SharkPool-SP@users.noreply.github.com> Date: Sun, 7 Jul 2024 21:55:01 -0700 Subject: [PATCH 1/4] Update Video.js --- extensions/Lily/Video.js | 59 +++++++++++++++++++++++++++++++++++++++- 1 file changed, 58 insertions(+), 1 deletion(-) diff --git a/extensions/Lily/Video.js b/extensions/Lily/Video.js index 6bf719ff3d..94cc4e8c1a 100644 --- a/extensions/Lily/Video.js +++ b/extensions/Lily/Video.js @@ -2,6 +2,7 @@ // ID: lmsVideo // Description: Play videos from URLs. // By: LilyMakesThings +// Contributed to by: SharkPool // License: MIT AND LGPL-3.0 // Attribution is not required, but greatly appreciated. @@ -239,6 +240,21 @@ }, }, }, + { + opcode: "getFrame", + blockType: Scratch.BlockType.REPORTER, + text: Scratch.translate("frame of video [NAME] at [TIME] seconds"), + arguments: { + TIME: { + type: Scratch.ArgumentType.NUMBER, + defaultValue: 0, + }, + NAME: { + type: Scratch.ArgumentType.STRING, + defaultValue: "my video", + }, + }, + }, "---", { opcode: "pause", @@ -466,6 +482,47 @@ } } + getFrame(args) { + const time = Cast.toString(args.TIME); + const videoName = Cast.toString(args.NAME); + const videoSkin = this.videos[videoName]; + if (!videoSkin) return ""; + + const videoElement = videoSkin.videoElement; + const canvas = document.createElement("canvas"); + const context = canvas.getContext("2d"); + if (!context) { + console.warn("2D rendering context not available"); + return ""; + } + if (videoElement.readyState >= 1) { + return new Promise((resolve, reject) => { + canvas.width = videoElement.videoWidth; + canvas.height = videoElement.videoHeight; + videoElement.currentTime = time; + // Timeout in case browser fails to seek (2 Seconds should be enough?) + const timeout = setTimeout(() => { + console.warn("browser wont perform 'seek' operation"); + reject("Couldnt get frame, check console for more info"); + }, 2000); + const onSeeked = () => { + clearTimeout(timeout); + try { + context.drawImage(videoElement, 0, 0, canvas.width, canvas.height); + resolve(canvas.toDataURL()); + } catch (error) { + console.warn(error); + reject("Couldnt get frame, check console for more info"); + } finally { + videoElement.removeEventListener("seeked", onSeeked); + } + }; + videoElement.addEventListener("seeked", onSeeked, { once: true }); + }); + } + return ""; + } + pause(args) { const videoName = Cast.toString(args.NAME); const videoSkin = this.videos[videoName]; @@ -500,7 +557,7 @@ const videoSkin = this.videos[videoName]; if (!videoSkin) return; - videoSkin.videoElement.volume = value / 100; + videoSkin.videoElement.volume = Math.min(1, Math.max(0, value / 100)); } /** @returns {VM.Target|undefined} */ From 416b9ba0b3f4a5f6af2213e087dcba6cb3e50956 Mon Sep 17 00:00:00 2001 From: Muffin Date: Mon, 5 Aug 2024 19:48:59 -0500 Subject: [PATCH 2/4] replace with screenshot at current time --- extensions/Lily/Video.js | 43 ++++++++-------------------------------- 1 file changed, 8 insertions(+), 35 deletions(-) diff --git a/extensions/Lily/Video.js b/extensions/Lily/Video.js index 94cc4e8c1a..0049897b80 100644 --- a/extensions/Lily/Video.js +++ b/extensions/Lily/Video.js @@ -243,12 +243,8 @@ { opcode: "getFrame", blockType: Scratch.BlockType.REPORTER, - text: Scratch.translate("frame of video [NAME] at [TIME] seconds"), + text: Scratch.translate("screenshot of video [NAME] at current time"), arguments: { - TIME: { - type: Scratch.ArgumentType.NUMBER, - defaultValue: 0, - }, NAME: { type: Scratch.ArgumentType.STRING, defaultValue: "my video", @@ -483,44 +479,21 @@ } getFrame(args) { - const time = Cast.toString(args.TIME); const videoName = Cast.toString(args.NAME); const videoSkin = this.videos[videoName]; if (!videoSkin) return ""; - const videoElement = videoSkin.videoElement; const canvas = document.createElement("canvas"); - const context = canvas.getContext("2d"); - if (!context) { + const ctx = canvas.getContext("2d"); + if (!ctx) { console.warn("2D rendering context not available"); return ""; } - if (videoElement.readyState >= 1) { - return new Promise((resolve, reject) => { - canvas.width = videoElement.videoWidth; - canvas.height = videoElement.videoHeight; - videoElement.currentTime = time; - // Timeout in case browser fails to seek (2 Seconds should be enough?) - const timeout = setTimeout(() => { - console.warn("browser wont perform 'seek' operation"); - reject("Couldnt get frame, check console for more info"); - }, 2000); - const onSeeked = () => { - clearTimeout(timeout); - try { - context.drawImage(videoElement, 0, 0, canvas.width, canvas.height); - resolve(canvas.toDataURL()); - } catch (error) { - console.warn(error); - reject("Couldnt get frame, check console for more info"); - } finally { - videoElement.removeEventListener("seeked", onSeeked); - } - }; - videoElement.addEventListener("seeked", onSeeked, { once: true }); - }); - } - return ""; + + canvas.width = videoSkin.videoElement.videoWidth; + canvas.height = videoSkin.videoElement.videoHeight; + ctx.drawImage(videoSkin.videoElement, 0, 0); + return canvas.toDataURL(); } pause(args) { From 25da9c35233b5d7a3cf599a2acf2229104de921d Mon Sep 17 00:00:00 2001 From: Muffin Date: Mon, 5 Aug 2024 19:49:13 -0500 Subject: [PATCH 3/4] npm run format --- extensions/Lily/Video.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/extensions/Lily/Video.js b/extensions/Lily/Video.js index 0049897b80..e9549ae541 100644 --- a/extensions/Lily/Video.js +++ b/extensions/Lily/Video.js @@ -243,7 +243,9 @@ { opcode: "getFrame", blockType: Scratch.BlockType.REPORTER, - text: Scratch.translate("screenshot of video [NAME] at current time"), + text: Scratch.translate( + "screenshot of video [NAME] at current time" + ), arguments: { NAME: { type: Scratch.ArgumentType.STRING, From 3f3d4bd3797e471dd668d66f8458473cbe76812b Mon Sep 17 00:00:00 2001 From: Muffin Date: Mon, 5 Aug 2024 19:49:31 -0500 Subject: [PATCH 4/4] do you want your name there or not --- extensions/Lily/Video.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/extensions/Lily/Video.js b/extensions/Lily/Video.js index e9549ae541..c68eea7930 100644 --- a/extensions/Lily/Video.js +++ b/extensions/Lily/Video.js @@ -2,7 +2,7 @@ // ID: lmsVideo // Description: Play videos from URLs. // By: LilyMakesThings -// Contributed to by: SharkPool +// By: SharkPool // License: MIT AND LGPL-3.0 // Attribution is not required, but greatly appreciated.