frostybiscuit commented

(Migrated from github.com)

Transparent Player plugin

I've added a new plugin called "Transparent Player" with the intention of allowing the use of Acrylic, Mica and Tabbed effects for the Electron window.

Options

Opacity
- Allowing to set the opacity of the apps background-color from 10-100%
Type
- Allows the user to select effects from "Acrylic", "Mica" and "Tabbed" without the need of reloading the app

Known limitations

As of now this will only work for Windows 11 22H2 and above. Support for MacOS is possible, but I don't have a device to test this on.
The transparency for Acrylic is only visible when the window is currently in focus. This is a limitation by Windows and can only be "fixed" by using a third party application like "Mica for Everyone".

Preview

Acrylic (10%)

Acrylic (50%)

Acrylic (100%) - basically fully opaque

Mica

Tabbed

Disabled

Notes

The plugin can be fully disabled, but the initial settings need to be set to an active material in order for it to work properly (I chose Mica for least intrusion, but it should never be visible to the user unless they enable this plugin).
I had to set the initial "backgroundColor" for the electron window instance to a transparent black for the effects to function, because this cannot be changed properly during runtime. The transparent background will never be visible without my plugin, since the website itself has a background-color set.

Closes https://github.com/th-ch/youtube-music/issues/3629

# Transparent Player plugin ### I've added a new plugin called "Transparent Player" with the intention of allowing the use of Acrylic, Mica and Tabbed effects for the Electron window. ## Options - Opacity - Allowing to set the opacity of the apps background-color from 10-100% - Type - Allows the user to select effects from "Acrylic", "Mica" and "Tabbed" without the need of reloading the app ## Known limitations - As of now this will only work for Windows 11 22H2 and above. Support for MacOS is possible, but I don't have a device to test this on. - The transparency for Acrylic is only visible when the window is currently in focus. This is a limitation by Windows and can only be "fixed" by using a third party application like "Mica for Everyone". ## Preview #### Acrylic (10%) ![Acrylic_10%](https://github.com/user-attachments/assets/96325f4b-09bb-49af-9adf-14a0015442b4) #### Acrylic (50%) ![Acrylic_50%](https://github.com/user-attachments/assets/196fcf21-96d9-4ab9-91f1-bf82e5cce89f) #### Acrylic (100%) - basically fully opaque ![Acrylic_100%](https://github.com/user-attachments/assets/c359b23d-fcde-46ab-be30-5b03ef8676b5) #### Mica ![Mica](https://github.com/user-attachments/assets/2bb543a8-8dcc-4d23-88f8-719073a4efdd) #### Tabbed ![Tabbed](https://github.com/user-attachments/assets/44128690-fca4-4aa4-aa51-4e28e98c0b25) #### Disabled ![Disabled](https://github.com/user-attachments/assets/9ae9cf53-0bac-4af0-b658-44dc3a131f80) ## Notes - The plugin can be fully disabled, but the initial settings need to be set to an active material in order for it to work properly (I chose Mica for least intrusion, but it should never be visible to the user unless they enable this plugin). - I had to set the initial "backgroundColor" for the electron window instance to a transparent black for the effects to function, because this cannot be changed properly during runtime. The transparent background will never be visible without my plugin, since the website itself has a background-color set. Closes https://github.com/th-ch/youtube-music/issues/3629

👍 1

frostybiscuit commented

2025-06-28 17:11:02 +00:00

(Migrated from github.com)

@JellyBrick Not sure what went wrong with the build here, but considering it hit a timeout, I guess it could have been a hiccup during the build? ¯_(ツ)_/¯

Could I kindly ask you to re-trigger the build? That is, if the whole concept of this plugin even matches with your vision for the app of course!

@JellyBrick Not sure what went wrong with the build here, but considering it hit a timeout, I guess it could have been a hiccup during the build? ¯\_(ツ)_/¯ Could I kindly ask you to re-trigger the build? That is, if the whole concept of this plugin even matches with your vision for the app of course!

👀 1

arjix commented

2025-06-28 19:03:27 +00:00

Owner

@frostybiscuit

don't sweat it about the CI errors
also, there is no vision for the app, any idea that is shared by many people and doesn't negatively impact others will probably end up getting accepted

