@remotion/vercel 4.0.474 → 4.0.475

package/dist/esm/index.mjs

@@ -156,6 +156,32 @@ var lengthUnits = new Set([
   "vw"
 ]);
 var cssNumberRegex = /^([+-]?(?:\\d+\\.?\\d*|\\.\\d+))([a-zA-Z%]+)?$/;
+var transformOriginKeywords = new Set([
+  "left",
+  "center",
+  "right",
+  "top",
+  "bottom"
+]);
+var transformOriginKeywordOptions = (keyword) => {
+  if (keyword === "left") {
+    return [{ axis: "x", value: { value: 0, unit: "%" } }];
+  }
+  if (keyword === "right") {
+    return [{ axis: "x", value: { value: 100, unit: "%" } }];
+  }
+  if (keyword === "top") {
+    return [{ axis: "y", value: { value: 0, unit: "%" } }];
+  }
+  if (keyword === "bottom") {
+    return [{ axis: "y", value: { value: 100, unit: "%" } }];
+  }
+  return [
+    { axis: "x", value: { value: 50, unit: "%" } },
+    { axis: "y", value: { value: 50, unit: "%" } }
+  ];
+};
+var transformOriginCenter = { value: 50, unit: "%" };
 var stringifyNumber = (value) => {
   return String(normalizeNumber(value));
 };
