在jetpack compose中使用Exoplayer时预览方法不起作用

Question

我想构建一个离线视频播放器应用程序，我创建一个像这样的可组合项，

@UnstableApi
@Composable
fun PlayerScreen(
    exoPlayer: ExoPlayer?,
    playerUiState: PlayerUiState,
    playerOnEvent: (PlayerUiEvent) -> Unit,
    onRotateScreenClick: () -> Unit,
    onBackClick: () -> Unit,
){
  // Rest of the code ...
}

现在我需要一个预览功能来观察我的表现，但我无法为这个可组合项创建正确的预览方法， 我创造了这样的东西，

@androidx.annotation.OptIn(UnstableApi::class)
@Preview(showBackground = true)
@Composable
fun PlayerScreenPreview(){
    val context = LocalContext.current

    RXPlayerTheme {
        PlayerScreen(
            exoPlayer = ExoPlayer.Builder(context).build(),
            playerUiState = PlayerUiState(),
            playerOnEvent = {},
            onRotateScreenClick = { /*TODO*/ },
            onBackClick = {}
        )
    }
}

但是它不起作用！我想我无法制作正确的 exo-player 实例，我该如何为此设置正确的预览方法？我只是想为这个可组合项做一个简单的预览方法而已。

Answer 1

有3个选项：
1.使用空 ExoPlayer： 如果 UI 不太依赖 ExoPlayer 是否为非 null，则您可以在预览中为 exoPlayer 传递 null 值，并在 PlayerScreen 可组合项中处理 null 情况。

@UnstableApi
@Preview(showBackground = true)
@Composable
fun PlayerScreenPreview() {
    // Mock PlayerUiState for preview purposes
    val mockPlayerUiState = PlayerUiState(
        // Populate with dummy data if needed
    )

    RXPlayerTheme {
        PlayerScreen(
            exoPlayer = null, // Passing null for preview
            playerUiState = mockPlayerUiState,
            playerOnEvent = {},
            onRotateScreenClick = { /* TODO */ },
            onBackClick = {}
        )
    }
}

2。使用模拟 ExoPlayer： 您可以创建 ExoPlayer 的模拟或简单版本来模仿行为，而无需完全依赖实际实现。这种方法允许您预览 UI，而无需担心 ExoPlayer 的完整功能。

@UnstableApi
@Composable
fun PlayerScreenPreview() {
    val context = LocalContext.current

    // Create a simple mock ExoPlayer instance or use a null ExoPlayer for preview
    val mockExoPlayer = ExoPlayer.Builder(context).build().apply {
        // Optionally, configure the mock ExoPlayer with some basic settings
        // You can also leave this as a no-op for preview purposes
    }

    // Mock PlayerUiState for preview purposes
    val mockPlayerUiState = PlayerUiState(
        // Populate with dummy data if needed
    )

    RXPlayerTheme {
        PlayerScreen(
            exoPlayer = mockExoPlayer,
            playerUiState = mockPlayerUiState,
            playerOnEvent = {},
            onRotateScreenClick = { /* TODO */ },
            onBackClick = {}
        )
    }
}

3.使用依赖注入： 如果您的应用程序使用 Hilt 或 Dagger 等依赖注入 (DI) 框架，您可以创建一个假的 ExoPlayer 提供程序以用于预览目的。