Merge pull request #894 from MiepHD/master

Center toggle of video-toggle

Author: th-ch

plugins/video-toggle/button-switcher.css

@@ -2,6 +2,10 @@
     align-items: unset !important;
 }
 
+#main-panel {
+    position: relative;
+}
+
 .video-switch-button {
     z-index: 999;
     box-sizing: border-box;
@@ -18,6 +22,7 @@
     color: #fff;
     padding-right: 120px;
     position: absolute;
+    left: var(--align);
 }
 
 .video-switch-button:before {

plugins/video-toggle/front.js

@@ -31,14 +31,29 @@ module.exports = (_options) => {
             document.addEventListener("apiLoaded", setup, { once: true, passive: true });
         }
     }
+    const mainpanel = document.querySelector("#main-panel");
+    switch (_options.align) {
+        case "right": {
+            mainpanel.style.setProperty("--align", "calc(100% - 240px)");
+            return;
+        }
+        case "middle": {
+            mainpanel.style.setProperty("--align", "calc(50% - 120px)");
+            return;
+        }
+        default:
+        case "left": {
+            mainpanel.style.setProperty("--align", "0px");
+        }
+    }
 };
 
 function setup(e) {
     api = e.detail;
     player = $('ytmusic-player');
     video = $('video');
 
-    $('ytmusic-player-page').prepend(switchButtonDiv);
+    $('#main-panel').append(switchButtonDiv);
 
     if (options.hideVideo) {
         $('.video-switch-button-checkbox').checked = false;

plugins/video-toggle/menu.js

@@ -33,6 +33,38 @@ module.exports = (win, options) => [
             },
         ]
     },
+    {
+        label: "Alignment",
+        submenu: [
+            {
+                label: "Left",
+                type: "radio",
+                checked: options.align === 'left',
+                click: () => {
+                    options.align = 'left';
+                    setMenuOptions("video-toggle", options);
+                }
+            },
+            {
+                label: "Middle",
+                type: "radio",
+                checked: options.align === 'middle',
+                click: () => {
+                    options.align = 'middle';
+                    setMenuOptions("video-toggle", options);
+                }
+            },
+            {
+                label: "Right",
+                type: "radio",
+                checked: options.align === 'right',
+                click: () => {
+                    options.align = 'right';
+                    setMenuOptions("video-toggle", options);
+                }
+            },
+        ]
+    },
     {
         label: "Force Remove Video Tab",
         type: "checkbox",