rn-videofeed 0.1.0

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

@@ -0,0 +1,129 @@
+package com.rnvideofeed
+
+import android.util.Log
+import com.facebook.react.bridge.ReadableArray
+import com.facebook.react.bridge.WritableMap
+import com.facebook.react.bridge.WritableNativeMap
+import com.facebook.react.common.MapBuilder
+import com.facebook.react.modules.core.DeviceEventManagerModule
+import com.facebook.react.uimanager.SimpleViewManager
+import com.facebook.react.uimanager.ThemedReactContext
+
+class VideoFeedViewManager : SimpleViewManager<VideoFeedView>() {
+    
+    private val TAG = "VideoFeedViewManager"
+    
+    override fun getName(): String {
+        return "VideoFeedView"
+    }
+    
+    override fun createViewInstance(reactContext: ThemedReactContext): VideoFeedView {
+        Log.d(TAG, "Creating new VideoFeedView")
+        
+        val view = VideoFeedView(reactContext)
+        // Set the React context for event emission
+        view.setReactContext(reactContext)
+        
+        // Set up event handlers using DeviceEventManagerModule for global events
+        view.onEndReached = {
+            Log.d(TAG, "End reached")
+            reactContext
+                .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter::class.java)
+                .emit("onEndReached", null)
+        }
+        
+        view.onVideoChange = { videoId ->
+            Log.d(TAG, "Video changed: $videoId")
+            val event: WritableMap = WritableNativeMap().apply {
+                putString("videoId", videoId)
+            }
+            reactContext
+                .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter::class.java)
+                .emit("onVideoChange", event)
+        }
+        
+        // Set up tap event handler
+        view.onVideoTapped = { isPlaying ->
+            Log.d(TAG, "Video tapped, isPlaying: $isPlaying")
+            val event: WritableMap = WritableNativeMap().apply {
+                putBoolean("isPlaying", isPlaying)
+            }
+            reactContext
+                .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter::class.java)
+                .emit("onVideoTapped", event)
+        }
+        
+        Log.d(TAG, "VideoFeedView created")
+        return view
+    }
+    
+
+    
+    // Method to be called from React Native
+    fun setVideos(view: VideoFeedView, videos: ReadableArray) {
+        Log.d(TAG, "Setting videos for view")
+        
+        val videoList = mutableListOf<Map<String, Any>>()
+        
+        for (i in 0 until videos.size()) {
+            val videoMap = videos.getMap(i)
+            if (videoMap != null) {
+                val videoData = mutableMapOf<String, Any>()
+                
+                if (videoMap.hasKey("id")) {
+                    videoData["id"] = videoMap.getString("id") ?: ""
+                }
+                if (videoMap.hasKey("videoUrl")) {
+                    videoData["videoUrl"] = videoMap.getString("videoUrl") ?: ""
+                }
+                if (videoMap.hasKey("thumbnailUrl")) {
+                    videoData["thumbnailUrl"] = videoMap.getString("thumbnailUrl") ?: ""
+                }
+                if (videoMap.hasKey("viewCount")) {
+                    videoData["viewCount"] = videoMap.getInt("viewCount")
+                }
+                
+                videoList.add(videoData)
+            }
+        }
+        
+        Log.d(TAG, "Found view, setting videos: ${videoList.size}")
+        view.setVideos(videoList)
+    }
+    
+    fun appendVideos(view: VideoFeedView, videos: ReadableArray) {
+        Log.d(TAG, "Appending videos for view")
+        
+        val videoList = mutableListOf<Map<String, Any>>()
+        
+        for (i in 0 until videos.size()) {
+            val videoMap = videos.getMap(i)
+            if (videoMap != null) {
+                val videoData = mutableMapOf<String, Any>()
+                
+                if (videoMap.hasKey("id")) {
+                    videoData["id"] = videoMap.getString("id") ?: ""
+                }
+                if (videoMap.hasKey("videoUrl")) {
+                    videoData["videoUrl"] = videoMap.getString("videoUrl") ?: ""
+                }
+                if (videoMap.hasKey("thumbnailUrl")) {
+                    videoData["thumbnailUrl"] = videoMap.getString("thumbnailUrl") ?: ""
+                }
+                if (videoMap.hasKey("viewCount")) {
+                    videoData["viewCount"] = videoMap.getInt("viewCount")
+                }
+                
+                videoList.add(videoData)
+            }
+        }
+        
+        Log.d(TAG, "Found view, appending videos: ${videoList.size}")
+        view.appendVideos(videoList)
+    }
+    
+    fun setFeedActive(view: VideoFeedView, isActive: Boolean) {
+        Log.d(TAG, "setFeedActive: isActive = $isActive")
+        view.setFeedActive(isActive)
+    }
+} 

