From 67e43bc0e39e9591b96a85f5ce124f635d94fe51 Mon Sep 17 00:00:00 2001 From: Araxeus <78568641+Araxeus@users.noreply.github.com> Date: Sun, 24 Oct 2021 20:09:30 +0300 Subject: [PATCH 1/8] Video Toggle Plugin --- config/defaults.js | 4 + plugins/hide-video-player/back.js | 6 -- plugins/video-toggle/back.js | 11 +++ plugins/video-toggle/buttonSwitcher.css | 77 +++++++++++++++++ .../style.css => video-toggle/forceHide.css} | 0 plugins/video-toggle/front.js | 82 +++++++++++++++++++ plugins/video-toggle/menu.js | 13 +++ .../templates/buttonTemplate.html | 4 + readme.md | 4 +- 9 files changed, 193 insertions(+), 8 deletions(-) delete mode 100644 plugins/hide-video-player/back.js create mode 100644 plugins/video-toggle/back.js create mode 100644 plugins/video-toggle/buttonSwitcher.css rename plugins/{hide-video-player/style.css => video-toggle/forceHide.css} (100%) create mode 100644 plugins/video-toggle/front.js create mode 100644 plugins/video-toggle/menu.js create mode 100644 plugins/video-toggle/templates/buttonTemplate.html diff --git a/config/defaults.js b/config/defaults.js index 5bb74e09..3df4990a 100644 --- a/config/defaults.js +++ b/config/defaults.js @@ -77,6 +77,10 @@ const defaultConfig = { "music_offtopic", ], }, + "video-toggle": { + enabled: false, + forceHide: false, + }, }, }; diff --git a/plugins/hide-video-player/back.js b/plugins/hide-video-player/back.js deleted file mode 100644 index fa96b863..00000000 --- a/plugins/hide-video-player/back.js +++ /dev/null @@ -1,6 +0,0 @@ -const { injectCSS } = require("../utils"); -const path = require("path"); - -module.exports = win => { - injectCSS(win.webContents, path.join(__dirname, "style.css")); -}; diff --git a/plugins/video-toggle/back.js b/plugins/video-toggle/back.js new file mode 100644 index 00000000..93e2607b --- /dev/null +++ b/plugins/video-toggle/back.js @@ -0,0 +1,11 @@ +const { injectCSS } = require("../utils"); +const path = require("path"); +const { urlToHttpOptions } = require("url"); + +module.exports = (win, options) => { + if (options.forceHide) { + injectCSS(win.webContents, path.join(__dirname, "forceHide.css")); + } else { + injectCSS(win.webContents, path.join(__dirname, "buttonSwitcher.css")); + } +}; diff --git a/plugins/video-toggle/buttonSwitcher.css b/plugins/video-toggle/buttonSwitcher.css new file mode 100644 index 00000000..0029f921 --- /dev/null +++ b/plugins/video-toggle/buttonSwitcher.css @@ -0,0 +1,77 @@ +#main-panel.ytmusic-player-page { + align-items: unset !important; +} + +.video-switch-button { + z-index: 999; + box-sizing: border-box; + padding: 0; + margin-top: 20px; + margin-left: 10px; + background: rgba(33, 33, 33, 0.4); + border-radius: 30px; + overflow: hidden; + width: 240px; + text-align: center; + font-size: 18px; + letter-spacing: 1px; + color: #fff; + padding-right: 120px; + position: absolute; +} + +.video-switch-button:before { + content: "Video"; + position: absolute; + top: 0; + bottom: 0; + right: 0; + width: 120px; + display: flex; + align-items: center; + justify-content: center; + z-index: 3; + pointer-events: none; +} + +.video-switch-button-checkbox { + cursor: pointer; + position: absolute; + top: 0; + left: 0; + bottom: 0; + width: 100%; + height: 100%; + opacity: 0; + z-index: 2; +} + +.video-switch-button-label-span { + position: relative; +} + +.video-switch-button-checkbox:checked+.video-switch-button-label:before { + transform: translateX(120px); + transition: transform 300ms linear; +} + +.video-switch-button-checkbox+.video-switch-button-label { + position: relative; + padding: 15px 0; + display: block; + user-select: none; + pointer-events: none; +} + +.video-switch-button-checkbox+.video-switch-button-label:before { + content: ""; + background: rgba(60, 60, 60, 0.4); + height: 100%; + width: 100%; + position: absolute; + left: 0; + top: 0; + border-radius: 30px; + transform: translateX(0); + transition: transform 300ms; +} diff --git a/plugins/hide-video-player/style.css b/plugins/video-toggle/forceHide.css similarity index 100% rename from plugins/hide-video-player/style.css rename to plugins/video-toggle/forceHide.css diff --git a/plugins/video-toggle/front.js b/plugins/video-toggle/front.js new file mode 100644 index 00000000..e0310690 --- /dev/null +++ b/plugins/video-toggle/front.js @@ -0,0 +1,82 @@ +const { ElementFromFile, templatePath } = require("../utils"); + +const { setOptions } = require("../../config/plugins"); + +function $(selector) { return document.querySelector(selector); } + +let options; + +const switchButtonDiv = ElementFromFile( + templatePath(__dirname, "buttonTemplate.html") +); + + +module.exports = (_options) => { + if (_options.forceHide) return; + options = _options; + document.addEventListener('apiLoaded', setup); +} + +function setup() { + $('ytmusic-player-page').prepend(switchButtonDiv); + + $('#song-image.ytmusic-player').style.display = "block" + + if (options.hideVideo) { + $('.video-switch-button-checkbox').checked = false; + changeDisplay(false); + forcePlaybackMode(); + } + + // button checked = show video + switchButtonDiv.addEventListener('change', (e) => { + options.hideVideo = !e.target.checked; + changeDisplay(e.target.checked); + setOptions("video-toggle", options); + }) + + $('video').addEventListener('loadedmetadata', videoStarted); +} + +function changeDisplay(showVideo) { + if (!showVideo && $('ytmusic-player').getAttribute('playback-mode') !== "ATV_PREFERRED") { + $('video').style.top = "0"; + $('ytmusic-player').style.margin = "auto 21.5px"; + $('ytmusic-player').setAttribute('playback-mode', "ATV_PREFERRED"); + } + + showVideo ? + $('#song-video.ytmusic-player').style.display = "unset" : + $('#song-video.ytmusic-player').style.display = "none"; +} + +function videoStarted() { + if (videoExist()) { + switchButtonDiv.style.display = "initial"; + if (!options.hideVideo && $('#song-video.ytmusic-player').style.display === "none") { + changeDisplay(true); + } + } else { + changeDisplay(false); + switchButtonDiv.style.display = "none"; + } + $('#song-image img').src = $('#movie_player').getPlayerResponse()?.videoDetails?.thumbnail?.thumbnails?.pop()?.url; +} + +function videoExist() { + return $('#player').videoMode_; +} + +// on load, after a delay, the page overrides the playback-mode to 'OMV_PREFERRED' which causes weird aspect ratio in the image container +// this function fix the problem by overriding that override :) +function forcePlaybackMode() { + const playbackModeObserver = new MutationObserver(mutations => { + mutations.forEach(mutation => { + if (mutation.type === 'attributes' && mutation.attributeName === 'playback-mode' && mutation.target.getAttribute('playback-mode') !== "ATV_PREFERRED") { + playbackModeObserver.disconnect(); + mutation.target.setAttribute('playback-mode', "ATV_PREFERRED"); + } + }); + }); + playbackModeObserver.observe($('ytmusic-player'), { attributeFilter: ["playback-mode"] }) +} \ No newline at end of file diff --git a/plugins/video-toggle/menu.js b/plugins/video-toggle/menu.js new file mode 100644 index 00000000..a73407ca --- /dev/null +++ b/plugins/video-toggle/menu.js @@ -0,0 +1,13 @@ +const { setOptions } = require("../../config/plugins"); + +module.exports = (win, options) => [ + { + label: "Force Remove Video Tab", + type: "checkbox", + checked: options.forceHide, + click: item => { + options.forceHide = item.checked; + setOptions("video-toggle", options); + } + } +]; diff --git a/plugins/video-toggle/templates/buttonTemplate.html b/plugins/video-toggle/templates/buttonTemplate.html new file mode 100644 index 00000000..9f22bbf5 --- /dev/null +++ b/plugins/video-toggle/templates/buttonTemplate.html @@ -0,0 +1,4 @@ +
+ + +
diff --git a/readme.md b/readme.md index b12a178d..c6aca287 100644 --- a/readme.md +++ b/readme.md @@ -39,7 +39,7 @@ Install the `youtube-music-bin` package from the AUR. For AUR installation instr - **Disable autoplay**: makes every song start in "paused" mode - [**Discord**](https://discord.com/): show your friends what you listen to with [Rich Presence](https://user-images.githubusercontent.com/28219076/104362104-a7a0b980-5513-11eb-9744-bb89eabe0016.png) - **Downloader**: downloads MP3 [directly from the interface](https://user-images.githubusercontent.com/61631665/129977677-83a7d067-c192-45e1-98ae-b5a4927393be.png) [(youtube-dl)](https://github.com/ytdl-org/youtube-dl) -- **Hide video player**: no video in the interface when playing music +- **Video Toggle**: Adds a button to switch between Video/Song modes. can also optionally remove the whole video tab (like the old hide-video-player) - **In-app menu**: [gives bars a fancy, dark look](https://user-images.githubusercontent.com/78568641/112215894-923dbf00-8c29-11eb-95c3-3ce15db27eca.png) - [**Last.fm**](https://www.last.fm/): scrobbles support - **Navigation**: next/back navigation arrows directly integrated in the interface, like in your favorite browser @@ -47,7 +47,7 @@ Install the `youtube-music-bin` package from the AUR. For AUR installation instr - **Notifications**: display a [notification](https://user-images.githubusercontent.com/78568641/114102651-63ce0e00-98d0-11eb-9dfe-c5a02bb54f9c.png) when a song starts playing - **Playback speed**: listen fast, listen slow! [Adds a slider that controls song speed](https://user-images.githubusercontent.com/61631665/129976003-e55db5ba-bf42-448c-a059-26a009775e68.png) - **Precise volume**: customizable volume steps for more comfort, allows controlling the volume precisely using mousewheel -- **Quality changer**: change video quality +- **Quality changer**: Adds a button on the video overlay that allows changing video quality - **Shortcuts**: use your usual shortcuts (media keys, Ctrl/CMD + F…) to control YouTube Music, you may setup custom global hotkeys for play/pause/next/previous song - [**SponsorBlock**](https://github.com/ajayyy/SponsorBlock): skips non-music parts - **Taskbar media control**: control app from your [Windows taskbar](https://user-images.githubusercontent.com/78568641/111916130-24a35e80-8a82-11eb-80c8-5021c1aa27f4.png) From 00e1bbf994de2cf48f6e4d6321d382cf531d3e3d Mon Sep 17 00:00:00 2001 From: Araxeus <78568641+Araxeus@users.noreply.github.com> Date: Tue, 26 Oct 2021 20:31:27 +0300 Subject: [PATCH 2/8] Update readme.md --- readme.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/readme.md b/readme.md index c6aca287..324106e2 100644 --- a/readme.md +++ b/readme.md @@ -39,7 +39,7 @@ Install the `youtube-music-bin` package from the AUR. For AUR installation instr - **Disable autoplay**: makes every song start in "paused" mode - [**Discord**](https://discord.com/): show your friends what you listen to with [Rich Presence](https://user-images.githubusercontent.com/28219076/104362104-a7a0b980-5513-11eb-9744-bb89eabe0016.png) - **Downloader**: downloads MP3 [directly from the interface](https://user-images.githubusercontent.com/61631665/129977677-83a7d067-c192-45e1-98ae-b5a4927393be.png) [(youtube-dl)](https://github.com/ytdl-org/youtube-dl) -- **Video Toggle**: Adds a button to switch between Video/Song modes. can also optionally remove the whole video tab (like the old hide-video-player) +- **Video Toggle**: Adds a button to switch between Video/Song mode. can also optionally remove the whole video tab - **In-app menu**: [gives bars a fancy, dark look](https://user-images.githubusercontent.com/78568641/112215894-923dbf00-8c29-11eb-95c3-3ce15db27eca.png) - [**Last.fm**](https://www.last.fm/): scrobbles support - **Navigation**: next/back navigation arrows directly integrated in the interface, like in your favorite browser @@ -48,9 +48,9 @@ Install the `youtube-music-bin` package from the AUR. For AUR installation instr - **Playback speed**: listen fast, listen slow! [Adds a slider that controls song speed](https://user-images.githubusercontent.com/61631665/129976003-e55db5ba-bf42-448c-a059-26a009775e68.png) - **Precise volume**: customizable volume steps for more comfort, allows controlling the volume precisely using mousewheel - **Quality changer**: Adds a button on the video overlay that allows changing video quality -- **Shortcuts**: use your usual shortcuts (media keys, Ctrl/CMD + F…) to control YouTube Music, you may setup custom global hotkeys for play/pause/next/previous song +- **Shortcuts**: Allows setting custom global hotkeys for playback + disable osd by overriding media keys + enable Ctrl/CMD + F to search + enable linux mpris support for mediakeys + [custom hotkeys](https://github.com/Araxeus/youtube-music/blob/1e591d6a3df98449bcda6e63baab249b28026148/providers/song-controls.js#L13-L50) for [advanced users](https://github.com/th-ch/youtube-music/issues/106#issuecomment-952156902) - [**SponsorBlock**](https://github.com/ajayyy/SponsorBlock): skips non-music parts -- **Taskbar media control**: control app from your [Windows taskbar](https://user-images.githubusercontent.com/78568641/111916130-24a35e80-8a82-11eb-80c8-5021c1aa27f4.png) +- **Taskbar media control**: control playback from your [Windows taskbar](https://user-images.githubusercontent.com/78568641/111916130-24a35e80-8a82-11eb-80c8-5021c1aa27f4.png) - **Touchbar**: custom TouchBar layout for macOS - **Auto confirm when paused** (Always Enabled): disable the ["Continue Watching?"](https://user-images.githubusercontent.com/61631665/129977894-01c60740-7ec6-4bf0-9a2c-25da24491b0e.png) popup that pause music after a certain time From 3f3ab766ce588f8bf5771a22b5e281d371e7bf6f Mon Sep 17 00:00:00 2001 From: Araxeus <78568641+Araxeus@users.noreply.github.com> Date: Tue, 26 Oct 2021 20:34:44 +0300 Subject: [PATCH 3/8] Update readme.md --- readme.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/readme.md b/readme.md index 324106e2..d35a2ca2 100644 --- a/readme.md +++ b/readme.md @@ -48,7 +48,7 @@ Install the `youtube-music-bin` package from the AUR. For AUR installation instr - **Playback speed**: listen fast, listen slow! [Adds a slider that controls song speed](https://user-images.githubusercontent.com/61631665/129976003-e55db5ba-bf42-448c-a059-26a009775e68.png) - **Precise volume**: customizable volume steps for more comfort, allows controlling the volume precisely using mousewheel - **Quality changer**: Adds a button on the video overlay that allows changing video quality -- **Shortcuts**: Allows setting custom global hotkeys for playback + disable osd by overriding media keys + enable Ctrl/CMD + F to search + enable linux mpris support for mediakeys + [custom hotkeys](https://github.com/Araxeus/youtube-music/blob/1e591d6a3df98449bcda6e63baab249b28026148/providers/song-controls.js#L13-L50) for [advanced users](https://github.com/th-ch/youtube-music/issues/106#issuecomment-952156902) +- **Shortcuts**: Allows setting global hotkeys for playback (play/pause/next/previous) + disable [media osd](https://user-images.githubusercontent.com/84923831/128601225-afa38c1f-dea8-4209-9f72-0f84c1dd8b54.png) by overriding media keys + enable Ctrl/CMD + F to search + enable linux mpris support for mediakeys + [custom hotkeys](https://github.com/Araxeus/youtube-music/blob/1e591d6a3df98449bcda6e63baab249b28026148/providers/song-controls.js#L13-L50) for [advanced users](https://github.com/th-ch/youtube-music/issues/106#issuecomment-952156902) - [**SponsorBlock**](https://github.com/ajayyy/SponsorBlock): skips non-music parts - **Taskbar media control**: control playback from your [Windows taskbar](https://user-images.githubusercontent.com/78568641/111916130-24a35e80-8a82-11eb-80c8-5021c1aa27f4.png) - **Touchbar**: custom TouchBar layout for macOS From 713e005aa89dc314a223d1f8220122616fbf9b08 Mon Sep 17 00:00:00 2001 From: Araxeus <78568641+Araxeus@users.noreply.github.com> Date: Tue, 26 Oct 2021 20:45:43 +0300 Subject: [PATCH 4/8] Update readme.md --- readme.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/readme.md b/readme.md index d35a2ca2..1d185f4d 100644 --- a/readme.md +++ b/readme.md @@ -47,7 +47,7 @@ Install the `youtube-music-bin` package from the AUR. For AUR installation instr - **Notifications**: display a [notification](https://user-images.githubusercontent.com/78568641/114102651-63ce0e00-98d0-11eb-9dfe-c5a02bb54f9c.png) when a song starts playing - **Playback speed**: listen fast, listen slow! [Adds a slider that controls song speed](https://user-images.githubusercontent.com/61631665/129976003-e55db5ba-bf42-448c-a059-26a009775e68.png) - **Precise volume**: customizable volume steps for more comfort, allows controlling the volume precisely using mousewheel -- **Quality changer**: Adds a button on the video overlay that allows changing video quality +- **Quality changer**: Allows changing the video quality with a [button](https://user-images.githubusercontent.com/78568641/138574366-70324a5e-2d64-4f6a-acdd-dc2a2b9cecc5.png) on the video overlay - **Shortcuts**: Allows setting global hotkeys for playback (play/pause/next/previous) + disable [media osd](https://user-images.githubusercontent.com/84923831/128601225-afa38c1f-dea8-4209-9f72-0f84c1dd8b54.png) by overriding media keys + enable Ctrl/CMD + F to search + enable linux mpris support for mediakeys + [custom hotkeys](https://github.com/Araxeus/youtube-music/blob/1e591d6a3df98449bcda6e63baab249b28026148/providers/song-controls.js#L13-L50) for [advanced users](https://github.com/th-ch/youtube-music/issues/106#issuecomment-952156902) - [**SponsorBlock**](https://github.com/ajayyy/SponsorBlock): skips non-music parts - **Taskbar media control**: control playback from your [Windows taskbar](https://user-images.githubusercontent.com/78568641/111916130-24a35e80-8a82-11eb-80c8-5021c1aa27f4.png) From 48943ee74b0fe6c677c371b5f98596f3c2e8ece9 Mon Sep 17 00:00:00 2001 From: Araxeus <78568641+Araxeus@users.noreply.github.com> Date: Mon, 1 Nov 2021 16:06:55 +0200 Subject: [PATCH 5/8] lint --- plugins/video-toggle/back.js | 7 +++---- .../{buttonSwitcher.css => button-switcher.css} | 0 plugins/video-toggle/{forceHide.css => force-hide.css} | 0 3 files changed, 3 insertions(+), 4 deletions(-) rename plugins/video-toggle/{buttonSwitcher.css => button-switcher.css} (100%) rename plugins/video-toggle/{forceHide.css => force-hide.css} (100%) diff --git a/plugins/video-toggle/back.js b/plugins/video-toggle/back.js index 93e2607b..a56e61cf 100644 --- a/plugins/video-toggle/back.js +++ b/plugins/video-toggle/back.js @@ -1,11 +1,10 @@ const { injectCSS } = require("../utils"); const path = require("path"); -const { urlToHttpOptions } = require("url"); module.exports = (win, options) => { - if (options.forceHide) { - injectCSS(win.webContents, path.join(__dirname, "forceHide.css")); + if (options.forceHide) { + injectCSS(win.webContents, path.join(__dirname, "force-hide.css")); } else { - injectCSS(win.webContents, path.join(__dirname, "buttonSwitcher.css")); + injectCSS(win.webContents, path.join(__dirname, "button-switcher.css")); } }; diff --git a/plugins/video-toggle/buttonSwitcher.css b/plugins/video-toggle/button-switcher.css similarity index 100% rename from plugins/video-toggle/buttonSwitcher.css rename to plugins/video-toggle/button-switcher.css diff --git a/plugins/video-toggle/forceHide.css b/plugins/video-toggle/force-hide.css similarity index 100% rename from plugins/video-toggle/forceHide.css rename to plugins/video-toggle/force-hide.css From c68daabeab4f67861501f4bc4e7bf6ce1719aa26 Mon Sep 17 00:00:00 2001 From: Araxeus <78568641+Araxeus@users.noreply.github.com> Date: Mon, 1 Nov 2021 18:07:21 +0200 Subject: [PATCH 6/8] lint audio-compressor plugin --- plugins/audio-compressor/front.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/plugins/audio-compressor/front.js b/plugins/audio-compressor/front.js index 9c3631cd..129073e3 100644 --- a/plugins/audio-compressor/front.js +++ b/plugins/audio-compressor/front.js @@ -1,7 +1,7 @@ const applyCompressor = () => { const audioContext = new AudioContext(); - let compressor = audioContext.createDynamicsCompressor(); + const compressor = audioContext.createDynamicsCompressor(); compressor.threshold.value = -50; compressor.ratio.value = 12; compressor.knee.value = 40; @@ -14,6 +14,4 @@ const applyCompressor = () => { compressor.connect(audioContext.destination); }; -module.exports = () => document.addEventListener('apiLoaded', () => { - applyCompressor(); -}) +module.exports = () => document.addEventListener('apiLoaded', applyCompressor, { once: true, passive: true }); From 0287b6942490a4c1d7c44a532a56b3a735948346 Mon Sep 17 00:00:00 2001 From: Araxeus <78568641+Araxeus@users.noreply.github.com> Date: Mon, 1 Nov 2021 22:57:32 +0200 Subject: [PATCH 7/8] fix missing thumbnails +forced push fix woupsie --- plugins/video-toggle/front.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/plugins/video-toggle/front.js b/plugins/video-toggle/front.js index e0310690..289176ff 100644 --- a/plugins/video-toggle/front.js +++ b/plugins/video-toggle/front.js @@ -52,6 +52,10 @@ function changeDisplay(showVideo) { function videoStarted() { if (videoExist()) { + const thumbnails = $('#movie_player').getPlayerResponse()?.videoDetails?.thumbnail?.thumbnails; + if (thumbnails && thumbnails.length > 0) { + $('#song-image img').src = thumbnails[thumbnails.length-1].url; + } switchButtonDiv.style.display = "initial"; if (!options.hideVideo && $('#song-video.ytmusic-player').style.display === "none") { changeDisplay(true); @@ -60,7 +64,6 @@ function videoStarted() { changeDisplay(false); switchButtonDiv.style.display = "none"; } - $('#song-image img').src = $('#movie_player').getPlayerResponse()?.videoDetails?.thumbnail?.thumbnails?.pop()?.url; } function videoExist() { From 62bacf76d07bef6f8c9e592d1d3eb695d384dede Mon Sep 17 00:00:00 2001 From: Araxeus <78568641+Araxeus@users.noreply.github.com> Date: Mon, 1 Nov 2021 23:10:15 +0200 Subject: [PATCH 8/8] change file names to lower case --- plugins/video-toggle/front.js | 2 +- .../templates/{buttonTemplate.html => button_template.html} | 0 2 files changed, 1 insertion(+), 1 deletion(-) rename plugins/video-toggle/templates/{buttonTemplate.html => button_template.html} (100%) diff --git a/plugins/video-toggle/front.js b/plugins/video-toggle/front.js index 289176ff..45ee8c14 100644 --- a/plugins/video-toggle/front.js +++ b/plugins/video-toggle/front.js @@ -7,7 +7,7 @@ function $(selector) { return document.querySelector(selector); } let options; const switchButtonDiv = ElementFromFile( - templatePath(__dirname, "buttonTemplate.html") + templatePath(__dirname, "button_template.html") ); diff --git a/plugins/video-toggle/templates/buttonTemplate.html b/plugins/video-toggle/templates/button_template.html similarity index 100% rename from plugins/video-toggle/templates/buttonTemplate.html rename to plugins/video-toggle/templates/button_template.html