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

src/plugins/playback-speed/front.ts

@@ -0,0 +1,117 @@
+import sliderHTML from './templates/slider.html';
+
+import { getSongMenu } from '../../providers/dom-elements';
+import { ElementFromHtml } from '../utils';
+import { singleton } from '../../providers/decorators';
+
+
+function $<E extends Element = Element>(selector: string) {
+  return document.querySelector<E>(selector);
+}
+
+const slider = ElementFromHtml(sliderHTML);
+
+const roundToTwo = (n: number) => Math.round(n * 1e2) / 1e2;
+
+const MIN_PLAYBACK_SPEED = 0.07;
+const MAX_PLAYBACK_SPEED = 16;
+
+let playbackSpeed = 1;
+
+const updatePlayBackSpeed = () => {
+  const videoElement = $<HTMLVideoElement>('video');
+  if (videoElement) {
+    videoElement.playbackRate = playbackSpeed;
+  }
+
+  const playbackSpeedElement = $('#playback-speed-value');
+  if (playbackSpeedElement) {
+    playbackSpeedElement.innerHTML = String(playbackSpeed);
+  }
+};
+
+let menu: Element | null = null;
+
+const setupSliderListener = singleton(() => {
+  $('#playback-speed-slider')?.addEventListener('immediate-value-changed', (e) => {
+    playbackSpeed = (e as CustomEvent<{ value: number; }>).detail.value || MIN_PLAYBACK_SPEED;
+    if (isNaN(playbackSpeed)) {
+      playbackSpeed = 1;
+    }
+
+    updatePlayBackSpeed();
+  });
+});
+
+const observePopupContainer = () => {
+  const observer = new MutationObserver(() => {
+    if (!menu) {
+      menu = getSongMenu();
+    }
+
+    if (
+      menu &&
+      (menu.parentElement as HTMLElement & { eventSink_: Element | null })
+        ?.eventSink_
+        ?.matches('ytmusic-menu-renderer.ytmusic-player-bar')&& !menu.contains(slider)
+    ) {
+      menu.prepend(slider);
+      setupSliderListener();
+    }
+  });
+
+  const popupContainer = $('ytmusic-popup-container');
+  if (popupContainer) {
+    observer.observe(popupContainer, {
+      childList: true,
+      subtree: true,
+    });
+  }
+};
+
+const observeVideo = () => {
+  const video = $<HTMLVideoElement>('video');
+  if (video) {
+    video.addEventListener('ratechange', forcePlaybackRate);
+    video.addEventListener('srcChanged', forcePlaybackRate);
+  }
+};
+
+const setupWheelListener = () => {
+  slider.addEventListener('wheel', (e) => {
+    e.preventDefault();
+    if (isNaN(playbackSpeed)) {
+      playbackSpeed = 1;
+    }
+
+    // E.deltaY < 0 means wheel-up
+    playbackSpeed = roundToTwo(e.deltaY < 0
+      ? Math.min(playbackSpeed + 0.01, MAX_PLAYBACK_SPEED)
+      : Math.max(playbackSpeed - 0.01, MIN_PLAYBACK_SPEED),
+    );
+
+    updatePlayBackSpeed();
+    // Update slider position
+    const playbackSpeedSilder = $<HTMLElement & { value: number }>('#playback-speed-slider');
+    if (playbackSpeedSilder) {
+      playbackSpeedSilder.value = playbackSpeed;
+    }
+  });
+};
+
+function forcePlaybackRate(e: Event) {
+  if (e.target instanceof HTMLVideoElement) {
+    const videoElement = e.target;
+    if (videoElement.playbackRate !== playbackSpeed) {
+      videoElement.playbackRate = playbackSpeed;
+    }
+  }
+}
+
+export default () => {
+  document.addEventListener('apiLoaded', () => {
+    observePopupContainer();
+    observeVideo();
+    setupWheelListener();
+  }, { once: true, passive: true });
+};

src/plugins/playback-speed/templates/slider.html

@@ -0,0 +1,93 @@
+<div
+  aria-disabled="false"
+  aria-selected="false"
+  class="style-scope menu-item ytmusic-menu-popup-renderer"
+  role="option"
+  tabindex="-1"
+>
+  <div
+    class="yt-simple-endpoint style-scope ytmusic-menu-navigation-item-renderer"
+    id="navigation-endpoint"
+    tabindex="-1"
+  >
+    <tp-yt-paper-slider
+      aria-disabled="false"
+      aria-label="Playback speed"
+      aria-valuemax="2"
+      aria-valuemin="0"
+      aria-valuenow="1"
+      class="volume-slider style-scope ytmusic-player-bar on-hover"
+      dir="ltr"
+      id="playback-speed-slider"
+      max="2"
+      min="0"
+      role="slider"
+      step="0.125"
+      style="display: inherit !important"
+      tabindex="0"
+      title="Playback speed"
+      value="1"
+    ><!--css-build:shady-->
+      <div class="style-scope tp-yt-paper-slider" id="sliderContainer">
+        <div class="bar-container style-scope tp-yt-paper-slider">
+          <tp-yt-paper-progress
+            aria-disabled="false"
+            aria-hidden="true"
+            aria-valuemax="2"
+            aria-valuemin="0"
+            aria-valuenow="1"
+            class="style-scope tp-yt-paper-slider"
+            id="sliderBar"
+            role="progressbar"
+            style="touch-action: none"
+            value="1"
+          ><!--css-build:shady-->
+
+            <div
+              class="style-scope tp-yt-paper-progress"
+              id="progressContainer"
+            >
+              <div
+                class="style-scope tp-yt-paper-progress"
+                hidden="true"
+                id="secondaryProgress"
+                style="transform: scaleX(0)"
+              ></div>
+              <div
+                class="style-scope tp-yt-paper-progress"
+                id="primaryProgress"
+                style="transform: scaleX(0.5)"
+              ></div>
+            </div>
+          </tp-yt-paper-progress>
+        </div>
+        <dom-if class="style-scope tp-yt-paper-slider"
+        >
+          <template is="dom-if"></template
+          >
+        </dom-if>
+        <div
+          class="slider-knob style-scope tp-yt-paper-slider"
+          id="sliderKnob"
+          style="left: 50%; touch-action: none"
+        >
+          <div
+            class="slider-knob-inner style-scope tp-yt-paper-slider"
+            value="1"
+          ></div>
+        </div>
+      </div>
+      <dom-if class="style-scope tp-yt-paper-slider"
+      >
+        <template is="dom-if"></template>
+      </dom-if
+      >
+    </tp-yt-paper-slider>
+    <div
+      class="text style-scope ytmusic-menu-navigation-item-renderer"
+      id="ytmcustom-playback-speed"
+    >
+      Speed (<span id="playback-speed-value">1</span>)
+    </div>
+  </div>
+</div>