@s20.ai/safecam-360-rn-v2/src/components/common/overlay/AnimationOverlay.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

import React from 'react';
import {connect, useDispatch} from 'react-redux';
import constants from '../../../config/constants';
import {setCurrentMessageOff} from '../../../redux/actions/messageHintAction';
import AutoRotateHint from './AutoRotateHint';
import ExteriorRotateHint from './ExteriorRotateHint';
import InteriorRotateHint from './InteriorRotateHint';
import ZoomOutMessage from './ZoomOutMessage';
import ZoomMessage from './ZoomMessage';

const AnimationOverlay = ({
  messageHint,
  customFontFamily,
  miniMode,
  zoomMessage,
}) => {
  let _messageHint = {
    AUTO_ROTATE_MESSAGE : {
      show: Boolean,
      never: Boolean // it overrides the show variable state
    }
  }
  const dispatch = useDispatch();
  const getMessage = () => {
    for (const key in messageHint) {
      if (Object.hasOwnProperty.call(messageHint, key)) {
        const element = messageHint[key];
        if (element.show && !element.never)
          switch (key) {
            case constants.MESSAGES.AUTO_ROTATE_MESSAGE:
              if (miniMode) {
                dispatch(
                  setCurrentMessageOff(
                    constants.MESSAGES.AUTO_ROTATE_MESSAGE,
                    true,
                  ),
                );
                return <></>;
              }
              return <AutoRotateHint customFontFamily={customFontFamily} />;
            case constants.MESSAGES.EXTERIOR_ROTATE:
              return <ExteriorRotateHint miniMode={miniMode} />;
            case constants.MESSAGES.INTERIOR_ROTATE:
              return (
                <InteriorRotateHint
                  miniMode={miniMode}
                  customFontFamily={customFontFamily}
                />
              );
            case constants.MESSAGES.DOUBLE_TAP_TO_ZOOM_OUT_EXTERIOR:
              return zoomMessage && <ZoomOutMessage isExterior />;
            case constants.MESSAGES.DOUBLE_TAP_TO_ZOOM_EXTERIOR:
              return zoomMessage && <ZoomMessage isExterior />;
            case constants.MESSAGES.DOUBLE_TAP_TO_ZOOM_OUT_INTERIOR:
              return zoomMessage && <ZoomOutMessage isInterior />;
            case constants.MESSAGES.DOUBLE_TAP_TO_ZOOM_INTERIOR:
              return zoomMessage && <ZoomMessage isInterior />;
            default:
              return;
          }
      }
    }
  };
  return <>{getMessage()}</>;
};
const mapStateToProps = ({messageHint, currentView}) => {
  return {
    messageHint: messageHint,
  };
};
export default connect(mapStateToProps)(AnimationOverlay);