rn-videofeed 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Venkatesh Mandapati
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,92 @@
+# rn-videofeed
+
+Native vertical full-screen video feed for React Native — Reels / TikTok / Shorts style.
+Playback is powered by **AVPlayer** on iOS and **Media3 ExoPlayer** on Android, driven by a
+native `UICollectionView` / `RecyclerView` for smooth scrolling with many videos.
+
+- Full-page vertical paging (snap-to-page)
+- Seamless resume — scrolling back continues **where you left off** instead of restarting
+- Warm player pool (keeps ~8 videos ready) for instant playback
+- Thumbnail placeholder until the video is ready; tap to play/pause; auto-pause on scroll/background
+- Pagination hook (`onEndReached`) and per-video change events
+
+## Requirements
+
+- React Native >= 0.76
+- iOS 16.0+
+- Android — **Old Architecture** (`newArchEnabled=false`); the component is a legacy `SimpleViewManager`
+
+## Install
+
+```bash
+npm install rn-videofeed
+# iOS
+cd ios && pod install
+```
+
+Ensure `android/gradle.properties` has `newArchEnabled=false`.
+
+## Usage
+
+```tsx
+import React, { useEffect, useRef } from 'react'
+import { View, StyleSheet, findNodeHandle } from 'react-native'
+import VideoFeedView, { VideoFeedManagerNative, VideoFeedEmitter } from 'rn-videofeed'
+
+const VIDEOS = [
+  { id: '1', videoUrl: 'https://.../clip.mp4', thumbnailUrl: 'https://.../clip.jpg' },
+]
+
+export default function Feed() {
+  const feedRef = useRef(null)
+
+  useEffect(() => {
+    const sub = VideoFeedEmitter.addListener('onVideoChange', e => console.log(e?.videoId))
+    return () => sub.remove()
+  }, [])
+
+  useEffect(() => {
+    const handle = findNodeHandle(feedRef.current)
+    if (handle != null) VideoFeedManagerNative.setVideos(handle, VIDEOS)
+  }, [])
+
+  return (
+    <View style={{ flex: 1, backgroundColor: 'black' }}>
+      <VideoFeedView ref={feedRef} style={StyleSheet.absoluteFill} />
+    </View>
+  )
+}
+```
+
+## API
+
+Drive the native view imperatively via `VideoFeedManagerNative` using `findNodeHandle(ref.current)`:
+
+| Method | Description |
+|--------|-------------|
+| `setVideos(reactTag, videos)` | Replace the feed contents |
+| `appendVideos(reactTag, videos)` | Append more videos (pagination) |
+| `setFeedActive(reactTag, isActive)` | Pause/resume the whole feed |
+| `pauseVideo(reactTag)` / `playVideo(reactTag)` | Control the current video |
+| `togglePlayPause(reactTag)` | Toggle current video |
+| `isVideoPlaying(reactTag)` | Query playing state |
+
+Video item shape:
+
+```ts
+type FeedPlayerNativeProps = {
+  id?: string
+  videoUrl?: string
+  thumbnailUrl?: string
+  viewCount?: number
+}
+```
+
+Events (`VideoFeedEmitter` / `DeviceEventEmitter`): `onVideoChange` `{ videoId }`,
+`onVideoTapped` `{ isPlaying }`, `onEndReached`.
+
+## License
+
+MIT © Venkatesh Mandapati
+
+Full docs, the sample app, and source: https://github.com/venky145/RN-VideoFeed

package/RNVideoFeed.podspec

@@ -0,0 +1,25 @@
+require 'json'
+
+package = JSON.parse(File.read(File.join(__dir__, 'package.json')))
+
+Pod::Spec.new do |s|
+  s.name         = 'RNVideoFeed'
+  s.version      = package['version']
+  s.summary      = package['description']
+  s.homepage     = 'https://github.com/venky145/RN-VideoFeed'
+  s.license      = { :type => 'MIT', :file => 'LICENSE' }
+  s.author       = package['author']
+  s.source       = { :git => 'https://github.com/venky145/RN-VideoFeed.git', :tag => "v#{s.version}" }
+
+  s.platforms    = { :ios => '16.0' }
+  s.source_files = 'ios/**/*.{h,m,mm,swift}'
+  s.swift_version = '5.0'
+
+  s.dependency 'SDWebImage', '~> 5.19'
+
+  if respond_to?(:install_modules_dependencies, true)
+    install_modules_dependencies(s)
+  else
+    s.dependency 'React-Core'
+  end
+end

