{"size": 2401, "ext": "js", "max_stars_repo_path": "src/components/Player/index.js", "max_stars_repo_name": "StefanoSaffran/spotify-clone", "max_stars_repo_stars_event_min_datetime": "2020-02-07T13:05:24.000Z", "max_stars_repo_stars_event_max_datetime": "2022-01-14T16:48:24.000Z", "max_issues_repo_path": "src/components/Player/index.js", "max_issues_repo_name": "fernandolopestavares/spotify-clone", "max_issues_repo_issues_event_min_datetime": "2022-02-13T05:38:19.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-26T23:20:30.000Z", "max_forks_repo_path": "src/components/Player/index.js", "max_forks_repo_name": "StefanoSaffran/spotify-clone", "max_forks_repo_forks_event_min_datetime": "2020-02-27T19:19:07.000Z", "max_forks_repo_forks_event_max_datetime": "2021-09-14T20:37:36.000Z"}
{"max_stars_count": 20, "max_issues_count": 2, "max_forks_count": 8, "avg_line_length": 26.9775280899, "max_line_length": 77, "alphanum_fraction": 0.6139108705}
import React from 'react';
import { Dimensions } from 'react-native';
import { getBottomSpace } from 'react-native-iphone-x-helper';
import Animated from 'react-native-reanimated';
import { onGestureEvent, withSpring } from 'react-native-redash';
import { PanGestureHandler, State } from 'react-native-gesture-handler';

import MiniPlayer from '~/components/MiniPlayer';
import FullPlayer from '~/components/FullPlayer';

import { ViewTopPlayer } from './styles';

const { Value, interpolate, Extrapolate } = Animated;
const { height } = Dimensions.get('window');
const TABBAR_HEIGHT = getBottomSpace() + 50;
const MINIMIZED_PLAYER_HEIGHT = 50;
const TOP = 0;
// const BOTTOM = height - TABBAR_HEIGHT - MINIMIZED_PLAYER_HEIGHT;
const BOTTOM_ABSOLUTE = height;
const config = {
  damping: 15,
  mass: 1,
  stiffness: 150,
  overshootClamping: false,
  restSpeedThreshold: 0.1,
  restDisplacementThreshold: 0.1,
};

export default function Player() {
  const translationY = new Value(0);
  const velocityY = new Value(0);
  const offset = new Value(BOTTOM_ABSOLUTE);
  const state = new Value(State.UNDETERMINED);

  const gestureHandler = onGestureEvent({
    translationY,
    state,
    velocityY,
  });

  const translateY = withSpring({
    state,
    offset,
    value: translationY,
    velocity: velocityY,
    snapPoints: [TOP, BOTTOM_ABSOLUTE],
    config,
  });

  const opacity = interpolate(translateY, {
    inputRange: [BOTTOM_ABSOLUTE - MINIMIZED_PLAYER_HEIGHT, BOTTOM_ABSOLUTE],
    outputRange: [0, 1],
    extrapolate: Extrapolate.CLAMP,
  });

  return (
    <>
      <PanGestureHandler {...gestureHandler}>
        <ViewTopPlayer
          style={{
            transform: [{ translateY }],
          }}
        >
          <FullPlayer onPress={() => true} />
          {/*           <ViewBottomPlayer
            style={{
              opacity: overlayOpacity,
              backgroundColor: '#272829',
            }}
            pointerEvents="none"
          /> */}
          <Animated.View
            style={{
              opacity,
              position: 'absolute',
              top: -(MINIMIZED_PLAYER_HEIGHT + TABBAR_HEIGHT - 2),
              left: 0,
              right: 0,
              height: MINIMIZED_PLAYER_HEIGHT,
            }}
          >
            <MiniPlayer />
          </Animated.View>
        </ViewTopPlayer>
      </PanGestureHandler>
    </>
  );
}
