@fishjam-cloud/react-native-client 0.23.0-RC.0 → 0.24.0

package/android/src/main/java/io/fishjam/reactnative/PipContainerView.kt

@@ -0,0 +1,282 @@
+package io.fishjam.reactnative
+
+import android.app.PictureInPictureParams
+import android.content.Context
+import android.os.Build
+import android.util.Log
+import android.view.View
+import android.view.ViewGroup
+import androidx.annotation.RequiresApi
+import androidx.fragment.app.FragmentActivity
+import expo.modules.kotlin.AppContext
+import expo.modules.kotlin.views.ExpoView
+import io.fishjam.reactnative.helpers.PictureInPictureHelperFragment
+import io.fishjam.reactnative.managers.TrackUpdateListener
+import java.lang.ref.WeakReference
+
+data class RemoteTrackInfo(
+    val videoTrack: com.fishjamcloud.client.media.VideoTrack?,
+    val displayName: String?,
+    val videoTrackActive: Boolean
+)
+
+class PipContainerView(
+    context: Context,
+    appContext: AppContext
+) : ExpoView(context, appContext), TrackUpdateListener {
+
+    companion object {
+        private const val TAG = "PipContainerView"
+    }
+
+    private val activityRef: WeakReference<FragmentActivity?> = WeakReference(
+        appContext.currentActivity as? FragmentActivity
+    )
+
+    private val decorView = activityRef.get()?.window?.decorView
+    private val rootView = decorView?.findViewById<ViewGroup>(android.R.id.content)
+    private val rootViewChildrenOriginalVisibility: ArrayList<Int> = arrayListOf()
+
+    private var pictureInPictureHelperTag: String? = null
+    private var pipViews: PipViewContainer? = null
+    private var isPipActive = false
+
+    private val trackSelector = PipTrackSelector()
+    private val viewFactory by lazy { PipViewFactory(context, appContext) }
+
+    @RequiresApi(Build.VERSION_CODES.O)
+    private val pictureInPictureParamsBuilder = PictureInPictureParams.Builder()
+
+    var startAutomatically: Boolean = true
+        set(value) {
+            field = value
+            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.S) {
+                updateAutoEnterEnabled()
+            }
+        }
+
+    var stopAutomatically: Boolean = true
+
+    var primaryPlaceholderText: String = "No camera"
+        set(value) {
+            field = value
+            pipViews?.primaryPlaceholder?.text = value
+        }
+
+    var secondaryPlaceholderText: String = "No active speaker"
+        set(value) {
+            field = value
+            pipViews?.secondaryPlaceholder?.text = value
+        }
+
+    private var remoteTrackInfo: RemoteTrackInfo? = null
+
+    @RequiresApi(Build.VERSION_CODES.O)
+    private fun updatePictureInPictureParams() {
+        val activity = activityRef.get()
+        if (activity == null) {
+            Log.w(TAG, "Cannot update PiP params: activity reference is null")
+            return
+        }
+
+        try {
+            activity.setPictureInPictureParams(pictureInPictureParamsBuilder.build())
+        } catch (e: IllegalStateException) {
+            Log.e(TAG, "Failed to update PiP params", e)
+            emitPipNotSupportedWarning()
+        }
+    }
+
+    private fun emitPipNotSupportedWarning() {
+        RNFishjamClient.sendEvent(
+            EmitableEvent.warning(
+                "Picture-in-Picture is not supported. Enable it in app.json."
+            )
+        )
+    }
+
+    @RequiresApi(Build.VERSION_CODES.S)
+    private fun updateAutoEnterEnabled() {
+        pictureInPictureParamsBuilder.setAutoEnterEnabled(startAutomatically)
+        updatePictureInPictureParams()
+    }
+
+    private fun updatePipViews() {
+        val views = pipViews ?: run {
+            Log.w(TAG, "Cannot update PiP views: pipViews is null")
+            return
+        }
+
+        val localCameraTrack = trackSelector.findLocalCameraTrack()
+        updatePrimaryView(views, localCameraTrack)
+
+        remoteTrackInfo = trackSelector.findSecondaryRemoteTrack(remoteTrackInfo)
+        updateSecondaryView(views, remoteTrackInfo)
+    }
+
+    private fun updatePrimaryView(
+        views: PipViewContainer,
+        localCameraTrack: com.fishjamcloud.client.media.VideoTrack?
+    ) {
+        if (localCameraTrack != null && localCameraTrack.isEnabled()) {
+            views.primaryVideoView.init(localCameraTrack.id())
+            views.primaryVideoView.visibility = View.VISIBLE
+            views.primaryPlaceholder.visibility = View.GONE
+        } else {
+            views.primaryVideoView.visibility = View.GONE
+            views.primaryPlaceholder.visibility = View.VISIBLE
+        }
+    }
+
+    private fun updateSecondaryView(
+        views: PipViewContainer,
+        trackInfo: RemoteTrackInfo?
+    ) {
+        trackInfo?.let { info ->
+            if (info.videoTrackActive && info.videoTrack != null) {
+                views.secondaryVideoView.init(info.videoTrack.id())
+                views.secondaryVideoView.visibility = View.VISIBLE
+                views.secondaryPlaceholder.visibility = View.GONE
+                
+                info.displayName?.let { displayName ->
+                    views.secondaryNameOverlay.text = displayName
+                    views.secondaryNameOverlay.visibility = View.VISIBLE
+                } ?: run {
+                    views.secondaryNameOverlay.visibility = View.GONE
+                }
+            } else {
+                views.secondaryVideoView.visibility = View.GONE
+                views.secondaryPlaceholder.text = info.displayName
+                views.secondaryPlaceholder.visibility = View.VISIBLE
+                views.secondaryNameOverlay.visibility = View.GONE
+            }
+        } ?: run {
+            views.secondaryVideoView.visibility = View.GONE
+            views.secondaryPlaceholder.text = secondaryPlaceholderText
+            views.secondaryPlaceholder.visibility = View.VISIBLE
+            views.secondaryNameOverlay.visibility = View.GONE
+        }
+        views.secondaryContainer.visibility = View.VISIBLE
+    }
+
+    @RequiresApi(Build.VERSION_CODES.O)
+    fun startPictureInPicture() {
+        val activity = activityRef.get()
+        if (activity == null) {
+            Log.w(TAG, "Cannot start PiP: activity reference is null")
+            return
+        }
+
+        try {
+            activity.enterPictureInPictureMode(pictureInPictureParamsBuilder.build())
+        } catch (e: IllegalStateException) {
+            Log.e(TAG, "Failed to enter PiP mode", e)
+            emitPipNotSupportedWarning()
+        }
+    }
+
+    fun stopPictureInPicture() {
+        Log.d(TAG, "stopPictureInPicture called, but no-op on Android")
+    }
+
+    override fun onAttachedToWindow() {
+        super.onAttachedToWindow()
+
+        activityRef.get()?.let { activity ->
+            val fragment = PictureInPictureHelperFragment(this)
+            pictureInPictureHelperTag = fragment.id
+            activity.supportFragmentManager.beginTransaction()
+                .add(fragment, fragment.id)
+                .commitAllowingStateLoss()
+        } ?: Log.w(TAG, "Cannot attach PiP helper: activity reference is null")
+
+        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.S) {
+            updateAutoEnterEnabled()
+        }
+
+        RNFishjamClient.trackUpdateListenersManager.add(this)
+    }
+
+    override fun onDetachedFromWindow() {
+        super.onDetachedFromWindow()
+
+        activityRef.get()?.let { activity ->
+            pictureInPictureHelperTag?.let { tag ->
+                activity.supportFragmentManager.findFragmentByTag(tag)?.let { fragment ->
+                    activity.supportFragmentManager.beginTransaction()
+                        .remove(fragment)
+                        .commitAllowingStateLoss()
+                }
+            }
+        }
+
+        startAutomatically = false
+        RNFishjamClient.trackUpdateListenersManager.remove(this)
+    }
+
+    override fun onTracksUpdate() {
+        if (isPipActive) {
+            updatePipViews()
+        }
+    }
+
+    fun layoutForPiPEnter() {
+        val root = rootView
+        if (root == null) {
+            Log.w(TAG, "Cannot enter PiP layout: rootView is null")
+            return
+        }
+
+        isPipActive = true
+
+        hideAllRootViewChildren(root)
+        pipViews = viewFactory.createPipViews(primaryPlaceholderText, secondaryPlaceholderText)
+        pipViews?.let { views ->
+            root.addView(views.splitScreenContainer)
+        }
+
+        updatePipViews()
+    }
+
+    fun layoutForPiPExit() {
+        val root = rootView
+        if (root == null) {
+            Log.w(TAG, "Cannot exit PiP layout: rootView is null")
+            return
+        }
+
+        isPipActive = false
+
+        pipViews?.let { views ->
+            root.removeView(views.splitScreenContainer)
+            cleanUpViews(views)
+        }
+        pipViews = null
+
+        restoreRootViewChildren(root)
+    }
+
+    private fun cleanUpViews(views: PipViewContainer) {
+        views.primaryVideoView.dispose()
+        views.secondaryVideoView.dispose()
+    }
+
+    private fun hideAllRootViewChildren(rootView: ViewGroup) {
+        rootViewChildrenOriginalVisibility.clear()
+        (0 until rootView.childCount).forEach { i ->
+            val child = rootView.getChildAt(i)
+            rootViewChildrenOriginalVisibility.add(child.visibility)
+            child.visibility = View.GONE
+        }
+    }
+
+    private fun restoreRootViewChildren(rootView: ViewGroup) {
+        rootViewChildrenOriginalVisibility.forEachIndexed { index, originalVisibility ->
+            if (index < rootView.childCount) {
+                rootView.getChildAt(index).visibility = originalVisibility
+            }
+        }
+        rootViewChildrenOriginalVisibility.clear()
+    }
+}
+

