Release note: https://github.com/pixlee/pixlee-ios-sdk/releases/tag/2.10.0

Updates to PXLPhotoProductView

If showHotspots = true is passed from the app-side to PXLPhotoProductView, SDK draws hotspots on PXLPhotoProductView similar to lightbox
Tapping a hotspot scrolls the product list UI and navigate to the right product.
Tapping the content hide and show all hotspots.
always read original url to get content's width and height for calculating the positions of hotspots on the screen because bounding_box_products's x, y, with, height are generated based on the original content's width height from Control Panel.

Example

[DATA] Added a new field to PXLPhoto

boundingBoxProducts contains hotspots' positions on the content

#!swift
public struct PXLPhoto: Equatable {
...
    public let boundingBoxProducts: [BoundingBoxProduct]?
...
}

public struct BoundingBoxProduct: Codable {
    let x, y, width, height: Int
    let aspectRatio, productID: Int

    enum CodingKeys: String, CodingKey {
        case x, y, width, height
        case aspectRatio = "aspect_ratio"
        case productID = "product_id"
    }
}

[UI] Added a new option to PXLPhotoProductView to display hotspots

showHotspots: Bool is added to PXLPhotoProductView
- true: display hotspots. tapping on the content show/hide hotspots.
- false: don't display hotspots.
note that hotspots are only visible on Image. it's not available on video.

Code Example of PXLPhotoProductView

To display hotspots, you need to set showHotspots: true. Please see the example codes below.

#!swift
 let widget = PXLPhotoProductView.widgetForPhoto(photo: ...,
              cropMode: ...,
              showHotspots: true,
              ...)


# Please note that below can happen
Some hotspots are located outside of the screen. This's not a bug. It's from the different screen ratios of mobile devices and the display options which are ImageScaleType's [FIT_CENTER, CENTER_CROP].
### What does ImageScaleType do?
- FIT_CENTER displays all areas of the image keeping the ratio of the content and fill the rest of the screen with a blurry image. 
- CENTER_CROP also keeps the ratio of the content. It fills the screen and crops the rest of the areas.
Situation 1. FIT_CENTER: displays hotspots in most cases. but it cannot display hotspots that are located outside of the screen area.
Situation 2. CENTER_CROP:  hotspots are located outside of the screen because the areas of the image where certain hotspots are supposed to be located are cropped.

Here's the example

### Example 1: Best case
|Control Panel|
|---------|
|<img src="https://i.ibb.co/WtbQtC7/cp-car-person.png" width="600">|

|.FIT_CENTER|.CENTER_CROP|
|---------|---------|
|<img src="https://i.ibb.co/VmnjvTZ/fit-car-person.png" width="300">|<img src="https://i.ibb.co/ZH1m90K/crop-car-person.png" width="300">|

### Example 2: in CENTER_CROP, one hotspot is off the screen.
|Control Panel|
|---------|
|<img src="https://i.ibb.co/qW4Bs2b/cp-guitar.png" width="600">|

|.FIT_CENTER|.CENTER_CROP|
|---------|---------|
|<img src="https://i.ibb.co/kHXcRSf/fit-guitar.png" width="300">|<img src="https://i.ibb.co/C8vwbb1/crop-guitar.png" width="300">|

### Example 3: in CENTER_CROP, one hotspot is located under the product list UI.
|Control Panel|
|---------|
|<img src="https://i.ibb.co/bmcHp7P/cp-bicyclers.png" width="600">|

|.FIT_CENTER|.CENTER_CROP|
|---------|---------|
|<img src="https://i.ibb.co/pbGS9dP/fit-bicyclers.png" width="300">|<img src="https://i.ibb.co/gjhkdnR/crop-bicyclers.png" width="300">|

### Example 4: 
- FIT_CENTER: a hotspot located top left is partially off the screen.
- CENTER_CROP: the same hotspot is totally off the screen.

|Control Panel|
|---------|
|<img src="https://i.ibb.co/JndGDMn/cp-workout.png" width="600">|

|.FIT_CENTER|.CENTER_CROP|
|---------|---------|
|<img src="https://i.ibb.co/gMPjt5y/fit-workout.png" width="300">|<img src="https://i.ibb.co/GR1PpP0/crop-workout.png" width="300">|