@frostybiscuit don't sweat it about the CI errors also, there is no vision for the app, any idea that is shared by many people and doesn't negatively impact others will probably end up getting accepted

❤️ 1

arjix commented

2025-06-28 19:10:19 +00:00

Owner

The plugin can be fully disabled, but the initial settings need to be set to an active material in order for it to work properly (I chose Mica for least intrusion, but it should never be visible to the user unless they enable this plugin).

I'd suggest marking the plugin as restartNeeded: true, and only add an initial active material if the plugin is enabled.

> The plugin can be fully disabled, but the initial settings need to be set to an active material in order for it to work properly (I chose Mica for least intrusion, but it should never be visible to the user unless they enable this plugin). I'd suggest marking the plugin as `restartNeeded: true`, and only add an initial active material if the plugin is enabled.

arjix commented

2025-06-28 19:12:50 +00:00

Owner

Also, according to the docs, dynamically changing the material is exclusive to windows.

Dunno if the exclusivity also applies to the initial property of backgroundMaterial, but I also can't find it in the docs.

Also, according to the docs, dynamically changing the material is exclusive to windows. ![image](https://github.com/user-attachments/assets/d1cf0a12-f56c-4829-bf56-5f61b3120b4d) Dunno if the exclusivity also applies to the initial property of `backgroundMaterial`, but I also can't find it in the docs.

frostybiscuit commented

2025-06-28 20:11:51 +00:00

(Migrated from github.com)

@ArjixWasTaken Thanks for looking into it, very much appreciated!

I initially tried not having a backgroundMaterial set unless the plugin is initialised, but then the whole effect would not work at all, not even with restartNeeded set to true.

I would prefer this approach myself and tried around for a few days, but didn't find any working solution (other than loading a config before the initial window config) so I thought Mica being a native effect on W11 which can be disabled on OS level should have very little if any performance impact on the Users.

That said, I can continue to find a proper and clean solution to have unchanged initial settings until the plugin is enabled!

@ArjixWasTaken Thanks for looking into it, very much appreciated! I initially tried not having a backgroundMaterial set unless the plugin is initialised, but then the whole effect would not work at all, not even with restartNeeded set to true. I would prefer this approach myself and tried around for a few days, but didn't find any working solution (other than loading a config before the initial window config) so I thought Mica being a native effect on W11 which can be disabled on OS level should have very little if any performance impact on the Users. That said, I can continue to find a proper and clean solution to have unchanged initial settings until the plugin is enabled!

frostybiscuit commented

2025-06-29 15:02:17 +00:00

(Migrated from github.com)

Ignore this PR for now until I found a solution to not have any backgroundMaterial set initially, because I assume that there could be an issue on macOS running electron with this setting applied, even if only for the headless instance for testing.

arjix commented

2025-06-29 15:04:09 +00:00

Owner

The config is available on index.ts
https://github.com/frostybiscuit/youtube-music/blob/feature/transparent-player-plugin/src/index.ts#L132-L138

you just have to write the json path

The config is available on `index.ts` https://github.com/frostybiscuit/youtube-music/blob/feature/transparent-player-plugin/src/index.ts#L132-L138 you just have to write the json path

frostybiscuit commented

2025-07-16 19:39:58 +00:00

(Migrated from github.com)

@ArjixWasTaken I guess the test error was caused by the fact that the initial window options had a backgroundMaterial on macOS, even if the value was undefined. Now the builds run through, but in general the plugin only works on Windows for now.

I know that macOS also has a way to get this working, using "vibrancy", but I don't have a macOS device to test that on my end, so I wouldn't feel too comfortable testing this, but I'd be fine adapting the plugin itself accordingly to set the correct values.
As for Linux, I can't find a way to guarantee that it will work, especially since it is also distro dependent.

Would it be acceptable to have this as a Windows-only plugin for now, or should we first make sure that at least macOS is supported as well before continuing?

@ArjixWasTaken I guess the test error was caused by the fact that the initial window options had a backgroundMaterial on macOS, even if the value was undefined. Now the builds run through, but in general the plugin only works on Windows for now. I know that macOS also has a way to get this working, using "vibrancy", but I don't have a macOS device to test that on my end, so I wouldn't feel too comfortable testing this, but I'd be fine adapting the plugin itself accordingly to set the correct values. As for Linux, I can't find a way to guarantee that it will work, especially since it is also distro dependent. Would it be acceptable to have this as a Windows-only plugin for now, or should we first make sure that at least macOS is supported as well before continuing?

arjix commented

2025-07-16 19:48:44 +00:00

Owner

On that topic, I'd like to make a suggestion

@JellyBrick currently, for platform-dependent plugins, we have an imho ugly way of disabling them on unsupported platforms.

e.g. https://github.com/th-ch/youtube-music/blob/master/src/index.ts#L64-L69

I suggest we introduce a way for a plugin to declare that it supports specific platforms.
e.g. using an enum

export default createPlugin({
  platform: Platform.Windows | Platform.Darwin
});

In my opinion, declarative is better than imperative

@frostybiscuit it's totally fine to release your plugin for a specific platform, getting the plugin merged means that other people may contribute their own platform in a separate PR

On that topic, I'd like to make a suggestion @JellyBrick currently, for platform-dependent plugins, we have an imho ugly way of disabling them on unsupported platforms. e.g. https://github.com/th-ch/youtube-music/blob/master/src/index.ts#L64-L69 I suggest we introduce a way for a plugin to declare that it supports specific platforms. e.g. using an enum ```typescript export default createPlugin({ platform: Platform.Windows | Platform.Darwin }); ``` In my opinion, declarative is better than imperative --- @frostybiscuit it's totally fine to release your plugin for a specific platform, getting the plugin merged means that other people may contribute their own platform in a separate PR

frostybiscuit commented

2025-07-16 20:39:01 +00:00

(Migrated from github.com)

I suggest we introduce a way for a plugin to declare that it supports specific platforms. e.g. using an enum
export default createPlugin({
  platform: Platform.Windows | Platform.Darwin
});

Fully agree that initializing plugins only if they support the current platform is supported makes most sense! For now I would maybe add "(Windows)" to the plugin label, unless you say that it isn't necessary.

Also, if you need a helping hand with the platform specific initialization, feel free to reach out, I would gladly help with that!

> I suggest we introduce a way for a plugin to declare that it supports specific platforms. e.g. using an enum > > ```ts > export default createPlugin({ > platform: Platform.Windows | Platform.Darwin > }); > ``` Fully agree that initializing plugins only if they support the current platform is supported makes most sense! For now I would maybe add "(Windows)" to the plugin label, unless you say that it isn't necessary. Also, if you need a helping hand with the platform specific initialization, feel free to reach out, I would gladly help with that!

arjix commented

2025-07-16 21:18:48 +00:00

Owner

For now I would maybe add "(Windows)" to the plugin label, unless you say that it isn't necessary.

The plugin should be completely hidden from the user if their platform is not supported, as long as it's properly dealt with.
e.g. https://github.com/th-ch/youtube-music/blob/master/src/index.ts#L64-L69

> For now I would maybe add "(Windows)" to the plugin label, unless you say that it isn't necessary. The plugin should be completely hidden from the user if their platform is not supported, as long as it's properly dealt with. e.g. https://github.com/th-ch/youtube-music/blob/master/src/index.ts#L64-L69

👍 1

frostybiscuit commented

2025-07-16 21:57:25 +00:00

(Migrated from github.com)

Gotcha! I will tackle this tomorrow

frostybiscuit commented

2025-07-17 15:52:37 +00:00

(Migrated from github.com)

@ArjixWasTaken The plugin is now fully removed on non-windows devices and the config is only touched after the plugin was enabled. Let me know if you want anything else adapted!

👎 1

Rows
Columns

feat(transparent-player): new plugin for Acrylic, Mica or Tabbed effects #3529

Transparent Player plugin

I've added a new plugin called "Transparent Player" with the intention of allowing the use of Acrylic, Mica and Tabbed effects for the Electron window.

Options

Known limitations

Preview

Acrylic (10%)

Acrylic (50%)

Acrylic (100%) - basically fully opaque

Mica

Tabbed

Disabled

Notes