package/android/src/main/java/io/fishjam/reactnative/PipContainerViewModule.kt

@@ -0,0 +1,41 @@
+package io.fishjam.reactnative
+
+import expo.modules.kotlin.modules.Module
+import expo.modules.kotlin.modules.ModuleDefinition
+
+class PipContainerViewModule : Module() {
+  override fun definition() =
+    ModuleDefinition {
+      Name("PipContainerViewModule")
+
+      View(PipContainerView::class) {
+        Prop("startAutomatically") { view: PipContainerView, value: Boolean ->
+          view.startAutomatically = value
+        }
+
+        Prop("stopAutomatically") { view: PipContainerView, value: Boolean ->
+          view.stopAutomatically = value
+        }
+
+        // iOS-only property, no-op on Android
+        Prop("allowsCameraInBackground") { _: PipContainerView, _: Boolean -> }
+
+        Prop("primaryPlaceholderText") { view: PipContainerView, value: String ->
+          view.primaryPlaceholderText = value
+        }
+
+        Prop("secondaryPlaceholderText") { view: PipContainerView, value: String ->
+          view.secondaryPlaceholderText = value
+        }
+
+        AsyncFunction("startPictureInPicture") { view: PipContainerView ->
+          view.startPictureInPicture()
+        }
+
+        AsyncFunction("stopPictureInPicture") { view: PipContainerView ->
+          view.stopPictureInPicture()
+        }
+      }
+    }
+}
+

