QOL: Move source code under the src directory. (#1318)

src/plugins/video-toggle/back.ts

@@ -0,0 +1,16 @@
+import { BrowserWindow } from 'electron';
+
+import forceHideStyle from './force-hide.css';
+import buttonSwitcherStyle from './button-switcher.css';
+
+import { injectCSS } from '../utils';
+
+import type { ConfigType } from '../../config/dynamic';
+
+export default (win: BrowserWindow, options: ConfigType<'video-toggle'>) => {
+  if (options.forceHide) {
+    injectCSS(win.webContents, forceHideStyle);
+  } else if (!options.mode || options.mode === 'custom') {
+    injectCSS(win.webContents, buttonSwitcherStyle);
+  }
+};

src/plugins/video-toggle/button-switcher.css

@@ -0,0 +1,86 @@
+#main-panel.ytmusic-player-page {
+  align-items: unset !important;
+}
+
+#main-panel {
+  position: relative;
+}
+
+.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: 20rem;
+  text-align: center;
+  font-size: 18px;
+  letter-spacing: 1px;
+  color: #fff;
+  padding-right: 10rem;
+  position: absolute;
+}
+
+.video-switch-button:before {
+  content: "Video";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  width: 10rem;
+  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(10rem);
+  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;
+}
+
+/* disable the native toggler */
+#av-id {
+  display: none;
+}

src/plugins/video-toggle/force-hide.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;
+}

src/plugins/video-toggle/front.ts

