Video Toggle Plugin

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/forceHide.css

@@ -0,0 +1,11 @@
+/* Hide the video player */
+#main-panel {
+	display: none !important;
+}
+
+/* Make the side-panel full width */
+.side-panel.ytmusic-player-page {
+	max-width: 100% !important;
+	width: 100% !important;
+	margin: 0 !important;
+}

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>