Home Explore Help
Sign In
archive
/
spine-runtimes
mirror of https://github.com/EsotericSoftware/spine-runtimes.git
2
0
Fork 0
Files Issues 0 Wiki
Browse Source

[ts][player] Handle fullscreen changes on mobile correctly.

badlogic 6 years ago
parent
980ae773d3
commit
88aaa7e70c
4 changed files with 43 additions and 19 deletions
Unified View Show Diff Stats
  1. 19 9
      spine-ts/build/spine-widget.js
  2. 0 0
      spine-ts/build/spine-widget.js.map
  3. 1 1
      spine-ts/widget/example/player-test.html
  4. 23 9
      spine-ts/widget/src/Player.ts

+ 19 - 9
spine-ts/build/spine-widget.js
View File 

@@ -9666,8 +9666,25 @@ var spine;
 
             };
 
             };
 
             var oldWidth = this.canvas.clientWidth;
 
             var oldWidth = this.canvas.clientWidth;
 
             var oldHeight = this.canvas.clientHeight;
 
             var oldHeight = this.canvas.clientHeight;
 
+            var oldStyleWidth = this.canvas.style.width;
 
+            var oldStyleHeight = this.canvas.style.height;
 
+            var isFullscreen = false;
 
             fullscreenButton.onclick = function () {
 
             fullscreenButton.onclick = function () {
 
+                var fullscreenChanged = function () {
 
+                    isFullscreen = !isFullscreen;
 
+                    if (!isFullscreen) {
 
+                        _this.canvas.style.width = "" + oldWidth + "px";
 
+                        _this.canvas.style.height = "" + oldHeight + "px";
 
+                        _this.drawFrame(false);
 
+                        requestAnimationFrame(function () {
 
+                            _this.canvas.style.width = oldStyleWidth;
 
+                            _this.canvas.style.height = oldStyleHeight;
 
+                        });
 
+                    }
 
+                };
 
                 var doc = document;
 
                 var doc = document;
 
+                dom.onfullscreenchange = fullscreenChanged;
 
+                dom.onwebkitfullscreenchange = fullscreenChanged;
 
                 if (doc.fullscreenElement || doc.webkitFullscreenElement || doc.mozFullScreenElement || doc.msFullscreenElement) {
 
                 if (doc.fullscreenElement || doc.webkitFullscreenElement || doc.mozFullScreenElement || doc.msFullscreenElement) {
 
                     if (doc.exitFullscreen)
 
                     if (doc.exitFullscreen)
 
                         doc.exitFullscreen();
 
                         doc.exitFullscreen();
 
@@ -9677,19 +9694,12 @@ var spine;
 
                         doc.webkitExitFullscreen();
 
                         doc.webkitExitFullscreen();
 
                     else if (doc.msExitFullscreen)
 
                     else if (doc.msExitFullscreen)
 
                         doc.msExitFullscreen();
 
                         doc.msExitFullscreen();
 
-                    var oldStyleWidth_1 = _this.canvas.style.width;
 
-                    var oldStyleHeight_1 = _this.canvas.style.height;
 
-                    _this.canvas.style.width = "" + oldWidth + "px";
 
-                    _this.canvas.style.height = "" + oldHeight + "px";
 
-                    _this.drawFrame(false);
 
-                    requestAnimationFrame(function () {
 
-                        _this.canvas.style.width = oldStyleWidth_1;
 
-                        _this.canvas.style.height = oldStyleHeight_1;
 
-                    });
 
                 }
 
                 }
 
                 else {
 
                 else {
 
                     oldWidth = _this.canvas.clientWidth;
 
                     oldWidth = _this.canvas.clientWidth;
 
                     oldHeight = _this.canvas.clientHeight;
 
                     oldHeight = _this.canvas.clientHeight;
 
+                    oldStyleWidth = _this.canvas.style.width;
 
+                    oldStyleHeight = _this.canvas.style.height;
 
                     var player = dom;
 
                     var player = dom;
 
                     if (player.requestFullscreen)
 
                     if (player.requestFullscreen)
 
                         player.requestFullscreen();
 
                         player.requestFullscreen();

File diff suppressed because it is too large
+ 0 - 0
spine-ts/build/spine-widget.js.map


+ 1 - 1
spine-ts/widget/example/player-test.html
View File 

@@ -15,7 +15,7 @@ body {
 
 </style>
 
 </style>
 
 
 
 <body>
 
 <body>
 
-	<div id="container" style="width: 480px; height: 200px;"></div>
 
+	<div id="container" style="width: 100%; height: 90vh;"></div>
 
 </body>
 
 </body>
 
 <script>
 
 <script>
 
 	new spine.SpinePlayer(document.getElementById("container"), {
 
 	new spine.SpinePlayer(document.getElementById("container"), {

+ 23 - 9
spine-ts/widget/src/Player.ts
View File 

@@ -431,25 +431,39 @@
 
 
 
 			let oldWidth = this.canvas.clientWidth;
 
 			let oldWidth = this.canvas.clientWidth;
 
 			let oldHeight = this.canvas.clientHeight;
 
 			let oldHeight = this.canvas.clientHeight;
 
+			let oldStyleWidth = this.canvas.style.width;
 
+			let oldStyleHeight = this.canvas.style.height;
 
+			var isFullscreen = false;
 
 			fullscreenButton.onclick = () => {
 
 			fullscreenButton.onclick = () => {
 
+				let fullscreenChanged = () => {
 
+					isFullscreen = !isFullscreen;
 
+					if (!isFullscreen) {
 
+						this.canvas.style.width = "" + oldWidth + "px";
 
+						this.canvas.style.height = "" + oldHeight + "px";
 
+						this.drawFrame(false);
 
+						// Got to reset the style to whatever the user set
 
+						// after the next layouting.
 
+						requestAnimationFrame(() => {
 
+							this.canvas.style.width = oldStyleWidth;
 
+							this.canvas.style.height = oldStyleHeight;
 
+						});
 
+					}
 
+				};
 
+
 
 				let doc = document as any;
 
 				let doc = document as any;
 
+				(dom as any).onfullscreenchange = fullscreenChanged;
 
+				dom.onwebkitfullscreenchange = fullscreenChanged;
 
+
 
 				if(doc.fullscreenElement || doc.webkitFullscreenElement || doc.mozFullScreenElement || doc.msFullscreenElement) {
 
 				if(doc.fullscreenElement || doc.webkitFullscreenElement || doc.mozFullScreenElement || doc.msFullscreenElement) {
 
 					if (doc.exitFullscreen) doc.exitFullscreen();
 
 					if (doc.exitFullscreen) doc.exitFullscreen();
 
 					else if (doc.mozCancelFullScreen) doc.mozCancelFullScreen();
 
 					else if (doc.mozCancelFullScreen) doc.mozCancelFullScreen();
 
 					else if (doc.webkitExitFullscreen) doc.webkitExitFullscreen()
 
 					else if (doc.webkitExitFullscreen) doc.webkitExitFullscreen()
 
 					else if (doc.msExitFullscreen) doc.msExitFullscreen();
 
 					else if (doc.msExitFullscreen) doc.msExitFullscreen();
 
-					let oldStyleWidth = this.canvas.style.width;
 
-					let oldStyleHeight = this.canvas.style.height;
 
-					this.canvas.style.width = "" + oldWidth + "px";
 
-					this.canvas.style.height = "" + oldHeight + "px";
 
-					this.drawFrame(false);
 
-					requestAnimationFrame(() => {
 
-						this.canvas.style.width = oldStyleWidth;
 
-						this.canvas.style.height = oldStyleHeight;
 
-					});
 
 				} else {
 
 				} else {
 
 					oldWidth = this.canvas.clientWidth;
 
 					oldWidth = this.canvas.clientWidth;
 
 					oldHeight = this.canvas.clientHeight;
 
 					oldHeight = this.canvas.clientHeight;
 
+					oldStyleWidth = this.canvas.style.width;
 
+					oldStyleHeight = this.canvas.style.height;
 
 					let player = dom as any;
 
 					let player = dom as any;
 
 					if (player.requestFullscreen) player.requestFullscreen();
 
 					if (player.requestFullscreen) player.requestFullscreen();
 
 					else if (player.webkitRequestFullScreen) player.webkitRequestFullScreen();
 
 					else if (player.webkitRequestFullScreen) player.webkitRequestFullScreen();

Some files were not shown because too many files changed in this diff