feat: full studio build -- light theme, canvas thumbnails, i18n (fa/en)

src/components/studio/canvas/VideoLayerNode.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import { Rect, Text } from "react-konva";
+import type Konva from "konva";
+
+import type { Layer } from "@/lib/studio-types";
+
+function getVideoSrc(props: Layer["props"]): string | undefined {
+  return typeof props.src === "string" && props.src.length > 0
+    ? props.src
+    : undefined;
+}
+
+export interface VideoLayerNodeProps {
+  layer: Layer;
+  onSelect: () => void;
+  onDragEnd: (x: number, y: number) => void;
+  onTransformEnd: (node: Konva.Node) => void;
+  registerNode: (id: string, node: Konva.Node | null) => void;
+}
+
+export function VideoLayerNode({
+  layer,
+  onSelect,
+  onDragEnd,
+  onTransformEnd,
+  registerNode,
+}: VideoLayerNodeProps) {
+  const hasVideo = Boolean(getVideoSrc(layer.props));
+  const fileName =
+    typeof layer.props.fileName === "string" ? layer.props.fileName : "Video";
+
+  return (
+    <>
+      <Rect
+        ref={(node) => registerNode(layer.id, node)}
+        x={layer.x}
+        y={layer.y}
+        width={layer.width}
+        height={layer.height}
+        rotation={layer.rotation}
+        opacity={layer.opacity}
+        fill={hasVideo ? "#1F2937" : "#374151"}
+        stroke="#6B7280"
+        strokeWidth={1}
+        dash={hasVideo ? undefined : [8, 4]}
+        draggable
+        onMouseDown={(event) => {
+          event.cancelBubble = true;
+          onSelect();
+        }}
+        onTap={(event) => {
+          event.cancelBubble = true;
+          onSelect();
+        }}
+        onDragEnd={(event) => onDragEnd(event.target.x(), event.target.y())}
+        onTransformEnd={(event) => onTransformEnd(event.target)}
+      />
+      <Text
+        x={layer.x}
+        y={layer.y + layer.height / 2 - 10}
+        width={layer.width}
+        height={20}
+        rotation={layer.rotation}
+        text={hasVideo ? fileName : "Video clip"}
+        fontSize={14}
+        fill="#E5E7EB"
+        align="center"
+        listening={false}
+      />
+    </>
+  );
+}