package/android/src/main/res/xml/player_view_texture.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<androidx.media3.ui.PlayerView
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    app:surface_type="texture_view" />

package/index.d.ts

@@ -0,0 +1,30 @@
+import type { ComponentType, RefAttributes } from 'react'
+import type { LayoutChangeEvent, NativeEventEmitter, NativeModule, ViewStyle } from 'react-native'
+
+export type FeedPlayerNativeProps = {
+  id?: string
+  videoUrl?: string
+  thumbnailUrl?: string
+  createdAt?: boolean
+  viewCount?: number
+  style?: ViewStyle
+  onLayout?: (event: LayoutChangeEvent) => void
+}
+
+export declare const VideoFeedView: ComponentType<FeedPlayerNativeProps & RefAttributes<unknown>>
+export default VideoFeedView
+
+export interface VideoFeedManager extends NativeModule {
+  setVideos: (reactTag: number, videos: FeedPlayerNativeProps[]) => void
+  appendVideos: (reactTag: number, videos: FeedPlayerNativeProps[]) => void
+  setFeedActive: (reactTag: number, isActive: boolean) => void
+  addEventListener: (eventName: string) => void
+  removeEventListener: (eventName: string) => void
+  pauseVideo: (reactTag: number) => void
+  playVideo: (reactTag: number) => void
+  togglePlayPause: (reactTag: number) => void
+  isVideoPlaying: (reactTag: number) => void
+}
+
+export declare const VideoFeedManagerNative: VideoFeedManager
+export declare const VideoFeedEmitter: NativeEventEmitter

package/ios/FeedOptions/ContentCardInfoView.swift

