@versa_ai/vmml-editor 1.0.2

package/src/components/SeekBar.tsx

@@ -0,0 +1,126 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react"
+import { interpolate } from "remotion"
+import { signIcon } from "../utils/const"
+
+const getFrameFromX = (
+	clientX: number,
+	durationInFrames: number,
+	width: number,
+) => {
+	const pos = clientX;
+	const frame = Math.round(
+		interpolate(pos, [0, width], [0, durationInFrames - 1], {
+			extrapolateLeft: 'clamp',
+			extrapolateRight: 'clamp',
+		}),
+	);
+	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 fillStyle = useMemo(() => {
+    return {
+      width: `${(frame / (durationInFrames - 1)) * 100}%`,
+    }
+  }, [frame, durationInFrames]);
+
+  const cirleStyle = useMemo(() => {
+    return {
+      left: `calc(${(frame / (durationInFrames - 1)) * 100}% - 1.6vw)`,
+    }
+  }, [frame, durationInFrames])
+
+  const onPointerDown = useCallback((e: React.PointerEvent) => {
+    if (e.button !== 0) {
+      return;
+    }
+    const { left, width } = containerRef.current?.getBoundingClientRect() as any;
+    const _frame = getFrameFromX(
+      e.clientX - left,
+      durationInFrames,
+      width,
+    );
+    setDragState(1);
+    setDragging({
+      dragging: true,
+      wasPlaying: player.isPlaying(),
+    });
+    player.pause();
+    player.seekTo(_frame);
+    vmmlRef.current && vmmlRef.current.onSeekStart();
+  }, [player, durationInFrames]);
+
+  const onPointerMove = useCallback((e: PointerEvent) => {
+    if (!dragging.dragging) {
+      return;
+    }
+    const { left, width } = containerRef.current?.getBoundingClientRect() as any;
+    const _frame = getFrameFromX(
+      e.clientX - left,
+      durationInFrames,
+      width,
+    );
+    setDragState(2);
+    player.seekTo(_frame);
+  }, [player, dragging.dragging, durationInFrames]);
+
+  const onPointerUp = (e: any) => {
+    setDragging({
+			dragging: false,
+		});
+    if (!dragging.dragging) {
+      return;
+    }
+    setDragState(3);
+    intoEdit();
+    vmmlRef.current && vmmlRef.current.onSeekEnd();
+  };
+
+  const onClickSign = (sign: any) => {
+    player.pause();
+    player.seekTo(sign.inFrame);
+    vmmlRef.current && vmmlRef.current.onSeekStart();
+    setTimeout(() => {
+      setDragState(4);
+      intoEdit(sign.inFrame);
+      vmmlRef.current && vmmlRef.current.onSeekEnd();
+    }, 100)
+  }
+
+  useEffect(() => {
+    if (!dragging.dragging) {
+			return;
+		}
+    const body = document.querySelector("body");
+    if (body) {
+      body.addEventListener('pointermove', onPointerMove);
+      body.addEventListener('pointerup', onPointerUp);
+      return () => {
+        body.removeEventListener('pointermove', onPointerMove);
+        body.removeEventListener('pointerup', onPointerUp);
+      };
+    }
+	}, [dragging.dragging, onPointerMove, onPointerUp]);
+
+  return (
+      <div ref={containerRef} className="seekbar-container">
+        <div className="seekbar-background">
+          <div className="seekbar-fill" onPointerDown={onPointerDown}></div>
+          <div className="seekbar-line" style={fillStyle}></div>
+            <div className="seekbar-signs">
+            {signList.map((item: any, index: number) => (
+              <img key={index} onClick={() => onClickSign(item)} style={{ left: `calc(${item.inFrame / durationInFrames * 100}% - 6px)` }} className="seekbar-sign" src={signIcon} alt="" />
+            ))}
+          </div>
+          <div className="seekbar-cirle" style={cirleStyle} onPointerDown={onPointerDown} />
+        </div>
+    </div>
+  )
+}
+
+export default SeekBar

package/src/components/TextMenu.tsx

