Video Player

Video Player Properties
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 while the source video maintains the 9:16 aspect ratio, the visible player fills the screen of the device, thus causing a minimal part of the video cut off in the edges.
Player Mode needs to be configured along with FwVideoFeedView
   <com.firework.videofeed.FwVideoFeedView
        android:id="@+id/videoFeedView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:fw_playerMode="fit_mode"
      />
Alternatively, this can be set as below in the class where ViewOptions are set for the FwideoFeedView
val playerOption = PlayerOption.Builder()
    .playerMode(PlayerMode.FIT_MODE) // Set the player mode 
    .build()
    
val viewOptions = ViewOptions.Builder()
    .playerOption(playerOption)
    .build()
​
val videoFeedView = findViewById<FwVideoFeedView>(R.id.videoFeedView)
videoFeedView.init(viewOptions)
​
Start the next video automatically
Use fw_autoPlayOnComplete attribute of FwVideoFeedView to control if the next video is automatically played after the previous one has ended. When true the player will play the next video after the current video finishes. Whenfalse, playing video will loop until users explicitly swipe away. Default value is true.
    <com.firework.videofeed.FwVideoFeedView
        android:id="@+id/videoFeedView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:fw_autoPlayOnComplete="true"
      />
Alternatively, this attribute can be set via ViewOptions class:
val playerOption = PlayerOption.Builder()
    .autoPlayOnComplete(true)
    .build()
            
val viewOptions = ViewOptions.Builder()
    .playerOption(playerOption)
    .build()
​
val videoFeedView = findViewById<FwVideoFeedView>(R.id.videoFeedView)
videoFeedView.init(viewOptions)
Show/hide play and pause button
Use fw_showPlayPauseButton attribute of FwVideoFeedView to control if the play/pause button is visible in the player. Default value is false.
    <com.firework.videofeed.FwVideoFeedView
        android:id="@+id/videoFeedView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:fw_showPlayPauseButton="true"
      />
Alternatively, this attribute can be set via ViewOptions class:
val playerOption = PlayerOption.Builder()
    .showPlayPauseButton(true)
    .build()
 
val viewOptions = ViewOptions.Builder()
    .playerOption(playerOption)
    .build()
​
val videoFeedView = findViewById<FwVideoFeedView>(R.id.videoFeedView)
videoFeedView.init(viewOptions)
Show/hide the mute and unmute button
Use fw_showMuteButton the attribute FwVideoFeedView to control if the mute/unmute button is visible in the player. DefaultDefault value is false.
    <com.firework.videofeed.FwVideoFeedView
        android:id="@+id/videoFeedView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:fw_showMuteButton="true"
      />
Alternatively, this attribute can be set via ViewOptions class:
val playerOption = PlayerOption.Builder()
    .showMuteButton(true)
    .build()
    
val viewOptions = ViewOptions.Builder()
    .playerOption(playerOption)
    .build()
    
val videoFeedView = findViewById<FwVideoFeedView>(R.id.videoFeedView)
videoFeedView.init(viewOptions)
Enable PIP/Floating player (Picture-in-Picture)
Use fw_enablePipMode the attribute FwVideoFeedView to control if the PIP is enabled for the player. Default value is true.
    <com.firework.videofeed.FwVideoFeedView
        android:id="@+id/videoFeedView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:fw_enablePipMode="true"
      />
Alternatively, this attribute can be set via ViewOptions class:
val playerOption = PlayerOption.Builder()
    .enablePipMode(true)
    .build()
    
val viewOptions = ViewOptions.Builder()
    .playerOption(playerOption)
    .build()
    
val videoFeedView = findViewById<FwVideoFeedView>(R.id.videoFeedView)
videoFeedView.init(viewOptions)
Show/hide Firework logo in the share dialog
Use fw_showFireworkLogo attribute of FwVideoFeedView to control if the share button is visible in the player. The default value is true.
    <com.firework.videofeed.FwVideoFeedView
        android:id="@+id/videoFeedView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:fw_showFireworkLogo="true"
      />
Alternatively, this attribute can be set via ViewOptions class:
val playerOption = PlayerOption.Builder()
    .showFireworkLogo(true)
    .build()
    
val viewOptions = ViewOptions.Builder()
    .playerOption(playerOption)
    .build()
​
val videoFeedView = findViewById<FwVideoFeedView>(R.id.videoFeedView)
videoFeedView.init(viewOptions)
Show/hide share button
Use fw_showShareButton attribute of FwVideoFeedView to control if the share button is visible in the player. Default value is true.
    <com.firework.videofeed.FwVideoFeedView
        android:id="@+id/videoFeedView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:fw_showShareButton="false"
      />
Alternatively, this attribute can be set via ViewOptions class:
val playerOption = PlayerOption.Builder()
    .showShareButton(true)
    .build()
    
val viewOptions = ViewOptions.Builder()
    .playerOption(playerOption)
    .build()
​
val videoFeedView = findViewById<FwVideoFeedView>(R.id.videoFeedView)
videoFeedView.init(viewOptions)
Enable/disable autoplay
Use fw_feedAutoplay attribute of FwVideoFeedView to control if the video feed should use autoplay, this means that the first visible item of the feed will start playing. Default value is false.
    <com.firework.videofeed.FwVideoFeedView
        android:id="@+id/videoFeedView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:fw_feedAutoplay="true"
      />
