Configure Video Feed

Video Feed integration

You need to add the FwVideoFeedView to your layout XML file

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <!-- All custom app attributes are optional here -->
    <!-- You can remove all of them and let the widget use the default values -->
    <!-- Or set them programmatically -->
    <!-- Keep in mind if you use the Channel feedType then you must provide ChannelId too -->
    <!-- Keep in mind if you use the Playlist feedType then you must provide ChannelId and PlaylistId too -->
    <com.firework.videofeed.FwVideoFeedView
        android:id="@+id/videoFeedView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:fw_adBadgeBackgroundColor="#FFFECD"
        app:fw_adBadgeIsHidden="false"
        app:fw_adBadgeLabel="sponsored"
        app:fw_adBadgeShowOnThumbnails="true"
        app:fw_adBadgeTextColor="#000000"
        app:fw_adBadgeTextTypeface="@font/roboto"
        app:fw_backColor="@color/white"
        app:fw_channelId="Your encoded channel Id"
        app:fw_columns="3"
        app:fw_feedAutoplay="true"
        app:fw_feedLayout="grid"
        app:fw_feedResource="discovery"
        app:fw_feedTitleBackgroundColor="@color/purple_transparent"
        app:fw_feedTitlePosition="nested"
        app:fw_feedTitleTextColor="@color/black"
        app:fw_feedTitleTextNumberOfLines="1"
        app:fw_feedTitleTextPadding="4dp"
        app:fw_feedTitleTextSize="12sp"
        app:fw_feedTitleTextTypeface="@font/roboto"
        app:fw_itemSpacing="4dp"
        app:fw_playIconWidth="24dp"
        app:fw_playerMode="fit_mode"
        app:fw_roundedCorner="true"
        app:fw_roundedCornerRadius="16dp"
        app:fw_playlistId="Your encoded playlist Id"
        app:fw_showFeedTitle="true"
        app:fw_showPlayIcon="true"
        app:fw_showFireworkLogo="true"
        />
</androidx.constraintlayout.widget.ConstraintLayout>

Later on your Activity's onCreate or your Fragment's onViewCreated find and initialize the FwVideoFeedView:

Kotlin

// You can create a view options with your custom parameters or ignore this step if you already have them in your layout
// Also creating ViewOptions is not mandatory and you can let the widget use its default values

val viewOptions = viewOptions {
    baseOptions {
        feedResource(
            FeedResource.Discovery, // It also can be Channel and Playlist
        )
    }
    layoutOptions {
        feedLayout(FeedLayout.GRID)
        columnCount(3)
        backgroundColor(Color.BLACK)
        feedTitlePosition(FeedTitlePosition.NESTED) // It also can be STACKED
        itemSpacing(4.dp)
        playIconWidth(24.dp)
        roundedCorner(true)
        roundedCornerRadius(16.dp)
        showPlayIcon(true)
    }
    adBadgeOptions {
        adBadgeBackColor(Color.BLUE)
        adBadgeIsHidden(false)
        adBadgeLabel(AdBadgeTextType.SPONSORED)
        adBadgeShowOnThumbnails(true)
        adBadgeTextColor(Color.WHITE)
        adBadgeTypeface(Typeface.SANS_SERIF) // You can use the Typeface of your choice
    }
    titleOptions {
        feedTitleBackgroundColor(Color.TRANSPARENT)
        feedTitleBackgroundDrawable(
            GradientDrawable(
                GradientDrawable.Orientation.TOP_BOTTOM,
                arrayOf(Color.BLUE, Color.CYAN, Color.MAGENTA).toIntArray()
            ),
        )
        feedTitleTextColor(Color.WHITE)
        feedTitleTextNumberOfLines(1)
        feedTitleTextPadding(4.dp)
        feedTitleTextSize(12.dp)
        feedTitleTextTypeface(Typeface.SANS_SERIF) // You can use the Typeface of your choice
        showFeedTitle(true)
    }
    playerOptions {
        autoplay(true)
        playerMode(PlayerMode.FIT_MODE)
        showFireworkLogo(true)
        shareBaseUrl("https://your-business.com") // shareBaseUrl is an optional parameter.
    }
}

val videoFeedView = findViewById<FwVideoFeedView>(R.id.videoFeedView)

// init video feed view with view options
// videoFeedView.init(viewOptions)

// or without view options
videoFeedView.init()

Java

