[ts][player] Click on canvas will now pause/resume player ala YouTube.

spine-ts/build/spine-all.d.ts

@@ -1872,6 +1872,7 @@ declare module spine {
 		drawFrame(requestNextFrame?: boolean): void;
 		scale(sourceWidth: number, sourceHeight: number, targetWidth: number, targetHeight: number): Vector2;
 		loadSkeleton(): void;
+		private cancelId;
 		setupInput(): void;
 		private play();
 		private pause();

spine-ts/build/spine-all.js

@@ -10235,6 +10235,7 @@ var spine;
 			this.currentViewport = null;
 			this.previousViewport = null;
 			this.viewportTransitionStart = 0;
+			this.cancelId = 0;
 			if (typeof parent === "string")
 				parent = document.getElementById(parent);
 			parent.appendChild(this.render());
@@ -10796,7 +10797,15 @@ var spine;
 					}
 				},
 				up: function (x, y) {
-					target = null;
+					if (target) {
+						target = null;
+					}
+					else {
+						if (_this.paused)
+							_this.play();
+						else
+							_this.pause();
+					}
 				},
 				dragged: function (x, y) {
 					if (target != null) {
@@ -10829,7 +10838,6 @@ var spine;
 			});
 			var mouseOverControls = true;
 			var mouseOverCanvas = false;
-			var cancelId = 0;
 			parent.addEventListener("mousemove", function (ev) {
 				if (ev instanceof MouseEvent) {
 					if (!_this.config.showControls)
@@ -10837,22 +10845,20 @@ var spine;
 					var popup = findWithClass(_this.dom, "spine-player-popup");
 					mouseOverControls = overlap(ev, _this.playerControls.getBoundingClientRect());
 					mouseOverCanvas = overlap(ev, _this.canvas.getBoundingClientRect());
-					clearTimeout(cancelId);
+					clearTimeout(_this.cancelId);
 					var hide = popup.length == 0 && !mouseOverControls && !mouseOverCanvas && !_this.paused;
 					if (hide) {
-						console.log("hidding");
 						_this.playerControls.classList.add("spine-player-controls-hidden");
 					}
 					else {
-						console.log("showing");
 						_this.playerControls.classList.remove("spine-player-controls-hidden");
 					}
 					if (!mouseOverControls && popup.length == 0 && !_this.paused) {
 						var remove = function () {
-							console.log("hidding timeout");
-							_this.playerControls.classList.add("spine-player-controls-hidden");
+							if (!_this.paused)
+								_this.playerControls.classList.add("spine-player-controls-hidden");
 						};
-						cancelId = setTimeout(remove, 500);
+						_this.cancelId = setTimeout(remove, 500);
 					}
 				}
 			});
@@ -10863,7 +10869,13 @@ var spine;
 			};
 		};
 		SpinePlayer.prototype.play = function () {
+			var _this = this;
 			this.paused = false;
+			var remove = function () {
+				if (!_this.paused)
+					_this.playerControls.classList.add("spine-player-controls-hidden");
+			};
+			this.cancelId = setTimeout(remove, 500);
 			this.playButton.classList.remove("spine-player-button-icon-play");
 			this.playButton.classList.add("spine-player-button-icon-pause");
 			if (this.config.animation) {
@@ -10874,6 +10886,8 @@ var spine;
 		};
 		SpinePlayer.prototype.pause = function () {
 			this.paused = true;
+			this.playerControls.classList.remove("spine-player-controls-hidden");
+			clearTimeout(this.cancelId);
 			this.playButton.classList.remove("spine-player-button-icon-pause");
 			this.playButton.classList.add("spine-player-button-icon-play");
 		};

spine-ts/build/spine-player.d.ts

@@ -1782,6 +1782,7 @@ declare module spine {
 		drawFrame(requestNextFrame?: boolean): void;
 		scale(sourceWidth: number, sourceHeight: number, targetWidth: number, targetHeight: number): Vector2;
 		loadSkeleton(): void;
+		private cancelId;
 		setupInput(): void;
 		private play();
 		private pause();

spine-ts/build/spine-player.js

@@ -9572,6 +9572,7 @@ var spine;
 			this.currentViewport = null;
 			this.previousViewport = null;
 			this.viewportTransitionStart = 0;
+			this.cancelId = 0;
 			if (typeof parent === "string")
 				parent = document.getElementById(parent);
 			parent.appendChild(this.render());
@@ -10133,7 +10134,15 @@ var spine;
 					}
 				},
 				up: function (x, y) {
-					target = null;
+					if (target) {
+						target = null;
+					}
+					else {
+						if (_this.paused)
+							_this.play();
+						else
+							_this.pause();
+					}
 				},
 				dragged: function (x, y) {
 					if (target != null) {
@@ -10166,7 +10175,6 @@ var spine;
 			});
 			var mouseOverControls = true;
 			var mouseOverCanvas = false;
