dsa28s/compose-video

Video UI Component for Jetpack Compose (Powered by androidx.media3)

Hello!

🤗 I'm Dora Lee (@dsa28s), a 25 year old developer who wants to be as versatile as Doraemon!

👨‍💻 I'm currently working at ModHaus as an

• Android Engineer (and Frontend Engineer) at ModHaus!
• My main focus is Android, and I occasionally dabble in iOS and Kotlin Native as a hobby!

😘 There are so many things I want to do, so after work I usually work on my

• side projects after work!
• I enjoy drinking 🍻 beer, reading books, and catching up on YouTube.
• I love to eat so much that I often go on restaurant hunts!

📚 Currently, I'm studying

• I'm learning Kotlin Native.
• I'm trying to create my own interpreter language with rust.

👋 We talk together, we project together!

I love meeting new people, chatting with them, and working on projects together!

• Facebook : https://facebook.com/dsa28s
• Email : [email protected]

한국어 버전

Here is README_ko.md

compose-video's Issues

click Button full Screen App Crash

Video quality change options

I want to add Video quality change options. Can anyone help me ?

Media3

Any plans to upgrade to Media3 from Exoplayer?

how can i custom controller

Enter full screen reset player and track state

When screen rotates all jetpack compose components lose the remembers states.
Player is reset and in consequence video track is set on start by default.
Trying use:

• android:configChanges="orientation|screenSize|layoutDirection" on manifest did not work
• rememberSaveable only works with serializable objects

Dialog displays an error after attachBaseContext()

After override the context configuration to prevent font scaling and density scaling, the full screen dialog displays an error.

    override fun attachBaseContext(newBase: Context) {
        val resources = newBase.resources
        val overrideConfiguration = Configuration(resources.configuration)
            .apply {
                fontScale = 1.0f
                densityDpi = resources.displayMetrics.xdpi.toInt()
            }

        super.attachBaseContext(
            newBase.createConfigurationContext(overrideConfiguration)
        )
    }