package/android/src/main/java/io/fishjam/reactnative/PipTrackSelector.kt

@@ -0,0 +1,98 @@
+package io.fishjam.reactnative
+
+import com.fishjamcloud.client.media.RemoteAudioTrack
+import com.fishjamcloud.client.media.Track
+import com.fishjamcloud.client.media.VideoTrack
+import com.fishjamcloud.client.models.Peer
+import fishjam.media_events.server.Server
+
+class PipTrackSelector {
+    companion object {
+        private const val METADATA_TYPE = "type"
+        private const val METADATA_CAMERA = "camera"
+        private const val METADATA_DISPLAY_NAME = "displayName"
+        private const val METADATA_NAME = "name"
+    }
+
+    fun findLocalCameraTrack(): VideoTrack? {
+        val peers = RNFishjamClient.getAllPeers()
+        val localEndpointId = RNFishjamClient.fishjamClient.getLocalEndpoint().id
+        val localPeer = peers.find { it.id == localEndpointId } ?: return null
+
+        return localPeer.tracks.values
+            .filterIsInstance<VideoTrack>()
+            .firstOrNull { track ->
+                (track.metadata as? Map<*, *>)?.get(METADATA_TYPE) == METADATA_CAMERA
+            }
+    }
+
+    fun findSecondaryRemoteTrack(currentTrackInfo: RemoteTrackInfo?): RemoteTrackInfo? {
+        val peers = RNFishjamClient.getAllPeers()
+        val localEndpointId = RNFishjamClient.fishjamClient.getLocalEndpoint().id
+        val remotePeers = peers.filter { it.id != localEndpointId }
+
+        if (remotePeers.isEmpty()) {
+            return null
+        }
+
+        remotePeers.firstOrNull { it.hasActiveVoiceActivity() }?.let { activeSpeaker ->
+            return activeSpeaker.toRemoteTrackInfo()
+        }
+
+        currentTrackInfo?.let { currentInfo ->
+          val existingPeer = remotePeers.firstOrNull() { peer -> peer.hasTrack(currentInfo.videoTrack) }
+            if (existingPeer != null) {
+                return existingPeer.toRemoteTrackInfo()
+            }
+        }
+
+        remotePeers.firstOrNull { it.hasVideoTrack() }?.let { peerWithVideo ->
+            return peerWithVideo.toRemoteTrackInfo()
+        }
+
+        return null
+    }
+}
+
+private fun Peer.hasActiveVoiceActivity(): Boolean {
+    return tracks.values
+        .filterIsInstance<RemoteAudioTrack>()
+        .any { it.vadStatus == Server.MediaEvent.VadNotification.Status.STATUS_SPEECH }
+}
+
+private fun Peer.hasTrack(videoTrack: VideoTrack?): Boolean {
+    return videoTrack != null && tracks.values.contains(videoTrack)
+}
+
+private fun Peer.hasVideoTrack(): Boolean {
+    return tracks.values.any { it is VideoTrack }
+}
+
+private fun Peer.getDisplayName(): String {
+    val serverMetadata = metadata?.get("peer") as? Map<*, *>
+    val displayName = serverMetadata?.get("displayName") as? String
+    return displayName ?: id
+}
+
+private fun Track.getTrackActive(): Boolean {
+
+  if (metadata["active"] as? Boolean == false) {
+    return false
+  }
+
+  if (metadata["paused"] as? Boolean == true) {
+    return false
+  }
+
+  return true
+}
+
+private fun Peer.toRemoteTrackInfo(): RemoteTrackInfo {
+    val videoTrack = tracks.values.filterIsInstance<VideoTrack>().firstOrNull()
+    return RemoteTrackInfo(
+        videoTrack = videoTrack,
+        displayName = getDisplayName(),
+        videoTrackActive = videoTrack?.getTrackActive() ?: false
+    )
+}
+

