cm-chessboard 5.5.11 → 5.5.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/examples/extensions/chessboard-render-video-extension.html +12 -15
  2. package/package.json +1 -1
  3. package/src/cm-chessboard/extensions/render-video/RenderVideo.js +64 -38
package/examples/extensions/chessboard-render-video-extension.html CHANGED
@@ -28,21 +28,18 @@
28
28
  props: {}
29
29
  }]
30
30
  })
31
- chessboard.recorderStart()
32
- setTimeout(() => {
33
- chessboard.movePiece("e2", "e4", true).then(() => {
34
- setTimeout(() => {
35
- chessboard.movePiece("e7", "e5", true).then(() => {
36
- setTimeout(() => {
37
- chessboard.recorderStop().then((url) => {
38
- const video = document.getElementById("videoOut")
39
- video.src = url
40
- })
41
- }, 100)
42
- })
43
- }, 400)
44
- })
45
- }, 250)
31
+ await chessboard.recorderInit()
32
+ await chessboard.recorderStart()
33
+ await chessboard.recorderPause(500)
34
+ await chessboard.movePiece("e2", "e4", true)
35
+ await chessboard.recorderPause(500)
36
+ await chessboard.movePiece("e7", "e5", true)
37
+ await chessboard.recorderPause(1000)
38
+ chessboard.recorderStop().then((url) => {
39
+ const video = document.getElementById("videoOut")
40
+ video.src = url
41
+ })
42
+
46
43
  </script>
47
44
  </body>
48
45
  </html>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "cm-chessboard",
3
- "version": "5.5.11",
3
+ "version": "5.5.13",
4
4
  "description": "A JavaScript chessboard which is lightweight, ES6 module based, responsive, SVG rendered and without dependencies.",
