diff --git a/plugins/picture-in-picture/adaptors/in-app-menu.js b/plugins/picture-in-picture/adaptors/in-app-menu.js deleted file mode 100644 index a96ae9679f..0000000000 --- a/plugins/picture-in-picture/adaptors/in-app-menu.js +++ /dev/null @@ -1,37 +0,0 @@ -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 d71acd4972..fd5e5511b7 100644 --- a/plugins/picture-in-picture/back.js +++ b/plugins/picture-in-picture/back.js @@ -3,7 +3,7 @@ const path = require("path"); const { app, ipcMain } = require("electron"); const electronLocalshortcut = require("electron-localshortcut"); -const { setOptions, isEnabled } = require("../../config/plugins"); +const { setOptions } = require("../../config/plugins"); const { injectCSS } = require("../utils"); let isInPiP = false; @@ -23,15 +23,6 @@ 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 }); @@ -50,7 +41,6 @@ const togglePiP = async () => { win.setMaximizable(false); win.setFullScreenable(false); - runAdaptors(); win.webContents.send("pip-toggle", true); app.dock?.hide(); @@ -66,7 +56,6 @@ const togglePiP = async () => { win.setMaximizable(true); win.setFullScreenable(true); - runAdaptors(); win.webContents.send("pip-toggle", false); win.setVisibleOnAllWorkspaces(false); diff --git a/plugins/picture-in-picture/front.js b/plugins/picture-in-picture/front.js index 788a908e90..eee48f3ba7 100644 --- a/plugins/picture-in-picture/front.js +++ b/plugins/picture-in-picture/front.js @@ -54,6 +54,8 @@ const listenForToggle = () => { const player = $('#player'); const onPlayerDblClick = player.onDoubleClick_; + const titlebar = $('.cet-titlebar'); + ipcRenderer.on('pip-toggle', (_, isPip) => { if (isPip) { replaceButton(".exit-fullscreen-button", originalExitButton).onclick = () => togglePictureInPicture(); @@ -64,12 +66,14 @@ const listenForToggle = () => { } fullScreenButton.click(); appLayout.classList.add("pip"); + if (titlebar) titlebar.style.display = 'none'; } else { $(".exit-fullscreen-button").replaceWith(originalExitButton); player.onDoubleClick_ = onPlayerDblClick; expandMenu.onmouseleave = undefined; originalExitButton.click(); appLayout.classList.remove("pip"); + if (titlebar) titlebar.style.display = 'flex'; } }); } @@ -80,7 +84,7 @@ function observeMenu(options) { () => { listenForToggle(); // remove native listeners - cloneButton(".player-minimize-button").onclick = () => { + cloneButton(".player-minimize-button").onclick = () => { global.togglePictureInPicture(); setTimeout(() => $('#player').click()); }; diff --git a/plugins/picture-in-picture/style.css b/plugins/picture-in-picture/style.css index 1856e01b43..a7430739f4 100644 --- a/plugins/picture-in-picture/style.css +++ b/plugins/picture-in-picture/style.css @@ -3,9 +3,9 @@ ytmusic-app-layout.pip ytmusic-player-bar svg, ytmusic-app-layout.pip ytmusic-player-bar .time-info, ytmusic-app-layout.pip ytmusic-player-bar yt-formatted-string, ytmusic-app-layout.pip ytmusic-player-bar .yt-formatted-string { - filter: drop-shadow(2px 4px 6px black); - color: white !important; - fill: white !important; + filter: drop-shadow(2px 4px 6px black); + color: white !important; + fill: white !important; } /* improve the style of the player bar expanding menu */ @@ -20,6 +20,23 @@ ytmusic-app-layout.pip ytmusic-player-expanding-menu { top: 22px !important; } +/* make player-bar not draggable if in-app-menu is enabled */ +.cet-container ytmusic-app-layout.pip ytmusic-player-bar { + -webkit-app-region: no-drag !important; +} + +/* make player draggable if in-app-menu is enabled */ +.cet-container ytmusic-app-layout.pip #player { + -webkit-app-region: drag !important; +} + +/* remove info, thumbnail and menu from player-bar */ +ytmusic-app-layout.pip ytmusic-player-bar .content-info-wrapper, +ytmusic-app-layout.pip ytmusic-player-bar .thumbnail-image-wrapper, +ytmusic-app-layout.pip ytmusic-player-bar ytmusic-menu-renderer { + display: none !important; +} + /* disable the video-toggle button when in PiP mode */ ytmusic-app-layout.pip .video-switch-button { display: none !important; diff --git a/youtube-music.css b/youtube-music.css index 9a36c00cee..ee48dc3aa2 100644 --- a/youtube-music.css +++ b/youtube-music.css @@ -39,3 +39,8 @@ img { ytmusic-cast-button { display: none !important; } + +/* Remove useless inaccessible button on top-right corner of the video player */ +.ytp-chrome-top-buttons { + display: none !important; +}