@s20.ai/safecam-360-rn-lite/src/components/widgets/WidgetOverlay.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 {View, Text, StyleSheet, Dimensions, Platform} from 'react-native';
import OverlayButtons from './OverlayButtons';
import {Slide} from '@s20.ai/safecam-components-rn';
import BottomToolbar from './BottomToolbar';
import appStyleConfig from '../appStyleConfig';
import {connect} from 'react-redux';
import {hasNotch} from 'react-native-device-info';
import {responsiveAppStyleConfig} from '../responsiveAppStyleConfig';
import {
  SafeAreaView,
  useSafeAreaInsets,
  initialWindowMetrics,
} from 'react-native-safe-area-context';

const WidgetOverlay = ({
  galleryButtonPressed,
  enableGalleryButton,
  enableBackButton,
  backButtonPressed,
  combinedHotspotMetadata,
  bottomToolbarButtonPressed,
  bottomToolbarSwitchToggled,
  exteriorDataProcessed,
  interiorDataProcessed,
  enableHotspots,
  widgetsVisible,
  customFontFamily,
  customGalleryButton,
  customBackButton,
  miniMode,
}) => {
  const widgetOverlayContainerStyles = responsiveAppStyleConfig.stylePicker(
    'widgetOverlayContainer',
    Dimensions.get('window').width,
  );
  return (
    <View
      pointerEvents="box-none"
      style={{
        ...(!miniMode
          ? widgetOverlayContainerStyles
          : {height: 20, paddingLeft: 20, paddingRight: 20}),
        ...(!miniMode
          ? {
              paddingBottom:
                initialWindowMetrics.insets.bottom === 0 &&
                useSafeAreaInsets().bottom === 0
                  ? 48
                  : enableHotspots
                  ? 48
                  : 48,
            }
          : {}),
      }}>
      {!miniMode && (
        <View pointerEvents="box-none">
          <OverlayButtons
            galleryButtonPressed={galleryButtonPressed}
            enableGalleryButton={enableGalleryButton}
            enableBackButton={enableBackButton}
            backButtonPressed={backButtonPressed}
            customFontFamily={customFontFamily}
            customGalleryButton={customGalleryButton}
            customBackButton={customBackButton}
          />
        </View>
      )}

      {Object.keys(exteriorDataProcessed).length === 0 &&
      Object.keys(interiorDataProcessed).length === 0 ? (
        <></>
      ) : (
        <Slide duration={150} visible={miniMode || widgetsVisible}>
          <BottomToolbar
            combinedHotspotMetadata={combinedHotspotMetadata}
            bottomToolbarButtonPressed={bottomToolbarButtonPressed}
            bottomToolbarSwitchToggled={bottomToolbarSwitchToggled}
            enableHotpsots={enableHotspots}
            customFontFamily={customFontFamily}
            interiorDataProcessed={interiorDataProcessed}
            exteriorDataProcessed={exteriorDataProcessed}
            miniMode={miniMode}
          />
        </Slide>

        /* <BottomToolbar 
                      combinedHotspotMetadata={combinedHotspotMetadata} 
                      bottomToolbarButtonPressed={bottomToolbarButtonPressed} 
                      bottomToolbarSwitchToggled={bottomToolbarSwitchToggled}
                      enableHotpsots={enableHotspots}
                    /> */
      )}
    </View>
  );
};

const mapStateToProps = ({currentView}) => {
  return {
    widgetsVisible: currentView.widgetsVisible,
  };
};

export default connect(mapStateToProps)(WidgetOverlay);