smueller/youtube-music
1
0
Fork 0
mirror of https://github.com/th-ch/youtube-music.git synced 2026-01-15 04:11:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1013 from th-ch/native-pip

Browse Source 
Add option `useNativePiP` in PiP plugin to use native PiP
This commit is contained in:
th-ch
2023-02-12 18:50:26 +01:00
committed by GitHub
parent 735fd39c3c 7f66ff2c0c
commit 34f56df2ec
2 changed files with 49 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
plugins/picture-in-picture/front.js
View File

@ -1,13 +1,14 @@
const { ipcRenderer } = require("electron"); const { ipcRenderer } = require("electron");
const { toKeyEvent } = require('keyboardevent-from-electron-accelerator'); const { toKeyEvent } = require("keyboardevent-from-electron-accelerator");
const keyEventAreEqual = require('keyboardevents-areequal'); const keyEventAreEqual = require("keyboardevents-areequal");
const { getSongMenu } = require("../../providers/dom-elements"); const { getSongMenu } = require("../../providers/dom-elements");
const { ElementFromFile, templatePath } = require("../utils"); const { ElementFromFile, templatePath } = require("../utils");
function $(selector) { return document.querySelector(selector); } function $(selector) { return document.querySelector(selector); }
let useNativePiP = false;
let menu = null; let menu = null;
const pipButton = ElementFromFile( const pipButton = ElementFromFile(
templatePath(__dirname, "picture-in-picture.html") templatePath(__dirname, "picture-in-picture.html")
@ -42,8 +43,24 @@ const observer = new MutationObserver(() => {
menu.prepend(pipButton); menu.prepend(pipButton);
}); });
global.togglePictureInPicture = () => { global.togglePictureInPicture = async () => {
if (useNativePiP) {
const isInPiP = document.pictureInPictureElement !== null;
const video = $("video");
const togglePiP = () =>
isInPiP
? document.exitPictureInPicture.call(document)
: video.requestPictureInPicture.call(video);
try {
await togglePiP();
$("#icon").click(); // Close the menu
return true;
} catch {}
}
ipcRenderer.send("picture-in-picture"); ipcRenderer.send("picture-in-picture");
return false;
}; };
const listenForToggle = () => { const listenForToggle = () => {
@ -57,11 +74,12 @@ const listenForToggle = () => {
const player = $('#player'); const player = $('#player');
const onPlayerDblClick = player.onDoubleClick_; const onPlayerDblClick = player.onDoubleClick_;
const titlebar = $('.cet-titlebar'); const titlebar = $(".cet-titlebar");
ipcRenderer.on('pip-toggle', (_, isPip) => { ipcRenderer.on("pip-toggle", (_, isPip) => {
if (isPip) { if (isPip) {
replaceButton(".exit-fullscreen-button", originalExitButton).onclick = () => togglePictureInPicture(); replaceButton(".exit-fullscreen-button", originalExitButton).onclick =
() => togglePictureInPicture();
player.onDoubleClick_ = () => {}; player.onDoubleClick_ = () => {};
expandMenu.onmouseleave = () => middleControls.click(); expandMenu.onmouseleave = () => middleControls.click();
if (!playerPage.playerPageOpen_) { if (!playerPage.playerPageOpen_) {
@ -69,27 +87,28 @@ const listenForToggle = () => {
} }
fullScreenButton.click(); fullScreenButton.click();
appLayout.classList.add("pip"); appLayout.classList.add("pip");
if (titlebar) titlebar.style.display = 'none'; if (titlebar) titlebar.style.display = "none";
} else { } else {
$(".exit-fullscreen-button").replaceWith(originalExitButton); $(".exit-fullscreen-button").replaceWith(originalExitButton);
player.onDoubleClick_ = onPlayerDblClick; player.onDoubleClick_ = onPlayerDblClick;
expandMenu.onmouseleave = undefined; expandMenu.onmouseleave = undefined;
originalExitButton.click(); originalExitButton.click();
appLayout.classList.remove("pip"); appLayout.classList.remove("pip");
if (titlebar) titlebar.style.display = 'flex'; if (titlebar) titlebar.style.display = "flex";
} }
}); });
} }
function observeMenu() { function observeMenu(options) {
useNativePiP = options.useNativePiP;
document.addEventListener( document.addEventListener(
"apiLoaded", "apiLoaded",
() => { () => {
listenForToggle(); listenForToggle();
// remove native listeners
cloneButton(".player-minimize-button").onclick = () => { cloneButton(".player-minimize-button").onclick = async () => {
global.togglePictureInPicture(); await global.togglePictureInPicture();
setTimeout(() => $('#player').click()); setTimeout(() => $("#player").click());
}; };
// allows easily closing the menu by programmatically clicking outside of it // allows easily closing the menu by programmatically clicking outside of it
@ -105,12 +124,15 @@ function observeMenu() {
} }
module.exports = (options) => { module.exports = (options) => {
observeMenu(); observeMenu(options);
if (options.hotkey) { if (options.hotkey) {
const hotkeyEvent = toKeyEvent(options.hotkey); const hotkeyEvent = toKeyEvent(options.hotkey);
window.addEventListener('keydown', (event) => { window.addEventListener("keydown", (event) => {
if (keyEventAreEqual(event, hotkeyEvent) && !$('ytmusic-search-box').opened) { if (
keyEventAreEqual(event, hotkeyEvent) &&
!$("ytmusic-search-box").opened
) {
togglePictureInPicture(); togglePictureInPicture();
} }
}); });

8
plugins/picture-in-picture/menu.js
View File

@ -56,5 +56,13 @@ module.exports = (win, options) => [
item.checked = !item.checked; item.checked = !item.checked;
} }
}, },
},
{
label: "Use native PiP",
type: "checkbox",
checked: options.useNativePiP,
click: (item) => {
setOptions({ useNativePiP: item.checked });
},
} }
]; ];