Add Material UI 3 component library #3606

ArjixWasTaken · 2025-07-12T21:03:56Z

About

This PR does the necessary changes needed in order to use a material 3 component library, specifically mdui.
With Material Design 3 we can easily create beautiful UI on-top of ytmusic, I am mainly working on this as a pre-requisite for #3066 .

Tasks:

Make modern LitElements co-exist with old polymer
~~Fix ytmusic icons, they just can't render~~ (magically went away)
Fix CSS Conflict between ytmusic and mdui

ArjixWasTaken · 2025-08-05T09:34:22Z

Opened this for review, but I am unsure if it's actually ready to get merged.

Copilot

Pull Request Overview

This PR integrates the mdui Material Design 3 component library into the YouTube Music desktop application to enable modern UI components on top of the existing interface. The changes focus on making LitElements coexist with the existing Polymer components and resolving CSS conflicts between YouTube Music and mdui.

Adds mdui library dependency and initialization
Implements CSS conflict resolution through inline styles and script removal
Formats existing code for better readability

Reviewed Changes

Copilot reviewed 5 out of 7 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
src/renderer.ts	Adds mdui imports and theme setup, reformats querySelector chains
src/preload.ts	Implements mdui CSS integration and removes conflicting scripts
patches/mdui.patch	Patches mdui for SolidJS compatibility instead of React
package.json	Adds mdui dependency and patch configuration
assets/mdui.css	Full mdui CSS stylesheet with Material Design 3 tokens

Files not reviewed (1)

pnpm-lock.yaml: Language not supported

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

Copilot · 2025-09-05T19:58:36Z

src/renderer.ts

+import 'mdui';
+import { setTheme } from 'mdui/functions/setTheme.js';
+
+setTheme('dark')


Missing semicolon at the end of the statement. Add a semicolon for consistency with the rest of the codebase.

Suggested change

setTheme('dark')

setTheme('dark');

Copilot · 2025-09-05T19:58:36Z

src/preload.ts


 import config from './config';

+import mduiStyleSheet from "@assets/mdui.css?inline"


Missing semicolon at the end of the import statement. Add a semicolon for consistency with the rest of the codebase.

Suggested change

import mduiStyleSheet from "@assets/mdui.css?inline"

import mduiStyleSheet from "@assets/mdui.css?inline";

Copilot · 2025-09-05T19:58:37Z

src/preload.ts

+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."
+]))


This code suppresses Lit warnings without explanation. Add a comment explaining why these specific warnings are being suppressed and the implications for the application.

JellyBrick · 2025-09-05T19:59:42Z

src/renderer.ts

+import 'mdui';
+import { setTheme } from 'mdui/functions/setTheme.js';
+
+setTheme('dark')


Should setTheme be called here?

github-actions · 2025-09-05T21:41:40Z

src/renderer.ts

+import 'mdui';
+import { setTheme } from 'mdui/functions/setTheme.js';
+
+setTheme('dark')


🚫 [eslint] <prettier/prettier> _{reported by reviewdog 🐶}
Insert ;

Suggested change

setTheme('dark')

setTheme('dark');

github-actions · 2025-09-05T21:41:40Z

src/renderer.ts

+import 'mdui';
+import { setTheme } from 'mdui/functions/setTheme.js';
+
+setTheme('dark')


🚫 [eslint] <stylistic/semi> _{reported by reviewdog 🐶}
Missing semicolon.

Suggested change

setTheme('dark')

setTheme('dark');

github-actions · 2025-09-05T21:41:41Z

src/yt-web-components.d.ts

 import type { Icons } from '@/types/icons';
 import type { ComponentProps } from 'solid-js';
+import { type IntrinsicElements as MDUIElements } from 'mdui/jsx.en';


🚫 [eslint] <importPlugin/order> _{reported by reviewdog 🐶}
mdui/jsx.en import should occur before type import of @/types/icons

Suggested change

import type { Icons } from '@/types/icons';

import type { ComponentProps } from 'solid-js';

import { type IntrinsicElements as MDUIElements } from 'mdui/jsx.en';

import { type IntrinsicElements as MDUIElements } from 'mdui/jsx.en';

import type { Icons } from '@/types/icons';

import type { ComponentProps } from 'solid-js';

github-actions · 2025-09-07T04:37:39Z

src/preload.ts


 import * as config from './config';

+import mduiStyleSheet from "@assets/mdui.css?inline"


🚫 [eslint] <prettier/prettier> _{reported by reviewdog 🐶}
Replace "@assets/mdui.css?inline" with '@assets/mdui.css?inline';

Suggested change

import mduiStyleSheet from "@assets/mdui.css?inline"

import mduiStyleSheet from '@assets/mdui.css?inline';

github-actions · 2025-09-07T04:37:40Z

src/preload.ts


 import * as config from './config';

+import mduiStyleSheet from "@assets/mdui.css?inline"


