feat: smoothen pulse in highlight text

mykeels · Nov 9, 2022 · 27016b5 · 27016b5
1 parent fa58507
commit 27016b5
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 31 deletions.
diff --git a/App/src/animations/ColorTransition/components/ColorTransitions/index.js b/App/src/animations/ColorTransition/components/ColorTransitions/index.js
@@ -11,15 +11,16 @@ import { f2s, frames } from "../../../../common";
  * @property {any} children
  * @property {JSX.Element | React.FC<{ style: React.CSSProperties }>} [children]
  * @property {string[]} colors
+ * @property {number} [transitionDuration]
  */
 
 /**
  * @type {React.FC<ColorTransitionsProps & { [key: string]: any }>}
  */
-export const ColorTransitions = ({ children, colors }) => {
+export const ColorTransitions = ({ children, colors, transitionDuration }) => {
   const { durationInFrames } = useVideoConfig();
   const durationInSeconds = f2s(durationInFrames);
-  const imageCount = Math.ceil(durationInSeconds / 5);
+  const imageCount = Math.ceil(durationInSeconds / transitionDuration);
   const repeatedColors = new Array(imageCount).fill(0).map((_, i) => ({
     from: colors[i % colors.length],
     to: colors[(i + 1) % colors.length]
@@ -32,8 +33,8 @@ export const ColorTransitions = ({ children, colors }) => {
       {repeatedColors.map((color, i) => (
         <Sequence
           key={`${color.from}-${color.to}-${i}`}
-          from={i * frames(5)}
-          durationInFrames={frames(5)}
+          from={i * frames(transitionDuration)}
+          durationInFrames={frames(transitionDuration)}
           layout="none"
         >
           <ColorTransition from={color.from} to={color.to}>
@@ -55,4 +56,6 @@ export const ColorTransitions = ({ children, colors }) => {
   );
 };
 
-ColorTransitions.defaultProps = {};
+ColorTransitions.defaultProps = {
+  transitionDuration: 5
+};
diff --git a/App/src/components/SongPlayer/SongPlayer.js b/App/src/components/SongPlayer/SongPlayer.js
@@ -43,7 +43,14 @@ SongVideo.defaultProps = {
   Subtitles: HighlightedVerseSubtitles,
   Background: () => (
     <ColorTransitions
-      colors={[`#00aaff`, `#ffaa00`, `#0000ff`, `#00ff00`, `#ff0000`, `#00aaff`]}
+      colors={[
+        `#75dddd`,
+        `#84c7d0`,
+        `#9297c4`,
+        `#9368b7`,
+        `#7ED0EE`,
+        `#f5bf69`
+      ]}
     >
       {({ style }) => (
         <CenterFill className="z-10" style={{ backgroundColor: style.color }} />

diff --git a/App/src/components/SongPlayer/components/HighlightedVerseSubtitles/index.js b/App/src/components/SongPlayer/components/HighlightedVerseSubtitles/index.js
@@ -1,11 +1,13 @@
 import classNames from "classnames";
-import React from "react";
+import React, { useCallback, useState } from "react";
 import {
   AbsoluteFill,
   Sequence,
   useCurrentFrame,
   useVideoConfig
 } from "remotion";
+import * as transformParser from "transform-parser";
+
 import { Pulse } from "../../../../animations";
 import { frames, starts, isFrameWithin } from "../../../../common";
 
@@ -57,8 +59,27 @@ export const HighlightedVerseSubtitles = ({ lines, count }) => {
     "text-xl": width > 640 && width <= 1024,
     "text-4xl": width > 1024
   });
+  /** @type {ReactState<React.CSSProperties>} */
+  const [style, setStyle] = useState({});
+  const updateStyle = useCallback((s) => {
+    setStyle({
+      ...style,
+      ...s,
+      ...(s?.transform || style?.transform
+        ? {
+            transform: transformParser.stringify({
+              ...(style?.transform
+                ? transformParser.parse(style?.transform)
+                : {}),
+              ...(s?.transform ? transformParser.parse(s?.transform) : {})
+            })
+          }
+        : {})
+    });
+  }, []);
   return (
     <div>
+      <Pulse onChange={updateStyle} />
       {groups.map((group, i) => {
         return (
           <Sequence
@@ -82,30 +103,21 @@ export const HighlightedVerseSubtitles = ({ lines, count }) => {
                       frames(line.from),
                       frames(line.duration)
                     );
-                    const Animation = isActive
-                      ? Pulse
-                      : ({ children: Component }) => <Component />;
-                    return (
-                      <Animation key={`${line.text}-${i}`}>
-                        {({ style }) =>
-                          line.text ? (
-                            <div className="block">
-                              <span
-                                className={classNames(
-                                  "inline-block p-2 px-4 rounded my-1",
-                                  {
-                                    "bg-purple-100": isActive
-                                  }
-                                )}
-                                style={style}
-                              >
-                                {line.text}
-                              </span>
-                            </div>
-                          ) : null
-                        }
-                      </Animation>
-                    );
+                    return line.text ? (
+                      <div className="block" key={`${line.text}-${i}`}>
+                        <span
+                          className={classNames(
+                            "inline-block p-2 px-4 rounded my-1",
+                            {
+                              "bg-black text-5xl": isActive
+                            }
+                          )}
+                          style={isActive ? style : null}
+                        >
+                          {line.text}
+                        </span>
+                      </div>
+                    ) : null;
                   })}
                 </div>
               </div>