package/android/build.gradle

@@ -0,0 +1,43 @@
+def safeExtGet(prop, fallback) {
+    rootProject.ext.has(prop) ? rootProject.ext.get(prop) : fallback
+}
+
+apply plugin: "com.android.library"
+apply plugin: "org.jetbrains.kotlin.android"
+
+android {
+    namespace "com.rnvideofeed"
+    compileSdkVersion safeExtGet("compileSdkVersion", 35).toInteger()
+    defaultConfig {
+        minSdkVersion safeExtGet("minSdkVersion", 24).toInteger()
+        targetSdkVersion safeExtGet("targetSdkVersion", 35).toInteger()
+    }
+    compileOptions {
+        sourceCompatibility JavaVersion.VERSION_17
+        targetCompatibility JavaVersion.VERSION_17
+    }
+    kotlinOptions {
+        jvmTarget = "17"
+    }
+    lint {
+        abortOnError false
+    }
+}
+
+repositories {
+    mavenCentral()
+    google()
+    maven {
+        url "$rootDir/../../react-native/android"
+    }
+}
+
+dependencies {
+    implementation "com.facebook.react:react-native:+"
+    implementation "androidx.recyclerview:recyclerview:1.3.2"
+    implementation "androidx.lifecycle:lifecycle-process:2.7.0"
+    implementation "androidx.media3:media3-exoplayer:1.2.1"
+    implementation "androidx.media3:media3-ui:1.2.1"
+    implementation "androidx.media3:media3-common:1.2.1"
+    implementation "com.github.bumptech.glide:glide:4.16.0"
+}

package/android/src/main/AndroidManifest.xml

@@ -0,0 +1 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android" />

package/android/src/main/java/com/rnvideofeed/FeedPlayer.kt