package/android/src/main/java/io/fishjam/reactnative/PipViewFactory.kt

@@ -0,0 +1,186 @@
+package io.fishjam.reactnative
+
+import android.content.Context
+import android.graphics.Color
+import android.graphics.drawable.GradientDrawable
+import android.text.TextUtils
+import android.util.TypedValue
+import android.view.Gravity
+import android.view.View
+import android.view.ViewGroup
+import android.widget.FrameLayout
+import android.widget.LinearLayout
+import android.widget.RelativeLayout
+import android.widget.TextView
+import expo.modules.kotlin.AppContext
+
+data class PipViewContainer(
+    val splitScreenContainer: LinearLayout,
+    val primaryContainer: RelativeLayout,
+    val secondaryContainer: RelativeLayout,
+    val primaryVideoView: VideoRendererView,
+    val secondaryVideoView: VideoRendererView,
+    val primaryPlaceholder: TextView,
+    val secondaryPlaceholder: TextView,
+    val secondaryNameOverlay: TextView
+)
+
+class PipViewFactory(
+    private val context: Context,
+    private val appContext: AppContext
+) {
+    companion object {
+        private const val PLACEHOLDER_COLOR = "#000000"
+        private const val PLACEHOLDER_TEXT_COLOR = Color.WHITE
+        private const val PLACEHOLDER_TEXT_SIZE_SP = 16f
+        private const val VIDEO_LAYOUT_MODE = "FILL"
+        
+        private const val NAME_OVERLAY_TEXT_SIZE_SP = 12f
+        private const val NAME_OVERLAY_PADDING_DP = 5
+        private const val NAME_OVERLAY_MAX_WIDTH_DP = 80
+        private const val NAME_OVERLAY_BG_COLOR = 0x4D000000
+        private const val NAME_OVERLAY_CORNER_RADIUS_DP = 5f
+    }
+
+    fun createPipViews(
+        primaryPlaceholderText: String,
+        secondaryPlaceholderText: String
+    ): PipViewContainer {
+        val primaryContainer = createRelativeLayoutContainer()
+        val secondaryContainer = createRelativeLayoutContainer()
+
+        val primaryPlaceholder = createPlaceholderTextView(primaryPlaceholderText)
+        val secondaryPlaceholder = createPlaceholderTextView(secondaryPlaceholderText)
+
+        val primaryVideoView = createVideoView()
+        val secondaryVideoView = createVideoView()
+        
+        val secondaryNameOverlay = createNameOverlayTextView()
+
+        primaryContainer.apply {
+            addView(primaryPlaceholder, createMatchParentLayoutParams())
+            addView(primaryVideoView, createCenteredLayoutParams())
+        }
+
+        secondaryContainer.apply {
+            addView(secondaryPlaceholder, createMatchParentLayoutParams())
+            addView(secondaryVideoView, createCenteredLayoutParams())
+            addView(secondaryNameOverlay, createNameOverlayLayoutParams())
+        }
+
+        val splitScreenContainer = createSplitScreenContainer().apply {
+            addView(primaryContainer)
+            addView(secondaryContainer)
+        }
+
+        return PipViewContainer(
+            splitScreenContainer = splitScreenContainer,
+            primaryContainer = primaryContainer,
+            secondaryContainer = secondaryContainer,
+            primaryVideoView = primaryVideoView,
+            secondaryVideoView = secondaryVideoView,
+            primaryPlaceholder = primaryPlaceholder,
+            secondaryPlaceholder = secondaryPlaceholder,
+            secondaryNameOverlay = secondaryNameOverlay
+        )
+    }
+
+    private fun createPlaceholderTextView(text: String): TextView {
+        return TextView(context).apply {
+            this.text = text
+            setTextColor(PLACEHOLDER_TEXT_COLOR)
+            gravity = Gravity.CENTER
+            setTextSize(TypedValue.COMPLEX_UNIT_SP, PLACEHOLDER_TEXT_SIZE_SP)
+            setBackgroundColor(Color.parseColor(PLACEHOLDER_COLOR))
+        }
+    }
+
+    private fun createVideoView(): VideoRendererView {
+        return VideoRendererView(context, appContext).apply {
+            setVideoLayout(VIDEO_LAYOUT_MODE)
+            visibility = View.GONE
+        }
+    }
+
+    private fun createSplitScreenContainer(): LinearLayout {
+        return LinearLayout(context).apply {
+            orientation = LinearLayout.HORIZONTAL
+            layoutParams = FrameLayout.LayoutParams(
+                ViewGroup.LayoutParams.MATCH_PARENT,
+                ViewGroup.LayoutParams.MATCH_PARENT
+            )
+        }
+    }
+
+    private fun createRelativeLayoutContainer(): RelativeLayout {
+        return RelativeLayout(context).apply {
+            layoutParams = LinearLayout.LayoutParams(
+                0,
+                ViewGroup.LayoutParams.MATCH_PARENT,
+                1f
+            )
+        }
+    }
+
+    private fun createMatchParentLayoutParams(): RelativeLayout.LayoutParams {
+        return RelativeLayout.LayoutParams(
+            ViewGroup.LayoutParams.MATCH_PARENT,
+            ViewGroup.LayoutParams.MATCH_PARENT
+        )
+    }
+
+    private fun createCenteredLayoutParams(): RelativeLayout.LayoutParams {
+        return RelativeLayout.LayoutParams(
+            ViewGroup.LayoutParams.MATCH_PARENT,
+            ViewGroup.LayoutParams.MATCH_PARENT
+        ).apply {
+            addRule(RelativeLayout.CENTER_IN_PARENT)
+        }
+    }
+    
+    private fun createNameOverlayTextView(): TextView {
+        val paddingPx = dpToPx(NAME_OVERLAY_PADDING_DP)
+        val maxWidthPx = dpToPx(NAME_OVERLAY_MAX_WIDTH_DP)
+        val cornerRadiusPx = dpToPx(NAME_OVERLAY_CORNER_RADIUS_DP.toInt()).toFloat()
+        
+        val background = GradientDrawable().apply {
+            setColor(NAME_OVERLAY_BG_COLOR.toInt())
+            cornerRadii = floatArrayOf(
+                cornerRadiusPx, cornerRadiusPx,
+                0f, 0f,
+                0f, 0f,
+                0f, 0f
+            )
+        }
+        
+        return TextView(context).apply {
+            setTextColor(PLACEHOLDER_TEXT_COLOR)
+            setTextSize(TypedValue.COMPLEX_UNIT_SP, NAME_OVERLAY_TEXT_SIZE_SP)
+            setPadding(paddingPx, paddingPx, paddingPx, paddingPx)
+            maxWidth = maxWidthPx
+            maxLines = 1
+            ellipsize = TextUtils.TruncateAt.END
+            setBackground(background)
+            visibility = View.GONE
+        }
+    }
+    
+    private fun createNameOverlayLayoutParams(): RelativeLayout.LayoutParams {
+        return RelativeLayout.LayoutParams(
+            ViewGroup.LayoutParams.WRAP_CONTENT,
+            ViewGroup.LayoutParams.WRAP_CONTENT
+        ).apply {
+            addRule(RelativeLayout.ALIGN_PARENT_BOTTOM)
+            addRule(RelativeLayout.ALIGN_PARENT_END)
+        }
+    }
+    
+    private fun dpToPx(dp: Int): Int {
+        return TypedValue.applyDimension(
+            TypedValue.COMPLEX_UNIT_DIP,
+            dp.toFloat(),
+            context.resources.displayMetrics
+        ).toInt()
+    }
+}
+

