Skip to main content

Back Navigation

Handle the Android back button correctly with the channel's internal navigation.

Quick Start​

Use Compose's BackHandler to integrate with the channel's navigation stack:

@Composable
fun ChannelScreen() {
    val viewModel = remember { BBChannelViewModel() }
    var canGoBack by remember { mutableStateOf(false) }

    BackHandler(enabled = canGoBack) {
        viewModel.goBack()
    }

    BBChannelView(
        channelUrl = "https://demo.bbvms.com/ch/channel_name.json",
        viewModel = viewModel,
        callbacks = BBChannelCallbacks(
            onCanGoBackChange = { canGoBack = it }
        )
    )
}

When the user presses back:

  1. If the channel can go back (detail page → main), it navigates back
  2. Otherwise, the default back behavior (finish activity) runs

With BBChannelWithPlayerView​

BBChannelWithPlayerView includes a built-in back arrow above the player when on a detail page. Combine it with BackHandler:

@Composable
fun ChannelScreen() {
    val viewModel = remember { BBChannelViewModel() }
    var canGoBack by remember { mutableStateOf(false) }

    BackHandler(enabled = canGoBack) {
        viewModel.goBack()
    }

    BBChannelWithPlayerView(
        channelUrl = "https://demo.bbvms.com/ch/channel_name.json",
        viewModel = viewModel,
        callbacks = BBChannelCallbacks(
            onCanGoBackChange = { canGoBack = it }
        ),
        showBackArrow = true  // default: shows back arrow on detail page
    )
}

When the channel is inside a Compose NavHost, coordinate back behavior:

@Composable
fun ChannelScreen(navController: NavController) {
    val viewModel = remember { BBChannelViewModel() }
    var canGoBack by remember { mutableStateOf(false) }

    BackHandler(enabled = canGoBack) {
        viewModel.goBack()
    }
    // When canGoBack is false, BackHandler is disabled and
    // the NavHost handles back (pops the screen)

    BBChannelView(
        channelUrl = "https://demo.bbvms.com/ch/channel_name.json",
        viewModel = viewModel,
        callbacks = BBChannelCallbacks(
            onCanGoBackChange = { canGoBack = it }
        )
    )
}

Priority Order​

When the back button is pressed, handle events in this order:

  1. Dismiss native player — If a modal player is presented
  2. Channel back navigation — If the channel is on a sub-page (detail, overview, search)
  3. App navigation — Pop the screen, switch tabs, or exit

Custom Back Button in Top Bar​

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun ChannelScreen(onExit: () -> Unit) {
    val viewModel = remember { BBChannelViewModel() }
    var canGoBack by remember { mutableStateOf(false) }

    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text("Videos") },
                navigationIcon = {
                    IconButton(onClick = {
                        if (canGoBack) viewModel.goBack() else onExit()
                    }) {
                        Icon(Icons.AutoMirrored.Filled.ArrowBack, "Back")
                    }
                }
            )
        }
    ) { padding ->
        BBChannelView(
            channelUrl = "https://demo.bbvms.com/ch/channel_name.json",
            viewModel = viewModel,
            callbacks = BBChannelCallbacks(
                onCanGoBackChange = { canGoBack = it }
            ),
            modifier = Modifier.padding(padding)
        )
    }
}

Listening for Changes​

Use the onCanGoBackChange and onNavigationStateChange callbacks:

val callbacks = BBChannelCallbacks(
    onCanGoBackChange = { canGoBack ->
        println("Can go back: $canGoBack")
    },
    onNavigationStateChange = { state ->
        println("Page: ${state.pageType}")
    }
)