cm-chessboard 5.5.1 → 5.5.2

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

@@ -13,8 +13,6 @@
 <p>Works in Chrome.</p>
 <div class="board board-small" id="board"></div>
 <video id="videoOut" controls="controls"></video>
-<br style="clear: both"/>
-
 <script type="module">
     import {RenderVideo} from "../../src/cm-chessboard/extensions/render-video/RenderVideo.js"
     import {Chessboard} from "../../src/cm-chessboard/Chessboard.js"
@@ -33,18 +31,17 @@
     chessboard.recorderStart()
     setTimeout(() => {
         chessboard.movePiece("e2", "e4", true).then(() => {
-            chessboard.movePiece("e7", "e5", true).then(() => {
-                setTimeout(() => {
-                    const url = chessboard.recorderStop()
-                    const video = document.getElementById("videoOut")
-                    video.src = url
-                }, 100)
-
-            })
+            setTimeout(() => {
+                chessboard.movePiece("e7", "e5", true).then(() => {
+                    setTimeout(() => {
+                        const url = chessboard.recorderStop()
+                        const video = document.getElementById("videoOut")
+                        video.src = url
+                    }, 100)
+                })
+            }, 400)
         })
-
     }, 500)
-
 </script>
 </body>
 </html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cm-chessboard",
-  "version": "5.5.1",
+  "version": "5.5.2",
   "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

@@ -17,20 +17,16 @@ export class RenderVideo extends Extension {
         this.images = []
         this.makeSpriteInline()
         this.registerExtensionPoint(EXTENSION_POINT.animation, () => {
-            // console.log("EXTENSION_POINT.animation", data)
             let clonedSvgElement = this.chessboard.view.svg.cloneNode(true)
-            // this.makeStyleInline(clonedSvgElement)
             let serialized = new XMLSerializer().serializeToString(clonedSvgElement)
-            // console.log(serialized)
             const blob = new Blob([serialized], {type: "image/svg+xml"})
             const blobURL = URL.createObjectURL(blob)
             const image = new Image()
             this.images.push(image)
             image.onload = () => {
-                // console.log("onload", event)
                 let context = this.canvas.getContext('2d')
-                // console.log(image)
                 context.drawImage(image, 0, 0, this.canvas.width, this.canvas.height)
+                this.recorder.requestData()
             }
             image.src = blobURL
         })
@@ -49,12 +45,12 @@ export class RenderVideo extends Extension {
             this.recorder = new MediaRecorder(this.stream, {mimeType: this.props.mediaType})
             this.recordedData = []
             this.recorder.ondataavailable = (event) => {
-                // console.log(event)
                 if (event.data && event.data.size) {
                     this.recordedData.push(event.data)
                 }
             }
-            this.recorder.start(0.1)
+            this.recorder.start()
+            this.recorder.requestData()
             console.log("recorder", this.recorder.state)
         })
         /**
@@ -71,7 +67,7 @@ export class RenderVideo extends Extension {
         const computedStyle = getComputedStyle(element, null)
         for (let i = 0; i < computedStyle.length; i++) {
             const style = computedStyle[i] + ""
-            if (style === "fill") {
+            if (["fill", "stroke", "stroke-width", "font-size"].includes(style)) {
                 element.style[style] = computedStyle[style]
             }
         }