🚫 [eslint] <stylistic/quotes> _{reported by reviewdog 🐶}
Strings must use singlequote.

Suggested change

import mduiStyleSheet from "@assets/mdui.css?inline"

import mduiStyleSheet from '@assets/mdui.css?inline'

github-actions · 2025-09-07T04:37:40Z

src/preload.ts


 import * as config from './config';

+import mduiStyleSheet from "@assets/mdui.css?inline"


🚫 [eslint] <stylistic/semi> _{reported by reviewdog 🐶}
Missing semicolon.

Suggested change

import mduiStyleSheet from "@assets/mdui.css?inline"

import mduiStyleSheet from "@assets/mdui.css?inline";

github-actions · 2025-09-07T04:37:40Z

src/preload.ts


+import mduiStyleSheet from "@assets/mdui.css?inline"
+
+contextBridge.exposeInMainWorld('litIssuedWarnings', new Set([


🚫 [eslint] <prettier/prettier> _{reported by reviewdog 🐶}
Replace 'litIssuedWarnings', with ⏎··'litIssuedWarnings',⏎·

Suggested change

contextBridge.exposeInMainWorld('litIssuedWarnings', new Set([

contextBridge.exposeInMainWorld(

'litIssuedWarnings',

new Set([

github-actions · 2025-09-07T04:37:40Z

src/preload.ts

+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.",


🚫 [eslint] <prettier/prettier> _{reported by reviewdog 🐶}
Replace "Lit·is·in·dev·mode.·Not·recommended·for·production!·See·https://lit.dev/msg/dev-mode·for·more·information." with ··'Lit·is·in·dev·mode.·Not·recommended·for·production!·See·https://lit.dev/msg/dev-mode·for·more·information.'

Suggested change

"Lit is in dev mode. Not recommended for production! See https://lit.dev/msg/dev-mode for more information.",

'Lit is in dev mode. Not recommended for production! See https://lit.dev/msg/dev-mode for more information.',

github-actions · 2025-09-07T04:37:41Z

src/renderer.ts

+          'ytmusic-player-bar',
+        )


🚫 [eslint] <prettier/prettier> _{reported by reviewdog 🐶}
Replace ··'ytmusic-player-bar',⏎········ with >('ytmusic-player-bar'

Suggested change

'ytmusic-player-bar',

)

>('ytmusic-player-bar')

github-actions · 2025-09-07T04:37:41Z

src/renderer.ts

-      .querySelector<
-        HTMLElement & { updateVolume: (volume: number) => void }
-      >('ytmusic-player-bar')
+      .querySelector<HTMLElement & { updateVolume: (volume: number) => void }>(


🚫 [eslint] <prettier/prettier> _{reported by reviewdog 🐶}
Replace HTMLElement·&·{·updateVolume:·(volume:·number)·=>·void·}>( with ⏎········HTMLElement·&·{·updateVolume:·(volume:·number)·=>·void·}

Suggested change

.querySelector<HTMLElement & { updateVolume: (volume: number) => void }>(

.querySelector<

HTMLElement & { updateVolume: (volume: number) => void }

github-actions · 2025-09-07T04:37:41Z

src/renderer.ts

+        'ytmusic-player-bar',
+      )


🚫 [eslint] <prettier/prettier> _{reported by reviewdog 🐶}
Replace ··'ytmusic-player-bar',⏎······ with >('ytmusic-player-bar'

Suggested change

'ytmusic-player-bar',

)

>('ytmusic-player-bar')

github-actions · 2025-09-07T04:37:42Z

src/renderer.ts

-      .querySelector<
-        HTMLElement & { onVolumeClick: () => void }
-      >('ytmusic-player-bar')
+      .querySelector<HTMLElement & { onVolumeClick: () => void }>(


🚫 [eslint] <prettier/prettier> _{reported by reviewdog 🐶}
Replace HTMLElement·&·{·onVolumeClick:·()·=>·void·}>( with ⏎········HTMLElement·&·{·onVolumeClick:·()·=>·void·}

Suggested change

.querySelector<HTMLElement & { onVolumeClick: () => void }>(

.querySelector<

HTMLElement & { onVolumeClick: () => void }

github-actions · 2025-09-07T04:37:42Z

src/renderer.ts

+        'ytmusic-player-bar',
+      )


🚫 [eslint] <prettier/prettier> _{reported by reviewdog 🐶}
Replace ··'ytmusic-player-bar',⏎······ with >('ytmusic-player-bar'

Suggested change

'ytmusic-player-bar',

)

>('ytmusic-player-bar')

ArjixWasTaken added 8 commits July 4, 2025 00:37

init mdui

a95fbd5

temp: do not tree-shake mdui

919f372

Merge remote-tracking branch 'upstream/master' into mdui

b322c9c

update pnpm-lock.yaml

64ba6f0

feat: allow ES5 and ES6 HTMLElements to co-exist

808df2e

simplify code

b21db78

enable mdui CSS

ddc8210

small refactor

396e0ff

This comment was marked as resolved.

Sign in to view

ArjixWasTaken added 6 commits July 13, 2025 23:28

Merge branch 'master' into mdui

1074547

fix CSS weirdness

e472ac4

fix theme

47d8a17

make navigation buttons use m3 components

d0c533f

Merge branch 'th-ch:master' into mdui

bcd9c86

Merge branch 'master' into mdui

bc2bfeb

ArjixWasTaken mentioned this pull request Jul 25, 2025

feat(plugin): settings-ui #3066

Draft

7 tasks

ArjixWasTaken added 10 commits July 30, 2025 00:22

Merge branch 'master' into mdui

7f13640

suppress Lit warnings

9d3e57d

remove polyfill

261a55b

Discard changes to src/plugins/navigation/components/back-button.tsx

edc82e7

Discard changes to src/plugins/navigation/components/forward-button.tsx

21fb20d

Discard changes to src/youtube-music.d.ts

b06cd2d

Merge branch 'master' into mdui

cd6a79f

Merge branch 'master' into mdui

f06c383

Discard changes to .prettierrc

07afd7e

Merge branch 'master' into mdui

24107b9

ArjixWasTaken marked this pull request as ready for review August 5, 2025 09:34

Merge branch 'master' into mdui

bcbf8fe

JellyBrick added the enhancement New feature or request label Sep 5, 2025

JellyBrick requested a review from Copilot September 5, 2025 19:57

Copilot AI reviewed Sep 5, 2025

View reviewed changes

JellyBrick requested changes Sep 5, 2025

View reviewed changes

JellyBrick added 3 commits September 6, 2025 05:17

Merge branch 'master' into mdui

b23d24e

fix: fix patch path

b1464b8

Merge branch 'master' into mdui

d7f507c

JellyBrick force-pushed the mdui branch from f18e054 to d7f507c Compare September 5, 2025 20:30

JellyBrick added 4 commits September 6, 2025 05:31

Merge branch 'master' into mdui

aa6b42e

Merge branch 'master' into mdui

0d4c024

Merge branch 'master' into mdui

f98ea0f

Merge branch 'master' into mdui

b64d7b3

github-actions bot reviewed Sep 5, 2025

View reviewed changes

Merge branch 'master' into mdui

ad7858b

github-actions bot reviewed Sep 7, 2025

View reviewed changes


		import config from './config';

		import mduiStyleSheet from "@assets/mdui.css?inline"


		import * as config from './config';

		import mduiStyleSheet from "@assets/mdui.css?inline"

	import mduiStyleSheet from "@assets/mdui.css?inline"
	import mduiStyleSheet from '@assets/mdui.css?inline';


		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.",
	'Lit is in dev mode. Not recommended for production! See https://lit.dev/msg/dev-mode for more information.',

	.querySelector<HTMLElement & { updateVolume: (volume: number) => void }>(
	.querySelector<
	HTMLElement & { updateVolume: (volume: number) => void }

	.querySelector<HTMLElement & { onVolumeClick: () => void }>(
	.querySelector<
	HTMLElement & { onVolumeClick: () => void }

Add Material UI 3 component library #3606

Are you sure you want to change the base?

Add Material UI 3 component library #3606

Conversation

ArjixWasTaken commented Jul 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

About

Tasks:

Uh oh!

This comment was marked as resolved.

ArjixWasTaken commented Aug 5, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Sep 5, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 5, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 5, 2025

Choose a reason for hiding this comment

Uh oh!

JellyBrick Sep 5, 2025

Choose a reason for hiding this comment

Uh oh!

github-actions bot Sep 5, 2025

Choose a reason for hiding this comment

Uh oh!

github-actions bot Sep 5, 2025

Choose a reason for hiding this comment

Uh oh!

github-actions bot Sep 5, 2025

Choose a reason for hiding this comment

Uh oh!

github-actions bot Sep 7, 2025

Choose a reason for hiding this comment

Uh oh!

github-actions bot Sep 7, 2025

Choose a reason for hiding this comment

Uh oh!

github-actions bot Sep 7, 2025

Choose a reason for hiding this comment

Uh oh!

github-actions bot Sep 7, 2025

Choose a reason for hiding this comment

Uh oh!

github-actions bot Sep 7, 2025

Choose a reason for hiding this comment

Uh oh!

github-actions bot Sep 7, 2025

Choose a reason for hiding this comment

Uh oh!

github-actions bot Sep 7, 2025

Choose a reason for hiding this comment

Uh oh!

github-actions bot Sep 7, 2025

Choose a reason for hiding this comment

Uh oh!

github-actions bot Sep 7, 2025

Choose a reason for hiding this comment

Uh oh!

github-actions bot Sep 7, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

ArjixWasTaken commented Jul 12, 2025 •

edited

Loading