@@ -0,0 +1,332 @@
+import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
+import "../assets/css/editorTextMenu.scss";
+import { closeIcon } from "../utils/const";
+import { isIOS } from '@versa_ai/vmml-utils'
+import { onKeyBoardAction, watchKeyBoard, canAdapter } from "../utils/keyBoardUtils";
+import ColorSelector from "./ColorSelector";
+// 处理文本内容，总共40个字
+const formatText = (text: string, maxLengthBase = 40): string => {
+	// 正则表达式匹配所有类型的换行符
+	const newlineRegex = /(\r\n|\r|\n)/g;
+	const matches = text.match(newlineRegex)?.length || 0;
+	const maxLength = maxLengthBase + matches
+	let trimmedText = text.substring(0, maxLength)
+	if ((text.length - matches) === maxLengthBase) {
+		// 正则表达式去除尾部的换行符
+		trimmedText = trimmedText.replace(/(\r\n|\r|\n)+$/g, '');
+	}
+	return trimmedText;
+};
+
+const TextMenu = forwardRef(({ createText, textClose, textInfo, showTextButtons }: any, ref: any) => {
+	const formRef = useRef<HTMLFormElement>(null);
+	const headerRef = useRef<HTMLDivElement>(null);
+	const textareaRef = useRef<HTMLTextAreaElement>(null);
+	const coverRef = useRef<HTMLDivElement>(null);
+	const mappingarea = useRef<HTMLDivElement>(null);
+	const [textContent, setTextContent] = useState("");
+	const [bgColor, setBgColor] = useState("transparent");
+	const [textColor, setTextColor] = useState("rgb(248,82,81)");
+	const [textPos, setTextPos] = useState<any>({ left: 0, top: 0, angle: 0, scaleX: 0.75, scaleY: 0.75, zoomX: 0, zoomY: 0 });
+	const [textBasicInfo, setTextBasicInfo] = useState<any>({
+		colorName: "red",
+		colorValue: "rgb(248,82,81)",
+		isBack: false,
+		textAlign: 'left'
+	});
+	const colorSelectorRef = useRef<any>(null);
+	const [textContentOnShow, setTextContentOnShow] = useState<any>([]);
+	const [scrollYValue, setScrollYValue] = useState(() => {
+		return Number.parseInt(localStorage.getItem('scrollYValue') as string) || null;
+	});
+	const scrollYValueRef = useRef(scrollYValue);
+	useEffect(() => {
+		const callback = (status: any) => {
+			if (scrollYValueRef.current === null) {
+				setTimeout(() => {
+					const newScrollYValue = window.scrollY;
+					setScrollYValue(newScrollYValue);
+					scrollYValueRef.current = newScrollYValue;
+					localStorage.setItem('scrollYValue', newScrollYValue.toString());
+				}, 150);
+			}
+			setTimeout(() => {
+				onKeyBoardAction(
+					status,
+					headerRef.current,
+					textareaRef.current,
+					coverRef.current,
+					mappingarea.current
+				);
+			}, 200);
+		};
+		const removeListeners = watchKeyBoard(callback);
+		// 清理函数，用于移除事件监听器
+		return () => {
+			removeListeners();
+		};
+	}, []);
+	useEffect(() => {
+		//设置同步滚动
+		const syncScroll = () => {
+			if (textareaRef.current && mappingarea.current) {
+				const scrollPosition = textareaRef.current.scrollTop;
+				mappingarea.current.scrollTop = scrollPosition;
+			}
+		};
+		if (textareaRef.current) {
+			// 添加滚动监听器到text-input
+			textareaRef.current.addEventListener("scroll", syncScroll);
+			// 添加输入监听器到textarea
+			textareaRef.current.addEventListener("input", syncScroll);
+		}
+
+		// 清理函数，移除监听器
+		return () => {
+			if (textareaRef.current) {
+				textareaRef.current.removeEventListener("scroll", syncScroll);
+				textareaRef.current.removeEventListener("input", syncScroll);
+			}
+		};
+	}, []);
+	useEffect(() => {
+		let lines = [];
+		//判断字符里是否存在\r
+		if (textContent.includes("\r")) {
+			lines = textContent.split("\r");
+		} else {
+			lines = textContent.split("\n");
+		}
+		setTextContentOnShow(lines);
+	}, [textContent]);
+
+	useEffect(() => {
+		if (Object.keys(textInfo).length > 0) {
+			setText(textInfo);
+		} else {
+			resetInfo();
+		}
+	}, [textInfo]);
+
+	useEffect(() => {
+		if (!isIOS()) {
+			if (mappingarea.current && textareaRef.current) {
+				textareaRef.current.style.position = 'static'
+				mappingarea.current.style.maxHeight = textareaRef.current.style.height = '50vh'
+				mappingarea.current.style.maxWidth = getComputedStyle(textareaRef.current).width;
+				textareaRef.current.focus();
+			}
+		} else {
+			if (textareaRef.current) {
+				textareaRef.current.focus();
+			}
+		}
+	}, [])
+	const handleOnChange = (e: any) => {
+		const inputValue = e.target.value;
+		setTextContent(formatText(inputValue));
+	};
+
+	const handleSubmit = (e: any) => {
+		if (showTextButtons) {
+			e.preventDefault();
+		}
+		if (formRef.current) {
+			const formData = new FormData(formRef.current);
+			// 也可以使用普通的对象：
+			const formJson = Object.fromEntries((formData as any).entries());
+			const { input_content } = formJson;
+			renderText(input_content);
+		}
+	};
+	const handleChangeColor = (item: any) => {
+		setColor(item);
+	};
+	const onBackGroundChange = (currentColorItem: string) => {
+		setColor(currentColorItem);
+	};
+	const setColor = (colorItem: any) => {
+		if (textareaRef.current) {
+			textareaRef.current.focus();
+		}
+		const { current } = colorSelectorRef;
+		const { colorName, colorValue } = colorItem;
+		const isBack = current ? current.getBackState() : false;
+		const textBasic = {
+			colorName,
+			colorValue,
+			isBack,
+			textAlign: textBasicInfo.textAlign
+		};
+		setTextBasicInfo(textBasic);
+		//给文字设置颜色
+		if (!isBack) {
+			setBgColor("transparent");
+			setTextColor(colorValue);
+		} else {
+			//给背景设置颜色
+			//点击切换颜色「非白色背景」，字都统一白色，背景变化对应颜色，若选择「白色背景」字变成黑色
+			setBgColor(colorValue);
+			colorName === "white" || colorValue === 'rgba(255, 255, 255, 1)' ? setTextColor("#000") : setTextColor("#fff");
+		}
+	};
+	const setText = (textInfo: any) => {
+		const { bgColor, text, textColor, left, top, angle, scaleX, scaleY, zoomX, zoomY, textBasicInfo, width, height } = textInfo;
+		const { isBack, colorName, colorValue } = textBasicInfo;
+		const fillColor = text === '请输入文案' && textColor === 'rgba(0, 0, 0, 0)' ? 'rgba(255, 255, 255, 1)' : textColor;
+		setBgColor(bgColor);
+		setTextColor(fillColor);
+		setTextContent(text);
+		setTextBasicInfo(textBasicInfo);
+		setTextPos({ left, top, angle, scaleX, scaleY, zoomX, zoomY, width, height });
+		const { current } = colorSelectorRef;
+		if (!current) return;
+		current.setIsSetBack(isBack);
+		current.setCurrentColorItem({ colorName, colorValue });
+	};
+
+	const resetInfo = () => {
+		//文字编辑缺省设置
+		setBgColor("transparent");
+		setTextColor("rgb(248,82,81)");
+		setTextContent("");
+		setTextPos({ left: 0, top: 0, angle: 0, scaleX: 0.75, scaleY: 0.75, zoomX: 0, zoomY: 0 });
+	};
+	const close = () => {
+		textClose(textInfo.id);
+	};
+	const renderText = (input_content?: string) => {
+		const { current } = mappingarea;
+		if (current) {
+			//获取映射区域的宽高传入画布，作为fabric文字的宽高
+			//获取计算属性
+			//在close时需要使用传入的textpos
+			const computedStyle = window.getComputedStyle(current);
+			const { width, height } = computedStyle;
+			setTextPos(
+				Object.assign(textPos, { width: Number(width.split("px")[0]), height: Number(height.split("px")[0]) }),
+			);
+		}
+		//判断是否空字符串，并且不全是空格
+		if (input_content && input_content.trim() !== "") {
+			const { id, fontFamily, fontAssetUrl } = textInfo;
+			//传递给父组件文字属性
+			//input_content带有换行符，所以不能用textContent传到player
+			createText({ textContent: input_content, bgColor, textColor, position: textPos, textBasicInfo, id, fontFamily, fontAssetUrl });
+		} else {
+			textClose(textInfo.id);
+		}
+	};
+	useImperativeHandle(ref, () => ({
+		setText,
+		close,
+		handleSubmit
+	}));
+
+	return (
+		<form method="post" onSubmit={handleSubmit} ref={formRef}>
+			<div className="overlay">
+				{/* 顶部 */}
+				{
+					showTextButtons && (
+						<div className="text-header" ref={headerRef}>
+							<div onClick={() => close()} className="close">
+								<img crossOrigin="anonymous" src={closeIcon} alt="close" />
+							</div>
+							<button type="submit" className="next-button">
+								完成
+							</button>
+						</div>
+					)
+				}
+				{
+					!isIOS() && (
+						<div className="edit_container" style={{
+							width: '100%', position: 'relative', paddingLeft: '4.4vw',
+							paddingRight: '3.2vw', display: 'flex'
+						}}>
+							{/* 编辑区 */}
+							<textarea
+								ref={textareaRef}
+								cols={20}
+								wrap="hard"
+								name="input_content"
+								className="text-input"
+								value={textContent}
+								onChange={handleOnChange}
+								style={{ color: textColor, width: '94%', fontFamily: textInfo.fontFamily }}
+							/>
+							{/* 映射颜色区域 */}
+							<div
+								className="mappingarea"
+								ref={mappingarea}
+								contentEditable
+								suppressContentEditableWarning
+								style={{
+									background: bgColor, position: 'absolute',
+									top: '0',
+									zIndex: '-1',
+									left: '4.4vw',
+								}}
+							>
+								{/* 颜色适应每行方案 */}
+								{textContentOnShow.map((text: string, index: number) => {
+									return (
+										<span className="mappingarea_span" key={index} style={{ maxWidth: '100%' }}>
+											{text ? text : " "}
+										</span>
+									);
+								})}
+							</div>
+						</div>
+					)
+				}
+				{
+					isIOS() && (
+						<>
+							{/* 编辑区 */}
+							<textarea
+								ref={textareaRef}
+								cols={20}
+								wrap="hard"
+								name="input_content"
+								className="text-input"
+								value={textContent}
+								onChange={handleOnChange}
+								style={{ color: textColor, fontFamily: textInfo.fontFamily }}
+							/>
+							{/* 映射颜色区域 */}
+							<div
+								className="mappingarea"
+								ref={mappingarea}
+								contentEditable
+								suppressContentEditableWarning
+								style={{ background: bgColor }}
+							>
+								{/* 颜色适应每行方案 */}
+								{textContentOnShow.map((text: string, index: number) => {
+									return (
+										<span className="mappingarea_span" key={index}>
+											{text ? text : " "}
+										</span>
+									);
+								})}
+							</div>
+						</>
+
+					)
+				}
+				{/* 颜色选择器 */}
+				<div ref={coverRef} className="cover">
+					<ColorSelector
+						ref={colorSelectorRef}
+						onColorChange={handleChangeColor}
+						onBackGroundChange={onBackGroundChange}
+					/>
+				</div>
+			</div>
+		</form>
+	);
+});
+
+export default TextMenu;