-			var cancelId = 0;
 			parent.addEventListener("mousemove", function (ev) {
 				if (ev instanceof MouseEvent) {
 					if (!_this.config.showControls)
@@ -10174,22 +10182,20 @@ var spine;
 					var popup = findWithClass(_this.dom, "spine-player-popup");
 					mouseOverControls = overlap(ev, _this.playerControls.getBoundingClientRect());
 					mouseOverCanvas = overlap(ev, _this.canvas.getBoundingClientRect());
-					clearTimeout(cancelId);
+					clearTimeout(_this.cancelId);
 					var hide = popup.length == 0 && !mouseOverControls && !mouseOverCanvas && !_this.paused;
 					if (hide) {
-						console.log("hidding");
 						_this.playerControls.classList.add("spine-player-controls-hidden");
 					}
 					else {
-						console.log("showing");
 						_this.playerControls.classList.remove("spine-player-controls-hidden");
 					}
 					if (!mouseOverControls && popup.length == 0 && !_this.paused) {
 						var remove = function () {
-							console.log("hidding timeout");
-							_this.playerControls.classList.add("spine-player-controls-hidden");
+							if (!_this.paused)
+								_this.playerControls.classList.add("spine-player-controls-hidden");
 						};
-						cancelId = setTimeout(remove, 500);
+						_this.cancelId = setTimeout(remove, 500);
 					}
 				}
 			});
@@ -10200,7 +10206,13 @@ var spine;
 			};
 		};
 		SpinePlayer.prototype.play = function () {
+			var _this = this;
 			this.paused = false;
+			var remove = function () {
+				if (!_this.paused)
+					_this.playerControls.classList.add("spine-player-controls-hidden");
+			};
+			this.cancelId = setTimeout(remove, 500);
 			this.playButton.classList.remove("spine-player-button-icon-play");
 			this.playButton.classList.add("spine-player-button-icon-pause");
 			if (this.config.animation) {
@@ -10211,6 +10223,8 @@ var spine;
 		};
 		SpinePlayer.prototype.pause = function () {
 			this.paused = true;
+			this.playerControls.classList.remove("spine-player-controls-hidden");
+			clearTimeout(this.cancelId);
 			this.playButton.classList.remove("spine-player-button-icon-pause");
 			this.playButton.classList.add("spine-player-button-icon-play");
 		};

spine-ts/player/src/Player.ts

@@ -952,6 +952,7 @@
 			this.loaded = true;
 		}
 
+		private cancelId = 0;
 		setupInput () {
 			let controlBones = this.config.controlBones;
 			let selectedBones = this.selectedBones = new Array<Bone>(this.config.controlBones.length);
@@ -975,7 +976,14 @@
 					}
 				},
 				up: (x, y) => {
-					target = null;
+					if (target) {
+						target = null;
+					} else {
+						if (this.paused)
+							this.play()
+						else
+							this.pause();
+					}
 				},
 				dragged: (x, y) => {
 					if (target != null) {
@@ -1012,7 +1020,6 @@
 			// area :/
 			var mouseOverControls = true;
 			var mouseOverCanvas = false;
-			let cancelId = 0;
 			parent.addEventListener("mousemove", (ev: UIEvent) => {
 				if (ev instanceof MouseEvent) {
 					if (!this.config.showControls) return;
@@ -1020,21 +1027,18 @@
 					let popup = findWithClass(this.dom, "spine-player-popup");
 					mouseOverControls = overlap(ev, this.playerControls.getBoundingClientRect());
 					mouseOverCanvas = overlap(ev, this.canvas.getBoundingClientRect());
-					clearTimeout(cancelId);
+					clearTimeout(this.cancelId);
 					let hide = popup.length == 0 && !mouseOverControls && !mouseOverCanvas && !this.paused;
 					if (hide) {
-						console.log("hidding");
 						this.playerControls.classList.add("spine-player-controls-hidden");
 					} else {
-						console.log("showing");
 						this.playerControls.classList.remove("spine-player-controls-hidden");
 					}
 					if (!mouseOverControls && popup.length == 0 && !this.paused) {
 						let remove = () => {
-							console.log("hidding timeout");
-							this.playerControls.classList.add("spine-player-controls-hidden");
+							if (!this.paused) this.playerControls.classList.add("spine-player-controls-hidden");
 						};
-						cancelId = setTimeout(remove, 500);
+						this.cancelId = setTimeout(remove, 500);
 					}
 				}
 			});
@@ -1048,6 +1052,10 @@
 
 		private play () {
 			this.paused = false;
+			let remove = () => {
+				if (!this.paused) this.playerControls.classList.add("spine-player-controls-hidden");
+			};
+			this.cancelId = setTimeout(remove, 500);
 			this.playButton.classList.remove("spine-player-button-icon-play");
 			this.playButton.classList.add("spine-player-button-icon-pause");
 
@@ -1060,6 +1068,9 @@
 
 		private pause () {
 			this.paused = true;
+			this.playerControls.classList.remove("spine-player-controls-hidden");
+			clearTimeout(this.cancelId);
+
 			this.playButton.classList.remove("spine-player-button-icon-pause");
 			this.playButton.classList.add("spine-player-button-icon-play");
 		}