@codivion/editor-preview-area
Version:
Preview area component for timeline video editor projects
145 lines (144 loc) • 8.09 kB
JavaScript
;
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
Object.defineProperty(exports, "__esModule", { value: true });
var jsx_runtime_1 = require("react/jsx-runtime");
var react_1 = require("react");
require("./styles.css");
var PreviewArea = function (_a) {
var _b;
var projectData = _a.projectData, currentTime = _a.currentTime, _c = _a.isPlaying, isPlaying = _c === void 0 ? false : _c, _d = _a.aspectRatio, aspectRatio = _d === void 0 ? "16:9" : _d, _e = _a.width, width = _e === void 0 ? 480 : _e, _f = _a.height, height = _f === void 0 ? 270 : _f;
var canvasSize = ((_b = projectData.settings) === null || _b === void 0 ? void 0 : _b.canvas) || {
width: 1920,
height: 1080,
};
var canvasAspect = canvasSize.width / canvasSize.height;
var containerAspect = width / height;
var scaleX, scaleY;
if (containerAspect > canvasAspect) {
scaleY = height / canvasSize.height;
scaleX = scaleY;
}
else {
scaleX = width / canvasSize.width;
scaleY = scaleX;
}
var displayWidth = canvasSize.width * scaleX;
var displayHeight = canvasSize.height * scaleY;
var offsetX = (width - displayWidth) / 2;
var offsetY = (height - displayHeight) / 2;
var visibleElements = (0, react_1.useMemo)(function () {
var elements = [];
if (projectData.globalElements) {
projectData.globalElements.forEach(function (element, index) {
if (currentTime >= element.properties.start &&
currentTime <= element.properties.start + element.properties.duration) {
elements.push(__assign(__assign({}, element), { zIndex: 1000 + index }));
}
});
}
projectData.scenes.forEach(function (scene, sceneIndex) {
var sceneStart = scene.settings.start;
var sceneEnd = sceneStart + scene.settings.duration;
if (currentTime >= sceneStart && currentTime <= sceneEnd) {
scene.elements.forEach(function (element, elementIndex) {
var elementStart = sceneStart + element.properties.start;
var elementEnd = elementStart + element.properties.duration;
if (currentTime >= elementStart && currentTime <= elementEnd) {
elements.push(__assign(__assign({}, element), { zIndex: sceneIndex * 100 + elementIndex }));
}
});
}
});
return elements.sort(function (a, b) { return a.zIndex - b.zIndex; });
}, [projectData, currentTime]);
var renderElement = function (element) {
var _a = element.properties, _b = _a.position, _c = _b === void 0 ? {} : _b, _d = _c.x, x = _d === void 0 ? 0 : _d, _e = _c.y, y = _e === void 0 ? 0 : _e, _f = _a.size, _g = _f === void 0 ? {} : _f, _h = _g.width, elementWidth = _h === void 0 ? 100 : _h, _j = _g.height, elementHeight = _j === void 0 ? 100 : _j, _k = _a.opacity, opacity = _k === void 0 ? 1 : _k, _l = _a.rotation, rotation = _l === void 0 ? 0 : _l, _m = _a.scaleX, sx = _m === void 0 ? 1 : _m, _o = _a.scaleY, sy = _o === void 0 ? 1 : _o, source = _a.src, text = _a.text, _p = _a.fontSize, fontSize = _p === void 0 ? 16 : _p, _q = _a.fontFamily, fontFamily = _q === void 0 ? "Arial" : _q, _r = _a.color, color = _r === void 0 ? "#ffffff" : _r, backgroundColor = _a.backgroundColor;
// X, Y = sol üst köşe, yüzde bazlı, 0-100 arası
var pixelX = offsetX + (x / 100) * displayWidth;
var pixelY = offsetY + (y / 100) * displayHeight;
var pixelWidth = (elementWidth / 100) * displayWidth;
var pixelHeight = (elementHeight / 100) * displayHeight;
var style = {
position: "absolute",
left: "".concat(pixelX, "px"),
top: "".concat(pixelY, "px"),
width: "".concat(pixelWidth, "px"),
height: "".concat(pixelHeight, "px"),
opacity: opacity,
transform: "rotate(".concat(rotation, "deg) scaleX(").concat(sx, ") scaleY(").concat(sy, ")"),
zIndex: element.zIndex,
backgroundColor: backgroundColor,
overflow: "hidden",
pointerEvents: "none",
};
switch (element.type) {
case "image":
return ((0, jsx_runtime_1.jsx)("div", { style: style, children: source ? ((0, jsx_runtime_1.jsx)("img", { src: source, alt: element.name, style: { width: "100%", height: "100%", objectFit: "cover" } })) : ((0, jsx_runtime_1.jsx)("div", { style: {
width: "100%",
height: "100%",
backgroundColor: "#666",
color: "#fff",
fontSize: 12,
display: "flex",
alignItems: "center",
justifyContent: "center",
}, children: "Image" })) }, element.id));
case "video":
return ((0, jsx_runtime_1.jsx)("div", { style: style, children: source ? ((0, jsx_runtime_1.jsx)("video", { src: source, style: { width: "100%", height: "100%", objectFit: "cover" }, muted: true, playsInline: true })) : ((0, jsx_runtime_1.jsx)("div", { style: {
width: "100%",
height: "100%",
backgroundColor: "#333",
color: "#fff",
fontSize: 12,
display: "flex",
alignItems: "center",
justifyContent: "center",
}, children: "Video" })) }, element.id));
case "text":
return ((0, jsx_runtime_1.jsx)("div", { style: __assign(__assign({}, style), { display: "flex", alignItems: "center", justifyContent: "center", fontSize: "".concat(fontSize, "px"), fontFamily: fontFamily, color: color, textAlign: "center", wordBreak: "break-word" }), children: text || element.name }, element.id));
default:
return null;
}
};
var containerStyle = {
width: "".concat(width, "px"),
height: "".concat(height, "px"),
backgroundColor: projectData.settings.backgroundColor || "#000000",
position: "relative",
overflow: "hidden",
border: "1px solid rgba(255, 255, 255, 0.1)",
borderRadius: "8px",
};
var canvasAreaStyle = {
position: "absolute",
left: "".concat(offsetX, "px"),
top: "".concat(offsetY, "px"),
width: "".concat(displayWidth, "px"),
height: "".concat(displayHeight, "px"),
backgroundColor: projectData.settings.backgroundColor || "#1a1a1a",
border: "1px solid rgba(255, 255, 255, 0.2)",
};
return ((0, jsx_runtime_1.jsx)("div", { className: "preview-area-container", children: (0, jsx_runtime_1.jsxs)("div", { style: containerStyle, className: "preview-canvas", children: [(0, jsx_runtime_1.jsx)("div", { style: canvasAreaStyle }), visibleElements.map(renderElement), isPlaying && ((0, jsx_runtime_1.jsxs)("div", { style: {
position: "absolute",
top: 8,
left: 8,
backgroundColor: "rgba(0,0,0,0.7)",
color: "#fff",
padding: "4px 8px",
borderRadius: 4,
fontSize: 12,
fontFamily: "monospace",
zIndex: 10000,
}, children: [currentTime.toFixed(2), "s"] }))] }) }));
};
exports.default = PreviewArea;