From a95fbd5f2f74ba934194039dbf3164fdcb904043 Mon Sep 17 00:00:00 2001 From: ArjixWasTaken Date: Fri, 4 Jul 2025 00:37:39 +0300 Subject: [PATCH 01/17] init mdui --- .prettierrc | 1 + assets/custom-elements-es5-adapter.js | 109 ++++++++++++++++++++++++++ package.json | 4 +- patches/mdui.patch | 40 ++++++++++ pnpm-lock.yaml | 106 +++++++++++++++++++++++++ src/preload.ts | 26 ++++++ src/renderer.ts | 36 +++++---- src/youtube-music.d.ts | 6 ++ src/yt-web-components.d.ts | 5 +- 9 files changed, 316 insertions(+), 17 deletions(-) create mode 100644 assets/custom-elements-es5-adapter.js create mode 100644 patches/mdui.patch diff --git a/.prettierrc b/.prettierrc index c6ce9c54f4..f12fae9676 100644 --- a/.prettierrc +++ b/.prettierrc @@ -3,5 +3,6 @@ "useTabs": false, "singleQuote": true, "trailingComma": "all", + "checkIgnorePragma": true, "quoteProps": "consistent" } diff --git a/assets/custom-elements-es5-adapter.js b/assets/custom-elements-es5-adapter.js new file mode 100644 index 0000000000..5c61b10bb5 --- /dev/null +++ b/assets/custom-elements-es5-adapter.js @@ -0,0 +1,109 @@ +/** + * @noformat + */ + +// Original variable names, taken from: https://www.npmjs.com/package/@webcomponents/custom-elements/v/1.1.2 +// Code taken from: music.youtube.com + +'use strict'; + +/* + + Copyright (c) 2016 The Polymer Project Authors. All rights reserved. + This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt + The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt + The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt + Code distributed by Google as part of the polymer project is also + subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt +*/ +(() => { + if (window.customElements) { + const NativeHTMLElement = window.HTMLElement; + + const nativeDefine = window.customElements.define; + const nativeGet = window.customElements.get; + + const tagnameByConstructor = new Map(); + const constructorByTagname = new Map(); + + var browserConstruction = false; + var userConstruction = false; + + window.HTMLElement = function () { + if (!browserConstruction) { + var tagName = tagnameByConstructor.get(this.constructor); + tagName = nativeGet.call(window.customElements, tagName); + userConstruction = true; + return new tagName(); + } + browserConstruction = false; + }; + window.HTMLElement.prototype = NativeHTMLElement.prototype; + window.HTMLElement.es5Shimmed = true; + Object.defineProperty(window, "customElements", { + value: window.customElements, + configurable: true, + writable: true + }); + Object.defineProperty(window.customElements, "define", { + value: (tagName, elementClass) => { + if (tagName.startsWith("mdui-")) { + browserConstruction = true; + userConstruction = false; + tagnameByConstructor.set(elementClass, tagName); + constructorByTagname.set(tagName, elementClass); + return nativeDefine.call(window.customElements, tagName, elementClass); + } + + const elementProto = elementClass.prototype; + const StandInElement = class extends NativeHTMLElement { + constructor() { + super(); + Object.setPrototypeOf(this, elementProto); + if (!userConstruction) { + browserConstruction = true; + try { + elementClass.call(this); + } catch (p) { + throw Error(`Constructing ${tagName}: ${p}`); + } + } + userConstruction = false; + } + }; + const standInProto = StandInElement.prototype; + StandInElement.observedAttributes = elementClass.observedAttributes; + standInProto.connectedCallback = elementProto.connectedCallback; + standInProto.disconnectedCallback = elementProto.disconnectedCallback; + standInProto.attributeChangedCallback = elementProto.attributeChangedCallback; + standInProto.adoptedCallback = elementProto.adoptedCallback; + tagnameByConstructor.set(elementClass, tagName); + constructorByTagname.set(tagName, elementClass); + nativeDefine.call(window.customElements, tagName, StandInElement); + }, + configurable: true, + writable: true + }); + Object.defineProperty(window.customElements, "get", { + value: tagName => constructorByTagname.get(tagName), + configurable: true, + writable: true + }); + if (navigator.userAgent.match(/Version\/(10\..*|11\.0\..*)Safari/)) { + const a = HTMLElement.prototype.constructor; + Object.defineProperty(HTMLElement.prototype, "constructor", { + configurable: true, + get() { + return a; + }, + set(b) { + Object.defineProperty(this, "constructor", { + value: b, + configurable: true, + writable: true + }); + } + }); + } + } +})(); diff --git a/package.json b/package.json index 7dffbc28ae..83397bf015 100644 --- a/package.json +++ b/package.json @@ -234,7 +234,8 @@ "vudio@2.1.1": "patches/vudio@2.1.1.patch", "@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" + "file-type@16.5.4": "patches/file-type@16.5.4.patch", + "mdui": "patches/mdui.patch" }, "neverBuiltDependencies": [] }, @@ -290,6 +291,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.patch b/patches/mdui.patch new file mode 100644 index 0000000000..cb6838bd53 --- /dev/null +++ b/patches/mdui.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 b6f3ae82fc..933e5c5611 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -23,6 +23,9 @@ patchedDependencies: kuromoji@0.1.2: hash: 4a948f1ea45c61779fa371feb020253ccf7a24e1f7c6b2e250b3ce53d86216d4 path: patches/kuromoji@0.1.2.patch + mdui: + hash: c3b8fc82255acaa4dc835d6b23ed66f1792632625a71fe263c883670b9f3631f + path: patches/mdui.patch vudio@2.1.1: hash: 0e06c2ed11c02bdc490c209fa80070e98517c2735c641f5738b6e15d7dc1959d path: patches/vudio@2.1.1.patch @@ -184,6 +187,9 @@ importers: lazy-var: specifier: 2.2.2 version: 2.2.2 + mdui: + specifier: 2.1.4 + version: 2.1.4(patch_hash=c3b8fc82255acaa4dc835d6b23ed66f1792632625a71fe263c883670b9f3631f) node-html-parser: specifier: 7.0.1 version: 7.0.1 @@ -987,6 +993,15 @@ packages: '@jridgewell/trace-mapping@0.3.25': resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==} + '@lit-labs/ssr-dom-shim@1.3.0': + resolution: {integrity: sha512-nQIWonJ6eFAvUUrSlwyHDm/aE8PBDu5kRpL0vHMg6K8fK3Diq1xdPjTnsJSwxABhaZ+5eBi1btQB5ShUTKo4nQ==} + + '@lit/localize@0.12.2': + resolution: {integrity: sha512-Qv9kvgJKDq/JVSwXOxuWvQnnOBysHA99ti9im9a4fImCmx+fto+XXcUYQbjZHqiueEEc4V20PcRDPO+1g/6seQ==} + + '@lit/reactive-element@2.1.0': + resolution: {integrity: sha512-L2qyoZSQClcBmq0qajBVbhYEcG6iK0XfLn66ifLe/RfC0/ihpc+pl0Wdn8bJ8o+hj38cG0fGXRgSS20MuXn7qA==} + '@malept/cross-spawn-promise@2.0.0': resolution: {integrity: sha512-1DpKU0Z5ThltBwjNySMC14g0CkbyhCaz9FkhxqNsZI6uAPJXFS8cMXlBKo26FJ8ZuW6S9GCMcR9IO5k2X5/9Fg==} engines: {node: '>= 12.13.0'} @@ -995,6 +1010,15 @@ 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/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'} @@ -1899,6 +1923,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'} @@ -3075,6 +3102,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'} @@ -3339,6 +3369,15 @@ packages: lines-and-columns@1.2.4: resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==} + lit-element@4.2.0: + resolution: {integrity: sha512-MGrXJVAI5x+Bfth/pU9Kst1iWID6GHDLEzFEnyULB/sFiRLgkd8NPK/PeeXxktA3T6EIIaq8U3KcbTU5XFcP2Q==} + + lit-html@3.3.0: + resolution: {integrity: sha512-RHoswrFAxY2d8Cf2mm4OZ1DgzCoBKUKSPvA1fhtSELxUERq2aQQ2h05pO9j81gS1o7RIRJ+CePLogfyahwmynw==} + + lit@3.3.0: + resolution: {integrity: sha512-DGVsqsOIHBww2DqnuZzW7QsuCdahp50ojuDaBPC7jUDRpYoH0z7kHBBYZewRzer75FwtrkmkKk7iOAwSaWdBmw==} + locate-path@6.0.0: resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==} engines: {node: '>=10'} @@ -3413,6 +3452,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'} @@ -4323,6 +4365,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} @@ -5604,6 +5649,16 @@ snapshots: '@jridgewell/resolve-uri': 3.1.2 '@jridgewell/sourcemap-codec': 1.5.0 + '@lit-labs/ssr-dom-shim@1.3.0': {} + + '@lit/localize@0.12.2': + dependencies: + lit: 3.3.0 + + '@lit/reactive-element@2.1.0': + dependencies: + '@lit-labs/ssr-dom-shim': 1.3.0 + '@malept/cross-spawn-promise@2.0.0': dependencies: cross-spawn: 7.0.6 @@ -5617,6 +5672,21 @@ snapshots: transitivePeerDependencies: - supports-color + '@material/material-color-utilities@0.3.0': {} + + '@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.0 + '@mdui/jq': 3.0.3 + lit: 3.3.0 + ssr-window: 5.0.1 + tslib: 2.8.1 + '@msgpack/msgpack@2.8.0': {} '@napi-rs/wasm-runtime@0.2.10': @@ -6576,6 +6646,8 @@ snapshots: ci-info@3.9.0: {} + classcat@5.0.5: {} + clean-stack@2.2.0: {} cli-boxes@3.0.0: {} @@ -7996,6 +8068,8 @@ snapshots: is-port-reachable@4.0.0: {} + is-promise@4.0.0: {} + is-regex@1.2.1: dependencies: call-bound: 1.0.4 @@ -8252,6 +8326,22 @@ snapshots: lines-and-columns@1.2.4: {} + lit-element@4.2.0: + dependencies: + '@lit-labs/ssr-dom-shim': 1.3.0 + '@lit/reactive-element': 2.1.0 + lit-html: 3.3.0 + + lit-html@3.3.0: + dependencies: + '@types/trusted-types': 2.0.7 + + lit@3.3.0: + dependencies: + '@lit/reactive-element': 2.1.0 + lit-element: 4.2.0 + lit-html: 3.3.0 + locate-path@6.0.0: dependencies: p-locate: 5.0.0 @@ -8342,6 +8432,20 @@ snapshots: math-intrinsics@1.1.0: {} + mdui@2.1.4(patch_hash=c3b8fc82255acaa4dc835d6b23ed66f1792632625a71fe263c883670b9f3631f): + dependencies: + '@floating-ui/utils': 0.2.10 + '@lit/localize': 0.12.2 + '@lit/reactive-element': 2.1.0 + '@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.0 + ssr-window: 5.0.1 + tslib: 2.8.1 + meow@13.2.0: {} merge-anything@5.1.7: @@ -9265,6 +9369,8 @@ snapshots: sprintf-js@1.1.3: {} + ssr-window@5.0.1: {} + ssri@12.0.0: dependencies: minipass: 7.1.2 diff --git a/src/preload.ts b/src/preload.ts index 9e8bf7dd99..608e65fd3f 100644 --- a/src/preload.ts +++ b/src/preload.ts @@ -8,6 +8,32 @@ import is from 'electron-is'; import config from './config'; +import customElementsES5Adapter from '@assets/custom-elements-es5-adapter.js?raw'; +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 parent = elem.parentElement!!; + const script = elem as HTMLScriptElement; + if ( + !script.getAttribute('src')?.endsWith('custom-elements-es5-adapter.js') + ) + continue; + + script.remove(); + script.removeAttribute('src'); + script.innerHTML = customElementsES5Adapter; + + parent.appendChild(script); + observer.disconnect(); + + break outer; + } + } +}).observe(document, { subtree: true, childList: true }); + import { forceLoadPreloadPlugin, forceUnloadPreloadPlugin, diff --git a/src/renderer.ts b/src/renderer.ts index 3488e84b40..8d1e9ee704 100644 --- a/src/renderer.ts +++ b/src/renderer.ts @@ -1,5 +1,9 @@ import i18next from 'i18next'; +// TODO: Uncomment this import, to load mdui styles, there is a conflict with youtube's CSS, that must be resolved first. +// import 'mdui/mdui.css'; +import 'mdui'; + import { startingPages } from './providers/extracted-data'; import setupSongInfo from './providers/song-info-front'; import { @@ -88,9 +92,9 @@ async function onApiLoaded() { window.ipcRenderer.on('ytmd:seek-by', (_, t: number) => api!.seekBy(t)); window.ipcRenderer.on('ytmd:shuffle', () => { document - .querySelector< - HTMLElement & { queue: { shuffle: () => void } } - >('ytmusic-player-bar') + .querySelector void } }>( + 'ytmusic-player-bar', + ) ?.queue.shuffle(); }); @@ -120,17 +124,17 @@ async function onApiLoaded() { window.ipcRenderer.on('ytmd:switch-repeat', (_, repeat = 1) => { for (let i = 0; i < repeat; i++) { document - .querySelector< - HTMLElement & { onRepeatButtonClick: () => void } - >('ytmusic-player-bar') + .querySelector void }>( + 'ytmusic-player-bar', + ) ?.onRepeatButtonClick(); } }); window.ipcRenderer.on('ytmd:update-volume', (_, volume: number) => { document - .querySelector< - HTMLElement & { updateVolume: (volume: number) => void } - >('ytmusic-player-bar') + .querySelector void }>( + 'ytmusic-player-bar', + ) ?.updateVolume(volume); }); @@ -169,9 +173,9 @@ async function onApiLoaded() { window.ipcRenderer.on('ytmd:toggle-mute', (_) => { document - .querySelector< - HTMLElement & { onVolumeClick: () => void } - >('ytmusic-player-bar') + .querySelector void }>( + 'ytmusic-player-bar', + ) ?.onVolumeClick(); }); @@ -380,10 +384,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.d.ts b/src/youtube-music.d.ts index b5ace4e1fe..b34115f483 100644 --- a/src/youtube-music.d.ts +++ b/src/youtube-music.d.ts @@ -10,6 +10,12 @@ declare module '*.html?raw' { export default html; } +declare module '*.js?raw' { + const js: string; + + export default js; +} + declare module '*.svg?inline' { const base64: string; diff --git a/src/yt-web-components.d.ts b/src/yt-web-components.d.ts index 336ac1f094..82fe868886 100644 --- a/src/yt-web-components.d.ts +++ b/src/yt-web-components.d.ts @@ -1,6 +1,7 @@ import { Icons } from '@/types/icons'; import type { ComponentProps } from 'solid-js'; +import { type IntrinsicElements as MDUIElements } from 'mdui/jsx.en'; declare module 'solid-js' { namespace JSX { @@ -34,8 +35,8 @@ declare module 'solid-js' { icon: Icons; } - interface IntrinsicElements { - center: ComponentProps<'div'>; + interface IntrinsicElements extends MDUIElements { + 'center': ComponentProps<'div'>; 'yt-formatted-string': ComponentProps<'span'> & YtFormattedStringProps; 'yt-button-renderer': ComponentProps<'button'> & YtButtonRendererProps; 'tp-yt-paper-spinner-lite': ComponentProps<'div'> & From 919f372022243a219346102167308c492734bb1c Mon Sep 17 00:00:00 2001 From: ArjixWasTaken Date: Fri, 4 Jul 2025 00:37:54 +0300 Subject: [PATCH 02/17] temp: do not tree-shake mdui --- src/plugins/synced-lyrics/renderer/components/PlainLyrics.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/plugins/synced-lyrics/renderer/components/PlainLyrics.tsx b/src/plugins/synced-lyrics/renderer/components/PlainLyrics.tsx index 90d29e46b3..42229804a0 100644 --- a/src/plugins/synced-lyrics/renderer/components/PlainLyrics.tsx +++ b/src/plugins/synced-lyrics/renderer/components/PlainLyrics.tsx @@ -27,6 +27,8 @@ export const PlainLyrics = (props: PlainLyricsProps) => { 'flex-direction': 'column', }} > + {/* temporary button, so mdui is not tree-shaken */} + Date: Sun, 13 Jul 2025 00:05:07 +0300 Subject: [PATCH 03/17] update pnpm-lock.yaml --- pnpm-lock.yaml | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 8c63a912c0..2dd41791c1 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -24,7 +24,7 @@ patchedDependencies: hash: 4a948f1ea45c61779fa371feb020253ccf7a24e1f7c6b2e250b3ce53d86216d4 path: patches/kuromoji@0.1.2.patch mdui: - hash: c3b8fc82255acaa4dc835d6b23ed66f1792632625a71fe263c883670b9f3631f + hash: 008b925e23862ced06c38f9765eef4322eb8a93cb5e9a6b684fd717fec0ea0d9 path: patches/mdui.patch vudio@2.1.1: hash: 0e06c2ed11c02bdc490c209fa80070e98517c2735c641f5738b6e15d7dc1959d @@ -189,7 +189,7 @@ importers: version: 2.2.2 mdui: specifier: 2.1.4 - version: 2.1.4(patch_hash=c3b8fc82255acaa4dc835d6b23ed66f1792632625a71fe263c883670b9f3631f) + version: 2.1.4(patch_hash=008b925e23862ced06c38f9765eef4322eb8a93cb5e9a6b684fd717fec0ea0d9) node-html-parser: specifier: 7.0.1 version: 7.0.1 @@ -8540,7 +8540,7 @@ snapshots: math-intrinsics@1.1.0: {} - mdui@2.1.4(patch_hash=c3b8fc82255acaa4dc835d6b23ed66f1792632625a71fe263c883670b9f3631f): + mdui@2.1.4(patch_hash=008b925e23862ced06c38f9765eef4322eb8a93cb5e9a6b684fd717fec0ea0d9): dependencies: '@floating-ui/utils': 0.2.10 '@lit/localize': 0.12.2 From 808df2ed9fc830146d6a32bcd773a3c6aeba69d9 Mon Sep 17 00:00:00 2001 From: ArjixWasTaken Date: Sun, 13 Jul 2025 01:47:30 +0300 Subject: [PATCH 04/17] feat: allow ES5 and ES6 HTMLElements to co-exist --- assets/custom-elements-es5-adapter.js | 112 +++++++++--------- .../navigation/components/back-button.tsx | 2 + .../renderer/components/PlainLyrics.tsx | 2 - src/preload.ts | 10 +- 4 files changed, 67 insertions(+), 59 deletions(-) diff --git a/assets/custom-elements-es5-adapter.js b/assets/custom-elements-es5-adapter.js index 5c61b10bb5..28fe9bc60b 100644 --- a/assets/custom-elements-es5-adapter.js +++ b/assets/custom-elements-es5-adapter.js @@ -8,7 +8,6 @@ 'use strict'; /* - Copyright (c) 2016 The Polymer Project Authors. All rights reserved. This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt @@ -29,54 +28,75 @@ var browserConstruction = false; var userConstruction = false; - window.HTMLElement = function () { - if (!browserConstruction) { - var tagName = tagnameByConstructor.get(this.constructor); - tagName = nativeGet.call(window.customElements, tagName); - userConstruction = true; - return new tagName(); + window.HTMLElement = new Proxy(NativeHTMLElement, { + construct(target, args, newTarget) { + const isMDUIElement = new Error().stack.includes("at new MduiElement") + if (isMDUIElement) { + return Reflect.construct(NativeHTMLElement, args, newTarget); + } + + debugger; + }, + + apply(target, thisArg, args) { + if (!browserConstruction) { + const tagName = tagnameByConstructor.get(thisArg.constructor); + const element = nativeGet.call(window.customElements, tagName); + userConstruction = true; + + return new element(...args); + } + + browserConstruction = false; + }, + + get(target, prop, receiver) { + if (prop === 'es5Shimmed') return true; + if (prop === "prototype") return NativeHTMLElement.prototype; + + return Reflect.get(target, prop, receiver); } - browserConstruction = false; - }; - window.HTMLElement.prototype = NativeHTMLElement.prototype; - window.HTMLElement.es5Shimmed = true; + }); + Object.defineProperty(window, "customElements", { value: window.customElements, configurable: true, writable: true }); + Object.defineProperty(window.customElements, "define", { value: (tagName, elementClass) => { - if (tagName.startsWith("mdui-")) { - browserConstruction = true; - userConstruction = false; - tagnameByConstructor.set(elementClass, tagName); - constructorByTagname.set(tagName, elementClass); - return nativeDefine.call(window.customElements, tagName, elementClass); - } - const elementProto = elementClass.prototype; - const StandInElement = class extends NativeHTMLElement { - constructor() { - super(); - Object.setPrototypeOf(this, elementProto); - if (!userConstruction) { - browserConstruction = true; - try { - elementClass.call(this); - } catch (p) { - throw Error(`Constructing ${tagName}: ${p}`); + + let StandInElement; + if (tagName.startsWith("mdui-")) { + StandInElement = elementClass; + Object.setPrototypeOf + } else { + StandInElement = class extends NativeHTMLElement { + constructor() { + super(); + Object.setPrototypeOf(this, elementProto); + if (!userConstruction) { + browserConstruction = true; + try { + elementClass.call(this); + } catch (p) { + throw Error(`Constructing ${tagName}: ${p}`); + } } + userConstruction = false; } - userConstruction = false; - } - }; - const standInProto = StandInElement.prototype; - StandInElement.observedAttributes = elementClass.observedAttributes; - standInProto.connectedCallback = elementProto.connectedCallback; - standInProto.disconnectedCallback = elementProto.disconnectedCallback; - standInProto.attributeChangedCallback = elementProto.attributeChangedCallback; - standInProto.adoptedCallback = elementProto.adoptedCallback; + }; + + const standInProto = StandInElement.prototype; + StandInElement.observedAttributes = elementClass.observedAttributes; + standInProto.connectedCallback = elementProto.connectedCallback; + standInProto.disconnectedCallback = elementProto.disconnectedCallback; + standInProto.attributeChangedCallback = elementProto.attributeChangedCallback; + standInProto.adoptedCallback = elementProto.adoptedCallback; + } + tagnameByConstructor.set(elementClass, tagName); constructorByTagname.set(tagName, elementClass); nativeDefine.call(window.customElements, tagName, StandInElement); @@ -89,21 +109,5 @@ configurable: true, writable: true }); - if (navigator.userAgent.match(/Version\/(10\..*|11\.0\..*)Safari/)) { - const a = HTMLElement.prototype.constructor; - Object.defineProperty(HTMLElement.prototype, "constructor", { - configurable: true, - get() { - return a; - }, - set(b) { - Object.defineProperty(this, "constructor", { - value: b, - configurable: true, - writable: true - }); - } - }); - } } })(); diff --git a/src/plugins/navigation/components/back-button.tsx b/src/plugins/navigation/components/back-button.tsx index 06c80469a9..8149440ced 100644 --- a/src/plugins/navigation/components/back-button.tsx +++ b/src/plugins/navigation/components/back-button.tsx @@ -21,6 +21,8 @@ export const BackButton = (props: BackButtonProps) => ( class="tab-icon style-scope paper-icon-button navigation-icon" id="icon" > + {/* temporary button, so mdui is not tree-shaken */} + { 'flex-direction': 'column', }} > - {/* temporary button, so mdui is not tree-shaken */} - { continue; script.remove(); - script.removeAttribute('src'); - script.innerHTML = customElementsES5Adapter; - parent.appendChild(script); + const newScript = document.createElement('script'); + { + newScript.setAttribute('type', 'text/javascript'); + newScript.innerHTML = customElementsES5Adapter; + } + parent.appendChild(newScript); + observer.disconnect(); break outer; From b21db78763b4f2350d0c227f01d3adf4451944ea Mon Sep 17 00:00:00 2001 From: ArjixWasTaken Date: Sun, 13 Jul 2025 01:57:29 +0300 Subject: [PATCH 05/17] simplify code --- assets/custom-elements-es5-adapter.js | 61 ++++++++++++--------------- 1 file changed, 27 insertions(+), 34 deletions(-) diff --git a/assets/custom-elements-es5-adapter.js b/assets/custom-elements-es5-adapter.js index 28fe9bc60b..7d8bb6cc4e 100644 --- a/assets/custom-elements-es5-adapter.js +++ b/assets/custom-elements-es5-adapter.js @@ -3,7 +3,8 @@ */ // Original variable names, taken from: https://www.npmjs.com/package/@webcomponents/custom-elements/v/1.1.2 -// Code taken from: music.youtube.com +// Code originally taken from: music.youtube.com +// A lot of modifications have been made to this code, so it is not the same as the original. 'use strict'; @@ -29,15 +30,12 @@ var userConstruction = false; window.HTMLElement = new Proxy(NativeHTMLElement, { + // ES6 constructor construct(target, args, newTarget) { - const isMDUIElement = new Error().stack.includes("at new MduiElement") - if (isMDUIElement) { - return Reflect.construct(NativeHTMLElement, args, newTarget); - } - - debugger; + return Reflect.construct(NativeHTMLElement, args, newTarget); }, + // ES5 constructor apply(target, thisArg, args) { if (!browserConstruction) { const tagName = tagnameByConstructor.get(thisArg.constructor); @@ -66,36 +64,31 @@ Object.defineProperty(window.customElements, "define", { value: (tagName, elementClass) => { - const elementProto = elementClass.prototype; + if (tagName.startsWith('mdui-')) return nativeDefine.call(window.customElements, tagName, elementClass); - let StandInElement; - if (tagName.startsWith("mdui-")) { - StandInElement = elementClass; - Object.setPrototypeOf - } else { - StandInElement = class extends NativeHTMLElement { - constructor() { - super(); - Object.setPrototypeOf(this, elementProto); - if (!userConstruction) { - browserConstruction = true; - try { - elementClass.call(this); - } catch (p) { - throw Error(`Constructing ${tagName}: ${p}`); - } + const elementProto = elementClass.prototype; + const StandInElement = class extends NativeHTMLElement { + constructor() { + super(); + Object.setPrototypeOf(this, elementProto); + if (!userConstruction) { + browserConstruction = true; + try { + elementClass.call(this); + } catch (p) { + throw Error(`Constructing ${tagName}: ${p}`); } - userConstruction = false; } - }; - - const standInProto = StandInElement.prototype; - StandInElement.observedAttributes = elementClass.observedAttributes; - standInProto.connectedCallback = elementProto.connectedCallback; - standInProto.disconnectedCallback = elementProto.disconnectedCallback; - standInProto.attributeChangedCallback = elementProto.attributeChangedCallback; - standInProto.adoptedCallback = elementProto.adoptedCallback; - } + userConstruction = false; + } + }; + + const standInProto = StandInElement.prototype; + StandInElement.observedAttributes = elementClass.observedAttributes; + standInProto.connectedCallback = elementProto.connectedCallback; + standInProto.disconnectedCallback = elementProto.disconnectedCallback; + standInProto.attributeChangedCallback = elementProto.attributeChangedCallback; + standInProto.adoptedCallback = elementProto.adoptedCallback; tagnameByConstructor.set(elementClass, tagName); constructorByTagname.set(tagName, elementClass); From ddc8210b57e2aa1189c327b8bb0286ede332db44 Mon Sep 17 00:00:00 2001 From: ArjixWasTaken Date: Sun, 13 Jul 2025 02:06:11 +0300 Subject: [PATCH 06/17] enable mdui CSS --- src/plugins/navigation/components/back-button.tsx | 2 +- src/renderer.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/plugins/navigation/components/back-button.tsx b/src/plugins/navigation/components/back-button.tsx index 8149440ced..e24dae274e 100644 --- a/src/plugins/navigation/components/back-button.tsx +++ b/src/plugins/navigation/components/back-button.tsx @@ -22,7 +22,7 @@ export const BackButton = (props: BackButtonProps) => ( id="icon" > {/* temporary button, so mdui is not tree-shaken */} - + Test Date: Sun, 13 Jul 2025 03:08:23 +0300 Subject: [PATCH 07/17] small refactor --- assets/custom-elements-es5-adapter.js | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/assets/custom-elements-es5-adapter.js b/assets/custom-elements-es5-adapter.js index 7d8bb6cc4e..290effb32b 100644 --- a/assets/custom-elements-es5-adapter.js +++ b/assets/custom-elements-es5-adapter.js @@ -20,8 +20,8 @@ if (window.customElements) { const NativeHTMLElement = window.HTMLElement; - const nativeDefine = window.customElements.define; - const nativeGet = window.customElements.get; + const nativeDefine = window.customElements.define.bind(window.customElements); + const nativeGet = window.customElements.get.bind(window.customElements); const tagnameByConstructor = new Map(); const constructorByTagname = new Map(); @@ -32,14 +32,14 @@ window.HTMLElement = new Proxy(NativeHTMLElement, { // ES6 constructor construct(target, args, newTarget) { - return Reflect.construct(NativeHTMLElement, args, newTarget); + return Reflect.construct(target, args, newTarget); }, // ES5 constructor apply(target, thisArg, args) { if (!browserConstruction) { const tagName = tagnameByConstructor.get(thisArg.constructor); - const element = nativeGet.call(window.customElements, tagName); + const element = nativeGet(tagName); userConstruction = true; return new element(...args); @@ -50,9 +50,11 @@ get(target, prop, receiver) { if (prop === 'es5Shimmed') return true; - if (prop === "prototype") return NativeHTMLElement.prototype; - return Reflect.get(target, prop, receiver); + }, + + set(target, prop, value, receiver) { + return Reflect.set(target, prop, value, receiver); } }); @@ -64,7 +66,7 @@ Object.defineProperty(window.customElements, "define", { value: (tagName, elementClass) => { - if (tagName.startsWith('mdui-')) return nativeDefine.call(window.customElements, tagName, elementClass); + if (tagName.startsWith('mdui-')) return nativeDefine(tagName, elementClass); const elementProto = elementClass.prototype; const StandInElement = class extends NativeHTMLElement { @@ -98,7 +100,7 @@ writable: true }); Object.defineProperty(window.customElements, "get", { - value: tagName => constructorByTagname.get(tagName), + value: tagName => constructorByTagname.get(tagName) ?? nativeGet(tagName), configurable: true, writable: true }); From e472ac444fea1522a22a6ddba8297c344f9404d3 Mon Sep 17 00:00:00 2001 From: ArjixWasTaken Date: Sun, 13 Jul 2025 23:56:13 +0300 Subject: [PATCH 08/17] fix CSS weirdness --- assets/custom-elements-es5-adapter.js | 4 - assets/mdui.css | 608 ++++++++++++++++++++++++++ src/preload.ts | 9 + src/renderer.ts | 2 - 4 files changed, 617 insertions(+), 6 deletions(-) create mode 100644 assets/mdui.css diff --git a/assets/custom-elements-es5-adapter.js b/assets/custom-elements-es5-adapter.js index 290effb32b..7402fecd58 100644 --- a/assets/custom-elements-es5-adapter.js +++ b/assets/custom-elements-es5-adapter.js @@ -1,7 +1,3 @@ -/** - * @noformat - */ - // Original variable names, taken from: https://www.npmjs.com/package/@webcomponents/custom-elements/v/1.1.2 // Code originally taken from: music.youtube.com // A lot of modifications have been made to this code, so it is not the same as the original. diff --git a/assets/mdui.css b/assets/mdui.css new file mode 100644 index 0000000000..1002b253c3 --- /dev/null +++ b/assets/mdui.css @@ -0,0 +1,608 @@ +: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-light, +.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/src/preload.ts b/src/preload.ts index 998175f399..58c2073961 100644 --- a/src/preload.ts +++ b/src/preload.ts @@ -9,6 +9,8 @@ import is from 'electron-is'; import config from './config'; import customElementsES5Adapter from '@assets/custom-elements-es5-adapter.js?raw'; +import mduiStyleSheet from "@assets/mdui.css?inline" + new MutationObserver((mutations, observer) => { outer: for (const mutation of mutations) { for (const node of mutation.addedNodes) { @@ -24,6 +26,13 @@ new MutationObserver((mutations, observer) => { script.remove(); + const stylesheet = document.createElement("style"); + { + stylesheet.setAttribute("id", "mduiCss") + stylesheet.innerHTML = mduiStyleSheet + } + parent.appendChild(stylesheet); + const newScript = document.createElement('script'); { newScript.setAttribute('type', 'text/javascript'); diff --git a/src/renderer.ts b/src/renderer.ts index 487f0c2886..38254a44a4 100644 --- a/src/renderer.ts +++ b/src/renderer.ts @@ -1,7 +1,5 @@ import i18next from 'i18next'; -// TODO: Uncomment this import, to load mdui styles, there is a conflict with youtube's CSS, that must be resolved first. -import 'mdui/mdui.css'; import 'mdui'; import { startingPages } from './providers/extracted-data'; From 47d8a176400ad569e78ff359d7f6cbdab289f656 Mon Sep 17 00:00:00 2001 From: ArjixWasTaken Date: Mon, 14 Jul 2025 00:35:01 +0300 Subject: [PATCH 09/17] fix theme --- assets/mdui.css | 1 - src/renderer.ts | 3 +++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/assets/mdui.css b/assets/mdui.css index 1002b253c3..fbb8440802 100644 --- a/assets/mdui.css +++ b/assets/mdui.css @@ -84,7 +84,6 @@ --mdui-color-scrim-dark: 0, 0, 0; } -.mdui-theme-light, .mdui-theme-dark, :root { color-scheme: dark; diff --git a/src/renderer.ts b/src/renderer.ts index 38254a44a4..11b8cb17f9 100644 --- a/src/renderer.ts +++ b/src/renderer.ts @@ -1,6 +1,9 @@ import i18next from 'i18next'; import 'mdui'; +import { setTheme } from 'mdui/functions/setTheme.js'; + +setTheme('dark') import { startingPages } from './providers/extracted-data'; import setupSongInfo from './providers/song-info-front'; From d0c533f69d8ee95722439f1a6ea00751f76da782 Mon Sep 17 00:00:00 2001 From: ArjixWasTaken Date: Mon, 14 Jul 2025 00:35:14 +0300 Subject: [PATCH 10/17] make navigation buttons use m3 components --- .../navigation/components/back-button.tsx | 49 ++++++++---------- .../navigation/components/forward-button.tsx | 50 ++++++++----------- 2 files changed, 42 insertions(+), 57 deletions(-) diff --git a/src/plugins/navigation/components/back-button.tsx b/src/plugins/navigation/components/back-button.tsx index e24dae274e..084c0bf762 100644 --- a/src/plugins/navigation/components/back-button.tsx +++ b/src/plugins/navigation/components/back-button.tsx @@ -6,39 +6,30 @@ export interface BackButtonProps { export const BackButton = (props: BackButtonProps) => (
props.onClick?.(e)} role="tab" tab-id="FEmusic_back" > -
props.onClick?.(e)} + style={{ width: '32px', height: '32px' }} > - -
+ + + + +
); diff --git a/src/plugins/navigation/components/forward-button.tsx b/src/plugins/navigation/components/forward-button.tsx index e9da520f58..7035acc288 100644 --- a/src/plugins/navigation/components/forward-button.tsx +++ b/src/plugins/navigation/components/forward-button.tsx @@ -10,37 +10,31 @@ export const ForwardButton = (props: ForwardButtonProps) => ( role="tab" tab-id="FEmusic_next" > -
props.onClick?.(e)} + style={{ width: '32px', height: '32px' }} > - -
+ /> + + + ); From 9d3e57d56e5058c4d68fc84522010c356d63b556 Mon Sep 17 00:00:00 2001 From: ArjixWasTaken Date: Wed, 30 Jul 2025 00:45:17 +0300 Subject: [PATCH 11/17] suppress Lit warnings --- assets/custom-elements-es5-adapter.js | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/assets/custom-elements-es5-adapter.js b/assets/custom-elements-es5-adapter.js index 7402fecd58..c6ffb6af4a 100644 --- a/assets/custom-elements-es5-adapter.js +++ b/assets/custom-elements-es5-adapter.js @@ -14,6 +14,12 @@ */ (() => { if (window.customElements) { + // suppress annoying Lit warnings; https://github.com/lit/lit/issues/4877 + globalThis.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." + ]); + const NativeHTMLElement = window.HTMLElement; const nativeDefine = window.customElements.define.bind(window.customElements); @@ -61,8 +67,8 @@ }); Object.defineProperty(window.customElements, "define", { - value: (tagName, elementClass) => { - if (tagName.startsWith('mdui-')) return nativeDefine(tagName, elementClass); + value: (tagName, elementClass, ...rest) => { + if (tagName.startsWith('mdui-')) return nativeDefine(tagName, elementClass, ...rest); const elementProto = elementClass.prototype; const StandInElement = class extends NativeHTMLElement { @@ -90,7 +96,7 @@ tagnameByConstructor.set(elementClass, tagName); constructorByTagname.set(tagName, elementClass); - nativeDefine.call(window.customElements, tagName, StandInElement); + nativeDefine.call(window.customElements, tagName, StandInElement, ...rest); }, configurable: true, writable: true From 261a55b4b0136c875753c42491eacb4a73cd1b39 Mon Sep 17 00:00:00 2001 From: ArjixWasTaken Date: Wed, 30 Jul 2025 01:57:06 +0300 Subject: [PATCH 12/17] remove polyfill --- assets/custom-elements-es5-adapter.js | 110 -------------------------- src/preload.ts | 24 ++---- 2 files changed, 8 insertions(+), 126 deletions(-) delete mode 100644 assets/custom-elements-es5-adapter.js diff --git a/assets/custom-elements-es5-adapter.js b/assets/custom-elements-es5-adapter.js deleted file mode 100644 index c6ffb6af4a..0000000000 --- a/assets/custom-elements-es5-adapter.js +++ /dev/null @@ -1,110 +0,0 @@ -// Original variable names, taken from: https://www.npmjs.com/package/@webcomponents/custom-elements/v/1.1.2 -// Code originally taken from: music.youtube.com -// A lot of modifications have been made to this code, so it is not the same as the original. - -'use strict'; - -/* - Copyright (c) 2016 The Polymer Project Authors. All rights reserved. - This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt - The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt - The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt - Code distributed by Google as part of the polymer project is also - subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt -*/ -(() => { - if (window.customElements) { - // suppress annoying Lit warnings; https://github.com/lit/lit/issues/4877 - globalThis.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." - ]); - - const NativeHTMLElement = window.HTMLElement; - - const nativeDefine = window.customElements.define.bind(window.customElements); - const nativeGet = window.customElements.get.bind(window.customElements); - - const tagnameByConstructor = new Map(); - const constructorByTagname = new Map(); - - var browserConstruction = false; - var userConstruction = false; - - window.HTMLElement = new Proxy(NativeHTMLElement, { - // ES6 constructor - construct(target, args, newTarget) { - return Reflect.construct(target, args, newTarget); - }, - - // ES5 constructor - apply(target, thisArg, args) { - if (!browserConstruction) { - const tagName = tagnameByConstructor.get(thisArg.constructor); - const element = nativeGet(tagName); - userConstruction = true; - - return new element(...args); - } - - browserConstruction = false; - }, - - get(target, prop, receiver) { - if (prop === 'es5Shimmed') return true; - return Reflect.get(target, prop, receiver); - }, - - set(target, prop, value, receiver) { - return Reflect.set(target, prop, value, receiver); - } - }); - - Object.defineProperty(window, "customElements", { - value: window.customElements, - configurable: true, - writable: true - }); - - Object.defineProperty(window.customElements, "define", { - value: (tagName, elementClass, ...rest) => { - if (tagName.startsWith('mdui-')) return nativeDefine(tagName, elementClass, ...rest); - - const elementProto = elementClass.prototype; - const StandInElement = class extends NativeHTMLElement { - constructor() { - super(); - Object.setPrototypeOf(this, elementProto); - if (!userConstruction) { - browserConstruction = true; - try { - elementClass.call(this); - } catch (p) { - throw Error(`Constructing ${tagName}: ${p}`); - } - } - userConstruction = false; - } - }; - - const standInProto = StandInElement.prototype; - StandInElement.observedAttributes = elementClass.observedAttributes; - standInProto.connectedCallback = elementProto.connectedCallback; - standInProto.disconnectedCallback = elementProto.disconnectedCallback; - standInProto.attributeChangedCallback = elementProto.attributeChangedCallback; - standInProto.adoptedCallback = elementProto.adoptedCallback; - - tagnameByConstructor.set(elementClass, tagName); - constructorByTagname.set(tagName, elementClass); - nativeDefine.call(window.customElements, tagName, StandInElement, ...rest); - }, - configurable: true, - writable: true - }); - Object.defineProperty(window.customElements, "get", { - value: tagName => constructorByTagname.get(tagName) ?? nativeGet(tagName), - configurable: true, - writable: true - }); - } -})(); diff --git a/src/preload.ts b/src/preload.ts index 58c2073961..4d4d74aa03 100644 --- a/src/preload.ts +++ b/src/preload.ts @@ -8,16 +8,19 @@ import is from 'electron-is'; import config from './config'; -import customElementsES5Adapter from '@assets/custom-elements-es5-adapter.js?raw'; 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 parent = elem.parentElement!!; const script = elem as HTMLScriptElement; if ( !script.getAttribute('src')?.endsWith('custom-elements-es5-adapter.js') @@ -26,22 +29,11 @@ new MutationObserver((mutations, observer) => { script.remove(); - const stylesheet = document.createElement("style"); - { - stylesheet.setAttribute("id", "mduiCss") - stylesheet.innerHTML = mduiStyleSheet - } - parent.appendChild(stylesheet); - - const newScript = document.createElement('script'); - { - newScript.setAttribute('type', 'text/javascript'); - newScript.innerHTML = customElementsES5Adapter; - } - parent.appendChild(newScript); + const styleSheet = new CSSStyleSheet(); + styleSheet.replaceSync(mduiStyleSheet); + document.adoptedStyleSheets.push(styleSheet); observer.disconnect(); - break outer; } } From edc82e7bf03d2190bbee618ff855576c185c6929 Mon Sep 17 00:00:00 2001 From: Angelos Bouklis Date: Wed, 30 Jul 2025 02:11:25 +0300 Subject: [PATCH 13/17] Discard changes to src/plugins/navigation/components/back-button.tsx --- .../navigation/components/back-button.tsx | 47 +++++++++++-------- 1 file changed, 27 insertions(+), 20 deletions(-) diff --git a/src/plugins/navigation/components/back-button.tsx b/src/plugins/navigation/components/back-button.tsx index 084c0bf762..06c80469a9 100644 --- a/src/plugins/navigation/components/back-button.tsx +++ b/src/plugins/navigation/components/back-button.tsx @@ -6,30 +6,37 @@ export interface BackButtonProps { export const BackButton = (props: BackButtonProps) => (
props.onClick?.(e)} role="tab" tab-id="FEmusic_back" > - props.onClick?.(e)} - style={{ width: '32px', height: '32px' }} +
- - - - - - + + + + + +
+
); From 21fb20dcaa9ee74079a23dc416033343bca97304 Mon Sep 17 00:00:00 2001 From: Angelos Bouklis Date: Wed, 30 Jul 2025 02:11:38 +0300 Subject: [PATCH 14/17] Discard changes to src/plugins/navigation/components/forward-button.tsx --- .../navigation/components/forward-button.tsx | 50 +++++++++++-------- 1 file changed, 28 insertions(+), 22 deletions(-) diff --git a/src/plugins/navigation/components/forward-button.tsx b/src/plugins/navigation/components/forward-button.tsx index 7035acc288..e9da520f58 100644 --- a/src/plugins/navigation/components/forward-button.tsx +++ b/src/plugins/navigation/components/forward-button.tsx @@ -10,31 +10,37 @@ export const ForwardButton = (props: ForwardButtonProps) => ( role="tab" tab-id="FEmusic_next" > - props.onClick?.(e)} - style={{ width: '32px', height: '32px' }} +
- - - + + - - - + /> + + +
+ ); From b06cd2de0a580f59d52271998346646e34b57623 Mon Sep 17 00:00:00 2001 From: Angelos Bouklis Date: Wed, 30 Jul 2025 02:12:41 +0300 Subject: [PATCH 15/17] Discard changes to src/youtube-music.d.ts --- src/youtube-music.d.ts | 6 ------ 1 file changed, 6 deletions(-) diff --git a/src/youtube-music.d.ts b/src/youtube-music.d.ts index b34115f483..b5ace4e1fe 100644 --- a/src/youtube-music.d.ts +++ b/src/youtube-music.d.ts @@ -10,12 +10,6 @@ declare module '*.html?raw' { export default html; } -declare module '*.js?raw' { - const js: string; - - export default js; -} - declare module '*.svg?inline' { const base64: string; From 07afd7eb29390383da5137b3fca4a0ab26c842f5 Mon Sep 17 00:00:00 2001 From: Angelos Bouklis Date: Sun, 3 Aug 2025 19:57:10 +0300 Subject: [PATCH 16/17] Discard changes to .prettierrc --- .prettierrc | 1 - 1 file changed, 1 deletion(-) diff --git a/.prettierrc b/.prettierrc index f12fae9676..c6ce9c54f4 100644 --- a/.prettierrc +++ b/.prettierrc @@ -3,6 +3,5 @@ "useTabs": false, "singleQuote": true, "trailingComma": "all", - "checkIgnorePragma": true, "quoteProps": "consistent" } From b1464b828d37ba94d1220912052a2ca894a4e223 Mon Sep 17 00:00:00 2001 From: JellyBrick Date: Sat, 6 Sep 2025 05:24:14 +0900 Subject: [PATCH 17/17] fix: fix patch path --- package.json | 2 +- patches/{mdui.patch => mdui@2.1.4.patch} | 0 pnpm-lock.yaml | 63 +++++++++++------------- 3 files changed, 30 insertions(+), 35 deletions(-) rename patches/{mdui.patch => mdui@2.1.4.patch} (100%) diff --git a/package.json b/package.json index b191962e56..ac286618f3 100644 --- a/package.json +++ b/package.json @@ -58,7 +58,7 @@ "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", - "mdui": "patches/mdui.patch" + "mdui@2.1.4": "patches/mdui@2.1.4.patch" }, "neverBuiltDependencies": [] }, diff --git a/patches/mdui.patch b/patches/mdui@2.1.4.patch similarity index 100% rename from patches/mdui.patch rename to patches/mdui@2.1.4.patch diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c646589397..ddf83ead28 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -25,9 +25,9 @@ patchedDependencies: kuromoji@0.1.2: hash: 4a948f1ea45c61779fa371feb020253ccf7a24e1f7c6b2e250b3ce53d86216d4 path: patches/kuromoji@0.1.2.patch - mdui: + mdui@2.1.4: hash: 008b925e23862ced06c38f9765eef4322eb8a93cb5e9a6b684fd717fec0ea0d9 - path: patches/mdui.patch + path: patches/mdui@2.1.4.patch vudio@2.1.1: hash: 0e06c2ed11c02bdc490c209fa80070e98517c2735c641f5738b6e15d7dc1959d path: patches/vudio@2.1.1.patch @@ -1017,14 +1017,14 @@ packages: '@jridgewell/trace-mapping@0.3.30': resolution: {integrity: sha512-GQ7Nw5G2lTu/BtHTKfXhKHok2WGetd4XYcVKGx00SjAk8GMwgJM3zr6zORiPGuOE+/vkc90KtTosSSvaCjKb2Q==} - '@lit-labs/ssr-dom-shim@1.3.0': - resolution: {integrity: sha512-nQIWonJ6eFAvUUrSlwyHDm/aE8PBDu5kRpL0vHMg6K8fK3Diq1xdPjTnsJSwxABhaZ+5eBi1btQB5ShUTKo4nQ==} + '@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.0': - resolution: {integrity: sha512-L2qyoZSQClcBmq0qajBVbhYEcG6iK0XfLn66ifLe/RfC0/ihpc+pl0Wdn8bJ8o+hj38cG0fGXRgSS20MuXn7qA==} + '@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==} @@ -3326,17 +3326,14 @@ packages: resolution: {integrity: sha512-xi6IyHML+c9+Q3W0S4fCQJOym42pyurFiJUHEcEyHS0CeKzia4yZDEsLlqOFykxOdHpNy0NmvVO31vcSqAxJCg==} engines: {node: '>= 12.0.0'} - lines-and-columns@1.2.4: - resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==} - - lit-element@4.2.0: - resolution: {integrity: sha512-MGrXJVAI5x+Bfth/pU9Kst1iWID6GHDLEzFEnyULB/sFiRLgkd8NPK/PeeXxktA3T6EIIaq8U3KcbTU5XFcP2Q==} + lit-element@4.2.1: + resolution: {integrity: sha512-WGAWRGzirAgyphK2urmYOV72tlvnxw7YfyLDgQ+OZnM9vQQBQnumQ7jUJe6unEzwGU3ahFOjuz1iz1jjrpCPuw==} - lit-html@3.3.0: - resolution: {integrity: sha512-RHoswrFAxY2d8Cf2mm4OZ1DgzCoBKUKSPvA1fhtSELxUERq2aQQ2h05pO9j81gS1o7RIRJ+CePLogfyahwmynw==} + lit-html@3.3.1: + resolution: {integrity: sha512-S9hbyDu/vs1qNrithiNyeyv64c9yqiW9l+DBgI18fL+MTvOtWoFR0FWiyq1TxaYef5wNlpEmzlXoBlZEO+WjoA==} - lit@3.3.0: - resolution: {integrity: sha512-DGVsqsOIHBww2DqnuZzW7QsuCdahp50ojuDaBPC7jUDRpYoH0z7kHBBYZewRzer75FwtrkmkKk7iOAwSaWdBmw==} + lit@3.3.1: + resolution: {integrity: sha512-Ksr/8L3PTapbdXJCk+EJVB78jDodUMaP54gD24W186zGRARvwrsPfS60wae/SSCTCNZVPd1chXqio1qHQmu4NA==} locate-path@6.0.0: resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==} @@ -5599,15 +5596,15 @@ snapshots: '@jridgewell/resolve-uri': 3.1.2 '@jridgewell/sourcemap-codec': 1.5.5 - '@lit-labs/ssr-dom-shim@1.3.0': {} + '@lit-labs/ssr-dom-shim@1.4.0': {} '@lit/localize@0.12.2': dependencies: - lit: 3.3.0 + lit: 3.3.1 - '@lit/reactive-element@2.1.0': + '@lit/reactive-element@2.1.1': dependencies: - '@lit-labs/ssr-dom-shim': 1.3.0 + '@lit-labs/ssr-dom-shim': 1.4.0 '@malept/cross-spawn-promise@2.0.0': dependencies: @@ -5631,9 +5628,9 @@ snapshots: '@mdui/shared@1.0.8': dependencies: - '@lit/reactive-element': 2.1.0 + '@lit/reactive-element': 2.1.1 '@mdui/jq': 3.0.3 - lit: 3.3.0 + lit: 3.3.1 ssr-window: 5.0.1 tslib: 2.8.1 @@ -8232,23 +8229,21 @@ snapshots: lightningcss-win32-arm64-msvc: 1.30.1 lightningcss-win32-x64-msvc: 1.30.1 - lines-and-columns@1.2.4: {} - - lit-element@4.2.0: + lit-element@4.2.1: dependencies: - '@lit-labs/ssr-dom-shim': 1.3.0 - '@lit/reactive-element': 2.1.0 - lit-html: 3.3.0 + '@lit-labs/ssr-dom-shim': 1.4.0 + '@lit/reactive-element': 2.1.1 + lit-html: 3.3.1 - lit-html@3.3.0: + lit-html@3.3.1: dependencies: '@types/trusted-types': 2.0.7 - lit@3.3.0: + lit@3.3.1: dependencies: - '@lit/reactive-element': 2.1.0 - lit-element: 4.2.0 - lit-html: 3.3.0 + '@lit/reactive-element': 2.1.1 + lit-element: 4.2.1 + lit-html: 3.3.1 locate-path@6.0.0: dependencies: @@ -8344,13 +8339,13 @@ snapshots: dependencies: '@floating-ui/utils': 0.2.10 '@lit/localize': 0.12.2 - '@lit/reactive-element': 2.1.0 + '@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.0 + lit: 3.3.1 ssr-window: 5.0.1 tslib: 2.8.1