diff --git a/plugins/in-app-menu/front.js b/plugins/in-app-menu/front.js index aa025f3d..26d5992d 100644 --- a/plugins/in-app-menu/front.js +++ b/plugins/in-app-menu/front.js @@ -1,6 +1,7 @@ const { ipcRenderer } = require("electron"); const config = require("../../config"); const { Titlebar, Color } = require("custom-electron-titlebar"); +const { isEnabled } = require("../../config/plugins"); function $(selector) { return document.querySelector(selector); } module.exports = () => { @@ -25,6 +26,12 @@ module.exports = () => { } }); + if (isEnabled("picture-in-picture")) { + ipcRenderer.on("pip-toggle", (_, pipEnabled) => { + bar.refreshMenu(); + }); + } + // Increases the right margin of Navbar background when the scrollbar is visible to avoid blocking it (z-index doesn't affect it) document.addEventListener('apiLoaded', () => { setNavbarMargin(); diff --git a/plugins/picture-in-picture/adaptors/in-app-menu.js b/plugins/picture-in-picture/adaptors/in-app-menu.js new file mode 100644 index 00000000..a96ae967 --- /dev/null +++ b/plugins/picture-in-picture/adaptors/in-app-menu.js @@ -0,0 +1,37 @@ +const { Menu, app } = require("electron"); +const { setApplicationMenu } = require("../../../menu"); + +module.exports = (win, options, setOptions, togglePip, isInPip) => { + if (isInPip) { + Menu.setApplicationMenu(Menu.buildFromTemplate([ + { + label: "App", + submenu: [ + { + label: "Exit Picture in Picture", + click: togglePip, + }, + { + label: "Always on top", + type: "checkbox", + checked: options.alwaysOnTop, + click: (item) => { + setOptions({ alwaysOnTop: item.checked }); + win.setAlwaysOnTop(item.checked); + }, + }, + { + label: "Restart", + click: () => { + app.relaunch(); + app.quit(); + }, + }, + { role: "quit" }, + ], + }, + ])); + } else { + setApplicationMenu(win); + } +}; diff --git a/plugins/picture-in-picture/back.js b/plugins/picture-in-picture/back.js index c4a0bb40..f462a2b7 100644 --- a/plugins/picture-in-picture/back.js +++ b/plugins/picture-in-picture/back.js @@ -2,7 +2,7 @@ const path = require("path"); const { app, ipcMain } = require("electron"); -const { setOptions } = require("../../config/plugins"); +const { setOptions, isEnabled } = require("../../config/plugins"); const { injectCSS } = require("../utils"); let isInPiP = false; @@ -22,6 +22,15 @@ const setLocalOptions = (_options) => { setOptions("picture-in-picture", _options); } + +const adaptors = []; +const runAdaptors = () => adaptors.forEach(a => a()); + +if (isEnabled("in-app-menu")) { + let adaptor = require("./adaptors/in-app-menu"); + adaptors.push(() => adaptor(win, options, setLocalOptions, togglePiP, isInPiP)); +} + const togglePiP = async () => { isInPiP = !isInPiP; setLocalOptions({ isInPiP }); @@ -38,44 +47,24 @@ const togglePiP = async () => { win.webContents.on("before-input-event", blockShortcutsInPiP); win.setFullScreenable(false); - await win.webContents.executeJavaScript( - // Go fullscreen - ` - var exitButton = document.querySelector(".exit-fullscreen-button"); - exitButton.replaceWith(exitButton.cloneNode(true)); - document.querySelector(".exit-fullscreen-button").onclick = () => togglePictureInPicture(); - var onPlayerDblClick = document.querySelector('#player').onDoubleClick_ - document.querySelector('#player').onDoubleClick_ = () => {}; - document.querySelector('#expanding-menu').onmouseleave = () => document.querySelector('.middle-controls').click(); - if (!document.querySelector("ytmusic-player-page").playerPageOpen_) { - document.querySelector(".toggle-player-page-button").click(); - } - document.querySelector(".fullscreen-button").click(); - document.querySelector("ytmusic-player-bar").classList.add("pip"); - ` - ); - win.setFullScreenable(true); + runAdaptors(); + win.webContents.send("pip-toggle", true); app.dock?.hide(); win.setVisibleOnAllWorkspaces(true, { visibleOnFullScreen: true, }); app.dock?.show(); - win.setAlwaysOnTop(true, "screen-saver", 1); + if (options.alwaysOnTop) { + win.setAlwaysOnTop(true, "screen-saver", 1); + } } else { win.webContents.removeListener("before-input-event", blockShortcutsInPiP); + win.setFullScreenable(true); - await win.webContents.executeJavaScript( - // Exit fullscreen - ` - document.querySelector('#player').onDoubleClick_ = onPlayerDblClick; - document.querySelector('#expanding-menu').onmouseleave = undefined; - document.querySelector(".exit-fullscreen-button").replaceWith(exitButton); - document.querySelector(".exit-fullscreen-button").click(); - document.querySelector("ytmusic-player-bar").classList.remove("pip"); - ` - ); + runAdaptors(); + win.webContents.send("pip-toggle", false); win.setVisibleOnAllWorkspaces(false); win.setAlwaysOnTop(false); @@ -114,4 +103,3 @@ module.exports = (_win, _options) => { }; module.exports.setOptions = setLocalOptions; - diff --git a/plugins/picture-in-picture/front.js b/plugins/picture-in-picture/front.js index ea03cedd..f57f20ae 100644 --- a/plugins/picture-in-picture/front.js +++ b/plugins/picture-in-picture/front.js @@ -28,10 +28,46 @@ global.togglePictureInPicture = () => { ipcRenderer.send("picture-in-picture"); }; +const listenForToggle = () => { + const originalExitButton = $(".exit-fullscreen-button"); + const clonedExitButton = originalExitButton.cloneNode(true); + clonedExitButton.onclick = () => togglePictureInPicture(); + + const player = $('#player'); + const onPlayerDblClick = player.onDoubleClick_; + + const playerBar = $("ytmusic-player-bar"); + const expandMenu = $('#expanding-menu'); + const middleControls = $('.middle-controls'); + const playerPage = $("ytmusic-player-page"); + const togglePlayerPageButton = $(".toggle-player-page-button"); + const fullScreenButton = $(".fullscreen-button"); + + ipcRenderer.on('pip-toggle', (_, isPip) => { + if (isPip) { + $(".exit-fullscreen-button").replaceWith(clonedExitButton); + player.onDoubleClick_ = () => {}; + expandMenu.onmouseleave = () => middleControls.click(); + if (!playerPage.playerPageOpen_) { + togglePlayerPageButton.click(); + } + fullScreenButton.click(); + playerBar.classList.add("pip"); + } else { + $(".exit-fullscreen-button").replaceWith(originalExitButton); + player.onDoubleClick_ = onPlayerDblClick; + expandMenu.onmouseleave = undefined; + originalExitButton.click(); + playerBar.classList.remove("pip"); + } + }); +} + function observeMenu(options) { document.addEventListener( "apiLoaded", () => { + listenForToggle(); const minButton = $(".player-minimize-button"); // remove native listeners minButton.replaceWith(minButton.cloneNode(true)); diff --git a/plugins/picture-in-picture/menu.js b/plugins/picture-in-picture/menu.js index f996a57f..c2eb35cd 100644 --- a/plugins/picture-in-picture/menu.js +++ b/plugins/picture-in-picture/menu.js @@ -1,6 +1,15 @@ const { setOptions } = require("./back.js"); -module.exports = (_win, options) => [ +module.exports = (win, options) => [ + { + label: "Always on top", + type: "checkbox", + checked: options.alwaysOnTop, + click: (item) => { + setOptions({ alwaysOnTop: item.checked }); + win.setAlwaysOnTop(item.checked); + }, + }, { label: "Save window position", type: "checkbox",