@@ -0,0 +1,202 @@
+package com.rnvideofeed
+
+import android.content.Context
+import android.util.AttributeSet
+import android.util.Log
+import android.util.Xml
+import android.view.View.MeasureSpec
+import android.widget.FrameLayout
+import androidx.media3.common.PlaybackException
+import androidx.media3.common.Player
+import androidx.media3.common.VideoSize
+import androidx.media3.exoplayer.ExoPlayer
+import androidx.media3.ui.PlayerView
+import androidx.media3.ui.AspectRatioFrameLayout
+
+class FeedPlayer @JvmOverloads constructor(
+    context: Context,
+    attrs: AttributeSet? = null,
+    defStyleAttr: Int = 0
+) : FrameLayout(context, attrs, defStyleAttr) {
+
+    var player: ExoPlayer? = null
+        private set
+    private val playerView: PlayerView
+    private val TAG = "FeedPlayer"
+
+    var videoUrl: String? = null
+        private set
+
+    var videoId: String = ""
+        private set
+
+    var isVisible: Boolean = true
+        set(value) {
+            field = value
+            if (value) {
+                player?.play()
+            } else {
+                player?.pause()
+                hasNotifiedVideoStarted = false
+                if (!isManualPause) {
+                    onVideoPaused?.invoke()
+                }
+            }
+        }
+
+    private var currentAppliedResizeMode: Int = AspectRatioFrameLayout.RESIZE_MODE_FIT
+
+    private val layoutRunnable = Runnable {
+        if (isAttachedToWindow) {
+            measure(
+                MeasureSpec.makeMeasureSpec(width, MeasureSpec.EXACTLY),
+                MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY)
+            )
+            layout(left, top, right, bottom)
+        }
+    }
+
+    private var isManualPause: Boolean = false
+    private var hasNotifiedVideoStarted: Boolean = false
+    private var playerListener: Player.Listener? = null
+
+    fun setManualPause(manual: Boolean) {
+        isManualPause = manual
+    }
+
+    var onVideoStarted: (() -> Unit)? = null
+    var onVideoPaused: (() -> Unit)? = null
+
+    init {
+        playerView = createTexturePlayerView(context)
+        playerView.apply {
+            useController = false
+            setShutterBackgroundColor(android.R.color.black)
+            layoutParams = LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT)
+            resizeMode = currentAppliedResizeMode
+        }
+
+        addView(playerView)
+        setBackgroundColor(context.getColor(android.R.color.black))
+    }
+
+    fun bindFromPool(pool: VideoFeedPlayerPool, id: String, url: String) {
+        if (videoId == id && player != null && pool.hasPlayer(id, url)) {
+            return
+        }
+
+        detachPlayer()
+
+        videoId = id
+        videoUrl = url
+        hasNotifiedVideoStarted = false
+
+        val exoPlayer = pool.acquire(id, url)
+        attachPlayer(exoPlayer)
+    }
+
+    fun hasPlaybackPosition(): Boolean {
+        return (player?.currentPosition ?: 0L) > 300L
+    }
+
+    private fun attachPlayer(exoPlayer: ExoPlayer) {
+        playerListener?.let { exoPlayer.removeListener(it) }
+
+        val listener = createPlayerListener()
+        playerListener = listener
+        exoPlayer.addListener(listener)
+
+        player = exoPlayer
+        playerView.player = exoPlayer
+        playerView.resizeMode = currentAppliedResizeMode
+    }
+
+    private fun createPlayerListener(): Player.Listener {
+        return object : Player.Listener {
+            override fun onVideoSizeChanged(videoSize: VideoSize) {
+                currentAppliedResizeMode = AspectRatioFrameLayout.RESIZE_MODE_FIT
+                playerView.resizeMode = currentAppliedResizeMode
+                playerView.requestLayout()
+                requestLayout()
+                player?.videoScalingMode = androidx.media3.common.C.VIDEO_SCALING_MODE_SCALE_TO_FIT
+            }
+
+            override fun onPlaybackStateChanged(playbackState: Int) {
+                if (playbackState == Player.STATE_READY) {
+                    val videoFormat = player?.videoFormat
+                    if (videoFormat != null && videoFormat.width > 0 && videoFormat.height > 0) {
+                        onVideoSizeChanged(VideoSize(videoFormat.width, videoFormat.height))
+                    }
+                    notifyVideoStartedIfPlaying()
+                }
+            }
+
+            override fun onIsPlayingChanged(isPlaying: Boolean) {
+                if (isPlaying) {
+                    notifyVideoStartedIfPlaying()
+                }
+            }
+
+            override fun onPlayerError(error: PlaybackException) {
+                Log.e(TAG, "Playback error: ${error.message}")
+                hasNotifiedVideoStarted = false
+                onVideoPaused?.invoke()
+            }
+        }
+    }
+
+    private fun notifyVideoStartedIfPlaying() {
+        val p = player ?: return
+        if (isVisible && p.isPlaying && p.playbackState == Player.STATE_READY && !hasNotifiedVideoStarted) {
+            hasNotifiedVideoStarted = true
+            Log.d(TAG, "Video ready and playing — notifying listeners")
+            onVideoStarted?.invoke()
+        }
+    }
+
+    private fun createTexturePlayerView(context: Context): PlayerView {
+        val parser = context.resources.getXml(R.xml.player_view_texture)
+        parser.next()
+        parser.nextTag()
+        val attrs: AttributeSet = Xml.asAttributeSet(parser)
+        return PlayerView(context, attrs)
+    }
+
+    /** Detach from the view without releasing the pooled ExoPlayer instance. */
+    fun detachPlayer() {
+        playerListener?.let { listener ->
+            player?.removeListener(listener)
+        }
+        playerListener = null
+        player?.pause()
+        playerView.player = null
+        player = null
+        hasNotifiedVideoStarted = false
+    }
+
+    fun reset() {
+        detachPlayer()
+        videoId = ""
+        videoUrl = null
+        isVisible = false
+    }
+
+    override fun requestLayout() {
+        super.requestLayout()
+        removeCallbacks(layoutRunnable)
+        post(layoutRunnable)
+    }
+
+    override fun onLayout(changed: Boolean, left: Int, top: Int, right: Int, bottom: Int) {
+        super.onLayout(changed, left, top, right, bottom)
+        if (changed) {
+            playerView.resizeMode = currentAppliedResizeMode
+            playerView.requestLayout()
+        }
+    }
+
+    override fun onDetachedFromWindow() {
+        super.onDetachedFromWindow()
+        detachPlayer()
+    }
+}