@@ -0,0 +1,191 @@
+import buttonTemplate from './templates/button_template.html';
+
+import { ElementFromHtml } from '../utils';
+import { setOptions, isEnabled } from '../../config/plugins';
+
+import { moveVolumeHud as preciseVolumeMoveVolumeHud } from '../precise-volume/front';
+
+import { YoutubePlayer } from '../../types/youtube-player';
+import { ThumbnailElement } from '../../types/get-player-response';
+
+import type { ConfigType } from '../../config/dynamic';
+
+const moveVolumeHud = isEnabled('precise-volume') ? preciseVolumeMoveVolumeHud : () => {};
+
+function $<E extends Element = Element>(selector: string): E | null {
+  return document.querySelector<E>(selector);
+}
+
+let options: ConfigType<'video-toggle'>;
+let player: HTMLElement & { videoMode_: boolean } | null;
+let video: HTMLVideoElement | null;
+let api: YoutubePlayer;
+
+const switchButtonDiv = ElementFromHtml(buttonTemplate);
+
+export default (_options: ConfigType<'video-toggle'>) => {
+  if (_options.forceHide) {
+    return;
+  }
+
+  switch (_options.mode) {
+    case 'native': {
+      $('ytmusic-player-page')?.setAttribute('has-av-switcher', '');
+      $('ytmusic-player')?.setAttribute('has-av-switcher', '');
+      return;
+    }
+
+    case 'disabled': {
+      $('ytmusic-player-page')?.removeAttribute('has-av-switcher');
+      $('ytmusic-player')?.removeAttribute('has-av-switcher');
+      return;
+    }
+
+    default:
+    case 'custom': {
+      options = _options;
+      document.addEventListener('apiLoaded', setup, { once: true, passive: true });
+    }
+  }
+};
+
+function setup(e: CustomEvent<YoutubePlayer>) {
+  api = e.detail;
+  player = $<(HTMLElement & { videoMode_: boolean; })>('ytmusic-player');
+  video = $<HTMLVideoElement>('video');
+
+  $<HTMLVideoElement>('#player')?.prepend(switchButtonDiv);
+
+  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
+  switchButtonDiv.addEventListener('click', (e) => {
+    e.stopPropagation();
+  });
+
+  // Button checked = show video
+  switchButtonDiv.addEventListener('change', (e) => {
+    const target = e.target as HTMLInputElement;
+
+    setVideoState(target.checked);
+  });
+
+  video?.addEventListener('srcChanged', videoStarted);
+
+  observeThumbnail();
+
+  switch (options.align) {
+    case 'right': {
+      switchButtonDiv.style.left = 'calc(100% - 240px)';
+      return;
+    }
+
+    case 'middle': {
+      switchButtonDiv.style.left = 'calc(50% - 120px)';
+      return;
+    }
+
+    default:
+    case 'left': {
+      switchButtonDiv.style.left = '0px';
+    }
+  }
+}
+
+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');
+
+    $<HTMLElement>('#song-video.ytmusic-player')!.style.display = showVideo ? 'block' : 'none';
+    $<HTMLElement>('#song-image')!.style.display = showVideo ? 'none' : 'block';
+
+    if (showVideo && video && !video.style.top) {
+      video.style.top = `${(player.clientHeight - video.clientHeight) / 2}px`;
+    }
+
+    moveVolumeHud(showVideo);
+  }
+}
+
+function videoStarted() {
+  if (api.getPlayerResponse().videoDetails.musicVideoType === 'MUSIC_VIDEO_TYPE_ATV') {
+    // Video doesn't exist -> switch to song mode
+    setVideoState(false);
+    // Hide toggle button
+    switchButtonDiv.style.display = 'none';
+  } else {
+    const songImage = $<HTMLImageElement>('#song-image img');
+    if (!songImage) {
+      return;
+    }
+    // Switch to high-res thumbnail
+    forceThumbnail(songImage);
+    // Show toggle button
+    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') {
+      setVideoState(true);
+    } else {
+      moveVolumeHud(!options.hideVideo);
+    }
+  }
+}
+
+// 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() {
+  if (player) {
+    const playbackModeObserver = new MutationObserver((mutations) => {
+      for (const mutation of mutations) {
+        if (mutation.target instanceof HTMLElement) {
+          const target = mutation.target;
+          if (target.getAttribute('playback-mode') !== 'ATV_PREFERRED') {
+            playbackModeObserver.disconnect();
+            target.setAttribute('playback-mode', 'ATV_PREFERRED');
+          }
+        }
+      }
+    });
+    playbackModeObserver.observe(player, { attributeFilter: ['playback-mode'] });
+  }
+}
+
+function observeThumbnail() {
+  const playbackModeObserver = new MutationObserver((mutations) => {
+    if (!player?.videoMode_) {
+      return;
+    }
+
+    for (const mutation of mutations) {
+      if (mutation.target instanceof HTMLImageElement) {
+        const target = mutation.target;
+        if (!target.src.startsWith('data:')) {
+          continue;
+        }
+
+        forceThumbnail(target);
+      }
+    }
+  });
+  playbackModeObserver.observe($('#song-image img')!, { attributeFilter: ['src'] });
+}
+
+function forceThumbnail(img: HTMLImageElement) {
+  const thumbnails: ThumbnailElement[] = ($('#movie_player') as unknown as YoutubePlayer).getPlayerResponse()?.videoDetails?.thumbnail?.thumbnails ?? [];
+  if (thumbnails && thumbnails.length > 0) {
+    const thumbnail = thumbnails.at(-1)?.url.split('?')[0];
+    if (typeof thumbnail === 'string') img.src = thumbnail;
+  }
+}

src/plugins/video-toggle/menu.ts

@@ -0,0 +1,83 @@
+import { BrowserWindow } from 'electron';
+
+import { setMenuOptions } from '../../config/plugins';
+
+import { MenuTemplate } from '../../menu';
+
+import type { ConfigType } from '../../config/dynamic';
+
+export default (win: BrowserWindow, options: ConfigType<'video-toggle'>): MenuTemplate => [
+  {
+    label: 'Mode',
+    submenu: [
+      {
+        label: 'Custom toggle',
+        type: 'radio',
+        checked: options.mode === 'custom',
+        click() {
+          options.mode = 'custom';
+          setMenuOptions('video-toggle', options);
+        },
+      },
+      {
+        label: 'Native toggle',
+        type: 'radio',
+        checked: options.mode === 'native',
+        click() {
+          options.mode = 'native';
+          setMenuOptions('video-toggle', options);
+        },
+      },
+      {
+        label: 'Disabled',
+        type: 'radio',
+        checked: options.mode === 'disabled',
+        click() {
+          options.mode = 'disabled';
+          setMenuOptions('video-toggle', 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',
+    checked: options.forceHide,
+    click(item) {
+      options.forceHide = item.checked;
+      setMenuOptions('video-toggle', options);
+    },
+  },
+];

src/plugins/video-toggle/templates/button_template.html

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