Fix a memory leak issue in PXLClient

Problem

PXLClient held Context as a final variable. This leads to a memory leak.

What's fixed?

Context is removed from the constructor of PXLClient.

• PR: #56

Removed an unused line from PXLClient

Removed an unused line from PXLClient

Reduced the SDK Size

Our Android SDK size decreased 55%.

Library	Size change	Before	After
Pixlee SDK	-5.3mb	9.5mb	4.2mb

What's changed?

Library	Use	Size change	Before	After	Details
ExoPlayer	playing video	-1.3mb	4.2mb	2.9mb	removed Exoplayer.dash and Exoplayer.ima
core-ktx	view control	-0.1mb	0.1mb	0	replaced androidx.core.view.doOnPreDraw with View.post{...}
kotlinx-coroutines-test	for testing	-2.2mb	2.2mb	0	removed from the app build. This should only have been included in testing.
jakson -> gson	json parser	-0.62mb	0.7mb	0.08mb	replaced jackson with gson that does the same job
material	design utility	-1.5mb	1.5mb	0	removed. CardView from material lib got replaced with a XML.

Analytics bug fix

Fixed a bug of sending photo ids analytics instead of album photo ids

Added Mosaic and Horizontal options to PXLWidgetView

Added Mosaic and Horizontal options to PXLWidgetView

Mosaic	Horizontal

Import guide for SDK users

Step 1: import this sample code into the app project

• layout

  <com.pixlee.pixleesdk.ui.widgets.list.PXLWidgetView
      android:id="@+id/widget"
      android:layout_width="match_parent"
      android:layout_height="match_parent"/>

• kotlin

  binding.widget.initiate(
      widgetTypeForAnalytics = "your_widget_type", // this will be used when this view automatically fires openedWidget, widgetVisible analytics
      viewType = PXLWidgetView.ViewType.Mosaic(gridSpan = 4, lineSpace = Space(lineWidthInPixel = 4.px.toInt(),includingEdge = false)),
      apiParameters = PXLKtxBaseAlbum.Params(
              // album images
              searchId = PXLKtxBaseAlbum.SearchId.Album(BuildConfig.PIXLEE_ALBUM_ID), // product images: searchId = PXLKtxBaseAlbum.SearchId.Product(BuildConfig.PIXLEE_SKU),
              filterOptions = PXLAlbumFilterOptions().apply {
                  // hasProduct and hasPermission are often used together for displaying photos with tagged products and gotten the permission from their creators
                  // if you don't see any photos after the loading is done, go to https://app.pixlee.com/app#albums/{your album id} and make sure your photos have the same filter conditions as your filterOptions.
                  hasProduct = true
                  hasPermission = true
  
                  // more filter options
                  // - hasPermission = true
                  // - inStockOnly = true
                  // - .. there are more. Please check README or PXLAlbumFilterOptions class for more filter options
              },
              sortOptions = PXLAlbumSortOptions().apply {
                  sortType = PXLAlbumSortType.RECENCY
                  descending = true
              }
      ),
      configuration = PXLPhotoView.Configuration().apply {
          pxlPhotoSize = PXLPhotoSize.MEDIUM
          imageScaleType = ImageScaleType.CENTER_CROP
      },
      loadMoreTextViewStyle = TextViewStyle().apply {
          text = "Load More"
          textPadding = TextPadding(0, 22.px.toInt(), 0, 22.px.toInt())
          size = 24.px
          color = Color.BLACK
      },
      onPhotoClickedListener = { view, photoWithImageScaleType ->
          // TODO: open lightbox
          ViewerActivity.launch(this, photoWithImageScaleType)
      }
  )

Step 2: Set up Horizontal or Mosaic

• To use Horizontal from PXLWidgetView, you can edit this and replace the value of viewType in the code example with your edited code.

  viewType = PXLWidgetView.ViewType.Horizontal(squareSizeInPixel = <your square Size In Pixel>, lineWidthInPixel = 4.px.toInt()),

• To use Mosaic from PXLWidgetView, you can edit this and replace the value of viewType in the code example with your edited code.

  viewType = PXLWidgetView.ViewType.Mosaic(gridSpan = 4, lineSpace = Space(lineWidthInPixel = 4.px.toInt(),includingEdge = false)),

Migrated from Jcenter to Maven

We no longer use JCenter and do use mavenCentral to publish our SDK. There's 3rd-party libraries' version changes. Please check /build.gradle and /pixleesdk/build.gradle about the changes.

