@s20.ai/safecam-360-rn/src/components/hotspot/HotspotOverlay.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, useRef, useState} from 'react';
import {View, Dimensions, StyleSheet, LogBox, Platform, SafeAreaView} from 'react-native';
import Carousel from 'react-native-snap-carousel';
import {Card, IconButton} from '@s20.ai/safecam-components-rn';
import {connect, useDispatch} from 'react-redux';
import constants from '../../config/constants';
import HotspotDetailOverlay from './HotspotDetailOverlay';
import HotspotDetailCard from './HotspotDetailCard';
import {hasNotch, triggerHapticFeedback, useScreenDimensions} from '../../utils/device';
import HotspotCarousel from './HotspotCarousel';
import {setCurrentHotspot} from '../../redux/actions/currentHotspotAction';
import styleConfig from '../styleConfig';
import appStyleConfig from '../appStyleConfig';
import { responsiveAppStyleConfig } from '../responsiveAppStyleConfig';



const HotspotOverlay = ({
  interiorData,
  exteriorData,
  customFontFamily,
  currentViewState,
  currentHotspotState,
  orientation,
}) => {
  const dispatch = useDispatch();
 
  const screenDimensions = useScreenDimensions()
  let hotspotOverlayContainerStyle = responsiveAppStyleConfig.stylePicker("hotspotOverlayContainer", screenDimensions.width)
  return (
    <SafeAreaView
      style={[
        hotspotOverlayContainerStyle
      ]}
      >
      <HotspotDetailOverlay customFontFamily={customFontFamily} />
      <IconButton
        src={'https://safecam-org-logos.s3.ap-south-1.amazonaws.com/close.svg'}
        sx={styleConfig.closeBtn}
        
        onPress={() => {
          dispatch(setCurrentHotspot(null));
          triggerHapticFeedback();
        }}
        svg={true}
      />
      <HotspotCarousel
        exteriorData={exteriorData}
        interiorData={interiorData}
        customFontFamily={customFontFamily}
      />
    </SafeAreaView>
  );
};

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

export default connect(mapStateToProps)(HotspotOverlay);