// You can create a view options with your custom parameters or ignore this step if you already have them in your layout
// Also creating ViewOptions is not mandatory and you can let the widget use its default values
     
     BaseOption baseOption = new BaseOption.Builder()
                .feedResource(new FeedResource.Playlist("Encoded Channel ID","Encoded Playlist Id"))
                .build();

        LayoutOption layoutOption = new LayoutOption.Builder()
                .feedLayout(FeedLayout.HORIZONTAL)
                .columnCount(3)
                .backgroundColor(Color.BLACK)
                .feedTitlePosition(FeedTitlePosition.NESTED) // It also can be STACKED
                .itemSpacing(4)
                .playIconWidth(24)
                .roundedCorner(true)
                .roundedCornerRadius(16)
                .showPlayIcon(true)
                .build();

        AdBadgeOption adBadgeOptions = new AdBadgeOption.Builder()
                .adBadgeBackColor(Color.BLUE)
                .adBadgeIsHidden(false)
                .adBadgeLabel(AdBadgeTextType.SPONSORED)
                .adBadgeShowOnThumbnails(true)
                .adBadgeTextColor(Color.WHITE)
                .adBadgeTypeface(Typeface.SANS_SERIF) // You can use the Typeface of your choice
                .build();


        TitleOption titleOptions = new TitleOption.Builder()
                .feedTitleBackgroundColor(Color.TRANSPARENT)
                .feedTitleBackgroundDrawable(
                    new GradientDrawable(
                            GradientDrawable.Orientation.TOP_BOTTOM,
                            IntStream.of(Color.BLUE, Color.CYAN, Color.MAGENTA).toArray()))
                .feedTitleTextColor(Color.WHITE)
                .feedTitleTextNumberOfLines(1)
                .feedTitleTextPadding(4)
                .feedTitleTextSize(12)
                .feedTitleTextTypeface(Typeface.SANS_SERIF) // You can use the Typeface of your choice
                .showFeedTitle(true)
                .build();

        PlayerOption playerOptions = new PlayerOption.Builder()
                .autoplay(true)
                .playerMode(PlayerMode.FIT_MODE)
                .showFireworkLogo(true)
                .shareBaseUrl("https://your-business.com") // shareBaseUrl is an optional parameter.
                .build();

        ViewOptions viewOptions = new ViewOptions.Builder()
                .baseOption(baseOption)
                .layoutOption(layoutOption)
                .adBadgeOption(adBadgeOptions)
                .playerOption(playerOptions)
                .titleOption(titleOptions)
                .build();

        videoFeed.init(viewOptions);
        
// init video feed view with view options
        videoFeedView.init(viewOptions);

// or without view options
        videoFeedView.init(null);
        
// after video feed view is not needed anymore it should be destroyed
@Override
protected void onDestroy() {
    videoFeedView.destroy();
    super.onDestroy();
}

After FwVideoFeedView is not needed anymore it should be destroyed. Call videoFeedView.destroy() to clean up all resources related to the instance of FwVideoFeedView. If FwVideoFeedView is used inside a fragment, it should be destroyed in fragment's onDestroyView() lifecycle callback:

Kotlin

MyFragment: Fragment() {
   ... 
   override fun onDestroyView() {
     videoFeedView.destroy()
     super.onDestroyView()
   }
}

Java

@Override
public void onDestroyView() {
    videoFeedView.destroy();
    super.onDestroyView();
}

If FwVideoFeedView is used inside an Activity it should be destroyed in activity's onDestroy() lifecycle callback:

Kotlin

MyActivity: Activity() {
   ... 
   override fun onDestroy() {
     videoFeedView.destroy()
     super.onDestroy()
   }
}

Java

// after video feed view is not needed anymore it should be destroyed
    @Override
    protected void onDestroy() {
        videoFeedView.destroy();
        super.onDestroy();
    }

FwLifecycleAwareVideoFeedView (Deprecated, please use FwVideoFeedView instead)

