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

src/plugins/precise-volume/back.ts

@@ -0,0 +1,28 @@
+import { globalShortcut, BrowserWindow } from 'electron';
+
+import volumeHudStyle from './volume-hud.css';
+
+import { injectCSS } from '../utils';
+
+import type { ConfigType } from '../../config/dynamic';
+
+/*
+This is used to determine if plugin is actually active
+(not if it's only enabled in options)
+*/
+let isEnabled = false;
+
+export const enabled = () => isEnabled;
+
+export default (win: BrowserWindow, options: ConfigType<'precise-volume'>) => {
+  isEnabled = true;
+  injectCSS(win.webContents, volumeHudStyle);
+
+  if (options.globalShortcuts?.volumeUp) {
+    globalShortcut.register((options.globalShortcuts.volumeUp), () => win.webContents.send('changeVolume', true));
+  }
+
+  if (options.globalShortcuts?.volumeDown) {
+    globalShortcut.register((options.globalShortcuts.volumeDown), () => win.webContents.send('changeVolume', false));
+  }
+};

src/plugins/precise-volume/front.ts

@@ -0,0 +1,270 @@
+import { ipcRenderer } from 'electron';
+
+import { setOptions, setMenuOptions, isEnabled } from '../../config/plugins';
+import { debounce } from '../../providers/decorators';
+
+import { YoutubePlayer } from '../../types/youtube-player';
+
+import type { ConfigType } from '../../config/dynamic';
+
+function $<E extends Element = Element>(selector: string) {
+  return document.querySelector<E>(selector);
+}
+
+let api: YoutubePlayer;
+let options: ConfigType<'precise-volume'>;
+
+export default (_options: ConfigType<'precise-volume'>) => {
+  options = _options;
+  document.addEventListener('apiLoaded', (e) => {
+    api = e.detail;
+    ipcRenderer.on('changeVolume', (_, toIncrease: boolean) => changeVolume(toIncrease));
+    ipcRenderer.on('setVolume', (_, value: number) => setVolume(value));
+    firstRun();
+  }, { once: true, passive: true });
+};
+
+// Without this function it would rewrite config 20 time when volume change by 20
+const writeOptions = debounce(() => {
+  setOptions('precise-volume', options);
+}, 1000);
+
+export const moveVolumeHud = debounce((showVideo: boolean) => {
+  const volumeHud = $<HTMLElement>('#volumeHud');
+  if (!volumeHud) {
+    return;
+  }
+
+  volumeHud.style.top = showVideo
+    ? `${($('ytmusic-player')!.clientHeight - $('video')!.clientHeight) / 2}px`
+    : '0';
+}, 250);
+
+const hideVolumeHud = debounce((volumeHud: HTMLElement) => {
+  volumeHud.style.opacity = '0';
+}, 2000);
+
+const hideVolumeSlider = debounce((slider: HTMLElement) => {
+  slider.classList.remove('on-hover');
+}, 2500);
+
+/** Restore saved volume and setup tooltip */
+function firstRun() {
+  if (typeof options.savedVolume === 'number') {
+    // Set saved volume as tooltip
+    setTooltip(options.savedVolume);
+
+    if (api.getVolume() !== options.savedVolume) {
+      setVolume(options.savedVolume);
+    }
+  }
+
+  setupPlaybar();
+
+  setupLocalArrowShortcuts();
+
+  // Workaround: computedStyleMap().get(string) returns CSSKeywordValue instead of CSSStyleValue
+  const noVid = ($('#main-panel')?.computedStyleMap().get('display') as CSSKeywordValue)?.value === 'none';
+  injectVolumeHud(noVid);
+  if (!noVid) {
+    setupVideoPlayerOnwheel();
+    if (!isEnabled('video-toggle')) {
+      // Video-toggle handles hud positioning on its own
+      const videoMode = () => api.getPlayerResponse().videoDetails?.musicVideoType !== 'MUSIC_VIDEO_TYPE_ATV';
+      $('video')?.addEventListener('srcChanged', () => moveVolumeHud(videoMode()));
+    }
+  }
+
+  // Change options from renderer to keep sync
+  ipcRenderer.on('setOptions', (_event, newOptions = {}) => {
+    Object.assign(options, newOptions);
+    setMenuOptions('precise-volume', options);
+  });
+}
+
+function injectVolumeHud(noVid: boolean) {
+  if (noVid) {
+    const position = 'top: 18px; right: 60px;';
+    const mainStyle = 'font-size: xx-large;';
+
+    $('.center-content.ytmusic-nav-bar')?.insertAdjacentHTML(
+      'beforeend',
+      `<span id="volumeHud" style="${position + mainStyle}"></span>`,
+    );
+  } else {
+    const position = 'top: 10px; left: 10px;';
+    const mainStyle = 'font-size: xxx-large; webkit-text-stroke: 1px black; font-weight: 600;';
+
+    $('#song-video')?.insertAdjacentHTML(
+      'afterend',
+      `<span id="volumeHud" style="${position + mainStyle}"></span>`,
+    );
+  }
+}
+
+function showVolumeHud(volume: number) {
+  const volumeHud = $<HTMLElement>('#volumeHud');
+  if (!volumeHud) {
+    return;
+  }
+
+  volumeHud.textContent = `${volume}%`;
+  volumeHud.style.opacity = '1';
+
+  hideVolumeHud(volumeHud);
+}
+
+/** Add onwheel event to video player */
+function setupVideoPlayerOnwheel() {
+  const panel = $<HTMLElement>('#main-panel');
+  if (!panel) return;
+
+  panel.addEventListener('wheel', (event) => {
+    event.preventDefault();
+    // Event.deltaY < 0 means wheel-up
+    changeVolume(event.deltaY < 0);
+  });
+}
+
+function saveVolume(volume: number) {
+  options.savedVolume = volume;
+  writeOptions();
+}
+
+/** Add onwheel event to play bar and also track if play bar is hovered */
+function setupPlaybar() {
+  const playerbar = $<HTMLElement>('ytmusic-player-bar');
+  if (!playerbar) return;
+
+  playerbar.addEventListener('wheel', (event) => {
+    event.preventDefault();
+    // Event.deltaY < 0 means wheel-up
+    changeVolume(event.deltaY < 0);
+  });
+
+  // Keep track of mouse position for showVolumeSlider()
+  playerbar.addEventListener('mouseenter', () => {
+    playerbar.classList.add('on-hover');
+  });
+
+  playerbar.addEventListener('mouseleave', () => {
+    playerbar.classList.remove('on-hover');
+  });
+
+  setupSliderObserver();
+}
+
+/** Save volume + Update the volume tooltip when volume-slider is manually changed */
+function setupSliderObserver() {
+  const sliderObserver = new MutationObserver((mutations) => {
+    for (const mutation of mutations) {
+      if (mutation.target instanceof HTMLInputElement) {
+        // This checks that volume-slider was manually set
+        const target = mutation.target;
+        const targetValueNumeric = Number(target.value);
+        if (mutation.oldValue !== target.value
+          && (typeof options.savedVolume !== 'number' || Math.abs(options.savedVolume - targetValueNumeric) > 4)) {
+          // Diff>4 means it was manually set
+          setTooltip(targetValueNumeric);
+          saveVolume(targetValueNumeric);
+        }
+      }
+    }
+  });
+
+  const slider = $('#volume-slider');
+  if (!slider) return;
+
+  // Observing only changes in 'value' of volume-slider
+  sliderObserver.observe(slider, {
+    attributeFilter: ['value'],
+    attributeOldValue: true,
+  });
+}
+
+function setVolume(value: number) {
+  api.setVolume(value);
+  // Save the new volume
+  saveVolume(value);
+
+  // Change slider position (important)
+  updateVolumeSlider();
+
+  // Change tooltips to new value
+  setTooltip(value);
+  // Show volume slider
+  showVolumeSlider();
+  // Show volume HUD
+  showVolumeHud(value);
+}
+
+/** If (toIncrease = false) then volume decrease */
+function changeVolume(toIncrease: boolean) {
+  // Apply volume change if valid
+  const steps = Number(options.steps || 1);
+  setVolume(toIncrease
+    ? Math.min(api.getVolume() + steps, 100)
+    : Math.max(api.getVolume() - steps, 0));
+}
+
+function updateVolumeSlider() {
+  const savedVolume = options.savedVolume ?? 0;
+  // Slider value automatically rounds to multiples of 5
+  for (const slider of ['#volume-slider', '#expand-volume-slider']) {
+    const silderElement = $<HTMLInputElement>(slider);
+    if (silderElement) {
+      silderElement.value = String(savedVolume > 0 && savedVolume < 5 ? 5 : savedVolume);
+    }
+  }
+}
+
+function showVolumeSlider() {
+  const slider = $<HTMLElement>('#volume-slider');
+  if (!slider) return;
+
+  // This class display the volume slider if not in minimized mode
+  slider.classList.add('on-hover');
+
+  hideVolumeSlider(slider);
+}
+
+// Set new volume as tooltip for volume slider and icon + expanding slider (appears when window size is small)
+const tooltipTargets = [
+  '#volume-slider',
+  'tp-yt-paper-icon-button.volume',
+  '#expand-volume-slider',
+  '#expand-volume',
+];
+
+function setTooltip(volume: number) {
+  for (const target of tooltipTargets) {
+    const tooltipTargetElement = $<HTMLElement>(target);
+    if (tooltipTargetElement) {
+      tooltipTargetElement.title = `${volume}%`;
+    }
+  }
+}
+
+function setupLocalArrowShortcuts() {
+  if (options.arrowsShortcut) {
+    window.addEventListener('keydown', (event) => {
+      if ($<HTMLElement & { opened: boolean }>('ytmusic-search-box')?.opened) {
+        return;
+      }
+
+      switch (event.code) {
+        case 'ArrowUp': {
+          event.preventDefault();
+          changeVolume(true);
+          break;
+        }
+
+        case 'ArrowDown': {
+          event.preventDefault();
+          changeVolume(false);
+          break;
+        }
+      }
+    });
+  }
+}

