@runmu.sh/ext-media 1.0.0

package/CHANGELOG.md

@@ -0,0 +1,6 @@
+# Changelog
+
+## 1.0.0
+
+- The Media panel as an extension. It was part of the μClient core (`MediaPanel.vue`); it now draws each session's media through `mu.media.watch` and drives it through `mu.media.stop`, `clearImages` and `setOutput` (SDK 1.7). The host still plays every cue and keeps the images and the master volume. Panel id `media`, its copy and its `data-testid`s are unchanged, so saved layouts and selectors keep working.
+- The panel is added to a session's workspace the first time it plays something or shows an image (once per world on this device).

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 runmu.sh
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,51 @@
+# Media (`@runmu.sh/ext-media`, id `media`)
+
+The Media panel of [μClient](https://runmu.sh) (R-MEDIA): what is playing, the master volume, and the images the game showed.
+
+First-party, on the [marketplace](https://runmu.sh/marketplace/x/media). Install it from **☰ → Extensions → Discover** and enable it per world in **Extensions → Installed**.
+
+Until 2026-10 the panel was part of the client core. The core still plays the audio and keeps each session's images and the master volume; this extension only draws them. Without it, sound still plays and the ☰ menu's Sound row still sets the volume.
+
+## Where the media comes from
+The host keeps one media state per session and fills it from:
+
+| Source | What |
+|---|---|
+| GMCP `Client.Media.Default`, `Client.Media.Play`, `Client.Media.Stop` | Music and sounds (`key`, `name`, `url`, `type`, `volume`, `loops`) |
+| MSP `!!SOUND(...)` / `!!MUSIC(...)` | Music and sounds |
+| MXP `<image>` | Images (URL and caption), newest last |
+| Another extension: `mu.media.play(spec)` / `mu.media.stop(filter)` | Music and sounds |
+
+The core owns `Client.Media` support (it negotiates the package and plays the cues), so the manifest declares no GMCP package. The extension sends nothing to the game; its one capability is `read-output`, because it listens to `mu.sessions.on('line')` to notice a session opened in the background.
+
+## What it looks like
+Composed as Underspire's media panel, on `--bg-elev`:
+
+- **NOW PLAYING** (an uppercase `--accent-bright` tag; the block has an `--accent` bottom rule): one row per track, music first then sounds: `♪`, the title (the file name without folder or extension, in `--gold`), the kind (`music` / `sound`, small faint capitals) and **[ STOP ]**, which stops that track. With nothing playing it says NOTHING PLAYING.
+- When the browser blocked autoplay: *click anywhere to allow audio* in `--gold`.
+- The volume row: the **VOL** label (struck through and faint when muted or at 0), the host's `.rng` slider (filled to `--p`), and the value, or `—` when muted. The slider is the master volume, the same setting as the ☰ menu's Sound row. Moving it off 0 unmutes.
+- **IMAGES** with **[ CLEAR ]** (forgets the session's images) over a grid of 72px thumbnails; each opens the image in a new tab, its caption as the tooltip. With none it says NO IMAGES.
+
+## Behaviour
+- Panel `media`, singleton, per session, default position right top, Views order 30 (after Scene and Channels).
+- The panel auto-adds on the first track or image seen: the first time a session plays music or a sound, or shows an image, the panel is added if it is not open (R-AUTO-PANELS), once per world on this device, so a Media panel you closed stays closed. It watches every open session (`mu.sessions.list()`, re-read on `switch` and on a line from a session it has not seen), and stops watching a session once its panel was added or when the session closes.
+- No settings.
+
+## SDK
+Uses `mu.panels.register` (with `order`), `mu.panels.vue` (render functions, `h` from the host's Vue), `mu.panels.autoAdd`, `mu.media.watch`, `mu.media.stop`, `mu.media.clearImages`, `mu.media.setOutput` (SDK 1.7), `mu.sessions.list` / `on` and `mu.ui.style`. It exports no API. The pure helpers (`tracksOf`, `titleOf`, `pctOf`, `volumePatch`, `isStruck`, `volumeText`, `hasMedia`, `watchSessions`) are in `src/model.ts` for the tests.
+
+## Develop
+Made with `npm create @runmu.sh/extension` ([the quickstart](https://runmu.sh/docs/extensions/quickstart)).
+
+```sh
+npm install
+npm run build        # src/index.ts → dist/index.js, then the manifest check
+npm run typecheck    # tsc --noEmit against @runmu.sh/sdk
+npm test             # node --experimental-strip-types --test "tests/*.test.mjs"
+npm run dev          # dev server on http://localhost:5199/ with hot reload
+```
+
+In μClient: **☰ → Extensions → Advanced → Developer → load from dev server**.
+
+## License
+MIT

package/dist/index.js

@@ -0,0 +1,233 @@
+// src/index.ts
+import { defineExtension } from "@muclient/sdk";
+
+// src/panel.ts
+import { defineComponent, h, onBeforeUnmount, shallowRef, watch } from "vue";
+
+// src/model.ts
+var COPY = {
+  title: "Media",
+  nowPlaying: "Now playing",
+  nothing: "Nothing playing",
+  images: "Images",
+  noImages: "No images",
+  clear: "Clear",
+  stopLabel: "Stop",
+  stop: (name) => `stop ${name}`,
+  volume: "volume",
+  vol: "Vol",
+  blocked: "click anywhere to allow audio",
+  open: "open media"
+};
+var MEDIA_CSS = `
+.mu-media { height: 100%; display: flex; flex-direction: column; overflow-y: auto; background: var(--bg-elev); box-sizing: border-box; }
+.mu-media .np { flex: none; border-bottom: 1px solid var(--accent); }
+.mu-media .hd { display: flex; align-items: center; padding: 6px 10px; border-bottom: 1px solid var(--border); }
+.mu-media .tag { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--accent-bright); }
+.mu-media .x { margin-left: auto; }
+.mu-media .tracks { list-style: none; margin: 0; padding: 8px 10px 0; display: flex; flex-direction: column; gap: 4px; font-size: .78rem; }
+.mu-media .tracks li { display: flex; align-items: center; gap: 8px; }
+.mu-media .g { color: var(--accent); }
+.mu-media .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--gold); }
+.mu-media .k { font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--fg-faint); }
+.mu-media .empty { margin: 0; padding: 10px; color: var(--fg-faint); font-style: normal; font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; }
+.mu-media .blocked { padding-top: 0; color: var(--gold); }
+.mu-media .vol { display: flex; align-items: center; gap: 8px; padding: 6px 10px 9px; }
+.mu-media .vol .rng { flex: 1; max-width: none; }
+.mu-media .vglyph { color: var(--fg-dim); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; transition: color .12s ease; }
+.mu-media .vglyph.muted { color: var(--fg-faint); text-decoration: line-through; }
+.mu-media .vval { min-width: 2em; text-align: right; font-size: .72rem; color: var(--fg-dim); }
+.mu-media .gallery { flex: 1; }
+.mu-media .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 5px; padding: 8px 10px; }
+.mu-media .thumb { display: block; aspect-ratio: 1; overflow: hidden; border: 1px solid var(--border-bright); background: var(--bg); transition: border-color .12s ease; }
+.mu-media .thumb:hover { border-color: var(--accent); }
+.mu-media .thumb:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: -2px; }
+.mu-media .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
+`;
+function tracksOf(m) {
+  return m ? [...m.music ? [m.music] : [], ...m.sounds] : [];
+}
+function titleOf(t) {
+  if (t.title) return t.title;
+  return (t.name.split("/").pop() || t.name).replace(/\.[a-z0-9]{2,4}$/i, "");
+}
+function pctOf(volume) {
+  const v = Math.round(Number(volume) * 100);
+  return Number.isFinite(v) ? Math.min(100, Math.max(0, v)) : 0;
+}
+function volumePatch(pct, muted) {
+  const p = Math.min(100, Math.max(0, Math.round(Number(pct) || 0)));
+  return p > 0 && muted ? { volume: p / 100, muted: false } : { volume: p / 100 };
+}
+var isStruck = (muted, pct) => muted || pct === 0;
+var volumeText = (muted, pct) => muted ? "\u2014" : `${pct}%`;
+var imageTitle = (i) => i.caption || i.url;
+function hasMedia(m) {
+  return !!m && (!!m.music || m.sounds.length > 0 || m.images.length > 0);
+}
+function watchSessions(mu, panel = "media") {
+  const watches = /* @__PURE__ */ new Map();
+  const added = /* @__PURE__ */ new Set();
+  let live = true;
+  const isLive = (sid) => mu.sessions.list().some((s) => s.id === sid);
+  const stop = (sid) => {
+    const off = watches.get(sid);
+    watches.delete(sid);
+    off?.();
+  };
+  const ensure = (sid) => {
+    if (!live || !sid || added.has(sid) || watches.has(sid)) return;
+    let ended = false;
+    const end = () => {
+      ended = true;
+      stop(sid);
+    };
+    const off = mu.media.watch((m) => {
+      if (ended) return;
+      if (!isLive(sid)) {
+        end();
+        return;
+      }
+      if (!hasMedia(m)) return;
+      added.add(sid);
+      mu.panels.autoAdd(panel, sid);
+      end();
+    }, sid);
+    if (ended) off();
+    else watches.set(sid, off);
+  };
+  const sync = () => {
+    if (!live) return;
+    const ids = new Set(mu.sessions.list().map((s) => s.id));
+    for (const sid of [...watches.keys()]) if (!ids.has(sid)) stop(sid);
+    for (const sid of [...added]) if (!ids.has(sid)) added.delete(sid);
+    for (const sid of ids) ensure(sid);
+  };
+  const offSwitch = mu.sessions.on("switch", sync);
+  const offLine = mu.sessions.on("line", (_l, { sid }) => {
+    if (!watches.has(sid) && !added.has(sid)) sync();
+  });
+  sync();
+  return () => {
+    live = false;
+    offSwitch();
+    offLine();
+    for (const sid of [...watches.keys()]) stop(sid);
+    added.clear();
+  };
+}
+
+// src/panel.ts
+function createPanel(mu) {
+  const c = mu.ui.css;
+  const empty = (...more) => [.../* @__PURE__ */ new Set([c.empty, "empty", ...more])].join(" ");
+  return defineComponent({
+    name: "MediaPanel",
+    props: { sid: { type: String, default: null }, worldId: { type: String, default: null }, params: { type: Object, default: () => ({}) } },
+    setup(props) {
+      const m = shallowRef(null);
+      let off = null;
+      const attach = (sid) => {
+        off?.();
+        off = null;
+        m.value = null;
+        if (sid) off = mu.media.watch((v) => {
+          m.value = v;
+        }, sid);
+      };
+      watch(() => props.sid, attach, { immediate: true });
+      onBeforeUnmount(() => {
+        off?.();
+        off = null;
+      });
+      const onVolume = (e) => {
+        const v = Number(e.target.value);
+        mu.media.setOutput(volumePatch(v, !!m.value?.muted));
+      };
+      return () => {
+        const sid = props.sid;
+        const v = m.value;
+        const tracks = tracksOf(v);
+        const muted = !!v?.muted;
+        const pct = pctOf(v?.volume ?? 0);
+        const images = v?.images ?? [];
+        const head = (label, tool) => h("div", { class: "hd" }, [h("span", { class: `tag ${c.glow}` }, label), tool ?? null]);
+        return h("section", { class: "mu-media", "aria-label": COPY.title, "data-testid": "media" }, [
+          h("div", { class: "np" }, [
+            head(COPY.nowPlaying),
+            tracks.length ? h("ul", { class: "tracks", "data-testid": "media-tracks" }, tracks.map((t) => h("li", { key: t.kind + t.key, class: t.kind }, [
+              h("span", { class: "g", "aria-hidden": "true" }, "\u266A"),
+              h("span", { class: "t" }, titleOf(t)),
+              h("span", { class: "k" }, t.kind),
+              h("button", {
+                type: "button",
+                class: `${c.cmd} x`,
+                "aria-label": COPY.stop(titleOf(t)),
+                onClick: () => {
+                  if (sid) mu.media.stop({ key: t.key, type: t.kind }, sid);
+                }
+              }, COPY.stopLabel)
+            ]))) : h("p", { class: empty(), "data-testid": "media-empty" }, COPY.nothing),
+            v?.blocked ? h("p", { class: empty("blocked") }, COPY.blocked) : null,
+            h("label", { class: "vol" }, [
+              h("span", { class: ["vglyph", { muted: isStruck(muted, pct) }], "aria-hidden": "true", "data-testid": "media-vglyph" }, COPY.vol),
+              h("input", {
+                type: "range",
+                min: 0,
+                max: 100,
+                step: 1,
+                class: "rng",
+                value: pct,
+                style: { "--p": `${pct}%` },
+                "aria-label": COPY.volume,
+                "data-testid": "media-volume",
+                onInput: onVolume
+              }),
+              h("span", { class: "vval" }, volumeText(muted, pct))
+            ])
+          ]),
+          h("div", { class: "gallery" }, [
+            head(COPY.images, images.length ? h("button", { type: "button", class: `${c.cmd} x`, onClick: () => {
+              if (sid) mu.media.clearImages(sid);
+            } }, COPY.clear) : null),
+            images.length ? h("div", { class: "grid", "data-testid": "media-gallery" }, images.map((i) => h("a", { key: i.url, class: "thumb", href: i.url, target: "_blank", rel: "noopener", title: imageTitle(i) }, [
+              h("img", { src: i.url, alt: i.caption || "", loading: "lazy" })
+            ]))) : h("p", { class: empty(), "data-testid": "media-noimages" }, COPY.noImages)
+          ])
+        ]);
+      };
+    }
+  });
+}
+
+// src/index.ts
+var index_default = defineExtension({
+  activate(ctx) {
+    const mu = ctx.mu;
+    mu.ui.style(MEDIA_CSS);
+    mu.panels.register({
+      id: "media",
+      title: COPY.title,
+      singleton: true,
+      perSession: true,
+      defaultPosition: "right-top",
+      order: 30,
+      mount: mu.panels.vue(createPanel(mu))
+    });
+    ctx.subscriptions.push(watchSessions(mu, "media"));
+  }
+});
+export {
+  COPY,
+  MEDIA_CSS,
+  index_default as default,
+  hasMedia,
+  imageTitle,
+  isStruck,
+  pctOf,
+  titleOf,
+  tracksOf,
+  volumePatch,
+  volumeText,
+  watchSessions
+};

package/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "@runmu.sh/ext-media",
+  "version": "1.0.0",
+  "description": "The Media panel: what is playing (music and sounds, each with Stop), the master volume and mute, and the images the game showed, from GMCP Client.Media, MSP and MXP <image>.",
+  "keywords": [
+    "media",
+    "sound",
+    "music",
+    "images",
+    "gmcp",
+    "msp",
+    "mxp",
+    "panel"
+  ],
+  "license": "MIT",
+  "homepage": "https://runmu.sh/marketplace/x/media",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/runmu-sh/ext-media.git"
+  },
+  "bugs": {
+    "url": "https://github.com/runmu-sh/ext-media/issues"
+  },
+  "type": "module",
+  "exports": "./dist/index.js",
+  "files": [
+    "dist",
+    "README.md",
+    "CHANGELOG.md"
+  ],
+  "scripts": {
+    "build": "node scripts/build.mjs",
+    "dev": "node scripts/dev.mjs",
+    "typecheck": "tsc --noEmit",
+    "check": "node scripts/build.mjs --check",
+    "test": "node --experimental-strip-types --test \"tests/*.test.mjs\""
+  },
+  "devDependencies": {
+    "@muclient/sdk": "npm:@runmu.sh/sdk@^1.7.1",
+    "@runmu.sh/dev": "^0.1.0",
+    "esbuild": "^0.28.2",
+    "typescript": "^5.9.0",
+    "vue": "^3.5.0"
+  },
+  "engines": {
+    "node": ">=22.6"
+  },
+  "muclient": {
+    "id": "media",
+    "api": "^1.7",
+    "source": "src/index.ts",
+    "displayName": "Media",
+    "description": "The Media panel: what is playing with a Stop per track, the master volume and mute, and the images the game showed.",
+    "categories": [
+      "interface",
+      "sound"
+    ],
+    "contributes": {
+      "panels": [
+        {
+          "id": "media",
+          "title": "Media",
+          "defaultPosition": "right-top",
+          "order": 30
+        }
+      ]
+    },
+    "capabilities": [
+      "read-output"
+    ],
+    "publisher": "bitmuse"
+  }
+}