@versa_ai/vmml-editor 1.0.54 → 1.0.56

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@versa_ai/vmml-editor",
-  "version": "1.0.54",
+  "version": "1.0.56",
   "module": "dist/index.mjs",
   "main": "dist/index.mjs",
   "types": "dist/index.d.mts",
@@ -17,8 +17,8 @@
     "remotion": "4.0.166",
     "uuid": "^10.0.0",
     "zod": "^3.23.8",
-    "@versa_ai/vmml-utils": "1.0.15",
-    "@versa_ai/vmml-player": "1.1.24"
+    "@versa_ai/vmml-player": "1.1.27",
+    "@versa_ai/vmml-utils": "1.0.16"
   },
   "devDependencies": {
     "@biomejs/biome": "^1.7.1",

package/src/components/EditorCanvas.tsx

@@ -44,7 +44,6 @@ const EditorCanvas = forwardRef(
 					item.on('modified', () => {
 						const fObj = convertToJSON(item)
 						vmmlConverterRef.current.updateClip(fObj);
-						updateVmml(vmmlConverterRef.current.vmml)
 					});
 					item.set("visible", ns >= item.clipData.inPoint);
 					canvas.add(item);
@@ -88,7 +87,6 @@ const EditorCanvas = forwardRef(
 				}
 				const { clipData } = e.target.toJSON(['clipData']);
 				vmmlConverterRef.current.deleteClip(clipData);
-				updateVmml(vmmlConverterRef.current.vmml)
 			});
 
 			canvas.on('object:muteChange', (e: any) => {
@@ -290,7 +288,7 @@ const EditorCanvas = forwardRef(
 						const fObj = convertToJSON(img);
 						fObj.src = "";
 						vmmlConverterRef.current.updateClip(fObj);
-						updateVmml(vmmlConverterRef.current.vmml)
+						
 					});
 					resolve(img);
 				});
@@ -320,7 +318,7 @@ const EditorCanvas = forwardRef(
 				});
 				textObj.setCoords();
 				const updatedFObj = convertToJSON(textObj);
-				vmmlConverterRef.current.updateClip(updatedFObj);
+				vmmlConverterRef.current.updateClip(updatedFObj, false);
 			});
 			canvas.renderAll();
 			updateVmml(vmmlConverterRef.current?.vmml)
@@ -505,7 +503,6 @@ const EditorCanvas = forwardRef(
 						onBatchModify(fObj, canvas)
 					} else {
 						vmmlConverterRef.current.updateClip(fObj);
-						updateVmml(vmmlConverterRef.current?.vmml)
 					}
 				});
 
@@ -594,7 +591,6 @@ const EditorCanvas = forwardRef(
 				group.on('modified', () => {
 					const fObj = convertToJSON(group)
 					vmmlConverterRef.current.updateClip(fObj);
-					updateVmml(vmmlConverterRef.current?.vmml)
 				});
 				canvas.centerObject(group);
 				canvas.add(group)
@@ -603,7 +599,6 @@ const EditorCanvas = forwardRef(
 				})
 				onVideoChange(group?.clipData??null);
 				vmmlConverterRef.current.addTextClip(convertToJSON(group));
-				updateVmml(vmmlConverterRef.current?.vmml)
 				resolve(true);
 			})
 			
@@ -678,7 +673,6 @@ const EditorCanvas = forwardRef(
 				target.setCoords();
 				fc?.requestRenderAll();
 				vmmlConverterRef.current.updateClip(convertToJSON(target));
-				updateVmml(vmmlConverterRef.current?.vmml)
 			}
 		}
 		const changeObjectVisible = (id: string, visible: boolean = true) => {
@@ -739,7 +733,7 @@ const EditorCanvas = forwardRef(
 				if (vmmlConverterRef.current) {
 					vmmlConverterRef.current.changeVmml(vmml)
 				} else {
-					vmmlConverterRef.current = new VmmlConverter({ vmml, canvasSize });
+					vmmlConverterRef.current = new VmmlConverter({ vmml, canvasSize, updatePlayer: updateVmml });
 				}
 			}
 		}, [canvasSize, vmml]);

