youtube-music/src/plugins/in-app-menu/renderer.tsx

import { createSignal } from 'solid-js';
import { render } from 'solid-js/web';

import { TitleBar } from './renderer/TitleBar';
import { defaultInAppMenuConfig, InAppMenuConfig } from './constants';

import type { RendererContext } from '@/types/contexts';

const scrollStyle = `
  html::-webkit-scrollbar {
    background-color: red;
  }
`;

const isMacOS = navigator.userAgent.includes('Macintosh');
const isNotWindowsOrMacOS =
  !navigator.userAgent.includes('Windows') && !isMacOS;


const [config, setConfig] = createSignal<InAppMenuConfig>(defaultInAppMenuConfig);
export const onRendererLoad = async ({
  getConfig,
  ipc,
}: RendererContext<InAppMenuConfig>) => {
  setConfig(await getConfig());

  document.title = 'YouTube Music';
  const stylesheet = new CSSStyleSheet();
  stylesheet.replaceSync(scrollStyle);
  document.adoptedStyleSheets = [...document.adoptedStyleSheets, stylesheet];

  render(() => (
    <TitleBar
      ipc={ipc}
      isMacOS={isMacOS}
      enableController={isNotWindowsOrMacOS && !config().hideDOMWindowControls}
      initialCollapsed={window.mainConfig.get('options.hideMenu')}
    />
  ), document.body);
};

export const onPlayerApiReady = () => {
  // NOT WORKING AFTER YTM UPDATE (last checked 2024-02-04)
  //
  // const htmlHeadStyle = document.querySelector('head > div > style');
  // if (htmlHeadStyle) {
  //   // HACK: This is a hack to remove the scrollbar width
  //   htmlHeadStyle.innerHTML = htmlHeadStyle.innerHTML.replace(
  //     'html::-webkit-scrollbar {width: var(--ytmusic-scrollbar-width);',
  //     'html::-webkit-scrollbar { width: 0;',
  //   );
  // }
};

export const onConfigChange = (newConfig: InAppMenuConfig) => {
  setConfig(newConfig);
};