wallpaper-engine-dsh 1.0.7 → 1.0.8

package/README.md

@@ -64,6 +64,7 @@ Media serving is defensive by design: tokens are unguessable 72-bit values, stab
 
 - Scene and application wallpapers are not listed: they are Wallpaper Engine's private `.pkg` scene packages, and their live animation can only be rendered by Wallpaper Engine itself on the desktop.
 - Web wallpapers run isolated from the page's storage, so ones that persist state across loads won't keep it.
+- Web wallpapers with sound may stay silent until you interact with the page — browsers gate audio in sandboxed documents on a user gesture, and wallpapers that rely on Wallpaper Engine's system-audio feed (visualizers) have no signal to draw from.
 - The glass effect reads DSH design tokens; if a future shell redesign renames them, frosting degrades to plain transparency.
 
 ## Development

package/README.zh.md

@@ -64,6 +64,7 @@ bundle 分为两半:
 
 - 场景与应用壁纸不出现在列表中:它们是 Wallpaper Engine 私有的 `.pkg` 场景包,动态渲染只能由桌面端的 Wallpaper Engine 完成。
 - 网页壁纸与页面存储隔离,需要跨加载保存状态的壁纸无法保留状态。
+- 带声音的网页壁纸可能在你与页面交互前保持静默——浏览器对沙箱文档的音频有自动播放限制;依赖 Wallpaper Engine 系统音频输入的壁纸(如音频可视化)在浏览器中没有信号可画。
 - 玻璃效果读 DSH 设计令牌;若未来外壳重构重命名令牌,磨砂会退化为普通半透明。
 
 ## 开发

package/lib/client.js

