UnityMirror/spine-runtimes
1
0
Fork 0
mirror of https://github.com/EsotericSoftware/spine-runtimes.git synced 2026-02-06 07:14:55 +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 oldHeight = this.canvas.clientHeight;
var oldStyleWidth = this.canvas.style.width;
var oldStyleHeight = this.canvas.style.height;
var isFullscreen = false;
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;
dom.onfullscreenchange = fullscreenChanged;
dom.onwebkitfullscreenchange = fullscreenChanged;
if (doc.fullscreenElement || doc.webkitFullscreenElement || doc.mozFullScreenElement || doc.msFullscreenElement) {
if (doc.exitFullscreen)
doc.exitFullscreen();
@ -9677,19 +9694,12 @@ var spine;
doc.webkitExitFullscreen();
else if (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 {
oldWidth = _this.canvas.clientWidth;
oldHeight = _this.canvas.clientHeight;
oldStyleWidth = _this.canvas.style.width;
oldStyleHeight = _this.canvas.style.height;
var player = dom;
if (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>
<body>
<div id="container" style="width: 480px; height: 200px;"></div>
<div id="container" style="width: 100%; height: 90vh;"></div>
</body>
<script>
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 oldHeight = this.canvas.clientHeight;
let oldStyleWidth = this.canvas.style.width;
let oldStyleHeight = this.canvas.style.height;
var isFullscreen = false;
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;
(dom as any).onfullscreenchange = fullscreenChanged;
dom.onwebkitfullscreenchange = fullscreenChanged;
if(doc.fullscreenElement || doc.webkitFullscreenElement || doc.mozFullScreenElement || doc.msFullscreenElement) {
if (doc.exitFullscreen) doc.exitFullscreen();
else if (doc.mozCancelFullScreen) doc.mozCancelFullScreen();
else if (doc.webkitExitFullscreen) doc.webkitExitFullscreen()
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 {
oldWidth = this.canvas.clientWidth;
oldHeight = this.canvas.clientHeight;
oldStyleWidth = this.canvas.style.width;
oldStyleHeight = this.canvas.style.height;
let player = dom as any;
if (player.requestFullscreen) player.requestFullscreen();
else if (player.webkitRequestFullScreen) player.webkitRequestFullScreen();