src/plugins/precise-volume/menu.ts

@@ -0,0 +1,94 @@
+import prompt, { KeybindOptions } from 'custom-electron-prompt';
+
+import { BrowserWindow, MenuItem } from 'electron';
+
+import { enabled } from './back';
+
+import { setMenuOptions } from '../../config/plugins';
+import promptOptions from '../../providers/prompt-options';
+import { MenuTemplate } from '../../menu';
+
+import type { ConfigType } from '../../config/dynamic';
+
+function changeOptions(changedOptions: Partial<ConfigType<'precise-volume'>>, options: ConfigType<'precise-volume'>, win: BrowserWindow) {
+  for (const option in changedOptions) {
+    // HACK: Weird TypeScript error
+    (options as Record<string, unknown>)[option] = (changedOptions as Record<string, unknown>)[option];
+  }
+  // Dynamically change setting if plugin is enabled
+  if (enabled()) {
+    win.webContents.send('setOptions', changedOptions);
+  } else { // Fallback to usual method if disabled
+    setMenuOptions('precise-volume', options);
+  }
+}
+
+export default (win: BrowserWindow, options: ConfigType<'precise-volume'>): MenuTemplate => [
+  {
+    label: 'Local Arrowkeys Controls',
+    type: 'checkbox',
+    checked: Boolean(options.arrowsShortcut),
+    click(item) {
+      changeOptions({ arrowsShortcut: item.checked }, options, win);
+    },
+  },
+  {
+    label: 'Global Hotkeys',
+    type: 'checkbox',
+    checked: Boolean(options.globalShortcuts?.volumeUp ?? options.globalShortcuts?.volumeDown),
+    click: (item) => promptGlobalShortcuts(win, options, item),
+  },
+  {
+    label: 'Set Custom Volume Steps',
+    click: () => promptVolumeSteps(win, options),
+  },
+];
+
+// Helper function for globalShortcuts prompt
+const kb = (label_: string, value_: string, default_: string): KeybindOptions => ({ 'value': value_, 'label': label_, 'default': default_ || undefined });
+
+async function promptVolumeSteps(win: BrowserWindow, options: ConfigType<'precise-volume'>) {
+  const output = await prompt({
+    title: 'Volume Steps',
+    label: 'Choose Volume Increase/Decrease Steps',
+    value: options.steps || 1,
+    type: 'counter',
+    counterOptions: { minimum: 0, maximum: 100, multiFire: true },
+    width: 380,
+    ...promptOptions(),
+  }, win);
+
+  if (output || output === 0) { // 0 is somewhat valid
+    changeOptions({ steps: output }, options, win);
+  }
+}
+
+async function promptGlobalShortcuts(win: BrowserWindow, options: ConfigType<'precise-volume'>, item: MenuItem) {
+  const output = await prompt({
+    title: 'Global Volume Keybinds',
+    label: 'Choose Global Volume Keybinds:',
+    type: 'keybind',
+    keybindOptions: [
+      kb('Increase Volume', 'volumeUp', options.globalShortcuts?.volumeUp),
+      kb('Decrease Volume', 'volumeDown', options.globalShortcuts?.volumeDown),
+    ],
+    ...promptOptions(),
+  }, win);
+
+  if (output) {
+    const newGlobalShortcuts: {
+      volumeUp: string;
+      volumeDown: string;
+    } = { volumeUp: '', volumeDown: '' };
+    for (const { value, accelerator } of output) {
+      newGlobalShortcuts[value as keyof typeof newGlobalShortcuts] = accelerator;
+    }
+
+    changeOptions({ globalShortcuts: newGlobalShortcuts }, options, win);
+
+    item.checked = Boolean(options.globalShortcuts.volumeUp) || Boolean(options.globalShortcuts.volumeDown);
+  } else {
+    // Reset checkbox if prompt was canceled
+    item.checked = !item.checked;
+  }
+}

