Video Toggle Plugin

config/defaults.js

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

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

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

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

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/buttonTemplate.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

@@ -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)