fix(video-toggle): fix video config not load config

resolve #16
th-ch · Oct 3, 2023 · 399c6e3 · 399c6e3
1 parent 16a32d1
commit 399c6e3
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 21 deletions.
diff --git a/plugins/video-toggle/button-switcher.css b/plugins/video-toggle/button-switcher.css
@@ -15,12 +15,12 @@
   background: rgba(33, 33, 33, 0.4);
   border-radius: 30px;
   overflow: hidden;
-  width: 240px;
+  width: 20rem;
   text-align: center;
   font-size: 18px;
   letter-spacing: 1px;
   color: #fff;
-  padding-right: 120px;
+  padding-right: 10rem;
   position: absolute;
 }
 
@@ -30,7 +30,7 @@
   top: 0;
   bottom: 0;
   right: 0;
-  width: 120px;
+  width: 10rem;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -55,7 +55,7 @@
 }
 
 .video-switch-button-checkbox:checked + .video-switch-button-label:before {
-  transform: translateX(120px);
+  transform: translateX(10rem);
   transition: transform 300ms linear;
 }
 

diff --git a/plugins/video-toggle/front.ts b/plugins/video-toggle/front.ts
@@ -56,17 +56,11 @@ function setup(e: CustomEvent<YoutubePlayer>) {
 
   $<HTMLVideoElement>('#player')?.prepend(switchButtonDiv);
 
-  if (options.hideVideo) {
-    const checkbox = $<HTMLInputElement>('.video-switch-button-checkbox');
-    if (checkbox) {
-      checkbox.checked = false;
-    }
-    changeDisplay(false);
-    forcePlaybackMode();
-    // Fix black video
-    if (video) {
-      video.style.height = 'auto';
-    }
+  setVideoState(!options.hideVideo);
+  forcePlaybackMode();
+  // Fix black video
+  if (video) {
+    video.style.height = 'auto';
   }
 
   //Prevents bubbling to the player which causes it to stop or resume
@@ -77,9 +71,8 @@ function setup(e: CustomEvent<YoutubePlayer>) {
   // Button checked = show video
   switchButtonDiv.addEventListener('change', (e) => {
     const target = e.target as HTMLInputElement;
-    options.hideVideo = target.checked;
-    changeDisplay(target.checked);
-    setOptions('video-toggle', options);
+
+    setVideoState(target.checked);
   });
 
   video?.addEventListener('srcChanged', videoStarted);
@@ -104,7 +97,13 @@ function setup(e: CustomEvent<YoutubePlayer>) {
   }
 }
 
-function changeDisplay(showVideo: boolean) {
+function setVideoState(showVideo: boolean) {
+  options.hideVideo = !showVideo;
+  setOptions('video-toggle', options);
+
+  const checkbox = $<HTMLInputElement>('.video-switch-button-checkbox'); // custom mode
+  if (checkbox) checkbox.checked = !options.hideVideo;
+
   if (player) {
     player.style.margin = showVideo ? '' : 'auto 0px';
     player.setAttribute('playback-mode', showVideo ? 'OMV_PREFERRED' : 'ATV_PREFERRED');
@@ -123,7 +122,7 @@ function changeDisplay(showVideo: boolean) {
 function videoStarted() {
   if (api.getPlayerResponse().videoDetails.musicVideoType === 'MUSIC_VIDEO_TYPE_ATV') {
     // Video doesn't exist -> switch to song mode
-    changeDisplay(false);
+    setVideoState(false);
     // Hide toggle button
     switchButtonDiv.style.display = 'none';
   } else {
@@ -137,7 +136,7 @@ function videoStarted() {
     switchButtonDiv.style.display = 'initial';
     // Change display to video mode if video exist & video is hidden & option.hideVideo = false
     if (!options.hideVideo && $<HTMLElement>('#song-video.ytmusic-player')?.style.display === 'none') {
-      changeDisplay(true);
+      setVideoState(true);
     } else {
       moveVolumeHud(!options.hideVideo);
     }