Skip to main content

Detail player

The Short Video module provides a detail player as an internal screen (activity) that opens when clicking on a video item. This screen includes a video player with various functions and an overlay data detail. You can navigate between items by swipe up and down gestures or using navigation buttons. The UI and player behavior can be configured when setting up the Grid, Carousel, or Story Block layout.

val gridCfBuilder = ViewConfig.Builder(this)
// Create the detail view config
val detailCfBuilder = DetailViewConfig.Builder(this)
detailCfBuilder.layoutConfig(ShortVideoDetailLayout.createDefaultConfig(this))
detailCfBuilder.playerConfig(PlayerItemConfiguration())
// Set the detail view config
gridCfBuilder.detailViewConfig(detailCfBuilder.build())
shortVideoView.init(gridCfBuilder.build())

The following attributes can be adjusted:

  • Enable/Disable scrolling
  • Item background color
  • Previous button (set to null to hide)
  • Next button (set to null to hide)

Detail Item​

For detail items, you can customize the following UI components/attributes:

  • Video title, duration text view (the layoutGravity attr is ignored)
  • Item's corner radius
  • Seek bar
  • Play/pause, mute, pip, share, close button
  • Video thumbnail scale mode
  • Video scale mode
  • Product item view.

Product list​

A list of products can be attached to a video item, displayed in the main player. Each product item might contain a Shop CTA button that opens the product URL in an external browser (this behavior can be overridden). The product item UI can also be customized.

For product item layout, you can customize the below UI components/attrs:

  • Product title text view (the layoutGravity attr is ignored)
  • Item's corner radius/background
  • Shop CTA text color and icon resource.
  • Shop CTA text content. If set, it will override the remote value.
  • Product thumbnail scale mode

Q&A item​

A Q&A can be attached to a video item and displayed in the detail. Each Q&A item contains a Call to Action (CTA) button that submits an answer. The Q&A item UI can also be customized:

For Q&A item layout, you can customize the below UI components/attrs:

  • CTA button: Text Color, Background Color. Other UI components color will be generated from this CTA button colors

Poll item​

A Poll can be attached to a video item and displayed in the detail. Each Poll item contains a Call to Action (CTA) button that submits an option. The Poll item UI can also be customized:

For Poll item layout, you can customize the below UI components/attrs:

  • CTA button: Text Color, Background Color. Other UI components color will be generated from this CTA button colors

Landscape layout​

By default, the detail player renders the UI according to the orientation of the current user's device. The SDK smoothly transitions between orientation modes, switching from portrait to landscape and vice versa without interrupting the player. However, you can also enforce a fixed orientation (portrait or landscape) using the SDK.

val detailLoCf = ShortVideoDetailLayout.createDefaultConfig(this)
detailLoCf.orientationMode = ShortVideoDetailLayout.OrientationMode.LANDSCAPE

Supported orientation modes

  • AUTO: Automatically adjust the orientation based on the device's orientation.
  • LANDSCAPE: Enforce a landscape orientation.
  • PORTRAIT: Enforce a portrait orientation.

Picture in Picture (PiP)​

The detail player supports playing a video in Picture in Picture (PiP) mode on devices that support PiP (Android 8+). You can disable this feature by hiding the PiP button. When a video is playing in this mode, it will always loop regardless of the player completion action.