5
5
  "keywords": [
6
6
  "chess",
package/src/cm-chessboard/extensions/render-video/RenderVideo.js CHANGED
@@ -29,51 +29,58 @@ export class RenderVideo extends Extension {
29
29
  this.image = new Image()
30
30
  document.body.append(this.image)
31
31
  this.makeSpriteInline()
32
- this.registerExtensionPoint(EXTENSION_POINT.animation, (event) => {
32
+ this.registerExtensionPoint(EXTENSION_POINT.animation, () => {
33
33
  if (this.recorder && this.recorder.state === "recording") {
34
34
  setTimeout(() => {
35
35
  this.cloneImageAndRender()
36
36
  })
37
37
  }
38
38
  })
39
- this.registerMethod("recorderStart", () => {
40
- if (this.recorder && this.recorder.state === "recording") {
41
- console.error("recorder is running")
42
- return
43
- }
44
- let all = document.querySelectorAll("svg *")
45
- for (let i = 0; i < all.length; i++) {
46
- this.transferComputedStyle(all[i])
47
- }
48
- const dimensions = this.chessboard.view.svg.getBBox()
49
- this.canvas = document.createElement("canvas")
50
- this.canvas.style.backgroundColor = "#000"
51
- this.canvas.style.display = "none"
52
- this.canvas.width = dimensions.width
53
- this.canvas.height = dimensions.height
54
- this.contect = this.canvas.getContext('2d')
39
+ this.registerMethod("recorderInit", () => {
40
+ return new Promise((resolve) => {
41
+ let all = document.querySelectorAll("svg *")
42
+ for (let i = 0; i < all.length; i++) {
43
+ this.transferComputedStyle(all[i])
44
+ }
45
+ const dimensions = this.chessboard.view.svg.getBBox()
46
+ this.canvas = document.createElement("canvas")
47
+ this.canvas.style.backgroundColor = "#000"
48
+ this.canvas.style.display = "none"
49
+ this.canvas.width = dimensions.width
50
+ this.canvas.height = dimensions.height
51
+ this.context = this.canvas.getContext('2d')
52
+ document.body.append(this.canvas)
55
53
 
56
- this.image = new Image()
57
- this.image.width = this.canvas.width
58
- this.image.height = this.canvas.height
59
- this.image.style.position = "absolute"
60
- this.image.style.visibility = "hidden"
61
- document.body.append(this.image)
54
+ this.image = new Image()
55
+ this.image.width = this.canvas.width
56
+ this.image.height = this.canvas.height
57
+ this.image.style.position = "absolute"
58
+ this.image.style.visibility = "hidden"
59
+ document.body.append(this.image)
62
60
 
63
- document.body.append(this.canvas)
64
- this.stream = this.canvas.captureStream()
65
- this.recorder = new MediaRecorder(this.stream, {mimeType: this.props.mediaType})
66
- this.recordedData = []
67
- this.recorder.ondataavailable = (event) => {
68
- if (event.data && event.data.size) {
69
- this.recordedData.push(event.data)
61
+ this.stream = this.canvas.captureStream()
62
+ this.recorder = new MediaRecorder(this.stream, {mimeType: this.props.mediaType})
63
+ this.recorder.ondataavailable = (event) => {
64
+ if (event.data && event.data.size) {
65
+ this.recordedData.push(event.data)
66
+ }
70
67
  }
71
- }
72
- this.recorder.start()
73
- setTimeout(() => {
74
- this.cloneImageAndRender()
75
- }, 50)
76
- console.log("recorder", this.recorder.state)
68
+ setTimeout(() => {
69
+ resolve()
70
+ }, 100)
71
+ })
72
+ })
73
+ this.registerMethod("recorderStart", () => {
74
+ return new Promise((resolve) => {
75
+ if (this.recorder && this.recorder.state === "recording") {
76
+ console.error("recorder is running")
77
+ return
78
+ }
79
+ this.recordedData = []
80
+ this.recorder.start()
81
+ console.log("recorder", this.recorder.state)
82
+ resolve()
83
+ })
77
84
  })
78
85
  /**
79
86
  * returns the url of the recorded media
@@ -83,7 +90,7 @@ export class RenderVideo extends Extension {
83
90
  if (!this.recorder || this.recorder.state !== "recording") {
84
91
  reject("recorder is not recording")
85
92
  }
86
- this.recorder.requestData()
93
+ this.cloneImageAndRender()
87
94
  setTimeout(() => {
88
95
  this.recorder.stop()
89
96
  console.log("recorder", this.recorder.state)
@@ -91,14 +98,33 @@ export class RenderVideo extends Extension {
91
98
  }, 200)
92
99
  })
93
100
  })
101
+ this.registerMethod("recorderPause", (ms) => {
102
+ return new Promise((resolve) => {
103
+ this.cloneImageAndRender()
104
+ const interval = setInterval(() => {
105
+ this.cloneImageAndRender()
106
+ }, 20)
107
+ setTimeout(() => {
108
+ clearInterval(interval)
109
+ this.cloneImageAndRender()
110
+ resolve()
111
+ }, ms)
112
+ })
113
+ })
94
114
  }
95
115
 
96
116
  cloneImageAndRender() {
117
+ if(this.rendering) {
118
+ return
119
+ }
120
+ this.rendering = true
97
121
  let serialized = new XMLSerializer().serializeToString(this.chessboard.view.svg)
98
122
  const blob = new Blob([serialized], {type: "image/svg+xml"})
99
123
  const blobURL = URL.createObjectURL(blob)
100
124
  this.image.onload = () => {
101
- this.contect.drawImage(this.image, 0, 0, this.canvas.width, this.canvas.height, 0, 0, this.canvas.width, this.canvas.height)
125
+ this.context.drawImage(this.image, 0, 0, this.canvas.width, this.canvas.height, 0, 0, this.canvas.width, this.canvas.height)
126
+ this.recorder.requestData()
127
+ this.rendering = false
102
128
  }
103
129
  this.image.src = blobURL
104
130
  }