UnityMirror/spine-runtimes
1
0
Fork 0
mirror of https://github.com/EsotericSoftware/spine-runtimes.git synced 2026-03-06 18:56:54 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
badlogic 2018-11-22 16:49:47 +01:00
parent 980ae773d3
commit 88aaa7e70c
4 changed files with 44 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
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();

2
spine-ts/build/spine-widget.js.map
View File

File diff suppressed because one or more lines are too long

2
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"), {

32
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();