@s20.ai/safecam-360-rn/src/components/hotspot/HotspotElement.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,
  StyleSheet,
  Text,
  TouchableWithoutFeedback,
  Image,
} from 'react-native';
import {useDispatch, connect} from 'react-redux';
import {setCurrentHotspot} from '../../redux/actions/currentHotspotAction';
import {IconButton, Label} from '@s20.ai/safecam-components-rn';
import styleConfig from '../styleConfig';
import {triggerHapticFeedback} from '../../utils/device';
import LottieView from 'lottie-react-native';
import {SvgUri} from 'react-native-svg';
import constants from '../../config/constants';
let timeout;

const HotspotElement = ({
  hotspot,
  width,
  height,
  address,
  orientationState,
  currentHotspotState,
  hotspotType,
  hotspotLocation,
  enableHotspotTooltip,
  hotspotPressed,
  customFontFamily
}) => {
  
  const dispatch = useDispatch();
  


  return (
    <View
      style={{
        flexDirection: 'row',
        height: 12 * hotspot.display[0],
        width: 12 * hotspot.display[0],
        //TODO - hotspot positions not exact
        // top:
        //   orientationState.includes(constants.LANDSCAPE)
        //     ? currentHotspotState
        //       ? (width / 1.45) * hotspot.y
        //       : (width / 2.15) * hotspot.y
        //     : (width / 1.9) * hotspot.y,
        top: height * hotspot.y,
        left: width * hotspot.x,
        position: 'relative',
        borderRadius: 50,
        justifyContent: 'center',
        transform: [
          {
            translateX: -5,
          },
          {
            translateY: -15,
          },
        ],
      }}>
      <View
        style={{
          position: 'absolute',
          top: -45,
          display: hotspot.display[2] ? 'flex' : 'none',
          opacity: hotspot.display[2] ? 1 : 0,
        }}>
        {enableHotspotTooltip && <Label
          onPress={() => {
            if(hotspotPressed){
              hotspotPressed({
                currentView: hotspotLocation,
                hotspot:{
                  title: hotspot.imageTitle,
                  description: hotspot.description
                }
              })
            }
             
            dispatch(
              setCurrentHotspot({
                ...hotspot,
                address: address,
              }),
            );
            triggerHapticFeedback();
          }}
          text={hotspot.description}
          sx={{
            ...styleConfig.label,
            ...{text:{fontFamily: customFontFamily && customFontFamily === "Poppins" ? "Poppins-SemiBold" : "Helvetica"}}
          }}
        />}
      </View>
     
        <IconButton
          src={ hotspotType === constants.DAMAGE? 'https://cars24-images.s3.ap-south-1.amazonaws.com/hotspot.png': 'https://cars24-images.s3.ap-south-1.amazonaws.com/feature.png'}
          onPress={() => {
            if(hotspotPressed){
              hotspotPressed({
                currentView: hotspotLocation,
                hotspot:{
                  type: hotspot.type,
                  title: hotspot.imageTitle,
                  description: hotspot.description
                }
              })
            }
              
            dispatch(
              setCurrentHotspot({
                ...hotspot,
                address: address,
              }),
            );
            triggerHapticFeedback();
          }}
          sx={{
            base: {
              backgroundColor: 'transparent',
            },
            icon: {
              transform: [
                {
                  scale: 1.65 * hotspot.display[0],
                },
              ],
            },
          }}
        />
     
    </View>
  );
};


export default HotspotElement;