May 10
Media3 ExoPlayer in Jetpack Compose to make Snapchat Spotlight
Adding video to your has always been a crucial part of app development. Most of the apps these days have an infinite scrollable feed be it TikTok, Instagram Reels or Snapchat Spotlight.
In this, we will try to make a similar view with Jetpack Compose and Media3 it is really simple, we will be using dummy data for this scenario we will focus on the view part for now as seen below.
Why Jetpack Media3?
We have several existing media APIs: Jetpack Media also known as MediaCompat, Jetpack Media2, and ExoPlayer. These libraries were developed with different goals, and have several areas of overlapping functionality.
It can be challenging to decide which library to use for a given use case, and objects from different libraries are often not compatible, requiring adapters or connecting code. Media3 removes these challenges by providing a single set of libraries which work well together.
Required Dependencies
implementation 'androidx.media3:media3-exoplayer:1.0.0-alpha03'
implementation "androidx.media3:media3-ui:1.0.0-alpha03"Building Exoplayer Instance
We, first of all, passed the local context and the Exoplayer object is built. After that, we have to set some value to this Exoplayer Instance which I have done in the apply{}. Uri will be passed to the composable.
- DefaultDataSource.Factory() : A DataSource that supports multiple URI schemes.The supported schemes are file,assets,rawResource, android Resource etc. Factory() creates the instance.
- DataSource.Factory : Reads data from URI-identified resources. A factory for DataSource instances.
- ProgressiveMediaSource.Factory() : Provides one period that loads data from a Uri and extracted using an Extractor. Factory() creates the instance.
- createMediaSource(MediaItem.fromUri(uri)) : Returns a new ProgressiveMediaSource using the current parameters. We pass the media item uri in parameter and it is done.
- setMediaSource(source) : Clears the playlist, adds the specified MediaSource and resets the position to the default position.
- prepare() : Prepares the player. This will move the player out of idle state and the player will start loading media and acquire resources needed for playback.
Android View Setup
We put the AndroidView inside DisposableEffect the factory options, we build the PlayerView . Inside the PlayerView we are adding the required configuration like hiding the controller, resizing, setting the player we declared above etc. in the onDispose section we are releasing the exoplayer. Which in turn is called when the player is no longer required. The player must not be used after calling this method
Some Extra Configurations
playWhenReady basically sets whether playback should proceed when getPlaybackState() == STATE_READY. If the player is already in the ready state then this method pauses and resumes playback.
videoScalingMode sets the scaling mode only applies if a MediaCodec-based video Renderer is enabled and if the output surface is owned by a SurfaceView.
repeatMode as the name suggests repeats the video.
exoPlayer.playWhenReady = true
exoPlayer.videoScalingMode = C.VIDEO_SCALING_MODE_SCALE_TO_FIT_WITH_CROPPING
exoPlayer.repeatMode = Player.REPEAT_MODE_ONEFinal VideoPlayer
Simple UI with Jetpack Compose
I used a set of dummy data, iterating over the list using LazyColumn
If you want to video the whole code of the project you can refer here
Finally, you have done it wow added a Video player in your Compose App like Spotlight!!🎉
For any doubts and suggestions, you can reach out on my Instagram, or LinkedIn. Follow me for Kotlin content and more. Happy Coding!
I will well appreciate one of these 👏
