Merge with latest upstream

.config/ags/modules/indicators/indicatorvalues.js

@@ -6,7 +6,11 @@ import { MarginRevealer } from '../.widgethacks/advancedrevealers.js';
 import Brightness from '../../services/brightness.js';
 import Indicator from '../../services/indicator.js';
 
-const OsdValue = ({ name, nameSetup = undefined, labelSetup, progressSetup, ...rest }) => {
+const OsdValue = ({
+    name, nameSetup = undefined, labelSetup, progressSetup,
+    extraClassName = '', extraProgressClassName = '',
+    ...rest
+}) => {
     const valueName = Label({
         xalign: 0, yalign: 0, hexpand: true,
         className: 'osd-label',
@@ -20,7 +24,7 @@ const OsdValue = ({ name, nameSetup = undefined, labelSetup, progressSetup, ...r
     return Box({ // Volume
         vertical: true,
         hexpand: true,
-        className: 'osd-bg osd-value',
+        className: `osd-bg osd-value ${extraClassName}`,
         attribute: {
             'disable': () => {
                 valueNumber.label = '󰖭';
@@ -35,7 +39,7 @@ const OsdValue = ({ name, nameSetup = undefined, labelSetup, progressSetup, ...r
                 ]
             }),
             ProgressBar({
-                className: 'osd-progress',
+                className: `osd-progress ${extraProgressClassName}`,
                 hexpand: true,
                 vertical: false,
                 setup: progressSetup,
@@ -48,6 +52,8 @@ const OsdValue = ({ name, nameSetup = undefined, labelSetup, progressSetup, ...r
 export default () => {
     const brightnessIndicator = OsdValue({
         name: 'Brightness',
+        extraClassName: 'osd-brightness',
+        extraProgressClassName: 'osd-brightness-progress',
         labelSetup: (self) => self.hook(Brightness, self => {
             self.label = `${Math.round(Brightness.screen_value * 100)}`;
         }, 'notify::screen-value'),
@@ -59,9 +65,9 @@ export default () => {
 
     const volumeIndicator = OsdValue({
         name: 'Volume',
-        attribute: {
-            headphones: undefined,
-        },
+        extraClassName: 'osd-volume',
+        extraProgressClassName: 'osd-volume-progress',
+        attribute: { headphones: undefined },
         nameSetup: (self) => Utils.timeout(1, () => {
             const updateAudioDevice = (self) => {
                 const usingHeadphones = (Audio.speaker?.stream?.port)?.toLowerCase().includes('headphone');

.config/ags/modules/indicators/musiccontrols.js

@@ -1,4 +1,4 @@
-const { Gdk, GdkPixbuf, GLib, Gtk } = imports.gi;
+const { GLib } = imports.gi;
 import App from 'resource:///com/github/Aylur/ags/app.js';
 import Widget from 'resource:///com/github/Aylur/ags/widget.js';
 import * as Utils from 'resource:///com/github/Aylur/ags/utils.js';
@@ -9,6 +9,7 @@ const { Box, EventBox, Icon, Scrollable, Label, Button, Revealer } = Widget;
 import { fileExists } from '../.miscutils/files.js';
 import { AnimatedCircProg } from "../.commonwidgets/cairo_circularprogress.js";
 import { showMusicControls } from '../../variables.js';
+import { darkMode } from '../.miscutils/system.js';
 
 const COMPILED_STYLE_DIR = `${GLib.get_user_cache_dir()}/ags/user/generated`
 const LIGHTDARK_FILE_LOCATION = `${GLib.get_user_cache_dir()}/ags/user/colormode.txt`;
@@ -182,7 +183,7 @@ const CoverArt = ({ player, ...rest }) => {
                 }
 
                 const coverPath = player.coverPath;
-                const stylePath = `${player.coverPath}${lightDark}${COVER_COLORSCHEME_SUFFIX}`;
+                const stylePath = `${player.coverPath}${darkMode ? '' : '-l'}${COVER_COLORSCHEME_SUFFIX}`;
                 if (player.coverPath == lastCoverPath) { // Since 'notify::cover-path' emits on cover download complete
                     Utils.timeout(200, () => {
                         // self.attribute.showImage(self, coverPath);
@@ -201,9 +202,9 @@ const CoverArt = ({ player, ...rest }) => {
 
                 // Generate colors
                 execAsync(['bash', '-c',
-                    `${App.configDir}/scripts/color_generation/generate_colors_material.py --path '${coverPath}' --mode '${colorMode}' > ${App.configDir}/scss/_musicmaterial.scss`])
+                    `${App.configDir}/scripts/color_generation/generate_colors_material.py --path '${coverPath}' --mode ${darkMode ? 'dark' : 'light'} > ${App.configDir}/scss/_musicmaterial.scss`])
                     .then(() => {
-                        exec(`wal -i "${player.coverPath}" -n -t -s -e -q ${lightDark}`)
+                        exec(`wal -i "${player.coverPath}" -n -t -s -e -q ${darkMode ? '' : '-l'}`)
                         exec(`cp ${GLib.get_user_cache_dir()}/wal/colors.scss ${App.configDir}/scss/_musicwal.scss`);
                         exec(`sass ${App.configDir}/scss/_music.scss ${stylePath}`);
                         Utils.timeout(200, () => {