package/src/components/VideoMenu.tsx

@@ -0,0 +1,49 @@
+import { useEffect, useState } from "react"
+
+const VideoMenu = ({ createImage, videoMenus, menuState }: any) => {
+
+  const [active, setActive] = useState<number>();
+  const [menus, setMenus] = useState<any>([])
+  const [items, setItems] = useState<any>([]);
+
+  const onClickClass = ({ id, emojiList }: any) => {
+    setActive(id);
+    setItems(emojiList)
+  }
+
+  const onClickItem = ({ emojiId, fileUrl }: any) => {
+    if (menuState === "video") {
+      createImage(fileUrl, emojiId);
+    }
+  }
+
+  useEffect(() => {
+    setMenus(videoMenus);
+    if (videoMenus.length) {
+      onClickClass(videoMenus[0]);
+    }
+  }, [videoMenus]);
+
+  return (
+    <div className={`editor-video-menu ${menuState === "video" ? "active" : ""}`}>
+      <div className="editor-video-menu-header">
+        {
+          menus.map((item: any) => (
+            <div className={ active === item.id ? "active": "" } key={item.id} onClick={() => onClickClass(item)} >{item.classifyType}</div>
+          ))
+        }
+      </div>
+      <div className="editor-video-menu-itmes">
+        {
+          items.map((item: any) => (
+            <div key={item.emojiId} onClick={() => onClickItem(item)}>
+              <img loading="lazy" src={item.fileUrl.thumbnailUrl} alt="素材" />
+            </div>
+          ))
+        }
+      </div>
+    </div>
+  )
+}
+
+export default VideoMenu