reacthub-pixitweenjs 0.2.107-alpha.8 → 0.2.107-alpha.81

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: {

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

@@ -19,3 +19,4 @@ 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",
@@ -38,3 +61,12 @@ export declare enum Animations {
     EXPO = "EXPO",
     SINE = "SINE"
 }
+export interface IGsapAnimInterface {
+    from?: any;
+    to?: any;
+    fromTo?: any;
+    duration?: number;
+    x?: number;
+    y?: number;
+    alpha?: number;
+}

package/dist/types/BaseProps.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import { Effects } from "./Effects";
 import { OverlayTypes } from "../hocs/OverlayTilingSprite";
+import { Animations } from "./Animations";
 export interface PixiBaseSpriteProps {
     children?: React.ReactNode;
     uniqueId: string;
@@ -23,7 +24,7 @@ export interface PixiBaseSpriteProps {
         scale?: number | [number, number];
         tint?: number;
         blendMode?: number;
-        animation?: string;
+        animation?: Animations;
         colorCorrection?: {
             enabled?: boolean;
             temperature?: number;
@@ -45,6 +46,10 @@ export interface PixiBaseSpriteProps {
             alpha?: number;
             gamma?: number;
             scaleInput?: number;
+            vignette?: number;
+            noise?: number;
+            outline?: number;
+            outlineColor?: number;
         };
         effect?: Effects;
         overlay?: OverlayTypes;
@@ -59,6 +64,7 @@ export interface PixiBaseSpriteProps {
     mouseout?: () => void;
     applyTransformer?: boolean;
     onAnchorTransformationEnd?: (endData: any) => void;
+    fps?: number;
 }
 export interface ForwardedRefResponse {
     getIsTransformerDragging: () => boolean;

package/dist/types/Effects.d.ts

@@ -7,5 +7,6 @@ export declare enum Effects {
     RetroVintage = "RetroVintage",
     NightVision = "NightVision",
     Normal = "Normal",
+    Vignette = "Vignette",
     None = "Normal"
 }

package/dist/utils/GsapAnims.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "reacthub-pixitweenjs",
-  "version": "0.2.107-alpha.8",
+  "version": "0.2.107-alpha.81",
   "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",
@@ -52,6 +52,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",