BlazeMomentsPlayerStyle - React Native

The BlazeMomentsPlayerStyle class represents the style configuration for moments.

Properties

headingText

headingText?: BlazeMomentsPlayerHeadingTextStyle

The heading text style for the moment.

bodyText

bodyText?: BlazeMomentsPlayerBodyTextStyle

The body text style for the moment.

buttons

buttons?: BlazeMomentsPlayerButtonsStyle

The buttons style for the moments.

chips

chips?: BlazeMomentsPlayerChipsStyle

The chips style for the moments.

backgroundColor

backgroundColor?: string

The background color of the moments player's view.

cta

cta?: BlazeMomentsPlayerCtaStyle

The CTA (Call to Action) button style for the moments.

headerGradient

headerGradient?: BlazeMomentsPlayerHeaderGradientStyle

The gradient style for the header moments view.

footerGradient

footerGradient?: BlazeMomentsPlayerFooterGradientStyle

The gradient style for the footer moments view.

firstTimeSlide

firstTimeSlide?: BlazeMomentsPlayerFirstTimeSlideStyle

The style configuration for the first-time slide screen.

seekBar

seekBar?: BlazeMomentsPlayerSeekBarStyle

The seek bar style configuration for the moments player.

bottomComponentsAlignment

bottomComponentsAlignment?: BlazeMomentsPlayerBottomComponentsAlignment

Defining the positioning style of a CTA and the other footer elements inside the player.

playerDisplayMode

playerDisplayMode?: BlazePlayerDisplayMode

Defining the display mode of the player.

captions

captions?: BlazeCaptionsStyle

The style of the closed-captions text shown over the player: its font and its position on screen.

To style or hide the CC toggle button instead, use buttons.captions. Read more here.

BlazeCaptionsStyle

Value	Description
font	The `BlazeFont` of the caption text.
textSize	The caption text size, in sp. Android only — on iOS the size is part of `font`, so this field has no effect there.
positioning	The on-screen position of the captions box. See `BlazeCaptionsPositioning` below.

BlazeCaptionsPositioning

Value	Description
xPosition	Horizontal position of the captions box: `Start`, `Center`, or `Custom`. Use `Custom` together with `xOffsetPercent`. The default is `Start`.
xOffsetPercent	Offset from the leading edge, as a percentage of the player width, clamped to 0-100. Used only when `xPosition` is `Custom`.
yPosition	Vertical position of the captions box: `Top`, `Center`, `Bottom`, or `Custom`. Use `Custom` together with `yOffsetPercent`. The default is `Top`.
yOffsetPercent	Offset from the top edge, as a percentage of the player height, clamped to 0-100. Used only when `yPosition` is `Custom`.

BlazeBottomComponentsAlignment

Value	Description
RELATIVE_TO_CONTAINER	Indicates that the CTA and the rest of the elements will be placed relative to the screen's bottom anchor.
RELATIVE_TO_PLAYER	Indicates that the CTA and the rest of the elements will be placed relative to the player's bottom anchor.
FIT_CTA_BELOW_PLAYER	Indicates that the CTA will try to fit in the space between the player and the bottom of the screen. If there's no space it will fallback to `RELATIVE_TO_PLAYER`. In both cases the rest of the elements will be placed relative to the player's bottom anchor.

BlazePlayerDisplayMode

Value	Description
`FIXED_RATIO_9_16`	Maintains the video's original 9:16 aspect ratio, fitting it within the container. This may result in letterboxing if the container's aspect ratio differs.
`RESIZE_ASPECT_FILL_CENTER_CROP`	Expands the video to cover the entire container, cropping excess content as necessary to maintain the aspect ratio, centered within the container.

Initialization

interface BlazeMomentsPlayerStyle {
  headingText?: BlazeMomentsPlayerHeadingTextStyle;
  bodyText?: BlazeMomentsPlayerBodyTextStyle;
  buttons?: BlazeMomentsPlayerButtonsStyle;
  chips?: BlazeMomentsPlayerChipsStyle
  backgroundColor?: string; //Hex
  cta?: BlazeMomentsPlayerCtaStyle;
  headerGradient?: BlazeMomentsPlayerHeaderGradientStyle;
  footerGradient?: BlazeMomentsPlayerFooterGradientStyle;
  firstTimeSlide?: BlazeMomentsPlayerFirstTimeSlideStyle;
  seekBar?: BlazeMomentsPlayerSeekBarStyle;
  bottomComponentsAlignment?: BlazeMomentsPlayerBottomComponentsAlignment;
  playerDisplayMode?: BlazePlayerDisplayMode
  captions?: BlazeCaptionsStyle;
}

Updated 11 days ago

Did this page help you?