package/android/src/main/java/com/rnvideofeed/VideoData.kt

@@ -0,0 +1,8 @@
+package com.rnvideofeed
+
+data class VideoData(
+    val id: String,
+    val videoUrl: String,
+    val thumbnailUrl: String?,
+    val viewCount: Int?
+) 

package/android/src/main/java/com/rnvideofeed/VideoFeedCell.kt

@@ -0,0 +1,185 @@
+package com.rnvideofeed
+
+import android.content.Context
+import android.os.Handler
+import android.os.Looper
+import android.util.Log
+import android.view.View
+import android.view.ViewGroup
+import android.widget.FrameLayout
+import android.widget.ImageView
+import androidx.recyclerview.widget.RecyclerView
+import com.bumptech.glide.Glide
+import com.bumptech.glide.load.engine.DiskCacheStrategy
+
+class VideoFeedCell(context: Context) : RecyclerView.ViewHolder(
+    FrameLayout(context).apply {
+        layoutParams = RecyclerView.LayoutParams(
+            ViewGroup.LayoutParams.MATCH_PARENT,
+            ViewGroup.LayoutParams.MATCH_PARENT
+        )
+    }
+) {
+
+    private val TAG = "VideoFeedCell"
+    private val container = itemView as FrameLayout
+
+    val feedPlayer: FeedPlayer = FeedPlayer(context)
+    private val thumbnailImageView: ImageView = ImageView(context)
+
+    private var hideThumbnailHandler: Handler? = null
+    private var hideThumbnailRunnable: Runnable? = null
+
+    init {
+        container.setBackgroundColor(context.getColor(android.R.color.black))
+
+        // Setup thumbnail image view
+        thumbnailImageView.apply {
+            layoutParams = FrameLayout.LayoutParams(
+                FrameLayout.LayoutParams.MATCH_PARENT,
+                FrameLayout.LayoutParams.MATCH_PARENT
+            )
+            // FIT_CENTER to match video behavior - shows full content with letterboxing
+            scaleType = ImageView.ScaleType.FIT_CENTER
+            adjustViewBounds = true
+            setBackgroundColor(android.graphics.Color.BLACK)
+        }
+
+        // Setup feed player
+        feedPlayer.apply {
+            layoutParams = FrameLayout.LayoutParams(
+                FrameLayout.LayoutParams.MATCH_PARENT,
+                FrameLayout.LayoutParams.MATCH_PARENT
+            )
+        }
+
+        // Add views to container (order matters - thumbnail should be on top initially)
+        container.addView(feedPlayer)
+        container.addView(thumbnailImageView)
+
+        hideThumbnailHandler = Handler(Looper.getMainLooper())
+
+        // Set up video start/pause callbacks
+        feedPlayer.onVideoStarted = {
+            Log.d(TAG, "🎬 Video actually started - hiding thumbnail with delay")
+            // Give video a moment to start, then hide thumbnail
+            hideThumbnailRunnable?.let { hideThumbnailHandler?.removeCallbacks(it) }
+            hideThumbnailRunnable = Runnable {
+                Log.d(TAG, "🚫 Hiding thumbnail due to video start")
+                thumbnailImageView.animate()
+                    .alpha(0f)
+                    .setDuration(300)
+                    .withEndAction {
+                        thumbnailImageView.visibility = View.GONE
+                        thumbnailImageView.alpha = 1f
+                        Log.d(TAG, "✅ Thumbnail hidden after video start")
+                    }
+                    .start()
+            }
+            hideThumbnailHandler?.postDelayed(hideThumbnailRunnable!!, 300)
+        }
+
+        feedPlayer.onVideoPaused = {
+            Log.d(TAG, "⏸️ Video paused - checking if manual pause")
+            showThumbnail()
+        }
+    }
+
+    fun configure(video: VideoData, playerPool: VideoFeedPlayerPool) {
+        Log.d(TAG, "Configuring cell with video: ${video.id}")
+
+        val resuming = playerPool.hasPlayer(video.id, video.videoUrl) &&
+            playerPool.getPlaybackPosition(video.id) > 300L
+
+        if (resuming) {
+            hideThumbnailImmediately()
+        } else {
+            thumbnailImageView.visibility = View.VISIBLE
+        }
+
+        if (!video.thumbnailUrl.isNullOrEmpty()) {
+            Glide.with(container.context)
+                .load(video.thumbnailUrl)
+                .diskCacheStrategy(DiskCacheStrategy.ALL)
+                .fitCenter()
+                .into(thumbnailImageView)
+            Log.d(TAG, "🖼️ Loading thumbnail: ${video.thumbnailUrl}")
+        } else {
+            thumbnailImageView.scaleType = ImageView.ScaleType.FIT_CENTER
+            thumbnailImageView.setImageDrawable(null)
+            Log.d(TAG, "🖼️ No thumbnail URL — showing black placeholder")
+        }
+
+        feedPlayer.bindFromPool(playerPool, video.id, video.videoUrl)
+        feedPlayer.isVisible = false
+    }
+
+    fun showVideoPlaying() {
+        Log.d(TAG, "🎬 Video playing requested - thumbnail will hide when video actually starts")
+        // The actual thumbnail hiding is now handled by the video start callback
+        // This method is kept for compatibility but the real work is done in the callback
+    }
+
+    fun showThumbnail() {
+        Log.d(TAG, "🖼️ Showing thumbnail (video paused) - current visibility: ${thumbnailImageView.visibility}, alpha: ${thumbnailImageView.alpha}")
+
+        // Cancel any pending hide thumbnail task
+        hideThumbnailRunnable?.let {
+            hideThumbnailHandler?.removeCallbacks(it)
+            Log.d(TAG, "❌ Cancelled pending thumbnail hide task")
+        }
+        hideThumbnailRunnable = null
+
+        // Show thumbnail immediately when video is paused
+        thumbnailImageView.clearAnimation()
+        thumbnailImageView.alpha = 1f
+        thumbnailImageView.visibility = View.VISIBLE
+
+        Log.d(TAG, "✅ Thumbnail now visible - final visibility: ${thumbnailImageView.visibility}, alpha: ${thumbnailImageView.alpha}")
+    }
+
+    fun hideThumbnailImmediately() {
+        Log.d(TAG, "🚫 Hiding thumbnail immediately")
+
+        // Cancel any pending hide thumbnail task
+        hideThumbnailRunnable?.let { hideThumbnailHandler?.removeCallbacks(it) }
+        hideThumbnailRunnable = null
+
+        // Hide thumbnail immediately
+        thumbnailImageView.clearAnimation()
+        thumbnailImageView.visibility = View.GONE
+        thumbnailImageView.alpha = 1f // Reset for next use
+
+        Log.d(TAG, "✅ Thumbnail hidden immediately")
+    }
+
+    fun prepareForReuse(playerPool: VideoFeedPlayerPool) {
+        Log.d(TAG, "🔄 Preparing for reuse")
+
+        hideThumbnailRunnable?.let { hideThumbnailHandler?.removeCallbacks(it) }
+        hideThumbnailRunnable = null
+
+        val id = feedPlayer.videoId
+        if (id.isNotEmpty()) {
+            playerPool.pause(id)
+        }
+        feedPlayer.detachPlayer()
+        feedPlayer.isVisible = false
+
+        thumbnailImageView.visibility = View.VISIBLE
+        thumbnailImageView.alpha = 1f
+        thumbnailImageView.clearAnimation()
+
+        Glide.with(container.context).clear(thumbnailImageView)
+
+        Log.d(TAG, "✅ Cell detached — player kept in pool")
+    }
+
+    fun cleanup() {
+        hideThumbnailHandler?.removeCallbacksAndMessages(null)
+        hideThumbnailHandler = null
+        feedPlayer.onVideoStarted = null
+        feedPlayer.onVideoPaused = null
+        feedPlayer.detachPlayer()
+    }
+}