reacthub-pixitweenjs 0.2.2 → 0.2.4

package/src/utils/VideoSeekBar.tsx

@@ -0,0 +1,118 @@
+import * as React from "react";
+import {
+  Slider,
+  SliderTrack,
+  SliderFilledTrack,
+  SliderThumb,
+  SliderMark,
+  Flex,
+  Icon,
+  Text,
+  Box,
+  Button,
+} from "@chakra-ui/react";
+import { GsapPixieContext } from "../providers/GsapPixieContextProvider";
+
+import { gsap } from "gsap";
+import { Draggable } from "gsap/Draggable";
+
+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,
+    handleRestart,
+    handleRepeat,
+  } = 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);
+    }
+    rafRef.current = requestAnimationFrame(animate);
+  };
+
+  React.useEffect(() => {
+    rafRef.current = requestAnimationFrame(animate);
+    return () => cancelAnimationFrame(rafRef.current!);
+  }, []); // Make sure the effect runs only once
+
+  const handleOnSliderChange = (value: number) => {
+    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,
+    });
+  };
+  const handleOnSliderChangeStart = (value: number) => {};
+  const handleOnSliderChangeEnd = (value: number) => {};
+
+  /** Create Draggable for the Gsap Player */
+
+  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],
+  );
+
+  return (
+    <Flex flexDir={"column"}>
+      <Box>
+        <Button onClick={handleRestart}>Play</Button>
+        <Button onClick={handlePause}>Pause</Button>
+        <Button onClick={handlePlay}>Resume</Button>
+        <Button onClick={handleSeek}>Seek (4:00)</Button>
+      </Box>
+      <Flex px={1} mt={2}>
+        <Slider
+          aria-label="slider-ex-1"
+          data-testid="sliderthumb"
+          value={playerTimeRef.current || 0}
+          min={0}
+          max={duration}
+          step={0.1}
+          onChange={handleOnSliderChange}
+          onChangeStart={handleOnSliderChangeStart}
+          onChangeEnd={handleOnSliderChangeEnd}
+        >
+          <SliderTrack>
+            <SliderFilledTrack />
+          </SliderTrack>
+          <SliderThumb data-testid="sliderthumb" ref={sliderThumbRef} />
+        </Slider>
+      </Flex>
+      <Flex flexDir={"row"}>
+        <Text>
+          Gsap-CurrentTime: {Math.round((time + Number.EPSILON) * 100) / 100} /{" "}
+          {duration}
+        </Text>
+      </Flex>
+    </Flex>
+  );
+};

package/src/utils/useDeepEffect.tsx

@@ -0,0 +1,23 @@
+import { useEffect, useRef } from "react";
+// @ts-ignore
+import isEqual from "react-fast-compare";
+
+type EffectFunc = () => void;
+type Deps = ReadonlyArray<unknown>;
+
+const useDeepEffect = (effectFunc: EffectFunc, deps: Deps) => {
+  const isFirst = useRef(true);
+  const prevDeps = useRef(deps);
+  useEffect(() => {
+    const isSame = prevDeps.current.every((obj, index) =>
+      isEqual(obj, deps[index]),
+    );
+    if (isFirst.current || !isSame) {
+      effectFunc();
+    }
+    isFirst.current = false;
+    prevDeps.current = deps;
+  }, deps);
+};
+
+export default useDeepEffect;

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/tsconfig.json

@@ -0,0 +1,37 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "plugins": [
+      {
+        "name": "typescript-plugin-css-modules",
+        "options": {
+          "postcssOptions": {
+            "useConfig": true
+          }
+        }
+      }
+    ],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    /* Bundler mode */
+    "moduleResolution": "node",
+    "allowImportingTsExtensions": false,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "types": ["vitest/globals"],
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ]
+}

package/tsconfig.node.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/{vite.config.js → vite.config.ts}

@@ -1,9 +1,11 @@
 import { defineConfig } from "vite";
-import react from "@vitejs/plugin-react";
+// import react from "@vitejs/plugin-react";
+import react from "@vitejs/plugin-react-swc";
+import EnvironmentPlugin from "vite-plugin-environment";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [react(), EnvironmentPlugin("all")],
   // build: {
   //   rollupOptions: {
   //     external: [

package/vitest.config.ts

@@ -0,0 +1,11 @@
+import { defineConfig } from "vitest/config";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    globals: true,
+    css: true,
+    environment: "jsdom",
+  },
+});

package/src/App.jsx

