diff --git a/modules/bar/bar.js b/modules/bar/bar.js index de181f1..40d03cf 100644 --- a/modules/bar/bar.js +++ b/modules/bar/bar.js @@ -1,12 +1,15 @@ +import { Menu } from "./menu/index.js"; import { Workspaces } from "./workspaces/index.js"; import { ClientTitle } from "./window_title/index.js"; import { Media } from "./media/index.js"; import { Notification } from "./notification/index.js"; import { Volume } from "./volume/index.js"; +import { Network } from "./network/index.js"; import { Bluetooth } from "./bluetooth/index.js"; import { BatteryLabel } from "./battery/index.js"; import { Clock } from "./clock/index.js"; import { SysTray } from "./systray/index.js"; +import { Power } from "./power/index.js"; import { BarItemBox } from "../shared/barItemBox.js"; @@ -16,7 +19,7 @@ const Left = () => { class_name: "box-left", hpack: "start", spacing: 5, - children: [BarItemBox(Workspaces()), BarItemBox(ClientTitle())], + children: [Menu(), BarItemBox(Workspaces()), BarItemBox(ClientTitle())], }); }; @@ -35,10 +38,12 @@ const Right = () => { spacing: 5, children: [ BarItemBox(Volume()), + BarItemBox(Network()), BarItemBox(Bluetooth()), BarItemBox(BatteryLabel()), BarItemBox(SysTray()), BarItemBox(Clock()), + BarItemBox(Power()), ], }); }; diff --git a/modules/bar/media/index.js b/modules/bar/media/index.js index 68ff6a3..648fcfb 100644 --- a/modules/bar/media/index.js +++ b/modules/bar/media/index.js @@ -1,24 +1,49 @@ const mpris = await Service.import("mpris"); const Media = () => { + const activePlayer = Variable(mpris.players[0]); + mpris.connect("changed", (value) => { + const statusOrder = { + Playing: 1, + Paused: 2, + Stopped: 3, + }; + + const isPlaying = value.players.find( + (p) => p["play-back-status"] === "Playing", + ); + + if (isPlaying) { + activePlayer.value = value.players.sort( + (a, b) => + statusOrder[a["play-back-status"]] - + statusOrder[b["play-back-status"]], + )[0]; + } + }); + const label = Utils.watch("", mpris, "player-changed", () => { - if (mpris.players[0]) { - const { track_artists, track_title } = mpris.players[0]; - return `${track_artists.join(", ")} - ${track_title}`; + if (activePlayer.value) { + const { track_artists, track_title } = activePlayer.value; + return `󰝚 ${track_title} - ${track_artists.join(", ")} 󰝚`; } else { return "Nothing is playing"; } }); return { - component: Widget.Button({ - class_name: "media", - on_primary_click: () => mpris.getPlayer("")?.playPause(), - on_scroll_up: () => mpris.getPlayer("")?.next(), - on_scroll_down: () => mpris.getPlayer("")?.previous(), - child: Widget.Label({ label }), + component: Widget.Box({ + visible: false, + child: Widget.Button({ + class_name: "media", + on_primary_click: () => mpris.getPlayer("")?.playPause(), + on_scroll_up: () => mpris.getPlayer("")?.next(), + on_scroll_down: () => mpris.getPlayer("")?.previous(), + child: Widget.Label({ label }), + }), }), isVisible: false, + name: "media", }; }; diff --git a/modules/bar/menu/index.js b/modules/bar/menu/index.js new file mode 100644 index 0000000..529fb88 --- /dev/null +++ b/modules/bar/menu/index.js @@ -0,0 +1,10 @@ +export const Menu = () => { + return Widget.Box({ + child: Widget.Button({ + child: Widget.Label({ + class_name: "bar-menu_label", + label: "󰣇", + }), + }), + }); +}; diff --git a/modules/bar/network/index.js b/modules/bar/network/index.js new file mode 100644 index 0000000..465f8ba --- /dev/null +++ b/modules/bar/network/index.js @@ -0,0 +1,32 @@ +const network = await Service.import("network"); + +const Network = () => { + const wifiIndicator = [ + Widget.Icon({ + icon: network.wifi.bind("icon_name"), + }), + Widget.Label({ + label: network.wifi + .bind("ssid") + .as((ssid) => (ssid ? ` ${ssid}` : " Unknown")), + }), + ]; + + const wiredIndicator = [ + Widget.Label({ + label: network.bind("wired").as(() => "󰈀 Wired"), + }), + ]; + + return { + component: Widget.Box({ + class_name: "bar-network", + children: network + .bind("primary") + .as((w) => (w === "wired" ? wiredIndicator : wifiIndicator)), + }), + isVisible: true, + }; +}; + +export { Network }; diff --git a/modules/bar/power/index.js b/modules/bar/power/index.js new file mode 100644 index 0000000..27ed441 --- /dev/null +++ b/modules/bar/power/index.js @@ -0,0 +1,13 @@ +export const Power = () => { + return { + component: Widget.Box({ + child: Widget.Button({ + child: Widget.Label({ + class_name: "bar-power_label", + label: "⏻", + }), + }), + }), + isVisible: true, + }; +}; diff --git a/modules/bar/window_title/index.js b/modules/bar/window_title/index.js index 16579c6..0bb416e 100644 --- a/modules/bar/window_title/index.js +++ b/modules/bar/window_title/index.js @@ -15,8 +15,10 @@ const filterTitle = (titleString) => { [" ", "󰇄 Desktop"], ["(.*) Spotify Free", "󰓇 Spotify"], ["(.*)Spotify Premium", "󰓇 Spotify"], + ["Spotify", "󰓇 Spotify"], [" ~", " Terminal"], ["(.*) - Obsidian(.*)", "󱓧 Obsidian"], + ["(.*)", `󰣆 ${titleString.charAt(0).toUpperCase() + titleString.slice(1)}`], ]; const foundMatch = windowTitleMap.find((wt) => diff --git a/modules/shared/barItemBox.js b/modules/shared/barItemBox.js index 2e516d2..587743d 100644 --- a/modules/shared/barItemBox.js +++ b/modules/shared/barItemBox.js @@ -5,11 +5,11 @@ export const BarItemBox = (child) => { } return child.isVisible; - } + }; return Widget.Box({ class_name: "bar_item_box_visible", child: child.component, - visible: computeVisible() + visible: computeVisible(), }); }; diff --git a/scss/bar/audio.scss b/scss/bar/audio.scss index 29f8e3c..4a8ac8c 100644 --- a/scss/bar/audio.scss +++ b/scss/bar/audio.scss @@ -27,7 +27,7 @@ } .bar-volume_icon { - font-size: 17px; + font-size: 1.3rem; color: $peach; } diff --git a/scss/bar/bar.scss b/scss/bar/bar.scss index 373dd7c..7fb4d56 100644 --- a/scss/bar/bar.scss +++ b/scss/bar/bar.scss @@ -2,16 +2,14 @@ .bar { background: $mantle; -} - -.bar * { - font-weight: bold; + font-size: 1.15rem; + font-weight: 800; } .bar_item_box_visible { background: $surface0; border-radius: 8px; - padding: 1px 12px; + padding: 2px 12px; margin: 6px 3px; } diff --git a/scss/bar/bluetooth.scss b/scss/bar/bluetooth.scss index 473b894..bf7a172 100644 --- a/scss/bar/bluetooth.scss +++ b/scss/bar/bluetooth.scss @@ -1,7 +1,7 @@ @import '../colors'; .bar-bt_icon { - font-size: 17px; + font-size: 1.3rem; color: $sky; } diff --git a/scss/bar/media.scss b/scss/bar/media.scss new file mode 100644 index 0000000..7dacc4f --- /dev/null +++ b/scss/bar/media.scss @@ -0,0 +1,5 @@ +@import "../colors"; + +.media { + color: $green; +} diff --git a/scss/bar/menu.scss b/scss/bar/menu.scss new file mode 100644 index 0000000..7432f22 --- /dev/null +++ b/scss/bar/menu.scss @@ -0,0 +1,7 @@ +@import "../colors"; + +.bar-menu_label { + color: $teal; + margin-right: 20px; + font-size: 2rem; +} diff --git a/scss/bar/network.scss b/scss/bar/network.scss new file mode 100644 index 0000000..100b61e --- /dev/null +++ b/scss/bar/network.scss @@ -0,0 +1,5 @@ +@import "../colors"; + +.bar-network { + color: $mauve; +} diff --git a/scss/bar/power.scss b/scss/bar/power.scss new file mode 100644 index 0000000..f316212 --- /dev/null +++ b/scss/bar/power.scss @@ -0,0 +1,6 @@ +@import "../colors"; + +.bar-power_label { + color: $red; + margin-right: 2px; +} diff --git a/scss/main.scss b/scss/main.scss index dec01af..0e58cf4 100644 --- a/scss/main.scss +++ b/scss/main.scss @@ -8,10 +8,14 @@ @import "common"; //modules - bar +@import "bar/menu"; @import "bar/audio"; +@import "bar/media"; +@import "bar/network"; @import "bar/bluetooth"; @import "bar/clock"; @import "bar/workspace"; @import "bar/window_title"; @import "bar/systray"; +@import "bar/power"; @import "bar/bar"; diff --git a/style.css b/style.css index 0613880..e10d953 100644 --- a/style.css +++ b/style.css @@ -232,6 +232,12 @@ spinner:checked { animation: spin 1s linear infinite; } +.bar-menu_label { + color: #94e2d5; + margin-right: 20px; + font-size: 2rem; +} + .audio-volume-box .audio-volume-label { min-width: 3rem; } @@ -253,7 +259,7 @@ spinner:checked { } .bar-volume_icon { - font-size: 17px; + font-size: 1.3rem; color: #fab387; } @@ -261,8 +267,16 @@ spinner:checked { color: #fab387; } +.media { + color: #a6e3a1; +} + +.bar-network { + color: #cba6f7; +} + .bar-bt_icon { - font-size: 17px; + font-size: 1.3rem; color: #89dceb; } @@ -328,18 +342,21 @@ spinner:checked { background-color: #b4befe; } -.bar { - background: #181825; +.bar-power_label { + color: #f38ba8; + margin-right: 2px; } -.bar * { - font-weight: bold; +.bar { + background: #181825; + font-size: 1.15rem; + font-weight: 800; } .bar_item_box_visible { background: #313244; border-radius: 8px; - padding: 1px 12px; + padding: 2px 12px; margin: 6px 3px; } diff --git a/style.css.map b/style.css.map index dfe386c..26907e3 100644 --- a/style.css.map +++ b/style.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["scss/main.scss","scss/common.scss","scss/colors.scss","scss/bar/audio.scss","scss/bar/bluetooth.scss","scss/bar/clock.scss","scss/bar/workspace.scss","scss/bar/window_title.scss","scss/bar/systray.scss","scss/bar/bar.scss"],"names":[],"mappings":"AAAA;EACE;EACA;;;ACFF;EACE;EACA;EACA,kBCFgB;EDGhB;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI,kBChBW;;ADkBf;EACE,OCnBa;;ADqBf;EACE;EACA;EACA;EACA;;AAGJ;EACE;EACA;EACA,kBC/Be;;;ADmCnB;EACE;EACA;EACA;EACA,OCvCiB;;;AD0CnB;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA,kBC9DiB;ED+DjB;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AAAA;EAEE;EACA,kBC9EgB;;;ADiFlB;AAAA;EAEE;EACA,kBCpFgB;;;ADuFlB;AAAA;AAAA;EAGE,OC1FgB;ED2FhB,kBC9CW;;;ADiDb;AAAA;AAAA;EAGE;EACA,kBCrDW;;;ADwDb;AAAA;AAAA;EAGE;EACA,kBC5DW;;;AD+Db;EACE;EACA;EACA;EACA;EACA,kBChHiB;EDiHjB;EACA;EACA;;;AAGF;EACE,kBC3EW;;;AD8Eb;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA,kBCvIc;EDwId;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA,kBChKiB;;;ADmKnB;EACE;EACA,kBCzHW;;;AD4Hb;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA,OC3IW;ED4IX,kBCzLgB;ED0LhB;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE,kBC1MgB;ED2MhB,OC5Mc;ED6Md;;;AAGF;EACE;EACA;EACA,kBCjNiB;;;ADoNnB;EACE;IACE;;;AAIJ;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AEjOA;EACE;;;AAIJ;EACE;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;;AAIJ;EACE;EACA,ODRM;;;ACWR;EACE,ODZM;;;AEpBR;EACE;EACA,OFsBI;;;AEnBN;EACE,OFkBI;;;AGxBN;EACE,OHeK;;;AIfL;EACE;EACA;EACA;EACA;EACA;EACA;EACA,kBJmBO;;AIjBP;EACE,kBJQG;EIPH;EACA;;AAGF;EACE,kBJOA;EINA;EACA;;;AAMN;EACE;;;AC1BF;EACE,OLoBO;;;AMrBT;EACE;;;AAGF;EACE,YNiCO;;;AM/BT;EACE;EACA,ONkBS;;;AMfX;EACE,kBNsBS;;;AMnBX;EACE,kBNmBS;EMlBT;;;AAGF;EACE,kBNKS;;;AO3BX;EACE,YPqCO;;;AOlCT;EACE;;;AAGF;EACE,YP2BS;EO1BT;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE","file":"style.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["scss/main.scss","scss/common.scss","scss/colors.scss","scss/bar/menu.scss","scss/bar/audio.scss","scss/bar/media.scss","scss/bar/network.scss","scss/bar/bluetooth.scss","scss/bar/clock.scss","scss/bar/workspace.scss","scss/bar/window_title.scss","scss/bar/systray.scss","scss/bar/power.scss","scss/bar/bar.scss"],"names":[],"mappings":"AAAA;EACE;EACA;;;ACFF;EACE;EACA;EACA,kBCFgB;EDGhB;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI,kBChBW;;ADkBf;EACE,OCnBa;;ADqBf;EACE;EACA;EACA;EACA;;AAGJ;EACE;EACA;EACA,kBC/Be;;;ADmCnB;EACE;EACA;EACA;EACA,OCvCiB;;;AD0CnB;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA,kBC9DiB;ED+DjB;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AAAA;EAEE;EACA,kBC9EgB;;;ADiFlB;AAAA;EAEE;EACA,kBCpFgB;;;ADuFlB;AAAA;AAAA;EAGE,OC1FgB;ED2FhB,kBC9CW;;;ADiDb;AAAA;AAAA;EAGE;EACA,kBCrDW;;;ADwDb;AAAA;AAAA;EAGE;EACA,kBC5DW;;;AD+Db;EACE;EACA;EACA;EACA;EACA,kBChHiB;EDiHjB;EACA;EACA;;;AAGF;EACE,kBC3EW;;;AD8Eb;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA,kBCvIc;EDwId;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA,kBChKiB;;;ADmKnB;EACE;EACA,kBCzHW;;;AD4Hb;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA,OC3IW;ED4IX,kBCzLgB;ED0LhB;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE,kBC1MgB;ED2MhB,OC5Mc;ED6Md;;;AAGF;EACE;EACA;EACA,kBCjNiB;;;ADoNnB;EACE;IACE;;;AAIJ;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AElOF;EACE,ODsBK;ECrBL;EACA;;;ACFA;EACE;;;AAIJ;EACE;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;;AAIJ;EACE;EACA,OFRM;;;AEWR;EACE,OFZM;;;AGpBR;EACE,OHqBM;;;AItBR;EACE,OJgBM;;;AKjBR;EACE;EACA,OLsBI;;;AKnBN;EACE,OLkBI;;;AMxBN;EACE,ONeK;;;AOfL;EACE;EACA;EACA;EACA;EACA;EACA;EACA,kBPmBO;;AOjBP;EACE,kBPQG;EOPH;EACA;;AAGF;EACE,kBPOA;EONA;EACA;;;AAMN;EACE;;;AC1BF;EACE,ORoBO;;;ASrBT;EACE;;;AAGF;EACE,YTiCO;;;AS/BT;EACE;EACA,OTkBS;;;ASfX;EACE,kBTsBS;;;ASnBX;EACE,kBTmBS;ESlBT;;;AAGF;EACE,kBTKS;;;AU3BX;EACE,OViBI;EUhBJ;;;ACFF;EACE,YXqCO;EWpCP;EACA;;;AAGF;EACE,YX6BS;EW5BT;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE","file":"style.css"} \ No newline at end of file