reacthub-pixitweenjs 0.2.2

package/src/providers/GsapPixieContextProvider.jsx

@@ -0,0 +1,162 @@
+import React, {
+  useState,
+  useEffect,
+  useCallback,
+  useRef,
+  useLayoutEffect,
+} from "react";
+import gsap from "gsap";
+import { emitCustomEvent } from "react-custom-events";
+// import { Power4 } from "gsap";
+
+// Context has been created
+const GsapPixieContext = React.createContext({});
+
+const Events = {
+  STOP: "GSAP_STOP",
+  PAUSE: "GSAP_PAUSE",
+  PLAY: "GSAP_PLAY",
+  RESUME: "GSAP_RESUME",
+};
+// Provider
+const GsapPixieContextProvider = ({ children }) => {
+  const [play, setPlay] = useState(false);
+  const [frameNumber, setFrameNumber] = useState(0);
+
+  const tl = useRef();
+  const gsapCtx = useRef();
+  const playerTimeRef = useRef(0.001);
+
+  // gsap.ticker.add((time, deltaTime, frame) => {
+  //   console.log("timeframe", time, deltaTime, frame);
+  //   setFrameNumber(frame);
+  // });
+
+  const parentElementRef = useRef();
+  // передаем предка анимируемых элементов
+  const q = gsap.utils.selector(parentElementRef);
+
+  useLayoutEffect(() => {
+    gsapCtx.current = gsap.context(() => {
+      // add a box and circle animation to our timeline and play on first render
+      // console.log("creating timeline");
+      tl.current && tl.current.progress(0).kill();
+      tl.current = gsap.timeline({
+        paused: true,
+        defaults: { duration: 0 },
+      });
+    });
+    return () => gsapCtx.current.revert();
+  }, []);
+
+  const onUpdate = useCallback(() => {
+    /// console.log("update event callback");
+    const timeline = tl.current;
+    var now = timeline.time();
+    var elapsedTime;
+    if (playerTimeRef.current) {
+      elapsedTime = now - playerTimeRef.current;
+    }
+    //  console.log(`elapseTime :${elapsedTime} and frame: ${frameNumber}`);
+    //time = now;
+    playerTimeRef.current = now;
+  }, []);
+
+  // const timeline = React.useCallback(
+  //   gsap.timeline({
+  //     paused: true,
+  //     defaults: { duration: 0, onUpdate: onUpdate },
+  //   }),
+  //   [],
+  // );
+
+  useEffect(() => {
+    const timeline = tl.current;
+    timeline
+      .eventCallback("onUpdate", function () {
+        /// console.log("onupdate", timeline.progress());
+        onUpdate();
+      })
+      .eventCallback("onComplete", function () {
+        timeline.seek(0.01);
+        timeline.pause();
+        onUpdate();
+      });
+  }, []);
+
+  useEffect(() => {
+    const timeline = tl.current;
+    if (!play) {
+      timeline.pause();
+    } else {
+      timeline.resume();
+    }
+  }, [play]);
+
+  const addTotalDuration = (duration) => {
+    const timeline = tl.current;
+    timeline.totalDuration(duration);
+  };
+
+  const handleReset = useCallback(() => {
+    const timeline = tl.current;
+
+    timeline.revert();
+  }, []);
+
+  const handleRestart = useCallback(() => {
+    const timeline = tl.current;
+    timeline.restart();
+  }, []);
+
+  const handleRepeat = useCallback(() => {
+    const timeline = tl.current;
+
+    timeline.repeat(1);
+    timeline.restart();
+  }, []);
+
+  const handleSeek = useCallback(() => {
+    const timeline = tl.current;
+    timeline.seek(4);
+  }, []);
+
+  const setDurationTimeline = useCallback(() => {
+    const timeline = tl.current;
+
+    timeline.totalDuration(3);
+  }, []);
+
+  const handlePause = () => {
+    const timeline = tl.current;
+
+    timeline.pause();
+    emitCustomEvent(Events.PAUSE);
+  };
+
+  const handlePlay = () => {
+    const timeline = tl.current;
+    timeline.resume();
+    emitCustomEvent(Events.RESUME);
+  };
+
+  return (
+    <GsapPixieContext.Provider
+      value={{
+        gsapCtx,
+        tl,
+        handlePlay,
+        handlePause,
+        handleReset,
+        handleSeek,
+        handleRestart,
+        handleRepeat,
+        playerTimeRef,
+      }}
+    >
+      {children}
+    </GsapPixieContext.Provider>
+  );
+};
+
+export { GsapPixieContext, GsapPixieContextProvider, Events };

package/src/providers/VideoSeekBar.jsx

@@ -0,0 +1,186 @@
+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

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

