reacthub-pixitweenjs 0.2.10 → 0.2.12

package/src/components/PixiVideoSprite/PixiVideoSpriteBackup.txt

@@ -1,755 +0,0 @@
-import _ as React from "react";
-import { useContext, useEffect, useRef, useState } from "react";
-// @ts-ignore
-import PropTypes from "prop-types";
-import { GsapPixieContext } from "../../providers/GsapPixieContextProvider";
-import { Sprite, Container, useApp, 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;
-};
-
-type EffectFunc = () => void;
-type Deps = ReadonlyArray<unknown>;
-
-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,
-});
-
-/\*_ filter config _/
-const config = {
-dot: {
-scale: 1,
-angle: 5,
-},
-blur: {
-blur: 0,
-quality: 4,
-},
-};
-
-/\*_ 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 [vidPlay, setVidPlay] = React.useState(false);
-const [isTransformerDragging, setIsTransformerDragging] = useState(false);
-const [isMouseOverTransformer, setIsMouseOverTransformer] = useState(false);
-const [{ isWaiting, isStalled }, setVideoState] = React.useState({
-isWaiting: false,
-isStalled: false,
-});
-const [videoTexture, setVideoTexture] =
-React.useState<PIXI.Texture<PIXI.Resource>>();
-const [isDragging, setIsDragging] = useState(false);
-
-console.log("PixiVideoSpriteProps", props);
-//// 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);
-const videoTimelineRef = useRef<gsap.core.Timeline | null>(null);
-
-//// Context
-const {
-tl,
-playerTimeRef,
-isDragging: gsapDragging,
-play,
-} = useContext(GsapPixieContext);
-
-// console log draggging
-console.log("isGsapDragging", gsapDragging);
-console.log("play", play);
-/// 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,
-anchor,
-animation,
-colorCorrection,
-effect,
-},
-pointerdown,
-pointerup,
-mousedown,
-mouseup,
-pointerover,
-mouseover,
-mouseout,
-applyTransformer,
-onAnchorTransformationEnd,
-...restProps
-} = props;
-
-const videoUrl = src || "";
-
-// color corrections
-const {
-enabled = false,
-temperature = 1,
-hue = 1,
-contrast = 1,
-saturation = 1,
-exposure = 1,
-reset,
-sharpness = 1,
-value = 0,
-levels = 1,
-luminance = 0,
-enhance = 0,
-blurRadius = 0,
-red = 150,
-green = 150,
-blue = 150,
-alpha = 1,
-scaleInput = 1,
-} = colorCorrection || {};
-
-const app = useApp();
-
-/\*_ 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]);
-
-// /\*_ 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
-      ) {
-        setVidPlay(true);
-        videoElement.current.currentTime = playerTimeRef.current;
-        videoElement.current.play();
-        videoStateRef.current.isPlaying = true;
-      } else {
-        setVidPlay(false);
-        videoElement.current.pause();
-        videoStateRef.current.isPlaying = false;
-      }
-    }
-
-};
-
-const gsapOnPause = (startAt: number) => {
-if (videoElement.current) {
-setVidPlay(false);
-
-      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 gsapOnComplete = () => {
-console.log("onComplete triggered");
-if (videoElement.current) {
-setVidPlay(false);
-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 = (time: number) => {
-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(() => {
-          setVidPlay(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;
-        videoStateRef.current.isPlaying = true;
-      } else if (absDiff > 0.3) {
-        videoElement.current.currentTime = playerTimeRef.current;
-        if (!isVidPlaying) videoElement.current.play();
-        videoStateRef.current.isPlaying = true;
-      }
-    }
-
-};
-
-const handleComplete = () => {
-// if (onComplete) {
-// onComplete();
-// }
-videoStateRef.current.isPlaying = false;
-};
-
-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(() => {
-        // timeline for video management
-        videoTimelineRef.current = gsap.timeline({
-          paused: true,
-          defaults: { duration: 0 },
-        });
-
-        if (!isEmpty(ease.from)) {
-          videoTimelineRef.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)) {
-          videoTimelineRef.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)) {
-          videoTimelineRef.current
-            .fromTo(
-              containerRef.current,
-              // @ts-ignore
-              ease.fromTo?.from,
-              ease.fromTo?.to,
-              startAt
-            )
-            .from(imgGroupRef.current, { ...data }, startAt)
-            .to(containerRef.current, { alpha: 0, duration: 0.2 }, endAt - 0.2);
-        } else {
-          videoTimelineRef.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)
-            );
-        }
-
-        // add the timeline to the tl parent timeline
-        tl.current.add(videoTimelineRef.current, startAt);
-        tl.current.fromTo(
-          containerRef.current,
-          { xalpha: 0 },
-          { xalpha: 1, duration: Number(endAt) },
-          0
-        );
-
-        // end of timeline
-      }); // end of gsap context
-    }
-    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]);
-
-// play video when vidPlay is true else stop
-// React.useEffect(() => {
-// let timeout: any;
-// if (videoElement.current) {
-// const vid = videoElement.current;
-// const isVidPlaying =
-// vid.currentTime > 0 &&
-// !vid.paused &&
-// !vid.ended &&
-// vid.readyState > vid.HAVE_CURRENT_DATA;
-// if (gsapDragging) {
-// videoElement.current.play();
-// timeout = setTimeout(() => {
-// setVidPlay(false);
-// if (videoElement.current) videoElement.current.pause();
-// }, 55);
-// videoStateRef.current.isPlaying = false;
-// } else if (vidPlay && !isVidPlaying && !gsapDragging) {
-// videoElement.current.play();
-// videoStateRef.current.isPlaying = true;
-// } else if (!vidPlay && isVidPlaying) {
-// videoElement.current.pause();
-// videoStateRef.current.isPlaying = false;
-// }
-// }
-// return () => clearTimeout(timeout);
-// }, [vidPlay, gsapDragging]);
-
-React.useEffect(() => {
-if (videoElement.current) {
-console.log("play updated", play);
-videoElement.current.currentTime = playerTimeRef.current;
-// play the video if the start and end times are between the playerTimeRef.current
-if (
-playerTimeRef.current >= startAt &&
-playerTimeRef.current <= endAt &&
-play
-) {
-// set current time of video using playerTimeRef.current
-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 (play && !isVidPlaying) videoElement.current.play();
-// videoElement.current.play();
-setVidPlay(true);
-videoStateRef.current.isPlaying = true;
-} else {
-setVidPlay(false);
-videoElement.current.pause();
-videoStateRef.current.isPlaying = false;
-}
-
-      if (!play) {
-        videoElement.current.pause();
-        videoStateRef.current.isPlaying = false;
-      }
-    }
-
-}, [play]);
-
-// 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} >
-{colorCorrection && colorCorrection.enabled ? (
-<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,
-})}
-ref={imageRef}
-scale={scale}
-rotation={rotation}
-/>
-)}
-</Container>
-</Filters>
-) : (
-// @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,
-})}
-ref={imageRef}
-scale={scale}
-rotation={rotation}
-/>
-)}
-</Container>
-)}
-</Container>
-{applyTransformer && (
-<PixiTransformer
-          pixiTransformerRef={transformerRef}
-          imageRef={containerRef}
-          isMounted={isMounted}
-          transformCommit={handleOnTransformEnd}
-          transformChange={handleOnTransformChange}
-          mouseoverEvent={setIsMouseOverTransformer}
-          uniqueId={uniqueId}
-        />
-)}
-</Container>
-);
-};
-
-export default PixiVideoSprite;