wallpaper-engine-dsh 0.1.2 → 0.1.3

package/README.md

@@ -10,6 +10,7 @@ A DSH bundle that turns your local **Wallpaper Engine** library into the live ba
 - **Search** — filter the grid instantly by title or workshop id.
 - **Rotation lists** — any number of carousel lists, each with its own wallpapers, interval (1–120 min) and order (sequence/random). Your first playable Wallpaper Engine playlist is imported automatically; others can be imported into any list.
 - **Four live sliders** — wallpaper blur, scrim, border contrast, and glass frosting, all instant and persisted.
+- **Canvas fit** — cover/contain/stretch/original sizing plus five-way alignment for video and still wallpapers.
 - **Resource monitor** — FPS readout with a low-framerate hint, plus auto-pause when the tab is hidden or the battery runs low (both optional).
 - **Bilingual** — the settings UI follows the shell's Language preference (Chinese/English), with a manual override in the picker.
 - **Crossfade** — wallpaper switches and clearing fade smoothly instead of snapping.

package/README.zh.md

@@ -10,6 +10,7 @@
 - **搜索** —— 按标题或创意工坊 ID 即时筛选网格。
 - **轮播列表** —— 可建任意多个列表，各自拥有壁纸集合、切换间隔（1–120 分钟）和顺序（顺序/随机）。首次运行自动导入第一个可播放的 Wallpaper Engine 播放列表，其余列表可随时导入。
 - **四个实时滑杆** —— 壁纸模糊、暗化、边框对比、玻璃磨砂，即时生效并持久保存。
+- **画布排布** —— 视频与静态壁纸支持填充/适应/拉伸/原始四种排布和五向对齐。
 - **资源监控** —— 帧率读数与低帧率提示，页面隐藏或电量不足时自动暂停（均可开关）。
 - **中英双语** —— 设置界面跟随 DSH 的"语言"偏好自动切换，也可在面板内手动指定。
 - **交叉淡入** —— 切换与关闭都平滑过渡，不生硬跳变。

package/lib/client.js

