Standalone player
This option allows you to trigger at will our stories player, from a button click for example.
Layout
You first need to add our player view within your Activity/Fragment layout:
- XML
- Jetpack Compose
<com.joinstoriessdk.androidsdk.ui.player.StoryPlayer
android:id="@+id/story_player"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="@android:color/white"
android:translationZ="16dp"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
AndroidView(
factory = {
StoryPlayer(it)
},
update = {
it.visibility = View.GONE
it.translationZ = 16f
it.playerBackgroundColor = Color.WHITE
}
)
Visibility is hidden by default, and will be handled by the SDK whenever triggered and stories are loaded.
TranslationZ could be usefull to ensure it will be displayed over your other screen widgets.
Trigger
From your view, you can start the stories fetching and the player display. To do this, you need to call the startPlayer method:
storyPlayer.startPlayer(joinAlias = "<join_alias>", timeout: Int? = 10)
Timeout used for the stories fetching network requests (call and read)
Custom Player
The player can have many option to custom view and behavior
For customisation to be taken into account, you must do this before calling the startPlayer method
Origin Animation
The animation used to show and hide the player. By default, the value is BOTTOM
- Bottom
- Bottom Left
- Bottom Center
- Bottom Right
- Top Left
- Top Right
storyPlayer.animationOrigin = PlayerStandaloneAnimationOrigin.BOTTOM
storyPlayer.animationOrigin = PlayerStandaloneAnimationOrigin.BOTTOM_LEFT
storyPlayer.animationOrigin = PlayerStandaloneAnimationOrigin.BOTTOM_CENTER
storyPlayer.animationOrigin = PlayerStandaloneAnimationOrigin.BOTTOM_RIGHT
storyPlayer.animationOrigin = PlayerStandaloneAnimationOrigin.TOP_LEFT
storyPlayer.animationOrigin = PlayerStandaloneAnimationOrigin.TOP_RIGHT
Player Background Color
Color of the player's background, if the player height is smaller than screen dimensions. By default, the background color is BLACK
- Kotlin
- XML
storyPlayer.playerBackgroundColor = Color.BLACK
<com.joinstoriessdk.androidsdk.ui.player.StoryPlayer
...
app:playerBackgroundColor="@android:color/black"
...
/>
Player Vertical Anchor
If the player's height is smaller than screen height. The anchor default is BOTTOM
- Bottom
- Top
- Center
storyPlayer.playerVerticalAnchor = PlayerVerticalAnchor.BOTTOM
storyPlayer.playerVerticalAnchor = PlayerVerticalAnchor.TOP
storyPlayer.playerVerticalAnchor = PlayerVerticalAnchor.CENTER
Player Share Button
Change the visibility of the share button displayed on the Player view. The button is visible by default
- Kotlin
- XML
storyPlayer.playerShowShareButton = true | false
<com.joinstoriessdk.androidsdk.ui.player.StoryPlayer
...
app:playerShowShareButton="true|false"
...
/>
Player Closing Button
Change the visibility of the close button displayed on the Player view. The button is visible by default
- Kotlin
- XML
storyPlayer.playerClosingButton = true | false
<com.joinstoriessdk.androidsdk.ui.player.StoryPlayer
...
app:playerClosingButton="true|false"
...
/>
Player Horizontal Margin
Apply the margin to the left and right of the player view. To maintain ratio, it also changes the height of the player view
- Kotlin
- XML
storyPlayer.playerHorizontalMargin = 8
<com.joinstoriessdk.androidsdk.ui.player.StoryPlayer
...
app:playerHorizontalMargin="8"
...
/>
Player Corner Radius
Apply radius to the 4 corners of the player view
- Kotlin
- XML
storyPlayer.playerCornerRadius = 10f
<com.joinstoriessdk.androidsdk.ui.player.StoryPlayer
...
app:playerCornerRadius="10"
...
/>
Player Progress Bar Default Color
Change the background color of the progress bar in the player view. If no value or null is filled, the default color will be used. Format is #RRGGBB or #RRGGBBAA
- Kotlin
- XML
storyPlayer.playerProgressBarDefaultColor = "#FFFFFF66"
<com.joinstoriessdk.androidsdk.ui.player.StoryPlayer
...
app:playerProgressBarDefaultColor="#FFFFFF66"
...
/>
Player Progress Bar Fill Color
Change the fill color of the progress bar in the player view. If no value or null is filled, the default color will be used. Format is #RRGGBB or #RRGGBBAA
- Kotlin
- XML
storyPlayer.playerProgressBarFillColor = "#026eda"
<com.joinstoriessdk.androidsdk.ui.player.StoryPlayer
...
app:playerProgressBarFillColor="#026eda"
...
/>
Player Progress Bar Thickness
Change the thickness of the progress bar in the player view. If no value or null is filled, the default thickness will be used.
- Kotlin
- XML
storyPlayer.playerProgressBarThickness = 4
<com.joinstoriessdk.androidsdk.ui.player.StoryPlayer
...
app:playerProgressBarThickness="4"
...
/>
Player Progress Bar Radius
Change the radius of the progress bar in the player view. If no value or null is filled, the default thickness will be used. Radius will be applied to the 4 corners.
- Kotlin
- XML
storyPlayer.playerProgressBarRadius = 8
<com.joinstoriessdk.androidsdk.ui.player.StoryPlayer
...
app:playerProgressBarRadius="8"
...
/>