cm-chessboard 5.5.11 → 5.5.12

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 +59 -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.12",
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,6 +98,19 @@ 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() {
@@ -98,7 +118,8 @@ export class RenderVideo extends Extension {
98
118
  const blob = new Blob([serialized], {type: "image/svg+xml"})
99
119
  const blobURL = URL.createObjectURL(blob)
100
120
  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)
121
+ this.context.drawImage(this.image, 0, 0, this.canvas.width, this.canvas.height, 0, 0, this.canvas.width, this.canvas.height)
122
+ this.recorder.requestData()
102
123
  }
103
124
  this.image.src = blobURL
104
125
  }