@s20.ai/safecam-360-rn-lite/src/utils/propsPreprocessing.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
 */
export const preProcess = (exteriorData = {}, interiorData = {}) => {
  if (exteriorData && Object.keys(exteriorData).length > 0) {
    //set initialframe
    if (!exteriorData.initialFrame) {
      exteriorData.initialFrame = Math.round(
        45 / (360 / exteriorData.imageSource.length),
      );
    }
    if (
      exteriorData.hasOwnProperty('hotspotPostionData') &&
      exteriorData.hasOwnProperty('hotspotPostionData')
    ) {
      let hotspotPostionDataParsed = {};

      let filteredHotspotMetadata = [
        ...new Map(
          exteriorData.hotspotPostionData
            .filter(d => {
              if (d.display.length === 0) return true;
              else return d.display[2];
            })
            .map(item => [
              item['hotspotRefId'],
              {
                ...item,
                triggerFrame: item.display.length
                  ? item.frameId
                  : item.triggerFrame,
              },
            ]),
        ).values(),
      ];
      exteriorData.filteredHotspotMetadata = filteredHotspotMetadata;
      exteriorData.filteredHotspotMetadata.forEach((hp, index) => {
        hp.imageSrc = exteriorData.hotspotImages.find(
          d => d.hotspotRefId === hp.hotspotRefId,
        ).imageSrc;
        hp.address = index;
        hp.hotspotType = hp.type;
        hp.type = 'exterior';
      });
      exteriorData.hotspotPostionData.forEach((hp, index) => {
        hotspotPostionDataParsed[hp.frameId] = [
          ...(hotspotPostionDataParsed[hp.frameId] || []),
          hp,
        ];
        hp.imageSrc = exteriorData.hotspotImages.find(
          d => d.hotspotRefId === hp.hotspotRefId,
        ).imageSrc;
      });
      exteriorData['hotspotPostionDataParsed'] = hotspotPostionDataParsed;
    }
  }

  if (interiorData && Object.keys(interiorData).length > 0) {
    interiorData.filteredHotspotMetadata = [];
    if (
      interiorData.hasOwnProperty('hotspotPostionData') &&
      interiorData.hasOwnProperty('hotspotPostionData')
    ) {
      interiorData.hotspotPostionData.forEach((hp, index) => {
        let formattedHp = {...hp};
        formattedHp.imageSrc = interiorData.hotspotImages.find(
          d => d.hotspotRefId === hp.hotspotRefId,
        ).imageSrc;
        formattedHp.address = index;
        formattedHp.hotspotType = hp.type;
        formattedHp.type = 'interior';
        interiorData.filteredHotspotMetadata.push(formattedHp);
      });
    }
  }

  let combinedHotspotMetadata = [];

  if (
    exteriorData &&
    exteriorData.hasOwnProperty('filteredHotspotMetadata') &&
    interiorData &&
    interiorData.hasOwnProperty('filteredHotspotMetadata')
  ) {
    combinedHotspotMetadata = interiorData.filteredHotspotMetadata.concat(
      exteriorData.filteredHotspotMetadata,
    );
  } else if (
    exteriorData &&
    exteriorData.hasOwnProperty('filteredHotspotMetadata') &&
    interiorData &&
    !interiorData.hasOwnProperty('filteredHotspotMetadata')
  ) {
    combinedHotspotMetadata = exteriorData.filteredHotspotMetadata;
  } else if (
    exteriorData &&
    !exteriorData.hasOwnProperty('filteredHotspotMetadata') &&
    interiorData &&
    interiorData.hasOwnProperty('filteredHotspotMetadata')
  ) {
    combinedHotspotMetadata = interiorData.filteredHotspotMetadata;
  }
  return [
    exteriorData ? exteriorData : {},
    interiorData ? interiorData : {},
    combinedHotspotMetadata ? combinedHotspotMetadata : [],
  ];
};