From e50f1b378d6df776094f96a9be7cf59c2c669722 Mon Sep 17 00:00:00 2001
From: Eris Lund <38136789+0x5066@users.noreply.github.com>
Date: Sat, 29 Nov 2025 01:49:39 +0100
Subject: [PATCH] Made the sync display actually useful

The information the media controls gives me is limited, so this implementation is the best I got
---
 .../webamp/js/components/MainWindow/index.tsx |  7 ++----
 .../components/MainWindow/work-indicator.tsx  | 24 +++++++++++++++++++
 2 files changed, 26 insertions(+), 5 deletions(-)
 create mode 100644 packages/webamp/js/components/MainWindow/work-indicator.tsx

diff --git a/packages/webamp/js/components/MainWindow/index.tsx b/packages/webamp/js/components/MainWindow/index.tsx
index b0ad7fe5a..474a5d8bf 100644
--- a/packages/webamp/js/components/MainWindow/index.tsx
+++ b/packages/webamp/js/components/MainWindow/index.tsx
@@ -19,6 +19,7 @@ import EqToggleButton from "./EqToggleButton";
 import PlaylistToggleButton from "./PlaylistToggleButton";
 import Kbps from "./Kbps";
 import Khz from "./Khz";
+import WorkIndicator from "./work-indicator"
 import Marquee from "./Marquee";
 import MonoStereo from "./MonoStereo";
 import Position from "./Position";
@@ -99,11 +100,7 @@ const MainWindow = React.memo(({ analyser, filePickers }: Props) => {
         </div>
         <div className="webamp-status">
           <ClutterBar />
-          {!working && <div id="play-pause" />}
-          <div
-            id="work-indicator"
-            className={classnames({ selected: working })}
-          />
+          <WorkIndicator />
           <Time />
         </div>
         <Vis analyser={analyser} />
diff --git a/packages/webamp/js/components/MainWindow/work-indicator.tsx b/packages/webamp/js/components/MainWindow/work-indicator.tsx
new file mode 100644
index 000000000..edbf6fbca
--- /dev/null
+++ b/packages/webamp/js/components/MainWindow/work-indicator.tsx
@@ -0,0 +1,24 @@
+import * as React from "react";
+import classnames from "classnames";
+import { useTypedSelector } from "../../hooks";
+import * as Selectors from "../../selectors";
+import { MEDIA_STATUS } from "../../constants";
+
+export default function WorkIndicator() {
+    const kbps = useTypedSelector(Selectors.getKbps);
+    const khz = useTypedSelector(Selectors.getKhz);
+    const mediaStatus = useTypedSelector(Selectors.getMediaStatus);
+
+    const working =
+    mediaStatus === MEDIA_STATUS.PLAYING &&
+    !(kbps != null &&
+    khz != null &&
+    kbps.trim() !== "0");
+
+    return (
+        <div
+        id="work-indicator"
+        className={classnames({ selected: working })}
+        />
+    );
+}