reacthub-pixitweenjs 0.2.3 → 0.2.5

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,
+  },
+};