reacthub-pixitweenjs 0.2.4 → 0.2.5

package/package.json

@@ -1,18 +1,17 @@
 {
   "name": "reacthub-pixitweenjs",
-  "version": "0.2.4",
+  "version": "0.2.5",
   "description": "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",
   "author": "khanzzirfan",
   "type": "module",
   "repository": {
     "type": "git",
-    "url": "https://github.com/khanzzirfan/reacthub-gsap-pixiez"
+    "url": "https://github.com/khanzzirfan/reacthub-pixitweenjs"
   },
   "bugs": {
-    "url": "https://github.com/khanzzirfan/reacthub-gsap-pixiez/issues"
+    "url": "https://github.com/khanzzirfan/reacthub-pixitweenjs"
   },
   "license": "MIT",
-  "dependencies": {},
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
@@ -36,16 +35,9 @@
     "@giphy/js-fetch-api": "^4.1.2",
     "@giphy/js-types": "^4.1.0",
     "@giphy/react-components": "^5.6.1",
-    "@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/assets": "^7.2.3",
+    "@pixi/filter-adjustment": "^5.1.1",
+    "@pixi/react": "~7.1.0",
     "@react-gifs/tools": "^0.1.2",
     "@storybook/addon-essentials": "^7.1.0",
     "@storybook/addon-interactions": "^7.1.0",
@@ -54,6 +46,7 @@
     "@storybook/addon-styling": "^1.3.4",
     "@storybook/blocks": "^7.1.0",
     "@storybook/builder-vite": "^7.1.0",
+    "@storybook/jest": "^0.1.0",
     "@storybook/react": "^7.1.0",
     "@storybook/react-vite": "^7.1.0",
     "@storybook/testing-library": "^0.2.0",
@@ -61,50 +54,54 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^14.0.0",
     "@types/dotenv": "^8.2.0",
+    "@types/howler": "^2.2.8",
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
     "@vitejs/plugin-react": "^4.0.3",
     "@vitejs/plugin-react-swc": "^3.3.2",
-    "@storybook/jest": "^0.1.0",
-    "jsdom": "^21.1.2",
+    "chromatic": "^6.7.3",
+    "debug": "^4.3.4",
+    "dotenv": "^16.0.1",
+    "env-cmd": "^10.1.0",
     "eslint": "^8.45.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-typescript": "^17.1.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.3.5",
     "eslint-plugin-storybook": "^0.6.12",
-    "react-fast-compare": "^3.2.0",
-    "chromatic": "^6.7.3",
-    "debug": "^4.3.4",
-    "dotenv": "^16.0.1",
-    "env-cmd": "^10.1.0",
     "framer-motion": "^8.4.0",
+    "gifuct-js": "^2.1.2",
     "gsap": "3.11.5",
+    "howler": "^2.2.3",
+    "jsdom": "^21.1.2",
     "lodash": "4.17.21",
     "msw": "^1.2.1",
     "msw-storybook-addon": "^1.8.0",
-    "pixi-filters": "5.1.1",
-    "pixi-svg": "3.2.0",
-    "pixi.js": "6.5.9",
+    "pixi-filters": "^5.2.1",
+    "pixi-svg": "^3.2.0",
+    "pixi.js": "^7.2.3",
     "prop-types": "^15.8.1",
-    "react-custom-events": "^1.1.1",
-    "react-gsap": "^3.2.1",
     "react": "^18.2.0",
+    "react-custom-events": "^1.1.1",
     "react-dom": "^18.2.0",
-    "storybook-react-context": "^0.6.0",
+    "react-fast-compare": "^3.2.0",
+    "reacthub-react-bindings": "latest",
     "standard-version": "^9.5.0",
     "storybook": "^7.1.0",
+    "storybook-react-context": "^0.6.0",
     "stylelint": "^15.10.2",
-    "stylelint-config-prettier": "^9.0.5",
-    "stylelint-config-recommended-scss": "^11.0.0",
     "stylelint-config-standard": "^33.0.0",
+    "svgpath": "^2.6.0",
     "typescript": "^5.1.6",
     "typescript-plugin-css-modules": "^5.0.1",
     "vite": "^4.4.4",
     "vite-plugin-environment": "^1.1.3",
     "vite-plugin-stylelint": "^4.3.0",
     "vitest": "^0.30.1"
+  },
+  "dependencies": {
+    "@pixi/sound": "^5.2.1"
   }
 }

package/src/components/PixiAnimatedSprite/PixiAnimatedSprite.tsx

