@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation/utils.ts

Applicaster Zapp React Native ui components for the Quick Brick App

/* eslint-disable padding-line-between-statements */

import { PlayerAnimationStateEnum } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";

export enum ComponentAnimationType {
  bottomBar = "bottomBar",
  player = "player",
  componentFade = "componentFade",
  componentAppears = "componentAppears",
  moveUpComponent = "moveUpComponent",
  moveComponentHorizontal = "moveComponentHorizontal",
  audioPlayerPaddingHorizontal = "audioPlayerPaddingHorizontal",
}

export const AUDIO_PLAYER_HORIZONTAL_PADDING = 15;
export const PROGRESS_BAR_HEIGHT = 3;

export const defaultAspectRatioWidth = (height: number): number =>
  (height / 9) * 16;

export const getAnimationStyle = (component, animatedValue) => {
  switch (component) {
    case ComponentAnimationType.bottomBar: {
      return { zIndex: 99, transform: [{ translateY: animatedValue }] };
    }

    case ComponentAnimationType.player: {
      return { width: animatedValue.x, height: animatedValue.y };
    }

    case ComponentAnimationType.componentFade:
    case ComponentAnimationType.componentAppears: {
      return { opacity: animatedValue };
    }

    case ComponentAnimationType.moveUpComponent: {
      return { transform: [{ translateY: animatedValue }] };
    }

    case ComponentAnimationType.audioPlayerPaddingHorizontal:
    case ComponentAnimationType.moveComponentHorizontal: {
      return { transform: [{ translateX: animatedValue }] };
    }

    default:
      return null;
  }
};

export const getAnimationDefaultValue = (component, bottomTabBarHeight) => {
  switch (component) {
    case ComponentAnimationType.bottomBar: {
      return bottomTabBarHeight;
    }

    case ComponentAnimationType.player: {
      return { x: 0, y: 0 };
    }

    case ComponentAnimationType.componentFade: {
      return 1;
    }

    case ComponentAnimationType.audioPlayerPaddingHorizontal:
    case ComponentAnimationType.moveComponentHorizontal:
    case ComponentAnimationType.componentAppears:
    case ComponentAnimationType.moveUpComponent: {
      return 0;
    }
  }
};

