Picture in Picture API?

As addon developer I have to say I really miss the PiP API.

For example, I would love to see a minimize button (or some “shrink” button), and some predefined resize buttons (like “Resize to 1920x1080”).

And all we need is some light API. Maybe even reuse existing API, like the browser.windows.update and write a simple proxy that would translate those calls into native ones.

And for the DOM access we would use content scripts - although I can imagine this being a bit harder if the DOM is not sandboxed enough.

Proof of concept:
With some AI help, the code literally writes itself :smiley: , so quickly I’ve manged to resize the window and move it to the corner by executing this in the Browser Console (Ctrl + Shift + J):

await (async () => {
  const w = Array.from(Services.wm.getEnumerator("")).find(win => win.location.href === "chrome://global/content/pictureinpicture/player.xhtml");
  if (w) {
    const dpr = w.devicePixelRatio;
    
    // Get current dimensions to calculate the aspect ratio
    const currentWidth = w.innerWidth;
    const currentHeight = w.innerHeight;
    const aspectRatio = currentHeight / currentWidth;
    console.log("Current dimensions:", currentWidth, currentHeight);
    console.log("Current aspect ratio:", aspectRatio);
    
    // Desired width in physical pixels
    const desiredWidth = 1920;
    
    // Calculate height based on the current aspect ratio
    const desiredHeight = Math.round(desiredWidth * aspectRatio);
    
    // Calculate dimensions accounting for the device pixel ratio
    const targetWidth = Math.round(desiredWidth / dpr);
    const targetHeight = Math.round(desiredHeight / dpr);
    
    // Move the window to position (0,0) and resize it
    w.moveTo(0, 0);
    w.resizeTo(targetWidth, targetHeight);
    
    // Verify the new size and position
    console.log("Requested physical size:", desiredWidth, desiredHeight);
    console.log("CSS pixel size:", targetWidth, targetHeight);
    console.log("Actual size after resize:", w.innerWidth * dpr, w.innerHeight * dpr);
  } 
  else {
    console.log("PiP window not found");
  }
})()

I have a feeling I’ll start hacking my Firefox soon :smiley: .

Huh, I haven’t heard of a PiP API for add-ons. I just tried to dig through old docs but I wasn’t able to find a reference to this API. Or by “miss” did you mean that you feel it’s absence?

If you haven’t already, might be worth opening a feature request for this on bugzil.la or the WECG’s issue tracker.

1 Like

Good idea!
Yes, there is no API yet, and it would be nice to have one.
I’ll see if I can think of some good looking proposal.

From my POV the main things that would be helpful to progress the discussion is a clear understanding of what you’re trying to accomplish and why. What use case are you facilitating? What capabilities do you expect you’d need? Which of them are must haves and which are nice to haves?

1 Like