reacthub-pixitweenjs 0.2.107-alpha.108 → 0.2.107-alpha.109

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

@@ -0,0 +1,47 @@
+import * as React from "react";
+interface GsapPixieContextProps {
+    gsapCtx: React.MutableRefObject<any>;
+    tl: React.MutableRefObject<any>;
+    handlePlay: () => void;
+    handlePause: () => void;
+    handleReset: () => void;
+    handleSeek: (value: number) => void;
+    handleSeekTest: () => void;
+    handleRestart: () => void;
+    handleRepeat: () => void;
+    playerTimeRef: React.MutableRefObject<number>;
+    getTimelineDuration: () => number;
+    totalDuration?: number;
+    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: {
+    STOP: string;
+    PAUSE: string;
+    PLAY: string;
+    RESUME: string;
+    RESTART: string;
+    REPEAT: string;
+    SEEK: string;
+    RESET: string;
+    COMPLETE: string;
+    SEEK_START: string;
+    SEEK_END: string;
+    SCRUBBER_SEEK: string;
+    SCRUBBER_PROGRESS_UPDATE: string;
+    SCRUBBER_PLAY: string;
+    SCRUBBER_PAUSE: string;
+    SCRUBBER_CLICKED: string;
+    TRANSFORMER_DRAG_START: string;
+    TRANSFORMER_DRAG_END: string;
+    REVERSE_MODE_START: string;
+    REVERSE_MODE_END: string;
+};
+declare const GsapPixieContextProvider: React.FC<{
+    children: React.ReactNode;
+}>;
+export { GsapPixieContext, GsapPixieContextProvider, Events };

package/dist/providers/index.d.ts

@@ -0,0 +1 @@
+export * from "./GsapPixieContextProvider";

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

@@ -0,0 +1,2 @@
+declare function TestAudioFiles(): import("react/jsx-runtime").JSX.Element;
+export default TestAudioFiles;

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.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 TimelineTest: (props: TimelineProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,21 @@
+import type { StoryObj } from "@storybook/react";
+declare const meta: {
+    title: string;
+    component: (props: import("./TimelineTest").TimelineProps) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    argTypes: {
+        sequences: {
+            description: string;
+            control: {
+                type: string;
+            };
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Normal: Story;
+export declare const GifTest: Story;
+export declare const VideoTest: Story;
+export declare const AudioTest: Story;
+export declare const Animations: Story;

package/dist/stories/Features/TimelineTestAudios.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 TimelineTestAudios: (props: TimelineProps) => import("react/jsx-runtime").JSX.Element;

package/dist/stories/Features/TimelineTestWithVideos.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 TimelineTestVideos: (props: TimelineProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,21 @@
+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 TimelineWithGif: {
+    (props: TimelineProps): import("react/jsx-runtime").JSX.Element;
+    whyDidYouRender: {
+        logOnDifferentValues: boolean;
+        customName: string;
+    };
+};

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

@@ -0,0 +1,411 @@
+export declare const ImageProps: {
+    uniqueId: string;
+    src: string;
+    applyTransformer: boolean;
+    startAt: number;
+    endAt: number;
+    transformation: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+        anchor: number;
+        rotation: number;
+        alpha: number;
+        scale: number;
+        tint: number;
+        blendMode: number;
+    };
+    visible: boolean;
+};
+export declare const GifProps: {
+    uniqueId: string;
+    src: string;
+    locked: boolean;
+    loop: boolean;
+    applyTransformer: boolean;
+    startAt: number;
+    endAt: number;
+    frameStartAt: number;
+    frameEndAt: number;
+    transformation: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+        anchor: number;
+        rotation: number;
+        alpha: number;
+        scale: number;
+        tint: number;
+        blendMode: number;
+        colorCorrection: {};
+    };
+    visible: boolean;
+};
+export declare const videoProps: {
+    uniqueId: string;
+    src: string;
+    transformation: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+        anchor: number;
+        rotation: number;
+        alpha: number;
+        scale: number;
+        tint: number;
+        blendMode: number;
+        colorCorrection: {};
+    };
+    applyTransformer: boolean;
+    startAt: number;
+    endAt: number;
+    frameStartAt: number;
+    frameEndAt: number;
+    visible: boolean;
+    mute: boolean;
+    locked: boolean;
+};
+export declare const audioProps: {
+    uniqueId: string;
+    src: string;
+    startAt: number;
+    endAt: number;
+    audioStartAt: number;
+    audioEndAt: number;
+    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

@@ -0,0 +1,73 @@
+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",
+    SLIDE_IN_LEFT = "SLIDE_IN_LEFT",
+    SLIDE_IN_RIGHT = "SLIDE_IN_RIGHT",
+    SLIDE_IN_TOP = "SLIDE_IN_TOP",
+    SLIDE_IN_BOTTOM = "SLIDE_IN_BOTTOM",
+    SLIDE_OUT_LEFT = "SLIDE_OUT_LEFT",
+    SLIDE_OUT_RIGHT = "SLIDE_OUT_RIGHT",
+    SLIDE_OUT_TOP = "SLIDE_OUT_TOP",
+    SLIDE_OUT_BOTTOM = "SLIDE_OUT_BOTTOM",
+    ZOOM_IN = "ZOOM_IN",
+    ZOOM_OUT = "ZOOM_OUT",
+    ZOOM_IN_OUT = "ZOOM_IN_OUT",
+    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",
+    BACK_IN = "BACK_IN",
+    BACK_OUT = "BACK_OUT",
+    BACK_IN_OUT = "BACK_IN_OUT",
+    CIRCULAR_IN = "CIRCULAR_IN",
+    CIRCULAR_OUT = "CIRCULAR_OUT",
+    CIRCULAR_IN_OUT = "CIRCULAR_IN_OUT",
+    EXPO_IN = "EXPO_IN",
+    EXPO_OUT = "EXPO_OUT",
+    EXPO_IN_OUT = "EXPO_IN_OUT",
+    SINE_IN = "SINE_IN",
+    SINE_OUT = "SINE_OUT",
+    SINE_IN_OUT = "SINE_IN_OUT",
+    BOUNCE = "BOUNCE",
+    ELASTIC = "ELASTIC",
+    BACK = "BACK",
+    CIRCULAR = "CIRCULAR",
+    EXPO = "EXPO",
+    SINE = "SINE",
+    SPIN = "SPIN"
+}
+export interface IGsapAnimInterface {
+    from?: any;
+    to?: any;
+    fromTo?: any;
+    duration?: number;
+    x?: number;
+    y?: number;
+    alpha?: number;
+}