@s20.ai/safecam-360-rn/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
}) => {
    const widgetOverlayContainerStyles = responsiveAppStyleConfig.stylePicker("widgetOverlayContainer", Dimensions.get("window").width)
    return <View pointerEvents="box-none" style={{...widgetOverlayContainerStyles, ...{paddingBottom: initialWindowMetrics.insets.bottom === 0 && useSafeAreaInsets().bottom === 0? 48 : enableHotspots? 48 : 48}}}>

        <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={widgetsVisible}>
                    <BottomToolbar 
                      combinedHotspotMetadata={combinedHotspotMetadata} 
                      bottomToolbarButtonPressed={bottomToolbarButtonPressed} 
                      bottomToolbarSwitchToggled={bottomToolbarSwitchToggled} 
                      enableHotpsots={enableHotspots}
                      customFontFamily={customFontFamily}
                      interiorDataProcessed={interiorDataProcessed}
                      exteriorDataProcessed={exteriorDataProcessed}
                      />
                  </Slide>

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


             
        
        
       
              )}
        
    </View>
}

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

export default connect(mapStateToProps)(WidgetOverlay);