reacthub-pixitweenjs 0.2.10 → 0.2.12

package/src/components/PixiAudioSprite/PixiAudioSprite.tsx

@@ -1,202 +0,0 @@
-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 } 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 [, 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 } = props;
-
-  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 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 = () => {};
-
-  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(
-    (_: 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

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

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

@@ -1,172 +0,0 @@
-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,
-    applyTransformer: false,
-    startAt: 0,
-    endAt: 4,
-    transformation: {
-      x: 200,
-      y: 200,
-      width: 200,
-      height: 200,
-      anchor: 0.5,
-      rotation: 0,
-      alpha: 1,
-      scale: 1,
-      tint: 0xffffff,
-      blendMode: 0,
-      colorCorrection: {},
-    },
-    initialAlpha: 1,
-  },
-};
-
-export const Filters: 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,
-    applyTransformer: false,
-    startAt: 0,
-    endAt: 4,
-    transformation: {
-      x: 200,
-      y: 200,
-      width: 200,
-      height: 200,
-      anchor: 0.5,
-      rotation: 0,
-      alpha: 1,
-      scale: 1,
-      tint: 0xffffff,
-      blendMode: 0,
-      colorCorrection: {
-        enabled: true,
-        contrast: 2,
-        saturation: 2,
-        exposure: 2,
-        blurRadius: 1,
-      },
-    },
-    initialAlpha: 1,
-  },
-};