I am investigating where to put a [.addEventListener(‘visibilitychange’, …] function?
Putting it in initialize by use of ‘window.’ (much like this https://codepen.io/bantic/pen/XpaLXZ) doesn’t work, and the approach in a classic Ui-script doesn’t work either:
Ui.prototype.bindEvents = function() {
var self = this;
var greyTier = self.div.querySelector('.gregreyTier');
if (greyTier){
greyTier.addEventListener('visibilitychange', function() {
console.log("changed visibility");
}, false);
};
{PS: I haven’t tried at the external HTML-carrying index-shell* yet; , which might work as in the codepen example - but would prefer at internal PC-level}
*)
<!doctype html>
<html>
<head>
<meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no' />
<meta charset='utf-8'>
<link rel="stylesheet" type="text/css" href="styles.css">
<link rel="manifest" href="manifest.json">
<style></style>
<title>Example</title>
<script src="playcanvas-stable.min.js"></script>
<script src="__settings__.js"></script>
</head>
<body>
<script src="__modules__.js"></script>
<script src="__start__.js"></script>
<script src="__loading__.js"></script>
<script>function () ... etc </script>
</body>
</html>
Hi @Thomas_Due_Nielsen,
Did you try adding the event to the document element? You can add this code in a regular script at the Playcanvas initialize() method (taken from the MDN JavaScript docs):
//startSimulation and pauseSimulation defined elsewhere
function handleVisibilityChange() {
if (document.hidden) {
pauseSimulation();
} else {
startSimulation();
}
}
document.addEventListener("visibilitychange", handleVisibilityChange, false);
1 Like
I was going to say that visibilitychange is a document event, not a DOM one according to a quick Google.
1 Like
So tried this adjustment put in to initialize:
document.addEventListener('visibilitychange', function () {
handleVisibilityChange();
}, false);
Ui.prototype.handleVisibilityChange = function () {
if (document.hidden) {
console.log("hidden");
} else {
console.log("not hidden");
}
};
- fruitless :-/ … or do you have another rewrite in mind?
You are calling a global function or locally scoped function here, not a property of the UI object.
You probably want something like this:
var self = this;
document.addEventListener('visibilitychange', function () {
self.handleVisibilityChange();
}, false);
Not working either, and I am a bit worried/doubtful around ‘visibilitychange’ working at the inner-PC JS-level at all.
Cf this works in the outer shell-domain:
<body>
<div id='log'>YoseMite test</div>
<script src="__modules__.js"></script>
<script src="__start__.js"></script>
<script src="__loading__.js"></script>
<script>
function log(message) {
console.log(message);
$('#log').append(message + '<br>');
}
log(document.visibilityState);
window.addEventListener("visibilitychange", function(e) {
log("changed visibility: " + document.visibilityState);
});</script>
</body>
</html>
Seems to be working fine, simple script to append on any entity in your project:
var DocumentVisibility = pc.createScript('documentVisibility');
// initialize code called once per entity
DocumentVisibility.prototype.initialize = function() {
var ref = this.onVisChange.bind(this);
document.addEventListener("visibilitychange", ref, false);
};
DocumentVisibility.prototype.onVisChange = function() {
if (document.hidden) {
console.log('hidden');
} else {
console.log('visible');
}
};
Interestingly, in my case the launch tab doesn’t trigger the event and carries on playing audio in the background.
After I publish, it does what I expect it to do
Yes get the same - thx to both of you … can work with this 
