[FEATURE]: Picture in Picture

[bittricky]

Picture in Picture Video Userscript

Description

Create a userscript that enables Picture-in-Picture (PiP) mode for any video element on any website. The script should detect embedded <video> elements, add a floating PiP button, and allow users to toggle PiP mode with a click.

Features

• Detects all <video> elements on a webpage.
• Adds a floating PiP button to each detected video.
• Allows users to enter/exit PiP mode by clicking the button.
• Works across multiple websites dynamically.
• Supports keyboard shortcut (Alt + P) for quick toggling.

---

Implementation Notes

Detect Video Elements

• Use document.querySelectorAll('video') to find all video elements.
• Observe the DOM for dynamically loaded videos using MutationObserver.

Add PiP Toggle Button

• Inject a small floating button into each detected video.
• Style the button to be unobtrusive and draggable.
• When clicked, the button should activate PiP mode.

Handle PiP Mode

• Use the requestPictureInPicture() API to activate PiP.
• Detect when PiP mode is exited using document.onleavepictureinpicture.
• Ensure multiple videos do not enter PiP simultaneously.

Keyboard Shortcut

• Listen for Alt + P using the keydown event to toggle PiP mode for the currently playing video.

---

JavaScript APIs

• document.querySelectorAll('video') – Find all video elements on a page.
• MutationObserver – Watch for dynamically added videos.
• requestPictureInPicture() – Enable PiP mode for a video.
• document.onleavepictureinpicture – Detect when PiP mode is exited.
• addEventListener('keydown', callback) – Implement keyboard shortcuts.
• element.style – Modify the button’s appearance dynamically.