package/android/src/main/java/io/fishjam/reactnative/RNFishjamClient.kt

@@ -905,29 +905,37 @@ class RNFishjamClient(
     }
   }
 
-  override fun onTrackAdded(track: Track) {}
+  override fun onTrackAdded(track: Track) {
+    CoroutineScope(Dispatchers.Main).launch {
+      trackUpdateListenersManager.notifyListeners()
+    }
+  }
 
   override fun onTrackRemoved(track: Track) {
     CoroutineScope(Dispatchers.Main).launch {
       emitEndpoints()
+      trackUpdateListenersManager.notifyListeners()
     }
   }
 
   override fun onTrackUpdated(track: Track) {
     CoroutineScope(Dispatchers.Main).launch {
       emitEndpoints()
+      trackUpdateListenersManager.notifyListeners()
     }
   }
 
   override fun onPeerJoined(peer: Peer) {
     CoroutineScope(Dispatchers.Main).launch {
       emitEndpoints()
+      trackUpdateListenersManager.notifyListeners()
     }
   }
 
   override fun onPeerLeft(peer: Peer) {
     CoroutineScope(Dispatchers.Main).launch {
       emitEndpoints()
+      trackUpdateListenersManager.notifyListeners()
     }
   }
 

package/android/src/main/java/io/fishjam/reactnative/VideoPreviewView.kt

@@ -1,7 +1,9 @@
 package io.fishjam.reactnative
 
 import android.content.Context
+import android.util.Log
 import com.fishjamcloud.client.media.LocalVideoTrack
+import com.fishjamcloud.client.models.Dimensions
 import expo.modules.kotlin.AppContext
 import io.fishjam.reactnative.managers.LocalCameraTrackChangedListener
 

package/android/src/main/java/io/fishjam/reactnative/VideoRendererView.kt

@@ -71,4 +71,6 @@ open class VideoRendererView(
       )
     )
   }
+
+  fun getTrackId(): String? = trackId
 }