expo-video-subtitle 0.1.0

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

@@ -0,0 +1,457 @@
+package expo.modules.video
+
+import android.app.Activity
+import android.content.Context
+import android.content.Intent
+import android.graphics.Color
+import android.os.Build
+import android.view.accessibility.CaptioningManager
+import android.view.LayoutInflater
+import android.view.MotionEvent
+import android.view.View
+import android.view.ViewGroup
+import android.widget.ImageButton
+import androidx.media3.common.Tracks
+import androidx.media3.ui.PlayerView
+import com.facebook.react.bridge.ReactContext
+import com.facebook.react.uimanager.UIManagerHelper
+import com.facebook.react.uimanager.events.EventDispatcher
+import com.facebook.react.uimanager.events.TouchEventCoalescingKeyHelper
+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.enums.ContentFit
+import expo.modules.video.player.VideoPlayer
+import expo.modules.video.listeners.VideoPlayerListener
+import expo.modules.video.listeners.VideoViewListener
+import expo.modules.video.records.AudioTrack
+import expo.modules.video.records.ButtonOptions
+import expo.modules.video.records.SubtitleStyle
+import expo.modules.video.records.SubtitleTrack
+import expo.modules.video.records.VideoSource
+import expo.modules.video.records.VideoTrack
+import expo.modules.video.records.FullscreenOptions
+import expo.modules.video.utils.SubtitleUtils
+import expo.modules.video.utils.dispatchMotionEvent
+import expo.modules.video.managers.VideoManager
+import expo.modules.video.managers.calculateCurrentPipAspectRatio
+import expo.modules.video.records.PiPParams
+import expo.modules.video.utils.calculateRectHint
+import java.lang.ref.WeakReference
+import java.util.UUID
+
+class SurfaceVideoView(context: Context, appContext: AppContext) : VideoView(context, appContext)
+class TextureVideoView(context: Context, appContext: AppContext) : VideoView(context, appContext, true)
+
+@androidx.annotation.OptIn(androidx.media3.common.util.UnstableApi::class)
+open class VideoView(context: Context, appContext: AppContext, useTextureView: Boolean = false) : ExpoView(context, appContext), VideoPlayerListener {
+  val videoViewId: String = UUID.randomUUID().toString()
+  val playerView: PlayerView = LayoutInflater.from(context.applicationContext).inflate(getPlayerViewLayoutId(useTextureView), null) as PlayerView
+  val onPictureInPictureStart by EventDispatcher<Unit>()
+  val onPictureInPictureStop by EventDispatcher<Unit>()
+  val onFullscreenEnter by EventDispatcher<Unit>()
+  val onFullscreenExit by EventDispatcher<Unit>()
+  val onFirstFrameRender by EventDispatcher<Unit>()
+
+  // In some situations we can't detect if the view will enter PiP, in that case the playback will be paused
+  // We can get an event after PiP has started, that's when we should resume playback
+  var wasAutoPaused: Boolean = false
+  var isInFullscreen: Boolean = false
+    private set
+  var currentTrackHasSubtitles = false
+    private set
+  var showsAudioTracksButton = false
+    private set
+
+  var requiresLinearPlayback: Boolean = false
+    set(value) {
+      field = value
+      videoPlayer?.requiresLinearPlayback = value
+      playerView.applyRequiresLinearPlayback(value)
+      applyButtonSettings()
+    }
+
+  var buttonOptions: ButtonOptions = ButtonOptions()
+    set(value) {
+      field = value
+      applyButtonSettings()
+    }
+
+  var subtitleStyle: SubtitleStyle? = null
+    set(value) {
+      field = value
+      SubtitleUtils.configureSubtitleView(playerView, context, value)
+    }
+
+  private var listeners = mutableListOf<WeakReference<VideoViewListener>>()
+  private val currentActivity = appContext.throwingActivity
+  private val decorView = currentActivity.window.decorView
+  private val touchEventCoalescingKeyHelper = TouchEventCoalescingKeyHelper()
+  private var reactNativeEventDispatcher: EventDispatcher? = null
+  private var captioningChangeListener: CaptioningManager.CaptioningChangeListener? = null
+
+  private val windowFocusChangeListener = View.OnFocusChangeListener { _, hasFocus ->
+    if (hasFocus) {
+      // Reconfigure when window gains focus (returning from settings)
+      SubtitleUtils.configureSubtitleView(playerView, context, subtitleStyle)
+    }
+  }
+
+  var pipParams by IgnoreSameSet(PiPParams()) { new, old ->
+    listeners.forEach {
+      it.get()?.onPiPParamsChanged(this, old, new)
+    }
+  }
+    private set
+
+  // We need to keep track of the target surface view visibility, but only apply it when `useExoShutter` is false.
+  var shouldHideSurfaceView: Boolean = true
+
+  var useExoShutter: Boolean? = null
+    set(value) {
+      if (value == true) {
+        playerView.setShutterBackgroundColor(Color.BLACK)
+      } else {
+        playerView.setShutterBackgroundColor(Color.TRANSPARENT)
+      }
+      applySurfaceViewVisibility()
+      field = value
+    }
+
+  var autoEnterPiP: Boolean by IgnoreSameSet(false) { new, _ ->
+    pipParams = pipParams.copy(autoEnter = new)
+  }
+
+  var contentFit: ContentFit = ContentFit.CONTAIN
+    set(value) {
+      playerView.resizeMode = value.toResizeMode()
+      field = value
+    }
+
+  var videoPlayer: VideoPlayer? = null
+    set(newPlayer) {
+      field?.let {
+        VideoManager.onVideoPlayerDetachedFromView(it, this)
+      }
+      val oldPlayer = videoPlayer
+      val hasEmittedFirstFrame = newPlayer?.firstFrameEventGenerator?.hasSentFirstFrameForCurrentMediaItem
+        ?: false
+      oldPlayer?.removeListener(this)
+      newPlayer?.addListener(this)
+      field = newPlayer
+      shouldHideSurfaceView = !hasEmittedFirstFrame
+      applySurfaceViewVisibility()
+      attachPlayer()
+      newPlayer?.let {
+        VideoManager.onVideoPlayerAttachedToView(it, this)
+      }
+      if (oldPlayer != newPlayer) {
+        oldPlayer?.hasBeenDisconnectedFromVideoView()
+      }
+    }
+
+  var useNativeControls: Boolean = true
+    set(value) {
+      val shouldShowSubtitle = value && (buttonOptions.showSubtitles ?: currentTrackHasSubtitles)
+      playerView.useController = value
+      playerView.setShowSubtitleButton(shouldShowSubtitle)
+      field = value
+    }
+
+  var allowsFullscreen: Boolean = true
+    set(value) {
+      if (value) {
+        playerView.setFullscreenButtonClickListener { enterFullscreen() }
+      } else {
+        playerView.setFullscreenButtonClickListener(null)
+        // Setting listener to null should hide the button, but judging by ExoPlayer source code
+        // there is a bug and the button isn't hidden. We need to do it manually.
+        playerView.setFullscreenButtonVisibility(false)
+      }
+      field = value
+    }
+
+  var fullscreenOptions: FullscreenOptions = FullscreenOptions()
+    set(value) {
+      field = value
+      if (value.enable) {
+        playerView.setFullscreenButtonClickListener { enterFullscreen() }
+      } else {
+        playerView.setFullscreenButtonClickListener(null)
+        playerView.setFullscreenButtonVisibility(false)
+      }
+    }
+
+  private val mLayoutRunnable = Runnable {
+    measure(
+      MeasureSpec.makeMeasureSpec(width, MeasureSpec.EXACTLY),
+      MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY)
+    )
+    layout(left, top, right, bottom)
+  }
+
+  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
+
+    // Start with the SurfaceView being transparent to avoid any flickers when the prop value is delivered.
+    this.playerView.setShutterBackgroundColor(Color.TRANSPARENT)
+    this.playerView.videoSurfaceView?.alpha = 0f
+
+    // Configure subtitle view to fix sizing issues with embedded styles
+    SubtitleUtils.configureSubtitleView(playerView, context, subtitleStyle)
+    addView(
+      playerView,
+      ViewGroup.LayoutParams(
+        ViewGroup.LayoutParams.MATCH_PARENT,
+        ViewGroup.LayoutParams.MATCH_PARENT
+      )
+    )
+
+    reactNativeEventDispatcher = UIManagerHelper.getEventDispatcher(appContext.reactContext as ReactContext, id)
+  }
+
+  fun applySurfaceViewVisibility() {
+    if (useExoShutter != true && shouldHideSurfaceView) {
+      playerView.videoSurfaceView?.alpha = 0f
+    } else {
+      playerView.videoSurfaceView?.alpha = 1f
+    }
+  }
+
+  fun enterFullscreen() {
+    val intent = Intent(context, FullscreenPlayerActivity::class.java)
+    intent.putExtra(VideoManager.INTENT_PLAYER_KEY, videoViewId)
+    intent.putExtra(FullscreenPlayerActivity.INTENT_FULLSCREEN_OPTIONS_KEY, fullscreenOptions)
+    // Set before starting the activity to avoid entering PiP unintentionally
+    isInFullscreen = true
+    currentActivity.startActivity(intent)
+
+    // Disable the enter transition
+    if (Build.VERSION.SDK_INT >= 34) {
+      currentActivity.overrideActivityTransition(Activity.OVERRIDE_TRANSITION_OPEN, 0, 0)
+    } else {
+      @Suppress("DEPRECATION")
+      currentActivity.overridePendingTransition(0, 0)
+    }
+    onFullscreenEnter(Unit)
+    pipParams = pipParams.copy(blocksAppFromEntering = true)
+  }
+
+  fun attachPlayer() {
+    videoPlayer?.changeVideoView(this)
+  }
+
+  fun exitFullscreen() {
+    // Fullscreen uses a different PlayerView instance, because of that we need to manually update the non-fullscreen player icon after exiting
+    val fullScreenButton: ImageButton = playerView.findViewById(androidx.media3.ui.R.id.exo_fullscreen)
+    fullScreenButton.setImageResource(androidx.media3.ui.R.drawable.exo_icon_fullscreen_enter)
+    attachPlayer()
+    onFullscreenExit(Unit)
+    isInFullscreen = false
+    pipParams = pipParams.copy(blocksAppFromEntering = false)
+  }
+
+  fun enterPictureInPicture() {
+    if (!isPictureInPictureSupported(currentActivity)) {
+      throw PictureInPictureUnsupportedException()
+    }
+
+    if (playerView.player == null) {
+      throw PictureInPictureEnterException("No player attached to the VideoView")
+    }
+
+    pipParams = pipParams.copy(willEnter = true)
+    VideoManager.pictureInPicture.enterPictureInPicture(this)
+  }
+
+  /**
+   * @param pipCandidate - VideoView that was elected to be displayed in PiP
+   */
+  fun onStartPictureInPicture(pipCandidate: VideoView?) {
+    onPictureInPictureStart(Unit)
+  }
+
+  /**
+   * @param pipCandidate - VideoView that was being displayed in PiP
+   */
+  fun onStopPictureInPicture(pipCandidate: VideoView?) {
+    pipParams = pipParams.copy(willEnter = false)
+    onPictureInPictureStop(Unit)
+  }
+
+  fun addVideoViewListener(listener: VideoViewListener) {
+    if (listeners.any { it.get() == listener }) {
+      return
+    }
+    listeners.add(WeakReference(listener))
+  }
+
+  fun removeVideoViewListener(listener: VideoViewListener) {
+    listeners.retainAll { it.get() != listener }
+  }
+
+  override fun onSourceChanged(player: VideoPlayer, source: VideoSource?, oldSource: VideoSource?) {
+    // When replacing the media on the same player, keep the surface hidden until the first frame of
+    // the new item is rendered. Otherwise the previous stream can remain visible (often mis-scaled)
+    // while the new stream buffers — e.g. switching from a higher-resolution URL to a lower one.
+    // See https://github.com/expo/expo/issues/44385
+    if (player == videoPlayer && oldSource != null) {
+      shouldHideSurfaceView = true
+      applySurfaceViewVisibility()
+    }
+  }
+
+  override fun onVideoSourceLoaded(
+    player: VideoPlayer,
+    videoSource: VideoSource?,
+    duration: Double?,
+    availableVideoTracks: List<VideoTrack>,
+    availableSubtitleTracks: List<SubtitleTrack>,
+    availableAudioTracks: List<AudioTrack>
+  ) {
+    pipParams = pipParams.copy(aspectRatio = calculateCurrentPipAspectRatio())
+    super.onVideoSourceLoaded(player, videoSource, duration, availableVideoTracks, availableSubtitleTracks, availableAudioTracks)
+  }
+
+  override fun onIsPlayingChanged(player: VideoPlayer, isPlaying: Boolean, oldIsPlaying: Boolean?) {
+    if (player == videoPlayer && isPlaying) {
+      wasAutoPaused = false
+    }
+  }
+
+  override fun onTracksChanged(player: VideoPlayer, tracks: Tracks) {
+    currentTrackHasSubtitles = player.subtitles.availableSubtitleTracks.isNotEmpty()
+    showsAudioTracksButton = player.audioTracks.availableAudioTracks.size > 1
+    playerView.setShowSubtitleButton(buttonOptions.showSubtitles ?: currentTrackHasSubtitles)
+    super.onTracksChanged(player, tracks)
+  }
+
+  override fun onRenderedFirstFrame(player: VideoPlayer) {
+    if (player.currentVideoView == this) {
+      shouldHideSurfaceView = false
+      applySurfaceViewVisibility()
+      onFirstFrameRender(Unit)
+    }
+  }
+
+  override fun requestLayout() {
+    super.requestLayout()
+
+    // Code borrowed from:
+    // https://github.com/facebook/react-native/blob/d19afc73f5048f81656d0b4424232ce6d69a6368/ReactAndroid/src/main/java/com/facebook/react/views/toolbar/ReactToolbar.java#L166
+    // This fixes some layout issues with the exoplayer which caused the resizeMode to not work properly
+    post(mLayoutRunnable)
+  }
+
+  override fun onLayout(changed: Boolean, l: Int, t: Int, r: Int, b: Int) {
+    super.onLayout(changed, l, t, r, b)
+    // On every re-layout ExoPlayer resets the timeBar to be enabled.
+    // We need to disable it to keep scrubbing impossible.
+
+    pipParams = pipParams.copy(rectHint = calculateRectHint(playerView))
+    playerView.setTimeBarInteractive(videoPlayer?.requiresLinearPlayback ?: true)
+  }
+
+  override fun onAttachedToWindow() {
+    super.onAttachedToWindow()
+
+    // Set up listener for accessibility caption changes when attached to window
+    setupCaptioningChangeListener()
+    // Reconfigure when view is attached (handles returning from settings)
+    SubtitleUtils.configureSubtitleView(playerView, context, subtitleStyle)
+
+    // Set up window focus change listener
+    decorView.onFocusChangeListener = windowFocusChangeListener
+
+    pipParams = pipParams.copy(canEnter = true)
+  }
+
+  override fun onVisibilityChanged(changedView: View, visibility: Int) {
+    super.onVisibilityChanged(changedView, visibility)
+    if (visibility == View.VISIBLE) {
+      // Reconfigure subtitles when view becomes visible (immediate response)
+      SubtitleUtils.configureSubtitleView(playerView, context, subtitleStyle)
+    }
+  }
+
+  override fun onDetachedFromWindow() {
+    super.onDetachedFromWindow()
+
+    // Clean up captioning change listener
+    captioningChangeListener?.let {
+      val captioningManager = context.getSystemService(Context.CAPTIONING_SERVICE) as? CaptioningManager
+      captioningManager?.removeCaptioningChangeListener(it)
+      captioningChangeListener = null
+    }
+
+    // Clean up window focus listener
+    decorView.onFocusChangeListener = null
+
+    pipParams = pipParams.copy(canEnter = false)
+  }
+
+  // After adding the `PlayerView` to the hierarchy the touch events stop being emitted to the JS side.
+  // The only workaround I have found is to dispatch the touch events manually using the `EventDispatcher`.
+  // The behavior is different when the native controls are enabled and disabled.
+  override fun onTouchEvent(event: MotionEvent?): Boolean {
+    if (!useNativeControls) {
+      event?.eventTime?.let {
+        touchEventCoalescingKeyHelper.addCoalescingKey(it)
+        reactNativeEventDispatcher?.dispatchMotionEvent(this@VideoView, event, touchEventCoalescingKeyHelper)
+      }
+    }
+    if (event?.actionMasked == MotionEvent.ACTION_UP) {
+      performClick()
+    }
+    // Mark the event as handled
+    return true
+  }
+
+  override fun onInterceptTouchEvent(event: MotionEvent?): Boolean {
+    if (useNativeControls) {
+      event?.eventTime?.let {
+        touchEventCoalescingKeyHelper.addCoalescingKey(it)
+        reactNativeEventDispatcher?.dispatchMotionEvent(this@VideoView, MotionEvent.obtainNoHistory(event), touchEventCoalescingKeyHelper)
+      }
+    }
+    // Return false to receive all other events before the target `onTouchEvent`
+    return false
+  }
+
+  private fun getPlayerViewLayoutId(useTextureView: Boolean): Int {
+    return if (useTextureView) {
+      R.layout.texture_player_view
+    } else {
+      R.layout.surface_player_view
+    }
+  }
+
+  private fun setupCaptioningChangeListener() {
+    val captioningManager = context.getSystemService(Context.CAPTIONING_SERVICE) as? CaptioningManager
+
+    captioningChangeListener = SubtitleUtils.createCaptioningChangeListener(playerView, context) { subtitleStyle }
+
+    captioningChangeListener?.let { listener ->
+      captioningManager?.addCaptioningChangeListener(listener)
+    }
+  }
+
+  private fun applyButtonSettings() {
+    val shouldShowSubtitle = buttonOptions.showSubtitles ?: currentTrackHasSubtitles
+    playerView.applyButtonOptions(buttonOptions, requiresLinearPlayback)
+    playerView.setShowSubtitleButton(shouldShowSubtitle)
+  }
+
+  companion object {
+    fun isPictureInPictureSupported(currentActivity: Activity): Boolean {
+      return Build.VERSION.SDK_INT >= Build.VERSION_CODES.O && currentActivity.packageManager.hasSystemFeature(
+        android.content.pm.PackageManager.FEATURE_PICTURE_IN_PICTURE
+      )
+    }
+  }
+}

