should add multimonitor support

2024-01-17 18:23:35 +07:00
parent 94a5603cd2
commit 29d109770d
23 changed files with 341 additions and 410 deletions
@@ -1,10 +1,11 @@
 const { Gtk } = imports.gi;
 import Widget from 'resource:///com/github/Aylur/ags/widget.js';

-import { ModuleLeftSpace } from "./leftspace.js";
-import { ModuleRightSpace } from "./rightspace.js";
+import ModuleSpaceLeft from "./spaceleft.js";
+import ModuleSpaceRight from "./spaceright.js";
 import { ModuleMusic } from "./music.js";
 import { ModuleSystem } from "./system.js";
+import { RoundedCorner, dummyRegion, enableClickthrough } from "../../lib/roundedcorner.js";
 const OptionalWorkspaces = async () => {
    try {
        return (await import('./workspaces_hyprland.js')).default();
@@ -13,42 +14,64 @@ const OptionalWorkspaces = async () => {
        return null;
    }
 };
+const optionalWorkspacesInstance = await OptionalWorkspaces();

-const left = Widget.Box({
-    className: 'bar-sidemodule',
-    children: [ ModuleMusic()],
-});
+export const Bar = (monitor = 0) => {
+    const left = Widget.Box({
+        className: 'bar-sidemodule',
+        children: [ModuleMusic()],
+    });

-const center = Widget.Box({
-    children: [await OptionalWorkspaces()],
-});
+    const center = Widget.Box({
+        children: [optionalWorkspacesInstance],
+    });

-const right = Widget.Box({
-    className: 'bar-sidemodule',
-    children: [ModuleSystem()],
-});
-
-export default () => Widget.Window({
-    name: 'bar',
-    anchor: ['top', 'left', 'right'],
-    exclusivity: 'exclusive',
-    visible: true,
-    child: Widget.CenterBox({
-        className: 'bar-bg',
-        startWidget: ModuleLeftSpace(),
-        centerWidget: Widget.Box({
-            className: 'spacing-h-4',
-            children: [
-                left,
-                center,
-                right,
-            ]
+    const right = Widget.Box({
+        className: 'bar-sidemodule',
+        children: [ModuleSystem()],
+    });
+    return Widget.Window({
+        monitor,
+        name: `bar${monitor}`,
+        anchor: ['top', 'left', 'right'],
+        exclusivity: 'exclusive',
+        visible: true,
+        child: Widget.CenterBox({
+            className: 'bar-bg',
+            startWidget: ModuleSpaceLeft(),
+            endWidget: ModuleSpaceRight(),
+            centerWidget: Widget.Box({
+                className: 'spacing-h-4',
+                children: [
+                    left,
+                    center,
+                    right,
+                ]
+            }),
+            setup: (self) => {
+                const styleContext = self.get_style_context();
+                const minHeight = styleContext.get_property('min-height', Gtk.StateFlags.NORMAL);
+                // execAsync(['bash', '-c', `hyprctl keyword monitor ,addreserved,${minHeight},0,0,0`]).catch(print);
+            }
        }),
-        endWidget: ModuleRightSpace(),
-        setup: (self) => {
-            const styleContext = self.get_style_context();
-            const minHeight = styleContext.get_property('min-height', Gtk.StateFlags.NORMAL);
-            // execAsync(['bash', '-c', `hyprctl keyword monitor ,addreserved,${minHeight},0,0,0`]).catch(print);
-        }
-    }),
+    });
+}
+
+export const BarCornerTopleft = (id = '') => Widget.Window({
+    name: `barcornertl${id}`,
+    layer: 'top',
+    anchor: ['top', 'left'],
+    exclusivity: 'normal',
+    visible: true,
+    child: RoundedCorner('topleft', { className: 'corner', }),
+    setup: enableClickthrough,
+});
+export const BarCornerTopright = (id = '') => Widget.Window({
+    name: `barcornertr${id}`,
+    layer: 'top',
+    anchor: ['top', 'right'],
+    exclusivity: 'normal',
+    visible: true,
+    child: RoundedCorner('topright', { className: 'corner', }),
+    setup: enableClickthrough,
 });
@@ -6,10 +6,12 @@ import { AnimatedCircProg } from "../../lib/animatedcircularprogress.js";
 import { showMusicControls } from '../../variables.js';

 function trimTrackTitle(title) {
-    var cleanedTitle = title;
-    cleanedTitle = cleanedTitle.replace(/【[^】]*】/, '');          // Remove stuff like【C93】 at beginning
-    cleanedTitle = cleanedTitle.replace(/\[FREE DOWNLOAD\]/g, ''); // Remove F-777's [FREE DOWNLOAD]
-    return cleanedTitle.trim();
+    cleanRegexes = [
+        /【[^】]*】/,         // Touhou n weeb stuff
+        /\[FREE DOWNLOAD\]/, // F-777
+    ];
+    cleanRegexes.forEach((expr) => cleanedTitle.replace(expr, ''));
+    return title;
 }

 const TrackProgress = () => {
@@ -38,61 +40,66 @@ const moveToRelativeWorkspace = async (self, num) => {
    }
 }

-export const ModuleMusic = () => Widget.EventBox({ // TODO: use cairo to make button bounce smaller on click
-    onScrollUp: (self) => moveToRelativeWorkspace(self, -1),
-    onScrollDown: (self) => moveToRelativeWorkspace(self, +1),
-    onPrimaryClickRelease: () => showMusicControls.setValue(!showMusicControls.value),
-    onSecondaryClickRelease: () => execAsync(['bash', '-c', 'playerctl next || playerctl position `bc <<< "100 * $(playerctl metadata mpris:length) / 1000000 / 100"` &']),
-    onMiddleClickRelease: () => execAsync('playerctl play-pause').catch(print),
-    child: Widget.Box({
-        className: 'bar-group-margin bar-sides',
-        children: [
-            Widget.Box({
-                className: 'bar-group bar-group-standalone bar-group-pad-music spacing-h-10',
-                children: [
-                    Widget.Box({ // Wrap a box cuz overlay can't have margins itself
-                        homogeneous: true,
-                        children: [Widget.Overlay({
-                            child: Widget.Box({
-                                vpack: 'center',
-                                className: 'bar-music-playstate',
-                                homogeneous: true,
-                                children: [Widget.Label({
-                                    vpack: 'center',
-                                    className: 'bar-music-playstate-txt',
-                                    justification: 'center',
-                                    setup: (self) => self.hook(Mpris, label => {
-                                        const mpris = Mpris.getPlayer('');
-                                        label.label = `${mpris !== null && mpris.playBackStatus == 'Playing' ? 'pause' : 'play_arrow'}`;
-                                    }),
-                                })],
-                                setup: (self) => self.hook(Mpris, label => {
-                                    const mpris = Mpris.getPlayer('');
-                                    if (!mpris) return;
-                                    label.toggleClassName('bar-music-playstate-playing', mpris !== null && mpris.playBackStatus == 'Playing');
-                                    label.toggleClassName('bar-music-playstate', mpris !== null || mpris.playBackStatus == 'Paused');
-                                }),
-                            }),
-                            overlays: [
-                                TrackProgress(),
-                            ]
-                        })]
+export const ModuleMusic = () => {
+    // TODO: use cairo to make button bounce smaller on click, if that's possible
+    const playingState = Widget.Box({ // Wrap a box cuz overlay can't have margins itself
+        homogeneous: true,
+        children: [Widget.Overlay({
+            child: Widget.Box({
+                vpack: 'center',
+                className: 'bar-music-playstate',
+                homogeneous: true,
+                children: [Widget.Label({
+                    vpack: 'center',
+                    className: 'bar-music-playstate-txt',
+                    justification: 'center',
+                    setup: (self) => self.hook(Mpris, label => {
+                        const mpris = Mpris.getPlayer('');
+                        label.label = `${mpris !== null && mpris.playBackStatus == 'Playing' ? 'pause' : 'play_arrow'}`;
                    }),
-                    Widget.Scrollable({
-                        hexpand: true,
-                        child: Widget.Label({
-                            className: 'txt-smallie txt-onSurfaceVariant',
-                            setup: (self) => self.hook(Mpris, label => {
-                                const mpris = Mpris.getPlayer('');
-                                if (mpris)
-                                    label.label = `${trimTrackTitle(mpris.trackTitle)} • ${mpris.trackArtists.join(', ')}`;
-                                else
-                                    label.label = 'No media';
-                            }),
-                        })
-                    })
-                ]
-            })
-        ]
+                })],
+                setup: (self) => self.hook(Mpris, label => {
+                    const mpris = Mpris.getPlayer('');
+                    if (!mpris) return;
+                    label.toggleClassName('bar-music-playstate-playing', mpris !== null && mpris.playBackStatus == 'Playing');
+                    label.toggleClassName('bar-music-playstate', mpris !== null || mpris.playBackStatus == 'Paused');
+                }),
+            }),
+            overlays: [
+                TrackProgress(),
+            ]
+        })]
+    });
+    const trackTitle = Widget.Scrollable({
+        hexpand: true,
+        child: Widget.Label({
+            className: 'txt-smallie txt-onSurfaceVariant',
+            setup: (self) => self.hook(Mpris, label => {
+                const mpris = Mpris.getPlayer('');
+                if (mpris)
+                    label.label = `${trimTrackTitle(mpris.trackTitle)} • ${mpris.trackArtists.join(', ')}`;
+                else
+                    label.label = 'No media';
+            }),
+        })
    })
-});
+    return Widget.EventBox({
+        onScrollUp: (self) => moveToRelativeWorkspace(self, -1),
+        onScrollDown: (self) => moveToRelativeWorkspace(self, +1),
+        onPrimaryClickRelease: () => showMusicControls.setValue(!showMusicControls.value),
+        onSecondaryClickRelease: () => execAsync(['bash', '-c', 'playerctl next || playerctl position `bc <<< "100 * $(playerctl metadata mpris:length) / 1000000 / 100"` &']),
+        onMiddleClickRelease: () => execAsync('playerctl play-pause').catch(print),
+        child: Widget.Box({
+            className: 'bar-group-margin bar-sides',
+            children: [
+                Widget.Box({
+                    className: 'bar-group bar-group-standalone bar-group-pad-music spacing-h-10',
+                    children: [
+                        playingState,
+                        trackTitle,
+                    ]
+                })
+            ]
+        })
+    });
+}
@@ -1,81 +0,0 @@
-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';
-
-import Audio from 'resource:///com/github/Aylur/ags/service/audio.js';
-import SystemTray from 'resource:///com/github/Aylur/ags/service/systemtray.js';
-const { execAsync } = Utils;
-import Indicator from '../../services/indicator.js';
-import { StatusIcons } from "../../lib/statusicons.js";
-import { RoundedCorner } from "../../lib/roundedcorner.js";
-import { Tray } from "./tray.js";
-
-export const ModuleRightSpace = () => {
-    const barTray = Tray();
-    const barStatusIcons = StatusIcons({
-        className: 'bar-statusicons',
-        setup: (self) => self.hook(App, (self, currentName, visible) => {
-            if (currentName === 'sideright') {
-                self.toggleClassName('bar-statusicons-active', visible);
-            }
-        }),
-    });
-
-    return Widget.EventBox({
-        onScrollUp: () => {
-            if (!Audio.speaker) return;
-            Audio.speaker.volume += 0.03;
-            Indicator.popup(1);
-        },
-        onScrollDown: () => {
-            if (!Audio.speaker) return;
-            Audio.speaker.volume -= 0.03;
-            Indicator.popup(1);
-        },
-        onHover: () => { barStatusIcons.toggleClassName('bar-statusicons-hover', true) },
-        onHoverLost: () => { barStatusIcons.toggleClassName('bar-statusicons-hover', false) },
-        onPrimaryClick: () => App.toggleWindow('sideright'),
-        onSecondaryClickRelease: () => execAsync(['bash', '-c', 'playerctl next || playerctl position `bc <<< "100 * $(playerctl metadata mpris:length) / 1000000 / 100"` &']).catch(print),
-        onMiddleClickRelease: () => execAsync('playerctl play-pause').catch(print),
-        child: Widget.Box({
-            homogeneous: false,
-            children: [
-                Widget.Box({
-                    hexpand: true,
-                    className: 'spacing-h-5 txt',
-                    children: [
-                        Widget.Box({
-                            hexpand: true,
-                            className: 'spacing-h-5 txt',
-                            children: [
-                                Widget.Box({ hexpand: true, }),
-                                barTray,
-                                Widget.Revealer({
-                                    transition: 'slide_left',
-                                    revealChild: false,
-                                    attribute: {
-                                        'count': 0,
-                                        'update': (self, diff) => {
-                                            self.attribute.count += diff;
-                                            self.revealChild = (self.attribute.count > 0);
-                                        }
-                                    },
-                                    child: Widget.Box({
-                                        vpack: 'center',
-                                        className: 'separator-circle',
-                                    }),
-                                    setup: (self) => self
-                                        .hook(SystemTray, (self) => self.attribute.update(self, 1), 'added')
-                                        .hook(SystemTray, (self) => self.attribute.update(self, -1), 'removed')
-                                    ,
-                                }),
-                                barStatusIcons,
-                            ],
-                        }),
-                    ]
-                }),
-                RoundedCorner('topright', { className: 'corner-black' })
-            ]
-        })
-    });
-}
@@ -1,6 +1,5 @@
 import App from 'resource:///com/github/Aylur/ags/app.js';
 import Widget from 'resource:///com/github/Aylur/ags/widget.js';
-import { RoundedCorner } from "../../lib/roundedcorner.js";
 import Brightness from '../../services/brightness.js';
 import Indicator from '../../services/indicator.js';

@@ -37,7 +36,7 @@ const WindowTitle = async () => {

 const OptionalWindowTitleInstance = await WindowTitle();

-export const ModuleLeftSpace = () => Widget.EventBox({
+export default () => Widget.EventBox({
    onScrollUp: () => {
        Indicator.popup(1); // Since the brightness and speaker are both on the same window
        Brightness.screen_value += 0.05;
@@ -52,7 +51,7 @@ export const ModuleLeftSpace = () => Widget.EventBox({
    child: Widget.Box({
        homogeneous: false,
        children: [
-            RoundedCorner('topleft', { className: 'corner-black' }),
+            Widget.Box({ className: 'bar-corner-spacing' }),
            Widget.Overlay({
                overlays: [
                    Widget.Box({ hexpand: true }),
@@ -0,0 +1,82 @@
+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';
+
+import Audio from 'resource:///com/github/Aylur/ags/service/audio.js';
+import SystemTray from 'resource:///com/github/Aylur/ags/service/systemtray.js';
+const { execAsync } = Utils;
+import Indicator from '../../services/indicator.js';
+import { StatusIcons } from "../../lib/statusicons.js";
+import { Tray } from "./tray.js";
+
+export default () => {
+    const barTray = Tray();
+    const notifCounter = Widget.Revealer({
+        transition: 'slide_left',
+        revealChild: false,
+        attribute: {
+            'count': 0,
+            'update': (self, diff) => {
+                self.attribute.count += diff;
+                self.revealChild = (self.attribute.count > 0);
+            }
+        },
+        child: Widget.Box({
+            vpack: 'center',
+            className: 'separator-circle',
+        }),
+        setup: (self) => self
+            .hook(SystemTray, (self) => self.attribute.update(self, 1), 'added')
+            .hook(SystemTray, (self) => self.attribute.update(self, -1), 'removed')
+        ,
+    });
+    const barStatusIcons = StatusIcons({
+        className: 'bar-statusicons',
+        setup: (self) => self.hook(App, (self, currentName, visible) => {
+            if (currentName === 'sideright') {
+                self.toggleClassName('bar-statusicons-active', visible);
+            }
+        }),
+    });
+    const actualContent = Widget.Box({
+        hexpand: true,
+        className: 'spacing-h-5 txt',
+        children: [
+            Widget.Box({
+                hexpand: true,
+                className: 'spacing-h-5 txt',
+                children: [
+                    Widget.Box({ hexpand: true, }),
+                    barTray,
+                    notifCounter,
+                    barStatusIcons,
+                ],
+            }),
+        ]
+    });
+
+    return Widget.EventBox({
+        onScrollUp: () => {
+            if (!Audio.speaker) return;
+            Audio.speaker.volume += 0.03;
+            Indicator.popup(1);
+        },
+        onScrollDown: () => {
+            if (!Audio.speaker) return;
+            Audio.speaker.volume -= 0.03;
+            Indicator.popup(1);
+        },
+        onHover: () => { barStatusIcons.toggleClassName('bar-statusicons-hover', true) },
+        onHoverLost: () => { barStatusIcons.toggleClassName('bar-statusicons-hover', false) },
+        onPrimaryClick: () => App.toggleWindow('sideright'),
+        onSecondaryClickRelease: () => execAsync(['bash', '-c', 'playerctl next || playerctl position `bc <<< "100 * $(playerctl metadata mpris:length) / 1000000 / 100"` &']).catch(print),
+        onMiddleClickRelease: () => execAsync('playerctl play-pause').catch(print),
+        child: Widget.Box({
+            homogeneous: false,
+            children: [
+                actualContent,
+                Widget.Box({ className: 'bar-corner-spacing' }),
+            ]
+        })
+    });
+}