Added hotspots to PXLPhotoProductView

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

[DEMO] A new example to the demo app

• how to access the example: Launch the app > main screen > tap Hotspots in PXLPhotoProductView button

[DATA] Added a new field to PXLPhoto

• boundingBoxProducts contains hotspots' positions on the content

#!java
public class PXLPhoto implements Parcelable {
...
    public List<PXLBoundingBoxProduct> boundingBoxProducts;
...
}

public class PXLBoundingBoxProduct implements Parcelable {
    @Json(name = "product_id")
    public String productId;

    @Json(name = "x")
    @NullableInt
    public int x;

    @Json(name = "y")
    @NullableInt
    public int y;

    @Json(name = "width")
    @NullableInt
    public int width;

    @Json(name = "height")
    @NullableInt
    public int height;

    @Json(name = "aspect_ratio")
    @NullableDouble
    public double aspectRatio;
...
}

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

• showHotspots: pxlPhotoProductView.setContent(..) 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

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

  #!kotlin
  pxlPhotoProductView
            .setContent(..
                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

.FIT_CENTER	.CENTER_CROP

Example 2: in CENTER_CROP, one hotspot is off the screen.

Control Panel

.FIT_CENTER	.CENTER_CROP

Example 3: in CENTER_CROP, one hotspot is located under the product list UI.

Control Panel

.FIT_CENTER	.CENTER_CROP

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

.FIT_CENTER	.CENTER_CROP

A bug fix of UI

One of the display options of sales price has a bug that has a horizontal line that shouldn't be shown. This pr removes that line.

DiscountLayout.WAS_OLD_PRICE

Old version	New fixed version

Fixed a bug of displaying sales price

Fixed a bug of displaying sales price.

Add discount price to PXLProduct and a UI Component(PXLPhotoProductView)

a new example to the demo app

• how to access the example: Launch the app > main screen > tap Product View button

[Data] Added new fields to PXLProduct

• these fields are added to provide discount price information

#!java
public class PXLProduct implements Parcelable {
...
    @FieldDate
    @Json(name = "sales_start_date")
    public Date salesStartDate;

    @FieldDate
    @Json(name = "sales_end_date")
    public Date salesEndDate;

    @FieldBigDecimal
    @Json(name = "sales_price")
    public BigDecimal salesPrice;
...
}

[UI] Added a new option to PXLPhotoProductView for sales price

FYI, the color and size of the sales price and the default price are fully customizable via CurrencyTextStyle class.

• discountPriceTextStyle: ProductViewHolder.DiscountPrice(..) is added to PXLPhotoProductView.Configuration

  • priceTextStyle = CurrencyTextStyle

    • isCurrencyLeading:Boolean is added to CurrencyTextStyle. priceTextStyle has the same change as well.
      • true: display currency symbol in front of the price
      • false: display currency symbol after the price

  • DiscountLayout's options

.CROSS_THROUGH	.WAS_OLD_PRICE	.WITH_DISCOUNT_LABEL

No Option selected or no sales price	Demo

• Code Example
  • To display sales price, you need to set discountPriceTextStyle = ProductViewHolder.DiscountPrice(..). Please see the example codes below.

  #!kotlin
  pxlPhotoProductView
            .setContent(photoInfo = ...,
                headerConfiguration = ...,
                configuration = ProductViewHolder.Configuration().apply {
                    circleIcon = ...
                    mainTextStyle = ...
                    subTextStyle = ..
                    bookmarkDrawable = ..
                    priceTextStyle = ...
                    discountPriceTextStyle = ProductViewHolder.DiscountPrice(
                            discountLayout = ProductViewHolder.DiscountLayout.WITH_DISCOUNT_LABEL,
                            priceTextStyle = CurrencyTextStyle().apply {
                                isCurrencyLeading = true
                                defaultCurrency = "EUR" // or null
                                leftText = TextStyle().apply {
                                    color = Color.RED
                                    size = 24.px
                                    sizeUnit = TypedValue.COMPLEX_UNIT_PX
                                    typeface = null
                                }
  
                                rightText = TextStyle().apply {
                                    color = Color.RED
                                    size = 14.px
                                    sizeUnit = TypedValue.COMPLEX_UNIT_PX
                                    typeface = null
                                }
                            }
                    )
                },
                bookmarkMap = ..,
                onProductClicked = {
                    ...
                })