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.
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
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
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_ONE
Simple UI with Jetpack Compose
I used a set of dummy data, iterating over the list using
If you want to video the whole code of the project you can refer here
GitHub - Debanshu777/Compose-Snapchat-Clone: Snapchat Clone with Jetpack Compose and Clean…
Snapchat Clone with Jetpack Compose and Clean Architecture - Navigation Components, CamaraX, android-maps-compose…
Finally, you have done it wow added a Video player in your Compose App like Spotlight!!🎉
I will well appreciate one of these 👏
Detect Swipe Direction on Jetpack Compose to trigger BottomSheetScaffold
The preceding chapter demonstrated how to detect some common types of gestures including dragging, tapping, and pinching…
Adding Google Map in Jetpack Compose 🗺📌- Using AndroidView And android-maps-compose
Creating and configuring a map. Configuring the map can be done by passing a MapProperties object into the GoogleMap…
Using Webview in Jetpack Compose and enforce Dark Mode
Webview is an important part of Android Development. The WebView class is an extension of Android’s View class that…
Replacing Retrofit with Ktor Client and Kotlin Serialization for Android🐱🏍
Ktor includes a multiplatform asynchronous HTTP client, which allows you to make requests and handle responses, extend…