Migrate From v5

Why should you Migrate?

Firework Android SDK v5 is no longer supported and has been deprecated. The new version, v6, is a complete rebuild of our Android SDK and not just an update of v5. With v6, you can enjoy an improved video-watching experience and seamless integration of short-form shoppable videos and live-stream shopping features in your apps. All future major feature upgrades will be on top of v6. Therefore, it is essential to migrate to v6 if you want to utilize all the latest features being introduced. This guide offers you a step-by-step process to help you upgrade with ease.

Please discuss this with your Firework point of contact before deciding to go ahead with the migration.

Feature Comparison with V5

Last Updated April 2, 2024

Features	v5	v6
Discover Feed	✓	✓
Channel Feed	✓	✓
Playlist Feed	✓	✓
Playlist Group Feed	✓	Coming Soon
Dynamic Content	✓	✓
Hashtag Feed	✕	✓
SKU Feed	✕	✓
Horizontal/Vertical/Grid Layouts	✓	✓
CTA button on Videos	✓	✓
CTA button click handler and listener	✓	✓
Shoppable Videos (Product Cards & Shopping experience	✓	✓
Video Analytics Events listener	✓	✓
Share button click listener	✓	✓
Feed item click listener	✓	✓
Video Player configurations	✓	✓
Share and Deep-link mechanism	✓	✓
AutoPlay in Feed and its configuration	✓	✓
Livestream	✓	✓
IMA Ads	✓	✓
FWAI Ads	✓	✓
Storyblock	✓	✓
Picture in Picture(Outside App)	✕	✓
Picture in Picture(Inside App)	✕	✓
MultiHost Livestream (Low Latency)	✕	✓
Retail Media Network (RMN) Ad support	✕	✓
Interstitial Ima Ad support	✕	✓
Interstitial FWAI Ad support	✕	✓
In-App Language Switching	✓	✓
Digital Showroom	✕	✓

Migration Steps

1. Update Dependencies

The new SDK is available in maven central so you have to add mavenCentral() in your repositories, and you can remove the v5 Jitpack repository.

Remove the below dependencies from build.gradle

implementation 'com.github.loopsocial:firework_sdk:{sdk_version}' 
    
implementation 'com.github.loopsocial:AndroidAdsService:v20.0.0'
//or
implementation 'com.github.loopsocial:AndroidAdsService:v19.5.0'
//or
implementation 'com.github.loopsocial:AndroidAdsService:v19.8.0'

Add the following

def fireworkSdkVersion = "latest_firework_sdk_version"

implementation 'com.firework:sdk:$fireworkSdkVersion'

// Only for single host (Optional)
implementation 'com.firework.external.livestream:singleHostPlayer:$fireworkSdkVersion'

// Only for multi host (Optional)
implementation 'com.firework.external.livestream:multiHostPlayer:$fireworkSdkVersion'

// Either one of the below image loading related depedencies can be added.
// Glide (Optional)
implementation 'com.firework.external.imageloading:glide:$fireworkSdkVersion'

// Picasso (Optional)
implementation 'com.firework.external.imageloading:picasso:$fireworkSdkVersion'

Learn more about dependencies of v6

2. Android Manifest Changes

Remove the following activity from AndroidManifest.xml file as it is no longer required in v6.

//Activity needed for video playback
<activity android:name="com.loopnow.fireworklibrary.PlaybackActivity" />

In v5, If you enabled adding checksum to data reporting by adding the following snippet to AndroidManifest.xml, you can remove it. Enabling check sum is now part of SDK initialization which can be found in the next step.

<meta-data android:name="Firework:Checksum" android:value="true" />

3. SDK Initialization Changes

Remove the below initialization code required for v5, which must be added in your app's application class

FwSDK.initialize(this, clientId, userId, object : FwSDK.SdkStatusListener {
    override fun currentStatus(status: SdkStatus, extra: String) {
        Log.v("SdkStatusLog", "$status   -> $extra " )
        when(status) {
            SdkStatus.Initialized -> {
                Log.v("SdkStatusLog","Firework SDK Initialized");
            }
        }
    }
})

Instead, Initialize our v6 SDK as below in the onCreate() of Application class

// build Firework Android SDK configuration
        val config = FireworkSdkConfig.Builder(this)
            .clientId(FW_CLIENT_ID) // Client OAUTH Id
            .userId("example app user ID") // User Id in your eco-system
            .imageLoader(GlideImageLoaderFactory.createInstance()) // glide, picasso, or your ImageLoader implementation
            .enableCache(true) // Enable or disable video players cache, enabled by default
            .maxCacheSizeBytes(MAX_CACHE_SIZE_BYTES) // Max cache size used by video players, 25MB by default
            .muteOnLaunch(true) // Mute videos on lauch
            .addLivestreamPlayerInitializer(SingleHostLivestreamPlayerInitializer()) // For single-host livestream use
            .addLivestreamPlayerInitializer(MultiHostLivestreamPlayerInitializer()) // For multi-host livestream use
            .build()
        
        // initialize Firework Android SDK v6
        FireworkSdk.init(
            fireworkSdkConfig = config,
            onSuccess = {
                // Initialization was successful
            },
            onError = { error ->
                when (error) {
                    is FireworkInitError.InitializationError -> {
                        // Handle initialization error
                    }
                }
            },
        )

4. Updating Video Feed Layout Components

Update the video feed view component used in layout files. Change the following used in v5

<com.loopnow.fireworklibrary.views.VideoFeedView
            android:id="@+id/integrated_videofeed"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:feedLayout="grid" 
            app:feedType="discover"/>

To below VideoFeedView for v6

<com.firework.videofeed.FwVideoFeedView
        android:id="@+id/videoFeedView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:fw_columns="3"
        app:fw_feedLayout="grid"
        app:fw_feedResource="discovery"/>

Similarly, refer to the relevant pages for other types of feed layouts in v6.

5. Video Feed Configurations

In v6, video feed configurations can be done as attributes in FWVideoFeedView in XML layout or using ViewOptions builder in Java/Kotlin Classes. Refer below page for more details

Notable changes in v6 for Video Feed Configurations compared to v5 are:

1. Display/Hide the Video Title(Caption) - change from app:showTitle="true" to app:fw_showFeedTitle="true"

2. Update feed title position to app:fw_feedTitlePosition

3. Styling the title text is not using a style defined in the themes file. Instead, it can be configured using attributes for the VideoFeedView as defined in above linked page

4. Styling the thumbnail image style for corner radius is also now using attributes in FwVideoFeedView instead of style definition in the theme file

5. Fully Custom Feed Layouts are not supported currently in v6, but we provide more ways to customize it compared to v5.

6. New Feed Configurations available in v6

   1. Column Count for Grid View

   2. Feed Background Color

   3. Item Spacing for spacing between feed items

   4. Enable or Disable Ads on Backward Swipe

   5. Number of lines of the title text

   6. Display or Hide Play icon on thumbnails

   7. Ad badge background color

   8. Ad badge text color

   9. Ad Label

pageConfigure Video Feed

6. Video Player

All the Video player properties supported in v5 are also supported in v6. But the implementation is a bit different as it is along with FwVideoFeedView properties.

So you will need to remove the VideoPlayerProperties initialization part of v5 and then add the configuration using view properties. Refer to the specifics of each Video Player Property as documented in the below link for v6.

Another change is that ad badge styling(done as style definitions in v5) can also be defined using FwVideoFeedView properties

pageVideo Player

Add to Cart Button styling in v6 is as follows

<resources xmlns:tools="http://schemas.android.com/tools"> 
   
   <style name="FwShoppingAddToCartButtonStyle" parent="Widget.MaterialComponents.Button.TextButton">
           <item name="android:backgroundTint">@color/white</item>
           <item name="android:textColor">@color/blue</item>
           <item name="android:textSize">@dimen/16sp</item>
           <item name="android:theme">@style/Theme.MaterialComponents.Light</item>
           <item name="shapeAppearanceOverlay">@style/FwBayaAddToCartButtonShapeAppearance</item>
   </style>
   
   <style name="FwShoppingAddToCartButtonShapeAppearance">
           <item name="cornerFamily">rounded</item>
           <item name="cornerSizeTopLeft">6dp</item>
           <item name="cornerSizeBottomLeft">6dp</item> 
           <item name="cornerSizeBottomRight">6dp</item>
           <item name="cornerSizeTopRight">6dp</item>
   </style>
   
</resources>

Add to CTA Button styling in v6 is as follows

<resources xmlns:tools="http://schemas.android.com/tools"> 
   
        <style name="FwCtaButtonStyle" parent="FwCtaButtonParentStyle">
             <item name="android:backgroundTint">@color/fw_cta_bg_bluelake</item>
             <item name="android:textColor">@color/white</item>
             <item name="android:fontFamily">sans-serif</item>
             <item name="shapeAppearanceOverlay">@style/FwCtaButtonShapeAppearance</item>
        </style>
   
     <style name="FwCtaButtonShapeAppearance">
          <item name="cornerFamily">rounded</item>
          <item name="cornerSize">@dimen/fw_cta__button_size_half</item>
     </style>
   
</resources>

7. CTA Click Handling

If CTA click handler is not implemented by the host application, the default behaviour in v6 is to open the link in the default browser of the device, while in v5 it will open in a webview within the app.

Refer this page for implementation of CTA click handler in v6.

If you have implemented CTA click handling in v5, you can remove the below handler

//Return true if you have handled the event and do not want SDK to handle it and false when you want SDK to handle the  ctaClicked event. 
FwSDK.ctaClickHandler  = object : FwSDK.CtaClickHandler {
        override fun ctaClicked(label: String, actionUrl: String?): Boolean {
            return true
        }
    }

and instead, add the below handler and copy the custom navigation logic within this. Refer to below code.

@FwAnalyticCallable
fun onCtaButtonClicked(event: CtaButtonClickAnalyticsEvent) {
    Log.i("fw-analytics-cta", event.label + " " + event.actionUrl)
}

val playerOptions = PlayerOption.Builder()
    .sdkHandleCtaButtonClick(true) // This value here determines whether the SDK should handle the CTA click or not
    .build()
    
ViewOptions
        .Builder()
        .playerOption(playerOptions)
        .ctaOption(ctaOptions)
        .build()

8. Analytics - Event Listener Updates

We have improved analytics events coverage in v6 though there are differences in the way it is implemented. Refer the analytics page below for detailed information.

v5 Event	v6 Equivalent
video-impression	No separate event for this, but can be recorded based on other events like OnPlayingChanged or OnPrepared or OnProgress
video-start	OnStarted
video-first-quartile	OnFirstQuartile
video-midpoint	OnSecondQuartile
video-third-quartile	OnThirdQuartile
video-complete	OnEnded
video-session-end	OnEnded
video-ad-start	First **** trigger of OnProgress with isAd boolean true in event data
video-ad-end	OnEnded event with isAd = true in event data
video-click-cta	This can be logged in CtaButtonClickHandler **** as all the required data is provided along with feedElementAnalyticsData
videoShare	This can be logged in ShareButtonClickListener **** as all the required data is provided along with feedElementAnalyticsData
videoStartError	OnError
videoAdStartError	OnError with isAd = true

The event data is different from v5 and it provides the following values as part of VideoInfo object

• val id: String, // content id
  val caption: String, // content caption (title)
  val duration: Double, // duration in seconds
  val badge: String?, // text of the video badge
  val playerHeight: Int?, // content width
  val playerWidth: Int?, // content height
  val hasCta: Boolean, // true if the video has "call to aciton" button
  val isAd: Boolean // true if the video is an Ad video
  val hashtags: List<String>, // Hashtags list added to the video
  val feedType: String, // The feed resource type
  val channelId: String? // Channel ID if the feed resource has one
  val playlistId: String? // Playlist ID if the feed resource has one

Progress is not part of event data in v6, but triggered as a separate event every 1000 milliseconds

9. Updating Shopping Interfaces

Shopping Interfaces in v6 are much more advanced and you can customize the Shopping cart behaviour too. If you have currently implemented Shopping interfaces in v5, you can go ahead and remove the Baya.cartInterface and Baya.productInterface implementations first while saving the product hydration or cart update logic for your app. This will be needed for adding to the new interfaces provided in v6.

Refer to the below page for detailed implementation information on Shoppable videos on v6