@@ -0,0 +1,51 @@
+import * as React from "react";
+import { AnimatedSprite as ReactPixiAnimatedSprite } from "@pixi/react";
+import * as PIXI from "pixi.js";
+
+type PixiAnimatedSpriteProps = {
+  forwardRef: any;
+  isPlaying: boolean;
+  images?: string[] | undefined;
+  initialFrame?: number | undefined;
+  scale?: number | [number, number];
+  x: number;
+  y: number;
+  width?: number;
+  height?: number;
+  anchor?: number;
+  rotation?: number;
+  alpha?: number;
+  animationSpeed?: number;
+  textures?: PIXI.Texture[] | undefined;
+  loop?: boolean;
+  onComplete?: () => void;
+  onFrameChange?: (currentFrame: number) => void;
+};
+
+const PixiAnimatedSpriteComp = ({
+  isPlaying,
+  forwardRef,
+  ...props
+}: PixiAnimatedSpriteProps) => {
+  const animationSprite = React.useRef<any>(null);
+
+  React.useImperativeHandle(forwardRef, () => animationSprite.current!, [
+    animationSprite,
+  ]);
+
+  React.useEffect(() => {
+    if (animationSprite.current === null) return;
+    const sprite = animationSprite.current;
+    sprite[isPlaying ? "gotoAndPlay" : "gotoAndStop"](sprite.currentFrame);
+  }, [isPlaying]);
+
+  return (
+    <ReactPixiAnimatedSprite
+      ref={animationSprite}
+      {...props}
+      isPlaying={isPlaying}
+    />
+  );
+};
+const PixiAnimatedSprite = React.memo(PixiAnimatedSpriteComp);
+export default PixiAnimatedSprite;

package/src/components/PixiAnimatedSprite/index.ts

@@ -0,0 +1,2 @@
+export { default as PixiAnimatedSprite } from "./PixiAnimatedSprite";
+// Path: src\components\PixiAnimatedSprite\index.ts

package/src/components/PixiAudioSprite/PixiAudioSprite.stories.tsx

@@ -0,0 +1,61 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { PixiAudioSprite } from ".";
+import { AppStateContextProvider } from "../../utils/AppStateProvider";
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+const meta = {
+  title: "Components/AudioSprite",
+  component: PixiAudioSprite,
+
+  tags: ["autodocs"],
+  argTypes: {
+    uniqueId: {
+      control: "text",
+      description: "uniqueId of the sprite",
+    },
+    src: {
+      control: "text",
+      description: "source of the image",
+    },
+    startAt: { control: "number", description: "startAt" },
+    endAt: { control: "number", description: "endAt" },
+    mute: { control: "boolean", description: "mute" },
+    speed: { control: "number", description: "speed" },
+  },
+} satisfies Meta<typeof PixiAudioSprite>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export const Normal: Story = {
+  render: (args: any) => (
+    <AppStateContextProvider {...args}>
+      <PixiAudioSprite {...args} />
+    </AppStateContextProvider>
+  ),
+  args: {
+    uniqueId: "audio001", // uniqueId of the sprite
+    src: "https://eyecastvideoeditorfiles.s3.ap-southeast-2.amazonaws.com/public%2Firfan%40trolio.com%2F6472d56e805c3bffc3cded33%2Fvideos%2F8Qq3DKrGnQ%2Fpiano2-CoolEdit.mp3",
+    startAt: 0,
+    endAt: 5,
+    mute: false,
+    speed: 1,
+  },
+};
+
+export const Customized: Story = {
+  render: (args: any) => (
+    <AppStateContextProvider {...args}>
+      <PixiAudioSprite {...args} />
+    </AppStateContextProvider>
+  ),
+  args: {
+    uniqueId: "audio002", // uniqueId of the sprite
+    src: "https://eyecastvideoeditorfiles.s3.ap-southeast-2.amazonaws.com/public%2Firfan%40trolio.com%2F6472d56e805c3bffc3cded33%2Fvideos%2F8Qq3DKrGnQ%2Fpiano2-CoolEdit.mp3",
+    startAt: 0,
+    endAt: 5,
+    mute: true,
+    speed: 1,
+  },
+};

package/src/components/PixiAudioSprite/PixiAudioSprite.tsx

