dsh-remotion 0.8.2 → 0.9.0

package/CHANGELOG.md

@@ -1,8 +1,16 @@
-#- 同步官方 Remotion 4.0.539 的 12 个技能及引用资源，补充 DSH 包边界，避免独立技能更新命令改到其他安装。
- 更新记录
+# 更新记录
 
 [返回简介](README.md) · [使用说明](docs/USAGE.md) · [验证记录](docs/VALIDATION.md)
 
+## 0.9.0 (2026-10-28)
+
+- 素材页支持上移/下移图片，显示播放序号，立即保存并校验工程修订；不改音频/视频位置和旧成品。
+- Add keyboard-accessible image ordering without re-uploading. Existing renders remain available; export again to apply the new order.
+
+## 0.8.3 (2026-10-27)
+
+- 修复分批更新时的新旧更新控件混用：保留原页面、草稿与安装保护，空闲后接管旧控制器，兼容旧入口。
+
 ## 0.8.2 (2026-10-27)
 
 - 更新控件移至原有工作台或原生插件详情页底部；更新记录与选项原地展开，移除独立更新菜单与页面。

package/README.en.md

@@ -14,6 +14,8 @@ Open the new native sidebar workbench after updating and restarting DSH. Setting
 
 Bundled skills: official Remotion 4.0.539, twelve skills and their reference resources.
 
+Move images up or down in the Media tab, including with the keyboard. The order saves immediately; export again to apply it to a new MP4.
+
 ## What it does
 
 - A settings workbench for templates, editable content, media uploads, official Studio preview and local MP4 export.

package/README.md

@@ -14,6 +14,8 @@
 
 技能内容：官方 Remotion 4.0.539，12 个技能及完整引用资源。
 
+在「素材」页上移或下移图片即可调整轮播顺序，支持键盘操作。顺序立即保存；重新导出后应用于新 MP4。
+
 ## 功能
 
 - 设置页视频工作台：选模板、编辑内容、上传素材，在官方 Studio 预览并导出本机 MP4。

package/docs/validation-0.9.0.md

@@ -0,0 +1,12 @@
+# 0.9.0 图片排序验收
+
+2026-10-28，Windows / Node 24.16 / 官方 DSH 0.2.1-rc.3 Web，后台 Chrome / Playwright。Browser plugin 不可用，因此采用本地 Playwright，不切换用户前台窗口。
+
+- 实际创建轮播工程，上传三张有效 PNG，用鼠标和键盘调整顺序，关闭详情再打开验证持久化。
+- 真正准备官方渲染环境并导出 6 秒 MP4，下载后在 1/3/5 秒抽帧，逐张查看确认绿色、蓝色、红色顺序；再次移动图片后旧 MP4 的 SHA-256 保持一致，界面提示重新导出。
+- 中文浅色、英文深色及 390px 窄屏实际操作；窄屏按钮也实际点击，图片重新排列成功；未捕获页面异常。
+- 后端覆盖图片完整排列、重复/缺失/外来 ID、旧修订、空操作、混合音频位置、文件字节和旧渲染记录保留。
+
+Remotion 保持官方 4.0.539 的当前技能与固定渲染器。
+
+未测：Electron 专属菜单、全部模板/格式组合、所有外部媒体与真实业务项目。受控测试素材不代表任意用户项目。自动安装继续默认关闭。

package/lib/client.js

