Added Methods Description

app/build.gradle.kts

@@ -59,6 +59,9 @@ dependencies {
     implementation(libs.androidx.ui.graphics)
     implementation(libs.androidx.ui.tooling.preview)
     implementation(libs.androidx.material3)
+    implementation(project(":reelsplayer"))
+
+
     testImplementation(libs.junit)
     androidTestImplementation(libs.androidx.junit)
     androidTestImplementation(libs.androidx.espresso.core)

app/src/main/java/com/gulehri/samplereelsapp/MainActivity.kt

@@ -4,44 +4,31 @@ import android.os.Bundle
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
 import androidx.activity.enableEdgeToEdge
+import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.Scaffold
-import androidx.compose.material3.Text
-import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.tooling.preview.Preview
 import com.gulehri.samplereelsapp.ui.theme.SampleReelsAppTheme
+import com.shahid.iqbal.reelsplayer.components.ReelsPlayer
 
 class MainActivity : ComponentActivity() {
+    @OptIn(ExperimentalFoundationApi::class)
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
         enableEdgeToEdge()
         setContent {
             SampleReelsAppTheme {
                 Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
-                    Greeting(
-                        name = "Android",
-                        modifier = Modifier.padding(innerPadding)
+
+                    ReelsPlayer(
+                        modifier = Modifier.padding(innerPadding),
+                        videoList = listOf(),
+                        indexOfVideo = 0,
+
                     )
                 }
             }
         }
     }
 }
-
-@Composable
-fun Greeting(name: String, modifier: Modifier = Modifier) {
-    Text(
-        text = "Hello $name!",
-        modifier = modifier
-    )
-}
-
-@Preview(showBackground = true)
-@Composable
-fun GreetingPreview() {
-    SampleReelsAppTheme {
-        Greeting("Android")
-    }
-}

reelsplayer/src/main/java/com/shahid/iqbal/reelsplayer/actions/PlayerResizeMode.kt

@@ -4,6 +4,15 @@ package com.shahid.iqbal.reelsplayer.actions
  * Created by Shahid Iqbal on 7/20/2024.
  */
 
+/**
+ * Class defining the various modes for resizing video content within the Reels Player.
+ *
+ * @property FIT Adjusts the video size to fit within the player's bounds while maintaining the aspect ratio.
+ * @property FILL Scales the video to fill the entire player bounds, potentially cropping the video if necessary.
+ * @property ZOOM Zooms into the video to fill the player's width or height, which may crop some parts of the video.
+ * @property FIXED_WIDTH Maintains a fixed width for the video, adjusting the height to maintain aspect ratio.
+ * @property FIXED_HEIGHT Maintains a fixed height for the video, adjusting the width to maintain aspect ratio.
+ */
 enum class PlayerResizeMode {
     FIT, FILL, ZOOM, FIXED_WIDTH, FIXED_HEIGHT
-}
+}

reelsplayer/src/main/java/com/shahid/iqbal/reelsplayer/actions/RepeatMode.kt

@@ -1,3 +1,12 @@
 package com.shahid.iqbal.reelsplayer.actions
 
-enum class RepeatMode { CURRENT, ALL }
+/**
+ * Class defining the repeat modes for video.
+ *
+ * @property CURRENT Repeats the current video .
+ * @property ALL Plays all videos in the list sequentially and repeats from the beginning when the end is reached.
+ */
+enum class RepeatMode {
+    CURRENT,
+    ALL
+}

reelsplayer/src/main/java/com/shahid/iqbal/reelsplayer/actions/ThumbnailDisplayMode.kt

@@ -1,5 +1,13 @@
 package com.shahid.iqbal.reelsplayer.actions
 
+/**
+ *Class defining the different modes for displaying video thumbnails.
+ *
+ * @property OFF Thumbnails are not displayed.
+ * @property FIT Thumbnails are scaled to fit within the display area, maintaining aspect ratio.
+ * @property FILL Thumbnails are scaled to fill the display area, potentially cropping the image.
+ */
+
 enum class ThumbnailDisplayMode {
     OFF, FIT, FILL
-}
+}

reelsplayer/src/main/java/com/shahid/iqbal/reelsplayer/actions/VideoScalingMode.kt

@@ -1,6 +1,13 @@
 package com.shahid.iqbal.reelsplayer.actions
 
 
+/**
+ * Class defining the scaling modes for displaying video content.
+ *
+ * @property DEFAULT Uses the default scaling behavior, which may vary based on the player implementation.
+ * @property FIT Scales the video to fit within the player's bounds while maintaining the aspect ratio.
+ * @property FIT_WITH_CROPPING Scales the video to fill the player's bounds, which may involve cropping parts of the video.
+ */
 enum class VideoScalingMode {
     DEFAULT, FIT, FIT_WITH_CROPPING
-}
+}

reelsplayer/src/main/java/com/shahid/iqbal/reelsplayer/components/DefaultVideoLoader.kt

@@ -1,4 +1,4 @@
-package com.shahid.iqbal.reelsplayer.components;
+package com.shahid.iqbal.reelsplayer.components
 
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.fillMaxSize
@@ -15,23 +15,29 @@ import androidx.compose.ui.unit.dp
  * Created by Shahid Iqbal on 7/20/2024.
  */
 
