@versa_ai/vmml-editor 1.0.11 → 1.0.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@versa_ai/vmml-editor",
-  "version": "1.0.11",
+  "version": "1.0.13",
   "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-player": "1.1.14",
-    "@versa_ai/vmml-utils": "1.0.14"
+    "@versa_ai/vmml-utils": "1.0.15",
+    "@versa_ai/vmml-player": "1.1.15"
   },
   "devDependencies": {
     "@biomejs/biome": "^1.7.1",

package/src/assets/css/index.scss

@@ -1,7 +1,6 @@
 .editor{
   background: #000;
   width: 100%;
-  min-height: 100vh;
   overflow: hidden;
   display: flex;
   flex-direction: column;
@@ -59,12 +58,16 @@
   }
 
   .editor-vessel {
-    padding-top: 3.2vw;
+    width: 100%;
+    // padding-top: 3.2vw;
+    height: 100%;
   }
   //player与画布
   .main{
-    width: 81.467vw;
-    height: 144.8vw;
+    // width: 81.467vw;
+    width: 100%;
+    height: 100%;
+    // height: 144.8vw;
     margin: auto;
     position: relative;
     display: flex;
@@ -250,3 +253,64 @@
   }
 
 }
+
+@media screen and (min-width: 750px) {
+  .editor {
+    .controls-box {
+      height: 20% !important;
+      border-radius: 3.2vw;
+    }
+    .player-controls {
+      display: flex;
+      align-items: center;
+      width: 100%;
+      height: 100%;
+      padding: 0 1%;
+      .mr-16 {
+        margin-right: 2.13vw;
+      }
+      .player-controls-toggle {
+        >img {
+          display: block;
+          width: 40px !important;
+          height: 40px !important;
+          cursor: pointer;
+        }
+      }
+      .player-controls-seekbar {
+        flex: 1;
+        .seekbar-container {
+          height: 2px !important;
+          .seekbar-background {
+            height: 10px !important;
+            width: 100%;
+            border-radius: 1vw;
+            .seekbar-fill {
+              width: 100%;
+              height: 80%;
+              border-radius: 1vw;
+            }
+            .seekbar-line {
+              height: 100%;
+              border-radius: 1vw;
+            }
+            .seekbar-sign {
+              width: 10px;
+              top: 50%;
+              margin-top: -6px;
+            }
+            .seekbar-cirle {
+              top: -10px !important;
+              width: 40px !important;
+              height: 40px !important;
+            }
+          }
+        }
+      }
+      .player-controls-time {
+        width: 6vw !important;
+      }
+    }
+  }
+}
+

package/src/components/EditorCanvas.tsx

@@ -347,21 +347,43 @@ const EditorCanvas = forwardRef(
 				waitFcTasks.current.push(createTextFromClip.bind(this, clip));
 			}
 		}
+
+		// 生成简短的字体名称
+		const getFontFamilyName = (url: string) => {
+			// 从URL中提取文件名作为字体名称
+			const filename = url.split('/').pop() || '';
+			const name = filename.replace(/\.(ttf|otf|woff2?|eot)$/i, '');
+			return `CustomFont_${name.substring(0, 20)}`; // 限制长度
+		};
+
+		// 检测字体格式
+		const detectFontFormat = (url: string) => {
+			const lower = url.toLowerCase();
+			if (lower.includes('.woff2')) return 'woff2';
+			if (lower.includes('.woff')) return 'woff';
+			if (lower.includes('.otf')) return 'opentype';
+			if (lower.includes('.ttf')) return 'truetype';
+			return null;
+		};
 		
 		const embedFontInSVG = async (svgString: string, url: string) => {
-			if (url) {
-				const res = await urlToBlob({ url });
-				const fontFace = `
-					@font-face {
-						font-family: 'font-${url}';
-						src: url(${res});
-					}
-				`;
-				const styleElement = `<style type="text/css"><![CDATA[${fontFace}]]></style>`;
-				return svgString.replace('</svg>', `${styleElement}</svg>`);
-			}
-			return svgString
-		}
+    if (url) {
+      const res = await urlToBlob({ url });
+      const format = detectFontFormat(url);
+      const fontFamilyName = getFontFamilyName(url);
+      const srcValue = format ? `url('${res}') format('${format}')` : `url('${res}')`;
+      const fontFace = `
+        @font-face {
+          font-family: '${fontFamilyName}';
+          src: ${srcValue};
+        }
+      `;
+      const styleElement = `<style type="text/css"><![CDATA[${fontFace}]]></style>`;
+      const result = svgString.replace('</svg>', `${styleElement}</svg>`);
+      return result;
+    }
+    return svgString
+  }
 
 		//文字转图片
 		const createTextImg = async ({ textContent, bgColor, textColor, fontAssetUrl = null, textBasicInfo }: any) => {
@@ -373,13 +395,14 @@ const EditorCanvas = forwardRef(
 			container.style.display = 'inline-block'
 			container.style.textAlign = textBasicInfo.textAlign || 'left';
 			const lines = textContent.split('\n');
+			const fontFamily = fontAssetUrl ? getFontFamilyName(fontAssetUrl) : 'sansMedium';
 			lines.forEach((line: string) => {
 				const p = document.createElement('p');
 				p.style.color = textColor;
 				p.style.fontSize = '22px'
 				p.style.lineHeight = '22px'
 				const font = fontAssetUrl ? `font-${fontAssetUrl}` : 'sansMedium';
-				p.style.fontFamily = font
+				p.style.fontFamily = fontFamily;
 				p.style.whiteSpace = "nowrap"
 				// p.style.backgroundColor = bgColor;
 				p.style.padding = '0';

package/src/index.tsx

@@ -26,6 +26,7 @@ const EditorFn = <Schema extends AnyZodObject, Props>(
 		editableArray = [],
 		templateId,
 		strategyId,
+		height = '100vh',
 		pauseWhenBuffering = false,
 	}: any,
 	ref: any,
@@ -444,7 +445,7 @@ const EditorFn = <Schema extends AnyZodObject, Props>(
 
 	return (
 		<>
-			<div className="editor">
+			<div className="editor"  style={{ height }}>
 				<div className="editor-vessel" onClick={() => {
 					setMenuState("")
 				}}>
@@ -496,7 +497,8 @@ const EditorFn = <Schema extends AnyZodObject, Props>(
 					</section>
 				</div>
 				<div className="padding-box"></div>
-						<section style={menuStyles} className={`footer ${menuState === 'text' ? 'text-style' : ''}`}>
+					{
+						(maxText > 0 || maxVideo > 0) && <section style={menuStyles} className={`footer ${menuState === 'text' ? 'text-style' : ''}`}>
 							{
 								maxText > 0 && (
 									<div
@@ -524,6 +526,8 @@ const EditorFn = <Schema extends AnyZodObject, Props>(
 								)
 							}
 						</section>
+					}
+						
 						{
 							maxVideo > 0 && (
 								<VideoMenu menuState={menuState} createImage={createImage} videoMenus={videoMenus} />