Comment on page
Migrate From v5
Firework Android SDK v6 is a ground-up re-built version of our Android SDK and thus not an incremental version of v5. This new version brings an improved video watching experience and seamless integration with a similar set of features for running short-form shoppable videos and setting up live-stream shopping in your apps. All the future major feature upgrades would be on top of v6. So it is mandatory to migrate if you want to make use of all the latest features being introduced. This guide will help you upgrade with ease.
Please discuss this with your Firework point of contact before deciding to go ahead with the migration.
Last Updated July 19, 2023
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(Agora) | ❌ | ✅ |
Low Latency Livestream | ❌ | ✅ |
Retail Media Network (RMN) Ad support | ❌ | ✅ |
Interstitial Ima Ad support | ❌ | ✅ |
Interstitial FWAI Ad support | ❌ | ✅ |
In-App Language Switching | ✅ | ✅ |
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 1 of the below image loading related depedencies can be added.
// Glide Impl (Optional)
implementation 'com.firework.external.imageloading:glide:$fireworkSdkVersion'
// Picasso Impl (Optional)
implementation 'com.firework.external.imageloading:picasso:$fireworkSdkVersion'
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" />
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)
.checksumRequired(false)
.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
}
}
},
)
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.
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 detailsNotable changes in v6 for Video Feed Configurations compared to v5 are:
- 1.Display/Hide the Video Title(Caption) - change from
app:showTitle="true"
toapp: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
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
propertiesAdd 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>
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.
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()
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 idval caption: String, // content caption (title)val duration: Double, // duration in secondsval badge: String?, // text of the video badgeval playerHeight: Int?, // content widthval playerWidth: Int?, // content heightval hasCta: Boolean, // true if the video has "call to aciton" buttonval isAd: Boolean // true if the video is an Ad videoval hashtags: List<String>, // Hashtags list added to the videoval feedType: String, // The feed resource typeval channelId: String? // Channel ID if the feed resource has oneval 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
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
Last modified 4mo ago