Merge pull request #448 from Araxeus/new-hide-video-player

Video Toggle Plugin

config/defaults.js

@@ -77,6 +77,10 @@ const defaultConfig = {
 				"music_offtopic",
 			],
 		},
+		"video-toggle": {
+			enabled: false,
+			forceHide: false,
+		},
 	},
 };
 

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 });

plugins/hide-video-player/back.js

@@ -1,6 +0,0 @@
-const { injectCSS } = require("../utils");
-const path = require("path");
-
-module.exports = win => {
-	injectCSS(win.webContents, path.join(__dirname, "style.css"));
-};

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"));
+	}
+};

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;
+}

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"] })
+}

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);
+        }
+    }
+];

plugins/video-toggle/templates/button_template.html

@@ -0,0 +1,4 @@
+<div class="video-switch-button">
+    <input class="video-switch-button-checkbox" type="checkbox" checked="true"></input>
+    <label class="video-switch-button-label" for=""><span class="video-switch-button-label-span">Song</span></label>
+</div>

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