export const calculateAnimationValue = (animationType, dragPosition, data) => {
  const {
    isAudioItem,
    bottomTabBarHeight,
    minimisedHeight,
    minimisedWidth,
    defaultValue,
    moveUpValue,
    moveComponentHorizontalValue,
    isTablet,
    isTabletLandscape,
    isRTL,
    fromMiniPlayer,
    inlineAudioPlayer,
  } = data;

  switch (animationType) {
    case ComponentAnimationType.bottomBar: {
      if (fromMiniPlayer) {
        return dragPosition < bottomTabBarHeight
          ? dragPosition
          : bottomTabBarHeight;
      }

      return dragPosition < bottomTabBarHeight
        ? bottomTabBarHeight - dragPosition
        : 0;
    }

    case ComponentAnimationType.player: {
      const value =
        isAudioItem && !inlineAudioPlayer
          ? isTabletLandscape
            ? fromMiniPlayer
              ? { forWidth: 4, forHeight: 4.5 }
              : { forWidth: 3, forHeight: 3 }
            : { forWidth: 2, forHeight: 2 }
          : isTabletLandscape
            ? { forWidth: 8, forHeight: 6.5 }
            : { forWidth: 3.5, forHeight: 2 };

      const minWidth =
        isAudioItem && !inlineAudioPlayer ? minimisedHeight : minimisedWidth;

      if (fromMiniPlayer) {
        const calculationWidth =
          dragPosition * value.forWidth < minWidth
            ? minWidth
            : dragPosition * value.forWidth;
        const calculationHeight =
          dragPosition * value.forHeight < minimisedHeight
            ? minimisedHeight
            : dragPosition * value.forHeight;

        return {
          x:
            calculationWidth < defaultValue.x
              ? calculationWidth
              : defaultValue.x,
          y:
            calculationHeight < defaultValue.y
              ? calculationHeight
              : defaultValue.y,
        };
      }

      const calculationWidth = defaultValue.x - dragPosition * value.forWidth;

      const calculationHeight = defaultValue.y - dragPosition * value.forHeight;

      return {
        x: calculationWidth > minWidth ? calculationWidth : minWidth,
        y:
          calculationHeight > minimisedHeight
            ? calculationHeight
            : minimisedHeight,
      };
    }

    case ComponentAnimationType.componentFade: {
      if (fromMiniPlayer) {
        const calculation = dragPosition / (isTablet ? 200 : 150);

        return calculation < 1 ? calculation : 1;
      }

      const calculation = 1 - dragPosition / (isTablet ? 200 : 150);

      return calculation > 0 ? calculation : 0;
    }

    case ComponentAnimationType.componentAppears: {
      if (fromMiniPlayer) {
        const calculation = 1 - dragPosition / (isTablet ? 200 : 150);

        return calculation > 0 ? calculation : 0;
      }

      const calculation = dragPosition / (isTablet ? 200 : 150);

      return calculation < 1 ? calculation : 1;
    }

    case ComponentAnimationType.moveUpComponent: {
      if (fromMiniPlayer) {
        const calculation =
          moveUpValue + dragPosition / (isTabletLandscape ? 1 : 4);

        return calculation < 0 ? calculation : 0;
      }

      const calculation = 0 - dragPosition / (isTabletLandscape ? 1 : 2);

      return calculation > moveUpValue ? calculation : moveUpValue;
    }

    case ComponentAnimationType.moveComponentHorizontal: {
      if (fromMiniPlayer) {
        const calculation = isRTL
          ? moveComponentHorizontalValue - dragPosition * 2
          : moveComponentHorizontalValue + dragPosition * 2;
        const condition = isRTL ? calculation > 0 : calculation < 0;

        return condition ? calculation : 0;
      }

      const calculation = isRTL ? dragPosition * 2 : -(dragPosition * 2);
      const condition = isRTL
        ? calculation < moveComponentHorizontalValue
        : calculation > moveComponentHorizontalValue;

      return condition ? calculation : moveComponentHorizontalValue;
    }

    case ComponentAnimationType.audioPlayerPaddingHorizontal: {
      const padding = isRTL
        ? AUDIO_PLAYER_HORIZONTAL_PADDING
        : -AUDIO_PLAYER_HORIZONTAL_PADDING;

      if (fromMiniPlayer) {
        const calculation = isRTL
          ? padding - dragPosition / 5
          : padding + dragPosition / 5;
        const condition = isRTL ? calculation > 0 : calculation < 0;

        return condition ? calculation : 0;
      }

      const calculation = isRTL ? dragPosition / 5 : -(dragPosition / 5);
      const condition = isRTL ? calculation < padding : calculation > padding;

      return condition ? calculation : padding;
    }
  }
};

export const gestureListenerHelper = (data) => {
  const {
    listenerValue,
    preparedValue,
    animationType,
    animatedValue,
    calculationData,
    modalSnapPoint,
    startComponentsAnimationDistance,
    startComponentsAnimation,
    setStartComponentsAnimation,
    getAnimationValue,
  } = data;

  if (calculationData.fromMiniPlayer) {
    if (listenerValue <= 0) {
      if (
        preparedValue >= 0 &&
        preparedValue <= modalSnapPoint - startComponentsAnimationDistance
      ) {
        !startComponentsAnimation && setStartComponentsAnimation(true);

        animatedValue.setValue(
          calculateAnimationValue(animationType, preparedValue, calculationData)
        );
      } else {
        animatedValue.setValue(calculationData.defaultValue);
        startComponentsAnimation && setStartComponentsAnimation(false);
      }
    } else {
      const value = getAnimationValue(
        animationType,
        PlayerAnimationStateEnum.minimize
      ).toValue;

      animatedValue.setValue(value);
    }
  } else {
    if (preparedValue >= startComponentsAnimationDistance) {
      !startComponentsAnimation && setStartComponentsAnimation(true);
      const value = Math.round(
        preparedValue - startComponentsAnimationDistance
      );

      animatedValue.setValue(
        calculateAnimationValue(animationType, value, calculationData)
      );
    } else {
      animatedValue.setValue(calculationData.defaultValue);
      startComponentsAnimation && setStartComponentsAnimation(false);
    }
  }
};

export const setScrollModalAnimatedValue = (
  animatedValue,
  value,
  setLastSnap
) => {
  setLastSnap(value);
  animatedValue.setValue(value);
};

export const resetScrollAnimatedValues = (
  lastScrollY,
  lastScrollYValue,
  dragScrollY,
  dragVideoPlayerY
) => {
  lastScrollY.setValue(0);
  lastScrollYValue.current = 0;
  dragScrollY.setValue(0);
  dragVideoPlayerY.setValue(0);
};