From 1f047fb4415aaef4b904455bb4562940fdfa57b9 Mon Sep 17 00:00:00 2001 From: Mihai Fufezan Date: Sun, 10 Dec 2023 23:56:19 +0200 Subject: [PATCH] ags/music, ags/bar/music: don't rely on variables --- home/programs/ags/windows/bar/main.js | 11 +- .../programs/ags/windows/bar/modules/music.js | 175 +++++++++--------- home/programs/ags/windows/music/controls.js | 55 +++--- home/programs/ags/windows/music/cover.js | 18 +- home/programs/ags/windows/music/main.js | 75 ++++---- .../programs/ags/windows/music/player_info.js | 43 ++--- home/programs/ags/windows/music/time_info.js | 124 +++++++------ .../ags/windows/music/title_artists.js | 62 ++++--- 8 files changed, 290 insertions(+), 273 deletions(-) diff --git a/home/programs/ags/windows/bar/main.js b/home/programs/ags/windows/bar/main.js index 9c6e279b..f3e94cd2 100644 --- a/home/programs/ags/windows/bar/main.js +++ b/home/programs/ags/windows/bar/main.js @@ -5,7 +5,8 @@ import { Net } from "./modules/net.js"; import { BluetoothModule } from "./modules/bluetooth.js"; import { SystemInfo } from "./modules/system_info.js"; import { Workspaces } from "./modules/workspaces.js"; -import { Music } from "./modules/music.js"; +import Music from "./modules/music.js"; +import Gtk from "gi://Gtk?version=3.0"; const Start = Widget.Box({ children: [ @@ -15,12 +16,16 @@ const Start = Widget.Box({ }); const Center = Widget.Box({ - children: [Music], + children: [ + Music, + ], }); const End = Widget.Box({ + hexpand: true, + halign: Gtk.Align.END, + children: [ - Widget.Box({ hexpand: true }), // Tray, SystemInfo, Net, diff --git a/home/programs/ags/windows/bar/modules/music.js b/home/programs/ags/windows/bar/modules/music.js index c2d176f2..3e88b6ed 100644 --- a/home/programs/ags/windows/bar/modules/music.js +++ b/home/programs/ags/windows/bar/modules/music.js @@ -1,75 +1,89 @@ -import { - Mpris, - musicVisible, - player, - Variable, - Widget, -} from "../../../imports.js"; +import { Mpris, musicVisible, Variable, Widget } from "../../../imports.js"; +import Icons from "../../../icons.js"; const revealControls = Variable(false); -setPlayer(); +const Cover = (player) => + Widget.Box({ + className: "cover", -const Cover = Widget.Box({ - className: "cover", - - connections: [ - [ - Mpris, - ( - self, - ) => self.css = `background-image: url('${player.value?.cover_path}');`, + connections: [ + [ + Mpris, + (self) => + self.css = `background-image: url('${player.cover_path ?? ""}');`, + ], ], - ], -}); + }); -const Title = Widget.Label({ - className: "title module", +const Title = (player) => + Widget.Label({ + className: "title module", - connections: [ - [Mpris, (self) => self.label = player.value?.track_title ?? ""], - ], -}); + connections: [ + [Mpris, (self) => self.label = player.track_title ?? ""], + ], + }); -export const Controls = Widget.CenterBox({ - className: "controls", +export const Controls = (player) => + Widget.CenterBox({ + className: "controls", - startWidget: Widget.Button({ - onHover: () => revealControls.value = true, - onHoverLost: () => revealControls.value = false, - onClicked: () => player.value?.previous(), - child: Widget.Icon("media-skip-backward"), - }), + startWidget: Widget.Button({ + onHover: () => revealControls.value = true, + onHoverLost: () => revealControls.value = false, + onClicked: () => player.previous(), + child: Widget.Icon(Icons.media.previous), + }), - centerWidget: Widget.Button({ - onHover: () => revealControls.value = true, - onHoverLost: () => revealControls.value = false, - onClicked: () => player.value?.playPause(), + centerWidget: Widget.Button({ + onHover: () => revealControls.value = true, + onHoverLost: () => revealControls.value = false, + onClicked: () => player.playPause(), - child: Widget.Icon({ - connections: [ - [ - Mpris, - (self) => { - self.icon = "media-playback-" + - (player.value?.playBackStatus == "Playing" ? "pause" : "start") + - "-symbolic"; - }, - "changed", + child: Widget.Icon({ + connections: [ + [ + Mpris, + (self) => { + const state = player.playBackStatus == "Playing" + ? "pause" + : "play"; + self.icon = Icons.media[state]; + }, + "changed", + ], ], - ], + }), }), - }), - endWidget: Widget.Button({ - onHover: () => revealControls.value = true, - onHoverLost: () => revealControls.value = false, - onClicked: () => player.value?.next(), - child: Widget.Icon("media-skip-forward"), - }), -}); + endWidget: Widget.Button({ + onHover: () => revealControls.value = true, + onHoverLost: () => revealControls.value = false, + onClicked: () => player.next(), + child: Widget.Icon(Icons.media.next), + }), + }); +export const Revealer = (player) => + Widget.Revealer({ + revealChild: false, + transition: "slide_right", + child: Controls(player), -export const Music = Widget.EventBox({ + connections: [ + [revealControls, (self) => self.revealChild = revealControls.value], + ], + }); + +export const MusicBox = (player) => + Widget.Box({ + children: [ + Cover(player), + Title(player), + ], + }); + +export default Widget.EventBox({ onPrimaryClick: () => musicVisible.value = !musicVisible.value, onHover: () => revealControls.value = true, onHoverLost: () => revealControls.value = false, @@ -77,43 +91,20 @@ export const Music = Widget.EventBox({ child: Widget.Box({ className: "music", - children: [ - Widget.Box({ - children: [Cover, Title], - }), - Widget.Revealer({ - revealChild: false, - transition: "slide_right", - child: Controls, - - connections: [ - [revealControls, (self) => self.revealChild = revealControls.value], - ], - }), - ], - - connections: [ - [ - Mpris, - (_, busName) => { - // don't replace the same player - if (player.getValue() == null || player?.value.busName != busName) { - player.value = Mpris.getPlayer(busName); - } - }, - "player-changed", - ], - [ - Mpris, - // music module is visible, as we have a player - (self, _) => self.visible = true, - "player-added", - ], + binds: [ + ["children", Mpris, "players", (players) => { + if (players.length > 0) { + [ + Revealer(players[0]), + MusicBox(players[0]), + ]; + } + }], [ + "visible", Mpris, - // if we have no players, make the module invisible - (self, _) => self.visible = Mpris.players.length > 0 ? true : false, - "player-closed", + "players", + (p) => p.length > 0, ], ], }), diff --git a/home/programs/ags/windows/music/controls.js b/home/programs/ags/windows/music/controls.js index 3036d8e2..0e624170 100644 --- a/home/programs/ags/windows/music/controls.js +++ b/home/programs/ags/windows/music/controls.js @@ -2,36 +2,37 @@ import { Mpris, Widget } from "../../imports.js"; import Gtk from "gi://Gtk?version=3.0"; import Icons from "../../icons.js"; -export default Widget.CenterBox({ - className: "controls", - halign: Gtk.Align.CENTER, +export default (player) => + Widget.CenterBox({ + className: "controls", + halign: Gtk.Align.CENTER, - startWidget: Widget.Button({ - onClicked: () => player.value?.previous(), - child: Widget.Icon(Icons.media.previous), - }), + startWidget: Widget.Button({ + onClicked: () => player.previous(), + child: Widget.Icon(Icons.media.previous), + }), - centerWidget: Widget.Button({ - onClicked: () => player.value?.playPause(), + centerWidget: Widget.Button({ + onClicked: () => player.playPause(), - child: Widget.Icon({ - connections: [ - [ - Mpris, - (self) => { - const state = player.value?.playBackStatus == "Playing" - ? "pause" - : "play"; - self.icon = Icons.media[state]; - }, - "changed", + child: Widget.Icon({ + connections: [ + [ + Mpris, + (self) => { + const state = player.playBackStatus == "Playing" + ? "pause" + : "play"; + self.icon = Icons.media[state]; + }, + "changed", + ], ], - ], + }), }), - }), - endWidget: Widget.Button({ - onClicked: () => player.value?.next(), - child: Widget.Icon(Icons.media.next), - }), -}); + endWidget: Widget.Button({ + onClicked: () => player.next(), + child: Widget.Icon(Icons.media.next), + }), + }); diff --git a/home/programs/ags/windows/music/cover.js b/home/programs/ags/windows/music/cover.js index 2a3f9ab5..6edb27b3 100644 --- a/home/programs/ags/windows/music/cover.js +++ b/home/programs/ags/windows/music/cover.js @@ -1,10 +1,12 @@ import { Mpris, Widget } from "../../imports.js"; -export default Widget.Box({ - className: "cover", - connections: [[ - Mpris, - (self) => self.css = `background-image: url('${player.value?.cover_path}')`, - "changed", - ]], -}); +export default (player) => + Widget.Box({ + className: "cover", + connections: [[ + Mpris, + (self) => + self.css = `background-image: url('${player.cover_path ?? ""}')`, + "changed", + ]], + }); diff --git a/home/programs/ags/windows/music/main.js b/home/programs/ags/windows/music/main.js index 698f469c..f88523c8 100644 --- a/home/programs/ags/windows/music/main.js +++ b/home/programs/ags/windows/music/main.js @@ -1,4 +1,4 @@ -import { Utils, Widget } from "../../imports.js"; +import { Mpris, musicVisible, Utils, Widget } from "../../imports.js"; import GLib from "gi://GLib"; import Cover from "./cover.js"; @@ -10,8 +10,8 @@ import PlayerInfo from "./player_info.js"; const MEDIA_CACHE_PATH = Utils.CACHE_DIR + "/media"; const blurredPath = MEDIA_CACHE_PATH + "/blurred"; -const generateBackground = (box) => { - const url = player.value.cover_path; +const generateBackground = (box, cover_path) => { + const url = cover_path; if (!url) return; const blurred = blurredPath + @@ -27,37 +27,39 @@ const generateBackground = (box) => { .catch(print); }; -const Info = Widget.Box({ - className: "info", - vertical: true, - vexpand: false, - hexpand: false, - homogeneous: true, +const Info = (player) => + Widget.Box({ + className: "info", + vertical: true, + vexpand: false, + hexpand: false, + homogeneous: true, - children: [ - PlayerInfo, - Title, - Artists, - Controls, - TimeInfo, - ], -}); + children: [ + PlayerInfo(player), + Title(player), + Artists(player), + Controls(player), + TimeInfo(player), + ], + }); -const MusicBox = Widget.Box({ - className: "music window", - children: [ - Cover, - Info, - ], +const MusicBox = (player) => + Widget.Box({ + className: "music window", + children: [ + Cover(player), + Info(player), + ], - connections: [ - [ - player.value, - generateBackground, - "notify::cover-path", + connections: [ + [ + player, + generateBackground, + "notify::cover-path", + ], ], - ], -}); + }); export const Music = Widget.Window({ monitor: 0, @@ -65,8 +67,17 @@ export const Music = Widget.Window({ anchor: ["top"], name: "music", - child: MusicBox, - binds: [["visible", musicVisible]], + binds: [ + ["visible", musicVisible], + [ + "child", + Mpris, + "players", + (players) => { + if (players.length > 0) MusicBox(players[0]); + }, + ], + ], }); export default Music; diff --git a/home/programs/ags/windows/music/player_info.js b/home/programs/ags/windows/music/player_info.js index 883aa3a0..14bdabaa 100644 --- a/home/programs/ags/windows/music/player_info.js +++ b/home/programs/ags/windows/music/player_info.js @@ -2,26 +2,27 @@ import { Mpris, Utils, Widget } from "../../imports.js"; import Gtk from "gi://Gtk?version=3.0"; import Icons from "../../icons.js"; -export default Widget.Box({ - className: "player-info", - vexpand: true, - valign: Gtk.Align.START, +export default (player) => + Widget.Box({ + className: "player-info", + vexpand: true, + valign: Gtk.Align.START, - children: [ - Widget.Icon({ - hexpand: true, - halign: Gtk.Align.END, - className: "player-icon", - tooltipText: player.value?.identity ?? "", + children: [ + Widget.Icon({ + hexpand: true, + halign: Gtk.Align.END, + className: "player-icon", + tooltipText: player.identity ?? "", - connections: [[ - Mpris, - (self) => - self.icon = Utils.lookUpIcon(player.value?.entry) - ? player.value?.entry - : Icons.media.player, - "player-changed", - ]], - }), - ], -}); + connections: [[ + Mpris, + (self) => + self.icon = Utils.lookUpIcon(player.entry) + ? player.entry + : Icons.media.player, + "player-changed", + ]], + }), + ], + }); diff --git a/home/programs/ags/windows/music/time_info.js b/home/programs/ags/windows/music/time_info.js index 8c44eac1..9908364e 100644 --- a/home/programs/ags/windows/music/time_info.js +++ b/home/programs/ags/windows/music/time_info.js @@ -8,74 +8,78 @@ function lengthStr(length) { return `${min}:${sec0}${sec}`; } -export const PositionLabel = Widget.Label({ - className: "position", - hexpand: true, - xalign: 0, +export const PositionLabel = (player) => + Widget.Label({ + className: "position", + hexpand: true, + xalign: 0, - properties: [["update", (label, time) => { - player.value.length > 0 - ? label.label = lengthStr(time || player.value.position) - : label.visible = !!player.value; - }]], + properties: [["update", (label, time) => { + player.length > 0 + ? label.label = lengthStr(time || player.position) + : label.visible = !!player; + }]], - connections: [ - [player.value, (l, time) => l._update(l, time), "position"], - [1000, (l) => l._update(l)], - ], -}); + connections: [ + [player, (l, time) => l._update(l, time), "position"], + [1000, (l) => l._update(l)], + ], + }); -export const LengthLabel = Widget.Label({ - className: "length", - hexpand: true, - xalign: 1, +export const LengthLabel = (player) => + Widget.Label({ + className: "length", + hexpand: true, + xalign: 1, - connections: [[player.value, (label) => { - player.value.length > 0 - ? label.label = lengthStr(player.value.length) - : label.visible = !!player.value; - }]], -}); + connections: [[player, (label) => { + player.length > 0 + ? label.label = lengthStr(player.length) + : label.visible = !!player; + }]], + }); -export const Position = Widget.Slider({ - className: "position", - draw_value: false, +export const Position = (player) => + Widget.Slider({ + className: "position", + draw_value: false, - on_change: ({ value }) => { - player.value.position = player.value.length * value; - }, + on_change: ({ value }) => { + player.position = player.length * value; + }, - properties: [["update", (slider) => { - if (slider.dragging) { - return; - } + properties: [["update", (slider) => { + if (slider.dragging) { + return; + } - slider.visible = player.value.length > 0; - if (player.value.length > 0) { - slider.value = player.value.position / player.value.length; - } - }]], + slider.visible = player.length > 0; + if (player.length > 0) { + slider.value = player.position / player.length; + } + }]], - connections: [ - [player.value, (self) => self._update(self)], - [player.value, (self) => self._update(self), "position"], - [1000, (self) => self._update(self)], - ], -}); + connections: [ + [player, (self) => self._update(self)], + [player, (self) => self._update(self), "position"], + [1000, (self) => self._update(self)], + ], + }); -export default Widget.Box({ - vertical: true, - vexpand: true, - valign: Gtk.Align.END, +export default (player) => + Widget.Box({ + vertical: true, + vexpand: true, + valign: Gtk.Align.END, - children: [ - Widget.Box({ - hexpand: true, - children: [ - PositionLabel, - LengthLabel, - ], - }), - Position, - ], -}); + children: [ + Widget.Box({ + hexpand: true, + children: [ + PositionLabel(player), + LengthLabel(player), + ], + }), + Position(player), + ], + }); diff --git a/home/programs/ags/windows/music/title_artists.js b/home/programs/ags/windows/music/title_artists.js index d9e1bf69..eaa63ce0 100644 --- a/home/programs/ags/windows/music/title_artists.js +++ b/home/programs/ags/windows/music/title_artists.js @@ -1,38 +1,40 @@ import { Mpris, Widget } from "../../imports.js"; -export const Title = Widget.Scrollable({ - className: "title", - vscroll: "never", - hscroll: "automatic", - - child: Widget.Label({ +export const Title = (player) => + Widget.Scrollable({ className: "title", - label: "Nothing playing", + vscroll: "never", + hscroll: "automatic", - connections: [ - [ - Mpris, - (self) => self.label = player.value?.track_title ?? "Nothing playing", - "changed", - ], - ], - }), -}); + child: Widget.Label({ + className: "title", + label: "Nothing playing", -export const Artists = Widget.Scrollable({ - className: "artists", - vscroll: "never", - hscroll: "automatic", + connections: [ + [ + Mpris, + (self) => self.label = player.track_title ?? "Nothing playing", + "changed", + ], + ], + }), + }); - child: Widget.Label({ +export const Artists = (player) => + Widget.Scrollable({ className: "artists", + vscroll: "never", + hscroll: "automatic", + + child: Widget.Label({ + className: "artists", - connections: [[ - Mpris, - (self) => - self.label = player.value?.track_artists.join(", ") ?? - "Nothing playing", - "changed", - ]], - }), -}); + connections: [[ + Mpris, + (self) => + self.label = player.track_artists.join(", ") ?? + "Nothing playing", + "changed", + ]], + }), + });