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)