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/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 }); 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..a56e61cf --- /dev/null +++ b/plugins/video-toggle/back.js @@ -0,0 +1,10 @@ +const { injectCSS } = require("../utils"); +const path = require("path"); + +module.exports = (win, options) => { + if (options.forceHide) { + injectCSS(win.webContents, path.join(__dirname, "force-hide.css")); + } else { + injectCSS(win.webContents, path.join(__dirname, "button-switcher.css")); + } +}; diff --git a/plugins/video-toggle/button-switcher.css b/plugins/video-toggle/button-switcher.css new file mode 100644 index 00000000..0029f921 --- /dev/null +++ b/plugins/video-toggle/button-switcher.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/force-hide.css similarity index 100% rename from plugins/hide-video-player/style.css rename to plugins/video-toggle/force-hide.css diff --git a/plugins/video-toggle/front.js b/plugins/video-toggle/front.js new file mode 100644 index 00000000..45ee8c14 --- /dev/null +++ b/plugins/video-toggle/front.js @@ -0,0 +1,85 @@ +const { ElementFromFile, templatePath } = require("../utils"); + +const { setOptions } = require("../../config/plugins"); + +function $(selector) { return document.querySelector(selector); } + +let options; + +const switchButtonDiv = ElementFromFile( + templatePath(__dirname, "button_template.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()) { + 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); + } + } else { + changeDisplay(false); + switchButtonDiv.style.display = "none"; + } +} + +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/button_template.html b/plugins/video-toggle/templates/button_template.html new file mode 100644 index 00000000..9f22bbf5 --- /dev/null +++ b/plugins/video-toggle/templates/button_template.html @@ -0,0 +1,4 @@ +
+ + +
diff --git a/readme.md b/readme.md index 2467d83b..a9adaad4 100644 --- a/readme.md +++ b/readme.md @@ -40,7 +40,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 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) > (see [this post](https://github.com/th-ch/youtube-music/issues/410#issuecomment-952060709) if you have problem accessing the menu after enabling this plugin and hide-menu option) - [**Last.fm**](https://www.last.fm/): scrobbles support @@ -49,10 +49,10 @@ Install the `youtube-music-bin` package from the AUR. For AUR installation instr - **Notifications**: display a notification when a song starts playing ([interactive notifications](https://user-images.githubusercontent.com/78568641/114102651-63ce0e00-98d0-11eb-9dfe-c5a02bb54f9c.png) are available on windows) - **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 -- **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 +- **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 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