package/android/src/main/java/expo/modules/video/delegates/IgnoreSameSet.kt

@@ -0,0 +1,24 @@
+package expo.modules.video.delegates
+
+import kotlin.reflect.KProperty
+
+/**
+ * Property delegate, where the set is ignored unless the value has changed.
+ * @param T The type of the property.
+ * @param value The initial value of the property.
+ * @param propertyMapper A function that maps the new value to the property value.
+ * @param didSet A function that is called when the property value has changed.
+*/
+
+class IgnoreSameSet<T : Any?>(private var value: T, val propertyMapper: ((T) -> T) = { v -> v }, val didSet: ((new: T, old: T) -> Unit)? = null) {
+  operator fun getValue(thisRef: Any?, property: KProperty<*>): T {
+    return value
+  }
+
+  operator fun setValue(thisRef: Any?, property: KProperty<*>, value: T) {
+    if (this.value?.equals(propertyMapper(value)) ?: false) return
+    val oldValue = this.value
+    this.value = propertyMapper(value)
+    didSet?.invoke(this.value, oldValue)
+  }
+}

package/android/src/main/java/expo/modules/video/drawing/OutlineProvider.kt

@@ -0,0 +1,217 @@
+package expo.modules.video.drawing
+
+import android.content.Context
+import android.graphics.Canvas
+import android.graphics.Outline
+import android.graphics.Path
+import android.graphics.RectF
+import android.os.Build
+import android.view.View
+import android.view.ViewOutlineProvider
+import com.facebook.react.modules.i18nmanager.I18nUtil
+import com.facebook.react.uimanager.FloatUtil
+import com.facebook.react.uimanager.PixelUtil
+import com.facebook.yoga.YogaConstants
+import expo.modules.video.utils.ifYogaUndefinedUse
+
+class OutlineProvider(private val mContext: Context) : ViewOutlineProvider() {
+  enum class BorderRadiusConfig {
+    ALL,
+    TOP_LEFT,
+    TOP_RIGHT,
+    BOTTOM_RIGHT,
+    BOTTOM_LEFT,
+    TOP_START,
+    TOP_END,
+    BOTTOM_START,
+    BOTTOM_END
+  }
+
+  enum class CornerRadius {
+    TOP_LEFT,
+    TOP_RIGHT,
+    BOTTOM_RIGHT,
+    BOTTOM_LEFT
+  }
+
+  private var mLayoutDirection = View.LAYOUT_DIRECTION_LTR
+  private val mBounds = RectF()
+  val borderRadiiConfig = FloatArray(9) { YogaConstants.UNDEFINED }
+  private val mCornerRadii = FloatArray(4)
+  private var mCornerRadiiInvalidated = true
+  private val mConvexPath = Path()
+  private var mConvexPathInvalidated = true
+
+  init {
+    updateCornerRadiiIfNeeded()
+  }
+
+  private fun updateCornerRadiiIfNeeded() {
+    if (!mCornerRadiiInvalidated) {
+      return
+    }
+
+    val isRTL = mLayoutDirection == View.LAYOUT_DIRECTION_RTL
+    val isRTLSwap = I18nUtil.instance.doLeftAndRightSwapInRTL(mContext)
+    updateCornerRadius(
+      CornerRadius.TOP_LEFT,
+      BorderRadiusConfig.TOP_LEFT,
+      BorderRadiusConfig.TOP_RIGHT,
+      BorderRadiusConfig.TOP_START,
+      BorderRadiusConfig.TOP_END,
+      isRTL,
+      isRTLSwap
+    )
+    updateCornerRadius(
+      CornerRadius.TOP_RIGHT,
+      BorderRadiusConfig.TOP_RIGHT,
+      BorderRadiusConfig.TOP_LEFT,
+      BorderRadiusConfig.TOP_END,
+      BorderRadiusConfig.TOP_START,
+      isRTL,
+      isRTLSwap
+    )
+    updateCornerRadius(
+      CornerRadius.BOTTOM_LEFT,
+      BorderRadiusConfig.BOTTOM_LEFT,
+      BorderRadiusConfig.BOTTOM_RIGHT,
+      BorderRadiusConfig.BOTTOM_START,
+      BorderRadiusConfig.BOTTOM_END,
+      isRTL,
+      isRTLSwap
+    )
+    updateCornerRadius(
+      CornerRadius.BOTTOM_RIGHT,
+      BorderRadiusConfig.BOTTOM_RIGHT,
+      BorderRadiusConfig.BOTTOM_LEFT,
+      BorderRadiusConfig.BOTTOM_END,
+      BorderRadiusConfig.BOTTOM_START,
+      isRTL,
+      isRTLSwap
+    )
+    mCornerRadiiInvalidated = false
+    mConvexPathInvalidated = true
+  }
+
+  private fun updateCornerRadius(
+    outputPosition: CornerRadius,
+    inputPosition: BorderRadiusConfig,
+    oppositePosition: BorderRadiusConfig,
+    startPosition: BorderRadiusConfig,
+    endPosition: BorderRadiusConfig,
+    isRTL: Boolean,
+    isRTLSwap: Boolean
+  ) {
+    var radius = borderRadiiConfig[inputPosition.ordinal]
+    if (isRTL) {
+      if (isRTLSwap) {
+        radius = borderRadiiConfig[oppositePosition.ordinal]
+      }
+      if (YogaConstants.isUndefined(radius)) {
+        radius = borderRadiiConfig[endPosition.ordinal]
+      }
+    } else {
+      if (YogaConstants.isUndefined(radius)) {
+        radius = borderRadiiConfig[startPosition.ordinal]
+      }
+    }
+    radius = radius
+      .ifYogaUndefinedUse(borderRadiiConfig[BorderRadiusConfig.ALL.ordinal])
+      .ifYogaUndefinedUse(0f)
+    mCornerRadii[outputPosition.ordinal] = PixelUtil.toPixelFromDIP(radius)
+  }
+
+  private fun updateConvexPathIfNeeded() {
+    if (!mConvexPathInvalidated) {
+      return
+    }
+    mConvexPath.reset()
+    mConvexPath.addRoundRect(
+      mBounds,
+      floatArrayOf(
+        mCornerRadii[CornerRadius.TOP_LEFT.ordinal],
+        mCornerRadii[CornerRadius.TOP_LEFT.ordinal],
+        mCornerRadii[CornerRadius.TOP_RIGHT.ordinal],
+        mCornerRadii[CornerRadius.TOP_RIGHT.ordinal],
+        mCornerRadii[CornerRadius.BOTTOM_RIGHT.ordinal],
+        mCornerRadii[CornerRadius.BOTTOM_RIGHT.ordinal],
+        mCornerRadii[CornerRadius.BOTTOM_LEFT.ordinal],
+        mCornerRadii[CornerRadius.BOTTOM_LEFT.ordinal]
+      ),
+      Path.Direction.CW
+    )
+    mConvexPathInvalidated = false
+  }
+
+  fun hasEqualCorners(): Boolean {
+    updateCornerRadiiIfNeeded()
+    val initialCornerRadius = mCornerRadii[0]
+    return mCornerRadii.all { initialCornerRadius == it }
+  }
+
+  fun setBorderRadius(radius: Float, position: Int): Boolean {
+    if (!FloatUtil.floatsEqual(borderRadiiConfig[position], radius)) {
+      borderRadiiConfig[position] = radius
+      mCornerRadiiInvalidated = true
+      return true
+    }
+    return false
+  }
+
+  private fun updateBoundsAndLayoutDirection(view: View) {
+    // Update layout direction
+    val layoutDirection = view.layoutDirection
+    if (mLayoutDirection != layoutDirection) {
+      mLayoutDirection = layoutDirection
+      mCornerRadiiInvalidated = true
+    }
+
+    // Update size
+    val left = 0
+    val top = 0
+    val right = view.width
+    val bottom = view.height
+    if (mBounds.left != left.toFloat() ||
+      mBounds.top != top.toFloat() ||
+      mBounds.right != right.toFloat() ||
+      mBounds.bottom != bottom.toFloat()
+    ) {
+      mBounds[left.toFloat(), top.toFloat(), right.toFloat()] = bottom.toFloat()
+      mCornerRadiiInvalidated = true
+    }
+  }
+
+  override fun getOutline(view: View, outline: Outline) {
+    updateBoundsAndLayoutDirection(view)
+
+    // Calculate outline
+    updateCornerRadiiIfNeeded()
+    if (hasEqualCorners()) {
+      val cornerRadius = mCornerRadii[0]
+      if (cornerRadius > 0) {
+        outline.setRoundRect(0, 0, mBounds.width().toInt(), mBounds.height().toInt(), cornerRadius)
+      } else {
+        outline.setRect(0, 0, mBounds.width().toInt(), mBounds.height().toInt())
+      }
+    } else {
+      // Clipping is not supported when using a convex path, but drawing the elevation
+      // shadow is. For the particular case, we fallback to canvas clipping in the view
+      // which is supposed to call `clipCanvasIfNeeded` in its `draw` method.
+      updateConvexPathIfNeeded()
+      if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.R) {
+        outline.setPath(mConvexPath)
+      } else {
+        outline.setConvexPath(mConvexPath)
+      }
+    }
+  }
+
+  fun clipCanvasIfNeeded(canvas: Canvas, view: View) {
+    updateBoundsAndLayoutDirection(view)
+    updateCornerRadiiIfNeeded()
+    if (!hasEqualCorners()) {
+      updateConvexPathIfNeeded()
+      canvas.clipPath(mConvexPath)
+    }
+  }
+}