reacthub-pixitweenjs 0.2.4 → 0.2.5

package/src/components/PixiVideoSprite/index.ts

@@ -0,0 +1 @@
+export { default as PixiVideoSprite } from "./PixiVideoSprite";

package/src/declare.module.ts

@@ -0,0 +1,5 @@
+// declare module "@pixi/react" {
+//   interface Container {
+//     children?: React.ReactNode;
+//   }
+// }

package/src/providers/GsapPixieContextProvider.tsx

@@ -7,18 +7,23 @@ import {
   useLayoutEffect,
 } from "react";
 import gsap from "gsap";
-import { emitCustomEvent } from "react-custom-events";
+import { emitCustomEvent, useCustomEventListener } from "react-custom-events";
+import { useDebounce } from "../utils/useDebounce";
 
 interface GsapPixieContextProps {
   gsapCtx: React.MutableRefObject<any>;
   tl: React.MutableRefObject<any>;
+  play: boolean;
+  isDragging: boolean;
   handlePlay: () => void;
   handlePause: () => void;
   handleReset: () => void;
-  handleSeek: () => void;
+  handleSeek: (value: number) => void;
+  handleSeekTest: () => void;
   handleRestart: () => void;
   handleRepeat: () => void;
   playerTimeRef: React.MutableRefObject<number>;
+  totalDuration: number;
 }
 
 // Context has been created
@@ -30,6 +35,12 @@ const Events = {
   PAUSE: "GSAP_PAUSE",
   PLAY: "GSAP_PLAY",
   RESUME: "GSAP_RESUME",
+  RESTART: "GSAP_RESTART",
+  REPEAT: "GSAP_REPEAT",
+  SEEK: "GSAP_SEEK",
+  RESET: "GSAP_RESET",
+  DRAGGING_START: "GSAP_DRAGGING_START",
+  DRAGGING_END: "GSAP_DRAGGING_END",
 };
 
 // Provider