Alternatively, this attribute can be set via ViewOptions class:
val playerOptions = PlayerOption.Builder()
            .autoplay(true)
            .build()
            
val viewOptions = ViewOptions
            .Builder()
            .playerOption(playerOptions)
            .build()
​
val videoFeedView = findViewById<FwVideoFeedView>(R.id.videoFeedView)
videoFeedView.init(viewOptions)
Custom CTA button visibility delay
CtaDelayUnit.SECONDS: This unit type makes the CTA button become visible at the number of seconds set, this unit type only supports values from 0.0f inclusive to 10.0f inclusive [0.0f, 10.0f], otherwise when trying to play a video it will use 3 seconds default value.
CtaDelayUnit.PERCENTAGE: This unit type makes the CTA button become visible at the percentage set of the video, for example, if the video is 20 seconds and the percentage is set to 0.6f (60%) the CTA button will become visible at 12 seconds, this unit type only supports values from 0.0f inclusive to 1.0f exclusive [0%, 100%), otherwise when trying to play a video it will use 0.2f (20%) default value.
Use fw_ctaButtonDelayUnitType and fw_ctaButtonDelayDuration attribute of VideoFeedView to control the visibility delay of CTA button.
    <com.firework.videofeed.FwVideoFeedView
        android:id="@+id/videoFeedView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:fw_ctaButtonDelayDuration=".5"
        app:fw_ctaButtonDelayUnitType="percentage" />
Alternatively, this attribute can be set via ViewOptions class:
val ctaDelay = CtaDelay(ctaDelayDuration, CtaDelayUnit.SECONDS)
​
val viewOptions = ViewOptions.Builder()
    .ctaButtonDelay(ctaDelay)
    .build()
​
val videoFeedView = findViewById<VideoFeedView>(R.id.videoFeedView)
videoFeedView.init(viewOptions)
Custom CTA button UI
Override FwCtaButtonStyle to modify the appearance of the CTA button:
CTA button background color
CTA button text color
CTA button typeface (Font)
Use android:backgroundTint, android:textColor and android:fontFamily attributes to modify the appearance of the CTA button
<resources>
        <style name="FwCtaButtonStyle">
                <item name="android:backgroundTint">@color/customBackgroundColor</item>
                <item name="android:textColor">@android:color/customTextColor</item>
                <item name="android:fontFamily">@font/customFont</item>
        </style>
</resources>
To override the CTA button shape properties (rounded corners radius for example) declare a separate style and apply it to shapeAppearanceOverlay style attribute:
<resources>
        <style name="FwCtaButtonStyle">
                <item name="shapeAppearanceOverlay">@style/MyCustomCtaButtonShapeStyle</item>
        </style>
        
        <style name="MyCustomCtaButtonShapeStyle">
                <item name="cornerFamily">rounded</item>  <!-- possible values "rounded" and "cut" -->
                <item name="cornerSizeTopLeft">6dp</item>
                <item name="cornerSizeBottomLeft">6dp</item>
                <item name="cornerSizeBottomRight">6dp</item>
                <item name="cornerSizeTopRight">6dp</item>
        </style>
</resources>
Custom Handling of CTA
CtaButtonClickHandler: This handler is called when the CTA button is pressed by the user. If the consumer application implements this Handler and returns true, It means the SDK will not do anything, but if The consumer application does not implement that or implement it and return false at the end, The SDK will open the action URL of the CTA button in a new tab of the default browser of the phone of the user.
val config = FireworkSdkConfig
    .Builder(this)
    .checksumRequired(false)
    .clientId(BuildConfig.FW_CLIENT_ID)
    .userId(BuildConfig.FW_USER_ID)
    .imageLoader(GlideImageLoaderFactory.createInstance())
    .build()
FireworkSdk.init(config)
​
// Make sure to call this after init phase
FireworkSdk.setCtaButtonClickHandler { label, actionUrl, feedElementAnalyticsData ->
    // feedElementAnalyticsData has these values
    // val autoplay: Boolean,
    // val badge: String,
    // val caption: String,
    // val duration: Long,
    // val hashtags: List<String>,
    // val hasCta: Boolean,
    // val height: Int,
    // val width: Int,
    // val videoId: String,
    // val progress: Int,
    // val playlistId: String,
    // val channelId: String,
    // val feedType: String,
    startActivity(context, ProductActivity:class)
    Log.i("XXXX-cta", "$label $actionUrl $feedElementAnalyticsData")
    true
}
Player PIP/Floating player
For managing PIP/Floating player you can use the following functions:
Enter PIP/Floating player
If you want to enter pip mode programmatically, you can call the following function:
FireworkSdk.enterPip(
    { onSuccess ->
        // true if entering PIP was a success
    },
)
Close PIP/Floating player
If you want to close PIP/Floating player for some reason, you can call the following function:
FireworkSdk.closePip()
Shoppable Videos
Storyblock
Last modified 9d ago