Before integrating the VideoFeed and StoryBlock components in your Android Compose project, make sure to follow the official .
Video Feed
An Activity that uses the VideoFeed component must extend ComponentActivity
or a subclass of ComponentActivity
.
A Fragment that uses the VideoFeed component must extend Fragment
or a subclass of Fragment
.
Then you can add VideoFeed to your project
@Composable
private fun VideoFeed(modifier: Modifier) {
AndroidView(
modifier = modifier.fillMaxSize(),
factory = { context ->
fwVideoFeedView(context) {
viewOptions {
......
}
}
})
}
For viewOptions detail configuration, refer to the doc, you are allowed to fill in more options here.
Storyblock
An Activity that uses the Storyblock component must extend FragmentActivity
or a subclass of FragmentActivity
.
A Fragment that uses the Storyblock component must extend Fragment
or a subclass of Fragment.
Use single storyblock
Create a Storyblock code down below, and add the widget to your compose code.
@Composable
fun StoryblockItem(modifier: Modifier = Modifier) {
val context = LocalContext.current
// create a FwStoryBlockView
val storyBlockView = FwStoryBlockView(context)
// init view options
val viewOptions = viewOptions {
baseOptions {
feedResource(FeedResource.Discovery)
}
playerOptions {
playerMode(PlayerMode.FIT_MODE)
}
storyBlockOptions {
enableAutoPlay(true)
showFullScreenIcon(true)
}
}
AndroidView(
modifier = modifier.padding(start = 20.dp, top = 50.dp, end = 20.dp, bottom = 50.dp),
factory = { _ ->
// initial storyblock
storyBlockView.init(
// if you are using fragment as container, replace it with childFragmentManager
(context as FragmentActivity).supportFragmentManager,
context,
viewOptions,
true
)
storyBlockView.apply {
// set layout parameters
layoutParams = ViewGroup.LayoutParams(
ViewGroup.LayoutParams.MATCH_PARENT,
ViewGroup.LayoutParams.MATCH_PARENT
)
setOnErrorListener { e ->
// handle and record the error
}
// set other listeners
......
}
}
)
DisposableEffect(Unit) {
onDispose {
// invoke destroy when disposable
storyBlockView.destroy()
}
}
}
Note
Don't forget to destroy the FwStoryBlockView
in DisposableEffect
Use multiple storyblocks in Grid
Create and Initialize the FwStoryBlockView
with view options.
@Composable
fun StoryBlockItem(modifier: Modifier = Modifier, key: String, androidViewMap: MutableMap<String, FwStoryBlockView>) {
val context = LocalContext.current
val storyblockAndroidView = androidViewMap.getOrPut(key) {
val storyBlockView = FwStoryBlockView(context = LocalContext.current)
// init view options
val viewOptions = viewOptions {
baseOptions {
feedResource(FeedResource.Discovery)
}
playerOptions {
playerMode(PlayerMode.FIT_MODE)
}
storyBlockOptions {
enableAutoPlay(true)
showFullScreenIcon(true)
}
}
storyBlockView.init(
(context as AppCompatActivity).supportFragmentManager,
context,
viewOptions,
true,
)
storyBlockView.apply {
layoutParams = ViewGroup.LayoutParams(
ViewGroup.LayoutParams.MATCH_PARENT,
ViewGroup.LayoutParams.MATCH_PARENT,
)
storyBlockView.setOnErrorListener { e ->
// handle the error
}
}
}
AndroidView(
modifier = modifier
.padding(top = 16.dp)
.size(width, height),
factory = { _ ->
storyblockAndroidView
},
......
)
}
Integrate with LazyVerticalGrid Component
Build LazyVerticalGridItem demo code.
@Suppress("MagicNumber")
val list = List(50) {
if (it == 3 || it == 24) {
"View"
} else {
"Text"
}
}
private val width = 150.dp
private val height = 250.dp
@Composable
fun LazyVerticalGridItem(modifier: Modifier = Modifier) {
val androidViewMap = remember { mutableMapOf<String, FwStoryBlockView>() }
LazyVerticalGrid(columns = GridCells.Fixed(2)) {
items(list.size) { index ->
if (list[index] == "View") {
StoryBlockItem(modifier = modifier, key = "View_${index}", androidViewMap = androidViewMap)
} else {
Text(text = "Text $index", modifier = modifier.size(width, height))
}
}
}
DisposableEffect(Unit) {
onDispose {
// destroy all the cached storyblock view
for (v in androidViewMap.values) {
v.destroy()
}
}
}
}
You can integrate LazyVerticalGridItem
into your compose code.
Note
Don't forget to destroy the FwStoryBlockView
in DisposableEffect