-ReelsView Support Impl #63

KhubaibKhan4 · Dec 17, 2024 · 4a26af2 · 4a26af2
1 parent 5efd445
commit 4a26af2
Show file tree

Hide file tree

Showing 3 changed files with 185 additions and 1 deletion.
diff --git a/mediaplayer-kmp/src/androidMain/kotlin/YouTubePlayer.android.kt b/mediaplayer-kmp/src/androidMain/kotlin/YouTubePlayer.android.kt
@@ -16,6 +16,7 @@ import androidx.annotation.OptIn
 import androidx.annotation.RequiresApi
 import androidx.compose.animation.animateContentSize
 import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
@@ -25,6 +26,8 @@ import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.pager.VerticalPager
+import androidx.compose.foundation.pager.rememberPagerState
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Pause
 import androidx.compose.material.icons.filled.PlayArrow
@@ -33,6 +36,7 @@ import androidx.compose.material.icons.filled.VolumeUp
 import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Slider
 import androidx.compose.material3.SliderDefaults
 import androidx.compose.material3.Text
@@ -49,6 +53,7 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.LocalLifecycleOwner
+import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.viewinterop.AndroidView
 import androidx.lifecycle.Lifecycle
@@ -556,4 +561,95 @@ fun isAudioFile(url: String?): Boolean {
     ) == true || url?.matches(
         Regex(".*(radio|stream|icecast|shoutcast|audio|listen).*", RegexOption.IGNORE_CASE)
     ) == true
+}
+
+@Composable
+actual fun ReelsView(
+    videoUrls: List<String>,
+    modifier: Modifier,
+    autoPlay: Boolean,
+    onInteraction: (Int, String) -> Unit
+) {
+    val pagerState = rememberPagerState(pageCount = {videoUrls.size})
+
+    VerticalPager(
+        state = pagerState,
+        modifier = modifier
+            .fillMaxSize()
+            .background(Color.Black)
+    ) { pageIndex ->
+        ReelsPage(
+            videoUrl = videoUrls[pageIndex],
+            pageIndex = pageIndex,
+            autoPlay = autoPlay && pagerState.currentPage == pageIndex,
+            onInteraction = onInteraction
+        )
+    }
+}
+
+@Composable
+fun ReelsPage(
+    videoUrl: String,
+    pageIndex: Int,
+    autoPlay: Boolean,
+    onInteraction: (Int, String) -> Unit,
+    isPlaying: (Boolean) -> Unit = {},
+    isLoading: (Boolean) -> Unit = {},
+    onVideoEnded: () -> Unit = {},
+) {
+    Box(
+        modifier = Modifier
+            .fillMaxSize()
+            .background(Color.Black)
+    ) {
+        YoutubeVideoPlayer(
+            youtubeURL = videoUrl,
+            autoPlay = autoPlay,
+            modifier = Modifier.fillMaxSize(),
+            isPlaying = isPlaying,
+            isLoading = isLoading,
+            onVideoEnded = onVideoEnded
+        )
+
+        Column(
+            verticalArrangement = Arrangement.SpaceBetween,
+            modifier = Modifier
+                .fillMaxSize()
+                .padding(16.dp)
+        ) {
+            Text(
+                text = "Video $pageIndex",
+                color = Color.White,
+                textAlign = TextAlign.Start,
+                style = MaterialTheme.typography.titleLarge
+            )
+
+            Row(
+                horizontalArrangement = Arrangement.SpaceBetween,
+                modifier = Modifier.fillMaxWidth()
+            ) {
+                Text(
+                    text = "❤️ Like",
+                    color = Color.White,
+                    modifier = Modifier.clickable {
+                        onInteraction(pageIndex, "Like")
+                    }
+                )
+                Text(
+                    text = "💬 Comment",
+                    color = Color.White,
+                    modifier = Modifier.clickable {
+                        onInteraction(pageIndex, "Comment")
+                    }
+                )
+                Text(
+                    text = "📤 Share",
+                    color = Color.White,
+                    modifier = Modifier.clickable {
+                        onInteraction(pageIndex, "Share")
+                    }
+                )
+            }
+        }
+    }
 }
diff --git a/mediaplayer-kmp/src/commonMain/kotlin/YouTubePlayer.kt b/mediaplayer-kmp/src/commonMain/kotlin/YouTubePlayer.kt
@@ -1,6 +1,12 @@
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.pager.HorizontalPager
+import androidx.compose.foundation.pager.VerticalPager
+import androidx.compose.foundation.pager.rememberPagerState
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.dp
 
 @Composable
 expect fun VideoPlayer(modifier: Modifier, url: String, autoPlay: Boolean)
