reacthub-pixitweenjs 0.2.107-alpha.11 → 0.2.107-alpha.111

package/dist/providers/AudioContextProvider.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+export type WebAudioContextType = {
+    audioContextRef: React.MutableRefObject<AudioContext>;
+    analyserRef: React.MutableRefObject<AnalyserNode | undefined>;
+    gainNodeRef: React.MutableRefObject<GainNode | undefined>;
+    hasAudioContext: boolean;
+};
+export declare const WebAudioContext: React.Context<WebAudioContextType>;
+export type AudioContextProviderProps = {
+    children: React.ReactNode;
+};
+export declare const AudioContextProvider: ({ children, }: AudioContextProviderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/providers/GsapPixieContextProvider.d.ts

@@ -15,6 +15,8 @@ interface GsapPixieContextProps {
     setTotalDuration?: React.Dispatch<React.SetStateAction<number>>;
     reverseModeRef: React.MutableRefObject<boolean>;
     dragModeRef: React.MutableRefObject<boolean>;
+    isRemotion: boolean;
+    setIsRemotion: React.Dispatch<React.SetStateAction<boolean>>;
 }
 declare const GsapPixieContext: React.Context<GsapPixieContextProps>;
 declare const Events: {
@@ -38,6 +40,7 @@ declare const Events: {
     TRANSFORMER_DRAG_END: string;
     REVERSE_MODE_START: string;
     REVERSE_MODE_END: string;
+    FONTS_LOADED: string;
 };
 declare const GsapPixieContextProvider: React.FC<{
     children: React.ReactNode;

package/dist/stories/Features/TimelineAnimations.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+export declare enum SpriteType {
+    Image = "Image",
+    Gif = "Gif",
+    Video = "Video"
+}
+export interface TimelineTestProps {
+    startAt: number;
+    endAt: number;
+}
+export interface TimelineProps {
+    children?: React.ReactNode;
+    sequences: TimelineTestProps[];
+}
+export declare const TimelineAnimationTest: (props: TimelineProps) => import("react/jsx-runtime").JSX.Element;

package/dist/stories/Features/TimelineTest.stories.d.ts

@@ -18,4 +18,4 @@ export declare const Normal: Story;
 export declare const GifTest: Story;
 export declare const VideoTest: Story;
 export declare const AudioTest: Story;
-export declare const HowlerAudioTest: Story;
+export declare const Animations: Story;

package/dist/stories/Features/common.tests.d.ts

@@ -78,3 +78,334 @@ export declare const audioProps: {
     mute: boolean;
     speed: number;
 };
+export declare const videoEditorAssets: ({
+    visible: boolean;
+    textValue: string;
+    src: string;
+    start: number;
+    isVideo: boolean;
+    mute: boolean;
+    title: string;
+    type: string;
+    transformation: {
+        strokeWidth: number;
+        rotate: number;
+        shadowOffsetX: number;
+        shadowOffsetY: number;
+        toCenter: boolean;
+        color: string;
+        shadowBlur: number;
+        blurRadius: number;
+        blurEnabled: boolean;
+        scale: number[];
+        stroke: null;
+        animation: string;
+        effect: string;
+        x: number;
+        width: number;
+        y: number;
+        opacity: number;
+        colorCorrection: {
+            reset: boolean;
+        };
+        shadowColor: null;
+        shadowEnabled: boolean;
+        height: number;
+        zIndex: number;
+        align?: undefined;
+        fontFamily?: undefined;
+        grayscaleEnabled?: undefined;
+        placeholder?: undefined;
+        fontWeight?: undefined;
+        textTransform?: undefined;
+        textValue?: undefined;
+        rotation?: undefined;
+        letterSpacing?: undefined;
+        textDecoration?: undefined;
+        brightnessEnabled?: undefined;
+        fontStyle?: undefined;
+        fill?: undefined;
+        brightness?: undefined;
+        fontSize?: undefined;
+        lineHeight?: undefined;
+        sepiaEnabled?: undefined;
+    };
+    frameEndAt: number;
+    droptype: string;
+    path: string;
+    name: string;
+    frameStartAt: number;
+    end: number;
+    isAudio: boolean;
+    id: string;
+    locked: boolean;
+    value: string;
+    scrubberRow: number;
+    uniqueId: string;
+    timestamp: number;
+    clipId: string;
+    s3Url?: undefined;
+    fileName?: undefined;
+    isAudioDetached?: undefined;
+    duration?: undefined;
+    thumbUrl?: undefined;
+    height?: undefined;
+    reducerType?: undefined;
+    frames?: undefined;
+    s3Key?: undefined;
+    width?: undefined;
+    projectId?: undefined;
+    user?: undefined;
+    pageId?: undefined;
+    fontStyle?: undefined;
+    text?: undefined;
+} | {
+    s3Url: string;
+    fileName: string;
+    type: string;
+    isAudioDetached: boolean;
+    duration: number;
+    frameStartAt: number;
+    end: number;
+    id: string;
+    thumbUrl: string;
+    locked: boolean;
+    scrubberRow: number;
+    height: number;
+    timestamp: number;
+    reducerType: string;
+    visible: boolean;
+    frames: null[];
+    src: string;
+    start: number;
+    isVideo: boolean;
+    mute: boolean;
+    transformation: {
+        strokeWidth: number;
+        rotate: number;
+        shadowOffsetX: number;
+        shadowOffsetY: number;
+        toCenter: boolean;
+        shadowBlur: number;
+        blurRadius: number;
+        blurEnabled: boolean;
+        scale: number[];
+        stroke: null;
+        animation: string;
+        effect: string;
+        width: number;
+        x: number;
+        y: number;
+        opacity: number;
+        colorCorrection: {
+            reset: boolean;
+        };
+        shadowColor: null;
+        shadowEnabled: boolean;
+        height: number;
+        zIndex: number;
+        color?: undefined;
+        align?: undefined;
+        fontFamily?: undefined;
+        grayscaleEnabled?: undefined;
+        placeholder?: undefined;
+        fontWeight?: undefined;
+        textTransform?: undefined;
+        textValue?: undefined;
+        rotation?: undefined;
+        letterSpacing?: undefined;
+        textDecoration?: undefined;
+        brightnessEnabled?: undefined;
+        fontStyle?: undefined;
+        fill?: undefined;
+        brightness?: undefined;
+        fontSize?: undefined;
+        lineHeight?: undefined;
+        sepiaEnabled?: undefined;
+    };
+    frameEndAt: number;
+    droptype: string;
+    s3Key: string;
+    name: string;
+    width: number;
+    isAudio: boolean;
+    projectId: string;
+    user: string;
+    uniqueId: string;
+    clipId: string;
+    textValue?: undefined;
+    title?: undefined;
+    path?: undefined;
+    value?: undefined;
+    pageId?: undefined;
+    fontStyle?: undefined;
+    text?: undefined;
+} | {
+    visible: boolean;
+    textValue: string;
+    start: number;
+    isVideo: boolean;
+    mute: boolean;
+    pageId: string;
+    transformation: {
+        strokeWidth: number;
+        shadowOffsetX: number;
+        rotate: number;
+        shadowOffsetY: number;
+        toCenter: boolean;
+        color: string;
+        shadowBlur: number;
+        blurRadius: number;
+        blurEnabled: boolean;
+        scale: number[];
+        align: string;
+        fontFamily: string;
+        grayscaleEnabled: boolean;
+        placeholder: string;
+        shadowColor: null;
+        fontWeight: string;
+        height: number;
+        textTransform: string;
+        zIndex: number;
+        textValue: string;
+        rotation: number;
+        letterSpacing: number;
+        textDecoration: string;
+        brightnessEnabled: boolean;
+        fontStyle: string;
+        fill: string;
+        stroke: null;
+        animation: string;
+        brightness: number;
+        effect: string;
+        x: number;
+        width: number;
+        y: number;
+        fontSize: number;
+        lineHeight: number;
+        opacity: number;
+        colorCorrection: {
+            reset: boolean;
+        };
+        shadowEnabled: boolean;
+        sepiaEnabled: boolean;
+    };
+    fontStyle: {
+        fontSize: number;
+        lineHeight: number;
+    };
+    frameEndAt: number;
+    droptype: string;
+    frameStartAt: number;
+    end: number;
+    isAudio: boolean;
+    id: string;
+    text: string;
+    locked: boolean;
+    scrubberRow: number;
+    uniqueId: string;
+    timestamp: number;
+    clipId: string;
+    src?: undefined;
+    title?: undefined;
+    type?: undefined;
+    path?: undefined;
+    name?: undefined;
+    value?: undefined;
+    s3Url?: undefined;
+    fileName?: undefined;
+    isAudioDetached?: undefined;
+    duration?: undefined;
+    thumbUrl?: undefined;
+    height?: undefined;
+    reducerType?: undefined;
+    frames?: undefined;
+    s3Key?: undefined;
+    width?: undefined;
+    projectId?: undefined;
+    user?: undefined;
+} | {
+    visible: boolean;
+    textValue: string;
+    start: number;
+    isVideo: boolean;
+    mute: boolean;
+    pageId: string;
+    transformation: {
+        strokeWidth: number;
+        shadowOffsetX: number;
+        rotate: number;
+        shadowOffsetY: number;
+        toCenter: boolean;
+        color: string;
+        shadowBlur: number;
+        blurRadius: number;
+        blurEnabled: boolean;
+        scale: number[];
+        align: string;
+        fontFamily: string;
+        grayscaleEnabled: boolean;
+        placeholder: string;
+        shadowColor: null;
+        fontWeight: string;
+        height: number;
+        textTransform: string;
+        zIndex: number;
+        rotation: number;
+        letterSpacing: number;
+        textDecoration: string;
+        brightnessEnabled: boolean;
+        fontStyle: string;
+        fill: string;
+        stroke: null;
+        animation: string;
+        brightness: number;
+        effect: string;
+        x: number;
+        width: number;
+        y: number;
+        fontSize: number;
+        lineHeight: number;
+        opacity: number;
+        colorCorrection: {
+            reset: boolean;
+        };
+        shadowEnabled: boolean;
+        sepiaEnabled: boolean;
+        textValue?: undefined;
+    };
+    fontStyle: {
+        fontSize: number;
+        lineHeight: number;
+    };
+    frameEndAt: number;
+    droptype: string;
+    frameStartAt: number;
+    end: number;
+    isAudio: boolean;
+    id: string;
+    text: string;
+    locked: boolean;
+    scrubberRow: number;
+    uniqueId: string;
+    timestamp: number;
+    clipId: string;
+    src?: undefined;
+    title?: undefined;
+    type?: undefined;
+    path?: undefined;
+    name?: undefined;
+    value?: undefined;
+    s3Url?: undefined;
+    fileName?: undefined;
+    isAudioDetached?: undefined;
+    duration?: undefined;
+    thumbUrl?: undefined;
+    height?: undefined;
+    reducerType?: undefined;
+    frames?: undefined;
+    s3Key?: undefined;
+    width?: undefined;
+    projectId?: undefined;
+    user?: undefined;
+})[];

package/dist/types/Animations.d.ts

@@ -1,4 +1,11 @@
 export declare enum Animations {
+    NONE = "NONE",
+    FLASH = "FLASH",
+    PULSE = "PULSE",
+    SHAKE = "SHAKE",
+    SWING = "SWING",
+    JELLO = "JELLO",
+    WOOBLE = "WOOBLE",
     FADE_IN = "FADE_IN",
     FADE_OUT = "FADE_OUT",
     FADE_IN_OUT = "FADE_IN_OUT",
@@ -16,6 +23,22 @@ export declare enum Animations {
     BOUNCE_IN = "BOUNCE_IN",
     BOUNCE_OUT = "BOUNCE_OUT",
     BOUNCE_IN_OUT = "BOUNCE_IN_OUT",
+    BOUNCE_IN_DOWN = "BOUNCE_IN_DOWN",
+    BOUNCE_IN_LEFT = "BOUNCE_IN_LEFT",
+    BOUNCE_IN_RIGHT = "BOUNCE_IN_RIGHT",
+    BOUNCE_IN_UP = "BOUNCE_IN_UP",
+    BOUNCE_OUT_DOWN = "BOUNCE_OUT_DOWN",
+    BOUNCE_OUT_LEFT = "BOUNCE_OUT_LEFT",
+    BOUNCE_OUT_RIGHT = "BOUNCE_OUT_RIGHT",
+    BOUNCE_OUT_UP = "BOUNCE_OUT_UP",
+    FADE_IN_DOWN = "FADE_IN_DOWN",
+    FADE_IN_LEFT = "FADE_IN_LEFT",
+    FADE_IN_RIGHT = "FADE_IN_RIGHT",
+    FADE_IN_UP = "FADE_IN_UP",
+    FADE_OUT_DOWN = "FADE_OUT_DOWN",
+    FADE_OUT_LEFT = "FADE_OUT_LEFT",
+    FADE_OUT_RIGHT = "FADE_OUT_RIGHT",
+    FADE_OUT_UP = "FADE_OUT_UP",
     ELASTIC_IN = "ELASTIC_IN",
     ELASTIC_OUT = "ELASTIC_OUT",
     ELASTIC_IN_OUT = "ELASTIC_IN_OUT",
@@ -36,5 +59,15 @@ export declare enum Animations {
     BACK = "BACK",
     CIRCULAR = "CIRCULAR",
     EXPO = "EXPO",
-    SINE = "SINE"
+    SINE = "SINE",
+    SPIN = "SPIN"
+}
+export interface IGsapAnimInterface {
+    from?: any;
+    to?: any;
+    fromTo?: any;
+    duration?: number;
+    x?: number;
+    y?: number;
+    alpha?: number;
 }

package/dist/types/BaseProps.d.ts

@@ -1,12 +1,11 @@
 /// <reference types="react" />
-import { Effects } from "./Effects";
+import { Effects, Waveforms } from "./Effects";
 import { OverlayTypes } from "../hocs/OverlayTilingSprite";
+import { Animations } from "./Animations";
 export interface PixiBaseSpriteProps {
     children?: React.ReactNode;
     uniqueId: string;
     src?: string;
-    path?: string;
-    text?: string;
     startAt: number;
     endAt: number;
     visible: boolean;
@@ -23,7 +22,7 @@ export interface PixiBaseSpriteProps {
         scale?: number | [number, number];
         tint?: number;
         blendMode?: number;
-        animation?: string;
+        animation?: Animations;
         colorCorrection?: {
             enabled?: boolean;
             temperature?: number;
@@ -45,9 +44,15 @@ export interface PixiBaseSpriteProps {
             alpha?: number;
             gamma?: number;
             scaleInput?: number;
+            vignette?: number;
+            noise?: number;
+            outline?: number;
+            outlineColor?: number;
         };
         effect?: Effects;
         overlay?: OverlayTypes;
+        waveform?: Waveforms;
+        fontSize?: number;
     };
     pointerdown?: () => void;
     pointerup?: () => void;
@@ -60,7 +65,14 @@ export interface PixiBaseSpriteProps {
     applyTransformer?: boolean;
     onAnchorTransformationEnd?: (endData: any) => void;
 }
+export type containerScale = {
+    x: number;
+    y: number;
+};
 export interface ForwardedRefResponse {
-    getIsTransformerDragging: () => boolean;
-    getIsMouseOverTransformer: () => boolean;
+    getIsTransformerDragging?: () => boolean;
+    getIsMouseOverTransformer?: () => boolean;
+    setWordWrap?: (width: number, containerScale: containerScale) => void;
+    setFontSizeAndTransform?: (width: number, fontSize: number, containerScale: containerScale) => void;
+    resetScale?: () => void;
 }

package/dist/types/Effects.d.ts

@@ -7,5 +7,14 @@ export declare enum Effects {
     RetroVintage = "RetroVintage",
     NightVision = "NightVision",
     Normal = "Normal",
+    Vignette = "Vignette",
     None = "Normal"
 }
+export declare enum Waveforms {
+    NONE = "none",
+    EQUALIZER = "equalizer",
+    ROUNDBARS = "roundbars",
+    LED = "led",
+    RADIAL_SPECTRUM = "radial_spectrum",
+    LUMI_BARS = "lumi_bars"
+}

package/dist/types/transformation.d.ts

@@ -5,6 +5,7 @@ export interface Transformation {
     height: number;
     rotate: number;
     scale: [number, number];
+    fontSize?: number;
 }
 export interface TransformationEnd {
     uniqueId: string;

package/dist/utils/GsapAnims.d.ts

@@ -0,0 +1,2 @@
+import { IGsapAnimInterface, Animations } from "../types/Animations";
+export declare const getAnimByName: (animate: Animations) => IGsapAnimInterface;

package/dist/utils/isRemoteAsset.d.ts

@@ -0,0 +1 @@
+export declare const isRemoteAsset: (asset: string) => boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "reacthub-pixitweenjs",
-  "version": "0.2.107-alpha.11",
+  "version": "0.2.107-alpha.111",
   "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 <reacthub.ai@gmail.com>",
   "main": "dist/index.es.js",
@@ -36,11 +36,12 @@
     "test": "vitest",
     "storybook": "storybook dev -p 6006",
     "start": "npm run storybook",
-    "build-storybook": "storybook build",
+    "build-storybook": "storybook build --loglevel warn",
     "init-msw": "msw init public/",
     "release": "standard-version --release-as patch &&npm publish",
     "release:alpha": "standard-version --prerelease alpha &&npm publish",
-    "chromatic": "env-cmd -f .env.dev chromatic"
+    "chromatic": "env-cmd -f .env.dev chromatic --auto-accept-changes",
+    "deploy": "netlify deploy --prod"
   },
   "devDependencies": {
     "@chakra-ui/icons": "^2.0.15",
@@ -52,6 +53,7 @@
     "@giphy/react-components": "^5.6.1",
     "@pixi/assets": "^7.2.3",
     "@pixi/filter-adjustment": "^5.1.1",
+    "@pixi/gif": "^2.1.0",
     "@pixi/react": "~7.1.0",
     "@pixi/sound": "^5.2.1",
     "@react-gifs/tools": "^0.1.2",
@@ -62,6 +64,7 @@
     "@storybook/addon-interactions": "^7.1.0",
     "@storybook/addon-links": "^7.1.0",
     "@storybook/addon-onboarding": "^1.0.7",
+    "@storybook/addon-storysource": "^7.5.3",
     "@storybook/addon-styling": "^1.3.4",
     "@storybook/blocks": "^7.1.0",
     "@storybook/builder-vite": "^7.1.0",
@@ -82,6 +85,7 @@
     "@vitejs/plugin-react": "^4.0.3",
     "@vitejs/plugin-react-swc": "^3.3.2",
     "@welldone-software/why-did-you-render": "^7.0.1",
+    "audiomotion-analyzer": "^4.3.0",
     "chromatic": "^6.7.3",
     "debug": "^4.3.4",
     "dotenv": "^16.0.1",
@@ -98,6 +102,7 @@
     "howler": "^2.2.3",
     "jsdom": "^21.1.2",
     "lodash": "4.17.21",
+    "lottie-web": "^5.10.2",
     "msw": "^1.2.1",
     "msw-storybook-addon": "^1.8.0",
     "pixi-filters": "^5.2.1",
@@ -123,5 +128,8 @@
     "vite-plugin-environment": "^1.1.3",
     "vite-plugin-stylelint": "^4.3.0",
     "vitest": "^0.30.1"
+  },
+  "dependencies": {
+    "@uiw/react-color-sketch": "^2.3.2"
   }
 }