Added a widget to fetch mpv info with socat

index.jsx

@@ -32,6 +32,7 @@ import * as Crypto from "./lib/components/data/crypto.jsx";
 import * as Stock from "./lib/components/data/stock.jsx";
 import * as Music from "./lib/components/data/music.jsx";
 import * as Mpd from "./lib/components/data/mpd.jsx";
+import * as Mpv from "./lib/components/data/mpv.jsx";
 import * as BrowserTrack from "./lib/components/data/browser-track.jsx";
 import * as Specter from "./lib/components/data/specter.jsx";
 import * as Graph from "./lib/components/data/graph.jsx";
@@ -106,6 +107,7 @@ Utils.injectStyles("simple-bar-index-styles", [
   YouTubeMusic.styles,
   Music.styles,
   Mpd.styles,
+  Mpv.styles,
   BrowserTrack.styles,
   Specter.styles,
   Graph.styles,
@@ -199,6 +201,7 @@ function render({ output, error }) {
           <Stock.Widget />
           <Music.Widget />
           <Mpd.Widget />
+          <Mpv.Widget />
           <Weather.Widget />
           <Netstats.Widget />
           <Cpu.Widget />

lib/components/data/mpv.jsx

@@ -0,0 +1,126 @@
+import * as Uebersicht from "uebersicht";
+import * as DataWidget from "./data-widget.jsx";
+import * as DataWidgetLoader from "./data-widget-loader.jsx";
+import * as Icons from "../icons/icons.jsx";
+import useWidgetRefresh from "../../hooks/use-widget-refresh";
+import { useSimpleBarContext } from "../simple-bar-context.jsx";
+import * as Utils from "../../utils";
+
+export { mpvStyles as styles } from "../../styles/components/data/mpv";
+
+const { React } = Uebersicht;
+
+const DEFAULT_REFRESH_FREQUENCY = 5000;
+
+/**
+ * @brief Get the current MPV title using the specified socket path
+ * @param {string} socketPath - Path to the MPV socket
+ * @returns {Promise<string>} The current media title
+ */
+async function getMpvTitle(socketPath) {
+  const command = `
+    SOCKET="${socketPath}"
+    SOCAT="/opt/homebrew/bin/socat"
+    JQ="/opt/homebrew/bin/jq"
+
+    if [ ! -S "$SOCKET" ]; then
+      echo ""
+      exit 0
+    fi
+
+    TITLE=$(echo '{ "command": ["get_property", "media-title"] }' | "$SOCAT" - "$SOCKET" | "$JQ" -r '.data')
+
+    if [ "$TITLE" != "null" ] && [ ! -z "$TITLE" ]; then
+      echo "$TITLE"
+    else
+      echo ""
+    fi
+  `;
+
+  return await Uebersicht.run(command);
+}
+
+export const Widget = React.memo(() => {
+  const { displayIndex, settings } = useSimpleBarContext();
+  const { widgets, mpvWidgetOptions = {} } = settings;
+  const { mpvWidget } = widgets;
+  const { refreshFrequency, socketPath, showOnDisplay = "" } = mpvWidgetOptions;
+
+  const visible =
+    Utils.isVisibleOnDisplay(displayIndex, showOnDisplay) && mpvWidget;
+
+  const refresh = React.useMemo(
+    () =>
+      Utils.getRefreshFrequency(refreshFrequency, DEFAULT_REFRESH_FREQUENCY),
+    [refreshFrequency],
+  );
+
+  const [state, setState] = React.useState("");
+  const [loading, setLoading] = React.useState(visible);
+
+  const getMpvInfo = React.useCallback(async () => {
+    if (!visible) return;
+
+    try {
+      const output = await getMpvTitle(socketPath || "/tmp/mpv.socket");
+      const cleanOutput = Utils.cleanupOutput(output);
+      setState(cleanOutput || "");
+      setLoading(false);
+    } catch (error) {
+      setState("");
+      setLoading(false);
+    }
+  }, [visible, socketPath]);
+
+  useWidgetRefresh(visible, getMpvInfo, refresh);
+
+  if (!visible || !state) return null;
+
+  if (loading) {
+    return <DataWidgetLoader.Widget className="mpv-widget" />;
+  }
+
+  return (
+    <DataWidget.Widget classes="mpv-widget">
+      <div className="mpv-widget__content">
+        <Icons.Music
+          className="mpv-widget__icon"
+          style={{
+            width: "var(--font-size)",
+            height: "var(--font-size)",
+            paddingRight: "5px",
+            fill: "#ffffff",
+            flexShrink: 0,
+            display: "inline-block",
+            alignItems: "center",
+          }}
+        />
+        <span
+          className="mpv-widget__text"
+          style={{
+            fontFamily: "var(--font)",
+            fontSize: "var(--font-size)",
+            whiteSpace: "nowrap",
+            maxWidth: "200px",
+            minWidth: "50px",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            color: "#ffffff",
+            WebkitTextFillColor: "#ffffff",
+            lineHeight: 1,
+            display: "inline-block",
+            opacity: 1,
+            visibility: "visible",
+            zIndex: 3,
+            textShadow: "0px 0px 1px rgba(255,255,255,0.5)",
+            marginTop: "-1px",
+          }}
+        >
+          {state}
+        </span>
+      </div>
+    </DataWidget.Widget>
+  );
+});
+
+Widget.displayName = "Mpv";

lib/settings.js

@@ -279,6 +279,7 @@ export const data = {
   stockWidget: { label: "Stock", type: "checkbox" },
   musicWidget: { label: "Music/iTunes", type: "checkbox" },
   mpdWidget: { label: "MPD state via mpc", type: "checkbox" },
+  mpvWidget: { label: "MPV state via socat", type: "checkbox" },
   browserTrackWidget: { label: "Browser track", type: "checkbox" },
 
   showOnDisplay: {
@@ -525,6 +526,35 @@ export const data = {
     fullWidth: true,
   },
 
+  mpvWidgetOptions: {
+    label: "MPV state",
+    documentation: "/mpv-widget/",
+    infos: [
+      "The mpv should be launched with these flags:",
+      "--input-ipc-server=/tmp/mpv.socket",
+      '--term-playing-msg=\'{"event":"file-loaded","title":"${media-title"}\'',
+      'Example: mpv --input-ipc-server=/tmp/mpv.socket --term-playing-msg=\'{"event":"file-loaded","title":"${media-title}"}\' --no-video --shuffle --loop-playlist "$url"',
+      "The widget will use socat to communicate with MPV socket.",
+    ],
+  },
+  mpvRefreshFrequency: {
+    label: "Refresh frequency (ms)",
+    type: "text",
+    placeholder: "Default: 5000",
+  },
+  mpvSocketPath: {
+    label: "Socket path",
+    type: "text",
+    placeholder: "/tmp/mpv.socket",
+    fullWidth: true,
+  },
+  mpvShowOnDisplay: {
+    label: "Show on display n°",
+    type: "text",
+    placeholder: "example: 1,2 (leave blank for all displays)",
+    fullWidth: true,
+  },
+
   browserTrackWidgetOptions: {
     label: "Browser",
     documentation: "/browser-track/",
@@ -663,6 +693,7 @@ export const defaultSettings = {
     youtubeMusicWidget: false,
     musicWidget: true,
     mpdWidget: false,
+    mpvWidget: false,
     browserTrackWidget: false,
   },
   weatherWidgetOptions: {
@@ -791,6 +822,11 @@ export const defaultSettings = {
     mpdHost: "127.0.0.1",
     mpdFormatString: "%title%[ - %artist%]|[%file%]",
   },
+  mpvWidgetOptions: {
+    refreshFrequency: 5000,
+    showOnDisplay: "",
+    socketPath: "/tmp/mpv.socket",
+  },
   browserTrackWidgetOptions: {
     refreshFrequency: 10000,
     showOnDisplay: "",
@@ -867,7 +903,7 @@ export async function set(newSettings) {
   await saveToConfigFile(settingsWithSchema);
   window.localStorage.setItem(
     SETTINGS_STORAGE_KEY,
-    JSON.stringify(settingsWithSchema)
+    JSON.stringify(settingsWithSchema),
   );
 }
 

lib/styles/components/data/mpv.js

@@ -0,0 +1,40 @@
+// Styles for /lib/components/data/mpv.jsx component
+export const mpvStyles = /* css */ `
+   .simple - bar--data .mpv-widget {
+   position: relative;
+   display: flex;
+   align - items: center;
+   margin: 0 var(--item - gap);
+   padding: 2px var(--item - padding);
+   background - color: rgba(0, 0, 0, 0.9);
+   border - radius: var(--item - radius);
+   user - select: none;
+   cursor: pointer;
+   transition: all 320ms ease;
+   border: 1px solid #666;
+   z - index: 1;
+   height: 18px;
+}
+
+  .simple - bar--data.mpv - widget__content {
+   display: inline - flex;
+   align - items: center;
+   height: 100 %;
+   z - index: 2;
+   gap: 4px;
+   margin - top: -1px;
+}
+
+  .simple - bar--data.mpv - widget: hover.mpv - widget__text {
+   overflow: visible;
+   text - overflow: unset;
+   animation: scroll - text 8s linear infinite;
+}
+
+@keyframes scroll - text {
+   0 % { transform: translateX(0); }
+   45 % { transform: translateX(calc(-100 % + 200px)); }
+   55 % { transform: translateX(calc(-100 % + 200px)); }
+   100 % { transform: translateX(0); }
+}
+`;