Fixed the auto-hide functionality for the media bar module. (#588)

src/components/bar/modules/media/index.tsx

@@ -14,15 +14,15 @@ import { activePlayer, mediaAlbum, mediaArtist, mediaTitle } from 'src/globals/m
 const { truncation, truncation_size, show_label, show_active_only, rightClick, middleClick, format } =
     options.bar.media;
 
+const isVis = Variable(!show_active_only.get());
+
+Variable.derive([bind(show_active_only), bind(mprisService, 'players')], (showActive, players) => {
+    isVis.set(!showActive || players?.length > 0);
+});
+
 const Media = (): BarBoxChild => {
     activePlayer.set(mprisService.get_players()[0]);
 
-    const isVis = Variable(!show_active_only.get());
-
-    show_active_only.subscribe(() => {
-        isVis.set(!show_active_only.get() || mprisService.get_players().length > 0);
-    });
-
     const songIcon = Variable('');
 
     const mediaLabel = Variable.derive(
@@ -55,7 +55,6 @@ const Media = (): BarBoxChild => {
         <box
             className={componentClassName()}
             onDestroy={() => {
-                isVis.drop();
                 songIcon.drop();
                 mediaLabel.drop();
                 componentClassName.drop();

src/components/bar/modules/network/helpers.ts

@@ -5,8 +5,8 @@ import { networkService } from 'src/lib/constants/services';
 export const wiredIcon: Variable<string> = Variable('');
 export const wirelessIcon: Variable<string> = Variable('');
 
-let wiredIconBinding: Variable<void>;
-let wirelessIconBinding: Variable<void>;
+let wiredIconBinding: Variable<void> | undefined;
+let wirelessIconBinding: Variable<void> | undefined;
 
 /**
  * Handles the wired network icon binding.
@@ -15,10 +15,8 @@ let wirelessIconBinding: Variable<void>;
  * then checks if the wired network service is available. If available, it binds the icon name to the `wiredIcon` variable.
  */
 const handleWiredIcon = (): void => {
-    if (wiredIconBinding) {
-        wiredIconBinding();
-        wiredIconBinding.drop();
-    }
+    wiredIconBinding?.drop();
+    wiredIconBinding = undefined;
 
     if (!networkService.wired) {
         return;
@@ -36,10 +34,8 @@ const handleWiredIcon = (): void => {
  * then checks if the wireless network service is available. If available, it binds the icon name to the `wirelessIcon` variable.
  */
 const handleWirelessIcon = (): void => {
-    if (wirelessIconBinding) {
-        wirelessIconBinding();
-        wirelessIconBinding.drop();
-    }
+    wirelessIconBinding?.drop();
+    wirelessIconBinding = undefined;
 
     if (!networkService.wifi) {
         return;