cm-chessboard 5.5.10 → 5.5.12

package/examples/extensions/chessboard-render-video-extension.html

@@ -12,7 +12,7 @@
 <h2>Example: RenderVideo extension</h2>
 <p>Works in Chrome (webm) and Safari (mp4).</p>
 <div class="board board-small" id="board"></div>
-<video id="videoOut" controls="controls" style="width: 320px; height: 320px"></video>
+<video id="videoOut" controls="controls"></video>
 <script type="module">
     import {RenderVideo} from "../../src/cm-chessboard/extensions/render-video/RenderVideo.js"
     import {Chessboard} from "../../src/cm-chessboard/Chessboard.js"
@@ -28,21 +28,18 @@
                 props: {}
             }]
     })
-    chessboard.recorderStart()
-    setTimeout(() => {
-        chessboard.movePiece("e2", "e4", true).then(() => {
-            setTimeout(() => {
-                chessboard.movePiece("e7", "e5", true).then(() => {
-                    setTimeout(() => {
-                        chessboard.recorderStop().then((url) => {
-                            const video = document.getElementById("videoOut")
-                            video.src = url
-                        })
-                    }, 100)
-                })
-            }, 400)
-        })
-    }, 250)
+    await chessboard.recorderInit()
+    await chessboard.recorderStart()
+    await chessboard.recorderPause(500)
+    await chessboard.movePiece("e2", "e4", true)
+    await chessboard.recorderPause(500)
+    await chessboard.movePiece("e7", "e5", true)
+    await chessboard.recorderPause(1000)
+    chessboard.recorderStop().then((url) => {
+        const video = document.getElementById("videoOut")
+        video.src = url
+    })
+
 </script>
 </body>
 </html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cm-chessboard",
-  "version": "5.5.10",
+  "version": "5.5.12",
   "description": "A JavaScript chessboard which is lightweight, ES6 module based, responsive, SVG rendered and without dependencies.",
   "keywords": [
     "chess",

package/src/cm-chessboard/extensions/render-video/RenderVideo.js

@@ -26,45 +26,61 @@ export class RenderVideo extends Extension {
             }
         }
         console.log("recorder mediaType", this.props.mediaType)
-        this.images = []
+        this.image = new Image()
+        document.body.append(this.image)
         this.makeSpriteInline()
-        this.registerExtensionPoint(EXTENSION_POINT.animation, (event) => {
+        this.registerExtensionPoint(EXTENSION_POINT.animation, () => {
             if (this.recorder && this.recorder.state === "recording") {
                 setTimeout(() => {
                     this.cloneImageAndRender()
                 })
             }
         })
+        this.registerMethod("recorderInit", () => {
+            return new Promise((resolve) => {
+                let all = document.querySelectorAll("svg *")
+                for (let i = 0; i < all.length; i++) {
+                    this.transferComputedStyle(all[i])
+                }
+                const dimensions = this.chessboard.view.svg.getBBox()
+                this.canvas = document.createElement("canvas")
+                this.canvas.style.backgroundColor = "#000"
+                this.canvas.style.display = "none"
+                this.canvas.width = dimensions.width
+                this.canvas.height = dimensions.height
+                this.context = this.canvas.getContext('2d')
+                document.body.append(this.canvas)
+
+                this.image = new Image()
+                this.image.width = this.canvas.width
+                this.image.height = this.canvas.height
+                this.image.style.position = "absolute"
+                this.image.style.visibility = "hidden"
+                document.body.append(this.image)
+
+                this.stream = this.canvas.captureStream()
+                this.recorder = new MediaRecorder(this.stream, {mimeType: this.props.mediaType})
+                this.recorder.ondataavailable = (event) => {
+                    if (event.data && event.data.size) {
+                        this.recordedData.push(event.data)
+                    }
+                }
+                setTimeout(() => {
+                    resolve()
+                }, 100)
+            })
+        })
         this.registerMethod("recorderStart", () => {
-            if (this.recorder && this.recorder.state === "recording") {
-                console.error("recorder is running")
-                return
-            }
-            let all = document.querySelectorAll("svg *")
-            for (let i = 0; i < all.length; i++) {
-                this.transferComputedStyle(all[i])
-            }
-            const dimensions = this.chessboard.view.svg.getBBox()
-            this.canvas = document.createElement("canvas")
-            this.canvas.style.backgroundColor = "#000"
-            this.canvas.style.display = "none"
-            this.canvas.width = dimensions.width
-            this.canvas.height = dimensions.height
-            this.contect = this.canvas.getContext('2d')
-            document.body.append(this.canvas)
-            this.stream = this.canvas.captureStream()
-            this.recorder = new MediaRecorder(this.stream, {mimeType: this.props.mediaType})
-            this.recordedData = []
-            this.recorder.ondataavailable = (event) => {
-                if (event.data && event.data.size) {
-                    this.recordedData.push(event.data)
+            return new Promise((resolve) => {
+                if (this.recorder && this.recorder.state === "recording") {
+                    console.error("recorder is running")
+                    return
                 }
-            }
-            this.recorder.start()
-            setTimeout(() => {
-                this.cloneImageAndRender()
-            }, 50)
-            console.log("recorder", this.recorder.state)
+                this.recordedData = []
+                this.recorder.start()
+                console.log("recorder", this.recorder.state)
+                resolve()
+            })
         })
         /**
          * returns the url of the recorded media
@@ -74,12 +90,25 @@ export class RenderVideo extends Extension {
                 if (!this.recorder || this.recorder.state !== "recording") {
                     reject("recorder is not recording")
                 }
-                this.recorder.requestData()
+                this.cloneImageAndRender()
                 setTimeout(() => {
                     this.recorder.stop()
                     console.log("recorder", this.recorder.state)
                     resolve(URL.createObjectURL(new Blob(this.recordedData, {type: this.props.mediaType})))
-                }, 100)
+                }, 200)
+            })
+        })
+        this.registerMethod("recorderPause", (ms) => {
+            return new Promise((resolve) => {
+                this.cloneImageAndRender()
+                const interval = setInterval(() => {
+                    this.cloneImageAndRender()
+                }, 20)
+                setTimeout(() => {
+                    clearInterval(interval)
+                    this.cloneImageAndRender()
+                    resolve()
+                }, ms)
             })
         })
     }
@@ -88,19 +117,11 @@ export class RenderVideo extends Extension {
         let serialized = new XMLSerializer().serializeToString(this.chessboard.view.svg)
         const blob = new Blob([serialized], {type: "image/svg+xml"})
         const blobURL = URL.createObjectURL(blob)
-        // console.log(blobURL)
-        const image = new Image()
-        // needed for safari
-        image.width = this.canvas.width
-        image.height = this.canvas.height
-        image.style.position = "absolute"
-        image.style.visibility = "hidden"
-        //
-        document.body.append(image)
-        image.onload = () => {
-            this.contect.drawImage(image, 0, 0, this.canvas.width, this.canvas.height, 0, 0, this.canvas.width, this.canvas.height)
+        this.image.onload = () => {
+            this.context.drawImage(this.image, 0, 0, this.canvas.width, this.canvas.height, 0, 0, this.canvas.width, this.canvas.height)
+            this.recorder.requestData()
         }
-        image.src = blobURL
+        this.image.src = blobURL
     }
 
     transferComputedStyle(element) {