expo-video 2.0.0 → 2.0.2

package/CHANGELOG.md

@@ -10,6 +10,17 @@
 
 ### 💡 Others
 
+## 2.0.2 — 2024-11-29
+
+_This version does not introduce any user-facing changes._
+
+## 2.0.1 — 2024-11-19
+
+### 🐛 Bug fixes
+
+- [Android] Fixed `border` related props weren't applied correctly. ([#33075](https://github.com/expo/expo/pull/33075) by [@lukmccall](https://github.com/lukmccall))
+- [Android] Fix controls sometimes flashing on initial display of the view, when `useNativeControls` is `false` ([#33238](https://github.com/expo/expo/pull/33238) by [@behenate](https://github.com/behenate))
+
 ## 2.0.0 — 2024-11-11
 
 ### 💡 Others

package/android/build.gradle

@@ -1,7 +1,7 @@
 apply plugin: 'com.android.library'
 
 group = 'host.exp.exponent'
-version = '2.0.0'
+version = '2.0.2'
 
 def expoModulesCorePlugin = new File(project(":expo-modules-core").projectDir.absolutePath, "ExpoModulesCorePlugin.gradle")
 apply from: expoModulesCorePlugin
@@ -14,7 +14,7 @@ android {
   namespace "expo.modules.video"
   defaultConfig {
     versionCode 1
-    versionName '2.0.0'
+    versionName '2.0.2'
   }
 }
 

package/android/src/main/java/expo/modules/video/VideoModule.kt

@@ -7,10 +7,6 @@ import androidx.media3.common.PlaybackParameters
 import androidx.media3.common.Player.REPEAT_MODE_OFF
 import androidx.media3.common.Player.REPEAT_MODE_ONE
 import com.facebook.react.common.annotations.UnstableReactNativeAPI
-import com.facebook.react.uimanager.PixelUtil
-import com.facebook.react.uimanager.Spacing
-import com.facebook.react.uimanager.ViewProps
-import com.facebook.yoga.YogaConstants
 import expo.modules.kotlin.apifeatures.EitherType
 import expo.modules.kotlin.functions.Coroutine
 import expo.modules.kotlin.modules.Module
@@ -22,8 +18,6 @@ import expo.modules.video.player.VideoPlayer
 import expo.modules.video.records.BufferOptions
 import expo.modules.video.records.SubtitleTrack
 import expo.modules.video.records.VideoSource
-import expo.modules.video.utils.ifYogaDefinedUse
-import expo.modules.video.utils.makeYogaUndefinedIfNegative
 import expo.modules.video.utils.runWithPiPMisconfigurationSoftHandling
 import kotlinx.coroutines.async
 import kotlinx.coroutines.awaitAll
@@ -80,55 +74,6 @@ class VideoModule : Module() {
         view.videoPlayer?.requiresLinearPlayback = linearPlayback
       }
 
-      PropGroup(
-        ViewProps.BORDER_RADIUS to 0,
-        ViewProps.BORDER_TOP_LEFT_RADIUS to 1,
-        ViewProps.BORDER_TOP_RIGHT_RADIUS to 2,
-        ViewProps.BORDER_BOTTOM_RIGHT_RADIUS to 3,
-        ViewProps.BORDER_BOTTOM_LEFT_RADIUS to 4,
-        ViewProps.BORDER_TOP_START_RADIUS to 5,
-        ViewProps.BORDER_TOP_END_RADIUS to 6,
-        ViewProps.BORDER_BOTTOM_START_RADIUS to 7,
-        ViewProps.BORDER_BOTTOM_END_RADIUS to 8
-      ) { view: VideoView, index: Int, borderRadius: Float? ->
-        val radius = makeYogaUndefinedIfNegative(borderRadius ?: YogaConstants.UNDEFINED)
-        view.setBorderRadius(index, radius)
-      }
-
-      PropGroup(
-        ViewProps.BORDER_WIDTH to Spacing.ALL,
-        ViewProps.BORDER_LEFT_WIDTH to Spacing.LEFT,
-        ViewProps.BORDER_RIGHT_WIDTH to Spacing.RIGHT,
-        ViewProps.BORDER_TOP_WIDTH to Spacing.TOP,
-        ViewProps.BORDER_BOTTOM_WIDTH to Spacing.BOTTOM,
-        ViewProps.BORDER_START_WIDTH to Spacing.START,
-        ViewProps.BORDER_END_WIDTH to Spacing.END
-      ) { view: VideoView, index: Int, width: Float? ->
-        val pixelWidth = makeYogaUndefinedIfNegative(width ?: YogaConstants.UNDEFINED)
-          .ifYogaDefinedUse(PixelUtil::toPixelFromDIP)
-        view.setBorderWidth(index, pixelWidth)
-      }
-
-      PropGroup(
-        ViewProps.BORDER_COLOR to Spacing.ALL,
-        ViewProps.BORDER_LEFT_COLOR to Spacing.LEFT,
-        ViewProps.BORDER_RIGHT_COLOR to Spacing.RIGHT,
-        ViewProps.BORDER_TOP_COLOR to Spacing.TOP,
-        ViewProps.BORDER_BOTTOM_COLOR to Spacing.BOTTOM,
-        ViewProps.BORDER_START_COLOR to Spacing.START,
-        ViewProps.BORDER_END_COLOR to Spacing.END
-      ) { view: VideoView, index: Int, color: Int ->
-        view.setBorderColor(index, color)
-      }
-
-      Prop("borderStyle") { view: VideoView, borderStyle: String? ->
-        view.setBorderStyle(borderStyle)
-      }
-
-      OnViewDidUpdateProps { view: VideoView ->
-        view.didUpdateProps()
-      }
-
       AsyncFunction("enterFullscreen") { view: VideoView ->
         view.enterFullscreen()
       }
@@ -150,6 +95,12 @@ class VideoModule : Module() {
       OnViewDestroys {
         VideoManager.unregisterVideoView(it)
       }
+
+      OnViewDidUpdateProps { view ->
+        if (view.playerView.useController != view.useNativeControls) {
+          view.playerView.useController = view.useNativeControls
+        }
+      }
     }
 
     Class(VideoPlayer::class) {

package/android/src/main/java/expo/modules/video/VideoView.kt

@@ -4,7 +4,6 @@ import android.app.Activity
 import android.app.PictureInPictureParams
 import android.content.Context
 import android.content.Intent
-import android.graphics.Canvas
 import android.os.Build
 import android.util.Rational
 import android.view.View
@@ -14,27 +13,16 @@ import android.widget.ImageButton
 import androidx.fragment.app.FragmentActivity
 import androidx.media3.common.Tracks
 import androidx.media3.ui.PlayerView
-import com.facebook.react.common.annotations.UnstableReactNativeAPI
-import com.facebook.react.modules.i18nmanager.I18nUtil
-import com.facebook.react.uimanager.LengthPercentage
-import com.facebook.react.uimanager.LengthPercentageType
-import com.facebook.react.uimanager.PixelUtil
-import com.facebook.react.uimanager.Spacing
-import com.facebook.react.uimanager.drawable.CSSBackgroundDrawable
-import com.facebook.react.uimanager.style.BorderRadiusProp
-import com.facebook.yoga.YogaConstants
 import expo.modules.kotlin.AppContext
 import expo.modules.kotlin.viewevent.EventDispatcher
 import expo.modules.kotlin.views.ExpoView
 import expo.modules.video.delegates.IgnoreSameSet
-import expo.modules.video.drawing.OutlineProvider
 import expo.modules.video.enums.ContentFit
 import expo.modules.video.player.VideoPlayer
 import expo.modules.video.player.VideoPlayerListener
 import expo.modules.video.utils.applyAutoEnterPiP
 import expo.modules.video.utils.applyRectHint
 import expo.modules.video.utils.calculateRectHint
-import expo.modules.video.utils.ifYogaDefinedUse
 import java.util.UUID
 
 // https://developer.android.com/guide/topics/media/media3/getting-started/migration-guide#improvements_in_media3
@@ -64,32 +52,6 @@ class VideoView(context: Context, appContext: AppContext) : ExpoView(context, ap
   private val rootViewChildrenOriginalVisibility: ArrayList<Int> = arrayListOf()
   private var pictureInPictureHelperTag: String? = null
 
-  private var shouldInvalided = false
-
-  private val outlineProvider = OutlineProvider(context)
-
-  @UnstableReactNativeAPI
-  private val borderDrawableLazyHolder = lazy {
-    CSSBackgroundDrawable(context).apply {
-      callback = this@VideoView
-
-      outlineProvider.borderRadiiConfig
-        .map { it.ifYogaDefinedUse(PixelUtil::toPixelFromDIP) }
-        .withIndex()
-        .forEach { (i, radius) ->
-          if (i == 0) {
-            setBorderRadius(BorderRadiusProp.BORDER_RADIUS, LengthPercentage(radius, LengthPercentageType.POINT))
-          } else {
-            setBorderRadius(BorderRadiusProp.entries[i - 1], LengthPercentage(radius, LengthPercentageType.POINT))
-          }
-        }
-    }
-  }
-
-  @UnstableReactNativeAPI
-  private val borderDrawable
-    get() = borderDrawableLazyHolder.value
-
   var autoEnterPiP: Boolean by IgnoreSameSet(false) { new, _ ->
     applyAutoEnterPiP(currentActivity, new)
   }
@@ -145,6 +107,9 @@ class VideoView(context: Context, appContext: AppContext) : ExpoView(context, ap
   init {
     VideoManager.registerVideoView(this)
     playerView.setFullscreenButtonClickListener { enterFullscreen() }
+    // The prop `useNativeControls` prop is sometimes applied after the view is created, and sometimes there is a visible
+    // flash of controls event when they are set to off. Initially we set it to `false` and apply it in `onAttachedToWindow` to avoid this.
+    this.playerView.useController = false
     addView(
       playerView,
       ViewGroup.LayoutParams(
@@ -277,31 +242,6 @@ class VideoView(context: Context, appContext: AppContext) : ExpoView(context, ap
     applyRectHint(currentActivity, calculateRectHint(playerView))
   }
 
-  @UnstableReactNativeAPI
-  override fun draw(canvas: Canvas) {
-    // When the border-radii are not all the same, a convex-path
-    // is used for the Outline. Unfortunately clipping is not supported
-    // for convex-paths and we fallback to Canvas clipping.
-    outlineProvider.clipCanvasIfNeeded(canvas, this)
-
-    super.draw(canvas)
-
-    // Draw borders on top of the video
-    if (borderDrawableLazyHolder.isInitialized()) {
-      val newLayoutDirection = if (I18nUtil.instance.isRTL(context)) {
-        LAYOUT_DIRECTION_RTL
-      } else {
-        LAYOUT_DIRECTION_LTR
-      }
-
-      borderDrawable.apply {
-        layoutDirection = newLayoutDirection
-        setBounds(0, 0, width, height)
-        draw(canvas)
-      }
-    }
-  }
-
   override fun onAttachedToWindow() {
     super.onAttachedToWindow()
     (currentActivity as? FragmentActivity)?.let {
@@ -326,78 +266,6 @@ class VideoView(context: Context, appContext: AppContext) : ExpoView(context, ap
     applyAutoEnterPiP(currentActivity, false)
   }
 
-  @UnstableReactNativeAPI
-  internal fun setBorderRadius(position: Int, borderRadius: Float) {
-    val isInvalidated = outlineProvider.setBorderRadius(borderRadius, position)
-    if (isInvalidated) {
-      invalidateOutline()
-      if (!outlineProvider.hasEqualCorners()) {
-        shouldInvalided = true
-      }
-    }
-
-    // Setting the border-radius doesn't necessarily mean that a border
-    // should to be drawn. Only update the border-drawable when needed.
-    if (borderDrawableLazyHolder.isInitialized()) {
-      shouldInvalided = true
-      val radius = borderRadius.ifYogaDefinedUse(PixelUtil::toPixelFromDIP)
-      borderDrawableLazyHolder.value.apply {
-        if (position == 0) {
-          setBorderRadius(BorderRadiusProp.BORDER_RADIUS, LengthPercentage(radius, LengthPercentageType.POINT))
-        } else {
-          setBorderRadius(BorderRadiusProp.entries[position - 1], LengthPercentage(radius, LengthPercentageType.POINT))
-        }
-      }
-    }
-  }
-
-  @UnstableReactNativeAPI
-  internal fun setBorderWidth(position: Int, width: Float) {
-    borderDrawable.setBorderWidth(position, width)
-    shouldInvalided = true
-  }
-
-  @UnstableReactNativeAPI
-  internal fun setBorderColor(position: Int, rgb: Int) {
-    borderDrawable.setBorderColor(position, rgb)
-    shouldInvalided = true
-  }
-
-  @UnstableReactNativeAPI
-  internal fun setBorderStyle(style: String?) {
-    borderDrawable.setBorderStyle(style)
-    shouldInvalided = true
-  }
-
-  @UnstableReactNativeAPI
-  fun didUpdateProps() {
-    val hasBorder = if (borderDrawableLazyHolder.isInitialized()) {
-      val spacings = listOf(
-        Spacing.ALL,
-        Spacing.LEFT,
-        Spacing.RIGHT,
-        Spacing.TOP,
-        Spacing.BOTTOM,
-        Spacing.START,
-        Spacing.END
-      )
-      spacings
-        .any {
-          val boarderWidth = borderDrawable.getBorderWidthOrDefaultTo(YogaConstants.UNDEFINED, it)
-          boarderWidth != YogaConstants.UNDEFINED && boarderWidth > 0f
-        }
-    } else {
-      false
-    }
-
-    // We need to enable drawing on the view to draw the border or background
-    setWillNotDraw(!isOpaque && !hasBorder)
-    if (shouldInvalided) {
-      shouldInvalided = false
-      invalidate()
-    }
-  }
-
   companion object {
     fun isPictureInPictureSupported(currentActivity: Activity): Boolean {
       return Build.VERSION.SDK_INT >= Build.VERSION_CODES.O && currentActivity.packageManager.hasSystemFeature(

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "expo-video",
   "title": "Expo Video",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "description": "A cross-platform, performant video component for React Native and Expo with Web support",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -38,5 +38,5 @@
     "react": "*",
     "react-native": "*"
   },
-  "gitHead": "8f11fad6f46b878de4746b49b18599fc57b5729f"
+  "gitHead": "728158f99d680cf64fb06f08301d3806c18c6f63"
 }