@@ -0,0 +1,212 @@
+import * as React from "react";
+import { useContext, useEffect, useRef } from "react";
+// @ts-ignore
+import PropTypes from "prop-types";
+import {
+  GsapPixieContext,
+  Events,
+} from "../../providers/GsapPixieContextProvider";
+import { Container, useApp } from "@pixi/react";
+import { useCustomEventListener } from "react-custom-events";
+import gsap from "gsap";
+import { Sound } from "@pixi/sound";
+import * as PIXI from "pixi.js";
+// @ts-ignore
+import isEmpty from "lodash/isEmpty";
+
+type PixiAudioSpriteProps = {
+  uniqueId: string;
+  src: string;
+  startAt: number;
+  endAt: number;
+  mute: boolean;
+  speed: number;
+};
+interface AudioState {
+  isPlaying: boolean;
+  progress: number;
+  speed: number;
+  mute: boolean;
+  isWaiting: boolean;
+  loaded: boolean;
+  size: { width: number; height: number };
+  isDragging: boolean;
+  completed?: boolean;
+}
+
+const PixiAudioSprite: React.FC<PixiAudioSpriteProps> = (props) => {
+  const initialState: AudioState = {
+    isPlaying: false,
+    progress: 0,
+    speed: 1,
+    mute: false,
+    isWaiting: false,
+    loaded: false,
+    size: { width: 50, height: 50 },
+    isDragging: false,
+  };
+  //// State
+  const [isMounted, setIsMounted] = React.useState(false);
+
+  const audioStateRef = useRef<AudioState>(initialState);
+
+  console.log("allProps", props);
+  //// Refs
+  const containerRef = useRef<PIXI.Container>(null);
+  const imgGroupRef = useRef<PIXI.Container>(null);
+
+  //// Context
+  //// Context
+  const { tl, playerTimeRef } = useContext(GsapPixieContext);
+
+  /// 1001
+  // console.log("contxt Values", tl);
+  const { uniqueId, src, startAt, endAt, mute, speed, ...restProps } = props;
+
+  const app = useApp();
+  const audioContainerRef = React.useRef<Sound>(null);
+
+  /** Adding custom event listners */
+  /** Event Listeneres */
+  useCustomEventListener(Events.PAUSE, () => {
+    console.log("pause event");
+    if (containerRef.current) {
+      // @ts-ignore
+      audioContainerRef.current?.pause();
+      audioStateRef.current.isPlaying = false;
+    }
+  });
+
+  const gsapOnStart = (startAt: number) => {
+    if (containerRef.current) {
+      console.log("audio gsapOnStart", startAt);
+      if (playerTimeRef.current >= startAt && playerTimeRef.current <= endAt) {
+        // @ts-ignore
+        audioContainerRef.current?.play({
+          volume: mute ? 0 : 1,
+          start: startAt,
+          end: endAt,
+          speed: speed || 1,
+        });
+        audioStateRef.current.isPlaying = true;
+        audioStateRef.current.completed = false;
+      }
+    }
+  };
+
+  const gsapOnPause = (startAt: number) => {
+    if (containerRef.current) {
+      console.log("audio gsapOnStart", startAt);
+      // @ts-ignore
+      audioContainerRef.current?.pause();
+      audioStateRef.current.isPlaying = false;
+    }
+  };
+
+  const gsapOnComplete = () => {
+    if (containerRef.current) {
+      console.log("audio gsapOnStart", startAt);
+      // @ts-ignore
+      audioContainerRef.current?.stop();
+      audioStateRef.current.isPlaying = false;
+      audioStateRef.current.completed = true;
+    }
+  };
+
+  const gsapOnUpdate = (startAt: number) => {
+    if (
+      containerRef.current &&
+      !audioStateRef.current.isPlaying &&
+      !audioStateRef.current.completed
+    ) {
+      console.log("audio gsapOnUpdate", startAt);
+      // @ts-ignore
+      audioContainerRef.current?.refresh();
+      // @ts-ignore
+      audioContainerRef.current?.refreshPaused();
+
+      // @ts-ignore
+      audioContainerRef.current?.resume();
+      audioStateRef.current.isPlaying = true;
+    }
+  };
+
+  const onInterrupt = (startAt: number) => {};
+
+  useEffect(() => {
+    let ctx = gsap.context(() => {});
+    if (containerRef.current && tl.current) {
+      const data = {
+        duration: Number(endAt) - Number(startAt),
+        onStart: gsapOnStart,
+        onComplete: gsapOnComplete,
+        onStartParams: [startAt],
+        onCompleteParams: [],
+        onInterrupt: onInterrupt,
+        onUpdate: gsapOnUpdate,
+        onUpdateParams: [],
+      };
+      ctx = gsap.context(() => {
+        tl.current
+          .to(containerRef.current, { alpha: 1, duration: 0.01 }, startAt)
+          .from(imgGroupRef.current, { ...data }, startAt)
+          .to(
+            containerRef.current,
+            { alpha: 0, duration: 0.1 },
+            Number(endAt) - Number(0.1)
+          );
+      });
+    }
+    return () => ctx.revert(); // cleanup!
+  }, [startAt, endAt]);
+
+  React.useEffect(() => {
+    if (containerRef.current) {
+      setIsMounted(true);
+    }
+  }, []);
+
+  React.useEffect(() => {
+    if (containerRef.current && audioContainerRef.current) {
+      console.log("soundref", audioContainerRef.current);
+      // @ts-ignore
+      audioStateRef.current.mute = mute;
+      audioStateRef.current.speed = speed;
+      console.log("containerAudio", audioContainerRef.current.volume);
+      audioContainerRef.current.volume = mute ? 0 : 1;
+    }
+  }, [mute, speed]);
+
+  const onSoundLoaded = React.useCallback(
+    (err: any, sound: Sound | undefined) => {
+      //@ts-ignore
+      audioContainerRef.current = sound;
+      audioStateRef.current.loaded = true;
+      // const instance = sound.play();
+    },
+    []
+  );
+
+  React.useEffect(() => {
+    if (!isEmpty(src)) {
+      // @pixi/sound package usage
+      //@ts-ignore
+      audioContainerRef.current = Sound.from({
+        url: src,
+        preload: true,
+        singleInstance: true,
+        loaded: onSoundLoaded,
+      });
+    }
+    return () => {
+      // app.loader.reset();
+    };
+  }, [uniqueId, src, onSoundLoaded]);
+
+  return (
+    // @ts-ignore
+    <Container ref={containerRef}></Container>
+  );
+};
+
+export default PixiAudioSprite;