After set defaultPlayerView background to GRAY.

    DisposableEffect(
        AndroidView(
            modifier = modifier,
            factory = {
                defaultPlayerView.apply {
                    useController = usePlayerController
                    resizeMode = surfaceResizeMode.toPlayerViewResizeMode()
                    setBackgroundColor(Color.GRAY)
                }
            },
        ),
    ) {

Play Multi Exoplayer

I want to know how to play multi-exoplayer like this picture
[explain]

• one exoplayer is working well but the other one is stop
• how to play at the same time each of them

fun MultiPlayerScreen(){
  Column(){
    VideoScreen() // 1
    videoScreen() //2
  } 
}
-----------------------------------------------------------------------------------------------------------------------------------
const val MIME_TYPE_DASH = MimeTypes.APPLICATION_MPD
const val MIME_TYPE_HLS = MimeTypes.APPLICATION_M3U8
const val MIME_TYPE_VIDEO_MP4 = MimeTypes.VIDEO_MP4
@Composable
fun VideoScreen(
    onChangeView : () -> Unit,
    durationTime : Long = 8000L,
){
    val currentChangeView by rememberUpdatedState(newValue = onChangeView)
    var repeatMode by remember { mutableStateOf(RepeatMode.ALL) }

    val context = LocalContext.current

    LaunchedEffect(Unit){
        delay(durationTime)
        if(durationTime != 0L) currentChangeView()
    }
     VideoPlayer(
        mediaItems = listOf(
            VideoPlayerMediaItem.NetworkMediaItem(
                url = "https://html5demos.com/assets/dizzy.mp4",
                mediaMetadata = MediaMetadata.Builder().setTitle("Clear MP4: Dizzy").build(),
                mimeType = MIME_TYPE_VIDEO_MP4,
            )

        ),
        handleLifecycle = true,
        autoPlay = true,
        usePlayerController = true,
        enablePip = true,
        handleAudioFocus = true,
        controllerConfig = VideoPlayerControllerConfig.Default.copy(
            showSpeedAndPitchOverlay = false,
            showSubtitleButton = false,
            showCurrentTimeAndTotalTime = true,
            showBufferingProgress = false,
            showForwardIncrementButton = true,
            showBackwardIncrementButton = true,
            showBackTrackButton = true,
            showNextTrackButton = true,
            showRepeatModeButton = true,
            controllerShowTimeMilliSeconds = 5_000,
            controllerAutoShow = true,
            showFullScreenButton = false
        ),
        volume = 0.5f,  // volume 0.0f to 1.0f
        repeatMode = repeatMode,       // or RepeatMode.ALL, RepeatMode.ONE
        onCurrentTimeChanged = { // long type, current player time (millisec)
            Log.e("CurrentTime", it.toString())
        },
        playerInstance = { // ExoPlayer instance (Experimental)
            addAnalyticsListener(object : AnalyticsListener {
                @SuppressLint("UnsafeOptInUsageError")
                override fun onRepeatModeChanged(
                    eventTime: AnalyticsListener.EventTime,
                    rMode: Int,
                ) {
                    repeatMode = rMode.toRepeatMode()
                    Toast.makeText(
                        context,
                        "RepeatMode changed = ${rMode.toRepeatMode()}",
                        Toast.LENGTH_LONG,
                    )
                        .show()
                }

                @SuppressLint("UnsafeOptInUsageError")
                override fun onPlayWhenReadyChanged(
                    eventTime: AnalyticsListener.EventTime,
                    playWhenReady: Boolean,
                    reason: Int,
                ) {
                    Toast.makeText(
                        context,
                        "isPlaying = $playWhenReady",
                        Toast.LENGTH_LONG,
                    )
                        .show()
                }

                @SuppressLint("UnsafeOptInUsageError")
                override fun onVolumeChanged(
                    eventTime: AnalyticsListener.EventTime,
                    volume: Float,
                ) {
                    Toast.makeText(
                        context,
                        "Player volume changed = $volume",
                        Toast.LENGTH_LONG,
                    )
                        .show()
                }
                }
            )
        },
        modifier = Modifier
            .fillMaxSize()
//           .align(Alignment.Center),
    )
}

Having bottom paddings in fullScreenDilalog

When I open full screen it shows with bottom paddings:
(In my screen you can see some item and floating action button in full screen)

It's in default screen:

And in full screen:

black overlay

is there any way to hide video player back overlay before loading media item? (im using network media item)

how cani i know player is loading or loaded so that i can show a loadingbar or player

how to default fullscreen but not enter full screen button then fullscreen

OnMediaLoaded callback

I want to show loading spinner while the media is loading. For that I think I need a callback for media loaded.

Is it possible with the current api?

Samsung a series video overflow

Hello,

i have a problem,
actually i tried samsung j8, s23 or xiaomi devices and video normal on these devices but i tried galaxy a series (a73 and a34) and this problem occurred,
the problem is i select a video and video overflow, when once i tap the screen and the video size returns to normal?

What can i do?

Modification suggestions, please consider the default screen orientation of onFullScreenExit

preferably passed in by the user instead of hardcoding “currentActivity.requestedOrientation = ActivityInfo.SCREEN_ORIENTATION_PORTRAIT”

Chromecast support

kotlin multiplatform support

What if this library supports kotlin multiplatform?
I'am asking for your opinion on whether you are in favor of updating the library so that it can be used on Kotlin multiplatform.

Question regarding lifecycle

Hi! Nice extension.

I was experimenting with it and found that when using m3u8 network playback stream, the handleLifecycle=true paused playback properly when leaving the app, but never resumed it when coming back, resulting in back screen.

Not sure if it is a bug or a problem on my end. Perhaps it makes sense to be able to optionally create the exoplayer instance outside the library, for having more control over the instance? I'd assume then I would be able to use it to control playback with some custom logic.

Add Preload Option

Can You Please Add video Preload Option ?

support for tab

Exit full screen UI offset

When I exit from full screen state, the UI is offset and there is an empty space on the right side
ver: Android 9

Setting DataSource.Factory

Hi,

I really, really, like this library. Much much easier to use than the 400+ line ExoPlayer "getting started" demo.

I needed to use the OkHttp DataSource (to enable playing videos that a user has downloaded offline via an OkHttp interceptor I made).

The current function signatures don't allow setting the DataSource.Factory. I made a fork with an option for the HttpDataSource here:

https://github.com/UstadMobile/compose-video

Add argument:

httpDataSourceFactory: HttpDataSource.Factory = remember {
        DefaultHttpDataSource.Factory()
    },

Use it:

.apply {
                val cache = VideoPlayerCacheManager.getCache()
                if (cache != null) {
                    val cacheDataSourceFactory = CacheDataSource.Factory()
                        .setCache(cache)
                        .setUpstreamDataSourceFactory(DefaultDataSource.Factory(context, httpDataSourceFactory))
                    setMediaSourceFactory(DefaultMediaSourceFactory(cacheDataSourceFactory))
                } else {
                    setMediaSourceFactory(DefaultMediaSourceFactory(httpDataSourceFactory))
                }
            }

It's now working with OkHttpDataSource. I'm not sure if that is the most elegant API. Maybe accepting the DataSource.Factory itself would be an option?

I'm happy to tidy submit this into a pull request if that helps.