@s20.ai/safecam-360-rn-v2/src/components/hotspot/HotspotDetailOverlay.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} from 'react';
import {Dimensions} from 'react-native';
import {connect, useDispatch} from 'react-redux';
import {CardImageFocusModal, IconButton} from '@s20.ai/safecam-components-rn';
import {setHotspotDetailMode} from '../../redux/actions/currentHotspotAction';
import {triggerHapticFeedback, useScreenDimensions} from '../../utils/device';
import styleConfig from '../styleConfig';
import {responsiveStyleConfig} from '../responsiveStyleConfig';
import constants from '../../config/constants';
import {
  setCurrentMessageOff,
  setCurrentMessageOn,
} from '../../redux/actions/messageHintAction';

const HotspotDetailOverlay = ({
  hotspotDetailMode,
  currentHotspotState,
  messageHint,
  setHotspotDetailMode,
  customFontFamily,
  setCurrentMessageOn,
  setCurrentMessageOff,
}) => {
  const screenDimensions = useScreenDimensions();
  const cardFocusModalStyles = responsiveStyleConfig.stylePicker(
    'cardFocusModal',
    screenDimensions.width,
  );

  useEffect(() => {
    if (
      !messageHint[constants.MESSAGES.DOUBLE_TAP_TO_ZOOM].show &&
      !messageHint[constants.MESSAGES.DOUBLE_TAP_TO_ZOOM].never
    ) {
      setCurrentMessageOn(constants.MESSAGES.DOUBLE_TAP_TO_ZOOM);
    }
    if (
      !messageHint[constants.MESSAGES.DOUBLE_TAP_TO_ZOOM_OUT].show &&
      !messageHint[constants.MESSAGES.DOUBLE_TAP_TO_ZOOM_OUT].never
    ) {
      setCurrentMessageOn(constants.MESSAGES.DOUBLE_TAP_TO_ZOOM_OUT);
    }
  }, []);

  return (
    <CardImageFocusModal
      messsageStatus={{
        showZoomInMessage:
          messageHint[constants.MESSAGES.DOUBLE_TAP_TO_ZOOM].show &&
          !messageHint[constants.MESSAGES.DOUBLE_TAP_TO_ZOOM].never,
        showZoomOutMessage:
          messageHint[constants.MESSAGES.DOUBLE_TAP_TO_ZOOM_OUT].show &&
          !messageHint[constants.MESSAGES.DOUBLE_TAP_TO_ZOOM_OUT].never,
      }}
      hideZoomInMessage={_ => {
        setCurrentMessageOff(constants.MESSAGES.DOUBLE_TAP_TO_ZOOM, true);
      }}
      hideZoomOutMessage={_ => {
        setCurrentMessageOff(constants.MESSAGES.DOUBLE_TAP_TO_ZOOM_OUT, true);
      }}
      visible={hotspotDetailMode}
      sx={{
        ...cardFocusModalStyles,
        title: {
          fontFamily:
            customFontFamily && customFontFamily === 'Poppins'
              ? 'Poppins-Regular'
              : 'Helvetica',
        },
        description: {
          fontFamily:
            customFontFamily && customFontFamily === 'Poppins'
              ? 'Poppins-Regular'
              : 'Helvetica',
        },
        width: '100%',
        height: '100%',
      }}
      notifyClose={() => {
        setHotspotDetailMode(false);
        triggerHapticFeedback();
      }}
      closeIconJSX={
        <IconButton
          onPress={() => {
            setHotspotDetailMode(false);
            triggerHapticFeedback();
          }}
          src="https://safecam-org-logos.s3.ap-south-1.amazonaws.com/close.svg"
          svg
          sx={{
            iconSize: 15,
            base: {
              backgroundColor: '#fff',
              width: 40,
              height: 40,
            },
          }}
        />
      }
      src={currentHotspotState.imageSrc}
      title={currentHotspotState.description}
      description={currentHotspotState.imageTitle}
    />
  );
};

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

export default connect(mapStateToProps, {
  setHotspotDetailMode,
  setCurrentMessageOn,
  setCurrentMessageOff,
})(HotspotDetailOverlay);