mirror of
https://github.com/th-ch/youtube-music.git
synced 2026-01-13 11:21:46 +00:00
fix: remove xo, migration to eslint
This commit is contained in:
JellyBrick
@ -1,12 +1,14 @@
|
||||
const { getSongMenu } = require("../../providers/dom-elements");
|
||||
const { ElementFromFile, templatePath } = require("../utils");
|
||||
const { singleton } = require("../../providers/decorators")
|
||||
const { getSongMenu } = require('../../providers/dom-elements');
|
||||
const { ElementFromFile, templatePath } = require('../utils');
|
||||
const { singleton } = require('../../providers/decorators');
|
||||
|
||||
function $(selector) { return document.querySelector(selector); }
|
||||
function $(selector) {
|
||||
return document.querySelector(selector);
|
||||
}
|
||||
|
||||
const slider = ElementFromFile(templatePath(__dirname, "slider.html"));
|
||||
const slider = ElementFromFile(templatePath(__dirname, 'slider.html'));
|
||||
|
||||
const roundToTwo = n => Math.round(n * 1e2) / 1e2;
|
||||
const roundToTwo = (n) => Math.round(n * 1e2) / 1e2;
|
||||
|
||||
const MIN_PLAYBACK_SPEED = 0.07;
|
||||
const MAX_PLAYBACK_SPEED = 16;
|
||||
@ -14,77 +16,79 @@ const MAX_PLAYBACK_SPEED = 16;
|
||||
let playbackSpeed = 1;
|
||||
|
||||
const updatePlayBackSpeed = () => {
|
||||
$('video').playbackRate = playbackSpeed;
|
||||
$('video').playbackRate = playbackSpeed;
|
||||
|
||||
const playbackSpeedElement = $("#playback-speed-value");
|
||||
if (playbackSpeedElement) {
|
||||
playbackSpeedElement.innerHTML = playbackSpeed;
|
||||
}
|
||||
const playbackSpeedElement = $('#playback-speed-value');
|
||||
if (playbackSpeedElement) {
|
||||
playbackSpeedElement.innerHTML = playbackSpeed;
|
||||
}
|
||||
};
|
||||
|
||||
let menu;
|
||||
|
||||
const setupSliderListener = singleton(() => {
|
||||
$('#playback-speed-slider').addEventListener('immediate-value-changed', e => {
|
||||
playbackSpeed = e.detail.value || MIN_PLAYBACK_SPEED;
|
||||
if (isNaN(playbackSpeed)) {
|
||||
playbackSpeed = 1;
|
||||
}
|
||||
updatePlayBackSpeed();
|
||||
})
|
||||
$('#playback-speed-slider').addEventListener('immediate-value-changed', (e) => {
|
||||
playbackSpeed = e.detail.value || MIN_PLAYBACK_SPEED;
|
||||
if (isNaN(playbackSpeed)) {
|
||||
playbackSpeed = 1;
|
||||
}
|
||||
|
||||
updatePlayBackSpeed();
|
||||
});
|
||||
});
|
||||
|
||||
const observePopupContainer = () => {
|
||||
const observer = new MutationObserver(() => {
|
||||
if (!menu) {
|
||||
menu = getSongMenu();
|
||||
}
|
||||
const observer = new MutationObserver(() => {
|
||||
if (!menu) {
|
||||
menu = getSongMenu();
|
||||
}
|
||||
|
||||
if (menu && menu.parentElement.eventSink_?.matches('ytmusic-menu-renderer.ytmusic-player-bar') && !menu.contains(slider)) {
|
||||
menu.prepend(slider);
|
||||
setupSliderListener();
|
||||
}
|
||||
});
|
||||
if (menu && menu.parentElement.eventSink_?.matches('ytmusic-menu-renderer.ytmusic-player-bar') && !menu.contains(slider)) {
|
||||
menu.prepend(slider);
|
||||
setupSliderListener();
|
||||
}
|
||||
});
|
||||
|
||||
observer.observe($('ytmusic-popup-container'), {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
});
|
||||
observer.observe($('ytmusic-popup-container'), {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
});
|
||||
};
|
||||
|
||||
const observeVideo = () => {
|
||||
$('video').addEventListener('ratechange', forcePlaybackRate)
|
||||
$('video').addEventListener('srcChanged', forcePlaybackRate)
|
||||
}
|
||||
$('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)
|
||||
);
|
||||
slider.addEventListener('wheel', (e) => {
|
||||
e.preventDefault();
|
||||
if (isNaN(playbackSpeed)) {
|
||||
playbackSpeed = 1;
|
||||
}
|
||||
|
||||
updatePlayBackSpeed();
|
||||
// update slider position
|
||||
$('#playback-speed-slider').value = playbackSpeed;
|
||||
})
|
||||
}
|
||||
// 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
|
||||
$('#playback-speed-slider').value = playbackSpeed;
|
||||
});
|
||||
};
|
||||
|
||||
function forcePlaybackRate(e) {
|
||||
if (e.target.playbackRate !== playbackSpeed) {
|
||||
e.target.playbackRate = playbackSpeed
|
||||
}
|
||||
if (e.target.playbackRate !== playbackSpeed) {
|
||||
e.target.playbackRate = playbackSpeed;
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = () => {
|
||||
document.addEventListener('apiLoaded', () => {
|
||||
observePopupContainer();
|
||||
observeVideo();
|
||||
setupWheelListener();
|
||||
}, { once: true, passive: true })
|
||||
document.addEventListener('apiLoaded', () => {
|
||||
observePopupContainer();
|
||||
observeVideo();
|
||||
setupWheelListener();
|
||||
}, { once: true, passive: true });
|
||||
};
|
||||
|
||||
@ -1,88 +1,93 @@
|
||||
<div
|
||||
class="style-scope menu-item ytmusic-menu-popup-renderer"
|
||||
role="option"
|
||||
tabindex="-1"
|
||||
aria-disabled="false"
|
||||
aria-selected="false"
|
||||
aria-disabled="false"
|
||||
aria-selected="false"
|
||||
class="style-scope menu-item ytmusic-menu-popup-renderer"
|
||||
role="option"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div
|
||||
id="navigation-endpoint"
|
||||
class="yt-simple-endpoint style-scope ytmusic-menu-navigation-item-renderer"
|
||||
tabindex="-1"
|
||||
>
|
||||
<tp-yt-paper-slider
|
||||
id="playback-speed-slider"
|
||||
class="volume-slider style-scope ytmusic-player-bar on-hover"
|
||||
style="display: inherit !important"
|
||||
max="2"
|
||||
min="0"
|
||||
step="0.125"
|
||||
dir="ltr"
|
||||
title="Playback speed"
|
||||
aria-label="Playback speed"
|
||||
role="slider"
|
||||
tabindex="0"
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="2"
|
||||
aria-valuenow="1"
|
||||
aria-disabled="false"
|
||||
value="1"
|
||||
><!--css-build:shady-->
|
||||
<div id="sliderContainer" class="style-scope tp-yt-paper-slider">
|
||||
<div class="bar-container style-scope tp-yt-paper-slider">
|
||||
<tp-yt-paper-progress
|
||||
id="sliderBar"
|
||||
aria-hidden="true"
|
||||
class="style-scope tp-yt-paper-slider"
|
||||
role="progressbar"
|
||||
value="1"
|
||||
aria-valuenow="1"
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="2"
|
||||
aria-disabled="false"
|
||||
style="touch-action: none"
|
||||
><!--css-build:shady-->
|
||||
<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
|
||||
id="progressContainer"
|
||||
class="style-scope tp-yt-paper-progress"
|
||||
>
|
||||
<div
|
||||
id="secondaryProgress"
|
||||
class="style-scope tp-yt-paper-progress"
|
||||
hidden="true"
|
||||
style="transform: scaleX(0)"
|
||||
></div>
|
||||
<div
|
||||
id="primaryProgress"
|
||||
class="style-scope tp-yt-paper-progress"
|
||||
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
|
||||
id="sliderKnob"
|
||||
class="slider-knob style-scope tp-yt-paper-slider"
|
||||
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
|
||||
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>
|
||||
|
||||
Reference in New Issue
Block a user