From 9b8daac28c758610df99da3594c88b9691ce7741 Mon Sep 17 00:00:00 2001 From: Angelos Bouklis Date: Sat, 11 Oct 2025 00:11:38 +0300 Subject: [PATCH] Add Material UI 3 component library (#3606) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: JellyBrick --- assets/mdui.css | 607 ++++++++++++++++++ package.json | 5 +- patches/mdui@2.1.4.patch | 40 ++ pnpm-lock.yaml | 118 ++++ .../navigation/components/back-button.tsx | 42 -- .../navigation/components/forward-button.tsx | 46 -- src/plugins/navigation/index.tsx | 31 +- src/plugins/navigation/style.css | 36 -- .../renderer/components/LyricsPicker.tsx | 144 ++--- src/preload.ts | 34 + src/renderer.ts | 14 +- src/youtube-music.css | 2 +- src/yt-web-components.d.ts | 13 +- 13 files changed, 890 insertions(+), 242 deletions(-) create mode 100644 assets/mdui.css create mode 100644 patches/mdui@2.1.4.patch delete mode 100644 src/plugins/navigation/components/back-button.tsx delete mode 100644 src/plugins/navigation/components/forward-button.tsx delete mode 100644 src/plugins/navigation/style.css diff --git a/assets/mdui.css b/assets/mdui.css new file mode 100644 index 00000000..fbb84408 --- /dev/null +++ b/assets/mdui.css @@ -0,0 +1,607 @@ +:root { + --mdui-breakpoint-xs: 0px; + --mdui-breakpoint-sm: 600px; + --mdui-breakpoint-md: 840px; + --mdui-breakpoint-lg: 1080px; + --mdui-breakpoint-xl: 1440px; + --mdui-breakpoint-xxl: 1920px; +} + +:root { + --mdui-color-primary-light: 103, 80, 164; + --mdui-color-primary-container-light: 234, 221, 255; + --mdui-color-on-primary-light: 255, 255, 255; + --mdui-color-on-primary-container-light: 33, 0, 94; + --mdui-color-inverse-primary-light: 208, 188, 255; + --mdui-color-secondary-light: 98, 91, 113; + --mdui-color-secondary-container-light: 232, 222, 248; + --mdui-color-on-secondary-light: 255, 255, 255; + --mdui-color-on-secondary-container-light: 30, 25, 43; + --mdui-color-tertiary-light: 125, 82, 96; + --mdui-color-tertiary-container-light: 255, 216, 228; + --mdui-color-on-tertiary-light: 255, 255, 255; + --mdui-color-on-tertiary-container-light: 55, 11, 30; + --mdui-color-surface-light: 254, 247, 255; + --mdui-color-surface-dim-light: 222, 216, 225; + --mdui-color-surface-bright-light: 254, 247, 255; + --mdui-color-surface-container-lowest-light: 255, 255, 255; + --mdui-color-surface-container-low-light: 247, 242, 250; + --mdui-color-surface-container-light: 243, 237, 247; + --mdui-color-surface-container-high-light: 236, 230, 240; + --mdui-color-surface-container-highest-light: 230, 224, 233; + --mdui-color-surface-variant-light: 231, 224, 236; + --mdui-color-on-surface-light: 28, 27, 31; + --mdui-color-on-surface-variant-light: 73, 69, 78; + --mdui-color-inverse-surface-light: 49, 48, 51; + --mdui-color-inverse-on-surface-light: 244, 239, 244; + --mdui-color-background-light: 254, 247, 255; + --mdui-color-on-background-light: 28, 27, 31; + --mdui-color-error-light: 179, 38, 30; + --mdui-color-error-container-light: 249, 222, 220; + --mdui-color-on-error-light: 255, 255, 255; + --mdui-color-on-error-container-light: 65, 14, 11; + --mdui-color-outline-light: 121, 116, 126; + --mdui-color-outline-variant-light: 196, 199, 197; + --mdui-color-shadow-light: 0, 0, 0; + --mdui-color-surface-tint-color-light: 103, 80, 164; + --mdui-color-scrim-light: 0, 0, 0; + --mdui-color-primary-dark: 208, 188, 255; + --mdui-color-primary-container-dark: 79, 55, 139; + --mdui-color-on-primary-dark: 55, 30, 115; + --mdui-color-on-primary-container-dark: 234, 221, 255; + --mdui-color-inverse-primary-dark: 103, 80, 164; + --mdui-color-secondary-dark: 204, 194, 220; + --mdui-color-secondary-container-dark: 74, 68, 88; + --mdui-color-on-secondary-dark: 51, 45, 65; + --mdui-color-on-secondary-container-dark: 232, 222, 248; + --mdui-color-tertiary-dark: 239, 184, 200; + --mdui-color-tertiary-container-dark: 99, 59, 72; + --mdui-color-on-tertiary-dark: 73, 37, 50; + --mdui-color-on-tertiary-container-dark: 255, 216, 228; + --mdui-color-surface-dark: 20, 18, 24; + --mdui-color-surface-dim-dark: 20, 18, 24; + --mdui-color-surface-bright-dark: 59, 56, 62; + --mdui-color-surface-container-lowest-dark: 15, 13, 19; + --mdui-color-surface-container-low-dark: 29, 27, 32; + --mdui-color-surface-container-dark: 33, 31, 38; + --mdui-color-surface-container-high-dark: 43, 41, 48; + --mdui-color-surface-container-highest-dark: 54, 52, 59; + --mdui-color-surface-variant-dark: 73, 69, 79; + --mdui-color-on-surface-dark: 230, 225, 229; + --mdui-color-on-surface-variant-dark: 202, 196, 208; + --mdui-color-inverse-surface-dark: 230, 225, 229; + --mdui-color-inverse-on-surface-dark: 49, 48, 51; + --mdui-color-background-dark: 20, 18, 24; + --mdui-color-on-background-dark: 230, 225, 229; + --mdui-color-error-dark: 242, 184, 181; + --mdui-color-error-container-dark: 140, 29, 24; + --mdui-color-on-error-dark: 96, 20, 16; + --mdui-color-on-error-container-dark: 249, 222, 220; + --mdui-color-outline-dark: 147, 143, 153; + --mdui-color-outline-variant-dark: 68, 71, 70; + --mdui-color-shadow-dark: 0, 0, 0; + --mdui-color-surface-tint-color-dark: 208, 188, 255; + --mdui-color-scrim-dark: 0, 0, 0; +} + +.mdui-theme-dark, +:root { + color-scheme: dark; + --mdui-color-primary: var(--mdui-color-primary-dark); + --mdui-color-primary-container: var(--mdui-color-primary-container-dark); + --mdui-color-on-primary: var(--mdui-color-on-primary-dark); + --mdui-color-on-primary-container: var( + --mdui-color-on-primary-container-dark + ); + --mdui-color-inverse-primary: var(--mdui-color-inverse-primary-dark); + --mdui-color-secondary: var(--mdui-color-secondary-dark); + --mdui-color-secondary-container: var(--mdui-color-secondary-container-dark); + --mdui-color-on-secondary: var(--mdui-color-on-secondary-dark); + --mdui-color-on-secondary-container: var( + --mdui-color-on-secondary-container-dark + ); + --mdui-color-tertiary: var(--mdui-color-tertiary-dark); + --mdui-color-tertiary-container: var(--mdui-color-tertiary-container-dark); + --mdui-color-on-tertiary: var(--mdui-color-on-tertiary-dark); + --mdui-color-on-tertiary-container: var( + --mdui-color-on-tertiary-container-dark + ); + --mdui-color-surface: var(--mdui-color-surface-dark); + --mdui-color-surface-dim: var(--mdui-color-surface-dim-dark); + --mdui-color-surface-bright: var(--mdui-color-surface-bright-dark); + --mdui-color-surface-container-lowest: var( + --mdui-color-surface-container-lowest-dark + ); + --mdui-color-surface-container-low: var( + --mdui-color-surface-container-low-dark + ); + --mdui-color-surface-container: var(--mdui-color-surface-container-dark); + --mdui-color-surface-container-high: var( + --mdui-color-surface-container-high-dark + ); + --mdui-color-surface-container-highest: var( + --mdui-color-surface-container-highest-dark + ); + --mdui-color-surface-variant: var(--mdui-color-surface-variant-dark); + --mdui-color-on-surface: var(--mdui-color-on-surface-dark); + --mdui-color-on-surface-variant: var(--mdui-color-on-surface-variant-dark); + --mdui-color-inverse-surface: var(--mdui-color-inverse-surface-dark); + --mdui-color-inverse-on-surface: var(--mdui-color-inverse-on-surface-dark); + --mdui-color-background: var(--mdui-color-background-dark); + --mdui-color-on-background: var(--mdui-color-on-background-dark); + --mdui-color-error: var(--mdui-color-error-dark); + --mdui-color-error-container: var(--mdui-color-error-container-dark); + --mdui-color-on-error: var(--mdui-color-on-error-dark); + --mdui-color-on-error-container: var(--mdui-color-on-error-container-dark); + --mdui-color-outline: var(--mdui-color-outline-dark); + --mdui-color-outline-variant: var(--mdui-color-outline-variant-dark); + --mdui-color-shadow: var(--mdui-color-shadow-dark); + --mdui-color-surface-tint-color: var(--mdui-color-surface-tint-color-dark); + --mdui-color-scrim: var(--mdui-color-scrim-dark); + color: rgb(var(--mdui-color-on-background)); + background-color: rgb(var(--mdui-color-background)); +} + +:root { + --mdui-elevation-level0: none; + --mdui-elevation-level1: 0 0.5px 1.5px 0 rgba(var(--mdui-color-shadow), 19%), + 0 0 1px 0 rgba(var(--mdui-color-shadow), 3.9%); + --mdui-elevation-level2: 0 0.85px 3px 0 rgba(var(--mdui-color-shadow), 19%), + 0 0.25px 1px 0 rgba(var(--mdui-color-shadow), 3.9%); + --mdui-elevation-level3: 0 1.25px 5px 0 rgba(var(--mdui-color-shadow), 19%), + 0 0.3333px 1.5px 0 rgba(var(--mdui-color-shadow), 3.9%); + --mdui-elevation-level4: 0 1.85px 6.25px 0 rgba(var(--mdui-color-shadow), 19%), + 0 0.5px 1.75px 0 rgba(var(--mdui-color-shadow), 3.9%); + --mdui-elevation-level5: 0 2.75px 9px 0 rgba(var(--mdui-color-shadow), 19%), + 0 0.25px 3px 0 rgba(var(--mdui-color-shadow), 3.9%); +} + +:root { + --mdui-motion-easing-linear: cubic-bezier(0, 0, 1, 1); + --mdui-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1); + --mdui-motion-easing-standard-accelerate: cubic-bezier(0.3, 0, 1, 1); + --mdui-motion-easing-standard-decelerate: cubic-bezier(0, 0, 0, 1); + --mdui-motion-easing-emphasized: var(--mdui-motion-easing-standard); + --mdui-motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15); + --mdui-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1); + --mdui-motion-duration-short1: 50ms; + --mdui-motion-duration-short2: 100ms; + --mdui-motion-duration-short3: 150ms; + --mdui-motion-duration-short4: 200ms; + --mdui-motion-duration-medium1: 250ms; + --mdui-motion-duration-medium2: 300ms; + --mdui-motion-duration-medium3: 350ms; + --mdui-motion-duration-medium4: 400ms; + --mdui-motion-duration-long1: 450ms; + --mdui-motion-duration-long2: 500ms; + --mdui-motion-duration-long3: 550ms; + --mdui-motion-duration-long4: 600ms; + --mdui-motion-duration-extra-long1: 700ms; + --mdui-motion-duration-extra-long2: 800ms; + --mdui-motion-duration-extra-long3: 900ms; + --mdui-motion-duration-extra-long4: 1000ms; +} + +.mdui-prose { + line-height: 1.75; + word-wrap: break-word; +} + +.mdui-prose :first-child { + margin-top: 0; +} + +.mdui-prose :last-child { + margin-bottom: 0; +} + +.mdui-prose code, +.mdui-prose kbd, +.mdui-prose pre, +.mdui-prose pre tt, +.mdui-prose samp { + font-family: Consolas, Courier, 'Courier New', monospace; +} + +.mdui-prose caption { + text-align: left; +} +.mdui-prose [draggable='true'], +.mdui-prose [draggable] { + cursor: move; +} +.mdui-prose [draggable='false'] { + cursor: inherit; +} +.mdui-prose dl, +.mdui-prose form, +.mdui-prose ol, +.mdui-prose p, +.mdui-prose ul { + margin-top: 1.25em; + margin-bottom: 1.25em; +} +.mdui-prose a { + text-decoration: none; + outline: 0; + color: rgb(var(--mdui-color-primary)); +} +.mdui-prose a:focus, +.mdui-prose a:hover { + border-bottom: 0.0625rem solid rgb(var(--mdui-color-primary)); +} +.mdui-prose small { + font-size: 0.875em; +} +.mdui-prose strong { + font-weight: 600; +} +.mdui-prose blockquote { + margin: 1.6em 2em; + padding-left: 1em; + border-left: 0.25rem solid rgb(var(--mdui-color-surface-variant)); +} +@media only screen and (max-width: 599.98px) { + .mdui-prose blockquote { + margin: 1.6em 0; + } +} +.mdui-prose blockquote footer { + font-size: 86%; + color: rgb(var(--mdui-color-on-surface-variant)); +} +.mdui-prose mark { + color: inherit; + background-color: rgb(var(--mdui-color-secondary-container)); + border-bottom: 0.0625rem solid rgb(var(--mdui-color-secondary)); + margin: 0 0.375rem; + padding: 0.125rem; +} +.mdui-prose h1, +.mdui-prose h2, +.mdui-prose h3, +.mdui-prose h4, +.mdui-prose h5, +.mdui-prose h6 { + font-weight: 400; +} +.mdui-prose h1 small, +.mdui-prose h2 small, +.mdui-prose h3 small, +.mdui-prose h4 small, +.mdui-prose h5 small, +.mdui-prose h6 small { + font-weight: inherit; + font-size: 65%; + color: rgb(var(--mdui-color-on-surface-variant)); +} +.mdui-prose h1 strong, +.mdui-prose h2 strong, +.mdui-prose h3 strong, +.mdui-prose h4 strong, +.mdui-prose h5 strong, +.mdui-prose h6 strong { + font-weight: 600; +} +.mdui-prose h1 { + font-size: 2.5em; + margin-top: 0; + margin-bottom: 1.25em; + line-height: 1.1111; +} +.mdui-prose h2 { + font-size: 1.875em; + margin-top: 2.25em; + margin-bottom: 1.125em; + line-height: 1.3333; +} +.mdui-prose h3 { + font-size: 1.5em; + margin-top: 2em; + margin-bottom: 1em; + line-height: 1.6; +} +.mdui-prose h4 { + font-size: 1.25em; + margin-top: 1.875em; + margin-bottom: 0.875em; + line-height: 1.5; +} +.mdui-prose h2 + *, +.mdui-prose h3 + *, +.mdui-prose h4 + *, +.mdui-prose hr + * { + margin-top: 0; +} +.mdui-prose code, +.mdui-prose kbd { + font-size: 0.875em; + color: rgb(var(--mdui-color-on-surface-container)); + background-color: rgba(var(--mdui-color-surface-variant), 0.28); + padding: 0.125rem 0.375rem; + border-radius: var(--mdui-shape-corner-extra-small); +} +.mdui-prose kbd { + font-size: 0.9em; +} +.mdui-prose abbr[title] { + text-decoration: none; + cursor: help; + border-bottom: 0.0625rem dotted rgb(var(--mdui-color-on-surface-variant)); +} +.mdui-prose ins, +.mdui-prose u { + text-decoration: none; + border-bottom: 0.0625rem solid rgb(var(--mdui-color-on-surface-variant)); +} +.mdui-prose del { + text-decoration: line-through; +} +.mdui-prose hr { + margin-top: 3em; + margin-bottom: 3em; + border: none; + border-bottom: 0.0625rem solid rgb(var(--mdui-color-surface-variant)); +} +.mdui-prose pre { + margin-top: 1.7143em; + margin-bottom: 1.7143em; +} +.mdui-prose pre code { + padding: 0.8571em 1.1429em; + overflow-x: auto; + -webkit-overflow-scrolling: touch; + background-color: rgb(var(--mdui-color-surface-container)); + color: rgb(var(--mdui-color-on-surface-container)); + border-radius: var(--mdui-shape-corner-extra-small); +} +.mdui-prose ol, +.mdui-prose ul { + padding-left: 1.625em; +} +.mdui-prose ul { + list-style-type: disc; +} +.mdui-prose ol { + list-style-type: decimal; +} +.mdui-prose ol[type='A'] { + list-style-type: upper-alpha; +} +.mdui-prose ol[type='a'] { + list-style-type: lower-alpha; +} +.mdui-prose ol[type='I'] { + list-style-type: upper-roman; +} +.mdui-prose ol[type='i'] { + list-style-type: lower-roman; +} +.mdui-prose ol[type='1'] { + list-style-type: decimal; +} +.mdui-prose li { + margin-top: 0.5em; + margin-bottom: 0.5em; +} +.mdui-prose ol > li, +.mdui-prose ul > li { + padding-left: 0.375em; +} +.mdui-prose ol > li > p, +.mdui-prose ul > li > p { + margin-top: 0.75em; + margin-bottom: 0.75em; +} +.mdui-prose ol > li > :first-child, +.mdui-prose ul > li > :first-child { + margin-top: 1.25em; +} +.mdui-prose ol > li > :last-child, +.mdui-prose ul > li > :last-child { + margin-bottom: 1.25em; +} +.mdui-prose ol > li::marker { + font-weight: 400; + color: rgb(var(--mdui-color-on-surface-variant)); +} +.mdui-prose ul > li::marker { + color: rgb(var(--mdui-color-on-surface-variant)); +} +.mdui-prose ol ol, +.mdui-prose ol ul, +.mdui-prose ul ol, +.mdui-prose ul ul { + margin-top: 0.75em; + margin-bottom: 0.75em; +} +.mdui-prose fieldset, +.mdui-prose img { + border: none; +} +.mdui-prose figure, +.mdui-prose img, +.mdui-prose video { + margin-top: 2em; + margin-bottom: 2em; + max-width: 100%; +} +.mdui-prose figure > * { + margin-top: 0; + margin-bottom: 0; +} +.mdui-prose figcaption { + font-size: 0.875em; + line-height: 1.4286; + margin-top: 0.8571em; + color: rgb(var(--mdui-color-on-surface-variant)); +} +.mdui-prose figcaption:empty::before { + z-index: -1; + cursor: text; + content: attr(placeholder); + color: rgb(var(--mdui-color-on-surface-variant)); +} +.mdui-prose table { + margin-top: 2em; + margin-bottom: 2em; + border: 0.0625rem solid rgb(var(--mdui-color-surface-variant)); + border-radius: var(--mdui-shape-corner-large); +} +.mdui-table { + width: 100%; + overflow-x: auto; + margin-top: 2em; + margin-bottom: 2em; + border: 0.0625rem solid rgb(var(--mdui-color-surface-variant)); + border-radius: var(--mdui-shape-corner-large); +} +.mdui-table table { + margin-top: 0; + margin-bottom: 0; + border: none; + border-radius: 0; +} +.mdui-prose table, +.mdui-table table { + width: 100%; + text-align: left; + border-collapse: collapse; + border-spacing: 0; +} +.mdui-prose td, +.mdui-prose th, +.mdui-table td, +.mdui-table th { + border-top: 0.0625rem solid rgb(var(--mdui-color-surface-variant)); +} +.mdui-prose td:not(:first-child), +.mdui-prose th:not(:first-child), +.mdui-table td:not(:first-child), +.mdui-table th:not(:first-child) { + border-left: 0.0625rem solid rgb(var(--mdui-color-surface-variant)); +} +.mdui-prose td:not(:last-child), +.mdui-prose th:not(:last-child), +.mdui-table td:not(:last-child), +.mdui-table th:not(:last-child) { + border-right: 0.0625rem solid rgb(var(--mdui-color-surface-variant)); +} +.mdui-prose tfoot td, +.mdui-prose tfoot th, +.mdui-prose thead td, +.mdui-prose thead th, +.mdui-table tfoot td, +.mdui-table tfoot th, +.mdui-table thead td, +.mdui-table thead th { + position: relative; + vertical-align: middle; + padding: 1.125rem 1rem; + font-weight: var(--mdui-typescale-title-medium-weight); + letter-spacing: var(--mdui-typescale-title-medium-tracking); + line-height: var(--mdui-typescale-title-medium-line-height); + color: rgb(var(--mdui-color-on-surface-variant)); + box-shadow: var(--mdui-elevation-level1); +} +.mdui-prose tbody td, +.mdui-prose tbody th, +.mdui-table tbody td, +.mdui-table tbody th { + padding: 0.875rem 1rem; +} +.mdui-prose tbody th, +.mdui-table tbody th { + vertical-align: middle; + font-weight: inherit; +} +.mdui-prose tbody td, +.mdui-table tbody td { + vertical-align: baseline; +} +.mdui-prose tbody:first-child tr:first-child td, +.mdui-prose thead:first-child tr:first-child th, +.mdui-table tbody:first-child tr:first-child td, +.mdui-table thead:first-child tr:first-child th { + border-top: 0; +} +:root { + --mdui-shape-corner-none: 0; + --mdui-shape-corner-extra-small: 0.25rem; + --mdui-shape-corner-small: 0.5rem; + --mdui-shape-corner-medium: 0.75rem; + --mdui-shape-corner-large: 1rem; + --mdui-shape-corner-extra-large: 1.75rem; + --mdui-shape-corner-full: 1000rem; +} +:root { + --mdui-state-layer-hover: 0.08; + --mdui-state-layer-focus: 0.12; + --mdui-state-layer-pressed: 0.12; + --mdui-state-layer-dragged: 0.16; +} +:root { + --mdui-typescale-display-large-weight: 400; + --mdui-typescale-display-medium-weight: 400; + --mdui-typescale-display-small-weight: 400; + --mdui-typescale-display-large-line-height: 4rem; + --mdui-typescale-display-medium-line-height: 3.25rem; + --mdui-typescale-display-small-line-height: 2.75rem; + --mdui-typescale-display-large-size: 3.5625rem; + --mdui-typescale-display-medium-size: 2.8125rem; + --mdui-typescale-display-small-size: 2.25rem; + --mdui-typescale-display-large-tracking: 0rem; + --mdui-typescale-display-medium-tracking: 0rem; + --mdui-typescale-display-small-tracking: 0rem; + --mdui-typescale-headline-large-weight: 400; + --mdui-typescale-headline-medium-weight: 400; + --mdui-typescale-headline-small-weight: 400; + --mdui-typescale-headline-large-line-height: 2.5rem; + --mdui-typescale-headline-medium-line-height: 2.25rem; + --mdui-typescale-headline-small-line-height: 2rem; + --mdui-typescale-headline-large-size: 2rem; + --mdui-typescale-headline-medium-size: 1.75rem; + --mdui-typescale-headline-small-size: 1.5rem; + --mdui-typescale-headline-large-tracking: 0rem; + --mdui-typescale-headline-medium-tracking: 0rem; + --mdui-typescale-headline-small-tracking: 0rem; + --mdui-typescale-title-large-weight: 400; + --mdui-typescale-title-medium-weight: 500; + --mdui-typescale-title-small-weight: 500; + --mdui-typescale-title-large-line-height: 1.75rem; + --mdui-typescale-title-medium-line-height: 1.5rem; + --mdui-typescale-title-small-line-height: 1.25rem; + --mdui-typescale-title-large-size: 1.375rem; + --mdui-typescale-title-medium-size: 1rem; + --mdui-typescale-title-small-size: 0.875rem; + --mdui-typescale-title-large-tracking: 0rem; + --mdui-typescale-title-medium-tracking: 0.009375rem; + --mdui-typescale-title-small-tracking: 0.00625rem; + --mdui-typescale-label-large-weight: 500; + --mdui-typescale-label-medium-weight: 500; + --mdui-typescale-label-small-weight: 500; + --mdui-typescale-label-large-line-height: 1.25rem; + --mdui-typescale-label-medium-line-height: 1rem; + --mdui-typescale-label-small-line-height: 0.375rem; + --mdui-typescale-label-large-size: 0.875rem; + --mdui-typescale-label-medium-size: 0.75rem; + --mdui-typescale-label-small-size: 0.6875rem; + --mdui-typescale-label-large-tracking: 0.00625rem; + --mdui-typescale-label-medium-tracking: 0.03125rem; + --mdui-typescale-label-small-tracking: 0.03125rem; + --mdui-typescale-body-large-weight: 400; + --mdui-typescale-body-medium-weight: 400; + --mdui-typescale-body-small-weight: 400; + --mdui-typescale-body-large-line-height: 1.5rem; + --mdui-typescale-body-medium-line-height: 1.25rem; + --mdui-typescale-body-small-line-height: 1rem; + --mdui-typescale-body-large-size: 1rem; + --mdui-typescale-body-medium-size: 0.875rem; + --mdui-typescale-body-small-size: 0.75rem; + --mdui-typescale-body-large-tracking: 0.009375rem; + --mdui-typescale-body-medium-tracking: 0.015625rem; + --mdui-typescale-body-small-tracking: 0.025rem; +} +.mdui-lock-screen { + overflow: hidden !important; +} diff --git a/package.json b/package.json index e209028f..393700c0 100644 --- a/package.json +++ b/package.json @@ -57,7 +57,8 @@ "@malept/flatpak-bundler@0.4.0": "patches/@malept__flatpak-bundler@0.4.0.patch", "kuromoji@0.1.2": "patches/kuromoji@0.1.2.patch", "file-type@16.5.4": "patches/file-type@16.5.4.patch", - "electron-is@3.0.0": "patches/electron-is@3.0.0.patch" + "electron-is@3.0.0": "patches/electron-is@3.0.0.patch", + "mdui@2.1.4": "patches/mdui@2.1.4.patch" }, "neverBuiltDependencies": [] }, @@ -80,6 +81,7 @@ "@jellybrick/electron-better-web-request": "1.0.4", "@jellybrick/mpris-service": "2.1.5", "@jimp/plugin-color": "1.6.0", + "@mdui/icons": "^1.0.3", "@skyra/jaro-winkler": "1.1.1", "@xhayper/discord-rpc": "1.3.0", "async-mutex": "0.5.0", @@ -115,6 +117,7 @@ "kuroshiro": "1.2.0", "kuroshiro-analyzer-kuromoji": "1.1.0", "lazy-var": "2.2.2", + "mdui": "2.1.4", "node-html-parser": "7.0.1", "node-id3": "0.2.9", "peerjs": "1.5.5", diff --git a/patches/mdui@2.1.4.patch b/patches/mdui@2.1.4.patch new file mode 100644 index 00000000..cb6838bd --- /dev/null +++ b/patches/mdui@2.1.4.patch @@ -0,0 +1,40 @@ +diff --git a/jsx.en.d.ts b/jsx.en.d.ts +index 514d455dcdb436aaf7b2ee88deaefe01943c8b4b..48dff045dead4315936afd931336198996c88217 100644 +--- a/jsx.en.d.ts ++++ b/jsx.en.d.ts +@@ -1,12 +1,8 @@ +-import React from 'react'; + import { JQ } from '@mdui/jq'; + +-type HTMLElementProps = React.DetailedHTMLProps, HTMLElement>; ++type HTMLElementProps = import("solid-js").JSX.HTMLAttributes; + +-declare global { +- namespace React { +- namespace JSX { +- interface IntrinsicElements { ++export interface IntrinsicElements { + /** + * Avatar Component + * +@@ -3296,7 +3292,4 @@ declare global { + */ + 'order'?: number; + } & HTMLElementProps; +- } +- } +- } + } +diff --git a/package.json b/package.json +index 3fa3eeb471ce4c31d7ac1c9bcb2d6823947e91ca..c4b062020bf20b8db34ccfea500fa682a4af19a6 100644 +--- a/package.json ++++ b/package.json +@@ -60,5 +60,8 @@ + "tslib": "^2.8.1", + "@mdui/shared": "^1.0.8", + "@mdui/jq": "^3.0.3" ++ }, ++ "peerDependencies": { ++ "solid-js": "^1.9.7" + } + } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 60535de6..6eae8e70 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -25,6 +25,9 @@ patchedDependencies: kuromoji@0.1.2: hash: 4a948f1ea45c61779fa371feb020253ccf7a24e1f7c6b2e250b3ce53d86216d4 path: patches/kuromoji@0.1.2.patch + mdui@2.1.4: + hash: 008b925e23862ced06c38f9765eef4322eb8a93cb5e9a6b684fd717fec0ea0d9 + path: patches/mdui@2.1.4.patch vudio@2.1.1: hash: 0e06c2ed11c02bdc490c209fa80070e98517c2735c641f5738b6e15d7dc1959d path: patches/vudio@2.1.1.patch @@ -87,6 +90,9 @@ importers: '@jimp/plugin-color': specifier: 1.6.0 version: 1.6.0 + '@mdui/icons': + specifier: ^1.0.3 + version: 1.0.3 '@skyra/jaro-winkler': specifier: 1.1.1 version: 1.1.1 @@ -192,6 +198,9 @@ importers: lazy-var: specifier: 2.2.2 version: 2.2.2 + mdui: + specifier: 2.1.4 + version: 2.1.4(patch_hash=008b925e23862ced06c38f9765eef4322eb8a93cb5e9a6b684fd717fec0ea0d9) node-html-parser: specifier: 7.0.1 version: 7.0.1 @@ -1011,6 +1020,15 @@ packages: '@jridgewell/trace-mapping@0.3.30': resolution: {integrity: sha512-GQ7Nw5G2lTu/BtHTKfXhKHok2WGetd4XYcVKGx00SjAk8GMwgJM3zr6zORiPGuOE+/vkc90KtTosSSvaCjKb2Q==} + '@lit-labs/ssr-dom-shim@1.4.0': + resolution: {integrity: sha512-ficsEARKnmmW5njugNYKipTm4SFnbik7CXtoencDZzmzo/dQ+2Q0bgkzJuoJP20Aj0F+izzJjOqsnkd6F/o1bw==} + + '@lit/localize@0.12.2': + resolution: {integrity: sha512-Qv9kvgJKDq/JVSwXOxuWvQnnOBysHA99ti9im9a4fImCmx+fto+XXcUYQbjZHqiueEEc4V20PcRDPO+1g/6seQ==} + + '@lit/reactive-element@2.1.1': + resolution: {integrity: sha512-N+dm5PAYdQ8e6UlywyyrgI2t++wFGXfHx+dSJ1oBrg6FAxUj40jId++EaRm80MKX5JnlH1sBsyZ5h0bcZKemCg==} + '@malept/cross-spawn-promise@2.0.0': resolution: {integrity: sha512-1DpKU0Z5ThltBwjNySMC14g0CkbyhCaz9FkhxqNsZI6uAPJXFS8cMXlBKo26FJ8ZuW6S9GCMcR9IO5k2X5/9Fg==} engines: {node: '>= 12.13.0'} @@ -1019,6 +1037,18 @@ packages: resolution: {integrity: sha512-9QOtNffcOF/c1seMCDnjckb3R9WHcG34tky+FHpNKKCW0wc/scYLwMtO+ptyGUfMW0/b/n4qRiALlaFHc9Oj7Q==} engines: {node: '>= 10.0.0'} + '@material/material-color-utilities@0.3.0': + resolution: {integrity: sha512-ztmtTd6xwnuh2/xu+Vb01btgV8SQWYCaK56CkRK8gEkWe5TuDyBcYJ0wgkMRn+2VcE9KUmhvkz+N9GHrqw/C0g==} + + '@mdui/icons@1.0.3': + resolution: {integrity: sha512-Jq9juUqIJMBvIRSTr0qBKiqnlbY5pVUzUP20EHSN8dT7GcqN7bq0AL8MASL5DxKs09kgcERq+z5bHJOkz/VDlA==} + + '@mdui/jq@3.0.3': + resolution: {integrity: sha512-nI8QK9UPHhiIbECrC1aMdLXNxP6WgUtC9XwRPs/e56FtwduePyxPyloXmgU8VYw85i6TtYdgClHS9tW8JweNZA==} + + '@mdui/shared@1.0.8': + resolution: {integrity: sha512-YY863fjHBuk8KtiO4uLDm1YyIVdGrWv4xUxfv8jP32WqIQBkSTbV7HN8jnKXXIej0NFP7pU89yGr4GJYzVszPg==} + '@msgpack/msgpack@2.8.0': resolution: {integrity: sha512-h9u4u/jiIRKbq25PM+zymTyW6bhTzELvOoUd+AvYriWOAKpLGnIamaET3pnHYoI5iYphAHBI4ayx0MehR+VVPQ==} engines: {node: '>= 10'} @@ -1890,6 +1920,9 @@ packages: resolution: {integrity: sha512-NIxF55hv4nSqQswkAeiOi1r83xy8JldOFDTWiug55KBu9Jnblncd2U6ViHmYgHf01TPZS77NJBhBMKdWj9HQMQ==} engines: {node: '>=8'} + classcat@5.0.5: + resolution: {integrity: sha512-JhZUT7JFcQy/EzW605k/ktHtncoo9vnyW/2GspNYwFlN1C/WmjuV/xtS04e9SOkL2sTdw0VAZ2UGCcQ9lR6p6w==} + clean-stack@2.2.0: resolution: {integrity: sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==} engines: {node: '>=6'} @@ -3085,6 +3118,9 @@ packages: resolution: {integrity: sha512-9UoipoxYmSk6Xy7QFgRv2HDyaysmgSG75TFQs6S+3pDM7ZhKTF/bskZV+0UlABHzKjNVhPjYCLfeZUEg1wXxig==} engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0} + is-promise@4.0.0: + resolution: {integrity: sha512-hvpoI6korhJMnej285dSg6nu1+e6uxs7zG3BYAm5byqDsgJNWwxzM6z6iZiAgQR4TJ30JmBTOwqZUw3WlyH3AQ==} + is-regex@1.2.1: resolution: {integrity: sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==} engines: {node: '>= 0.4'} @@ -3346,6 +3382,15 @@ packages: resolution: {integrity: sha512-xi6IyHML+c9+Q3W0S4fCQJOym42pyurFiJUHEcEyHS0CeKzia4yZDEsLlqOFykxOdHpNy0NmvVO31vcSqAxJCg==} engines: {node: '>= 12.0.0'} + lit-element@4.2.1: + resolution: {integrity: sha512-WGAWRGzirAgyphK2urmYOV72tlvnxw7YfyLDgQ+OZnM9vQQBQnumQ7jUJe6unEzwGU3ahFOjuz1iz1jjrpCPuw==} + + lit-html@3.3.1: + resolution: {integrity: sha512-S9hbyDu/vs1qNrithiNyeyv64c9yqiW9l+DBgI18fL+MTvOtWoFR0FWiyq1TxaYef5wNlpEmzlXoBlZEO+WjoA==} + + lit@3.3.1: + resolution: {integrity: sha512-Ksr/8L3PTapbdXJCk+EJVB78jDodUMaP54gD24W186zGRARvwrsPfS60wae/SSCTCNZVPd1chXqio1qHQmu4NA==} + locate-path@6.0.0: resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==} engines: {node: '>=10'} @@ -3420,6 +3465,9 @@ packages: resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==} engines: {node: '>= 0.4'} + mdui@2.1.4: + resolution: {integrity: sha512-QtK5xia5HXtVO7yH30QjwvvNruw5JdrJL1MEc1k6S/ZfsbHOj6BxxdYjrdv2HiN5ikkGqt5CIbZdFyq6shaZyw==} + meow@13.2.0: resolution: {integrity: sha512-pxQJQzB6djGPXh08dacEloMFopsOqGVRKFPYvPOt9XDZ1HasbgDZA74CJGreSU4G3Ak7EFJGoiH2auq+yXISgA==} engines: {node: '>=18'} @@ -4309,6 +4357,9 @@ packages: sprintf-js@1.1.3: resolution: {integrity: sha512-Oo+0REFV59/rz3gfJNKQiBlwfHaSESl1pcGyABQsnnIfWOFt6JNj5gCog2U6MLZ//IGYD+nA8nI+mTShREReaA==} + ssr-window@5.0.1: + resolution: {integrity: sha512-WVXlhQsm54HC+FnJfEbccEgNF7mKXtnFUB8Xn7rx2dsWHOlBdqezdX88Vjh6pVGaa0ZvL+PoSu7rEcBuNmxt6g==} + ssri@12.0.0: resolution: {integrity: sha512-S7iGNosepx9RadX82oimUkvr0Ct7IjJbEbs4mJcTxst8um95J3sDYU1RBEOvdu6oL1Wek2ODI5i4MAw+dZ6cAQ==} engines: {node: ^18.17.0 || >=20.5.0} @@ -5606,6 +5657,16 @@ snapshots: '@jridgewell/resolve-uri': 3.1.2 '@jridgewell/sourcemap-codec': 1.5.5 + '@lit-labs/ssr-dom-shim@1.4.0': {} + + '@lit/localize@0.12.2': + dependencies: + lit: 3.3.1 + + '@lit/reactive-element@2.1.1': + dependencies: + '@lit-labs/ssr-dom-shim': 1.4.0 + '@malept/cross-spawn-promise@2.0.0': dependencies: cross-spawn: 7.0.6 @@ -5619,6 +5680,27 @@ snapshots: transitivePeerDependencies: - supports-color + '@material/material-color-utilities@0.3.0': {} + + '@mdui/icons@1.0.3': + dependencies: + '@mdui/shared': 1.0.8 + lit: 3.3.1 + tslib: 2.8.1 + + '@mdui/jq@3.0.3': + dependencies: + ssr-window: 5.0.1 + tslib: 2.8.1 + + '@mdui/shared@1.0.8': + dependencies: + '@lit/reactive-element': 2.1.1 + '@mdui/jq': 3.0.3 + lit: 3.3.1 + ssr-window: 5.0.1 + tslib: 2.8.1 + '@msgpack/msgpack@2.8.0': {} '@napi-rs/wasm-runtime@0.2.12': @@ -6576,6 +6658,8 @@ snapshots: ci-info@3.9.0: {} + classcat@5.0.5: {} + clean-stack@2.2.0: {} clean-stack@5.2.0: @@ -8009,6 +8093,8 @@ snapshots: is-port-reachable@4.0.0: {} + is-promise@4.0.0: {} + is-regex@1.2.1: dependencies: call-bound: 1.0.4 @@ -8262,6 +8348,22 @@ snapshots: lightningcss-win32-arm64-msvc: 1.30.1 lightningcss-win32-x64-msvc: 1.30.1 + lit-element@4.2.1: + dependencies: + '@lit-labs/ssr-dom-shim': 1.4.0 + '@lit/reactive-element': 2.1.1 + lit-html: 3.3.1 + + lit-html@3.3.1: + dependencies: + '@types/trusted-types': 2.0.7 + + lit@3.3.1: + dependencies: + '@lit/reactive-element': 2.1.1 + lit-element: 4.2.1 + lit-html: 3.3.1 + locate-path@6.0.0: dependencies: p-locate: 5.0.0 @@ -8352,6 +8454,20 @@ snapshots: math-intrinsics@1.1.0: {} + mdui@2.1.4(patch_hash=008b925e23862ced06c38f9765eef4322eb8a93cb5e9a6b684fd717fec0ea0d9): + dependencies: + '@floating-ui/utils': 0.2.10 + '@lit/localize': 0.12.2 + '@lit/reactive-element': 2.1.1 + '@material/material-color-utilities': 0.3.0 + '@mdui/jq': 3.0.3 + '@mdui/shared': 1.0.8 + classcat: 5.0.5 + is-promise: 4.0.0 + lit: 3.3.1 + ssr-window: 5.0.1 + tslib: 2.8.1 + meow@13.2.0: {} merge-anything@5.1.7: @@ -9232,6 +9348,8 @@ snapshots: sprintf-js@1.1.3: optional: true + ssr-window@5.0.1: {} + ssri@12.0.0: dependencies: minipass: 7.1.2 diff --git a/src/plugins/navigation/components/back-button.tsx b/src/plugins/navigation/components/back-button.tsx deleted file mode 100644 index 06c80469..00000000 --- a/src/plugins/navigation/components/back-button.tsx +++ /dev/null @@ -1,42 +0,0 @@ -export interface BackButtonProps { - onClick?: (e: MouseEvent) => void; - title: string; -} - -export const BackButton = (props: BackButtonProps) => ( -
props.onClick?.(e)} - role="tab" - tab-id="FEmusic_back" - > -
- -
-
-); diff --git a/src/plugins/navigation/components/forward-button.tsx b/src/plugins/navigation/components/forward-button.tsx deleted file mode 100644 index e9da520f..00000000 --- a/src/plugins/navigation/components/forward-button.tsx +++ /dev/null @@ -1,46 +0,0 @@ -export interface ForwardButtonProps { - onClick?: (e: MouseEvent) => void; - title: string; -} - -export const ForwardButton = (props: ForwardButtonProps) => ( -
props.onClick?.(e)} - role="tab" - tab-id="FEmusic_next" - > -
- -
-
-); diff --git a/src/plugins/navigation/index.tsx b/src/plugins/navigation/index.tsx index 8321637e..54baccd9 100644 --- a/src/plugins/navigation/index.tsx +++ b/src/plugins/navigation/index.tsx @@ -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( () => ( <> - history.back()} - title={t('plugins.navigation.templates.back.title')} - /> - history.forward()} - title={t('plugins.navigation.templates.forward.title')} - /> + + history.back()}> + + + + + history.forward()}> + + + ), this.buttonContainer, diff --git a/src/plugins/navigation/style.css b/src/plugins/navigation/style.css deleted file mode 100644 index 95f97536..00000000 --- a/src/plugins/navigation/style.css +++ /dev/null @@ -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); -} diff --git a/src/plugins/synced-lyrics/renderer/components/LyricsPicker.tsx b/src/plugins/synced-lyrics/renderer/components/LyricsPicker.tsx index 6f6ac92a..5495f992 100644 --- a/src/plugins/synced-lyrics/renderer/components/LyricsPicker.tsx +++ b/src/plugins/synced-lyrics/renderer/components/LyricsPicker.tsx @@ -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 (
- - -
- - - - - -
- - + + +
@@ -247,9 +223,8 @@ export const LyricsPicker = (props: { /> - @@ -260,9 +235,8 @@ export const LyricsPicker = (props: { currentLyrics().data?.lyrics) } > - @@ -273,9 +247,8 @@ export const LyricsPicker = (props: { !currentLyrics().data?.lyrics } > - @@ -284,20 +257,14 @@ export const LyricsPicker = (props: { class="description ytmusic-description-shelf-renderer" text={{ runs: [{ text: provider() }] }} /> - + + } + when={starredProvider() === provider()} + > + + +
)} @@ -318,41 +285,14 @@ export const LyricsPicker = (props: {
-
- - -
- - - - - -
- - +
+ + +
); diff --git a/src/preload.ts b/src/preload.ts index 33a5d77f..fb754d43 100644 --- a/src/preload.ts +++ b/src/preload.ts @@ -8,6 +8,40 @@ import is from 'electron-is'; import * as config from './config'; +import mduiStyleSheet from '@assets/mdui.css?inline'; + +contextBridge.exposeInMainWorld( + 'litIssuedWarnings', + new Set([ + 'Lit is in dev mode. Not recommended for production! See https://lit.dev/msg/dev-mode for more information.', + 'Shadow DOM is being polyfilled via `ShadyDOM` but the `polyfill-support` module has not been loaded. See https://lit.dev/msg/polyfill-support-missing for more information.', + ]), +); + +new MutationObserver((mutations, observer) => { + outer: for (const mutation of mutations) { + for (const node of mutation.addedNodes) { + const elem = node as HTMLElement; + if (elem.tagName !== 'SCRIPT') continue; + + const script = elem as HTMLScriptElement; + if ( + !script.getAttribute('src')?.endsWith('custom-elements-es5-adapter.js') + ) + continue; + + script.remove(); + + const styleSheet = new CSSStyleSheet(); + styleSheet.replaceSync(mduiStyleSheet); + document.adoptedStyleSheets.push(styleSheet); + + observer.disconnect(); + break outer; + } + } +}).observe(document, { subtree: true, childList: true }); + import { forceLoadPreloadPlugin, forceUnloadPreloadPlugin, diff --git a/src/renderer.ts b/src/renderer.ts index b535a89b..72d6c273 100644 --- a/src/renderer.ts +++ b/src/renderer.ts @@ -1,5 +1,9 @@ import i18next from 'i18next'; +import { setTheme } from 'mdui/functions/setTheme.js'; +import 'mdui/mdui.css'; +import 'mdui'; + import { startingPages } from './providers/extracted-data'; import { setupSongInfo } from './providers/song-info-front'; import { @@ -25,6 +29,8 @@ import type { QueueResponse } from '@/types/youtube-music-desktop-internal'; import type { YouTubeMusicAppElement } from '@/types/youtube-music-app-element'; import type { SearchBoxElement } from '@/types/search-box-element'; +setTheme('dark'); + let api: (Element & YoutubePlayer) | null = null; let isPluginLoaded = false; let isApiLoaded = false; @@ -388,10 +394,14 @@ async function onApiLoaded() { const style = document.createElement('style'); style.textContent = ` ytmusic-player-bar[is-mweb-player-bar-modernization-enabled] .middle-controls-buttons.ytmusic-player-bar, #like-button-renderer { - display: ${likeButtonsOptions === 'hide' ? 'none' : 'inherit'} !important; + display: ${ + likeButtonsOptions === 'hide' ? 'none' : 'inherit' + } !important; } ytmusic-player-bar[is-mweb-player-bar-modernization-enabled] .middle-controls.ytmusic-player-bar { - justify-content: ${likeButtonsOptions === 'hide' ? 'flex-start' : 'space-between'} !important; + justify-content: ${ + likeButtonsOptions === 'hide' ? 'flex-start' : 'space-between' + } !important; }`; document.head.appendChild(style); diff --git a/src/youtube-music.css b/src/youtube-music.css index 7aabf6fc..459c0406 100644 --- a/src/youtube-music.css +++ b/src/youtube-music.css @@ -86,4 +86,4 @@ tp-yt-paper-item.ytmusic-guide-entry-renderer::before { tp-yt-iron-dropdown, tp-yt-paper-dialog { app-region: no-drag; -} \ No newline at end of file +} diff --git a/src/yt-web-components.d.ts b/src/yt-web-components.d.ts index 947d8331..80a6592f 100644 --- a/src/yt-web-components.d.ts +++ b/src/yt-web-components.d.ts @@ -1,3 +1,5 @@ +import { type IntrinsicElements as MDUIElements } from 'mdui/jsx.en'; + import type { Icons } from '@/types/icons'; import type { ComponentProps } from 'solid-js'; @@ -37,7 +39,16 @@ declare module 'solid-js' { key?: string; } - interface IntrinsicElements { + type MduiIcons = Extract< + keyof HTMLElementTagNameMap, + `mdui-icon-${string}` + >; + + type MduiIconElements = { + [k in MduiIcons]: ComponentProps<'div'>; + }; + + interface IntrinsicElements extends MDUIElements, MduiIconElements { 'center': ComponentProps<'div'>; 'ytmd-trans': ComponentProps<'span'> & YtmdTransProps; 'yt-formatted-string': ComponentProps<'span'> & YtFormattedStringProps;