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_ONE

Final 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 👏

Recent Post

--

--

--

We are here building a community here.

Recommended from Medium

Android Data Binding

Using Webview in Jetpack Compose and enforce Dark Mode

Upload Image to Cloudinary in Android Using Kotlin Programming

Implementing Self-Authenticating Firebase OTP on android

RecyclerView’s clipToPadding attribute

An introduction to HMS Kits

View Binding in Android : Activity, Fragment

Building a Joke App with Cloud Firestore using Kotlin part 01

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Debanshu Datta

Debanshu Datta

Android @Gojek | Mobile Developer | Backend Developer (Java/Kotlin)

More from Medium

How To Use Android’s Proto DataStore With Kotlin Support

Lamps Hanging In The Dark Salt Mine

🖌 The Guide To Your First Annotation Processor with KSP (And Becoming A Kotlin Artist)

Glassmorphism in Jetpack Compose

7 useful ways to create Flow in Kotlin