@naxodev/opencode-music-player 0.5.1 → 0.5.3

package/dist/index.js

@@ -32,6 +32,14 @@ var CONVERSION_TIMEOUT_MS = 3000;
 function imageDimensionsAreSafe(width, height) {
   return Number.isInteger(width) && Number.isInteger(height) && width > 0 && height > 0 && width <= MAX_IMAGE_DIMENSION && height <= MAX_IMAGE_DIMENSION && width * height <= MAX_IMAGE_PIXELS;
 }
+function pngDimensions(base64) {
+  const header = Buffer.from(base64.slice(0, 44), "base64");
+  if (header.length < 24 || header.subarray(0, 8).toString("hex") !== "89504e470d0a1a0a" || header.readUInt32BE(8) !== 13 || header.toString("ascii", 12, 16) !== "IHDR")
+    return null;
+  const width = header.readUInt32BE(16);
+  const height = header.readUInt32BE(20);
+  return imageDimensionsAreSafe(width, height) ? { width, height } : null;
+}
 async function runCommandWithTimeout(command, timeoutMs) {
   const proc = Bun.spawn(command, { stdout: "pipe", stderr: "ignore" });
   let timedOut = false;
@@ -54,7 +62,7 @@ function dimensionsFromSips(output) {
   const height = Number(output.match(/pixelHeight:\s*(\d+)/)?.[1]);
   return imageDimensionsAreSafe(width, height) ? { width, height } : null;
 }
-async function squarePng(bytes, size) {
+async function fitPng(bytes, size) {
   if (bytes.byteLength === 0 || bytes.byteLength > MAX_ARTWORK_BYTES)
     return null;
   const dir = await mkdtemp(join(tmpdir(), "opencode-music-art-"));
@@ -63,14 +71,18 @@ async function squarePng(bytes, size) {
   try {
     await Bun.write(input, bytes);
     const inspected = await runCommandWithTimeout(["sips", "-g", "pixelWidth", "-g", "pixelHeight", input], CONVERSION_TIMEOUT_MS);
-    if (inspected.timed_out || inspected.code !== 0 || !dimensionsFromSips(inspected.out)) {
+    const dimensions = dimensionsFromSips(inspected.out);
+    if (inspected.timed_out || inspected.code !== 0 || !dimensions) {
       return null;
     }
+    const scale = size / Math.max(dimensions.width, dimensions.height);
+    const width = Math.max(1, Math.round(dimensions.width * scale));
+    const height = Math.max(1, Math.round(dimensions.height * scale));
     const converted = await runCommandWithTimeout([
       "sips",
       "-z",
-      String(size),
-      String(size),
+      String(height),
+      String(width),
       "-s",
       "format",
       "png",
@@ -134,8 +146,8 @@ async function resolveArtworkDetails(id, target, nativeBase64, legacyId = id, fe
   }
   for (const bytes of candidates) {
     try {
-      const nativePng = await squarePng(bytes, 300);
-      const thumbnail = nativePng ? await squarePng(nativePng, 24) : null;
+      const nativePng = await fitPng(bytes, 300);
+      const thumbnail = nativePng ? await fitPng(nativePng, 24) : null;
       if (nativePng && thumbnail) {
         return {
           artwork: {
@@ -162,8 +174,8 @@ async function resolveArtworkDetails(id, target, nativeBase64, legacyId = id, fe
     return { artwork: null, duration_ms: catalog.duration_ms };
   }
   try {
-    const nativePng = await squarePng(catalog.bytes, 300);
-    const thumbnail = nativePng ? await squarePng(nativePng, 24) : null;
+    const nativePng = await fitPng(catalog.bytes, 300);
+    const thumbnail = nativePng ? await fitPng(nativePng, 24) : null;
     if (!nativePng || !thumbnail) {
       return { artwork: null, duration_ms: catalog.duration_ms };
     }
@@ -709,7 +721,7 @@ import { use as _$use3 } from "@opentui/solid";
 import { setProp as _$setProp2 } from "@opentui/solid";
 import { createElement as _$createElement3 } from "@opentui/solid";
 import { createComponent as _$createComponent2 } from "@opentui/solid";
-import { Show, createEffect, createMemo, createSignal, onCleanup as onCleanup3, onMount as onMount3 } from "solid-js";
+import { Show as Show2, createEffect, createMemo as createMemo2, createSignal as createSignal2, onCleanup as onCleanup3, onMount as onMount3 } from "solid-js";
 import { MouseButton } from "@opentui/core";
 
 // artwork.tsx
@@ -721,9 +733,49 @@ import { createComponent as _$createComponent } from "@opentui/solid";
 import { setProp as _$setProp } from "@opentui/solid";
 import { use as _$use } from "@opentui/solid";
 import { createElement as _$createElement } from "@opentui/solid";
-import { For, onCleanup, onMount } from "solid-js";
+import { For, Show, createMemo, createSignal, onCleanup, onMount } from "solid-js";
 
 // artwork-placement.ts
+function fitNativeArtworkGeometry(slot, image, cell) {
+  if ([
+    slot.width,
+    slot.height,
+    image.width,
+    image.height,
+    cell.width,
+    cell.height
+  ].some((value) => !Number.isFinite(value) || value <= 0))
+    return null;
+  const width = Math.floor(slot.width);
+  const height = Math.floor(slot.height);
+  if (width < 1 || height < 1)
+    return null;
+  const pixelWidth = width * cell.width;
+  const pixelHeight = height * cell.height;
+  const aspect = image.width / image.height;
+  if (pixelWidth / aspect <= pixelHeight) {
+    const displayedHeight = Math.round(pixelWidth / aspect);
+    if (displayedHeight < 1)
+      return null;
+    const occupiedRows = Math.ceil(displayedHeight / cell.height);
+    return {
+      x: slot.x,
+      y: slot.y + Math.floor((height - occupiedRows) / 2),
+      width,
+      height: 0
+    };
+  }
+  const displayedWidth = Math.round(pixelHeight * aspect);
+  if (displayedWidth < 1)
+    return null;
+  const occupiedColumns = Math.ceil(displayedWidth / cell.width);
+  return {
+    x: slot.x + Math.floor((width - occupiedColumns) / 2),
+    y: slot.y,
+    width: 0,
+    height
+  };
+}
 var CLEARED_STATE = {
   transmitted: 0,
   placement: null
@@ -798,6 +850,9 @@ function planNativeArtworkPlacement(input) {
 var APC = "\x1B_G";
 var ST = "\x1B\\";
 var CHUNK_SIZE = 4096;
+function scalingDimensions(width, height) {
+  return [width > 0 ? `c=${width}` : "", height > 0 ? `r=${height}` : ""].filter(Boolean).join(",");
+}
 function tmuxPassthrough(data) {
   return `\x1BPtmux;${data.replaceAll("\x1B", "\x1B\x1B")}\x1B\\`;
 }
@@ -816,13 +871,13 @@ function kittyDisplayPng(pngBase64, imageId, x, y, width, height) {
   return chunks.map((command, index) => {
     let next = command;
     if (index === 0) {
-      next = next.replace(`${APC}a=t,f=100,i=${imageId},q=2,`, `\x1B7\x1B[${y + 1};${x + 1}H${APC}a=T,f=100,i=${imageId},p=${imageId},q=2,C=1,c=${width},r=${height},z=1,`);
+      next = next.replace(`${APC}a=t,f=100,i=${imageId},q=2,`, `\x1B7\x1B[${y + 1};${x + 1}H${APC}a=T,f=100,i=${imageId},p=${imageId},q=2,C=1,${scalingDimensions(width, height)},z=1,`);
     }
     return index === chunks.length - 1 ? `${next}\x1B8` : next;
   });
 }
 function kittyPlace(imageId, placementId, x, y, width, height) {
-  return `\x1B7\x1B[${y + 1};${x + 1}H${APC}a=p,i=${imageId},p=${placementId},q=2,c=${width},r=${height},z=1;${ST}\x1B8`;
+  return `\x1B7\x1B[${y + 1};${x + 1}H${APC}a=p,i=${imageId},p=${placementId},q=2,${scalingDimensions(width, height)},z=1;${ST}\x1B8`;
 }
 function kittyDelete(imageId) {
   return `${APC}a=d,d=I,i=${imageId},q=2;${ST}`;
@@ -840,25 +895,14 @@ function kittyImageId(key) {
 }
 function writeGraphics(renderer, data) {
   const target = renderer;
-  if (!target.stdout || typeof target.realStdoutWrite !== "function")
+  if (typeof target.writeOut !== "function")
     return false;
+  const commands = typeof data === "string" ? [data] : data;
   const output = (value) => process.env.TMUX && !process.env.HERDR_ENV ? tmuxPassthrough(value) : value;
-  let cursorSaved = false;
   try {
-    for (const command of typeof data === "string" ? [data] : data) {
-      if (command.includes("\x1B7"))
-        cursorSaved = true;
-      target.realStdoutWrite.call(target.stdout, output(command));
-      if (command.includes("\x1B8"))
-        cursorSaved = false;
-    }
+    target.writeOut.call(renderer, commands.map(output).join(""));
     return true;
   } catch {
-    if (cursorSaved) {
-      try {
-        target.realStdoutWrite.call(target.stdout, output("\x1B8"));
-      } catch {}
-    }
     return false;
   }
 }
@@ -986,6 +1030,8 @@ function AlbumArtwork(props) {
   let container;
   let paintPending = false;
   let disposed = false;
+  const [nativeVisible, setNativeVisible] = createSignal(false);
+  const imageDimensions = createMemo(() => pngDimensions(props.artwork.png_base64));
   const applyAction = (action) => {
     const renderer2 = props.context.renderer;
     switch (action.type) {
@@ -1034,23 +1080,39 @@ function AlbumArtwork(props) {
     const imageId = imageIdForArtwork(props.artwork.id);
     const x = slot ? slot.screenX + offset.x : 0;
     const y = slot ? slot.screenY + offset.y : 0;
-    const width = slot?.width ?? 0;
-    const height = slot?.height ?? 0;
+    const image = imageDimensions();
+    const resolution = renderer.resolution;
+    const geometry = slot && image && resolution ? fitNativeArtworkGeometry({
+      x,
+      y,
+      width: slot.width,
+      height: slot.height
+    }, image, {
+      width: Math.floor(resolution.width / renderer.terminalWidth),
+      height: Math.floor(resolution.height / renderer.terminalHeight)
+    }) : null;
     const plan = planNativeArtworkPlacement({
       state: runtime.state,
       imageId,
-      x,
-      y,
-      width,
-      height,
+      ...geometry ?? {
+        x,
+        y,
+        width: 0,
+        height: 0
+      },
       kittySupported,
-      slotValid,
+      slotValid: slotValid && geometry !== null,
       disposed
     });
-    if (plan.actions.length === 0)
+    if (plan.actions.length === 0) {
+      setNativeVisible(runtime.state.placement !== null);
       return;
-    if (applyPlan(plan))
+    }
+    if (applyPlan(plan)) {
       commitPlan(plan);
+      setNativeVisible(plan.nextState.placement !== null);
+    } else
+      setNativeVisible(false);
   };
   const scheduleNativeImage = () => {
     if (paintPending || disposed)
@@ -1088,27 +1150,36 @@ function AlbumArtwork(props) {
     _$setProp(_el$, "width", 24);
     _$setProp(_el$, "height", 12);
     _$setProp(_el$, "flexDirection", "column");
+    _$setProp(_el$, "alignItems", "center");
+    _$setProp(_el$, "justifyContent", "center");
     _$setProp(_el$, "overflow", "hidden");
-    _$insert(_el$, _$createComponent(For, {
-      get each() {
-        return props.artwork.cells;
+    _$insert(_el$, _$createComponent(Show, {
+      get when() {
+        return !nativeVisible();
       },
-      children: (row) => (() => {
-        var _el$2 = _$createElement("text");
-        _$insert(_el$2, _$createComponent(For, {
-          each: row,
-          children: (cell) => (() => {
-            var _el$3 = _$createElement("span");
-            _$insertNode(_el$3, _$createTextNode(`\u2580`));
-            _$effect((_$p) => _$setProp(_el$3, "style", {
-              fg: cell.upper,
-              bg: cell.lower
-            }, _$p));
-            return _el$3;
+      get children() {
+        return _$createComponent(For, {
+          get each() {
+            return props.artwork.cells;
+          },
+          children: (row) => (() => {
+            var _el$2 = _$createElement("text");
+            _$insert(_el$2, _$createComponent(For, {
+              each: row,
+              children: (cell) => (() => {
+                var _el$3 = _$createElement("span");
+                _$insertNode(_el$3, _$createTextNode(`\u2580`));
+                _$effect((_$p) => _$setProp(_el$3, "style", {
+                  fg: cell.upper,
+                  bg: cell.lower
+                }, _$p));
+                return _el$3;
+              })()
+            }));
+            return _el$2;
           })()
-        }));
-        return _el$2;
-      })()
+        });
+      }
     }));
     return _el$;
   })();
@@ -1376,7 +1447,7 @@ function CompactPlayer(props) {
   let row;
   let content;
   let allocatedWidth = Number.MAX_SAFE_INTEGER;
-  const track = createMemo(() => props.state.player?.track);
+  const track = createMemo2(() => props.state.player?.track);
   const renderLine = () => {
     const current = track();
     if (!current)
@@ -1399,7 +1470,7 @@ function CompactPlayer(props) {
     if (row?.onSizeChange === updateWidth)
       row.onSizeChange = undefined;
   });
-  return _$createComponent2(Show, {
+  return _$createComponent2(Show2, {
     get when() {
       return track();
     },
@@ -1580,8 +1651,8 @@ function LiveElapsed(props) {
   })();
 }
 function IconBtn(props) {
-  const [hover, setHover] = createSignal(false);
-  const [press, setPress] = createSignal(false);
+  const [hover, setHover] = createSignal2(false);
+  const [press, setPress] = createSignal2(false);
   const bg = () => {
     if (press() || props.active) {
       return props.theme.background.action.primary.base;
@@ -1659,10 +1730,10 @@ function SidebarPlayer(props) {
     unsubscribeSession?.();
     presentationListeners.clear();
   });
-  const player = createMemo(() => props.state.player);
-  const track = createMemo(() => player()?.track);
-  const playing = createMemo(() => !!player()?.is_playing);
-  const duration = createMemo(() => presentationDuration(track()));
+  const player = createMemo2(() => props.state.player);
+  const track = createMemo2(() => player()?.track);
+  const playing = createMemo2(() => !!player()?.is_playing);
+  const duration = createMemo2(() => presentationDuration(track()));
   return (() => {
     var _el$1 = _$createElement3("box"), _el$10 = _$createElement3("box"), _el$11 = _$createElement3("box"), _el$12 = _$createElement3("box"), _el$16 = _$createElement3("box");
     _$insertNode2(_el$1, _el$10);
@@ -1676,7 +1747,7 @@ function SidebarPlayer(props) {
     _$setProp2(_el$1, "paddingBottom", 1);
     _$setProp2(_el$1, "gap", 1);
     _$setProp2(_el$1, "flexShrink", 0);
-    _$insert3(_el$1, _$createComponent2(Show, {
+    _$insert3(_el$1, _$createComponent2(Show2, {
       get when() {
         return props.state.error;
       },
@@ -1693,7 +1764,7 @@ function SidebarPlayer(props) {
     _$setProp2(_el$11, "width", 24);
     _$setProp2(_el$11, "height", 12);
     _$setProp2(_el$11, "overflow", "hidden");
-    _$insert3(_el$11, _$createComponent2(Show, {
+    _$insert3(_el$11, _$createComponent2(Show2, {
       get when() {
         return track()?.artwork;
       },
@@ -1722,7 +1793,7 @@ function SidebarPlayer(props) {
         }
       })
     }));
-    _$insert3(_el$1, _$createComponent2(Show, {
+    _$insert3(_el$1, _$createComponent2(Show2, {
       get when() {
         return track();
       },
@@ -1741,7 +1812,7 @@ function SidebarPlayer(props) {
         _$setProp2(_el$21, "gap", 0);
         _$insertNode2(_el$22, _el$23);
         _$insert3(_el$23, () => sanitizeTerminalText(t2().name, "Unknown track"));
-        _$insert3(_el$21, _$createComponent2(Show, {
+        _$insert3(_el$21, _$createComponent2(Show2, {
           get when() {
             return t2().artists;
           },
@@ -1752,7 +1823,7 @@ function SidebarPlayer(props) {
             return _el$24;
           }
         }), null);
-        _$insert3(_el$21, _$createComponent2(Show, {
+        _$insert3(_el$21, _$createComponent2(Show2, {
           get when() {
             return t2().album;
           },
@@ -1778,7 +1849,7 @@ function SidebarPlayer(props) {
       bars: 24,
       variant: "hero"
     }));
-    _$insert3(_el$1, _$createComponent2(Show, {
+    _$insert3(_el$1, _$createComponent2(Show2, {
       get when() {
         return _$memo(() => !!track())() && duration() > 0;
       },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@naxodev/opencode-music-player",
-  "version": "0.5.1",
+  "version": "0.5.3",
   "description": "macOS system Now Playing controls for the OpenCode 2 TUI",
   "license": "MIT",
   "author": {