Add animation to video captions

GuptaSiddhant · GuptaSiddhant · commit f625bc0c22ad · 2023-05-22T16:10:57.000+03:00
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-scrolly-telling",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "Create scrolly-telling animations in React with ease.",
   "type": "module",
   "keywords": [
diff --git a/src/components/VideoCaptions.tsx b/src/components/VideoCaptions.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
-import { type Styles } from "../utils/react-helpers.js";
+
 import { roundToDecimal } from "../utils/math.js";
+import interpolate from "../interpolate.js";
 
 export interface VideoCaptionsProps {
   videoRef: React.RefObject<HTMLVideoElement>;
@@ -15,28 +16,35 @@ export interface ScrollyVideoCaptionsConfig {
   horizontalPadding?: string | number;
   /** Styles applied to all caption containers */
   style?: React.CSSProperties;
+
+  animation?: ScrollyVideoCaptionAnimation;
 }
 
 export default function VideoCaptions(
   props: VideoCaptionsProps
 ): JSX.Element | null {
   const { captions = [], videoRef, config = {} } = props;
-  const { horizontalPadding, verticalPadding, style } = config;
+  const { horizontalPadding, verticalPadding, style, animation } = config;
   const currentTime = useVideoCurrentTime(videoRef);
 
   return (
-    <>
-      {captions?.map((caption, i) => (
+    <ul
+      style={{ listStyle: "none", padding: "none" }}
+      className="scrolly-video-captions"
+      data-current-time={currentTime}
+    >
+      {captions?.map((caption) => (
         <VideoCaption
           horizontalPadding={horizontalPadding}
           verticalPadding={verticalPadding}
+          animation={animation}
           {...caption}
           commonStyle={style}
           currentTime={currentTime}
-          key={i}
+          key={`${caption.fromTimestamp}-${caption.toTimestamp}-${caption.position}`}
         />
       ))}
-    </>
+    </ul>
   );
 }
 
@@ -76,6 +84,13 @@ export type ScrollyVideoCaptionPosition = `${
   | CaptionPosition.Center
   | CaptionPosition.Right}`;
 
+export interface ScrollyVideoCaptionAnimation {
+  durationInSeconds: number;
+  variant: ScrollyVideoCaptionAnimationVariant;
+}
+
+export type ScrollyVideoCaptionAnimationVariant = "fade";
+
 export interface ScrollyVideoCaptionProps {
   /** Content of the caption. Can be string or a component. */
   children: React.ReactNode;
@@ -91,38 +106,95 @@ export interface ScrollyVideoCaptionProps {
   verticalPadding?: string | number;
   /** @default 5vw */
   horizontalPadding?: string | number;
+
+  animation?: ScrollyVideoCaptionAnimation;
 }
 
 interface VideoCaptionProps extends ScrollyVideoCaptionProps {
   currentTime: number;
   commonStyle?: React.CSSProperties;
 }
 
-const styles = {
-  caption: {
-    boxSizing: "border-box",
-    position: "absolute",
-    zIndex: 0,
-  },
-} satisfies Styles;
-
-const DEFAULT_POSITION: ScrollyVideoCaptionPosition = `${CaptionPosition.Center}-${CaptionPosition.Center}`;
-const DEFAULT_VERTICAL_PADDING = "5vh";
-const DEFAULT_HORIZONTAL_PADDING = "5vw";
+const DEFAULT_ANIMATION_DURATION = 0.5;
+const DEFAULT_ANIMATION_VARIANT: ScrollyVideoCaptionAnimationVariant = "fade";
 
 function VideoCaption(props: VideoCaptionProps): JSX.Element | null {
   const {
     children,
     currentTime = 0,
     fromTimestamp,
     toTimestamp,
+    commonStyle,
+    style,
+    animation,
     ...options
   } = props;
-  const isVisible = currentTime >= fromTimestamp && currentTime <= toTimestamp;
+  const animationDuration =
+    animation?.durationInSeconds ?? DEFAULT_ANIMATION_DURATION;
+
+  // Overlap animation by half of the duration
+  const isVisible =
+    currentTime >= fromTimestamp - animationDuration / 2 &&
+    currentTime <= toTimestamp + animationDuration / 2;
 
   if (!isVisible) return null;
 
-  return <div style={calculateVideoCaptionStyle(options)}>{children}</div>;
+  return (
+    <li
+      className="scrolly-video-caption"
+      data-timestamp-from={fromTimestamp}
+      data-timestamp-to={toTimestamp}
+      style={{
+        ...commonStyle,
+        ...style,
+        ...calculateVideoCaptionStyle(options),
+        ...calculateVideoCaptionAnimation(animation, {
+          currentTime,
+          fromTimestamp,
+          toTimestamp,
+        }),
+      }}
+    >
+      {children}
+    </li>
+  );
+}
+
+function calculateVideoCaptionAnimation(
+  animation: ScrollyVideoCaptionAnimation | undefined,
+  options: {
+    currentTime: number;
+    fromTimestamp: number;
+    toTimestamp: number;
+  }
+): React.CSSProperties | undefined {
+  const { currentTime, fromTimestamp, toTimestamp } = options;
+
+  const animationVariant = animation?.variant ?? DEFAULT_ANIMATION_VARIANT;
+  const animationDuration =
+    animation?.durationInSeconds ?? DEFAULT_ANIMATION_DURATION;
+
+  const fromTimeWithAnimation = fromTimestamp - animationDuration / 2;
+  const toTimeWithAnimation = toTimestamp + animationDuration / 2;
+
+  const entryRatio = interpolate(currentTime, {
+    sourceFrom: fromTimeWithAnimation,
+    sourceTo: fromTimeWithAnimation + animationDuration,
+    targetFrom: 0,
+    targetTo: 1,
+    precision: 2,
+  });
+  const exitRatio = interpolate(currentTime, {
+    sourceFrom: toTimeWithAnimation - animationDuration,
+    sourceTo: toTimeWithAnimation,
+    targetFrom: 1,
+    targetTo: 0,
+    precision: 2,
+  });
+
+  return animationVariant === "fade"
+    ? { opacity: entryRatio === 1 ? exitRatio : entryRatio }
+    : undefined;
 }
 
 interface CalculateVideoCaptionStyleOptions {
@@ -133,45 +205,51 @@ interface CalculateVideoCaptionStyleOptions {
   horizontalPadding?: string | number;
 }
 
+const DEFAULT_POSITION: ScrollyVideoCaptionPosition = `${CaptionPosition.Center}-${CaptionPosition.Center}`;
+const DEFAULT_VERTICAL_PADDING = "5vh";
+const DEFAULT_HORIZONTAL_PADDING = "5vw";
+
 function calculateVideoCaptionStyle({
-  commonStyle,
-  style,
   position = DEFAULT_POSITION,
   verticalPadding = DEFAULT_VERTICAL_PADDING,
   horizontalPadding = DEFAULT_HORIZONTAL_PADDING,
 }: CalculateVideoCaptionStyleOptions): React.CSSProperties {
   const [verticalPosition, horizontalPosition] = position.split("-");
 
-  const verticalStyle: React.CSSProperties =
+  const alignItems: React.CSSProperties["alignItems"] =
     verticalPosition === CaptionPosition.Top
-      ? { top: verticalPadding, verticalAlign: verticalPosition }
+      ? "flex-start"
       : verticalPosition === CaptionPosition.Bottom
-      ? { bottom: verticalPadding, verticalAlign: verticalPosition }
-      : { top: "50%", verticalAlign: "middle" };
+      ? "flex-end"
+      : "center";
+
+  const justifyContent: React.CSSProperties["justifyContent"] =
+    horizontalPosition === CaptionPosition.Left
+      ? "flex-start"
+      : horizontalPosition === CaptionPosition.Right
+      ? "flex-end"
+      : "center";
 
-  const horizontalStyle: React.CSSProperties =
+  const textAlign: React.CSSProperties["textAlign"] =
     horizontalPosition === CaptionPosition.Left
-      ? { left: horizontalPadding, textAlign: horizontalPosition }
+      ? "left"
       : horizontalPosition === CaptionPosition.Right
-      ? { right: horizontalPadding, textAlign: horizontalPosition }
-      : { left: "50%", textAlign: "center" };
-
-  const transform: string | undefined =
-    verticalPosition === CaptionPosition.Center &&
-    horizontalPosition === CaptionPosition.Center
-      ? "translate(-50%,-50%)"
-      : verticalPosition === CaptionPosition.Center
-      ? "translateY(-50%)"
-      : horizontalPosition === CaptionPosition.Center
-      ? "translateX(-50%)"
-      : undefined;
+      ? "right"
+      : "center";
 
   return {
-    ...commonStyle,
-    ...style,
-    ...styles.caption,
-    ...verticalStyle,
-    ...horizontalStyle,
-    transform,
+    boxSizing: "border-box",
+    position: "absolute",
+    display: "flex",
+    flexDirection: "row",
+    top: verticalPadding,
+    bottom: verticalPadding,
+    left: horizontalPadding,
+    right: horizontalPadding,
+    insetBlock: verticalPadding,
+    insetInline: horizontalPadding,
+    alignItems,
+    justifyContent,
+    textAlign,
   };
 }
diff --git a/src/stories/ScrollyVideo.stories.tsx b/src/stories/ScrollyVideo.stories.tsx
@@ -51,13 +51,18 @@ const positions: ScrollyVideoCaptionProps["position"][] = [
 
 export const Captions: StoryObj<ComponentType> = {
   args: {
-    // playFromEntry: true,
-    // playTillExit: true,
+    style: { height: "300vh" },
+    playFromEntry: false,
+    playTillExit: false,
     captions: positions.map((position, i) => ({
       position,
-      children: <>Long Caption text at position: {position}</>,
-      fromTimestamp: i + 0,
-      toTimestamp: i + 5,
+      children: (
+        <div style={{ maxWidth: "25vw", textShadow: "0 0 4px #0008" }}>
+          Long Caption text at position: {position}
+        </div>
+      ),
+      fromTimestamp: i + 0.5,
+      toTimestamp: i + 4.5,
     })),
     captionsConfig: {
       verticalPadding: "40px",
@@ -66,7 +71,6 @@ export const Captions: StoryObj<ComponentType> = {
         fontWeight: "bold",
         fontSize: "2em",
         color: "white",
-        width: "300px",
       },
     },
   },
diff --git a/src/video.tsx b/src/video.tsx
@@ -1,4 +1,5 @@
 import { useRef } from "react";
+
 import VideoElement, {
   type VideoTimeChangeFn,
 } from "./components/VideoElement.js";
diff --git a/vite.config.ts b/vite.config.ts
@@ -3,6 +3,8 @@ import { defineConfig } from "vite";
 import dtsPlugin from "vite-plugin-dts";
 import { peerDependencies, devDependencies } from "./package.json";
 
+const facadeModuleIdMap = new Map<string, boolean>();
+
 export default defineConfig({
   build: {
     lib: {
@@ -12,6 +14,7 @@ export default defineConfig({
         interpolate: "src/interpolate.ts",
         scrim: "src/scrim.ts",
         video: "src/video.tsx",
+        videoCaption: "src/components/VideoCaptions.tsx",
       },
       name: "react-scrolly-telling",
       formats: ["es", "cjs"],
@@ -37,6 +40,15 @@ export default defineConfig({
         },
 
         chunkFileNames: (info) => {
+          if (info.facadeModuleId) {
+            if (facadeModuleIdMap.has(info.facadeModuleId)) {
+              return `__[name]__.cjs`;
+            } else {
+              facadeModuleIdMap.set(info.facadeModuleId, true);
+              return `__[name]__.mjs`;
+            }
+          }
+
           const cjs = info.exports.some((e) => e.length > 5);
           return `__[name]__.${cjs ? "cjs" : "mjs"}`;
         },

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "react-scrolly-telling",`
`3`		`- "version": "0.1.5",`
	`3`	`+ "version": "0.1.6",`
`4`	`4`	`"description": "Create scrolly-telling animations in React with ease.",`
`5`	`5`	`"type": "module",`
`6`	`6`	`"keywords": [`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`	`1`	`import { useRef } from "react";`
	`2`	`+`
`2`	`3`	`import VideoElement, {`
`3`	`4`	`type VideoTimeChangeFn,`
`4`	`5`	`} from "./components/VideoElement.js";`