Is a wrapper around the FwVideoFeedView which accepts lifecycle object in its init() function. This allows to clean up all the resources related to underlaying FwVideoFeedView automatically without calling destroy() function. This is convenient when activity or fragment does not hold the reference to FwVideoFeedView(ex. when FwVideoFeedView is used as an item inside RecyclerView.

Kotlin

class MyActivity: Activity() {
    private lateinit var lifecycleAwareViewFeedView: FwLifecycleAwareVideoFeedView
    
    override fun onCreate() {
        ...
        lifecycleAwareViewFeedView.init(viewOptions, lifecycle)
    }
    
    override fun onDestroy() {
        // No need to destroy lifecycleAwareViewFeedView
        super.onDestroy()
    }
}

Java

public class MyActivity extends Activity {
    private FwLifecycleAwareVideoFeedView lifecycleAwareViewFeedView;
    
   @Override
    protected void onCreate(Bundle savedInstanceState) {
        ...
        lifecycleAwareViewFeedView.init(viewOptions, getLifecycle());
    }
    
    @Override
    protected void onDestroy() {
        // No need to destroy lifecycleAwareViewFeedView
        super.onDestroy();
    }
}

Video Feed options

Feed resource

In this table, you can check the different states of the state machine of the Feed type and its parameters.

✅ Means correct value

❌ Means invalid value or empty value

Feed Resource Type	ChannelId	PlaylistId	Result
Discovery	✅	✅	Discovery feed
Discovery	✅	❌	Discovery feed
Discovery	❌	✅	Discovery feed
Discovery	❌	❌	Discovery feed
Channel	✅	✅	Channel feed
Channel	✅	❌	Channel feed
Channel	❌	✅	Server returns an empty feed
Channel	❌	❌	Server returns an empty feed
Playlist	✅	✅	Playlist feed
Playlist	❌	✅	Server returns an empty feed
Playlist	✅	❌	Server returns an empty feed
Playlist	❌	❌	Server returns an empty feed

Feed autoplay

This value determines if the first complete visible item of the feed shows as a video instead of a static thumbnail.

Feed Layout

Feed layout is the way that Firework Android SDK shows video feeds to the user.

• FeedLayout.HORIZONTAL: Shows video feeds as a horizontal list (default value)

• FeedLayout.GRID: Shows video feeds as a grid layout

• FeedLayout.VERTICAL: Shows video feeds as a vertical list

Column count

Using this parameter you can set the number of columns in a grid layout FeedLayout.GRID. (default value is 1)

Background color

This is the background color of the video feed view. (default value is transparent)

Item spacing

This value determines the space between items in the list. (default value is 8dp)

Rounded corner

This value determines whether the video feed view should round the corner of the items in the video feeds or not. (default value is false)

Rounded corner radius

This value specifies the radius of the rounded corner if you set the rounded corner. (default value is 5dp)

Show feed title

This value is being used to show the title of each video item or not. (default value is false)

Feed title text typeface

You can change the font of video titles in feed, this can be the typeface of your choice, by default it uses Typeface.Default.

Feed title position

This position defines where the video titles are displayed.

• FeedTitlePosition.NESTED: Shows the video titles over the bottom part of the video thumbnail.

• FeedTitlePosition.STACKED: Shows the video title below the thumbnail.

Feed title text color

The color of the video title. (default value is #80000000)

Feed title text number of lines

Number of lines of the video feed title. (default value is 2)

Feed title text padding

Padding of the feed title. (default value is 8dp)

Feed title text size

Feed title text size. (default value is 14sp)

Feed title background color

This is the background color of the feed title view, this applies to NESTED and STACKED feed title positions.

Feed title background drawable

This accepts a GradientDrawable and it will be shown as the background of feed titles, this applies to NESTED and STACKED feed title positions, Note: This background will get priority over Feed title background color

Player Mode

Determines the player mode and can be one of

• PlayerMode.FIT_MODE: This state causes the player surface cuts into a smaller area of the screen while it maintains the 9:16 aspect ratio. Also, it makes the corner of the player rounded. (default value)

• PlayerMode.FULL_BLEED_MODE: This state causes the player surface to fill the mobile screen without rounding the corner of the screen, Also player maintains the 9:16 aspect ratio of the player.

Show play icon

This value determines whether the video feed view shows a play icon in the center of the feed item or not. (default value is false)

Play icon width

This value determines the width of the play icon shown on top of video feed thumbnails.

Ad badge background color

These values specify the color of the background of the ad badge on the top right corner of the ad videos. (default value is Transparent)

Ad badge is hidden

This value determines wheter the ad label is visible or not in player.

Ad badge is show on thumbnails

This value determines wheter the ad label is visible or not in FwVideoFeedView.

Ad badge text typeface

You can change the font of ad badge, this can be the typeface of your choice, by default it uses Typeface.Default.

Ad badge text color

These values specify the color of the text of the ad badge on the top right corner of the ad videos. (default value is White)

Ad badge label

The text is being shown on the ad badge view in the top right corner of the ad videos. It has two static options:

• Sponsored (default value)

• Ad

Show Firework Logo

This value determines if the firework logo is shown in player.

Feed item click listener

To track clicks on the feed item use setOnFeedItemClickListener function of the FwVideoFeedView class. Only one listener can be set per FwVideoFeedView instance.

Kotlin

videoFeedView.setOnFeedItemClickListener(object: FeedItemClickListener {
                override fun onItemClicked(feedItem: FeedItemClickListener.FeedItem) {
                   // Handle click here
                }
            })
        }

Java

videoFeedView.setOnFeedItemClickListener(new FeedItemClickListener() {
    @Override
    public void onItemClicked(@NonNull FeedItem feedItem) {
        // Handle click here
    }
});

Share Base Url

Check Video Deep Linking section to learn more about custom share base URL.

Share & Video Deep linking

Video feed error listener

To receive any errors that may happen in the video feed, use the setOnErrorListener function of the FwVideoFeedView class. Only one listener can be set per FwVideoFeedView instance.

Kotlin

videoFeedView.setOnErrorListener { error ->
    // Handle video feed error here
}

Java

  videoFeedView.setOnErrorListener(new FwErrorListener() {
            @Override
            public void onFwError(FwError fwError) {
                // Handle video feed error here
            }
   });

The possible error types are:

// Video feed related errors
sealed interface VideoFeedError : FwError {

    object LoadingFailed : VideoFeedError
}

// Ad related errors
sealed interface AdsError : FwError {
    data class VideoLoadFailed(val videoId: String) : AdsError
    data class PlaybackFailed(val message: String) : AdsError
    object ImaAdFailed : AdsError
}

// Livestream related errors
sealed interface LivestreamError : FwError {
    object MissingLivestreamInitializer : LivestreamError
    object EngineFailed : LivestreamError
}

// Share related errors
sealed interface ShareContentError : FwError {
    object EmptyShareUrl : ShareContentError
    object SharingFailed : ShareContentError
}

Refresh video feed view

Call the videoFeedView.refresh() function to refresh the content of FwVideoFeedView.

Monitor and respond to state changes in the video feed

The setOnFeedViewStateListener() method in FwVideoFeedView allows you to monitor and respond to state changes in the video feed. This method provides real-time feedback about the feed's loading status, content availability, and error conditions.

fun setOnFeedViewStateListener(feedViewStateListener: FeedViewStateListener)

Parameters

• feedViewStateListener (FeedViewStateListener): A listener interface that receives feed state change notifications

FeedViewStateListener Interface

fun interface FeedViewStateListener {
    fun onLoadStateChanged(feedViewState: FeedViewState)
}

FeedViewState Types

The FeedViewState is a sealed interface with the following possible states:

1. Loading

• Description: The feed is currently loading content

• Usage: Show loading indicators or progress bars

• Example:

  is FeedViewState.Loading -> {
      binding.progressBar.isVisible = true
      binding.emptyStateView.isVisible = false
  }

2. LoadData

• Description: Data has been successfully loaded and is available

• Usage: Hide loading indicators, display content

• Example:

  is FeedViewState.LoadData -> {
      binding.progressBar.isVisible = false
      binding.swipeRefreshLayout.isRefreshing = false
  }

3. EmptyFeed

• Description: The feed has no content to display

• Usage: Show empty state messages or call-to-action

• Example:

  is FeedViewState.EmptyFeed -> {
      binding.progressBar.isVisible = false
      binding.emptyStateView.isVisible = true
      binding.emptyStateView.text = "No videos available"
  }

4. EndOfFeed

• Description: User has reached the end of available content

• Usage: Show end-of-feed messages or load more content

• Example:

  is FeedViewState.EndOfFeed -> {
      binding.progressBar.isVisible = false
      binding.endOfFeedView.isVisible = true
      Toast.makeText(context, "You've reached the end", Toast.LENGTH_SHORT).show()
  }

5. Error

• Description: An error occurred while loading feed content

• Properties: message: String - Error description

• Usage: Display error messages and provide retry options

• Example:

  is FeedViewState.Error -> {
      binding.progressBar.isVisible = false
      binding.errorView.isVisible = true
      binding.errorView.text = "Error: ${feedViewState.message}"
  }

Usage Examples

Basic Implementation

binding.videoFeedView.setOnFeedViewStateListener { feedViewState ->
    when (feedViewState) {
        is FeedViewState.Loading -> {
            // Show loading state
            binding.progressBar.isVisible = true
            binding.emptyStateView.isVisible = false
            binding.errorView.isVisible = false
        }
        is FeedViewState.LoadData -> {
            // Hide loading, show content
            binding.progressBar.isVisible = false
            binding.swipeRefreshLayout.isRefreshing = false
        }
        is FeedViewState.EmptyFeed -> {
            // Show empty state
            binding.progressBar.isVisible = false
            binding.emptyStateView.isVisible = true
            binding.emptyStateView.text = "No videos available"
        }
        is FeedViewState.EndOfFeed -> {
            // Show end of feed
            binding.progressBar.isVisible = false
            binding.swipeRefreshLayout.isRefreshing = false
            Toast.makeText(context, "End of feed reached", Toast.LENGTH_SHORT).show()
        }
        is FeedViewState.Error -> {
            // Show error state
            binding.progressBar.isVisible = false
            binding.errorView.isVisible = true
            binding.errorView.text = "Error: ${feedViewState.message}"
        }
    }
}