@@ -17,4 +23,60 @@ expect fun MediaPlayer(
     playIconColor: Color,
     sliderTrackColor: Color,
     sliderIndicatorColor: Color
-)
+)
+enum class PagerType {
+    Horizontal,
+    Vertical
+}
+@Composable
+fun ReelsView(
+    videoUrls: List<String>,
+    pagerType: PagerType,
+    modifier: Modifier = Modifier,
+    autoPlay: Boolean = true,
+    onInteraction: (Int, String) -> Unit = { _, _ -> }
+) {
+    val pagerState = rememberPagerState(pageCount = {videoUrls.size})
+
+    when(pagerType){
+        PagerType.Horizontal -> {
+            HorizontalPager(
+                state = pagerState,
+                modifier = modifier,
+            ) { page ->
+                VideoPlayerScreen(
+                    url = videoUrls[page],
+                    autoPlay = autoPlay,
+                    onInteraction = { onInteraction(page, videoUrls[page]) }
+                )
+            }
+        }
+        PagerType.Vertical -> {
+            VerticalPager(
+                state = pagerState,
+                modifier = modifier,
+            ) { page ->
+                VideoPlayerScreen(
+                    url = videoUrls[page],
+                    autoPlay = autoPlay,
+                    onInteraction = { onInteraction(page, videoUrls[page]) }
+                )
+            }
+        }
+    }
+}
+
+@Composable
+fun VideoPlayerScreen(
+    url: String,
+    autoPlay: Boolean,
+    onInteraction: () -> Unit
+) {
+    VideoPlayer(
+        modifier = Modifier
+            .fillMaxSize()
+            .padding(8.dp),
+        url = url,
+        autoPlay = autoPlay
+    )
+}
diff --git a/mediaplayer-kmp/src/iosMain/kotlin/YouTubePlayer.ios.kt b/mediaplayer-kmp/src/iosMain/kotlin/YouTubePlayer.ios.kt
@@ -1,3 +1,4 @@
+import androidx.compose.foundation.gestures.Orientation
 import androidx.compose.foundation.layout.aspectRatio
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.material3.Text
@@ -8,8 +9,14 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.interop.UIKitView
 import androidx.compose.ui.viewinterop.UIKitInteropProperties
 import androidx.compose.ui.viewinterop.UIKitView
+import kotlinx.cinterop.BetaInteropApi
 import kotlinx.cinterop.CValue
+import kotlinx.cinterop.CValues
+import kotlinx.cinterop.DoubleVar
 import kotlinx.cinterop.ExperimentalForeignApi
+import kotlinx.cinterop.cValuesOf
+import kotlinx.cinterop.convert
+import kotlinx.cinterop.memScoped
 import platform.AVFoundation.AVPlayer
 import platform.AVFoundation.AVPlayerItem
 import platform.AVFoundation.AVPlayerLayer
@@ -18,11 +25,30 @@ import platform.AVFoundation.pause
 import platform.AVFoundation.play
 import platform.AVKit.AVPlayerViewController
 import platform.CoreGraphics.CGRect
+import platform.CoreGraphics.CGSize
+import platform.Foundation.NSIndexPath
 import platform.Foundation.NSURL
 import platform.QuartzCore.CATransaction
 import platform.QuartzCore.kCATransactionDisableActions
+import platform.UIKit.UICollectionView
+import platform.UIKit.UICollectionViewCell
+import platform.UIKit.UICollectionViewDataSourceProtocol
+import platform.UIKit.UICollectionViewFlowLayout
+import platform.UIKit.UICollectionViewScrollDirection
+import platform.*
+import platform.CoreGraphics.CGPoint
+import platform.CoreGraphics.CGRectGetMidX
+import platform.CoreGraphics.CGRectGetMidY
+import platform.Foundation.NSCoder
+import platform.UIKit.UICollectionViewDelegateProtocol
+import platform.UIKit.UIColor.Companion.blackColor
+import platform.UIKit.UINib
+import platform.UIKit.UIScrollView
 import platform.UIKit.UIView
+import platform.UIKit.UIViewController
+import platform.UIKit.row
 import platform.WebKit.WKWebView
+import platform.darwin.NSInteger
 import platform.darwin.NSObject
 
 @Composable