Xcode 12.3 iOS 12.4+ iPhone Application
I have a view controller which contains wkwebview which gets initialized on startup. This is on the framework side. An enclosing app adds this view onto their view controller as a subview. The app is purely HTML and javascript-based app. We render HTML pages based on user interaction. Everything works fine except for an issue with the Lock Screen
On a particular screen, there is some animation running while updating some values on the screen as well. When the app is moved to the background, the app runs fine but when I Lock the Screen and come back to the app, the animation and all processing on the screen are frozen. I would have to start the process back from the home screen.
I noticed that both moving to background and lock screen have the same state changes such as did enter the background and will enter foreground but in one case, everything is frozen. Could someone please let me know what might be the problem and what would be a solution in this scenario?
Thank you.
Edit
This is the animation called on the html page...the screen is expecting some values which is sent from framework once done processing
let showNextItemJS = """
function startNextAnimation() {
var box = document.querySelector('\(boxElement)');
if(box) {
var thisItem = box.querySelector('\(diagnosticItem)');
var statusStr = '\(statusStr)'
if (thisItem) {
thisItem.classList.add('start');
if (statusStr != 'none') {
thisItem.classList.add(statusStr);
}
}
} else {
var thisItem = document.querySelector('\(diagnosticItem)');
var statusStr = '\(statusStr)'
if (thisItem) {
thisItem.classList.add('start');
if (statusStr != 'none') {
thisItem.classList.add(statusStr);
}
}
}
};
function stopLastAnimaation() {
var box = document.querySelector('\(boxElement)');
if(box) {
var lastItem = box.querySelector('\(lastDiagnosticItem)');
if (lastItem) {
lastItem.classList.add('finish');
}
} else {
var lastItem = document.querySelector('\(lastDiagnosticItem)');
if (lastItem) {
lastItem.classList.add('finish');
}
}
};
startNextAnimation()
stopLastAnimaation()
"""
callJavaScript(showNextItemJS)
Related
How can I disable the display setting changes in the device settings?
I solved the font side of the same problem with the following code:
if (Text.defaultProps) {
Text.defaultProps.allowFontScaling = false
} else {
Text.defaultProps = {}
Text.defaultProps.allowFontScaling = false
View.defaultProps = {}
}
but I can't do the same for 'Display Settings'.
here is my ask screen on phone settings:
I hope that has been revealing
I have a simple video player which is inserted into page within an iframe, now I want when the video player is visible play the video otherwise pause the video. to achieve that am using the intersection observer function.
Here is html skeleton
<body>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
</body>
Here is js
var configFromParent = null;
window.addEventListener("message", function (event) {
var data = event.data;
if (data.action == "config") {
configFromParent = data;
}
var observer = new IntersectionObserver(function(entries) {
//console.log(entries);
if(entries[0]['isIntersecting'] === true) {
if(entries[0]['intersectionRatio'] === 1)
document.querySelector("#message").textContent = 'Target is fully visible in screen';
else if(entries[0]['intersectionRatio'] > 0.5){
$("#videoplayer")[0].play();
document.querySelector("#message").textContent = 'More than 50% of target is visible in screen';
}
else{
document.querySelector("#message").textContent = 'Less than 50% of target is visible in screen';
}
}
else {
$("#videoplayer video")[0].pause();
}
}, { threshold: [0, 0.5, 1] });
observer.observe(document.querySelector(".videoplayer"));
});
Now when scrolling my page nothing is happening, but when I change the parent src link to child iframe link everything works perfectly, but I want the iframe to be inside a parent iframe and when the video player is not visible pause the video otherwise play the video
What do I need to do solve this problem?
Observer is totally functional. https://codesandbox.io/s/loving-zhukovsky-chdds?file=/index.html this sandbox contains you html setup (not secure ofcourse). Scroll page down to see how message changes.
Secure frames behave in the same manner. You don't have to worry about it. But don't forget that IE may have no observer, you should handle it.
And I still assume that the problem in the post messaging
I have made photo editing web page and have this issue, serious.
I have made undo/redo code as follows.
state = Stack.pop();
canvas.fabric.loadFromJSON(state, function() {
canvas.fabric.renderAll();
});
And clearing the full screen with white color process is shown and that will push away lots of people.
I can remove this making another canvas but if then have to change whole structure of the webpage.
Is there any function in fabric.js to make it easily?
ex) display-previous-while-rendering?
In the latest version fabricjs makes possible to do not make the canvas flash.
If you cannot use latest ( 2.0.0beta5 ) do the following:
fabric.StaticCanvas.prototype.clear = function () {
this._objects.length = 0;
this.backgroundImage = null;
this.overlayImage = null;
this.backgroundColor = '';
this.overlayColor = '';
if (this._hasITextHandlers) {
this.off('mouse:up', this._mouseUpITextHandler);
this._iTextInstances = null;
this._hasITextHandlers = false;
}
this.clearContext(this.contextContainer);
this.fire('canvas:cleared');
this.renderOnAddRemove && this.requestRenderAll();
return this;
};
Having the renderAll under this.renderOnAddRemove bool condition, will not make the canvas flash since the loadFromJson process set that boolean to false.
Before I go into the problem I would like to say that this is the first time I'm trying to write javascript using OOP. So please bear with me and guide me if I doing anything wrong.
As title says I am using HTML5 video to play videos in my application and here is the code which I wrote.
I have created an object Screens where I have a video tag.
var Screens = {
getVideoScreen:function(){
return "<div id=\"celebration\"><video id=\"myvideo1\" width=\"300px\" ><source src=\"video/winning.mp4\" type=\"video/mp4\"></video></div> ";
},
getVideoElement:function() {
return $("#celebration");
}
};
This is an object where I actually control video.
var obj = Object.create(Screens);
obj.playVideo = (function() {
var videoFile = "";
var play = false;
function start() {
$("body").append(obj.getVideoScreen());
document.getElementById("myvideo1").play();
document.getElementById("myvideo1").addEventListener("ended",function(){
end(); console.log("end");
}, false);
}
function end() {
obj.getVideoElement().remove();
}
return {
startVideo:function(flag) {
play = flag;
if(play) {
start();
}
else {
end();
}
}
}
})();
I have a button and on click it plays video,
$("#start").click(function() {
obj.playVideo.startVideo(true);
});
This works fine for around 5 to 10 times and later on it doesn't work. Doesn't work mean I get a white screen and video doesn't play. I inspected the page and video tag is there but doesn't play the video. I really don't have any idea about what is going wrong. I saw few posts and that didn't help. Looking ahead for a help....
EDIT :
I am using chrome Version 26.0.1410.64 m. And I'm concerned only about this browser.
You can see this page.
I am building an email-like app with Sencha Touch, and I use NestedList widget for the navigation panel.
inbox
mail1
mail2
mail3
outbox
There are maybe many mails in the inbox, so I want to load it on demand, when user scroll to the end of the list, it will load next 10 items automatically and append new items to the list.
How can I achieve this ?
You could try something like the following:
var loadingItems = false;
var fetchItems = function () {
//fetch new items to add
loadingItems = false;
};
//nestedList: reference to the nestedList
//x: new x position
//y: new y position
var scrollListener = function(nestedList, x, y) {
//set some boundary for where we should start loading data
var screenBottom = nestedList.getHeight() - OFFSET;
//if we're within some region near the bottom of the list...
if((y >= screenBottom) && !loadingItems) {
loadingItems = true;
fetchItems();
}
};
nestedList.addListener("move", scrollListener);
Since Sencha Touch shares alot of code with ExtJS you might get an idea of how to achieve this by looking at the various liveGrid implementations in ExtJS since that is basically what you are creating.
This is the most stable and comprehensive livegrid i've used:
http://www.ext-livegrid.com/