@@ -0,0 +1,312 @@
+//
+//  ContentCardInfoView.swift
+//  App
+//
+//  Created by Venkatesh Mandapati on 08/06/2025.
+//
+
+import Foundation
+import UIKit
+
+protocol ContentCardInfoViewDelegate: AnyObject {
+  func didTapOptions()
+  func didTapMuteToggle()
+  func didTapFlag()
+  func didTapViewCount()
+  func didTapTradingVolume()
+  func didTapShare()
+}
+
+class ContentCardInfoView: UIView {
+
+  weak var delegate: ContentCardInfoViewDelegate?
+
+  private let isOwnProfile: Bool
+  private let shouldShowFullScreen: Bool
+  private let isMutedInitial: Bool
+  private let showShareButton: Bool
+
+  // MARK: UI Components
+  
+  func applyShadow(to view: UIView) {
+    view.layer.shadowColor = UIColor.black.cgColor
+    view.layer.shadowOpacity = 0.6
+    view.layer.shadowOffset = CGSize(width: 0, height: 1)
+    view.layer.shadowRadius = 2
+    view.layer.masksToBounds = false
+  }
+
+  private lazy var optionsButton: UIButton = {
+    let button = UIButton(type: .system)
+    button.setImage(UIImage(systemName: "exclamationmark.bubble")?.withRenderingMode(.alwaysTemplate), for: .normal)
+    button.tintColor = .white
+    button.addTarget(self, action: #selector(optionsTapped), for: .touchUpInside)
+    button.isHidden = !isOwnProfile
+    applyShadow(to: button)
+
+    return button
+  }()
+
+  private lazy var muteButton: UIButton = {
+    let button = UIButton(type: .system)
+    updateMuteButtonIcon(isMuted: isMutedInitial, button: button)
+    let imageName = isMutedInitial ? "speaker.slash" : "speaker.wave.2"
+    button.setImage(UIImage(systemName: imageName)?.withRenderingMode(.alwaysTemplate), for: .normal)
+    button.tintColor = .white
+    button.addTarget(self, action: #selector(muteTapped), for: .touchUpInside)
+    applyShadow(to: button)
+    return button
+  }()
+
+  private lazy var flagButton: UIButton = {
+    let button = UIButton(type: .system)
+    button.setImage(UIImage(systemName: "exclamationmark.bubble")?.withRenderingMode(.alwaysTemplate), for: .normal)
+    button.tintColor = .white
+    button.addTarget(self, action: #selector(flagTapped), for: .touchUpInside)
+    applyShadow(to: button)
+    return button
+  }()
+
+  private lazy var viewCountButton: UIButton = {
+    let button = UIButton(type: .system)
+//    button.setImage(UIImage(named: "PlayRegular24")?.withRenderingMode(.alwaysTemplate), for: .normal)
+    button.setImage(UIImage(systemName: "play")?.withRenderingMode(.alwaysTemplate), for: .normal)
+    button.tintColor = .white
+    button.addTarget(self, action: #selector(viewCountTapped), for: .touchUpInside)
+    applyShadow(to: button)
+    return button
+  }()
+
+  private lazy var viewCountLabel: UILabel = {
+    let label = UILabel()
+    label.font = .systemFont(ofSize: 14, weight: .medium)
+    label.textColor = .white
+    label.textAlignment = .center
+    label.adjustsFontSizeToFitWidth = true
+    label.numberOfLines = 1
+    label.text = "10"
+    applyShadow(to: label)
+    return label
+  }()
+
+  private lazy var tradingVolumeButton: UIButton = {
+    let button = UIButton(type: .system)
+//    button.setImage(UIImage(named: "DollarCircleRegular24")?.withRenderingMode(.alwaysTemplate), for: .normal)
+    button.setImage(UIImage(systemName: "dollarsign.circle")?.withRenderingMode(.alwaysTemplate), for: .normal)
+    button.tintColor = .white
+    button.addTarget(self, action: #selector(tradingVolumeTapped), for: .touchUpInside)
+    applyShadow(to: button)
+    return button
+  }()
+
+  private lazy var tradingVolumeLabel: UILabel = {
+    let label = UILabel()
+    label.font = .systemFont(ofSize: 14, weight: .medium)
+    label.textColor = .white
+    label.textAlignment = .center
+    label.adjustsFontSizeToFitWidth = true
+    label.numberOfLines = 1
+    label.text = "$0"
+    applyShadow(to: label)
+    return label
+  }()
+
+  private lazy var shareButton: UIButton = {
+    let button = UIButton(type: .system)
+//    button.setImage(UIImage(named: "ShareContent24")?.withRenderingMode(.alwaysTemplate), for: .normal)
+    button.setImage(UIImage(systemName: "arrowshape.turn.up.right")?.withRenderingMode(.alwaysTemplate), for: .normal)
+    button.tintColor = .white
+    button.addTarget(self, action: #selector(shareTapped), for: .touchUpInside)
+    button.isHidden = !showShareButton
+    applyShadow(to: button)
+    return button
+  }()
+
+  private lazy var shareLabel: UILabel = {
+    let label = UILabel()
+    label.font = .systemFont(ofSize: 14, weight: .medium)
+    label.textColor = .white
+    label.textAlignment = .center
+    label.text = NSLocalizedString("Share", comment: "")
+    label.isHidden = !showShareButton
+    applyShadow(to: label)
+    return label
+  }()
+
+  // MARK: Initialization
+
+  init(
+    isOwnProfile: Bool,
+    isMuted: Bool,
+    viewCount: Int?,
+    tradingVolume: String?,
+    shouldShowFullScreen: Bool,
+    showShareButton: Bool
+  ) {
+    self.isOwnProfile = isOwnProfile
+    self.shouldShowFullScreen = shouldShowFullScreen
+    self.isMutedInitial = isMuted
+    self.showShareButton = showShareButton
+
+    super.init(frame: .zero)
+
+    backgroundColor = .clear
+
+    setupSubviews()
+    setupConstraints()
+
+    // Set labels if data available
+    if let viewCount = viewCount {
+      viewCountLabel.text = formatContentViews(Decimal(viewCount))
+    }
+    if let tradingVolume = tradingVolume {
+      tradingVolumeLabel.text = "$" + formatContentDataValue(Decimal(string: tradingVolume) ?? 0)
+    }
+  }
+
+  required init?(coder: NSCoder) {
+    fatalError("init(coder:) has not been implemented")
+  }
+
+  // MARK: Setup UI
+
+  private func setupSubviews() {
+    addSubview(optionsButton)
+    addSubview(muteButton)
+    addSubview(flagButton)
+
+    addSubview(viewCountButton)
+    addSubview(viewCountLabel)
+
+    addSubview(tradingVolumeButton)
+    addSubview(tradingVolumeLabel)
+
+    addSubview(shareButton)
+    addSubview(shareLabel)
+  }
+
+  private func setupConstraints() {
+    // We'll position vertically on the right side with spacing,
+    // similar to your RN layout: top group (options, mute, flag), bottom group (view count, trading, share)
+    // And add safe area padding top if shouldShowFullScreen is true.
+
+    optionsButton.translatesAutoresizingMaskIntoConstraints = false
+    muteButton.translatesAutoresizingMaskIntoConstraints = false
+    flagButton.translatesAutoresizingMaskIntoConstraints = false
+    viewCountButton.translatesAutoresizingMaskIntoConstraints = false
+    viewCountLabel.translatesAutoresizingMaskIntoConstraints = false
+    tradingVolumeButton.translatesAutoresizingMaskIntoConstraints = false
+    tradingVolumeLabel.translatesAutoresizingMaskIntoConstraints = false
+    shareButton.translatesAutoresizingMaskIntoConstraints = false
+    shareLabel.translatesAutoresizingMaskIntoConstraints = false
+
+    let safeTopInset = UIApplication.shared.windows.first?.safeAreaInsets.top ?? 0
+    let topPadding = shouldShowFullScreen ? safeTopInset + 8 : 16
+
+    NSLayoutConstraint.activate([
+
+      // TOP SECTION
+
+      optionsButton.topAnchor.constraint(equalTo: topAnchor, constant: topPadding),
+      optionsButton.centerXAnchor.constraint(equalTo: centerXAnchor),
+
+      muteButton.topAnchor.constraint(equalTo: optionsButton.bottomAnchor, constant: 8),
+      muteButton.centerXAnchor.constraint(equalTo: centerXAnchor),
+
+      flagButton.topAnchor.constraint(equalTo: muteButton.bottomAnchor, constant: 8),
+      flagButton.centerXAnchor.constraint(equalTo: centerXAnchor),
+
+      // View count (play) at bottom
+      // Share button at bottom
+      shareButton.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -204),
+      shareButton.centerXAnchor.constraint(equalTo: centerXAnchor),
+
+      shareLabel.topAnchor.constraint(equalTo: shareButton.bottomAnchor, constant: 2),
+      shareLabel.centerXAnchor.constraint(equalTo: centerXAnchor),
+      shareLabel.widthAnchor.constraint(lessThanOrEqualToConstant: 40),
+
+      // Trading volume ABOVE share
+      tradingVolumeButton.bottomAnchor.constraint(equalTo: shareButton.topAnchor, constant: -46),
+      tradingVolumeButton.centerXAnchor.constraint(equalTo: centerXAnchor),
+
+      tradingVolumeLabel.topAnchor.constraint(equalTo: tradingVolumeButton.bottomAnchor, constant: 2),
+      tradingVolumeLabel.centerXAnchor.constraint(equalTo: centerXAnchor),
+      tradingVolumeLabel.widthAnchor.constraint(lessThanOrEqualToConstant: 50),
+
+      // View count ABOVE trading volume
+      viewCountButton.bottomAnchor.constraint(equalTo: tradingVolumeButton.topAnchor, constant: -46),
+      viewCountButton.centerXAnchor.constraint(equalTo: centerXAnchor),
+
+      viewCountLabel.topAnchor.constraint(equalTo: viewCountButton.bottomAnchor, constant: 2),
+      viewCountLabel.centerXAnchor.constraint(equalTo: centerXAnchor),
+      viewCountLabel.widthAnchor.constraint(lessThanOrEqualToConstant: 40),
+
+    ])
+
+  }
+
+  // MARK: Helpers
+
+  private func updateMuteButtonIcon(isMuted: Bool, button: UIButton) {
+    let imageName = isMuted ? "speaker.slash" : "speaker.wave.2"
+    button.setImage(UIImage(systemName: imageName)?.withRenderingMode(.alwaysTemplate), for: .normal)
+  }
+
+  func updateMuteState(isMuted: Bool) {
+    updateMuteButtonIcon(isMuted: isMuted, button: muteButton)
+  }
+
+  func updateViewCount(_ count: Int) {
+    viewCountLabel.text = formatContentViews(Decimal(count))
+  }
+
+  func updateTradingVolume(_ volume: String) {
+    tradingVolumeLabel.text = "$" + formatContentDataValue(Decimal(string: volume) ?? 0)
+  }
+
+  // MARK: Button Actions
+
+  @objc private func optionsTapped() {
+    delegate?.didTapOptions()
+  }
+
+  @objc private func muteTapped() {
+    delegate?.didTapMuteToggle()
+  }
+
+  @objc private func flagTapped() {
+    delegate?.didTapFlag()
+  }
+
+  @objc private func viewCountTapped() {
+    delegate?.didTapViewCount()
+  }
+
+  @objc private func tradingVolumeTapped() {
+    delegate?.didTapTradingVolume()
+  }
+
+  @objc private func shareTapped() {
+    delegate?.didTapShare()
+  }
+}
+
+// Helpers to mimic your formatting from RN utils:
+
+import Foundation
+
+func formatContentViews(_ value: Decimal) -> String {
+  // Simplified format, e.g. 1.2K, 3.5M
+  if value >= 1_000_000 {
+    return String(format: "%.1fM", NSDecimalNumber(decimal: value).doubleValue / 1_000_000)
+  }
+  if value >= 1_000 {
+    return String(format: "%.1fK", NSDecimalNumber(decimal: value).doubleValue / 1_000)
+  }
+  return NSDecimalNumber(decimal: value).stringValue
+}
+
+func formatContentDataValue(_ value: Decimal) -> String {
+  // Format trading volume, e.g. 12.3K, 1.5M
+  return formatContentViews(value)
+}

package/ios/FeedPlayer.swift

@@ -0,0 +1,174 @@
+//
+//  FeedPlayer.swift
+//  App
+//
+//  Created by Venkatesh Mandapati on 15/05/2025.
+//
+
+
+
+import Foundation
+import AVFoundation
+
+class FeedPlayer: UIView {
+    private(set) var player: AVPlayer?
+    private(set) var playerLayer: AVPlayerLayer?
+    var onVideoStartedPlaying: (() -> Void)?
+    private var timeControlStatusObserver: NSKeyValueObservation?
+  
+    @objc var videoUrl: NSString? {
+        didSet {
+            print("FeedPlayer - Setting video URL:", videoUrl ?? "nil")
+            if let videoUrl = videoUrl as String? {
+                setupPlayer(with: videoUrl)
+            }
+        }
+    }
+
+    @objc var id: NSString = "" {
+        didSet {
+            print("FeedPlayer - Setting ID:", id)
+        }
+    }
+
+    @objc var isVisible: Bool = true {
+        didSet {
+            print("FeedPlayer - Setting visibility:", isVisible)
+            if isVisible {
+                player?.play()
+            } else {
+                player?.pause()
+            }
+        }
+    }
+
+    override init(frame: CGRect) {
+        super.init(frame: frame)
+        self.backgroundColor = .clear
+    }
+
+    required init?(coder: NSCoder) {
+        fatalError("init(coder:) has not been implemented")
+    }
+
+    private func setupPlayer(with urlString: String) {
+        print("FeedPlayer - Setting up player with URL:", urlString)
+        guard let url = URL(string: urlString) else {
+            print("⚠️ Invalid URL: \(urlString)")
+            return
+        }
+      
+      // Ensure audio plays even on silent
+          do {
+              try AVAudioSession.sharedInstance().setCategory(.playback, mode: .default, options: [])
+              try AVAudioSession.sharedInstance().setActive(true)
+          } catch {
+              print("Failed to set AVAudioSession:", error)
+          }
+
+        // Clean up
+        playerLayer?.removeFromSuperlayer()
+        player?.pause()
+        if let oldItem = player?.currentItem {
+            oldItem.removeObserver(self, forKeyPath: "presentationSize")
+        }
+
+        let asset = AVAsset(url: url)
+        let playerItem = AVPlayerItem(asset: asset)
+
+        playerItem.addObserver(self, forKeyPath: "status", options: [.old, .new], context: nil)
+
+        player = AVPlayer(playerItem: playerItem)
+        player?.isMuted = false
+
+        playerLayer = AVPlayerLayer(player: player)
+        playerLayer?.frame = bounds
+      playerLayer?.videoGravity = .resizeAspect
+
+        if let playerLayer = playerLayer {
+            layer.addSublayer(playerLayer)
+        }
+
+        // Observe timeControlStatus to detect when video actually starts playing
+        timeControlStatusObserver = player?.observe(\.timeControlStatus, options: [.new]) { [weak self] player, _ in
+            if player.timeControlStatus == .playing {
+                DispatchQueue.main.async {
+                    self?.onVideoStartedPlaying?()
+                }
+            }
+        }
+
+        // Loop
+        NotificationCenter.default.addObserver(
+            forName: .AVPlayerItemDidPlayToEndTime,
+            object: playerItem,
+            queue: .main
+        ) { [weak self] _ in
+            self?.player?.seek(to: .zero)
+            self?.player?.play()
+        }
+
+        if isVisible {
+            player?.play()
+        }
+    }
+
+    func reset() {
+        timeControlStatusObserver?.invalidate()
+        timeControlStatusObserver = nil
+        player?.pause()
+        player = nil
+        playerLayer?.removeFromSuperlayer()
+        playerLayer = nil
+        onVideoStartedPlaying = nil
+    }
+
+    override func layoutSubviews() {
+        super.layoutSubviews()
+        playerLayer?.frame = bounds
+    }
+
+    deinit {
+        reset()
+        NotificationCenter.default.removeObserver(self)
+    }
+    
+    // MARK: - KVO Observer
+    override func observeValue(forKeyPath keyPath: String?, of object: Any?,
+                               change: [NSKeyValueChangeKey : Any]?, context: UnsafeMutableRawPointer?) {
+        if keyPath == "status" {
+            if let item = object as? AVPlayerItem {
+                switch item.status {
+                case .readyToPlay:
+                    print("✅ FeedPlayer - Ready to play")
+                case .failed:
+                    if let error = item.error {
+                        print("❌ FeedPlayer - Player item failed: \(error.localizedDescription)")
+                        
+                        // Check for specific HTTP errors (404, etc.)
+                        if let nsError = error as NSError? {
+                            if nsError.domain == NSURLErrorDomain {
+                                switch nsError.code {
+                                case NSURLErrorFileDoesNotExist, NSURLErrorCannotFindHost:
+                                    print("🚨 FeedPlayer - 404 Error: Video file not found")
+                                case NSURLErrorNotConnectedToInternet:
+                                    print("🚨 FeedPlayer - Network Error: No internet connection")
+                                case NSURLErrorTimedOut:
+                                    print("🚨 FeedPlayer - Timeout Error: Request timed out")
+                                case NSURLErrorCannotConnectToHost:
+                                    print("🚨 FeedPlayer - Connection Error: Cannot connect to host")
+                                default:
+                                    print("🚨 FeedPlayer - Network Error: \(nsError.localizedDescription)")
+                                }
+                            }
+                        }
+                    }
+                case .unknown:
+                    print("⚠️ FeedPlayer - Unknown status")
+                @unknown default:
+                    break
+                }
+            }
+        }
+    }
+}