package/src/components/PixiAudioSprite/index.ts

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

package/src/components/PixiGifSprite/PixiGifSprite.stories.tsx

@@ -0,0 +1,135 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { PixiGifSprite } from ".";
+import { AppStateContextProvider } from "../../utils/AppStateProvider";
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+const meta = {
+  title: "Components/GifSprite",
+  component: PixiGifSprite,
+
+  tags: ["autodocs"],
+  argTypes: {
+    uniqueId: {
+      control: "text",
+      description: "uniqueId of the sprite",
+    },
+    src: {
+      control: "text",
+      description: "source of the image",
+    },
+    transformation: {
+      control: "object",
+      description: "transformation of the sprite",
+      x: { control: "number", description: "x position of the sprite" },
+      y: { control: "number", description: "y position of the sprite" },
+      width: { control: "number", description: "width of the sprite" },
+      height: { control: "number", description: "height of the sprite" },
+      anchor: { control: "number", description: "anchor of the sprite" },
+      rotation: { control: "number", description: "rotation of the sprite" },
+      alpha: {
+        control: "number",
+        min: 0,
+        max: 1,
+        description: "alpha of the sprite",
+      },
+      scale: { control: "number", description: "scale of the sprite" },
+      tint: { control: "number", description: "tint of the sprite" },
+      blendMode: { control: "number", description: "blendMode of the sprite" },
+      colorCorrection: {
+        control: "object",
+        description: "colorCorrection of the sprite",
+        brightness: {
+          control: "number",
+          description: "brightness of the sprite",
+        },
+        contrast: { control: "number", description: "contrast of the sprite" },
+        saturation: {
+          control: "number",
+          description: "saturation of the sprite",
+        },
+        alpha: { control: "number", description: "alpha of the sprite" },
+      },
+    },
+    applyTransformer: { control: "boolean", description: "applyTransformer" },
+    startAt: { control: "number", description: "startAt" },
+    endAt: { control: "number", description: "endAt" },
+    initialAlpha: {
+      control: "number",
+      min: 0,
+      max: 1,
+      description: "sprite initial alpha value (default  1)",
+    },
+    onAnchorTransformationEnd: {
+      action: "onAnchorTransformationEnd",
+      description:
+        "on transforamtion end the event is fire callback with latest sprite transformation properties.",
+    },
+    pointerdown: {
+      action: "pointerdown",
+      description: "pointerdown event",
+    },
+    pointerup: {
+      action: "pointerup",
+      description: "pointerup event",
+    },
+    mousedown: {
+      action: "mousedown",
+      description: "mousedown event",
+    },
+    mouseup: {
+      action: "mouseup",
+      description: "mouseup event",
+    },
+    pointerover: {
+      action: "pointerover",
+      description: "pointerover event",
+    },
+    mouseover: {
+      action: "mouseover",
+      description: "mouseover event",
+    },
+    mouseout: {
+      action: "mouseout",
+      description: "mouseout event",
+    },
+    pointerout: {
+      action: "pointerout",
+      description: "pointerout event",
+    },
+  },
+} satisfies Meta<typeof PixiGifSprite>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export const Normal: Story = {
+  render: (args: any) => (
+    <AppStateContextProvider {...args}>
+      <PixiGifSprite {...args} />
+    </AppStateContextProvider>
+  ),
+  args: {
+    uniqueId: "suryaGify001", // uniqueId of the sprite
+    src: "https://media.giphy.com/media/5VKbvrjxpVJCM/giphy.gif",
+    locked: false,
+    loop: false,
+    transformation: {
+      x: 100,
+      y: 100,
+      width: 150,
+      height: 150,
+      anchor: 0.5,
+      rotation: 0,
+      alpha: 1,
+      scale: 1,
+      tint: 0xffffff,
+      blendMode: 0,
+      colorCorrection: {},
+    },
+    applyTransformer: false,
+    startAt: 0,
+    endAt: 4,
+    initialAlpha: 1,
+  },
+};