@@ -688,6 +688,7 @@ window.__ModuleLoader__.load({
 		    media = document.createElement("iframe");
 		    media.src = sel.url;
 		    media.setAttribute("sandbox", "allow-scripts");
+		    media.setAttribute("allow", "autoplay");
 		    media.setAttribute("referrerpolicy", "no-referrer");
 		    media.setAttribute("frameborder", "0");
 		    media.setAttribute("scrolling", "no");
@@ -1019,7 +1020,13 @@ window.__ModuleLoader__.load({
 		      if (existing) {
 		        existing.classList.add("webg-layer--leave");
 		        const stale = existing;
-		        schedule(() => stale.remove(), LEAVE_MS);
+		        schedule(() => {
+		          const v = stale.querySelector("video");
+		          if (v) { v.pause(); v.removeAttribute("src"); if (typeof v.load === "function") v.load(); }
+		          const f = stale.querySelector("iframe");
+		          if (f) { f.src = "about:blank"; }
+		          stale.remove();
+		        }, LEAVE_MS);
 		      }
 		    }
 		    const node = document.getElementById(LAYER_ID);
@@ -1035,11 +1042,18 @@ window.__ModuleLoader__.load({
 		    existing.classList.add("webg-layer--leave");
 		    const stale = existing;
 		    schedule(() => {
+		      const v = stale.querySelector("video");
+		      if (v) { v.pause(); v.removeAttribute("src"); if (typeof v.load === "function") v.load(); }
+		      const f = stale.querySelector("iframe");
+		      if (f) { f.src = "about:blank"; }
 		      stale.remove();
 		      if (!document.getElementById(LAYER_ID)) {
 		        const s = document.getElementById(SCRIM_ID);
 		        if (s) s.remove();
 		        document.body.removeAttribute(ACTIVE_ATTR);
+		        if (previewProbe) { previewProbe.remove(); previewProbe = null; }
+		        sampledLuminance = null;
+		        clearEffects();
 		      }
 		    }, LEAVE_MS);
 		  }
@@ -1060,6 +1074,9 @@ window.__ModuleLoader__.load({
 		      if (selection.type === "web") {
 		        const w = selection.inventory.wallpapers.find((x) => x.id === selection.id);
 		        if (w && w.preview) probePreviewLuminance(w.preview);
+		      } else if (previewProbe) {
+		        previewProbe.remove();
+		        previewProbe = null;
 		      }
 		    }
 		}
@@ -1147,9 +1164,10 @@ window.__ModuleLoader__.load({
 		  // wallpapers, light theme (dark text) brightens dark ones — either way the
 		  // text side wins. This is what makes ANY wallpaper survivable.
 		  const dark = Boolean(document.body.hasAttribute && document.body.hasAttribute("data-ds-dark-theme"));
+		  const roundedLum = sampledLuminance !== null ? Math.round(sampledLuminance * 100) / 100 : null;
 		  const key = [
 		    dark, selection.scrim, selection.border, selection.blur, selection.wallpaperBlur,
-		    selection.autoScrim, sampledLuminance, selection.fit, selection.zoom,
+		    selection.autoScrim, roundedLum, selection.fit, selection.zoom,
 		    selection.offsetX, selection.offsetY, selection.rotation, selection.mirrored,
 		  ].join("\u0000");
 		  if (key === lastEffectKey) return; // nothing it reads changed → no writes, no reflow
@@ -1200,9 +1218,6 @@ window.__ModuleLoader__.load({
 		  // slider feedback lands on this frame even on stalled compositors.
 		  const scrim = document.getElementById(SCRIM_ID);
 		  if (scrim) scrim.style.background = veilColor;
-		  if (document.body && document.body.offsetHeight !== undefined) {
-		    void document.body.offsetHeight;
-		  }
 		}
 
 		function clearEffects() {
@@ -1242,7 +1257,7 @@ window.__ModuleLoader__.load({
 		    }
 		    onInput(v);
 		  };
-		  return React.createElement(React.Fragment, null,
+		  return React.createElement(React.Fragment, { key: label },
 		    React.createElement("span", { className: "webg-hint webg-label" }, label),
 		    React.createElement("input", {
 		      className: "webg-slider", type: "range",
@@ -1446,6 +1461,7 @@ window.__ModuleLoader__.load({
 		      className: "webg-text webg-search", type: "search",
 		      placeholder: t.searchPlaceholder,
 		      value: query,
+		      onChange: (e) => setQuery(e.target.value),
 		      onInput: (e) => setQuery(e.target.value),
 		    }),
 		    query.trim() && React.createElement("span", { className: "webg-hint" },
@@ -1476,14 +1492,14 @@ window.__ModuleLoader__.load({
 		    React.createElement("span", { className: "webg-card-close" }, t.closeCard),
 		    ),
 		    usableList.length === 0
-		      ? React.createElement("span", { className: "webg-hint" },
+		      ? React.createElement("span", { className: "webg-hint webg-grid-empty" },
 		          sel.inventory.installDir
 		            ? (sel.inventory.total > 0
 		                ? t.emptyNoUsable(sel.inventory.total)
 		                : t.emptyNoProjects)
 		            : t.emptyNoInstall)
 		      : filteredList.length === 0
-		        ? React.createElement("span", { className: "webg-hint" }, t.noMatch(q))
+		        ? React.createElement("span", { className: "webg-hint webg-grid-empty" }, t.noMatch(q))
 		        : filteredList.map((w) => ThumbCard(w, w.id === sel.id, () => applySelection(w.id), t)),
 		  );
 		}
@@ -1563,7 +1579,9 @@ window.__ModuleLoader__.load({
 		      React.createElement("input", {
 		        className: "webg-text", type: "text",
 		        value: editing.name,
-		        onInput: (e) => { editing.name = e.target.value; emit(); },
+		        onChange: (e) => { editing.name = e.target.value; if (!e.nativeEvent || !e.nativeEvent.isComposing) emit(); },
+		        onInput: (e) => { editing.name = e.target.value; },
+		        onCompositionEnd: (e) => { editing.name = e.target.value; emit(); },
 		      }),
 		    ),
 		    React.createElement("div", { className: "webg-row" },
@@ -1588,6 +1606,7 @@ window.__ModuleLoader__.load({
 		      className: "webg-text", type: "search",
 		      placeholder: t.filterPlaceholder,
 		      value: editorQuery,
+		      onChange: (e) => setEditorQuery(e.target.value),
 		      onInput: (e) => setEditorQuery(e.target.value),
 		    }),
 		    React.createElement("div", { className: "webg-editor-grid" },
@@ -1595,10 +1614,10 @@ window.__ModuleLoader__.load({
 		        const eq = editorQuery.trim();
 		        const pool = usableList.filter((w) => matchesQuery(w, eq));
 		        if (usableList.length === 0) {
-		          return React.createElement("span", { className: "webg-hint" }, t.noUsable);
+		          return React.createElement("span", { className: "webg-hint webg-grid-empty" }, t.noUsable);
 		        }
 		        if (pool.length === 0) {
-		          return React.createElement("span", { className: "webg-hint" }, t.noMatch(eq));
+		          return React.createElement("span", { className: "webg-hint webg-grid-empty" }, t.noMatch(eq));
 		        }
 		        return pool.map((w) => EditorCard(w, editing, t));
 		      })(),
@@ -1685,7 +1704,7 @@ window.__ModuleLoader__.load({
 		        className: "webg-btn", type: "button", onClick: enterAdjust,
 		        disabled: sel.adjusting,
 		      }, t.adjust),
-		      (sel.zoom !== 1 || sel.offsetX !== 0 || sel.offsetY !== 0) &&
+		      (sel.zoom !== 1 || sel.offsetX !== 0 || sel.offsetY !== 0 || sel.rotation !== 0) &&
 		        React.createElement("button", {
 		          className: "webg-btn", type: "button", onClick: resetCrop,
 		        }, t.resetCrop),
@@ -2070,6 +2089,11 @@ window.__ModuleLoader__.load({
 		    display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
 		    gap: 8px; max-height: 300px; overflow-y: auto; padding: 2px;
 		  }
+		  .webg-grid-empty {
+		    grid-column: 1 / -1;
+		    display: flex; align-items: center; justify-content: center;
+		    padding: 24px 12px; text-align: center;
+		  }
 		  .webg-card {
 		    position: relative; width: 100%; padding: 0; cursor: pointer;
 		    aspect-ratio: 16 / 9; display: block; overflow: hidden;
@@ -2323,7 +2347,7 @@ window.__ModuleLoader__.load({
 		  if (ctx.slots) {
 		    ctx.slots.inject("settings.general.item", () =>
 		      ctx.slots.register(
-		        { name: "settings.general.item", id: "we-background", order: 500, label: S().settingsLabel },
+		        { name: "settings.general.item", id: "we-background", order: 500, label: () => S().settingsLabel },
 		        () => React.createElement(WallpaperPicker),
 		      ),
 		    );

package/lib/core.js

@@ -174,8 +174,10 @@ export function steamProbeDirs(platform = process.platform, home = homedir) {
       return [
         'C:\\Program Files (x86)\\Steam',
         'C:\\Program Files\\Steam',
+        'C:\\SteamLibrary',
         'D:\\Steam',
         'D:\\SteamLibrary',
+        'E:\\Steam',
         'E:\\SteamLibrary',
       ];
     case 'darwin':
@@ -536,9 +538,13 @@ export function mimeFor(absPath) {
     js: 'text/javascript; charset=utf-8', mjs: 'text/javascript; charset=utf-8',
     css: 'text/css; charset=utf-8', json: 'application/json; charset=utf-8',
     jpg: 'image/jpeg', jpeg: 'image/jpeg', gif: 'image/gif',
-    png: 'image/png', webp: 'image/webp', svg: 'image/svg+xml',
+    png: 'image/png', webp: 'image/webp', svg: 'image/svg+xml', ico: 'image/x-icon',
     mp3: 'audio/mpeg', ogg: 'audio/ogg', wav: 'audio/wav',
+    flac: 'audio/flac', aac: 'audio/aac', m4a: 'audio/mp4',
     woff: 'font/woff', woff2: 'font/woff2', ttf: 'font/ttf',
+    otf: 'font/otf', eot: 'application/vnd.ms-fontobject',
+    wasm: 'application/wasm', txt: 'text/plain; charset=utf-8',
+    xml: 'application/xml; charset=utf-8',
   }[ext] || 'application/octet-stream';
 }
 

package/lib/index.js

@@ -265,7 +265,7 @@ export function createRouteRegistrar(webServer, opts = {}) {
       // unguessable token remains the only capability — wildcard origin
       // grants nothing beyond what a known URL already grants.
       res.setHeader('Access-Control-Allow-Origin', '*');
-      if (mime === 'text/html' || mime === 'image/svg+xml') {
+      if (mime.startsWith('text/html') || mime === 'image/svg+xml') {
         // Script-capable documents (web wallpapers, SVG previews) get a
         // sandbox CSP even on direct top-level navigation, so they can
         // never execute against the DSH origin. `allow-scripts` keeps the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wallpaper-engine-dsh",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "description": "Wallpaper Engine library as the DSH web GUI background — video/web/still wallpapers, rotation lists, search, resource monitor, bilingual UI.",
   "type": "module",
   "main": "lib/index.js",