add video shape
This commit is contained in:
hamid zarghami
@@ -1,7 +1,9 @@
|
||||
import { useEffect, useRef } from "react";
|
||||
import { Rect, Text } from "react-konva";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { Image as KonvaImage, Rect, Group, Circle, Text as KonvaText } from "react-konva";
|
||||
import Konva from "konva";
|
||||
import useImage from "use-image";
|
||||
import type { ShapeProps } from "./types";
|
||||
import { createPortal } from "react-dom";
|
||||
|
||||
const VideoShape = ({
|
||||
obj,
|
||||
@@ -11,33 +13,112 @@ const VideoShape = ({
|
||||
onUpdate,
|
||||
draggable,
|
||||
}: ShapeProps) => {
|
||||
const shapeRef = useRef<Konva.Rect>(null);
|
||||
const [thumbnailUrl, setThumbnailUrl] = useState<string | null>(null);
|
||||
const [showVideoModal, setShowVideoModal] = useState(false);
|
||||
const groupRef = useRef<Konva.Group>(null);
|
||||
const [image] = useImage(thumbnailUrl || "");
|
||||
|
||||
useEffect(() => {
|
||||
if (isSelected && shapeRef.current && transformerRef.current) {
|
||||
transformerRef.current.nodes([shapeRef.current]);
|
||||
if (!obj.videoUrl) return;
|
||||
|
||||
const video = document.createElement("video");
|
||||
video.src = obj.videoUrl;
|
||||
video.crossOrigin = "anonymous";
|
||||
video.muted = true;
|
||||
|
||||
const handleLoadedMetadata = () => {
|
||||
video.currentTime = 0.1;
|
||||
};
|
||||
|
||||
const handleSeeked = () => {
|
||||
const canvas = document.createElement("canvas");
|
||||
canvas.width = video.videoWidth || 400;
|
||||
canvas.height = video.videoHeight || 300;
|
||||
const ctx = canvas.getContext("2d");
|
||||
if (ctx) {
|
||||
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
|
||||
const thumbnail = canvas.toDataURL("image/png");
|
||||
setThumbnailUrl(thumbnail);
|
||||
}
|
||||
video.removeEventListener("seeked", handleSeeked);
|
||||
video.removeEventListener("loadedmetadata", handleLoadedMetadata);
|
||||
};
|
||||
|
||||
video.addEventListener("loadedmetadata", handleLoadedMetadata);
|
||||
video.addEventListener("seeked", handleSeeked);
|
||||
video.load();
|
||||
|
||||
return () => {
|
||||
video.removeEventListener("seeked", handleSeeked);
|
||||
video.removeEventListener("loadedmetadata", handleLoadedMetadata);
|
||||
};
|
||||
}, [obj.videoUrl]);
|
||||
|
||||
useEffect(() => {
|
||||
if (isSelected && groupRef.current && transformerRef.current && image) {
|
||||
transformerRef.current.nodes([groupRef.current]);
|
||||
transformerRef.current.getLayer()?.batchDraw();
|
||||
}
|
||||
}, [isSelected, transformerRef]);
|
||||
}, [isSelected, transformerRef, image]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!showVideoModal) return;
|
||||
|
||||
const handleEscape = (e: KeyboardEvent) => {
|
||||
if (e.key === "Escape") {
|
||||
setShowVideoModal(false);
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener("keydown", handleEscape);
|
||||
return () => {
|
||||
document.removeEventListener("keydown", handleEscape);
|
||||
};
|
||||
}, [showVideoModal]);
|
||||
|
||||
const containerWidth = obj.width || 400;
|
||||
const containerHeight = obj.height || 300;
|
||||
|
||||
const handlePlayClick = (e: Konva.KonvaEventObject<MouseEvent>) => {
|
||||
e.cancelBubble = true;
|
||||
const evt = e.evt;
|
||||
if (evt) {
|
||||
evt.stopPropagation();
|
||||
evt.stopImmediatePropagation();
|
||||
evt.preventDefault();
|
||||
evt.cancelBubble = true;
|
||||
}
|
||||
requestAnimationFrame(() => {
|
||||
setShowVideoModal(true);
|
||||
});
|
||||
};
|
||||
|
||||
const handleGroupClick = (e?: Konva.KonvaEventObject<MouseEvent>) => {
|
||||
if (e) {
|
||||
const target = e.target;
|
||||
if (target.hasName("playButton") || target.getParent()?.hasName("playButton")) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
if (groupRef.current) {
|
||||
onSelect(obj.id, groupRef.current);
|
||||
}
|
||||
};
|
||||
|
||||
if (!image) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Rect
|
||||
ref={shapeRef}
|
||||
<Group
|
||||
ref={groupRef}
|
||||
id={obj.id}
|
||||
x={obj.x}
|
||||
y={obj.y}
|
||||
width={obj.width || 400}
|
||||
height={obj.height || 300}
|
||||
fill="#000000"
|
||||
stroke={isSelected ? "#3b82f6" : "#666666"}
|
||||
strokeWidth={isSelected ? 3 : (obj.strokeWidth ?? 0)}
|
||||
rotation={obj.rotation || 0}
|
||||
draggable={draggable}
|
||||
onClick={() => {
|
||||
if (shapeRef.current) {
|
||||
onSelect(obj.id, shapeRef.current);
|
||||
}
|
||||
}}
|
||||
onClick={handleGroupClick}
|
||||
onDragEnd={(e) => {
|
||||
const node = e.target;
|
||||
onUpdate(obj.id, {
|
||||
@@ -45,38 +126,76 @@ const VideoShape = ({
|
||||
y: node.y(),
|
||||
});
|
||||
}}
|
||||
onTransformEnd={() => {
|
||||
const node = shapeRef.current;
|
||||
if (!node) return;
|
||||
|
||||
const scaleX = node.scaleX();
|
||||
const scaleY = node.scaleY();
|
||||
|
||||
node.scaleX(1);
|
||||
node.scaleY(1);
|
||||
|
||||
onUpdate(obj.id, {
|
||||
x: node.x(),
|
||||
y: node.y(),
|
||||
rotation: node.rotation(),
|
||||
width: Math.max(5, (obj.width || 400) * scaleX),
|
||||
height: Math.max(5, (obj.height || 300) * scaleY),
|
||||
});
|
||||
}}
|
||||
/>
|
||||
{obj.videoUrl && (
|
||||
<Text
|
||||
x={obj.x + (obj.width || 400) / 2}
|
||||
y={obj.y + (obj.height || 300) / 2}
|
||||
text="▶ ویدیو"
|
||||
fontSize={16}
|
||||
fill="#ffffff"
|
||||
fontFamily="irancell"
|
||||
align="center"
|
||||
verticalAlign="middle"
|
||||
offsetX={40}
|
||||
offsetY={8}
|
||||
>
|
||||
<Rect
|
||||
width={containerWidth}
|
||||
height={containerHeight}
|
||||
fill="#000000"
|
||||
stroke={isSelected ? "#3b82f6" : "#666666"}
|
||||
strokeWidth={isSelected ? 3 : (obj.strokeWidth ?? 0)}
|
||||
onClick={handleGroupClick}
|
||||
/>
|
||||
<KonvaImage
|
||||
x={0}
|
||||
y={0}
|
||||
width={containerWidth}
|
||||
height={containerHeight}
|
||||
image={image}
|
||||
onClick={handleGroupClick}
|
||||
/>
|
||||
<Group
|
||||
name="playButton"
|
||||
onClick={handlePlayClick}
|
||||
onTap={handlePlayClick}
|
||||
listening={true}
|
||||
>
|
||||
<Circle
|
||||
x={containerWidth / 2}
|
||||
y={containerHeight / 2}
|
||||
radius={30}
|
||||
fill="rgba(0, 0, 0, 0.6)"
|
||||
listening={false}
|
||||
/>
|
||||
<KonvaText
|
||||
x={containerWidth / 2}
|
||||
y={containerHeight / 2}
|
||||
text="▶"
|
||||
fontSize={24}
|
||||
fill="#ffffff"
|
||||
fontFamily="Arial"
|
||||
align="center"
|
||||
verticalAlign="middle"
|
||||
offsetX={12}
|
||||
offsetY={12}
|
||||
listening={false}
|
||||
/>
|
||||
</Group>
|
||||
</Group>
|
||||
{showVideoModal && createPortal(
|
||||
<div
|
||||
className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-75"
|
||||
onClick={() => setShowVideoModal(false)}
|
||||
>
|
||||
<div
|
||||
className="relative max-w-4xl w-full mx-4"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<button
|
||||
onClick={() => setShowVideoModal(false)}
|
||||
className="absolute -top-10 right-0 text-white text-2xl hover:text-gray-300"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
<video
|
||||
src={obj.videoUrl}
|
||||
controls
|
||||
autoPlay
|
||||
className="w-full h-auto"
|
||||
/>
|
||||
</div>
|
||||
</div>,
|
||||
document.body
|
||||
)}
|
||||
</>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user