@@ -83,6 +83,17 @@ window.__ModuleLoader__.load({
 		    lowFpsHint: "帧率偏低,可尝试暂停视频、增大壁纸模糊或换用静态壁纸",
 		    language: "语言",
 		    langAuto: "自动",
+		    fit: "排布",
+		    fitCover: "填充",
+		    fitContain: "适应",
+		    fitFill: "拉伸",
+		    fitNone: "原始",
+		    position: "对齐",
+		    posCenter: "居中",
+		    posTop: "顶部",
+		    posBottom: "底部",
+		    posLeft: "居左",
+		    posRight: "居右",
 		    statusGroup: (name, total, usable, interval, order) =>
 		      "列表「" + name + "」:" + total + " 项 · " + usable + " 可用 · 每 " + interval + " 分钟 · " + order,
 		    statusUsable: (n) => n + " 张可用壁纸",
@@ -148,6 +159,17 @@ window.__ModuleLoader__.load({
 		    lowFpsHint: "Low frame rate — try pausing the video, raising wallpaper blur, or using a still wallpaper",
 		    language: "Language",
 		    langAuto: "Auto",
+		    fit: "Fit",
+		    fitCover: "Cover",
+		    fitContain: "Contain",
+		    fitFill: "Stretch",
+		    fitNone: "Original",
+		    position: "Align",
+		    posCenter: "Center",
+		    posTop: "Top",
+		    posBottom: "Bottom",
+		    posLeft: "Left",
+		    posRight: "Right",
 		    statusGroup: (name, total, usable, interval, order) =>
 		      "List \"" + name + "\": " + total + " items · " + usable + " usable · every " + interval + " min · " + order,
 		    statusUsable: (n) => n + " usable wallpapers",
@@ -193,8 +215,13 @@ window.__ModuleLoader__.load({
 		  pauseOnHidden: true,
 		  pauseOnBattery: true,
 		  lang: "auto",
+		  fit: "cover",
+		  position: "center",
 		};
 
+		const FIT_MODES = ["cover", "contain", "fill", "none"];
+		const POSITIONS = ["center", "top", "bottom", "left", "right"];
+
 		// ── Persisted selection ─────────────────────────────────────────────────────
 		function clampNum(v, lo, hi, fallback) {
 		  return typeof v === "number" && isFinite(v) && v >= lo && v <= hi ? v : fallback;
@@ -238,6 +265,8 @@ window.__ModuleLoader__.load({
 		      pauseOnHidden: o.pauseOnHidden !== false,
 		      pauseOnBattery: o.pauseOnBattery !== false,
 		      lang: o.lang === "zh" || o.lang === "en" ? o.lang : "auto",
+		      fit: FIT_MODES.indexOf(o.fit) >= 0 ? o.fit : DEFAULTS.fit,
+		      position: POSITIONS.indexOf(o.position) >= 0 ? o.position : DEFAULTS.position,
 		    };
 		  } catch {
 		    return { id: "", ...DEFAULTS };
@@ -287,6 +316,8 @@ window.__ModuleLoader__.load({
 		      pauseOnHidden: selection.pauseOnHidden,
 		      pauseOnBattery: selection.pauseOnBattery,
 		      lang: selection.lang,
+		      fit: selection.fit,
+		      position: selection.position,
 		    }));
 		  } catch { /* storage full / blocked → session-only state, not fatal */ }
 		}
@@ -693,6 +724,10 @@ window.__ModuleLoader__.load({
 		  s.setProperty("--webg-wallpaper-blur", selection.wallpaperBlur + "px");
 		  // Scaling compensates the transparent fringe CSS blur reveals at edges.
 		  s.setProperty("--webg-wallpaper-scale", (1 + selection.wallpaperBlur * 0.006).toFixed(4));
+		  // Canvas fit: object-fit/position for video and still wallpapers (iframes
+		  // ignore object-fit — web wallpapers always fill their layer).
+		  s.setProperty("--webg-fit", selection.fit);
+		  s.setProperty("--webg-position", selection.position);
 
 		  // Write the scrim colour directly too, then force a synchronous layout, so
 		  // slider feedback lands on this frame even on stalled compositors.
@@ -712,6 +747,8 @@ window.__ModuleLoader__.load({
 		  s.removeProperty("--webg-glass-brightness");
 		  s.removeProperty("--webg-wallpaper-blur");
 		  s.removeProperty("--webg-wallpaper-scale");
+		  s.removeProperty("--webg-fit");
+		  s.removeProperty("--webg-position");
 		  const scrim = document.getElementById(SCRIM_ID);
 		  if (scrim) scrim.style.background = "";
 		}
@@ -838,6 +875,18 @@ window.__ModuleLoader__.load({
 		  const onBorder = (pct) => { selection.border = pct / 100; persistSelection(); applyEffects(); emit(); };
 		  const onBlur = (px) => { selection.blur = px; persistSelection(); applyEffects(); emit(); };
 		  const onWallpaperBlur = (px) => { selection.wallpaperBlur = px; persistSelection(); applyEffects(); emit(); };
+		  const onFit = (e) => {
+		    selection.fit = FIT_MODES.indexOf(e.target.value) >= 0 ? e.target.value : "cover";
+		    persistSelection();
+		    applyEffects();
+		    emit();
+		  };
+		  const onPosition = (e) => {
+		    selection.position = POSITIONS.indexOf(e.target.value) >= 0 ? e.target.value : "center";
+		    persistSelection();
+		    applyEffects();
+		    emit();
+		  };
 
 		  if (!sel.loaded) {
 		    return React.createElement("div", { className: "webg-picker" },
@@ -1073,6 +1122,28 @@ window.__ModuleLoader__.load({
 		    ),
 		    // ── Effects ──
 		    sel.id && React.createElement(React.Fragment, null,
+		      // Canvas fit only matters for video/still wallpapers — an iframe
+		      // ignores object-fit and always fills its layer.
+		      sel.type !== "web" && React.createElement("div", { className: "webg-row webg-fit-row" },
+		        React.createElement("span", { className: "webg-hint webg-label" }, t.fit),
+		        React.createElement("select", {
+		          className: "webg-select webg-fit-select",
+		          value: sel.fit,
+		          onChange: onFit,
+		        },
+		        ...[t.fitCover, t.fitContain, t.fitFill, t.fitNone].map((label, i) =>
+		          React.createElement("option", { key: FIT_MODES[i], value: FIT_MODES[i] }, label),
+		        )),
+		        React.createElement("span", { className: "webg-hint webg-label" }, t.position),
+		        React.createElement("select", {
+		          className: "webg-select webg-position-select",
+		          value: sel.position,
+		          onChange: onPosition,
+		        },
+		        ...[t.posCenter, t.posTop, t.posBottom, t.posLeft, t.posRight].map((label, i) =>
+		          React.createElement("option", { key: POSITIONS[i], value: POSITIONS[i] }, label),
+		        )),
+		      ),
 		      SliderRow(t.wallpaperBlur, 0, 60, 1, sel.wallpaperBlur, onWallpaperBlur, sel.wallpaperBlur + "px"),
 		      SliderRow(t.scrim, 0, 90, 5, Math.round(sel.scrim * 100), onScrim, Math.round(sel.scrim * 100) + "%"),
 		      SliderRow(t.border, 0, 90, 5, Math.round(sel.border * 100), onBorder, Math.round(sel.border * 100) + "%"),
@@ -1128,7 +1199,9 @@ window.__ModuleLoader__.load({
 		  .webg-layer--enter { opacity: 0; }
 		  .webg-layer--leave { opacity: 0; }
 		  .webg-layer .webg-media {
-		    width: 100%; height: 100%; object-fit: cover; display: block;
+		    width: 100%; height: 100%; object-fit: var(--webg-fit, cover);
+		    object-position: var(--webg-position, center);
+		    display: block;
 		    background: transparent; border: 0;
 		    filter: blur(var(--webg-wallpaper-blur, 0px));
 		    transform: scale(var(--webg-wallpaper-scale, 1));
@@ -1189,7 +1262,9 @@ window.__ModuleLoader__.load({
 		  }
 
 		  /* ── Picker chrome (token-driven, theme-aware) ── */
-		  .webg-picker { display: flex; flex-direction: column; gap: 10px; }
+		  /* padding-top lifts the first row off the settings-section divider so the
+		     search/language row breathes; gap keeps every row evenly spaced. */
+		  .webg-picker { display: flex; flex-direction: column; gap: 12px; padding-top: 10px; }
 		  .webg-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
 		  .webg-hint { font-size: 0.8em; opacity: 0.7; color: var(--dsw-alias-label-tertiary, inherit); }
 		  .webg-error {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wallpaper-engine-dsh",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Wallpaper Engine Video/Web wallpapers as the DSH web GUI background — discovery, sandboxed rendering, rotation lists, liquid-glass tuning.",
   "type": "module",
   "main": "lib/index.js",