+/**
+ * A composable function that displays a default loading indicator for video content.
+ * This is typically used while the video is buffering or loading.
+ *
+ * @param modifier A [Modifier] to apply to this layout.
+ * @param progressColor The color of the progress indicator.
+ * @param strokeWidth The width of the stroke for the progress indicator.
+ */
 @Composable
 fun DefaultVideoLoader(
     modifier: Modifier = Modifier,
     progressColor: Color = Color.White,
     strokeWidth: Dp = 5.dp,
 ) {
-
     Box(
         modifier = Modifier.fillMaxSize(),
         contentAlignment = Alignment.Center
     ) {
-
         CircularProgressIndicator(
             modifier = modifier.align(Alignment.Center),
             color = progressColor,
             strokeWidth = strokeWidth,
             strokeCap = StrokeCap.Round
         )
     }
-}
+}

reelsplayer/src/main/java/com/shahid/iqbal/reelsplayer/components/PlayerUiState.kt

@@ -6,8 +6,14 @@ import androidx.annotation.Keep
  * Created by Shahid Iqbal on 7/20/2024.
  */
 
+/**
+ * A data class representing the UI state of the player.
+ *
+ * @property isLoading A boolean indicating whether the player is currently loading content.
+ * @property isPaused A boolean indicating whether the player is paused.
+ */
 @Keep
 data class PlayerUiState(
     var isLoading: Boolean = false,
     var isPaused: Boolean = false,
-)
+)

reelsplayer/src/main/java/com/shahid/iqbal/reelsplayer/components/ReelsPlayer.kt

@@ -1,10 +1,17 @@
 package com.shahid.iqbal.reelsplayer.components
 
 import androidx.annotation.OptIn
+import androidx.compose.foundation.ExperimentalFoundationApi
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.pager.VerticalPager
+import androidx.compose.foundation.pager.rememberPagerState
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import androidx.lifecycle.viewmodel.compose.viewModel
 import androidx.media3.common.Player
@@ -15,27 +22,40 @@ import com.shahid.iqbal.reelsplayer.configs.ReelsConfig
  * Created by Shahid Iqbal on 7/20/2024.
  */
 
+/**
+ * A composable function for playing a list of videos similar to the experience on Instagram and TikTok.
+
+ * @param modifier A [Modifier] to apply to this layout.
+ * @param reelConfig The configuration settings for the reels player.
+ * @param videoList A list of video URLs to be played.
+ * @param indexOfVideo The initial index of the video to start playing.
+ * @param pageSpacing The spacing between pages in the pager.
+ * @param contentPadding Padding to be applied to the content inside the pager.
+ */
+@ExperimentalFoundationApi
 @OptIn(UnstableApi::class)
 @Composable
 fun ReelsPlayer(
     modifier: Modifier = Modifier,
     reelConfig: ReelsConfig = ReelsConfig(),
-    videoUrl: String,
+    videoList: List<String>,
+    indexOfVideo: Int = 0,
+    pageSpacing: Dp = 10.dp,
+    contentPadding: PaddingValues = PaddingValues(0.dp),
 ) {
-
     val playerViewModel: PlayerViewModel = viewModel()
     val playerUiState by playerViewModel.playerUiState.collectAsStateWithLifecycle()
+    val pageState = rememberPagerState(initialPage = indexOfVideo) { videoList.size }
     val exoPlayer = rememberExoplayer(reelConfig = reelConfig).apply {
         addListener(object : Player.Listener {
             override fun onPlaybackStateChanged(playbackState: Int) {
                 when (playbackState) {
-
                     Player.STATE_BUFFERING -> {
                         playerViewModel.updateLoadingState(true)
                     }
 
                     Player.STATE_READY -> {
-                        playerViewModel.updateLoadingState(true)
+                        playerViewModel.updateLoadingState(false)
                     }
 
                     else -> Unit
@@ -47,7 +67,17 @@ fun ReelsPlayer(
     LaunchedEffect(key1 = playerUiState.isPaused, key2 = !playerUiState.isPaused) {
         if (!playerUiState.isPaused) exoPlayer.pause()
         else exoPlayer.play()
-
     }
 
+    VerticalPager(
+        state = pageState,
+        modifier = modifier.fillMaxSize(),
+        beyondBoundsPageCount = 0,
+        pageSpacing = pageSpacing,
+        contentPadding = contentPadding,
+        key = { videoList[it] }
+    ) {
+        rememberPlayerView(exoPlayer = exoPlayer, reelConfig = reelConfig)
+    }
 }
+

reelsplayer/src/main/java/com/shahid/iqbal/reelsplayer/configs/ReelsConfig.kt

@@ -11,6 +11,19 @@ import com.shahid.iqbal.reelsplayer.actions.VideoScalingMode
 import com.shahid.iqbal.reelsplayer.components.DefaultVideoLoader
 
 
+/**
+ * Configuration class for the Reels feature.
+ *
+ * @property playerResizeMode The resize mode for the video player.
+ * @property videoScalingMode The scaling mode for video display.
+ * @property repeatMode The repeat mode for video playback.
+ * @property thumbnailDisplayMode The display mode for thumbnails.
+ * @property showControlsMenu Whether to show the controls menu.
+ * @property playerSize The size of the video player.
+ * @property reelDetail A composable function that takes an integer representing the video index
+ *                      and displays details for the specified reel.
+ * @property playerLoader A composable function to display the video loader.
+ */
 @Keep
 data class ReelsConfig(
     var playerResizeMode: PlayerResizeMode = PlayerResizeMode.FILL,
@@ -19,6 +32,7 @@ data class ReelsConfig(
     var thumbnailDisplayMode: ThumbnailDisplayMode = ThumbnailDisplayMode.FILL,
     val showControlsMenu: Boolean = false,
     var playerSize: Size = Size(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT),
-    var reelDetail: (@Composable () -> Unit)? = null,
+    var reelDetail: (@Composable (Int) -> Unit)? = null,
     var playerLoader: (@Composable () -> Unit)? = { DefaultVideoLoader() },
 )
+