@remotion/transitions 4.0.175 → 4.0.177

package/dist/context.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+export type TransitionState = {
+    entering: number;
+    exiting: number;
+    isInTransitionSeries: boolean;
+};
+export declare const WrapInEnteringProgressContext: React.FC<{
+    readonly presentationProgress: number;
+    readonly children: React.ReactNode;
+}>;
+export declare const WrapInExitingProgressContext: React.FC<{
+    readonly presentationProgress: number;
+    readonly children: React.ReactNode;
+}>;
+/**
+ * Gets the progress and direction of a transition with a context() presentation.
+ */
+export declare const useTransitionProgress: () => TransitionState;

package/dist/context.js

@@ -0,0 +1,69 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTransitionProgress = exports.WrapInExitingProgressContext = exports.WrapInEnteringProgressContext = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const EnteringContext = react_1.default.createContext(null);
+const ExitingContext = react_1.default.createContext(null);
+const WrapInEnteringProgressContext = ({ presentationProgress, children }) => {
+    const value = (0, react_1.useMemo)(() => {
+        return {
+            enteringProgress: presentationProgress,
+        };
+    }, [presentationProgress]);
+    return ((0, jsx_runtime_1.jsx)(EnteringContext.Provider, { value: value, children: children }));
+};
+exports.WrapInEnteringProgressContext = WrapInEnteringProgressContext;
+const WrapInExitingProgressContext = ({ presentationProgress, children }) => {
+    const value = (0, react_1.useMemo)(() => {
+        return {
+            exitingProgress: presentationProgress,
+        };
+    }, [presentationProgress]);
+    return ((0, jsx_runtime_1.jsx)(ExitingContext.Provider, { value: value, children: children }));
+};
+exports.WrapInExitingProgressContext = WrapInExitingProgressContext;
+/**
+ * Gets the progress and direction of a transition with a context() presentation.
+ */
+const useTransitionProgress = () => {
+    var _a, _b;
+    const entering = react_1.default.useContext(EnteringContext);
+    const exiting = react_1.default.useContext(ExitingContext);
+    if (!entering && !exiting) {
+        return {
+            isInTransitionSeries: false,
+            entering: 1,
+            exiting: 0,
+        };
+    }
+    return {
+        isInTransitionSeries: true,
+        entering: (_a = entering === null || entering === void 0 ? void 0 : entering.enteringProgress) !== null && _a !== void 0 ? _a : 1,
+        exiting: (_b = exiting === null || exiting === void 0 ? void 0 : exiting.exitingProgress) !== null && _b !== void 0 ? _b : 0,
+    };
+};
+exports.useTransitionProgress = useTransitionProgress;

package/dist/esm/context.mjs

@@ -0,0 +1,44 @@
+// src/presentations/context.tsx
+import React, {useMemo} from "react";
+import {AbsoluteFill} from "remotion";
+import {
+jsx
+} from "react/jsx-runtime";
+var ContextPresentationContext = React.createContext(null);
+var ContextPresentation = ({ children, presentationDirection, presentationProgress, passedProps }) => {
+  const style = useMemo(() => {
+    return {
+      ...presentationDirection === "entering" ? passedProps.enterStyle : passedProps.exitStyle
+    };
+  }, [passedProps.enterStyle, passedProps.exitStyle, presentationDirection]);
+  const value = useMemo(() => {
+    return {
+      progress: presentationProgress,
+      direction: presentationDirection
+    };
+  }, [presentationDirection, presentationProgress]);
+  return jsx(ContextPresentationContext.Provider, {
+    value,
+    children: jsx(AbsoluteFill, {
+      style,
+      children
+    })
+  });
+};
+var context = (props) => {
+  return {
+    component: ContextPresentation,
+    props: props ?? {}
+  };
+};
+var useTransitionContext = () => {
+  const value = React.useContext(ContextPresentationContext);
+  if (!value) {
+    return null;
+  }
+  return value;
+};
+export {
+  useTransitionContext,
+  context
+};

package/dist/presentations/context.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { TransitionPresentation } from '../types';
+export type NoneProps = {
+    enterStyle?: React.CSSProperties;
+    exitStyle?: React.CSSProperties;
+};
+/**
+ * Wraps the transition in a context so that the progress can be read from the children using a hook.
+ * @see [Documentation](https://remotion.dev/docs/transitions/presentations/context)
+ * @param {NoneProps} [props] Optional properties to define 'enterStyle' and 'exitStyle'.
+ * @returns {TransitionPresentation<NoneProps>} The transition presentation component setup.
+ */
+export declare const context: (props?: NoneProps) => TransitionPresentation<NoneProps>;

package/dist/presentations/context.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.context = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const NonePresentation = ({ children, presentationDirection, passedProps }) => {
+    const style = (0, react_1.useMemo)(() => {
+        return {
+            ...(presentationDirection === 'entering'
+                ? passedProps.enterStyle
+                : passedProps.exitStyle),
+        };
+    }, [passedProps.enterStyle, passedProps.exitStyle, presentationDirection]);
+    return (0, jsx_runtime_1.jsx)(remotion_1.AbsoluteFill, { style: style, children: children });
+};
+/**
+ * Wraps the transition in a context so that the progress can be read from the children using a hook.
+ * @see [Documentation](https://remotion.dev/docs/transitions/presentations/context)
+ * @param {NoneProps} [props] Optional properties to define 'enterStyle' and 'exitStyle'.
+ * @returns {TransitionPresentation<NoneProps>} The transition presentation component setup.
+ */
+const context = (props) => {
+    return {
+        component: NonePresentation,
+        props: props !== null && props !== void 0 ? props : {},
+    };
+};
+exports.context = context;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remotion/transitions",
-  "version": "4.0.175",
+  "version": "4.0.177",
   "description": "Transition presets for Remotion",
   "sideEffects": false,
   "main": "dist/esm/index.mjs",
@@ -16,9 +16,9 @@
     "url": "https://github.com/remotion-dev/remotion/issues"
   },
   "dependencies": {
-    "remotion": "4.0.175",
-    "@remotion/paths": "4.0.175",
-    "@remotion/shapes": "4.0.175"
+    "remotion": "4.0.177",
+    "@remotion/shapes": "4.0.177",
+    "@remotion/paths": "4.0.177"
   },
   "devDependencies": {
     "@jonny/eslint-config": "3.0.281",
@@ -32,8 +32,8 @@
     "@types/react-dom": "18.3.0",
     "@types/bun": "1.0.12",
     "@vitejs/plugin-react": "^2.0.0",
-    "remotion": "4.0.175",
-    "@remotion/test-utils": "4.0.175"
+    "remotion": "4.0.177",
+    "@remotion/test-utils": "4.0.177"
   },
   "peerDependencies": {
     "react": ">=16.8.0",