Fixed a bug of playing a video background in PXLPhotoProductView

We fixed a bug of playing a video in the background in PXLPhotoProductView by releasing it on onDestroy of the Activity or fragment.

How to apply the change:

Step 1: upgrade your SDK to this version.
Step 2: If you use [Option 1], no code change is required. But if you use [Option 2], add pxlPhotoProductView.releaseVideo()
to your onDestroy. We added an example below here and the doc/kotlin/UI.md.
Step 3: done

Document from doc/kotlin/UI.md.

Play and stop the video

• Option 1: Automatic using androidx.lifecycle.Lifecycle(Jetpack)
  • Prerequisite: add the dependencies in the doc (https://developer.android.com/jetpack/androidx/releases/lifecycle) to your app gradle. You can also see the sample on app/build.gradle in the demo app.
  • Add the codes

    #!kotlin
    class YourActivity : AppCompatActivity() {
        override fun onCreate(savedInstanceState: Bundle?) {
            super.onCreate(savedInstanceState)
            ...
            pxlPhotoProductView.useLifecycleObserver(lifecycle)
        }
    }

• Option 2: Manual (use this if you want to play, stop and release the video when you need)

#!kotlin
class YourActivity : AppCompatActivity() {
    // play video
    override fun onResume() {
        super.onResume()
        pxlPhotoProductView.playVideo()
    }
    
    // stop video
    override fun onPause() {
        super.onPause()
        pxlPhotoProductView.stopVideo()
    }

    override fun onDestroy() {
        super.onDestroy()
        pxlPhotoProductView.releaseVideo()
    }
}

Fixed a bug of not making gif animated

Fixed a bug of not making gif animated as content in PXLPhoto

Fixed a bug of restarting the video after pausing it & loading speed improvement

Note: No need to change your code for this release! Just please update the SDK!

• Fixed a bug of restarting the video after pausing it.
• Loading large video content on PXLPhotoRecyclerView, PXLPhotoRecyclerViewInGrid, PXLPhotoProductView and PXLPhotoView was slow. Since we discovered that there were inefficient ways of loading the content in the SDK, we increased the loading speed.

Added UI customization options to each cell on list view and a new API

Get a PXLPhoto with an album photo id and regionId. You can get the right currency using this API

#!Kotlin.coroutines

val albumPhotoId:String = <one of your album photo ids>
val regionId:Int = <one of region ids>
val result:PXLPhoto = pxlKtxAlbum.getPhotoFromRegion(albumPhotoId, regionId)

PXLPhotoRecyclerView and PXLPhotoRecyclerViewInGrid

• removed configuration argument is moved from pxlPhotoRecyclerView.initiate(...) to PhotoWithImageScaleType class to customize UI elements on each cell in the list. And imageScaleType argument is moved from pxlPhotoRecyclerView.initiate(...) to PXLPhotoView.Configuration class as well.

BEFORE: PXLPhotoRecyclerView

#!kotlin
// you can customize color, size if you need
pxlPhotoRecyclerView.initiate(infiniteScroll = true, // or false
    showingDebugView = false, // false: for production, true: development only when you want to see the debug info
    alphaForStoppedVideos = 0.5f, // this is the alpha(opacity) of visible items in recyclerview except the first fully visible view(always 1f) 
    configuration = PXLPhotoView.Configuration().apply {
        // Customize image size
        pxlPhotoSize = PXLPhotoSize.ORIGINAL
        // Customize Main TextView
        mainTextViewStyle = TextViewStyle().apply {
            text = "Main Text"
            size = 30.px
            sizeUnit = TypedValue.COMPLEX_UNIT_PX
            typeface = null
        }
        // Customize Sub TextView
        subTextViewStyle = TextViewStyle().apply {
            text = "Sub Text"
            size = 18.px
            sizeUnit = TypedValue.COMPLEX_UNIT_PX
            typeface = null
        }
        // Customize Button
        buttonStyle = PXLPhotoView.ButtonStyle().apply {
            isButtonVisible = true
            text = "Action Button"
            size = 20.px
            sizeUnit = TypedValue.COMPLEX_UNIT_PX
            typeface = null
            buttonIcon = com.pixlee.pixleesdk.R.drawable.baseline_play_arrow_white_24
            stroke = PXLPhotoView.Stroke().apply {
                width = 2.px.toInt()
                color = Color.WHITE
                radiusInPixel = 25.px
                padding = PXLPhotoView.Padding().apply {
                    left = 20.px.toInt()
                    centerRight = 40.px.toInt()
                    topBottom = 10.px.toInt()
                }
            }
        }

    }, onButtonClickedListener = { view, pxlPhoto ->
        context?.also { ctx ->
            // you can add your business logic here
            Toast.makeText(ctx, "onButtonClickedListener", Toast.LENGTH_SHORT).show()
            moveToViewer(pxlPhoto)
        }
    }, onPhotoClickedListener = { view, pxlPhoto ->
        context?.also { ctx ->
            // you can add your business logic here
            Toast.makeText(ctx, "onItemClickedListener", Toast.LENGTH_SHORT).show()
        }
    })

// write codes to get photos first. Read API doc.
// you should convert List<PXLPhoto> into List<PhotoWithImageScaleType>
val pxlPhotos: List<PXLPhoto> = ....

// turn the list into List<PhotoWithImageScaleType> to set ImageScaleType[CENTER_CROP, FIT_CENTER], and the cells' height size
val list = ArrayList<PhotoWithImageScaleType>()
pxlPhotos.forEach { pxlPhoto ->
    list.add(PhotoWithImageScaleType(pxlPhoto = pxlPhoto,
                                    imageScaleType = PXLPhotoView.ImageScaleType.CENTER_CROP,
                                    heightInPixel = cellSize,
                                    isLoopingVideo = true,
                                    soundMuted = true))
    list.add(PhotoWithImageScaleType(pxlPhoto = pxlPhoto,
                                    imageScaleType = PXLPhotoView.ImageScaleType.FIT_CENTER,
                                    heightInPixel = cellSize,
                                    isLoopingVideo = true,
                                    soundMuted = true))
}


// start the list UI by passing these arguments
pxlPhotoRecyclerView.replaceList(list)

AFTER: PXLPhotoRecyclerView

#!kotlin
// you can customize color, size if you need
pxlPhotoRecyclerView.initiate(infiniteScroll = true, // or false
    showingDebugView = false, // false: for production, true: development only when you want to see the debug info
    alphaForStoppedVideos = 0.5f, // this is the alpha(opacity) of visible items in recyclerview except the first fully visible view(always 1f) 
    onButtonClickedListener = { view, pxlPhoto ->
        context?.also { ctx ->
            // you can add your business logic here
            Toast.makeText(ctx, "onButtonClickedListener", Toast.LENGTH_SHORT).show()
            moveToViewer(pxlPhoto)
        }
    }, onPhotoClickedListener = { view, pxlPhoto ->
        context?.also { ctx ->
            // you can add your business logic here
            Toast.makeText(ctx, "onItemClickedListener", Toast.LENGTH_SHORT).show()
        }
    })

// write codes to get photos first. Read API doc.
// you should convert List<PXLPhoto> into List<PhotoWithImageScaleType>
val pxlPhotos: List<PXLPhoto> = ....

// turn the list into List<PhotoWithImageScaleType> to set ImageScaleType[CENTER_CROP, FIT_CENTER], and the cells' height size
val list = ArrayList<PhotoWithImageScaleType>()
pxlPhotos.forEach { pxlPhoto ->
    list.add(PhotoWithImageScaleType(pxlPhoto = pxlPhoto,
        configuration = PXLPhotoView.Configuration().apply {
            // Customize image size
            pxlPhotoSize = PXLPhotoSize.ORIGINAL
            imageScaleType = PXLPhotoView.ImageScaleType.CENTER_CROP
            // Customize Main TextView
            mainTextViewStyle = TextViewStyle().apply {
                text = "Main Text"
                size = 30.px
                sizeUnit = TypedValue.COMPLEX_UNIT_PX
                typeface = null
            }
            // Customize Sub TextView
            subTextViewStyle = TextViewStyle().apply {
                text = "Sub Text"
                size = 18.px
                sizeUnit = TypedValue.COMPLEX_UNIT_PX
                typeface = null
            }
            // Customize Button
            buttonStyle = PXLPhotoView.ButtonStyle().apply {
                isButtonVisible = true
                text = "Action Button"
                size = 20.px
                sizeUnit = TypedValue.COMPLEX_UNIT_PX
                typeface = null
                buttonIcon = com.pixlee.pixleesdk.R.drawable.baseline_play_arrow_white_24
                stroke = PXLPhotoView.Stroke().apply {
                    width = 2.px.toInt()
                    color = Color.WHITE
                    radiusInPixel = 25.px
                    padding = PXLPhotoView.Padding().apply {
                        left = 20.px.toInt()
                        centerRight = 40.px.toInt()
                        topBottom = 10.px.toInt()
                    }
                }
            }
    
        },
        heightInPixel = cellSize,
        isLoopingVideo = true,
        soundMuted = true))
    list.add(PhotoWithImageScaleType(pxlPhoto = pxlPhoto,
        configuration = PXLPhotoView.Configuration().apply {
            // Customize image size
            pxlPhotoSize = PXLPhotoSize.ORIGINAL
            imageScaleType = PXLPhotoView.ImageScaleType.FIT_CENTER
            // Customize Main TextView
            mainTextViewStyle = TextViewStyle().apply {
                text = "Main Text"
                size = 30.px
                sizeUnit = TypedValue.COMPLEX_UNIT_PX
                typeface = null
            }
            // Customize Sub TextView
            subTextViewStyle = TextViewStyle().apply {
                text = "Sub Text"
                size = 18.px
                sizeUnit = TypedValue.COMPLEX_UNIT_PX
                typeface = null
            }
            // Customize Button
            buttonStyle = PXLPhotoView.ButtonStyle().apply {
                isButtonVisible = true
                text = "Action Button"
                size = 20.px
                sizeUnit = TypedValue.COMPLEX_UNIT_PX
                typeface = null
                buttonIcon = com.pixlee.pixleesdk.R.drawable.baseline_play_arrow_white_24
                stroke = PXLPhotoView.Stroke().apply {
                    width = 2.px.toInt()
                    color = Color.WHITE
                    radiusInPixel = 25.px
                    padding = PXLPhotoView.Padding().apply {
                        left = 20.px.toInt()
                        centerRight = 40.px.toInt()
                        topBottom = 10.px.toInt()
                    }
                }
            }
    
        },
        heightInPixel = cellSize,
        isLoopingVideo = true,
        soundMuted = true))


// start the list UI by passing these arguments
pxlPhotoRecyclerView.replaceList(list)

Added region_id and buttons to PXLPhotoProductView

Added regionId to get the currency of the specific region when searching for photos of an album. Here's how you can use it.

• note: - note: you can get the right currencies of your products by adding regionId to PXLKtxBaseAlbum.Params.

#!kotlin
// Step 1: declare your album
val pxlKtxAlbum = PXLKtxAlbum(context)
val searchId = PXLKtxBaseAlbum.SearchId.Album("<your ALBUM ID>")
// alternative: val searchId = PXLKtxBaseAlbum.SearchId.Product("<your Product's SKU>")


// Step 2: add region id
pxlKtxAlbum.params = PXLKtxBaseAlbum.Params(
    searchId = searchId,
    perPage = 30,
    filterOptions = PXLAlbumFilterOptions().apply {
        hasPermission = true
        hasProduct = true
        // ... there's more
    },
    sortOptions = PXLAlbumSortOptions().apply {
        sortType = PXLAlbumSortType.RECENCY
        descending = true
        // ... there's more.
    },
    regionId = <Optional: your region id(Int)>       //<-------------- HERE is where you need to add your region id
)

Added back and mute/unmute buttons to PXLPhotoProductView

headerConfiguration:PXLPhotoProductView.Configuration is added to pxlPhotoProductView.loadContent(). With this, you can customize icon color, icon, circle color and padding in the circle, and also listen click event for the back and mute/unmute buttons.

#!kotlin
pxlPhotoProductView.loadContent(photoInfo = item,
        headerConfiguration = PXLPhotoProductView.Configuration().apply {
            backButton = PXLPhotoProductView.CircleButton().apply {
                icon = com.pixlee.pixleesdk.R.drawable.round_close_black_18
                iconColor = Color.BLACK
                backgroundColor = Color.WHITE
                padding = 10.px.toInt()
                onClickListener = {
                    // back button's click effect
                    Toast.makeText(this@ViewerActivity, "Replace this with your codes, currently 'onBackPressed()'", Toast.LENGTH_LONG).show()
                    onBackPressed()
                }
            }
            muteCheckBox = PXLPhotoProductView.MuteCheckBox().apply {
                mutedIcon = com.pixlee.pixleesdk.R.drawable.outline_volume_up_black_18
                unmutedIcon = com.pixlee.pixleesdk.R.drawable.outline_volume_off_black_18
                iconColor = Color.BLACK
                backgroundColor = Color.WHITE
                padding = 10.px.toInt()
                onCheckedListener = {
                    Toast.makeText(this@ViewerActivity, "is muted: $it'", Toast.LENGTH_LONG).show()
                }
            }
        },
        configuration = ...
        ....
)

Moved the list updating task to a background thread

Moved the list updating task to a background thread not to block Main thread(UI) in case of the list being large enough to block Main(UI) Thread.

Added mute/unmute to PXLPhotoView, PXLPhotoProductView and PXLPhotoRecyclerView

PXLPhotoView, PXLPhotoProductView, and PXLPhotoRecyclerView now can dynamically mute unmute the sound of videos with .mute() and .unmute() methods. Please check out the document.

Fixed a bug in using ImageScaleType in ListHeader.Gif

Fixed a bug in using ImageScaleType.FIT_CENTER and ImageScaleType.CENTER_CROP in ListHeader.Gif

• ImageScaleType was always fit_center. but it is now fixed.

Added an extra option of displaying a gif to the header of PXLPhotoRecyclerViewInGrid

Changed an enum class's position from PXLPhotoView.ImageScaleType to ImageScaleType because it is now also used in other areas.

Added an extra option of displaying a gif to the header of PXLPhotoRecyclerViewInGrid.

• gif:

listHeader = ListHeader.Gif(url = "https://media.giphy.com/media/dzaUX7CAG0Ihi/giphy.gif", heightInPixel = 200.px.toInt(), imageScaleType = ImageScaleType.FIT_CENTER)

• text:

val top = "PXLEE\nSHOPPERS"
val tv = "\nTV"
val total = top + tv
val spannable = SpannableString(total)

spannable.setSpan(AbsoluteSizeSpan(40.px.toInt()), 0, top.length, 0); // set size
spannable.setSpan(ForegroundColorSpan(Color.BLACK), 0, top.length, 0);// set color

total.indexOf(tv).let { tvLocatedAt ->
    spannable.setSpan(AbsoluteSizeSpan(20.px.toInt()), tvLocatedAt, tvLocatedAt + tv.length, 0); // set size
    spannable.setSpan(ForegroundColorSpan(Color.BLACK), tvLocatedAt, tvLocatedAt + tv.length, 0);// set color
}

val padding = 20.px.toInt()
listHeader = ListHeader.SpannableText(spannable = spannable,
        padding = TextPadding(left = padding, top = padding, right = padding, bottom = padding))

Fix a crash-bug

when trying to load data in PXLPhotoRecyclerView the app crashed. This version fixes this problem.