@versa_ai/vmml-editor 1.0.13 → 1.0.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@versa_ai/vmml-editor",
-  "version": "1.0.13",
+  "version": "1.0.14",
   "module": "dist/index.mjs",
   "main": "dist/index.mjs",
   "types": "dist/index.d.mts",
@@ -16,8 +16,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.15"
+    "@versa_ai/vmml-player": "1.1.15",
+    "@versa_ai/vmml-utils": "1.0.15"
   },
   "devDependencies": {
     "@biomejs/biome": "^1.7.1",

package/src/assets/css/index.scss

@@ -272,8 +272,8 @@
       .player-controls-toggle {
         >img {
           display: block;
-          width: 40px !important;
-          height: 40px !important;
+          width: 30px !important;
+          height: 30px !important;
           cursor: pointer;
         }
       }
@@ -282,7 +282,7 @@
         .seekbar-container {
           height: 2px !important;
           .seekbar-background {
-            height: 10px !important;
+            height: 8px !important;
             width: 100%;
             border-radius: 1vw;
             .seekbar-fill {
@@ -300,9 +300,9 @@
               margin-top: -6px;
             }
             .seekbar-cirle {
-              top: -10px !important;
-              width: 40px !important;
-              height: 40px !important;
+              top: -5px !important;
+              width: 20px !important;
+              height: 20px !important;
             }
           }
         }

package/src/components/EditorCanvas.tsx

@@ -8,7 +8,7 @@ import { usePeekControl } from "../utils/usePeekControl";
 import { toSvg } from 'dom-to-image'
 
 const EditorCanvas = forwardRef(
-	({ previewState, showCanvas, canvasSize, enterPreview, intoTextEdit, frame, vmml, dragState, initFcObjs, onVideoChange }: any, ref: any) => {
+	({ previewState, showCanvas, canvasSize, enterPreview, intoTextEdit, frame, vmml, dragState, initFcObjs, onVideoChange, isBatchModify, hideConfig }: any, ref: any) => {
 		const [fc, setFc] = useState<any>(null);
 		const [history, setHistory] = useState<any>(null);
 		const waitFcTasks = useRef<any>([]);
@@ -30,7 +30,7 @@ const EditorCanvas = forwardRef(
 			}
 			setFc(canvas);
 			initCanvasEvent(canvas);
-			usePeekControl(canvas);
+			usePeekControl(canvas, hideConfig);
 		};
 
 		const createFcObjs = (canvas: any) => {
@@ -71,7 +71,7 @@ const EditorCanvas = forwardRef(
 				if (active) {
 					if (active.isSelected !== null && active.clipData.type === "文字") {
 						//文字内容双击
-						imitateDBclick(active, canvas);
+						if (!hideConfig.hideEdit) imitateDBclick(active, canvas);
 					}
 				} else {
 						enterPreview(canvas);
@@ -401,7 +401,6 @@ const EditorCanvas = forwardRef(
 				p.style.color = textColor;
 				p.style.fontSize = '22px'
 				p.style.lineHeight = '22px'
-				const font = fontAssetUrl ? `font-${fontAssetUrl}` : 'sansMedium';
 				p.style.fontFamily = fontFamily;
 				p.style.whiteSpace = "nowrap"
 				// p.style.backgroundColor = bgColor;

package/src/components/SeekBar.tsx

@@ -16,13 +16,14 @@ const getFrameFromX = (
 	);
 	return frame;
 };
-console.log(2222)
 const SeekBar = ({ player, vmmlRef, frame, durationInFrames, intoEdit, setDragState, signList }: any ) => {
 	const containerRef = useRef<HTMLDivElement>(null);
   const [dragging, setDragging] = useState<any>({
     dragging: false,
   })
 
+  const max750 = document.body.clientWidth > 750
+
   const fillStyle = useMemo(() => {
     return {
       width: `${(frame / (durationInFrames - 1)) * 100}%`,
@@ -31,7 +32,7 @@ const SeekBar = ({ player, vmmlRef, frame, durationInFrames, intoEdit, setDragSt
 
   const cirleStyle = useMemo(() => {
     return {
-      left: `calc(${(frame / (durationInFrames - 1)) * 100}% - 1.6vw)`,
+      left: `calc(${(frame / (durationInFrames - 1)) * 100}% - ${max750 ? '10px' : '1.6vw'})`,
     }
   }, [frame, durationInFrames])
 

package/src/index.tsx

@@ -28,6 +28,8 @@ const EditorFn = <Schema extends AnyZodObject, Props>(
 		strategyId,
 		height = '100vh',
 		pauseWhenBuffering = false,
+		isBatchModify = false,
+		hideConfig = null // { hideDelete: false, hideEdit: false, hideMute: false, hideVolume: false }
 	}: any,
 	ref: any,
 ) => {
@@ -477,6 +479,8 @@ const EditorFn = <Schema extends AnyZodObject, Props>(
 							dragState={dragState}
 							initFcObjs={initFcObjs}
 							onVideoChange={onVideoChange}
+							isBatchModify={isBatchModify}
+							hideConfig={hideConfig}
 							// textInfoReset={textInfoReset}
 						/>
 						<div className="controls-box">
@@ -527,12 +531,11 @@ const EditorFn = <Schema extends AnyZodObject, Props>(
 							}
 						</section>
 					}
-						
-						{
-							maxVideo > 0 && (
-								<VideoMenu menuState={menuState} createImage={createImage} videoMenus={videoMenus} />
-							)
-						}
+					{
+						maxVideo > 0 && (
+							<VideoMenu menuState={menuState} createImage={createImage} videoMenus={videoMenus} />
+						)
+					}
 					{menuState === "text" && (
 						<TextMenu ref={textMenuRef} createText={createText} textClose={textClose} textInfo={textInfo} showTextButtons={showTextButtons} />
 					)}

package/src/utils/usePeekControl.ts

@@ -17,14 +17,14 @@ function drawImg(
 }
 
 // 顶点
-function usePeekControl(canvas: fabric.Canvas) {
+function usePeekControl(canvas: fabric.Canvas, hideConfig: any) {
 	const iconUrls = {
-		delete: "https://mass.alipay.com/finmedia_versaassets/uri/file/as/0c7084a9-6067-4277-a5af-2932983cbeb7.png",
+		delete: "https://mass.alipay.com/finmedia_versaassets/uri/file/as/0c7084a9-6067-4277-a5af-2932983cbeb7.png", // 删除
 		// zoom: "https://mass.alipay.com/finmedia_versaassets/uri/file/as/ff6aea73-4d12-4201-9404-3134d5f9525c.png",
-		zoom: "https://mass.alipay.com/finmedia_versaassets/uri/file/as/0909485d-46db-47b4-8bb1-5a686510ddb3.png",
-		mute: "https://mass.alipay.com/finmedia_versaassets/uri/file/as/3fef2c5d-7576-424d-813c-34508b051884.png",
-		volume: "https://mass.alipay.com/finmedia_versaassets/uri/file/as/1ab2e829-c5b1-4177-8554-ae2f74b02e1d.png",
-		edit: "https://mass.alipay.com/finmedia_versaassets/uri/file/as/9e9ed472-62cf-4b71-891f-bc08c8b08a5d.png"
+		zoom: "https://mass.alipay.com/finmedia_versaassets/uri/file/as/0909485d-46db-47b4-8bb1-5a686510ddb3.png", // 缩放
+		mute: "https://mass.alipay.com/finmedia_versaassets/uri/file/as/3fef2c5d-7576-424d-813c-34508b051884.png", // 静音
+		volume: "https://mass.alipay.com/finmedia_versaassets/uri/file/as/1ab2e829-c5b1-4177-8554-ae2f74b02e1d.png", // 音量
+		edit: "https://mass.alipay.com/finmedia_versaassets/uri/file/as/9e9ed472-62cf-4b71-891f-bc08c8b08a5d.png", // 编辑
 	};
 	const createIconElement = (url: string) => {
 		const img = document.createElement("img");
@@ -35,6 +35,7 @@ function usePeekControl(canvas: fabric.Canvas) {
 	// 删除选中元素
 	const deleteObject = (mouseEvent: MouseEvent, target: fabric.Transform) => {
 		if (target.action === "rotate") return true;
+		if (hideConfig.hideDelete) return true
 		const activeObject = canvas.getActiveObjects();
 		if (activeObject) {
 			activeObject.map((item: any) => canvas.remove(item));
@@ -43,11 +44,11 @@ function usePeekControl(canvas: fabric.Canvas) {
 		}
 		return true;
 	};
-	const delImg = createIconElement(iconUrls.delete);
-	const zoomImg = createIconElement(iconUrls.zoom);
-	const muteImg = createIconElement(iconUrls.mute);
-	const volumeImg = createIconElement(iconUrls.volume);
-	const editImg = createIconElement(iconUrls.edit);
+	const delImg = createIconElement(iconUrls.delete)
+	const zoomImg = createIconElement(iconUrls.zoom)
+	const muteImg = createIconElement(iconUrls.mute)
+	const volumeImg = createIconElement(iconUrls.volume)
+	const editImg = createIconElement(iconUrls.edit)
 	//渲染删除图标
 	const renderDelIcon = (
 		ctx: CanvasRenderingContext2D,
@@ -56,7 +57,7 @@ function usePeekControl(canvas: fabric.Canvas) {
 		styleOverride: any,
 		fabricObject: fabric.Object,
 	) => {
-		drawImg(ctx, left, top, delImg, 28, 28, fabricObject.angle);
+		if (!hideConfig.hideDelete) drawImg(ctx, left, top, delImg, 28, 28, fabricObject.angle);
 	};
 	//渲染旋转缩放图标
 	const renderIconRotate = (
@@ -117,7 +118,7 @@ function usePeekControl(canvas: fabric.Canvas) {
 	) => {
 		if (!fabricObject.clipData) return false;
 		if (fabricObject.clipData.type === '文字') {
-			drawImg(ctx, left, top, editImg, 28, 28, fabricObject.angle);
+			if (!hideConfig.hideEdit) drawImg(ctx, left, top, editImg, 28, 28, fabricObject.angle);
 		}
 	};
 	const multiAction = (eventData: any, transform: any, x: any, y: any)=>{
@@ -139,6 +140,7 @@ function usePeekControl(canvas: fabric.Canvas) {
 	};
 	//暴露文字编辑方法
 	const editAction = (eventData: any, transform: any, x: any, y: any) => {
+		if (hideConfig.hideEdit) return true
 		if (transform.target.clipData.type === '文字') {
 			canvas.fire("object:textEdit", { target: transform.target });
 		}