@@ -176,7 +176,7 @@ function __stardustUpdatesGuard(React, name, { dirty = false, busy = false, reta
 function __StardustPluginUpdatesFooter({ React, name }) {
   const [, render] = React.useState(0), pool = __stardustUpdatesGuards();
   React.useEffect(() => { const fn = () => render(value => value + 1); pool.viewListeners.add(fn); return () => pool.viewListeners.delete(fn); }, []);
-  const client = [...pool.clients].find(client => client.has(name));
+  const client = [...pool.clients].find(client => typeof client.Footer === 'function' && client.has(name));
   if (!client) return null;
   return React.createElement(client.Footer, { name });
 }
@@ -238,14 +238,22 @@ function __stardustUpdatesJoin(host, React, require, participant) {
   if (typeof root.plugin !== 'function') return;
   let record = pools.get(root);
   if (!record) {
-    record = { refs: new Map(), timer: null, version: participant.version, alive: true, hold: false };
+    record = { refs: new Map(), timer: null, version: participant.version, alive: true, hold: false, uiRevision: 2 };
     pools.set(root, record);
+    __stardustUpdatesActivate(record, pools, root, React, require);
+  } else if (record.uiRevision !== 2 && !record.migration) {
+    // The first loaded participant may still own a pre-footer client. Keep
+    // its references and draft guards, wait for any admitted install, then
+    // replace that one client fiber instead of running two window heartbeats.
     const shared = record;
-    record.fiber = root.plugin({ name: 'stardustlc-plugin-updates-client', inject: ['slots', 'locale', 'remote', 'remote.pluginManager'], apply(ctx) {
-      const client = __stardustUpdatesClient(ctx, React, require, shared);
-      ctx.effect(() => () => { shared.alive = false; client.dispose(); if (pools.get(root) === shared) pools.delete(root); });
-    } });
-    Promise.resolve(record.fiber).catch(() => { shared.alive = false; if (pools.get(root) === shared) pools.delete(root); });
+    record.migration = Promise.resolve().then(async () => {
+      while (shared.alive && shared.hold) await new Promise(resolve => setTimeout(resolve, 500));
+      if (!shared.alive || !shared.refs.size) return;
+      await shared.fiber?.dispose?.();
+      if (!shared.refs.size) return;
+      shared.alive = true; shared.uiRevision = 2; pools.set(root, shared);
+      __stardustUpdatesActivate(shared, pools, root, React, require);
+    }).catch(() => { /* The original page remains usable if host disposal fails. */ });
   }
   clearTimeout(record.timer);
   const ref = {}; record.refs.set(ref, participant);
@@ -259,10 +267,17 @@ function __stardustUpdatesJoin(host, React, require, participant) {
     if (!record.refs.size) record.timer = setTimeout(stop, 1000);
   });
 }
+function __stardustUpdatesActivate(shared, pools, root, React, require) {
+  shared.fiber = root.plugin({ name: 'stardustlc-plugin-updates-client', inject: ['slots', 'locale', 'remote', 'remote.pluginManager'], apply(ctx) {
+    const client = __stardustUpdatesClient(ctx, React, require, shared);
+    ctx.effect(() => () => { shared.alive = false; client.dispose(); if (pools.get(root) === shared) pools.delete(root); });
+  } });
+  Promise.resolve(shared.fiber).catch(() => { shared.alive = false; if (pools.get(root) === shared) pools.delete(root); });
+}
 function __stardustUpdatesClient(ctx, React, require, shared) {
   const h = React.createElement, W = createWorkbenchUI(React), route = new URL('api/stardustlc/plugin-updates', document.baseURI);
   const { useState, useEffect } = React, id = crypto.randomUUID(), listeners = new Set(), pool = __stardustUpdatesGuards(), requests = new Set(), notified = new Set(), knownRows = new Map();
-  let alive = true, registered = false, state = null, lastInteraction = Date.now(), inPoll = false, manualOperation = false;
+  let alive = true, registered = false, state = null, lastInteraction = Date.now(), inPoll = false, manualOperation = false, legacyHint = null;
   const language = () => String(ctx.locale?.getSnapshot?.().active || '').startsWith('en') ? 'en' : 'zh';
   const t = (zh, en) => language() === 'en' ? en : zh;
   const preferences = name => state?.preferences.packages[name] || { checkEnabled: true, autoInstall: false, deferredUntil: 0, ignoredVersion: null };
@@ -387,11 +402,11 @@ function __stardustUpdatesClient(ctx, React, require, shared) {
   function Reminder() {
     useSnapshot();
     const row = state?.rows.find(row => { const prefs = preferences(row.name); return row.available && !row.updating && !row.bundledBy && prefs.checkEnabled && prefs.deferredUntil <= Date.now() && prefs.ignoredVersion !== row.release.version && !notified.has(row.name + '@' + row.release.version); });
-    if (!row) return null;
+    if (!row && !legacyHint) return null;
     let Toast; try { Toast = require('@deepseek-ai/dsh-client-ui-primitives').Toast; } catch { return null; }
     if (!Toast) return null;
-    const key = row.name + '@' + row.release.version;
-    return h(Toast, { key, text: (language() === 'en' ? row.labelEn : row.label) + t('有新版本，可在页面底部查看。', ' has an update. Review it at the bottom of its page.'), icon: h(W.Icon, { name: 'refresh', size: 18 }), holdMs: 7000, onDone: () => { notified.add(key); notify(); } });
+    const hint = legacyHint, key = hint ? 'legacy-' + hint : row.name + '@' + row.release.version;
+    return h(Toast, { key, text: hint ? hint + t('：请打开「插件」中的此插件详情页，在底部管理更新。', ': open its details in Plugins to manage updates at the bottom.') : (language() === 'en' ? row.labelEn : row.label) + t('有新版本，可在页面底部查看。', ' has an update. Review it at the bottom of its page.'), icon: h(W.Icon, { name: 'refresh', size: 18 }), holdMs: 7000, onDone: () => { if (hint) legacyHint = null; else notified.add(key); notify(); } });
   }
   function register() {
     if (!alive) return;
@@ -410,7 +425,7 @@ function __stardustUpdatesClient(ctx, React, require, shared) {
     finally { inPoll = false; }
   }
   const timer = setInterval(() => { void poll(); }, 15000), first = setTimeout(() => { void poll(); }, 100);
-  const client = { t, Footer: Panel, has: name => registered && !!originalRow(name), row: rowFor, dispose() {
+  const client = { t, Footer: Panel, Button: W.Button, open(name) { const footer = [...document.querySelectorAll('[data-plugin-update-footer]')].find(node => node.getAttribute('data-plugin-update-footer') === name); if (footer) footer.scrollIntoView({ block: 'end', behavior: 'smooth' }); else { legacyHint = name; notify(); } }, has: name => registered && !!originalRow(name), row: rowFor, dispose() {
     close(); alive = false; clearTimeout(first); clearInterval(timer); pool.clients.delete(client);
     pool.listeners.delete(guardChanged); listeners.clear();
     for (const event of ['pointerdown', 'keydown', 'input']) document.removeEventListener(event, interaction, true);
@@ -596,13 +611,24 @@ function MediaCanvas({ project, fields, render, dirty, stale, job, running, read
 function MediaAssets({ project, dirty, running, fileRef, upload, perform, setProject, t }) {
   const [remove, setRemove] = useState(null);
   if (!project) return h(W.Empty, { title: t('先保存工程，再添加素材', 'Save the project before adding media'), icon: 'video' }, t('填写标题并点击上方“保存工程”。', 'Enter a title and choose Save project above.'));
+  const imageIds = project.assets.filter(asset => asset.kind === 'image').map(asset => asset.id);
+  const move = (asset, offset) => perform(async () => {
+    const order = [...imageIds], index = order.indexOf(asset.id), next = index + offset;
+    if (index < 0 || next < 0 || next >= order.length) return;
+    [order[index], order[next]] = [order[next], order[index]];
+    setProject(await api({ action: 'reorderImages', id: project.id, revision: project.revision, imageIds: order }));
+  });
   return h('section', { className: 'media-assets-view' },
     h('div', { className: 'w-toolbar' }, h('h3', null, t('工程素材', 'Project media') + ' · ' + project.assets.length), h(W.Button, { icon: 'upload', disabled: running || dirty, onClick: () => fileRef.current?.click() }, t('上传素材', 'Upload media'))),
-    h('p', { className: 'w-muted' }, t('PNG/JPEG 图片、一个背景音频和一个静音背景视频；每个 ≤20 MB，总共 ≤40 MB。轮播按上传顺序，每张至少两秒。', 'PNG/JPEG images, one background audio and one muted background video; each ≤20 MB, total ≤40 MB. Slideshow follows upload order, at least two seconds per image.')),
+    h('p', { className: 'w-muted' }, t('PNG/JPEG 图片、一个背景音频和一个静音背景视频；每个 ≤20 MB，总共 ≤40 MB。轮播按下方图片顺序，每张至少两秒。', 'PNG/JPEG images, one background audio and one muted background video; each ≤20 MB, total ≤40 MB. Slideshow follows the image order below, at least two seconds per image.')),
+    imageIds.length > 1 ? h('p', { className: 'w-muted' }, t('上移或下移图片后立即保存。已导出的 MP4 保持原样，请重新导出以应用新顺序。', 'Moving an image saves its order immediately. Existing MP4s are preserved; export again to apply the new order.')) : null,
     dirty ? h(W.Status, null, t('请先保存修改，再上传或移除素材副本。', 'Save changes before uploading or removing media copies.')) : null,
     h('input', { ref: fileRef, type: 'file', accept: '.png,.jpg,.jpeg,.mp3,.wav,.mp4', disabled: running || dirty, onChange: upload, 'aria-label': t('上传素材副本', 'Upload a media copy'), style: { display: 'none' } }),
     project.assets.length ? h('ul', { className: 'media-asset-list' }, project.assets.map(asset => h('li', { key: asset.id }, asset.kind === 'image' ? h('img', { src: urlFor(project, 'asset', { asset: asset.id }), alt: asset.name }) : h(W.Icon, { name: asset.kind === 'video' ? 'video' : 'file', size: 28 }),
-      h('div', null, h('strong', null, asset.name), h('p', { className: 'w-muted' }, asset.kind + ' · ' + Math.ceil(asset.bytes / 1024) + ' KB')),
+      h('div', null, h('strong', null, asset.name), h('p', { className: 'w-muted' }, (asset.kind === 'image' ? t('图片 ', 'Image ') + (imageIds.indexOf(asset.id) + 1) + ' / ' + imageIds.length : asset.kind === 'audio' ? t('背景音频', 'Background audio') : t('背景视频', 'Background video')) + ' · ' + Math.ceil(asset.bytes / 1024) + ' KB')),
+      asset.kind === 'image' && imageIds.length > 1 ? h('div', { className: 'w-toolbar media-asset-order' },
+        h(W.Button, { variant: 'ghost', disabled: running || dirty || imageIds.indexOf(asset.id) === 0, 'aria-label': t('上移图片：', 'Move image up: ') + asset.name, onClick: () => move(asset, -1) }, t('上移', 'Move up')),
+        h(W.Button, { variant: 'ghost', disabled: running || dirty || imageIds.indexOf(asset.id) === imageIds.length - 1, 'aria-label': t('下移图片：', 'Move image down: ') + asset.name, onClick: () => move(asset, 1) }, t('下移', 'Move down'))) : null,
       h(W.Button, { variant: 'ghost', icon: 'trash', disabled: running || dirty, onClick: () => setRemove(asset) }, t('移除上传副本', 'Remove uploaded copy'))))) : h(W.Empty, { title: t('还没有上传素材', 'No media uploaded yet'), icon: 'video' }, t('标题卡可以直接导出。需要图片或配乐时，再上传自己的素材。', 'Title cards can be exported as they are. Upload your own media when you need images or music.')),
     remove ? h(W.Dialog, { title: t('移除素材副本', 'Remove media copy'), closeLabel: t('取消', 'Cancel'), busy: running, onClose: () => setRemove(null) }, h('p', null, remove.name), h('p', { className: 'w-muted' }, t('仅移除本工程中的上传副本，原文件保留。', 'Only the uploaded project copy is removed. Your original file is preserved.')), h('div', { className: 'w-toolbar' }, h(W.Button, { variant: 'danger', disabled: running || dirty, onClick: () => perform(async () => { setProject(await api({ action: 'removeAsset', id: project.id, revision: project.revision, asset: remove.id })); setRemove(null); }) }, t('确认移除副本', 'Confirm removal')), h(W.Button, { disabled: running, onClick: () => setRemove(null) }, t('取消', 'Cancel')))) : null);
 }
@@ -633,6 +659,10 @@ const MEDIA_WORKBENCH_CSS = `
                 return message;
             if (error?.status === 401)
                 return 'Your session expired. Reopen DSH and try again.';
+            if (/调整图片顺序需要/.test(message))
+                return 'Reload the project before changing its image order.';
+            if (/图片顺序/.test(message))
+                return 'Use every current image exactly once. Reload the project before trying again.';
             if (/先归档|已达 30/.test(message))
                 return 'The 30 active project slots are full. Archive another project before creating or restoring one.';
             if (/已有预览或渲染/.test(message))
@@ -829,7 +859,7 @@ h('div', { className: 'bar' }, h('button', { disabled: busy || dirty || activeJo
         catch { } W.register(ctx,{id:'dsh-'+engine+'.workbench',label:()=>title,icon:engine==='hyperframes'?'layers':'play',component:Workbench,inject:()=>({locale}),order:engine==='hyperframes'?65:66});
 ctx.slots.inject('settings.section', () => ctx.slots.register({ name: 'settings.section', id: 'dsh-' + engine, order: engine === 'hyperframes' ? 62 : 63, label: () => title, inject: () => ({ locale }) }, Workbench)); }
         return { inject: ['slots', 'locale'], apply };
-    } },{"name":"dsh-remotion","version":"0.1.0","hasWorkbench":true,"packageVersion":"0.8.2","label":"Remotion","labelEn":"Remotion","suiteComponent":true}));
+    } },{"name":"dsh-remotion","version":"0.1.0","hasWorkbench":true,"packageVersion":"0.9.0","label":"Remotion","labelEn":"Remotion","suiteComponent":true}));
 
 })();
 

package/lib/media-store.d.ts

@@ -17,6 +17,8 @@ export declare class MediaStore {
     create(value: unknown): Promise<MediaProject>;
     edit(id: string, revision: unknown, fn: (p: MediaProject) => Promise<void> | void, bump?: boolean): Promise<MediaProject>;
     update(id: string, revision: unknown, value: unknown): Promise<MediaProject>;
+    /** Reorder existing images atomically; audio/video slots and uploaded bytes stay intact. */
+    reorderImages(id: string, revision: unknown, order: unknown): Promise<MediaProject>;
     assetBytes(id: string, asset: MediaAsset): Promise<Buffer>;
     upload(id: string, revision: unknown, name: string, bytes: Buffer): Promise<MediaProject>;
     removeAsset(id: string, revision: unknown, assetId: string): Promise<MediaProject>;

package/lib/media-store.js

@@ -132,6 +132,21 @@ export class MediaStore {
         }
     }
     async update(id, revision, value) { return this.edit(id, revision, p => { Object.assign(p, validateFields(value)); }); }
+    /** Reorder existing images atomically; audio/video slots and uploaded bytes stay intact. */
+    async reorderImages(id, revision, order) {
+        if (!Number.isInteger(revision) || Number(revision) < 1)
+            throw new Error('调整图片顺序需要当前工程修订号。');
+        return this.edit(id, revision, p => {
+            const images = p.assets.filter(a => a.kind === 'image'), byId = new Map(images.map(a => [a.id, a]));
+            if (!Array.isArray(order) || order.length !== images.length || new Set(order).size !== images.length || order.some(id => typeof id !== 'string' || !byId.has(id)))
+                throw new Error('图片顺序必须包含当前项目的全部图片，且每张只出现一次。');
+            if (images.every((asset, index) => asset.id === order[index]))
+                return;
+            let index = 0;
+            p.assets = p.assets.map(asset => asset.kind === 'image' ? byId.get(order[index++]) : asset);
+            p.revision++;
+        }, false);
+    }
     async assetBytes(id, asset) {
         const file = join(await this.path(id), 'assets', asset.file);
         await this.checkPath(file);

package/lib/media-templates.d.ts

@@ -27,7 +27,7 @@ export interface MediaProject extends MediaFields {
     }>;
 }
 export declare const MEDIA_VERSIONS: {
-    readonly hyperframes: "0.8.207";
+    readonly hyperframes: "0.8.209";
     readonly remotion: "4.0.539";
     readonly gsap: "3.15.0";
 };

package/lib/media-templates.js

@@ -1,4 +1,4 @@
-export const MEDIA_VERSIONS = { hyperframes: '0.8.207', remotion: '4.0.539', gsap: '3.15.0' };
+export const MEDIA_VERSIONS = { hyperframes: '0.8.209', remotion: '4.0.539', gsap: '3.15.0' };
 export const MEDIA_TEMPLATES = [
     { id: 'title', zh: '标题卡', en: 'Title card', description: '一句标题、一段介绍，适合开场与通知。' },
     { id: 'product', zh: '产品介绍', en: 'Product card', description: '深色画布与一张主图，适合产品亮点。' },

package/lib/media-workbench.js

@@ -401,6 +401,9 @@ export class MediaWorkbench {
                     case 'removeAsset':
                         value = await this.store.removeAsset(mediaId(v.id), v.revision, mediaId(v.asset));
                         break;
+                    case 'reorderImages':
+                        value = await this.store.reorderImages(mediaId(v.id), v.revision, v.imageIds);
+                        break;
                     case 'archive':
                     case 'restore': {
                         if (v.confirmed !== true)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-remotion",
-  "version": "0.8.2",
+  "version": "0.9.0",
   "description": "DSH 视频插件：Remotion 技能、模板与素材工作台、官方 Studio 预览和本地 MP4 导出。",
   "type": "module",
   "main": "lib/index.js",
@@ -61,7 +61,7 @@
     "fflate": "0.8.3",
     "proper-lockfile": "4.1.2",
     "yaml": "^2.9.0",
-    "@stardustlc/dsh-updates": "0.1.2"
+    "@stardustlc/dsh-updates": "0.1.3"
   },
   "devDependencies": {
     "@types/node": "^24.0.0",