@@ -180,6 +206,110 @@ var parseStringInterpolationComponent = (component, value) => {
   }
   throw new TypeError(\`Cannot interpolate "\${value}" because "\${unit}" is not a supported translate or rotate unit\`);
 };
+var parseTransformOriginLengthPercentage = ({
+  component,
+  value,
+  allowPercentage
+}) => {
+  const match = cssNumberRegex.exec(component);
+  if (match === null) {
+    throw new TypeError(\`Cannot interpolate "\${value}" because "\${component}" is not a supported transform-origin \${allowPercentage ? "length-percentage" : "z length"}\`);
+  }
+  const unit = match[2] ?? null;
+  const numberValue = Number(match[1]);
+  if (!Number.isFinite(numberValue)) {
+    throw new TypeError(\`Cannot interpolate "\${value}" because "\${component}" is not finite\`);
+  }
+  if (unit === null || !lengthUnits.has(unit) || !allowPercentage && unit === "%") {
+    throw new TypeError(\`Cannot interpolate "\${value}" because "\${component}" is not a supported transform-origin \${allowPercentage ? "length-percentage" : "z length"}\`);
+  }
+  return { value: numberValue, unit };
+};
+var parseTransformOriginToken = (component, value) => {
+  const lower = component.toLowerCase();
+  if (transformOriginKeywords.has(lower)) {
+    return { type: "keyword", keyword: lower };
+  }
+  return {
+    type: "length-percentage",
+    parsed: parseTransformOriginLengthPercentage({
+      component,
+      value,
+      allowPercentage: true
+    })
+  };
+};
+var parseTwoTransformOriginKeywords = (first, second, value) => {
+  const candidates = [];
+  for (const firstOption of transformOriginKeywordOptions(first)) {
+    for (const secondOption of transformOriginKeywordOptions(second)) {
+      if (firstOption.axis === secondOption.axis) {
+        continue;
+      }
+      candidates.push(firstOption.axis === "x" ? [firstOption.value, secondOption.value] : [secondOption.value, firstOption.value]);
+    }
+  }
+  if (candidates.length === 0) {
+    throw new TypeError(\`Cannot interpolate "\${value}" because "\${first} \${second}" is not a valid transform-origin keyword pair\`);
+  }
+  return candidates[0];
+};
+var parseTransformOriginXY = (parts, value) => {
+  if (parts.length === 1) {
+    const token = parseTransformOriginToken(parts[0], value);
+    if (token.type === "length-percentage") {
+      return [token.parsed, transformOriginCenter];
+    }
+    if (token.keyword === "top" || token.keyword === "bottom") {
+      return [
+        transformOriginCenter,
+        transformOriginKeywordOptions(token.keyword)[0].value
+      ];
+    }
+    return [
+      transformOriginKeywordOptions(token.keyword)[0].value,
+      transformOriginCenter
+    ];
+  }
+  const first = parseTransformOriginToken(parts[0], value);
+  const second = parseTransformOriginToken(parts[1], value);
+  if (first.type === "length-percentage" && second.type === "length-percentage") {
+    return [first.parsed, second.parsed];
+  }
+  if (first.type === "keyword" && second.type === "keyword") {
+    return parseTwoTransformOriginKeywords(first.keyword, second.keyword, value);
+  }
+  const keyword = first.type === "keyword" ? first : second.type === "keyword" ? second : null;
+  const length = first.type === "length-percentage" ? first.parsed : second.type === "length-percentage" ? second.parsed : null;
+  if (keyword === null || length === null) {
+    throw new Error("Expected a keyword and a length-percentage value");
+  }
+  const keywordIsFirst = first.type === "keyword";
+  if (keyword.keyword === "left" || keyword.keyword === "right") {
+    if (!keywordIsFirst) {
+      throw new TypeError(\`Cannot interpolate "\${value}" because horizontal transform-origin keywords must come before a length-percentage value\`);
+    }
+    return [transformOriginKeywordOptions(keyword.keyword)[0].value, length];
+  }
+  if (keyword.keyword === "top" || keyword.keyword === "bottom") {
+    return [length, transformOriginKeywordOptions(keyword.keyword)[0].value];
+  }
+  return keywordIsFirst ? [transformOriginCenter, length] : [length, transformOriginCenter];
+};
+var parseTransformOriginValue = (output, parts) => {
+  const [x, y] = parseTransformOriginXY(parts.slice(0, 2), output);
+  const z = parts[2] === undefined ? { value: 0, unit: null } : parseTransformOriginLengthPercentage({
+    component: parts[2],
+    value: output,
+    allowPercentage: false
+  });
+  return {
+    kind: "translate",
+    values: [x.value, y.value, z.value],
+    units: [x.unit, y.unit, z.unit],
+    dimensions: parts[2] === undefined ? 2 : 3
+  };
+};
 var parseStringInterpolationValue = (output) => {
   if (typeof output === "number") {
     if (!Number.isFinite(output)) {
@@ -196,6 +326,9 @@ var parseStringInterpolationValue = (output) => {
   if (parts.length < 1 || parts.length > 3 || parts[0] === "") {
     throw new TypeError(\`String outputRange values must contain 1 to 3 components, but got "\${output}"\`);
   }
+  if (parts.some((part) => transformOriginKeywords.has(part.toLowerCase()))) {
+    return parseTransformOriginValue(output, parts);
+  }
   const parsed = parts.map((part) => parseStringInterpolationComponent(part, output));
   const [{ kind }] = parsed;
   for (const part of parsed) {
@@ -1073,6 +1206,12 @@ var serializeScaleValue = ([x, y, z]) => {
   return \`\${normalizedX} \${normalizedY} \${normalizedZ}\`;
 };
 var sequenceVisualStyleSchema = {
+  "style.transformOrigin": {
+    type: "transform-origin",
+    step: 1,
+    default: "50% 50%",
+    description: "Transform origin"
+  },
   "style.translate": {
     type: "translate",
     step: 1,
@@ -1495,6 +1634,32 @@ var lengthUnits = new Set([
   "vw"
 ]);
 var cssNumberRegex = /^([+-]?(?:\\d+\\.?\\d*|\\.\\d+))([a-zA-Z%]+)?$/;
+var transformOriginKeywords = new Set([
+  "left",
+  "center",
+  "right",
+  "top",
+  "bottom"
+]);
+var transformOriginKeywordOptions = (keyword) => {
+  if (keyword === "left") {
+    return [{ axis: "x", value: { value: 0, unit: "%" } }];
+  }
+  if (keyword === "right") {
+    return [{ axis: "x", value: { value: 100, unit: "%" } }];
+  }
+  if (keyword === "top") {
+    return [{ axis: "y", value: { value: 0, unit: "%" } }];
+  }
+  if (keyword === "bottom") {
+    return [{ axis: "y", value: { value: 100, unit: "%" } }];
+  }
+  return [
+    { axis: "x", value: { value: 50, unit: "%" } },
+    { axis: "y", value: { value: 50, unit: "%" } }
+  ];
+};
+var transformOriginCenter = { value: 50, unit: "%" };
 var stringifyNumber = (value) => {
   return String(normalizeNumber(value));
 };
@@ -1519,6 +1684,110 @@ var parseStringInterpolationComponent = (component, value) => {
   }
   throw new TypeError(\`Cannot interpolate "\${value}" because "\${unit}" is not a supported translate or rotate unit\`);
 };
+var parseTransformOriginLengthPercentage = ({
+  component,
+  value,
+  allowPercentage
+}) => {
+  const match = cssNumberRegex.exec(component);
+  if (match === null) {
+    throw new TypeError(\`Cannot interpolate "\${value}" because "\${component}" is not a supported transform-origin \${allowPercentage ? "length-percentage" : "z length"}\`);
+  }
+  const unit = match[2] ?? null;
+  const numberValue = Number(match[1]);
+  if (!Number.isFinite(numberValue)) {
+    throw new TypeError(\`Cannot interpolate "\${value}" because "\${component}" is not finite\`);
+  }
+  if (unit === null || !lengthUnits.has(unit) || !allowPercentage && unit === "%") {
+    throw new TypeError(\`Cannot interpolate "\${value}" because "\${component}" is not a supported transform-origin \${allowPercentage ? "length-percentage" : "z length"}\`);
+  }
+  return { value: numberValue, unit };
+};
+var parseTransformOriginToken = (component, value) => {
+  const lower = component.toLowerCase();
+  if (transformOriginKeywords.has(lower)) {
+    return { type: "keyword", keyword: lower };
+  }
+  return {
+    type: "length-percentage",
+    parsed: parseTransformOriginLengthPercentage({
+      component,
+      value,
+      allowPercentage: true
+    })
+  };
+};
+var parseTwoTransformOriginKeywords = (first, second, value) => {
+  const candidates = [];
+  for (const firstOption of transformOriginKeywordOptions(first)) {
+    for (const secondOption of transformOriginKeywordOptions(second)) {
+      if (firstOption.axis === secondOption.axis) {
+        continue;
+      }
+      candidates.push(firstOption.axis === "x" ? [firstOption.value, secondOption.value] : [secondOption.value, firstOption.value]);
+    }
+  }
+  if (candidates.length === 0) {
+    throw new TypeError(\`Cannot interpolate "\${value}" because "\${first} \${second}" is not a valid transform-origin keyword pair\`);
+  }
+  return candidates[0];
+};
+var parseTransformOriginXY = (parts, value) => {
+  if (parts.length === 1) {
+    const token = parseTransformOriginToken(parts[0], value);
+    if (token.type === "length-percentage") {
+      return [token.parsed, transformOriginCenter];
+    }
+    if (token.keyword === "top" || token.keyword === "bottom") {
+      return [
+        transformOriginCenter,
+        transformOriginKeywordOptions(token.keyword)[0].value
+      ];
+    }
+    return [
+      transformOriginKeywordOptions(token.keyword)[0].value,
+      transformOriginCenter
+    ];
+  }
+  const first = parseTransformOriginToken(parts[0], value);
+  const second = parseTransformOriginToken(parts[1], value);
+  if (first.type === "length-percentage" && second.type === "length-percentage") {
+    return [first.parsed, second.parsed];
+  }
+  if (first.type === "keyword" && second.type === "keyword") {
+    return parseTwoTransformOriginKeywords(first.keyword, second.keyword, value);
+  }
+  const keyword = first.type === "keyword" ? first : second.type === "keyword" ? second : null;
+  const length = first.type === "length-percentage" ? first.parsed : second.type === "length-percentage" ? second.parsed : null;
+  if (keyword === null || length === null) {
+    throw new Error("Expected a keyword and a length-percentage value");
+  }
+  const keywordIsFirst = first.type === "keyword";
+  if (keyword.keyword === "left" || keyword.keyword === "right") {
+    if (!keywordIsFirst) {
+      throw new TypeError(\`Cannot interpolate "\${value}" because horizontal transform-origin keywords must come before a length-percentage value\`);
+    }
+    return [transformOriginKeywordOptions(keyword.keyword)[0].value, length];
+  }
+  if (keyword.keyword === "top" || keyword.keyword === "bottom") {
+    return [length, transformOriginKeywordOptions(keyword.keyword)[0].value];
+  }
+  return keywordIsFirst ? [transformOriginCenter, length] : [length, transformOriginCenter];
+};
+var parseTransformOriginValue = (output, parts) => {
+  const [x, y] = parseTransformOriginXY(parts.slice(0, 2), output);
+  const z = parts[2] === undefined ? { value: 0, unit: null } : parseTransformOriginLengthPercentage({
+    component: parts[2],
+    value: output,
+    allowPercentage: false
+  });
+  return {
+    kind: "translate",
+    values: [x.value, y.value, z.value],
+    units: [x.unit, y.unit, z.unit],
+    dimensions: parts[2] === undefined ? 2 : 3
+  };
+};
 var parseStringInterpolationValue = (output) => {
   if (typeof output === "number") {
     if (!Number.isFinite(output)) {
@@ -1535,6 +1804,9 @@ var parseStringInterpolationValue = (output) => {
   if (parts.length < 1 || parts.length > 3 || parts[0] === "") {
     throw new TypeError(\`String outputRange values must contain 1 to 3 components, but got "\${output}"\`);
   }
+  if (parts.some((part) => transformOriginKeywords.has(part.toLowerCase()))) {
+    return parseTransformOriginValue(output, parts);
+  }
   const parsed = parts.map((part) => parseStringInterpolationComponent(part, output));
   const [{ kind }] = parsed;
   for (const part of parsed) {
@@ -2412,6 +2684,12 @@ var serializeScaleValue = ([x, y, z]) => {
   return \`\${normalizedX} \${normalizedY} \${normalizedZ}\`;
 };
 var sequenceVisualStyleSchema = {
+  "style.transformOrigin": {
+    type: "transform-origin",
+    step: 1,
+    default: "50% 50%",
+    description: "Transform origin"
+  },
   "style.translate": {
     type: "translate",
     step: 1,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/vercel",
-	"version": "4.0.474",
+	"version": "4.0.475",
 	"description": "Render Remotion videos on Vercel Sandbox",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",
@@ -23,8 +23,8 @@
 		"url": "https://github.com/remotion-dev/remotion/issues"
 	},
 	"dependencies": {
-		"@remotion/renderer": "4.0.474",
-		"remotion": "4.0.474"
+		"@remotion/renderer": "4.0.475",
+		"remotion": "4.0.475"
 	},
 	"peerDependencies": {
 		"@vercel/sandbox": ">=1.0.0"
@@ -38,7 +38,7 @@
 		"./package.json": "./package.json"
 	},
 	"devDependencies": {
-		"@remotion/eslint-config-internal": "4.0.474",
+		"@remotion/eslint-config-internal": "4.0.475",
 		"@vercel/blob": "2.3.0",
 		"@vercel/sandbox": "1.6.0",
 		"eslint": "9.19.0",