package/src/index.tsx

@@ -22,6 +22,7 @@ const EditorFn = <Schema extends AnyZodObject, Props>(
 		maxText = 10,
 		maxVideo = 5,
 		videoMenus = [],
+		controls = true,
 		onMenuChange,
 		showTextButtons = false,
 		editableArray = [],
@@ -130,14 +131,6 @@ const EditorFn = <Schema extends AnyZodObject, Props>(
 		current.play();
 		setPreviewState(true);
 		setMenuState("");
-		// if (previewState) {
-		// 	const { current }: any = vmmlPlayerRef;
-		// 	current.unmute();
-		// 	current.play();
-		// } else {
-		// 	setPreviewState(true);
-		// 	setMenuState("");
-		// }
 	}
 
 	// 点击底部菜单
@@ -379,7 +372,7 @@ const EditorFn = <Schema extends AnyZodObject, Props>(
 	useEffect(() => {
 		if (canvasSize.width && canvasSize.height && vmmlState) {
 			if (!vmmlConverterRef.current) {
-				vmmlConverterRef.current = new VmmlConverter({ vmml: vmmlState, canvasSize });
+				vmmlConverterRef.current = new VmmlConverter({ vmml: vmmlState, canvasSize, updatePlayer: updateVmml });
 			} else {
 				vmmlConverterRef.current.vmml = vmmlState;
 			}
@@ -624,21 +617,23 @@ const EditorFn = <Schema extends AnyZodObject, Props>(
 					</section>
 				</div>
 				{/* 控制器 */}
-				<div className="controls-box">
-					<Controls
-					 	backgroundColor={backgroundColor}
-						player={player}
-						vmmlRef={vmmlPlayerRef}
-						fps={fps}
-						durationInFrames={durationInFrames}
-						intoEdit={intoEdit}
-						frame={frame}
-						isPlaying={isPlaying}
-						setDragState={setDragState}
-						onControlsClick={onControlsClick}
-						signList={signList}
-					/>
-				</div>
+				{
+					controls && <div className="controls-box">
+						<Controls
+							backgroundColor={backgroundColor}
+							player={player}
+							vmmlRef={vmmlPlayerRef}
+							fps={fps}
+							durationInFrames={durationInFrames}
+							intoEdit={intoEdit}
+							frame={frame}
+							isPlaying={isPlaying}
+							setDragState={setDragState}
+							onControlsClick={onControlsClick}
+							signList={signList}
+						/>
+					</div>
+				}
 				<div className="padding-box"></div>
 					{
 						(maxText > 0 || maxVideo > 0) && <section style={menuStyles} className={`footer ${menuState === 'text' ? 'text-style' : ''}`}>
@@ -708,5 +703,6 @@ export const Editor = forward(EditorFn);
 * @param textWarapCenter 文字是否居中 默认：false
 * @param backgroundColor 背景色，默认#000.
 * @param existenceBorderRadio player是否圆角，圆角0.16rem.
+* @param controls 是否显示进度条 默认true
 */
 

package/src/utils/VmmlConverter.ts

@@ -7,18 +7,20 @@ class VmmlConverter {
 	private heightScale: any;
 	private widthScale: any;
 	private fontSize: number;
+	private updatePlayer: any
 
 	/**
 	 * VmmlConverter 构造函数
 	 * @param vmml - VMML 模板数据
 	 * @param canvasSize - 画布尺寸
 	 */
-	constructor({ vmml, canvasSize }: { vmml: any; canvasSize: any}) {
+	constructor({ vmml, canvasSize, updatePlayer }: { vmml: any; canvasSize: any, updatePlayer?: any }) {
 		const { width, height } = vmml.template.dimension;
 		this.vmml = vmml;
 		this.canvasSize = canvasSize;
 		this.tracks = vmml.template.tracks;
 		this.fontSize = getFontSize(width, height);
+		this.updatePlayer = updatePlayer
 
 		// 计算宽高比
 		this.heightScale = height / canvasSize.height;
@@ -93,7 +95,8 @@ class VmmlConverter {
 	 * 转换 TextClip
 	 * @param fObj - 画布fObj
 	 */
-	public addTextClip(fObj: any): void {
+	public addTextClip(fObj: any, isUpdate?: boolean): void {
+		isUpdate = isUpdate ?? true
 		const posParam = this.setPosParam(fObj);
 
 		// const [rect, textbox] = fObj.objects;
@@ -141,7 +144,7 @@ class VmmlConverter {
 			editorTrack.clips.push(tClipData);
 		}
 
-		this.updateVmml(this.vmml)
+		if (isUpdate) this?.updatePlayer?.(this.vmml)
 		// console.log("addTextClip 最终vmml", this.vmml);
 	}
 
@@ -149,7 +152,8 @@ class VmmlConverter {
 	 * 转换 VideoClip
 	 * @param fObj - 画布fObj
 	 */
-	public addVideoClip(fObj: any): void {
+	public addVideoClip(fObj: any, isUpdate: boolean): void {
+		isUpdate = isUpdate ?? true
 		const clips = [];
 		const editorTrack = this.tracks.find((track: any) => track.editorType === "表情包");
 		const clipData = this.loadClipData(fObj);
@@ -182,6 +186,7 @@ class VmmlConverter {
 			}
 		}
 
+		if (isUpdate) this?.updatePlayer?.(this.vmml)
 		// console.log("addVideoClip 最终vmml", this.vmml);
 	}
 
@@ -189,7 +194,8 @@ class VmmlConverter {
 	 * 更新 clip
 	 * @param fObj - 画布fObj
 	 */
-	public updateClip(fObj: any) {
+	public updateClip(fObj: any, isUpdate: boolean) {
+		isUpdate = isUpdate ?? true
 		// console.log("updateClip fObj", fObj, this.tracks);
 		const posParam = this.setPosParam(fObj);
 		const {
@@ -220,6 +226,7 @@ class VmmlConverter {
 		}
 
 		// console.log("updateClip 最终vmml", this.vmml);
+		if (isUpdate) this?.updatePlayer?.(this.vmml)
 	}
 
 	/**
@@ -227,7 +234,7 @@ class VmmlConverter {
 	 * @param id - 实例 id
 	 * @param type - 实例 类型
 	 */
-	public deleteClip({ id, type, originClip }: { id: string; type: string, originClip: any }): void {
+	public deleteClip({ id, type, originClip, isUpdate = true }: { id: string; type: string, originClip: any, isUpdate?: boolean }): void {
 		if (originClip) {
 			// originClip.duration = 0
 			const [existClip] = this.findClip(id)
@@ -251,7 +258,7 @@ class VmmlConverter {
 				}
 			}
 		}
-		console.log('deleteclip>>>>>>>>>>>>>>>')
+		if (isUpdate) this?.updatePlayer?.(this.vmml)
 	}
 
 	changeVmml (newVmml: any) {
@@ -260,7 +267,7 @@ class VmmlConverter {
 	}
 
 	//切换静音 视频/音频
-	public changeMute({ id, isMute }: { id: string; isMute: boolean }): void {
+	public changeMute({ id, isMute, isUpdate = true }: { id: string; isMute: boolean, isUpdate?: boolean }): void {
 		const editorTrack = this.tracks.find((track: any) => track.editorType === "表情包");
 		const index = editorTrack.clips.findIndex((item: any) => item.id === id);
 		if (index !== -1) {
@@ -274,6 +281,7 @@ class VmmlConverter {
 			}
 		}
 
+		if (isUpdate) this?.updatePlayer?.(this.vmml)
 		// console.log("changeMute 最终Vmml", this.vmml);
 	}