src/plugins/precise-volume/preload.ts

@@ -0,0 +1,41 @@
+/* what */
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+
+import is from 'electron-is';
+
+const ignored = {
+  id: ['volume-slider', 'expand-volume-slider'],
+  types: ['mousewheel', 'keydown', 'keyup'],
+};
+
+function overrideAddEventListener() {
+  // YO WHAT ARE YOU DOING NOW?!?!
+  // Save native addEventListener
+  // @ts-ignore
+  // eslint-disable-next-line @typescript-eslint/unbound-method
+  Element.prototype._addEventListener = Element.prototype.addEventListener;
+  // Override addEventListener to Ignore specific events in volume-slider
+  Element.prototype.addEventListener = function (type: string, listener: (event: Event) => void, useCapture = false) {
+    if (!(
+      ignored.id.includes(this.id)
+      && ignored.types.includes(type)
+    )) {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any,@typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access
+      (this as any)._addEventListener(type, listener, useCapture);
+    } else if (is.dev()) {
+      console.log(`Ignoring event: "${this.id}.${type}()"`);
+    }
+  };
+}
+
+export default () => {
+  overrideAddEventListener();
+  // Restore original function after finished loading to avoid keeping Element.prototype altered
+  window.addEventListener('load', () => {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment,@typescript-eslint/no-explicit-any,@typescript-eslint/no-unsafe-member-access
+    Element.prototype.addEventListener = (Element.prototype as any)._addEventListener;
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment,@typescript-eslint/no-explicit-any,@typescript-eslint/no-unsafe-member-access
+    (Element.prototype as any)._addEventListener = undefined;
+
+  }, { once: true });
+};

src/plugins/precise-volume/volume-hud.css

@@ -0,0 +1,13 @@
+#volumeHud {
+  z-index: 999;
+  position: absolute;
+  transition: opacity 0.6s;
+  pointer-events: none;
+  padding: 10px;
+
+  text-shadow: rgba(0, 0, 0, 0.5) 0px 0px 12px;
+}
+
+ytmusic-player[player-ui-state_="MINIPLAYER"] #volumeHud {
+  top: 0 !important;
+}