users/ryan/modules/simple-bar/simple-bar-source/lib/components/data/browser-track.jsx

63e15655ee66d63088bc907072616b988fee4351 · 4.2 KB · 147 lines raw

1 import * as Uebersicht from "uebersicht";
2 import * as DataWidget from "./data-widget.jsx";
3 import * as DataWidgetLoader from "./data-widget-loader.jsx";
4 import * as Icons from "../icons/icons.jsx";
5 import { SuspenseIcon } from "../icons/icon.jsx";
6 import useWidgetRefresh from "../../hooks/use-widget-refresh";
7 import useServerSocket from "../../hooks/use-server-socket";
8 import { useSimpleBarContext } from "../simple-bar-context.jsx";
9 import * as Utils from "../../utils";
10
11 export { browserTrackStyles as styles } from "../../styles/components/data/browser-track";
12
13 const { React } = Uebersicht;
14
15 const DEFAULT_REFRESH_FREQUENCY = 10000;
16
17 /**
18 * BrowserTrack Widget component
19 * @returns {JSX.Element|null} The BrowserTrack widget
20 */
21 export const Widget = React.memo(() => {
22 const { displayIndex, settings } = useSimpleBarContext();
23 const { widgets, browserTrackWidgetOptions } = settings;
24 const { browserTrackWidget } = widgets;
25 const { refreshFrequency, showSpecter, showOnDisplay, showIcon } =
26 browserTrackWidgetOptions;
27 const visible =
28 Utils.isVisibleOnDisplay(displayIndex, showOnDisplay) && browserTrackWidget;
29
30 const refresh = React.useMemo(
31 () =>
32 Utils.getRefreshFrequency(refreshFrequency, DEFAULT_REFRESH_FREQUENCY),
33 [refreshFrequency],
34 );
35
36 const ref = React.useRef();
37
38 const [state, setState] = React.useState();
39 const [loading, setLoading] = React.useState(visible);
40
41 /**
42 * Resets the widget state
43 */
44 const resetWidget = () => {
45 setState(undefined);
46 setLoading(false);
47 };
48
49 /**
50 * Fetches the current browser track information
51 */
52 const getBrowserTrack = React.useCallback(async () => {
53 if (!visible) return;
54 const [firefoxStatus, firefoxDevStatus] = await Promise.all([
55 Utils.cachedRun(
56 `pgrep -xq 'Firefox' && echo "true" || echo "false"`,
57 refresh,
58 ),
59 Utils.cachedRun(
60 `pgrep -xq 'Firefox Developer Edition' && echo "true" || echo "false"`,
61 refresh,
62 ),
63 ]);
64 const isFirefoxDevRunning =
65 Utils.cleanupOutput(firefoxDevStatus) === "true";
66 const isFirefoxRunning = Utils.cleanupOutput(firefoxStatus) === "true";
67 const scriptNamePrefix = isFirefoxDevRunning
68 ? "firefox-dev"
69 : isFirefoxRunning
70 ? "firefox"
71 : "browser";
72
73 const [browserTrackOutput, spotifyStatus] = await Promise.all([
74 Utils.cachedRun(
75 `osascript ./simple-bar/lib/scripts/${scriptNamePrefix}-audio.applescript 2>&1`,
76 refresh,
77 ),
78 Utils.cachedRun(
79 `pgrep -fq '[S]potify Helper' && echo "true" || echo "false"`,
80 refresh,
81 ),
82 ]);
83 const browserTrack = JSON.parse(browserTrackOutput);
84 setState({
85 ...browserTrack,
86 isSpotifyRunning: Utils.cleanupOutput(spotifyStatus) === "true",
87 });
88 setLoading(false);
89 }, [visible, refresh]);
90
91 useServerSocket(
92 "browser-track",
93 visible,
94 getBrowserTrack,
95 resetWidget,
96 setLoading,
97 );
98 useWidgetRefresh(visible, getBrowserTrack, refresh);
99
100 if (loading) return <DataWidgetLoader.Widget className="browser-track" />;
101 if (!state) return null;
102 const { browser, title, isSpotifyRunning } = state;
103
104 if (!browser?.length || !title?.length || isSpotifyRunning) return null;
105
106 /**
107 * Icon component for displaying browser and playing icons
108 * @returns {JSX.Element} The icon component
109 */
110 const Icon = () => {
111 const BrowserIcon = getIcon(browser);
112 return (
113 <div className="browser-track__icons">
114 <SuspenseIcon>
115 <BrowserIcon />
116 <Icons.Playing />
117 </SuspenseIcon>
118 </div>
119 );
120 };
121
122 return (
123 <DataWidget.Widget
124 ref={ref}
125 classes="browser-track"
126 Icon={showIcon ? Icon : null}
127 showSpecter={showSpecter}
128 >
129 {title}
130 </DataWidget.Widget>
131 );
132 });
133
134 Widget.displayName = "BrowserTrack";
135
136 /**
137 * Returns the appropriate icon component based on the browser name
138 * @param {string} browser - The name of the browser
139 * @returns {JSX.Element} The icon component for the browser
140 */
141 function getIcon(browser) {
142 if (browser === "chrome") return Icons.GoogleChrome;
143 if (browser === "brave") return Icons.BraveBrowser;
144 if (browser === "safari") return Icons.Safari;
145 if (browser === "firefox") return Icons.Firefox;
146 return Icons.Default;
147 }