@remotion/studio
Version:
APIs for interacting with the Remotion Studio
62 lines (61 loc) • 2.38 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.TimelineImageInfo = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const timeline_layout_1 = require("../../helpers/timeline-layout");
const HEIGHT = (0, timeline_layout_1.getTimelineLayerHeight)('image') - 2;
const containerStyle = {
height: HEIGHT,
width: '100%',
backgroundColor: 'rgba(0, 0, 0, 0.3)',
display: 'flex',
borderTopLeftRadius: 2,
borderBottomLeftRadius: 2,
};
const TimelineImageInfo = ({ src, visualizationWidth }) => {
const ref = (0, react_1.useRef)(null);
(0, react_1.useEffect)(() => {
const { current } = ref;
if (!current) {
return;
}
const canvas = document.createElement('canvas');
canvas.width = visualizationWidth * window.devicePixelRatio;
canvas.height = HEIGHT * window.devicePixelRatio;
canvas.style.width = visualizationWidth + 'px';
canvas.style.height = HEIGHT + 'px';
const ctx = canvas.getContext('2d');
if (!ctx) {
return;
}
current.appendChild(canvas);
const img = new Image();
img.crossOrigin = 'anonymous';
img.onload = () => {
const scale = (HEIGHT * window.devicePixelRatio) / img.naturalHeight;
const scaledWidth = img.naturalWidth * scale;
const scaledHeight = HEIGHT * window.devicePixelRatio;
const offscreen = document.createElement('canvas');
offscreen.width = scaledWidth;
offscreen.height = scaledHeight;
const offCtx = offscreen.getContext('2d');
if (!offCtx) {
return;
}
offCtx.drawImage(img, 0, 0, scaledWidth, scaledHeight);
const pattern = ctx.createPattern(offscreen, 'repeat-x');
if (!pattern) {
return;
}
ctx.fillStyle = pattern;
ctx.fillRect(0, 0, visualizationWidth * window.devicePixelRatio, HEIGHT * window.devicePixelRatio);
};
img.src = src;
return () => {
current.removeChild(canvas);
};
}, [src, visualizationWidth]);
return jsx_runtime_1.jsx("div", { ref: ref, style: containerStyle });
};
exports.TimelineImageInfo = TimelineImageInfo;