@@ -1,35 +0,0 @@
-import { useState } from 'react'
-import reactLogo from './assets/react.svg'
-import viteLogo from '/vite.svg'
-import './App.css'
-
-function App() {
-  const [count, setCount] = useState(0)
-
-  return (
-    <div className="App">
-      <div>
-        <a href="https://vitejs.dev" target="_blank">
-          <img src={viteLogo} className="logo" alt="Vite logo" />
-        </a>
-        <a href="https://reactjs.org" target="_blank">
-          <img src={reactLogo} className="logo react" alt="React logo" />
-        </a>
-      </div>
-      <h1>Vite + React</h1>
-      <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </button>
-        <p>
-          Edit <code>src/App.jsx</code> and save to test HMR
-        </p>
-      </div>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
-    </div>
-  )
-}
-
-export default App

package/src/index.js

@@ -1,3 +0,0 @@
-export * from "./stories/PixiImageSprite";
-// Path: src\index.js
-export * from './providers';

package/src/providers/ContextBridge.jsx

@@ -1,67 +0,0 @@
-// your Stage:
-import { Stage as PixiStage } from "@pixi/react";
-import React from "react";
-import { Flex, Icon, Text, Box, Button } from "@chakra-ui/react";
-import * as PIXI from "pixi.js";
-import { ChakraProvider } from "@chakra-ui/react";
-import {
-  GsapPixieContext,
-  GsapPixieContextProvider,
-} from "./GsapPixieContextProvider";
-
-import { VideoSeekBar } from "./VideoSeekBar";
-
-// the context bridge:
-const ContextBridge = ({ children, Context, render }) => {
-  return (
-    <Context.Consumer>
-      {(value) => {
-        console.log("value", value);
-        return render(
-          <Context.Provider value={value}>{children}</Context.Provider>,
-        );
-      }}
-    </Context.Consumer>
-  );
-};
-
-const Stage = ({ children, ...props }) => {
-  return (
-    <ContextBridge
-      Context={GsapPixieContext}
-      render={(children) => <PixiStage {...props}>{children}</PixiStage>}
-    >
-      {children}
-    </ContextBridge>
-  );
-};
-
-export const App = ({ children, backgroundColor, ...props }) => {
-  const backgroundColorx = PIXI.utils.string2hex(backgroundColor || "#2D2E3C");
-  const width = 600;
-  const height = 500;
-
-  /// color: 0x1099bb,
-  return (
-    <div className="App">
-      <GsapPixieContextProvider>
-        <ChakraProvider>
-          <Flex flexDir={"column"}>
-            <Stage
-              width={width}
-              height={height}
-              // options={{ background: backgroundColor }}
-              options={{ backgroundColor: backgroundColorx, resolution: 2 }}
-            >
-              {children}
-            </Stage>
-
-            <Box mt={5} w={600}>
-              <VideoSeekBar />
-            </Box>
-          </Flex>
-        </ChakraProvider>
-      </GsapPixieContextProvider>
-    </div>
-  );
-};

package/src/providers/VideoSeekBar.jsx