package/src/stories/Installation.mdx

@@ -0,0 +1,40 @@
+import { Meta } from "@storybook/blocks";
+import Code from "./assets/code-brackets.svg";
+import Colors from "./assets/colors.svg";
+import Comments from "./assets/comments.svg";
+import Direction from "./assets/direction.svg";
+import Flow from "./assets/flow.svg";
+import Plugin from "./assets/plugin.svg";
+import Repo from "./assets/repo.svg";
+import StackAlt from "./assets/stackalt.svg";
+
+<Meta title="GETTING STARTED/Installation" />
+
+# Installation
+
+<br />
+
+## To install the component packages using NPM:
+
+```
+npm install reacthub-pixitweenjs
+```
+
+## Make sure you install the devDependencies in your project.
+
+```
+npm install
+    "@pixi-essentials/react-bindings": "2.0.0",
+    "@pixi-essentials/transformer": "2.5.6",
+    "@pixi/assets": "6.5.9",
+    "@pixi/basis": "6.5.9",
+    "@pixi/filter-adjustment": "5.1.1",
+    "@pixi/gif": "1.1.3",
+    "@pixi/interaction": "6.5.9",
+    "@pixi/picture": "^3.0.3",
+    "@pixi/react": "7.0.0",
+    "@pixi/sound": "^4.3.1",
+    "pixi-filters": "5.1.1",
+    "pixi-svg": "3.2.0",
+    "pixi.js": "6.5.9",
+```

package/src/stories/Introduction.mdx