@@ -38,6 +49,10 @@ const GsapPixieContextProvider: React.FC<{ children: React.ReactNode }> = ({
 }) => {
   const [play, setPlay] = useState<boolean>(false);
   const [frameNumber, setFrameNumber] = useState<number>(0);
+  const [isDragging, setIsDragging] = useState<boolean>(false);
+  const [internalDuration, setInternalDuration] = useState<number>(0);
+  const [totalDuration, setTotalDuration] = useState<number>(0);
+  const delayedDuration = useDebounce(internalDuration, 600);
 
   const tl = useRef<any>();
   const gsapCtx = useRef<any>();
@@ -60,6 +75,14 @@ const GsapPixieContextProvider: React.FC<{ children: React.ReactNode }> = ({
     return () => gsapCtx.current.revert();
   }, []);
 
+  gsap.ticker.add((time, deltaTime, frame) => {
+    // console.log("timeframe", time, deltaTime, frame);
+    // setFrameNumber(frame);
+    if (tl.current && getTimelineDuration) {
+      setInternalDuration(getTimelineDuration());
+    }
+  });
+
   const onUpdate = useCallback(() => {
     /// console.log("update event callback");
     const timeline = tl.current;
@@ -73,16 +96,51 @@ const GsapPixieContextProvider: React.FC<{ children: React.ReactNode }> = ({
     playerTimeRef.current = now;
   }, []);
 
+  // set the total duration based on the delayed duration value
+  useEffect(() => {
+    setTotalDuration(delayedDuration);
+  }, [delayedDuration]);
+
   useEffect(() => {
     const timeline = tl.current;
     timeline
+      .eventCallback("onStart", function () {
+        // console.log("onstart", timeline.progress());
+        // setPlay(true);
+        // onUpdate();
+      })
+      .eventCallback("onInterrupt", function () {
+        /// console.log("onInterrupt", timeline.progress());
+        setPlay(false);
+        onUpdate();
+      })
       .eventCallback("onUpdate", function () {
         /// console.log("onupdate", timeline.progress());
         onUpdate();
       })
+      // .eventCallback("onRepeat", function () {
+      //   /// console.log("onrepeat", timeline.progress());
+      //   onUpdate();
+      // })
+      // .eventCallback("onReverseComplete", function () {
+      //   /// console.log("onReverseComplete", timeline.progress());
+      //   onUpdate();
+      // })
+      // write a pause event
+      .eventCallback("onPause", function () {
+        console.log("onPause", timeline.progress());
+        setPlay(false);
+        onUpdate();
+      })
+      .eventCallback("onResume", function () {
+        console.log("onResume", timeline.progress());
+        setPlay(true);
+        onUpdate();
+      })
       .eventCallback("onComplete", function () {
-        timeline.seek(0.01);
+        timeline.seek(0);
         timeline.pause();
+        setPlay(false);
         onUpdate();
       });
   }, []);
@@ -110,39 +168,63 @@ const GsapPixieContextProvider: React.FC<{ children: React.ReactNode }> = ({
   const handleRestart = useCallback(() => {
     const timeline = tl.current;
     timeline.restart();
+    setPlay(true);
   }, []);
 
   const handleRepeat = useCallback(() => {
     const timeline = tl.current;
-
     timeline.repeat(1);
     timeline.restart();
+    // setPlay(true);
   }, []);
 
-  const handleSeek = useCallback(() => {
+  const handleSeek = useCallback((value: number) => {
     const timeline = tl.current;
-    timeline.seek(4);
+    timeline.seek(value);
   }, []);
 
-  const setDurationTimeline = useCallback(() => {
+  const handleSeekTest = useCallback(() => {
     const timeline = tl.current;
+    timeline.seek(4);
+  }, []);
 
+  const setTimelineDuration = useCallback(() => {
+    const timeline = tl.current;
     timeline.totalDuration(3);
   }, []);
 
-  const handlePause = () => {
+  const getTimelineDuration = useCallback(() => {
     const timeline = tl.current;
+    if (!timeline) return 0;
+    return timeline.totalDuration();
+  }, []);
 
+  const handlePause = () => {
+    const timeline = tl.current;
     timeline.pause();
     emitCustomEvent(Events.PAUSE);
+    setPlay(false);
   };
 
   const handlePlay = () => {
     const timeline = tl.current;
+    setPlay(true);
     timeline.resume();
     emitCustomEvent(Events.RESUME);
   };
 
+  /** Event listener dragging */
+  useCustomEventListener(Events.DRAGGING_START, (time) => {
+    console.log("dragging start");
+    setIsDragging(true);
+  });
+
+  useCustomEventListener(Events.DRAGGING_END, (time) => {
+    setIsDragging(false);
+    console.log("dragging end");
+  });
+
+  console.log("set play updated", play);
   return (
     <GsapPixieContext.Provider
       value={{
@@ -152,9 +234,13 @@ const GsapPixieContextProvider: React.FC<{ children: React.ReactNode }> = ({
         handlePause,
         handleReset,
         handleSeek,
+        handleSeekTest,
         handleRestart,
         handleRepeat,
         playerTimeRef,
+        play,
+        totalDuration,
+        isDragging,
       }}
     >
       {children}

package/src/reacthub-react-bindings.d.ts

@@ -0,0 +1,27 @@
+import * as React from "react";
+import * as PIXI from "pixi.js";
+
+declare module "reacthub-react-bindings" {
+  interface TransformerProps {
+    group: PIXI.DisplayObject[];
+    rotateEnabled?: boolean;
+    boxRotationEnabled?: boolean;
+    boxScalingEnabled?: boolean;
+    wireframeStyle?: {
+      thickness: number;
+      color: number;
+    };
+    lockAspectRatio?: boolean;
+    scaleEnabled?: boolean;
+    handleStyle?: {
+      color?: number;
+      outlineColor?: number;
+      shape?: "circle" | "square";
+      radius?: number;
+    };
+    transformchange?: (transform: PIXI.Matrix) => void;
+    transformcommit?: (transform: PIXI.Matrix) => void;
+  }
+
+  export class Transformer extends React.Component<TransformerProps> {}
+}

package/src/utils/AppStateProvider.tsx

@@ -8,19 +8,6 @@ interface AppState {
   };
 }
 
-interface AppStateContextProps extends AppState {
-  onAnchorTransformationEnd: (data: TransformationEnd) => void;
-  onMouseOverSprite: (data: unknown) => void;
-  onClickSprite: (data: unknown) => void;
-}
-
-export const AppStateContext = React.createContext<AppStateContextProps>({
-  transformation: {},
-  onAnchorTransformationEnd: () => {},
-  onMouseOverSprite: () => {},
-  onClickSprite: () => {},
-});
-
 interface AppStateContextProviderProps extends AppState {
   children: React.ReactNode;
 }
@@ -28,27 +15,30 @@ interface AppStateContextProviderProps extends AppState {
 export const AppStateContextProvider: React.FC<
   AppStateContextProviderProps
 > = ({ children, ...props }) => {
+  console.log("AppStateContextProvider", props);
   const [appState, setAppState] = React.useState<AppState>(props);
+  const appStateRef = React.useRef<AppState>(appState);
+
   useDeepEffect(() => {
     setAppState(props);
+    appStateRef.current = props;
   }, [props]);
 
   const onAnchorTransformationEnd = React.useCallback(
-    (data: {
-      uniqueId: string;
-      transformation: { [key: string]: unknown };
-    }) => {
+    (data: TransformationEnd) => {
+      console.log("onAnchorTransformationEnd", data);
       const { uniqueId, transformation } = data;
       const newAppState = {
-        ...props,
+        ...appStateRef.current,
         transformation: {
-          ...props.transformation,
+          ...appStateRef.current?.transformation,
           ...transformation,
         },
       };
+      console.log("saving state", newAppState);
       setAppState(newAppState);
     },
-    [props],
+    []
   );
 
   const onMouseOverSprite = React.useCallback((data: unknown) => {}, []);
@@ -56,15 +46,14 @@ export const AppStateContextProvider: React.FC<
   const onClickSprite = React.useCallback((data: unknown) => {}, []);
 
   return (
-    <AppStateContext.Provider
-      value={{
+    <>
+      {/*@ts-ignore */}
+      {React.cloneElement(children, {
         ...appState,
         onAnchorTransformationEnd,
         onMouseOverSprite,
         onClickSprite,
-      }}
-    >
-      {children}
-    </AppStateContext.Provider>
+      })}
+    </>
   );
 };

package/src/utils/AppStateStage.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import ContextBridge from "./ContextBridge";
-import { AppStateContext } from "../providers/AppStateProvider";
+import { AppStateContext } from "./AppStateProvider";
 import { Container as PixiContainer } from "@pixi/react";
 
 interface AppStateStageProps {

package/src/utils/PixiStage.tsx

@@ -1,7 +1,6 @@
 import * as React from "react";
 import ContextBridge from "./ContextBridge";
 import { Stage as PixiStage } from "@pixi/react";
-import { AppStateContextProvider } from "./AppStateProvider";
 import { GsapPixieContext } from "../providers/GsapPixieContextProvider";
 
 interface StageProps {
@@ -18,10 +17,7 @@ const Stage: React.FC<StageProps> = ({ children, ...props }) => {
       render={(children: React.ReactNode | React.ReactElement) => (
         <PixiStage {...props}>
           {/* @ts-ignore */}
-          <AppStateContextProvider {...props}>
-            {/* @ts-ignore */}
-            {children}
-          </AppStateContextProvider>
+          {children}
         </PixiStage>
       )}
     >

package/src/utils/PixiTransformer.tsx

@@ -0,0 +1,100 @@
+import * as PIXI from "pixi.js";
+import * as React from "react";
+// @ts-ignore
+import { Transformer } from "reacthub-react-bindings";
+
+type PixiTransformerProps = {
+  pixiTransformerRef: React.MutableRefObject<any>;
+  imageRef: React.MutableRefObject<any>;
+  isMounted: boolean;
+  transformCommit?: (data: any) => void;
+  transformChange?: (data: any) => void;
+  mouseoverEvent?: (flag: boolean) => void;
+  uniqueId?: string;
+};
+const PixiTransformer = ({
+  pixiTransformerRef,
+  imageRef,
+  isMounted,
+  transformCommit,
+  transformChange,
+  mouseoverEvent,
+  uniqueId = "",
+}: PixiTransformerProps) => {
+  const colorYellow = PIXI.utils.string2hex("#F3C409");
+  const anchorFill = PIXI.utils.string2hex("#F3C409");
+
+  const handleOnMouseOver = React.useCallback(() => {
+    if (mouseoverEvent) {
+      mouseoverEvent(true);
+    }
+  }, [mouseoverEvent]);
+
+  const handleOnMouseOut = React.useCallback(() => {
+    if (mouseoverEvent) {
+      mouseoverEvent(false);
+    }
+  }, [mouseoverEvent]);
+
+  const handleOnTransformCommit = React.useCallback(() => {
+    if (imageRef.current === null) return;
+    const x = imageRef.current.x;
+    const y = imageRef.current.y;
+    const width = imageRef.current.width;
+    const height = imageRef.current.height;
+    const rotate = imageRef.current.rotation;
+    const scale: [number, number] = [
+      imageRef.current.scale.x,
+      imageRef.current.scale.y,
+    ];
+    if (transformCommit) {
+      transformCommit({
+        uniqueId,
+        transformation: {
+          x: Math.round(x),
+          y: Math.round(y),
+          width: Math.round(Math.max(5, width)),
+          height: Math.round(Math.max(5, height)),
+          rotate: Math.round(rotate),
+          scale: scale,
+        },
+      });
+    }
+  }, [transformCommit]);
+
+  React.useEffect(() => {
+    if (pixiTransformerRef.current) {
+      pixiTransformerRef.current.on("mouseover", handleOnMouseOver);
+      pixiTransformerRef.current.on("mouseout", handleOnMouseOut);
+    }
+    return () => {
+      if (pixiTransformerRef.current) {
+        pixiTransformerRef.current.off("mouseover", handleOnMouseOver);
+        pixiTransformerRef.current.off("mouseout", handleOnMouseOut);
+      }
+    };
+  }, []);
+
+  return (
+    <Transformer
+      ref={pixiTransformerRef}
+      group={isMounted ? [imageRef.current] : []}
+      rotateEnabled={true}
+      boxRotationEnabled={true}
+      boxScalingEnabled={true}
+      wireframeStyle={{ thickness: 1, color: anchorFill }}
+      lockAspectRatio={true}
+      scaleEnabled={true}
+      handleStyle={{
+        // color: colorYellow,
+        outlineColor: colorYellow,
+        shape: "circle",
+        radius: 9,
+      }}
+      transformchange={transformChange}
+      transformcommit={handleOnTransformCommit}
+    />
+  );
+};
+
+export default PixiTransformer;

package/src/utils/VideoSeekBar.tsx

@@ -11,7 +11,11 @@ import {
   Box,
   Button,
 } from "@chakra-ui/react";
-import { GsapPixieContext } from "../providers/GsapPixieContextProvider";
+import {
+  GsapPixieContext,
+  Events,
+} from "../providers/GsapPixieContextProvider";
+import { useCustomEventListener, emitCustomEvent } from "react-custom-events";
 
 import { gsap } from "gsap";
 import { Draggable } from "gsap/Draggable";
@@ -30,19 +34,18 @@ export const VideoSeekBar: React.FC = () => {
     handlePause,
     handleReset,
     handleSeek,
+    handleSeekTest,
     handleRestart,
     handleRepeat,
+    totalDuration: duration,
   } = React.useContext(GsapPixieContext);
 
   /// state
   const [time, setTime] = React.useState<number>(0);
-  const [duration, setDuration] = React.useState<number>(0);
-
   const totalVideoSeconds = 20;
 
   const animate = (time: number) => {
     /// console.log("totalDuration", timeline.current.totalDuration());
-    setDuration(timeline.current.totalDuration());
     if (playerTimeRef && playerTimeRef.current) {
       setTime(playerTimeRef.current);
     }
@@ -55,31 +58,39 @@ export const VideoSeekBar: React.FC = () => {
   }, []); // Make sure the effect runs only once
 
   const handleOnSliderChange = (value: number) => {
+    console.log("onslider change", value);
     const nTotSeconds =
       totalVideoSeconds && totalVideoSeconds > 0 ? totalVideoSeconds : 1;
     const progress = value / nTotSeconds;
     console.log("progressbar", value, progress);
+
     playerTimeRef.current = value;
-    // @ts-ignore
-    timeline && timeline.progress(progress);
-    gsap.set(sliderProgressRef.current!, {
-      scaleX: progress,
-    });
+    // handleSeek(value);
+    // // @ts-ignore
+    timeline && timeline.current.progress(progress);
+    // timeline && timeline.current.pause();
+    // gsap.set(sliderProgressRef.current!, {
+    //   scaleX: progress,
+    // });
   };
-  const handleOnSliderChangeStart = (value: number) => {};
-  const handleOnSliderChangeEnd = (value: number) => {};
 
-  /** Create Draggable for the Gsap Player */
+  /** on slider start
+   * 1. pause the timeline
+   * 2. trigger custom event isDraggingStart
+   */
+  const handleOnSliderChangeStart = (value: number) => {
+    // trigger custom event and pause the timeline
+    emitCustomEvent(Events.DRAGGING_START);
+    timeline && timeline.current.pause();
+  };
 
-  const updateDrag = React.useCallback(
-    (x: number, maxX: number) => {
-      console.log("updatgeDrag running", x, maxX);
-      const currentTime = (x / maxX) * totalVideoSeconds;
-      const prog = x / sliderRef.current!.offsetWidth;
-      console.log("drage update", currentTime, prog);
-    },
-    [totalVideoSeconds],
-  );
+  const handleOnSliderChangeEnd = (value: number) => {
+    // trigger custom event and pause the timeline
+    emitCustomEvent(Events.DRAGGING_END);
+    timeline && timeline.current.pause();
+  };
+
+  /** Create Draggable for the Gsap Player */
 
   return (
     <Flex flexDir={"column"}>
@@ -87,7 +98,7 @@ export const VideoSeekBar: React.FC = () => {
         <Button onClick={handleRestart}>Play</Button>
         <Button onClick={handlePause}>Pause</Button>
         <Button onClick={handlePlay}>Resume</Button>
-        <Button onClick={handleSeek}>Seek (4:00)</Button>
+        <Button onClick={handleSeekTest}>Seek (4:00)</Button>
       </Box>
       <Flex px={1} mt={2}>
         <Slider
@@ -95,7 +106,7 @@ export const VideoSeekBar: React.FC = () => {
           data-testid="sliderthumb"
           value={playerTimeRef.current || 0}
           min={0}
-          max={duration}
+          max={10}
           step={0.1}
           onChange={handleOnSliderChange}
           onChangeStart={handleOnSliderChangeStart}

package/src/utils/useDebounce.tsx

@@ -0,0 +1,15 @@
+import { useEffect, useState } from "react";
+
+export function useDebounce<T>(value: T, delay?: number): T {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setDebouncedValue(value), delay || 500);
+
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+}