reacthub-pixitweenjs 0.2.4 → 0.2.6

package/src/utils/VideoSeekBar.tsx

@@ -4,14 +4,16 @@ import {
   SliderTrack,
   SliderFilledTrack,
   SliderThumb,
-  SliderMark,
   Flex,
-  Icon,
   Text,
   Box,
   Button,
 } from "@chakra-ui/react";
-import { GsapPixieContext } from "../providers/GsapPixieContextProvider";
+import {
+  GsapPixieContext,
+  Events,
+} from "../providers/GsapPixieContextProvider";
+import { emitCustomEvent } from "react-custom-events";
 
 import { gsap } from "gsap";
 import { Draggable } from "gsap/Draggable";
@@ -20,29 +22,23 @@ gsap.registerPlugin(Draggable);
 
 export const VideoSeekBar: React.FC = () => {
   const rafRef = React.useRef<number>();
-  const sliderRef = React.useRef<HTMLDivElement>(null);
   const sliderThumbRef = React.useRef<HTMLDivElement>(null);
-  const sliderProgressRef = React.useRef<HTMLDivElement>(null);
   const {
     tl: timeline,
     playerTimeRef,
     handlePlay,
     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) => {
+  const animate = () => {
     /// console.log("totalDuration", timeline.current.totalDuration());
-    setDuration(timeline.current.totalDuration());
     if (playerTimeRef && playerTimeRef.current) {
       setTime(playerTimeRef.current);
     }
@@ -55,31 +51,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 = () => {
+    // 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 = () => {
+    // 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 +91,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 +99,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;
+}

package/src/hooks/usePixiTransformer.tsx

@@ -1,168 +0,0 @@
-import { Transformer } from "@pixi-essentials/transformer";
-import * as PIXI from "pixi.js";
-import { useApp } from "@pixi/react";
-import * as React from "react";
-import { useEffect, useRef, useCallback } from "react";
-import { Transformation } from "../types/transformation";
-// @ts-ignore
-import has from "lodash/has";
-
-const colorYellow = PIXI.utils.string2hex("#F3C409");
-const anchorFill = PIXI.utils.string2hex("#F3C409");
-
-interface Events {
-  dblclick?: (e: any) => void;
-}
-
-interface Props {
-  uniqueId?: string;
-  onTransformEnd?: (data: {
-    uniqueId: string;
-    transformation: Transformation;
-  }) => void;
-  events?: Events;
-  mouseoverEvent?: (flag: boolean) => void;
-  setDragging?: (flag: boolean) => void;
-}
-
-export const usePixiTransformer = ({
-  uniqueId = "",
-  onTransformEnd,
-  events = {},
-  mouseoverEvent = (f) => f,
-  setDragging = (f) => f,
-}: Props) => {
-  const [isDragging, setIsDragging] = React.useState(false);
-  const PixiTransformer = React.useRef<PIXI.Container>(null);
-  const mounted = React.useRef(false);
-  const app = useApp();
-  const transformerRef = useRef<Transformer>(null);
-  const parentRef = useRef<PIXI.Container>(null);
-
-  useEffect(() => {
-    mounted.current = true;
-    return () => {
-      mounted.current = false;
-      if (transformerRef.current) {
-        parentRef.current?.removeChild(transformerRef.current);
-      }
-    };
-  }, []);
-
-  const transformChange = useCallback(() => {
-    setIsDragging(true);
-    setDragging(true);
-  }, []);
-
-  const transformCommit = useCallback(() => {
-    if (PixiTransformer.current === null) return;
-    const x = PixiTransformer.current.x;
-    const y = PixiTransformer.current.y;
-    const width = PixiTransformer.current.width;
-    const height = PixiTransformer.current.height;
-    const rotate = PixiTransformer.current.rotation;
-    const scale: [number, number] = [
-      PixiTransformer.current.scale.x,
-      PixiTransformer.current.scale.y,
-    ];
-    if (onTransformEnd) {
-      onTransformEnd({
-        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,
-        },
-      });
-    }
-    setIsDragging(false);
-    setDragging(false);
-  }, []);
-
-  const handleOnDblClick = useCallback((e: any) => {
-    if (events && has(events, "dblclick") && events.dblclick) {
-      events.dblclick(e);
-    }
-  }, []);
-
-  const handleOnMouseOver = useCallback(
-    (msevent: any) => {
-      if (mouseoverEvent) {
-        mouseoverEvent(true);
-      }
-    },
-    [mouseoverEvent],
-  );
-
-  const handleOnMouseOut = useCallback(
-    (msevent: any) => {
-      if (mouseoverEvent) {
-        mouseoverEvent(false);
-      }
-    },
-    [mouseoverEvent],
-  );
-
-  const handleTransformer = useCallback(
-    (node: PIXI.Container, parentNode: PIXI.Container) => {
-      const isEnabled = true;
-      // @ts-ignore
-      PixiTransformer.current = node;
-      const transformer = new Transformer({
-        rotateEnabled: isEnabled,
-        boxRotationEnabled: isEnabled,
-        boxScalingEnabled: isEnabled,
-        scaleEnabled: isEnabled,
-        group: [node],
-        wireframeStyle: {
-          thickness: 2,
-          color: anchorFill,
-        },
-        lockAspectRatio: true,
-        handleStyle: {
-          // color: colorYellow,
-          outlineColor: colorYellow,
-          shape: "circle",
-          radius: 10,
-        },
-      });
-
-      // transformer.addListener("transformchange", transformChange);
-      // @ts-ignore
-      transformer.addListener("transformcommit", transformCommit);
-      // transformer.addListener("dblclick", (evt) => {
-      //   handleOnDblClick(evt);
-      // });
-      // transformer.on("mouseover", () => {
-      //   handleOnMouseOver(true);
-      // });
-      // transformer.on("mouseout", () => {
-      //   handleOnMouseOut(false);
-      // });
-      // @ts-ignore
-      transformerRef.current = transformer;
-      // @ts-ignore
-      parentRef.current = parentNode;
-      parentRef.current.addChild(transformerRef.current);
-    },
-    [
-      transformCommit,
-      transformChange,
-      handleOnMouseOver,
-      handleOnMouseOut,
-      handleOnDblClick,
-    ],
-  );
-
-  const removeTransformer = useCallback(() => {
-    if (transformerRef.current) {
-      // @ts-ignore
-      parentRef.current.removeChild(transformerRef.current);
-    }
-  }, []);
-
-  return { handleTransformer, removeTransformer, isDragging };
-};