diff options
Diffstat (limited to 'examples/js/simple-bar')
| -rw-r--r-- | examples/js/simple-bar/README.md | 2 | ||||
| -rw-r--r-- | examples/js/simple-bar/widget/Bar.tsx | 34 |
2 files changed, 21 insertions, 15 deletions
diff --git a/examples/js/simple-bar/README.md b/examples/js/simple-bar/README.md index 3a4316e..8f733da 100644 --- a/examples/js/simple-bar/README.md +++ b/examples/js/simple-bar/README.md @@ -1,6 +1,6 @@ # Simple Bar Example - + A simple bar for Hyprland using diff --git a/examples/js/simple-bar/widget/Bar.tsx b/examples/js/simple-bar/widget/Bar.tsx index d669fd5..492ab1d 100644 --- a/examples/js/simple-bar/widget/Bar.tsx +++ b/examples/js/simple-bar/widget/Bar.tsx @@ -22,7 +22,7 @@ function SysTray() { onClickRelease={self => { menu?.popup_at_widget(self, Gdk.Gravity.SOUTH, Gdk.Gravity.NORTH, null) }}> - <icon g_icon={bind(item, "gicon")}/> + <icon gIcon={bind(item, "gicon")} /> </button> }))} </box> @@ -64,21 +64,27 @@ function BatteryLevel() { } function Media() { - const player = Mpris.Player.new("spotify") + const mpris = Mpris.get_default() return <box className="Media"> - <box - className="Cover" - valign={Gtk.Align.CENTER} - css={bind(player, "coverArt").as(cover => - `background-image: url('${cover}');` - )} - /> - <label - label={bind(player, "title").as(() => - `${player.title} - ${player.artist}` - )} - /> + {bind(mpris, "players").as(ps => ps[0] ? ( + <box> + <box + className="Cover" + valign={Gtk.Align.CENTER} + css={bind(ps[0], "coverArt").as(cover => + `background-image: url('${cover}');` + )} + /> + <label + label={bind(ps[0], "title").as(() => + `${ps[0].title} - ${ps[0].artist}` + )} + /> + </box> + ) : ( + "Nothing Playing" + ))} </box> } |