smueller/youtube-music
1
0
Fork 0
mirror of https://github.com/th-ch/youtube-music.git synced 2026-01-12 19:01:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: migrate from raw HTML to JSX (TSX / SolidJS) (#3583)

Browse Source 
Co-authored-by: Su-Yong <simssy2205@gmail.com>
This commit is contained in:
JellyBrick
2025-07-09 23:14:11 +09:00
committed by GitHub
parent 9ccd126eee
commit e114e0ef44
90 changed files with 1723 additions and 1357 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
src/plugins/playback-speed/components/slider.tsx Normal file
View File

@ -0,0 +1,92 @@
export interface PlaybackSpeedSliderProps {
speed: number;
title: string;
onImmediateValueChanged?: (value: CustomEvent<{ value: number }>) => void;
onWheel?: (event: WheelEvent) => void;
}
export const PlaybackSpeedSlider = (props: PlaybackSpeedSliderProps) => (
<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={props.title}
aria-valuemax="2"
aria-valuemin="0"
aria-valuenow={props.speed}
class="volume-slider style-scope ytmusic-player-bar on-hover"
dir="ltr"
on:immediate-value-changed={props.onImmediateValueChanged}
onWheel={props.onWheel}
max="2"
min="0"
role="slider"
step="0.125"
style="display: inherit !important"
tabindex="0"
title={props.title}
value={props.speed}
>
<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"
>
<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
class="style-scope tp-yt-paper-progress"
id="primaryProgress"
style="transform: scaleX(0.5)"
/>
</div>
</tp-yt-paper-progress>
</div>
<div
class="slider-knob style-scope tp-yt-paper-slider"
id="sliderKnob"
style="left: 50%; touch-action: none"
>
<input
class="slider-knob-inner style-scope tp-yt-paper-slider"
value={1}
/>
</div>
</div>
</tp-yt-paper-slider>
<div
class="text style-scope ytmusic-menu-navigation-item-renderer"
id="ytmcustom-playback-speed"
>
{props.title} ({props.speed})
</div>
</div>
</div>
);