reacthub-pixitweenjs 0.2.10 → 0.2.11

package/src/components/PixiVideoSprite/PixiVideoSprite.tsx

@@ -1,595 +0,0 @@
-import * as React from "react";
-import { useContext, useEffect, useRef, useState } from "react";
-// @ts-ignore
-import PropTypes from "prop-types";
-import { useCustomEventListener } from "react-custom-events";
-import {
-  GsapPixieContext,
-  Events,
-} from "../../providers/GsapPixieContextProvider";
-import { Sprite, Container, withFilters } from "@pixi/react";
-import { AdjustmentFilter } from "@pixi/filter-adjustment";
-import * as PIXI from "pixi.js";
-import gsap from "gsap";
-import PixiTransformer from "../../utils/PixiTransformer";
-
-// @ts-ignore
-import isEmpty from "lodash/isEmpty";
-import { getAnimByName } from "../../utils/GsapAnim";
-import { TransformationEnd } from "../../types/transformation";
-
-type PixiVideoSpriteProps = {
-  uniqueId: string;
-  src: string;
-  startAt: number;
-  endAt: number;
-  frameStartAt: number;
-  frameEndAt: number;
-  mute: boolean;
-  locked: boolean;
-  initialAlpha: number;
-  transformation: {
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-    anchor: number;
-    rotation?: number;
-    alpha?: number;
-    scale?: number | [number, number];
-    tint?: number;
-    blendMode?: number;
-    animation?: string;
-    colorCorrection?: {
-      enabled?: boolean;
-      temperature?: number;
-      hue?: number;
-      contrast?: number;
-      saturation?: number;
-      exposure?: number;
-      reset?: boolean;
-      sharpness?: number;
-      value?: number;
-      levels?: number;
-      luminance?: number;
-      enhance?: number;
-      blurRadius?: number;
-      red?: number;
-      green?: number;
-      blue?: number;
-      alpha?: number;
-      scaleInput?: number;
-    };
-    effect?: string;
-  };
-  pointerdown?: () => void;
-  pointerup?: () => void;
-  mousedown?: () => void;
-  mouseup?: () => void;
-  pointerover?: () => void;
-  mouseover?: () => void;
-  mouseout?: () => void;
-  applyTransformer?: boolean;
-  onAnchorTransformationEnd?: (endData: any) => void;
-};
-
-interface VideoState {
-  isPlaying: boolean;
-  progress: number;
-  speed: number;
-  isMuted: boolean;
-  isWaiting: boolean;
-  loaded: boolean;
-  size: { width: number; height: number };
-  isDragging: boolean;
-}
-
-const Filters = withFilters(Container, {
-  blur: PIXI.filters.BlurFilter,
-  adjust: AdjustmentFilter,
-  matrix: PIXI.filters.ColorMatrixFilter,
-});
-
-/** CYAN Filters */
-const CYAN = [1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0];
-
-const initialState: VideoState = {
-  isPlaying: false,
-  progress: 0,
-  speed: 1,
-  isMuted: false,
-  isWaiting: false,
-  loaded: false,
-  size: { width: 50, height: 50 },
-  isDragging: false,
-};
-
-const PixiVideoSprite: React.FC<PixiVideoSpriteProps> = (props) => {
-  //// State
-  const [isMounted, setIsMounted] = React.useState(false);
-  /// const [isTransformerDragging, setIsTransformerDragging] = useState(false);
-  const [, setIsMouseOverTransformer] = useState(false);
-  const [, setVideoState] = React.useState({
-    isWaiting: false,
-    isStalled: false,
-  });
-  const [videoTexture, setVideoTexture] =
-    React.useState<PIXI.Texture<PIXI.Resource>>();
-  const [isDragging, setIsDragging] = useState(false);
-
-  //// Refs
-  const imageRef = useRef<PIXI.Sprite>(null);
-  const containerRef = useRef<PIXI.Container>(null);
-  const parentNode = useRef<PIXI.Container>(null);
-  const imgGroupRef = useRef<PIXI.Container>(null);
-  const transformerRef = useRef<PIXI.Container>(null);
-  const videoElement = useRef<HTMLVideoElement>(null);
-  const videoStateRef = useRef<VideoState>(initialState);
-
-  //// Context
-  const {
-    tl,
-    playerTimeRef,
-    isDragging: gsapDragging,
-  } = useContext(GsapPixieContext);
-
-  // console log draggging
-  /// 1001
-  // console.log("contxt Values", tl);
-  const {
-    uniqueId,
-    mute = false,
-    locked = false,
-    src,
-    startAt,
-    endAt,
-    frameStartAt,
-    frameEndAt,
-    initialAlpha,
-    transformation: {
-      x,
-      y,
-      width,
-      height,
-      scale,
-      rotation,
-      animation,
-      colorCorrection,
-      effect,
-    },
-    pointerdown,
-    pointerup,
-    mousedown,
-    mouseup,
-    pointerover,
-    mouseover,
-    mouseout,
-    applyTransformer,
-    onAnchorTransformationEnd,
-  } = props;
-
-  const videoUrl = src || "";
-
-  // color corrections
-  const {
-    contrast = 1,
-    saturation = 1,
-    exposure = 1,
-    blurRadius = 0,
-    alpha = 1,
-  } = colorCorrection || {};
-
-  /** adjustment filter */
-  const adjustments = {
-    brightness: exposure,
-    contrast,
-    saturation,
-    alpha,
-  };
-
-  /** handle on tranformer onchange */
-  const handleOnTransformChange = React.useCallback(() => {
-    setIsDragging(true);
-  }, []);
-
-  // transformer to handle sprite transformation
-  const handleOnTransformEnd = React.useCallback(
-    (endData: TransformationEnd) => {
-      console.log("changeEnd", endData);
-      if (onAnchorTransformationEnd) {
-        console.log("running onAnchorTransformationEnd");
-        onAnchorTransformationEnd(endData);
-      }
-    },
-    []
-  );
-
-  /**Adding this alternative workaround to work with mov/mk4 video types */
-  const videoSrcElement = React.useMemo(() => {
-    const element = document.createElement("video");
-    element.src = src;
-    element.crossOrigin = "Anonymus";
-    element.autoplay = false;
-    element.currentTime = 0.0001;
-    return element;
-  }, [src]);
-
-  /** Adding custom event listners */
-  /** Event Listeneres */
-  useCustomEventListener(Events.PAUSE, (data) => {
-    console.log("pause event", data);
-    if (videoElement.current) {
-      const vid = videoElement.current;
-      const isVidPlaying =
-        vid.currentTime > 0 &&
-        !vid.paused &&
-        !vid.ended &&
-        vid.readyState > vid.HAVE_CURRENT_DATA;
-      if (isVidPlaying) videoElement.current.pause();
-      videoStateRef.current.isPlaying = false;
-    }
-  });
-
-  // /** stop video playing when gsapDragging is true */
-  React.useEffect(() => {
-    console.log("current", videoElement.current, gsapDragging);
-    if (videoElement.current) {
-      if (gsapDragging) {
-        videoElement.current.pause();
-        videoStateRef.current.isPlaying = false;
-        videoStateRef.current.isDragging = true;
-      } else {
-        videoStateRef.current.isDragging = false;
-      }
-    }
-  }, [gsapDragging]);
-
-  /** Gsap Start and Stop Events */
-  const gsapOnStart = (startAt: number) => {
-    if (videoElement.current) {
-      console.log("video gsapOnStart", playerTimeRef.current, gsapDragging);
-
-      // check the start and end times are between the playerTimeRef.current to start video;
-      if (
-        playerTimeRef.current >= startAt &&
-        playerTimeRef.current <= endAt &&
-        !gsapDragging
-      ) {
-        videoElement.current.currentTime =
-          Number(frameStartAt) || Number(startAt);
-        videoElement.current.play();
-        videoStateRef.current.isPlaying = true;
-      }
-    }
-  };
-
-  const gsapOnComplete = () => {
-    console.log("onComplete triggered");
-    if (videoElement.current) {
-      const vid = videoElement.current;
-      const isVidPlaying =
-        vid.currentTime > 0 &&
-        !vid.paused &&
-        !vid.ended &&
-        vid.readyState > vid.HAVE_CURRENT_DATA;
-      ///if (!isVidPlaying) videoElement.current.play();
-      if (isVidPlaying) videoElement.current.pause();
-      videoStateRef.current.isPlaying = false;
-    }
-  };
-
-  const onInterrupt = () => {
-    // console.log('interrupting', refId);
-  };
-
-  const onUpdate = () => {
-    if (videoElement.current) {
-      // console.log(
-      //   "currenttime vs player reftime",
-      //   videoElement.current.currentTime,
-      //   playerTimeRef.current
-      // );
-      const absDiff = Math.abs(
-        videoElement.current.currentTime - playerTimeRef.current
-      );
-
-      const vid = videoElement.current;
-      const isVidPlaying =
-        vid.currentTime > 0 &&
-        !vid.paused &&
-        !vid.ended &&
-        vid.readyState > vid.HAVE_CURRENT_DATA;
-
-      if (videoStateRef.current.isDragging) {
-        console.log("video updating", playerTimeRef.current);
-        videoElement.current.currentTime = playerTimeRef.current;
-        videoElement.current.play();
-        setTimeout(() => {
-          videoStateRef.current.isPlaying = false;
-          if (videoElement.current) videoElement.current.pause();
-        }, 55);
-        videoStateRef.current.isPlaying = false;
-      } else if (!videoStateRef.current.isPlaying) {
-        // if (!isVidPlaying) videoElement.current.play();
-        // videoStateRef.current.isPlaying = true;
-        // let the video play and update current time
-        // videoElement.current.currentTime = playerTimeRef.current;
-        if (!isVidPlaying) videoElement.current.play();
-        videoStateRef.current.isPlaying = true;
-      } else if (absDiff > 0.3) {
-        // videoElement.current.currentTime = playerTimeRef.current;
-        // if (!isVidPlaying) videoElement.current.play();
-        // videoStateRef.current.isPlaying = true;
-      }
-    }
-  };
-
-  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: onUpdate,
-        onUpdateParams: [],
-      };
-
-      const ease = getAnimByName(animation || "None");
-      ctx = gsap.context(() => {
-        if (!isEmpty(ease.from)) {
-          tl.current
-            .from(containerRef.current, { ...ease.from }, startAt)
-            .to(imgGroupRef.current, { alpha: 1, duration: 0.2 }, startAt)
-            .from(imgGroupRef.current, { ...data }, startAt)
-            .to(containerRef.current, { alpha: 0, duration: 0.2 }, endAt - 0.2);
-        } else if (!isEmpty(ease.to)) {
-          tl.current
-            .to(
-              containerRef.current,
-              { alpha: 1, duration: 0.2, ...ease.to },
-              startAt
-            )
-            .from(imgGroupRef.current, { ...data }, startAt)
-            .to(containerRef.current, { alpha: 0, duration: 0.2 }, endAt - 0.2);
-        } else if (!isEmpty(ease.fromTo)) {
-          tl.current
-            .fromTo(
-              containerRef.current,
-              ease.fromTo?.from,
-              ease.fromTo?.to,
-              startAt
-            )
-            .from(imgGroupRef.current, { ...data }, startAt)
-            .to(containerRef.current, { alpha: 0, duration: 0.2 }, endAt - 0.2);
-        } else {
-          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!
-  }, [animation, startAt, endAt]);
-
-  React.useEffect(() => {
-    if (containerRef.current) {
-      setIsMounted(true);
-    }
-  }, []);
-
-  React.useEffect(() => {
-    if (videoElement.current) {
-      videoElement.current.muted = mute;
-    }
-  }, [mute]);
-
-  // stop playing video while isDragging and gsapDragging
-  React.useEffect(() => {
-    if (videoElement.current) {
-      const vid = videoElement.current;
-      const isVidPlaying =
-        vid.currentTime > 0 &&
-        !vid.paused &&
-        !vid.ended &&
-        vid.readyState > vid.HAVE_CURRENT_DATA;
-      if (isVidPlaying && (isDragging || gsapDragging)) {
-        videoElement.current.pause();
-        videoStateRef.current.isPlaying = false;
-      }
-    }
-  }, [isDragging, gsapDragging]);
-
-  // load // load meta // load seek through
-  React.useEffect(() => {
-    const minStartAt =
-      Math.round((Number(frameStartAt) + Number.EPSILON) * 100) / 100;
-    const onload = function () {
-      if (videoElement.current) {
-        videoElement.current.currentTime = minStartAt;
-      }
-    };
-
-    const onEnd = function () {
-      //dispatchState({ isPlaying: false });
-      if (videoElement.current) {
-        const vid = videoElement.current;
-        const isVidPlaying =
-          vid.currentTime > 0 &&
-          !vid.paused &&
-          !vid.ended &&
-          vid.readyState > vid.HAVE_CURRENT_DATA;
-
-        if (isVidPlaying) {
-          videoElement.current.pause();
-        }
-      }
-      setVideoState({ isWaiting: false, isStalled: false });
-    };
-
-    const onLoadStart = function () {
-      //dispatchState({ isWaiting: true, isStalled: false });
-      if (videoElement.current) {
-        videoElement.current.pause();
-      }
-      setVideoState({ isWaiting: true, isStalled: false });
-    };
-
-    const onCanPlayThrough = function () {
-      //dispatchState({ isWaiting: false, isStalled: false });
-      setVideoState({ isWaiting: false, isStalled: false });
-    };
-
-    const onStalled = function () {
-      //dispatchState({ isStalled: true });
-      setVideoState({ isWaiting: false, isStalled: true });
-    };
-
-    // create a new Sprite using the video texture (yes it's that easy)
-    const stAt =
-      Math.round((Number(frameStartAt) + Number.EPSILON) * 100) / 100;
-    const endAt = Math.round((Number(frameEndAt) + Number.EPSILON) * 100) / 100;
-    const urlWithTimestamp = `${videoUrl}#t=${stAt},${endAt}`;
-    /// const urlWithQuery = `${videoUrl}?t=${stAt},${endAt}`;
-
-    console.log("urlTimestap", urlWithTimestamp);
-    /// const texture =
-    PIXI.Texture.fromLoader(videoSrcElement, urlWithTimestamp, uniqueId, {
-      pixiIdPrefix: uniqueId,
-      resourceOptions: {
-        autoPlay: false,
-        crossorigin: "Anonymus",
-        updateFPS: 30,
-      },
-    }).then((texture) => {
-      if (!texture) return;
-      // texture.baseTexture.resource.source.currentSrc = urlWithTimestamp;
-      setVideoTexture(texture);
-      // @ts-ignore
-      console.log(texture.baseTexture.resource.source);
-      // @ts-ignore
-      videoElement.current = texture.baseTexture.resource.source;
-      // @ts-ignore
-      videoElement.current.id = uniqueId;
-      // @ts-ignore
-      videoElement.current.addEventListener("loadedmetadata", onload);
-      // @ts-ignore
-      videoElement.current.addEventListener("ended", onEnd);
-      // @ts-ignore
-      videoElement.current.addEventListener("loadstart", onLoadStart);
-      // @ts-ignore
-      videoElement.current.addEventListener("canplaythrough", onCanPlayThrough);
-      // @ts-ignore
-      videoElement.current.addEventListener("stalled", onStalled);
-    });
-
-    return () => {
-      // @ts-ignore
-      videoElement.current.removeEventListener("loadedmetadata", onload);
-      // @ts-ignore
-      videoElement.current.removeEventListener("ended", onEnd);
-      // @ts-ignore
-      videoElement.current.removeEventListener("loadstart", onLoadStart);
-      // @ts-ignore
-      videoElement.current.removeEventListener(
-        "canplaythrough",
-        onCanPlayThrough
-      );
-      // @ts-ignore
-      videoElement.current.removeEventListener("stalled", onStalled);
-    };
-    // create a new Sprite using the video texture (yes it's that easy)
-    // const videoSprite = new PIXI.Sprite(texture);
-  }, [videoUrl, uniqueId, frameStartAt, frameEndAt, videoSrcElement]);
-
-  return (
-    // @ts-ignore
-    <Container ref={parentNode}>
-      {/* @ts-ignore */}
-      {/* @ts-ignore */}
-      <Container
-        ref={containerRef}
-        alpha={initialAlpha}
-        position={[x, y]}
-        pivot={[x, y]}
-        width={width}
-        height={height}
-      >
-        <Filters
-          scale={1}
-          blur={{ blur: blurRadius, quality: 4 }}
-          adjust={adjustments}
-          apply={({ matrix }: { matrix: any }) => {
-            if (effect === "BlackAndWhite") {
-              matrix.desaturate();
-            } else if (effect === "Sepia") {
-              matrix.sepia();
-            } else if (effect === "RetroVintage") {
-              matrix.negative();
-            } else if (effect === "NightVision") {
-              matrix.negative();
-            } else if (effect === "Normal") {
-              matrix.reset();
-            }
-          }}
-          matrix={{
-            enabled: true,
-            // @ts-ignore
-            matrix: CYAN,
-          }}
-        >
-          {/* @ts-ignore */}
-          <Container ref={imgGroupRef}>
-            {videoTexture && (
-              <Sprite
-                texture={videoTexture}
-                width={width}
-                height={height}
-                anchor={0.5}
-                x={x}
-                y={y}
-                {...(!locked &&
-                  !isDragging && {
-                    interactive: true,
-                    buttonMode: true,
-                    pointerdown: pointerdown,
-                    pointerover: pointerover,
-                    pointerout: mouseout,
-                    mousedown: mousedown,
-                    mouseover: mouseover,
-                    mouseout: mouseout,
-                    mouseup: mouseup,
-                    pointerup: pointerup,
-                  })}
-                ref={imageRef}
-                scale={scale}
-                rotation={rotation}
-              />
-            )}
-          </Container>
-        </Filters>
-      </Container>
-      {applyTransformer && (
-        <PixiTransformer
-          pixiTransformerRef={transformerRef}
-          imageRef={containerRef}
-          isMounted={isMounted}
-          transformCommit={handleOnTransformEnd}
-          transformChange={handleOnTransformChange}
-          mouseoverEvent={setIsMouseOverTransformer}
-          uniqueId={uniqueId}
-        />
-      )}
-    </Container>
-  );
-};
-
-export default PixiVideoSprite;