Develop Reference

Is there a way to resize the pip window without keeping the aspect ratio fixed?

I'm trying to modify Google's Picture in Picture Extension so I can resize the pip window without maintaining the fixed aspect ratio (stretch the sides individually). However, I'm not very familiar with Javascript.
Looking at the code, I expect the changes to be situated in these functions
async function requestPictureInPicture(video) {
await video.requestPictureInPicture();
video.setAttribute('__pip__', true);
video.addEventListener('leavepictureinpicture', event => {
video.removeAttribute('__pip__');
}, { once: true });
new ResizeObserver(maybeUpdatePictureInPictureVideo).observe(video);
}
function maybeUpdatePictureInPictureVideo(entries, observer) {
const observedVideo = entries[0].target;
if (!document.querySelector('[__pip__]')) {
observer.unobserve(observedVideo);
return;
}
const video = findLargestPlayingVideo();
if (video && !video.hasAttribute('__pip__')) {
observer.unobserve(observedVideo);
requestPictureInPicture(video);
}
}
Perhaps by tweaking the ResizeObserver?
the entirety of the source code can be found here. Is there a way to do this?

WkWebview javascript animation froze when screen locked

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)

Electron/Javascript: Detect when window is un/maximized

I am creating an electron application with a custom window bar in place of the default Windows one. I need to know when the window is maximized or un-maximized in order to change the icon on the window bar to reflect the window's state.

maximize / unmaximized event is availble for browserwindow. https://github.com/electron/electron/blob/master/docs/api/browser-window.md#event-maximize

you can use:
const { remote } = require("electron");
var win = remote.BrowserWindow.getFocusedWindow();
if(win.isFullScreen()) {
// your code here
}
or :
const { remote } = require("electron");
var win = remote.BrowserWindow.getFocusedWindow();
if(win.isMaximized()) {
// your code here
}

Canvas fabric.js renderAll makes white screen

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.

Customize / Style a Desktop Notification

I got a desktop notification using HTML5 up and running. However, the look and feel of the Desktop Notification seems too simple for my requirement.
Basically, the Desktop notification, as of now is just a simple Text message with a white background on a rectangle.
Below is the code i have used for displaying the Desktop notification:
<html>
<head>
<title>Notification HTML5</title>
<script>
function notifyMe() {
// Let's check if the browser supports notifications
if (!("Notification" in window)) {
alert("This browser does not support desktop notification");
}
// Let's check if the user is okay to get some notification
else if (Notification.permission === "granted") {
// If it's okay let's create a notification
var options = {
body: "This is the body of the notification",
//icon: "icon.jpg",
dir : "ltr"
};
var notification = new Notification("Hi there",options);
notification.onclick = function () {
//console.log("this:"+this);
//window.open("https://stackoverflow.com/");
Maximize();
};
}
// Otherwise, we need to ask the user for permission
// Note, Chrome does not implement the permission static property
// So we have to check for NOT 'denied' instead of 'default'
else if (Notification.permission !== 'denied') {
Notification.requestPermission(function (permission) {
// Whatever the user answers, we make sure we store the information
if (!('permission' in Notification)) {
Notification.permission = permission;
}
// If the user is okay, let's create a notification
if (permission === "granted") {
var options = {
body: "This is the body of the notification",
//icon: "icon.jpg",
dir : "ltr"
};
var notification = new Notification("Hi there",options);
}
});
}
// At last, if the user already denied any notification, and you
// want to be respectful there is no need to bother them any more.
}
function Maximize()
{
window.innerWidth = screen.width;
window.innerHeight = screen.height;
window.screenX = 0;
window.screenY = 0;
alwaysLowered = false;
}
</script>
</head>
<body>
<button onclick="notifyMe()" style="height: 80px;width: 311px;color:white;font-size: 24px;background: cadetblue;border: none;cursor: pointer;">Show me notification</button><br><br>
</body>
</html>
Below is the image illustrating the way in which the Desktop notification is rendered:
So my query is:
Is it possible to apply some styling to the appearance of the Desktop notification? Like displaying the font in Bold and italics and in a different colour and changing the background color of the Notification and may be rounding the corners of the rectangular Notification pop-up?
What i tried:
I learnt that previously we did have a way of doing this. That is by using the API createHTMLNotification(), but now the same has been deprecated. Also, i tried finding alternatives for the same Replacement for createHTMLNotification, but it lack's clarity.