@@ -1,186 +0,0 @@
-import React from "react";
-import {
-  Slider,
-  SliderTrack,
-  SliderFilledTrack,
-  SliderThumb,
-  SliderMark,
-  Flex,
-  Icon,
-  Text,
-  Box,
-  Button,
-} from "@chakra-ui/react";
-import { GsapPixieContext } from "./GsapPixieContextProvider";
-
-import { gsap } from "gsap";
-import { Draggable } from "gsap/Draggable";
-
-gsap.registerPlugin(Draggable);
-
-export const VideoSeekBar = () => {
-  const rafRef = React.useRef();
-  const sliderRef = React.useRef();
-  const sliderThumbRef = React.useRef(null);
-  const sliderProgressRef = React.useRef(null);
-  const {
-    tl: timeline,
-    playerTimeRef,
-    handlePlay,
-    handlePause,
-    handleReset,
-    handleSeek,
-    handleRestart,
-    handleRepeat,
-  } = React.useContext(GsapPixieContext);
-
-  /// state
-  const [time, setTime] = React.useState(0);
-  const [duration, setDuration] = React.useState(0);
-
-  const totalVideoSeconds = 20;
-
-  const animate = (time) => {
-    /// console.log("totalDuration", timeline.current.totalDuration());
-    setDuration(timeline.current.totalDuration());
-    if (playerTimeRef && playerTimeRef.current) {
-      setTime(playerTimeRef.current);
-    }
-    rafRef.current = requestAnimationFrame(animate);
-  };
-
-  React.useEffect(() => {
-    rafRef.current = requestAnimationFrame(animate);
-    return () => cancelAnimationFrame(rafRef.current);
-  }, []); // Make sure the effect runs only once
-
-  const handleOnSliderChange = (value) => {
-    const nTotSeconds =
-      totalVideoSeconds && totalVideoSeconds > 0 ? totalVideoSeconds : 1;
-    const progress = value / nTotSeconds;
-    console.log("progressbar", value, progress);
-    playerTimeRef.current = value;
-    timeline && timeline.progress(progress);
-    gsap.set(sliderProgressRef.current, {
-      scaleX: progress,
-    });
-  };
-  const handleOnSliderChangeStart = (value) => {};
-  const handleOnSliderChangeEnd = (value) => {};
-
-  /** Create Draggable for the Gsap Player */
-
-  const updateDrag = React.useCallback(
-    (x, maxX) => {
-      console.log("updatgeDrag running", x, maxX);
-      const currentTime = (x / maxX) * totalVideoSeconds;
-      const prog = x / sliderRef.current.offsetWidth;
-      console.log("drage update", currentTime, prog);
-    },
-    [totalVideoSeconds],
-  );
-
-  /**
-  React.useEffect(() => {
-    console.log(sliderRef.current.clientWidth, sliderRef.current.innerWidth);
-    console.log(
-      sliderThumbRef.current.clientWidth,
-      sliderThumbRef.current.innerWidth,
-    );
-    Draggable.create(sliderThumbRef.current, {
-      type: "x",
-      trigger: sliderRef.current,
-      bounds: sliderRef.current,
-      onPress: function () {
-        console.log("Draggable clicked");
-      },
-      onDrag: function () {
-        const currentTime = (this.x / this.maxX) * totalVideoSeconds;
-        /// console.log("onDragggg currenttime", currentTime);
-        playerTimeRef.current = currentTime;
-        const progress = this.x / sliderRef.current.offsetWidth;
-        timeline && timeline.progress(progress);
-        gsap.set(sliderProgressRef.current, {
-          scaleX: progress,
-        });
-      },
-      onRelease: function (e) {
-        e.preventDefault();
-        timeline && timeline.pause();
-        handlePause();
-      },
-    });
-  }, []);
- */
-  return (
-    <Flex flexDir={"column"}>
-      <Box>
-        <Button onClick={handleRestart}>Play</Button>
-        <Button onClick={handlePause}>Pause</Button>
-        <Button onClick={handlePlay}>Resume</Button>
-        <Button onClick={handleSeek}>Seek (4:00)</Button>
-      </Box>
-      <Flex px={1} mt={2}>
-        <Slider
-          aria-label="slider-ex-1"
-          data-testid="sliderthumb"
-          value={playerTimeRef.current || 0}
-          min={0}
-          max={duration}
-          step={0.1}
-          onChange={handleOnSliderChange}
-          onChangeStart={handleOnSliderChangeStart}
-          onChangeEnd={handleOnSliderChangeEnd}
-        >
-          <SliderTrack>
-            <SliderFilledTrack />
-          </SliderTrack>
-          <SliderThumb data-testid="sliderthumb" />
-        </Slider>
-      </Flex>
-      <Flex flexDir={"row"}>
-        <Text>
-          Gsap-CurrentTime: {Math.round((time + Number.EPSILON) * 100) / 100} /{" "}
-          {duration}
-        </Text>
-      </Flex>
-    </Flex>
-  );
-};
-
-/**
- * 
- <Box mt={5}>
-          <Box
-            ref={sliderRef}
-            bgColor={"black"}
-            width={"100%"}
-            height={5}
-            cursor={"pointer"}
-            position={"relative"}
-          >
-            <Box
-              ref={sliderThumbRef}
-              data-id="draggable"
-              bgColor={"yellow"}
-              h={5}
-              width={"5px"}
-              top={0}
-              position={"absolute"}
-              zIndex={2}
-              transformOrigin={"0 0"}
-            />
-            <Box
-              ref={sliderProgressRef}
-              data-id="draggable"
-              width={"100%"}
-              height={"100%"}
-              bgColor={"green.100"}
-              transform={"scaleX(0)"}
-              transformOrigin={"0 0"}
-              position={"relative"}
-              zIndex={1}
-            />
-          </Box>
-        </Box>
- */

package/src/providers/index.js

@@ -1,3 +0,0 @@
-export *  from './ContextBridge';
-export * from './GsapAnim';
-export * from './GsapPixieContextProvider';