dsh-remotion 0.8.3 → 0.9.0

package/CHANGELOG.md

@@ -1,8 +1,12 @@
-#- 同步官方 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)
 
 - 修复分批更新时的新旧更新控件混用：保留原页面、草稿与安装保护，空闲后接管旧控制器，兼容旧入口。

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

@@ -611,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);
 }
@@ -648,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))
@@ -844,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.3","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.3",
+  "version": "0.9.0",
   "description": "DSH 视频插件：Remotion 技能、模板与素材工作台、官方 Studio 预览和本地 MP4 导出。",
   "type": "module",
   "main": "lib/index.js",