This section covers the composable function for embedding inline video players in Jetpack Compose.

Composable Function

BlazeVideosInlinePlayerCompose

Function signature

@Composable
fun BlazeVideosInlinePlayerCompose(
    modifier: Modifier = Modifier,
    stateHandler: BlazeVideosInlinePlayerComposeStateHandler
)

A composable function that renders an inline video player within Jetpack Compose using AndroidView interop for native performance.

Parameters:

modifier: Modifier for adjusting layout or other visual properties of the composable
stateHandler: An instance of BlazeVideosInlinePlayerComposeStateHandler which manages the state and interactions of the inline player

Usage Example:

@Composable
fun VideoPlayerScreen() {
    val stateHandler = remember {
        BlazeVideosInlinePlayerComposeStateHandler(
            dataSource = BlazeDataSourceType.Labels(BlazeWidgetLabel.singleLabel("videos")),
            playerDelegate = myPlayerDelegate,
            containerId = "unique-video-player-id", // ← Must be unique
            playerMode = BlazeVideosInlinePlayer.PlayerMode.Interactive(
                interactivePlayerStyle = BlazeVideosInlineInteractivePlayerStyle.base(),
                fullScreenPlayerStyle = BlazeVideosPlayerStyle.base()
            )
        )
    }
    
    BlazeVideosInlinePlayerCompose(
        modifier = Modifier.fillMaxSize(),
        stateHandler = stateHandler
    )
}

Important Considerations

Unique State Handler Per Composable

Each BlazeVideosInlinePlayerCompose instance must have its own unique state handler. Do not reuse state handlers across multiple composable instances.

// ✅ Correct: Unique state handler per instance
@Composable
fun VideoFeed() {
    // First video player
    val stateHandler1 = remember {
        BlazeVideosInlinePlayerComposeStateHandler(
            containerId = "video-player-1", // Unique ID
            // ... other parameters
        )
    }
    BlazeVideosInlinePlayerCompose(stateHandler = stateHandler1)
    
    // Second video player  
    val stateHandler2 = remember {
        BlazeVideosInlinePlayerComposeStateHandler(
            containerId = "video-player-2", // Different unique ID
            // ... other parameters
        )
    }
    BlazeVideosInlinePlayerCompose(stateHandler = stateHandler2)
}

// ❌ Incorrect: Reusing the same state handler
@Composable
fun VideoFeed() {
    val sharedStateHandler = remember { /* ... */ } // Don't do this
    
    BlazeVideosInlinePlayerCompose(stateHandler = sharedStateHandler) // ❌
    BlazeVideosInlinePlayerCompose(stateHandler = sharedStateHandler) // ❌
}

State Handler Creation Scope

Be mindful of where you create the state handler. The creation scope affects lifecycle and recomposition behavior depending on your specific use case:

// Consider your use case when choosing creation scope
@Composable
fun MyScreen() {
    // Created once per screen instance
    val stateHandler = remember {
        BlazeVideosInlinePlayerComposeStateHandler(...)
    }
    
    BlazeVideosInlinePlayerCompose(stateHandler = stateHandler)
}

Unique Container IDs

Ensure each state handler has a unique containerId to prevent conflicts:

val stateHandler = remember {
    BlazeVideosInlinePlayerComposeStateHandler(
        containerId = "unique-video-player-id", // Must be unique across your app
        // ... other parameters
    )
}