@s20.ai/safecam-360-rn/src/components/widgets/OverlayButtons.js

A React Native component to view the interior panorama and exterior 360 degree views of a product featuring suppport for hotspots. Compatible with Android and iOS

/*
 * Copyright © 2022 S20.AI India Pvt. Ltd.
 * Contact - origin@s20.ai
 * License - Licensed as per https://docs.s20.ai/license.html
 */
import React, {useEffect, useState} from 'react';
import {Platform, SafeAreaView, View} from 'react-native';
import {TextIconButton, IconButton, Fade} from '@s20.ai/safecam-components-rn';
import {connect, useDispatch} from 'react-redux';
import styleConfig from '../styleConfig';
import appStyleConfig from '../appStyleConfig';
import {hasNotch, triggerHapticFeedback} from '../../utils/device';
import constants from '../../config/constants';
import {responsiveAppStyleConfig} from '../responsiveAppStyleConfig';
import {useScreenDimensions} from '../../utils/device';

const OverlayButtons = ({
  currentHotspotState,
  currentViewState,
  enableGalleryButton,
  galleryButtonPressed,
  enableBackButton,
  backButtonPressed,
  orientation,
  customFontFamily,
  customGalleryButton,
  customBackButton,
}) => {
  const screenDimensions = useScreenDimensions();
  let overlayButtonContainerStyles = responsiveAppStyleConfig.stylePicker(
    'overlayButtonContainer',
    screenDimensions.width,
  );
  let safeAreaOverlayButtonContainerStyles =
    responsiveAppStyleConfig.stylePicker(
      'safeAreaOverlayButtonContainer',
      screenDimensions.width,
    );

  let viewToRender = (
    <View pointerEvents="box-none" style={overlayButtonContainerStyles}>
      {currentHotspotState ? (
        <></>
      ) : (
        <View
          pointerEvents="box-none"
          style={{
            width: '100%',
            display: 'flex',
            flexDirection: 'row',
            justifyContent: 'space-between',
          }}>
          {/* <Fade visible={true}>
      
      </Fade> */}
          {customBackButton ? (
            customBackButton
          ) : (
            <IconButton
              src={
                'https://safecam-org-logos.s3.ap-south-1.amazonaws.com/arrow_left.svg'
              }
              sx={{
                base: {
                  // position:"absolute",
                  left: 20,
                },
                ...styleConfig.closeBtn,
              }}
              onPress={() => {
                // triggerHapticFeedback();
                if (backButtonPressed) {
                  backButtonPressed();
                }
              }}
              svg={true}
            />
          )}

          {/* <Fade visible={!currentHotspotState}>
        
          
      </Fade> */}
          {customGalleryButton ? (
            customGalleryButton
          ) : (
            <TextIconButton
              onPress={() => {
                // triggerHapticFeedback();
                if (galleryButtonPressed) {
                  galleryButtonPressed();
                }
              }}
              text="Gallery"
              src={
                'https://safecam-org-logos.s3.ap-south-1.amazonaws.com/gallery.svg'
                // "https://cars24-images.s3.ap-south-1.amazonaws.com/star.svg"
              }
              svg={true}
              sx={{
                ...styleConfig.galleryIcon,
                ...{
                  gradientStyles: {
                    fontFamily:
                      customFontFamily && customFontFamily === 'Poppins'
                        ? 'Poppins-SemiBold'
                        : 'Helvetica',
                  },
                },
              }}
            />
          )}
        </View>
      )}
    </View>
  );
  let safeViewToRender = (
    <SafeAreaView
      pointerEvents="box-none"
      style={safeAreaOverlayButtonContainerStyles}>
      {viewToRender}
    </SafeAreaView>
  );
  return safeViewToRender;
};

const mapStateToProps = ({currentView, currentHotspot}) => {
  return {
    currentViewState: currentView.present,
    currentHotspotState: currentHotspot,
    orientation: currentView.orientation,
  };
};

export default connect(mapStateToProps)(OverlayButtons);