@@ -0,0 +1,239 @@
+import { Meta } from "@storybook/blocks";
+import Code from "./assets/code-brackets.svg";
+import Colors from "./assets/colors.svg";
+import Comments from "./assets/comments.svg";
+import Direction from "./assets/direction.svg";
+import Flow from "./assets/flow.svg";
+import Plugin from "./assets/plugin.svg";
+import Repo from "./assets/repo.svg";
+import StackAlt from "./assets/stackalt.svg";
+
+<Meta title="GETTING STARTED/Introduction" />
+
+<style>
+  {`
+    .subheading {
+      --mediumdark: '#999999';
+      font-weight: 700;
+      font-size: 13px;
+      color: #999;
+      letter-spacing: 6px;
+      line-height: 24px;
+      text-transform: uppercase;
+      margin-bottom: 12px;
+      margin-top: 40px;
+    }
+
+    .link-list {
+      display: grid;
+      grid-template-columns: 1fr;
+      grid-template-rows: 1fr 1fr;
+      row-gap: 10px;
+    }
+
+    @media (min-width: 620px) {
+      .link-list {
+        row-gap: 20px;
+        column-gap: 20px;
+        grid-template-columns: 1fr 1fr;
+      }
+    }
+
+    @media all and (-ms-high-contrast:none) {
+    .link-list {
+        display: -ms-grid;
+        -ms-grid-columns: 1fr 1fr;
+        -ms-grid-rows: 1fr 1fr;
+      }
+    }
+
+    .link-item {
+      display: block;
+      padding: 20px;
+      border: 1px solid #00000010;
+      border-radius: 5px;
+      transition: background 150ms ease-out, border 150ms ease-out, transform 150ms ease-out;
+      color: #333333;
+      display: flex;
+      align-items: flex-start;
+    }
+
+    .link-item:hover {
+      border-color: #1EA7FD50;
+      transform: translate3d(0, -3px, 0);
+      box-shadow: rgba(0, 0, 0, 0.08) 0 3px 10px 0;
+    }
+
+    .link-item:active {
+      border-color: #1EA7FD;
+      transform: translate3d(0, 0, 0);
+    }
+
+    .link-item strong {
+      font-weight: 700;
+      display: block;
+      margin-bottom: 2px;
+    }
+
+    .link-item img {
+      height: 40px;
+      width: 40px;
+      margin-right: 15px;
+      flex: none;
+    }
+
+    .link-item span,
+    .link-item p {
+      margin: 0;
+      font-size: 14px;
+      line-height: 20px;
+    }
+
+    .tip {
+      display: inline-block;
+      border-radius: 1em;
+      font-size: 11px;
+      line-height: 12px;
+      font-weight: 700;
+      background: #E7FDD8;
+      color: #66BF3C;
+      padding: 4px 12px;
+      margin-right: 10px;
+      vertical-align: top;
+    }
+
+    .tip-wrapper {
+      font-size: 13px;
+      line-height: 20px;
+      margin-top: 40px;
+      margin-bottom: 40px;
+    }
+
+    .tip-wrapper code {
+      font-size: 12px;
+      display: inline-block;
+    }
+  `}
+</style>
+
+# Welcome to Reacthub PixiTweenJS
+
+PixiTweenJs is designed to help you build animated time-controlled canvas elements on web apps using extensible Pixijs Components underneath.
+The package composes the reacthub/pixitweenjs Web Component package. You can use these Web Components flexibly, either from npm packages, from the CDN, or you can bring it into your project to customize and extend it. See the installation page for details.
+
+This storybook provides documentation and an interactive component playground from Accordion to TreeView to help you understand how to build with Fluent Web Components.
+
+- See the COMPONENTS live in the side bar.
+- See the installation page for installation and getting started
+- View the integration examples to leverage the components in your front-end framework
+- Check out the GitHub repo for Web Components, part of the Fluent UI monorepo
+
+reacthub-pixitweenjs is a library that provides a powerful combination of React, PixiJS, GSAP, and image manipulation capabilities in a timeline sequence. With this library, you can easily create stunning animations and interactive graphics for your React applications.
+
+The library is built on top of PixiJS, a popular 2D WebGL rendering engine, and GSAP, a powerful animation library. It provides a simple and intuitive API for creating animations and manipulating images in a timeline sequence. You can easily create complex animations by composing multiple PixiJS and GSAP animations together.
+
+reacthub-pixitweenjs also provides a set of React components that make it easy to integrate PixiJS and GSAP animations into your React applications. These components are highly customizable and can be easily styled to match the look and feel of your application.
+
+Overall, reacthub-pixitweenjs is a great choice for developers who want to create stunning animations and interactive graphics in their React applications. It provides a powerful set of tools and a simple API that makes it easy to create complex animations and manipulate images in a timeline sequence.
+
+Storybook helps you build UI components in isolation from your app's business logic, data, and context.
+That makes it easy to develop hard-to-reach states. Save these UI states as **stories** to revisit during development, testing, or QA.
+
+Browse example stories now by navigating to them in the sidebar.
+View their code in the `stories` directory to learn how they work.
+We recommend building UIs with a [**component-driven**](https://componentdriven.org) process starting with atomic components and ending with pages.
+
+<div className="subheading">Configure</div>
+
+<div className="link-list">
+  <a
+    className="link-item"
+    href="https://storybook.js.org/docs/react/addons/addon-types"
+    target="_blank"
+  >
+    <img src={Plugin} alt="plugin" />
+    <span>
+      <strong>Presets for popular tools</strong>
+      Easy setup for TypeScript, SCSS and more.
+    </span>
+  </a>
+  <a
+    className="link-item"
+    href="https://storybook.js.org/docs/react/configure/webpack"
+    target="_blank"
+  >
+    <img src={StackAlt} alt="Build" />
+    <span>
+      <strong>Build configuration</strong>
+      How to customize webpack and Babel
+    </span>
+  </a>
+  <a
+    className="link-item"
+    href="https://storybook.js.org/docs/react/configure/styling-and-css"
+    target="_blank"
+  >
+    <img src={Colors} alt="colors" />
+    <span>
+      <strong>Styling</strong>
+      How to load and configure CSS libraries
+    </span>
+  </a>
+  <a
+    className="link-item"
+    href="https://storybook.js.org/docs/react/get-started/setup#configure-storybook-for-your-stack"
+    target="_blank"
+  >
+    <img src={Flow} alt="flow" />
+    <span>
+      <strong>Data</strong>
+      Providers and mocking for data libraries
+    </span>
+  </a>
+</div>
+
+<div className="subheading">Learn</div>
+
+<div className="link-list">
+  <a className="link-item" href="https://storybook.js.org/docs" target="_blank">
+    <img src={Repo} alt="repo" />
+    <span>
+      <strong>Storybook documentation</strong>
+      Configure, customize, and extend
+    </span>
+  </a>
+  <a
+    className="link-item"
+    href="https://storybook.js.org/tutorials/"
+    target="_blank"
+  >
+    <img src={Direction} alt="direction" />
+    <span>
+      <strong>In-depth guides</strong>
+      Best practices from leading teams
+    </span>
+  </a>
+  <a
+    className="link-item"
+    href="https://github.com/storybookjs/storybook"
+    target="_blank"
+  >
+    <img src={Code} alt="code" />
+    <span>
+      <strong>GitHub project</strong>
+      View the source and add issues
+    </span>
+  </a>
+  <a className="link-item" href="https://discord.gg/storybook" target="_blank">
+    <img src={Comments} alt="comments" />
+    <span>
+      <strong>Discord chat</strong>
+      Chat with maintainers and the community
+    </span>
+  </a>
+</div>
+
+<div className="tip-wrapper">
+  <span className="tip">Tip</span>Edit the Markdown in{" "}
+  <code>stories/Introduction.stories.mdx</code>
+</div>