@remotion/player
Version:
React component for embedding a Remotion preview into your app
81 lines (80 loc) • 2.89 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.calculateOuter = exports.calculateContainerStyle = exports.calculateOuterStyle = exports.calculateCanvasTransformation = void 0;
const remotion_1 = require("remotion");
const calculate_player_size_js_1 = require("./utils/calculate-player-size.js");
const calculateCanvasTransformation = ({ previewSize, compositionWidth, compositionHeight, canvasSize, }) => {
const scale = remotion_1.Internals.calculateScale({
canvasSize,
compositionHeight,
compositionWidth,
previewSize,
});
const correction = 0 - (1 - scale) / 2;
const xCorrection = correction * compositionWidth;
const yCorrection = correction * compositionHeight;
const width = compositionWidth * scale;
const height = compositionHeight * scale;
const centerX = canvasSize.width / 2 - width / 2;
const centerY = canvasSize.height / 2 - height / 2;
return {
centerX,
centerY,
xCorrection,
yCorrection,
scale,
};
};
exports.calculateCanvasTransformation = calculateCanvasTransformation;
const calculateOuterStyle = ({ config, style, canvasSize, overflowVisible, layout, }) => {
if (!config) {
return {};
}
return {
position: 'relative',
overflow: overflowVisible ? 'visible' : 'hidden',
...(0, calculate_player_size_js_1.calculatePlayerSize)({
compositionHeight: config.height,
compositionWidth: config.width,
currentSize: canvasSize,
height: style === null || style === void 0 ? void 0 : style.height,
width: style === null || style === void 0 ? void 0 : style.width,
}),
opacity: layout ? 1 : 0,
...style,
};
};
exports.calculateOuterStyle = calculateOuterStyle;
const calculateContainerStyle = ({ config, canvasSize, layout, scale, overflowVisible, }) => {
if (!config || !canvasSize || !layout) {
return {};
}
return {
position: 'absolute',
width: config.width,
height: config.height,
display: 'flex',
transform: `scale(${scale})`,
marginLeft: layout.xCorrection,
marginTop: layout.yCorrection,
overflow: overflowVisible ? 'visible' : 'hidden',
};
};
exports.calculateContainerStyle = calculateContainerStyle;
const calculateOuter = ({ layout, scale, config, overflowVisible, }) => {
if (!layout || !config) {
return {};
}
const { centerX, centerY } = layout;
return {
width: config.width * scale,
height: config.height * scale,
display: 'flex',
flexDirection: 'column',
position: 'absolute',
left: centerX,
top: centerY,
overflow: overflowVisible ? 'visible' : 'hidden',
};
};
exports.calculateOuter = calculateOuter;