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

Add Material UI 3 component library (#3606)

Browse Source 
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: JellyBrick <shlee1503@naver.com>
This commit is contained in:
Angelos Bouklis
2025-10-11 00:11:38 +03:00
committed by GitHub
parent cbc0077690
commit 9b8daac28c
13 changed files with 890 additions and 242 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
src/plugins/navigation/components/back-button.tsx
View File

@ -1,42 +0,0 @@
export interface BackButtonProps {
onClick?: (e: MouseEvent) => void;
title: string;
}
export const BackButton = (props: BackButtonProps) => (
<div
class="style-scope ytmusic-pivot-bar-renderer navigation-item"
onClick={(e) => props.onClick?.(e)}
role="tab"
tab-id="FEmusic_back"
>
<div
aria-disabled="false"
class="search-icon style-scope ytmusic-search-box"
role="button"
tabindex={0}
title={props.title}
>
<div
class="tab-icon style-scope paper-icon-button navigation-icon"
id="icon"
>
<svg
class="style-scope iron-icon"
preserveAspectRatio="xMidYMid meet"
style={{
'pointer-events': 'none',
'display': 'block',
'width': '100%',
'height': '100%',
}}
viewBox="0 0 492 492"
>
<g class="style-scope iron-icon">
<path d="M109.3 265.2l218.9 218.9c5.1 5.1 11.8 7.9 19 7.9s14-2.8 19-7.9l16.1-16.1c10.5-10.5 10.5-27.6 0-38.1L198.6 246.1 382.7 62c5.1-5.1 7.9-11.8 7.9-19 0-7.2-2.8-14-7.9-19L366.5 7.9c-5.1-5.1-11.8-7.9-19-7.9-7.2 0-14 2.8-19 7.9L109.3 227c-5.1 5.1-7.9 11.9-7.8 19.1 0 7.2 2.8 14 7.8 19.1z" />
</g>
</svg>
</div>
</div>
</div>
);

46
src/plugins/navigation/components/forward-button.tsx
View File

@ -1,46 +0,0 @@
export interface ForwardButtonProps {
onClick?: (e: MouseEvent) => void;
title: string;
}
export const ForwardButton = (props: ForwardButtonProps) => (
<div
class="style-scope ytmusic-pivot-bar-renderer navigation-item"
onClick={(e) => props.onClick?.(e)}
role="tab"
tab-id="FEmusic_next"
>
<div
aria-disabled="false"
class="search-icon style-scope ytmusic-search-box"
role="button"
tabindex={0}
title={props.title}
>
<div
class="tab-icon style-scope paper-icon-button navigation-icon"
id="icon"
>
<svg
class="style-scope iron-icon"
preserveAspectRatio="xMidYMid meet"
style={{
'pointer-events': 'none',
'display': 'block',
'width': '100%',
'height': '100%',
}}
viewBox="0 0 492 492"
>
<g class="style-scope iron-icon">
<path
d="M382.7,226.8L163.7,7.9c-5.1-5.1-11.8-7.9-19-7.9s-14,2.8-19,7.9L109.5,24c-10.5,10.5-10.5,27.6,0,38.1
l183.9,183.9L109.3,430c-5.1,5.1-7.9,11.8-7.9,19c0,7.2,2.8,14,7.9,19l16.1,16.1c5.1,5.1,11.8,7.9,19,7.9s14-2.8,19-7.9L382.7,265
c5.1-5.1,7.9-11.9,7.8-19.1C390.5,238.7,387.8,231.9,382.7,226.8z"
/>
</g>
</svg>
</div>
</div>
</div>
);

31
src/plugins/navigation/index.tsx
View File

@ -5,8 +5,8 @@ import { createPlugin } from '@/utils';
import { t } from '@/i18n';
import { ForwardButton } from './components/forward-button';
import { BackButton } from './components/back-button';
import '@mdui/icons/chevron-left.js';
import '@mdui/icons/chevron-right.js';
export default createPlugin({
name: () => t('plugins.navigation.name'),
@ -15,7 +15,6 @@ export default createPlugin({
config: {
enabled: true,
},
stylesheets: [style],
renderer: {
buttonContainer: document.createElement('div'),
start() {
@ -26,14 +25,24 @@ export default createPlugin({
render(
() => (
<>
<BackButton
onClick={() => history.back()}
title={t('plugins.navigation.templates.back.title')}
/>
<ForwardButton
onClick={() => history.forward()}
title={t('plugins.navigation.templates.forward.title')}
/>
<mdui-tooltip
content={t('plugins.navigation.templates.back.title')}
>
<mdui-button-icon onClick={() => history.back()}>
<mdui-icon-chevron-left
style={{ padding: '5px', scale: '1.5' }}
/>
</mdui-button-icon>
</mdui-tooltip>
<mdui-tooltip
content={t('plugins.navigation.templates.forward.title')}
>
<mdui-button-icon onClick={() => history.forward()}>
<mdui-icon-chevron-right
style={{ padding: '5px', scale: '1.5' }}
/>
</mdui-button-icon>
</mdui-tooltip>
</>
),
this.buttonContainer,

36
src/plugins/navigation/style.css
View File

@ -1,36 +0,0 @@
.navigation-item {
font-family:
Roboto,
Noto Naskh Arabic UI,
Arial,
sans-serif;
font-size: 20px;
line-height: var(--ytmusic-title-1_-_line-height);
font-weight: 500;
--yt-endpoint-color: #fff;
--yt-endpoint-hover-color: #fff;
--yt-endpoint-visited-color: #fff;
display: inline-flex;
align-items: center;
color: rgba(255, 255, 255, 0.5);
cursor: pointer;
margin: 0 var(--ytd-margin-2x, 8px);
}
.navigation-item:hover {
color: #fff;
}
.navigation-icon {
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
vertical-align: middle;
fill: var(--iron-icon-fill-color, currentcolor);
stroke: none;
width: var(--iron-icon-width, 24px);
height: var(--iron-icon-height, 24px);
animation: var(--iron-icon_-_animation);
padding: var(--ytd-margin-base, 4px) var(--ytd-margin-2x, 8px);
}

144
src/plugins/synced-lyrics/renderer/components/LyricsPicker.tsx
View File

@ -1,3 +1,4 @@
/* eslint-disable stylistic/no-mixed-operators */
import {
createEffect,
createMemo,
@ -8,6 +9,7 @@ import {
onCleanup,
onMount,
type Setter,
Show,
Switch,
} from 'solid-js';
@ -15,6 +17,7 @@ import * as z from 'zod';
import {
type ProviderName,
ProviderNames,
providerNames,
ProviderNameSchema,
type ProviderState,
@ -23,7 +26,14 @@ import { currentLyrics, lyricsStore, setLyricsStore } from '../store';
import { _ytAPI } from '../index';
import { config } from '../renderer';
import type { YtIcons } from '@/types/icons';
import '@mdui/icons/chevron-left.js';
import '@mdui/icons/chevron-right.js';
import '@mdui/icons/check-circle.js';
import '@mdui/icons/warning.js';
import '@mdui/icons/error.js';
import '@mdui/icons/star.js';
import '@mdui/icons/star-border.js';
import type { PlayerAPIEvents } from '@/types/player-api-events';
const LocalStorageSchema = z.object({
@ -47,7 +57,8 @@ const shouldSwitchProvider = (providerData: ProviderState) => {
const providerBias = (p: ProviderName) =>
(lyricsStore.lyrics[p].state === 'done' ? 1 : -1) +
(lyricsStore.lyrics[p].data?.lines?.length ? 2 : -1) +
(lyricsStore.lyrics[p].data?.lines?.length && p === 'YTMusic' ? 1 : 0) +
// eslint-disable-next-line prettier/prettier
(lyricsStore.lyrics[p].data?.lines?.length && p === ProviderNames.YTMusic ? 1 : 0) +
(lyricsStore.lyrics[p].data?.lyrics ? 1 : -1);
const pickBestProvider = () => {
@ -60,7 +71,6 @@ const pickBestProvider = () => {
}
const providers = Array.from(providerNames);
providers.sort((a, b) => providerBias(b) - providerBias(a));
return { provider: providers[0], force: false };
@ -175,50 +185,16 @@ export const LyricsPicker = (props: {
});
};
const chevronLeft: YtIcons = 'yt-icons:chevron_left';
const chevronRight: YtIcons = 'yt-icons:chevron_right';
const successIcon: YtIcons = 'yt-icons:check-circle';
const errorIcon: YtIcons = 'yt-icons:error';
const notFoundIcon: YtIcons = 'yt-icons:warning';
return (
<div class="lyrics-picker" ref={props.setStickRef}>
<div class="lyrics-picker-left">
<yt-icon-button
class="style-scope ytmusic-player-bar"
icon={chevronLeft}
onClick={previous}
role={'button'}
>
<span class="yt-icon-shape style-scope yt-icon yt-spec-icon-shape">
<div
style={{
'width': '100%',
'height': '100%',
'display': 'flex',
'align-items': 'center',
'fill': 'currentcolor',
}}
>
<svg
class="style-scope yt-icon"
fill="#FFFFFF"
height={'40px'}
preserveAspectRatio="xMidYMid meet"
viewBox="0 -960 960 960"
width={'40px'}
>
<g class="style-scope yt-icon">
<path
class="style-scope yt-icon"
d="M560.67-240 320-480.67l240.67-240.66L608-674 414.67-480.67 608-287.33 560.67-240Z"
/>
</g>
</svg>
</div>
</span>
</yt-icon-button>
<mdui-button-icon>
<mdui-icon-chevron-left
onClick={previous}
role="button"
style={{ padding: '5px' }}
/>
</mdui-button-icon>
</div>
<div class="lyrics-picker-content">
@ -247,9 +223,8 @@ export const LyricsPicker = (props: {
/>
</Match>
<Match when={currentLyrics().state === 'error'}>
<yt-icon
icon={errorIcon}
style={{ padding: '5px', transform: 'scale(0.8)' }}
<mdui-icon-error
style={{ padding: '5px', scale: '0.8' }}
tabindex="-1"
/>
</Match>
@ -260,9 +235,8 @@ export const LyricsPicker = (props: {
currentLyrics().data?.lyrics)
}
>
<yt-icon
icon={successIcon}
style={{ padding: '5px', transform: 'scale(0.8)' }}
<mdui-icon-check-circle
style={{ padding: '5px', scale: '0.8' }}
tabindex="-1"
/>
</Match>
@ -273,9 +247,8 @@ export const LyricsPicker = (props: {
!currentLyrics().data?.lyrics
}
>
<yt-icon
icon={notFoundIcon}
style={{ padding: '5px', transform: 'scale(0.8)' }}
<mdui-icon-warning
style={{ padding: '5px', scale: '0.8' }}
tabindex="-1"
/>
</Match>
@ -284,20 +257,14 @@ export const LyricsPicker = (props: {
class="description ytmusic-description-shelf-renderer"
text={{ runs: [{ text: provider() }] }}
/>
<yt-icon
icon={
starredProvider() === provider()
? 'yt-sys-icons:star-filled'
: 'yt-sys-icons:star'
}
onClick={toggleStar}
style={{
padding: '5px',
transform: 'scale(0.8)',
cursor: 'pointer',
}}
tabindex="-1"
/>
<mdui-button-icon onClick={toggleStar} tabindex={-1}>
<Show
fallback={<mdui-icon-star-border />}
when={starredProvider() === provider()}
>
<mdui-icon-star />
</Show>
</mdui-button-icon>
</div>
)}
</Index>
@ -318,41 +285,14 @@ export const LyricsPicker = (props: {
</ul>
</div>
<div class="lyrics-picker-right">
<yt-icon-button
class="style-scope ytmusic-player-bar"
icon={chevronRight}
onClick={next}
role={'button'}
>
<span class="yt-icon-shape style-scope yt-icon yt-spec-icon-shape">
<div
style={{
'width': '100%',
'height': '100%',
'display': 'flex',
'align-items': 'center',
'fill': 'currentcolor',
}}
>
<svg
class="style-scope yt-icon"
fill="#FFFFFF"
height={'40px'}
preserveAspectRatio="xMidYMid meet"
viewBox="0 -960 960 960"
width={'40px'}
>
<g class="style-scope yt-icon">
<path
class="style-scope yt-icon"
d="M521.33-480.67 328-674l47.33-47.33L616-480.67 375.33-240 328-287.33l193.33-193.34Z"
/>
</g>
</svg>
</div>
</span>
</yt-icon-button>
<div class="lyrics-picker-left">
<mdui-button-icon>
<mdui-icon-chevron-right
onClick={next}
role="button"
style={{ padding: '5px' }}
/>
</mdui-button-icon>
</div>
</div>
);