# Compose Support

Before integrating the **VideoFeed** and **StoryBlock** components in your Android Compose project, **make sure to follow the official** [**Firework Getting Started Guide for Android SDK**](https://docs.firework.com/firework-for-developers/android-sdk/integration-guide/getting-started).

## 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 [video-feed-integration](https://docs.firework.com/firework-for-developers/android-sdk/integration-guide/video-feed/configure-video-feed#video-feed-integration) 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() 
        }
    }
}
```

To view the configuration details of the viewOptions, refer to the [Storyblock](https://docs.firework.com/firework-for-developers/android-sdk/integration-guide/storyblock) doc, you are allowed to fill in more options here.

**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`


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.firework.com/firework-for-developers/android-sdk/integration-guide/compose-support-android.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.