From 0101f242e6dba42685ef363f9f31ba6c3d154912 Mon Sep 17 00:00:00 2001
From: Jas Singh <jaskiratpal.singh@outlook.com>
Date: Fri, 20 Dec 2024 21:17:06 -0800
Subject: [PATCH] Fix service based variables. (#565)

---
 src/components/bar/modules/media/index.tsx         |  2 ++
 .../shortcuts/buttons/RecordingButton.tsx          | 14 ++++++++------
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/components/bar/modules/media/index.tsx b/src/components/bar/modules/media/index.tsx
index aaa1246..8c79c40 100644
--- a/src/components/bar/modules/media/index.tsx
+++ b/src/components/bar/modules/media/index.tsx
@@ -15,6 +15,8 @@ const { truncation, truncation_size, show_label, show_active_only, rightClick, m
     options.bar.media;
 
 const Media = (): BarBoxChild => {
+    activePlayer.set(mprisService.get_players()[0]);
+
     const isVis = Variable(!show_active_only.get());
 
     show_active_only.subscribe(() => {
diff --git a/src/components/menus/dashboard/shortcuts/buttons/RecordingButton.tsx b/src/components/menus/dashboard/shortcuts/buttons/RecordingButton.tsx
index 91dd21d..92e3397 100644
--- a/src/components/menus/dashboard/shortcuts/buttons/RecordingButton.tsx
+++ b/src/components/menus/dashboard/shortcuts/buttons/RecordingButton.tsx
@@ -4,15 +4,17 @@ import Menu from 'src/components/shared/Menu';
 import MenuItem from 'src/components/shared/MenuItem';
 import { hyprlandService } from 'src/lib/constants/services';
 import { isRecording } from '../helpers';
-
-const monitorList = Variable(hyprlandService?.monitors || []);
-
-hyprlandService.connect('monitor-added', () => monitorList.set(hyprlandService.monitors));
-hyprlandService.connect('monitor-removed', () => monitorList.set(hyprlandService.monitors));
+import AstalHyprland from 'gi://AstalHyprland?version=0.1';
 
 const MonitorListDropdown = (): JSX.Element => {
+    const monitorList: Variable<AstalHyprland.Monitor[]> = Variable([]);
+
+    const monitorBinding = Variable.derive([bind(hyprlandService, 'monitors')], () =>
+        monitorList.set(hyprlandService.monitors),
+    );
+
     return (
-        <Menu className={'dropdown recording'} halign={Gtk.Align.FILL} hexpand>
+        <Menu className={'dropdown recording'} halign={Gtk.Align.FILL} onDestroy={() => monitorBinding.drop()} hexpand>
             {bind(monitorList).as((monitors) => {
                 return monitors.map((monitor) => (
                     <MenuItem