react-native-video-trim 7.0.0 → 7.0.1

package/android/src/main/java/com/videotrim/widgets/CropOverlayView.kt

@@ -50,12 +50,13 @@ class CropOverlayView @JvmOverloads constructor(
   private val borderWidth = dpToPx(1f)
   private val cornerLength = dpToPx(20f)
   private val cornerWidth = dpToPx(4f)
+  private val edgeHandleLength = dpToPx(20f)
   private val gridLineWidth = 1f / resources.displayMetrics.density
   private val edgeHitZone = dpToPx(30f)
 
   private val borderPaint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
     style = Paint.Style.STROKE
-    color = Color.argb(153, 255, 255, 255)
+    color = Color.WHITE
     strokeWidth = borderWidth
   }
   private val gridPaint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
@@ -68,6 +69,7 @@ class CropOverlayView @JvmOverloads constructor(
     color = Color.WHITE
     strokeWidth = cornerWidth
     strokeCap = Paint.Cap.ROUND
+    strokeJoin = Paint.Join.ROUND
   }
   private val dimmingPaint = Paint().apply {
     color = Color.argb(140, 0, 0, 0)
@@ -140,14 +142,24 @@ class CropOverlayView @JvmOverloads constructor(
     }
 
     val cl = cornerLength
+    val hw = cornerWidth / 2f
     val path = Path()
     fun addCorner(sx: Float, sy: Float, cx: Float, cy: Float, ex: Float, ey: Float) {
       path.moveTo(sx, sy); path.lineTo(cx, cy); path.lineTo(ex, ey)
     }
-    addCorner(cr.left, cr.top + cl, cr.left, cr.top, cr.left + cl, cr.top)
-    addCorner(cr.right - cl, cr.top, cr.right, cr.top, cr.right, cr.top + cl)
-    addCorner(cr.left, cr.bottom - cl, cr.left, cr.bottom, cr.left + cl, cr.bottom)
-    addCorner(cr.right - cl, cr.bottom, cr.right, cr.bottom, cr.right, cr.bottom - cl)
+    addCorner(cr.left - hw, cr.top + cl, cr.left - hw, cr.top - hw, cr.left + cl, cr.top - hw)
+    addCorner(cr.right - cl, cr.top - hw, cr.right + hw, cr.top - hw, cr.right + hw, cr.top + cl)
+    addCorner(cr.left - hw, cr.bottom - cl, cr.left - hw, cr.bottom + hw, cr.left + cl, cr.bottom + hw)
+    addCorner(cr.right - cl, cr.bottom + hw, cr.right + hw, cr.bottom + hw, cr.right + hw, cr.bottom - cl)
+
+    val ehl = edgeHandleLength / 2f
+    val cx = cr.centerX()
+    val cy = cr.centerY()
+    path.moveTo(cx - ehl, cr.top - hw); path.lineTo(cx + ehl, cr.top - hw)
+    path.moveTo(cx - ehl, cr.bottom + hw); path.lineTo(cx + ehl, cr.bottom + hw)
+    path.moveTo(cr.left - hw, cy - ehl); path.lineTo(cr.left - hw, cy + ehl)
+    path.moveTo(cr.right + hw, cy - ehl); path.lineTo(cr.right + hw, cy + ehl)
+
     canvas.drawPath(path, cornerPaint)
   }
 

package/android/src/main/java/com/videotrim/widgets/VideoTrimmerView.kt

@@ -320,20 +320,25 @@ class VideoTrimmerView(
     if (vw <= 0 || vh <= 0) return
 
     videoContainer.post {
-      val containerW = videoContainer.width
-      val containerH = videoContainer.height
-      if (containerW <= 0 || containerH <= 0) return@post
+      val cw = containerContentWidth().toInt()
+      val ch = containerContentHeight().toInt()
+      if (cw <= 0 || ch <= 0) return@post
+
+      val margin = bracketOverflow()
+      val availW = cw - 2 * margin
+      val availH = ch - 2 * margin
+      if (availW <= 0 || availH <= 0) return@post
 
       val videoAR = vw.toFloat() / vh
-      val containerAR = containerW.toFloat() / containerH
+      val containerAR = availW.toFloat() / availH
       val newW: Int
       val newH: Int
       if (videoAR > containerAR) {
-        newW = containerW
-        newH = (containerW / videoAR).toInt()
+        newW = availW
+        newH = (availW / videoAR).toInt()
       } else {
-        newH = containerH
-        newW = (containerH * videoAR).toInt()
+        newH = availH
+        newW = (availH * videoAR).toInt()
       }
       mVideoView.layoutParams = FrameLayout.LayoutParams(newW, newH, Gravity.CENTER)
     }
@@ -519,6 +524,10 @@ class VideoTrimmerView(
     cropBtn.setOnClickListener { onCropTapped() }
     undoBtn.setOnClickListener { onUndoTapped() }
     redoBtn.setOnClickListener { onRedoTapped() }
+
+    cropBtn.setColorFilter(Color.argb(128, 255, 255, 255), android.graphics.PorterDuff.Mode.SRC_IN)
+    undoBtn.setColorFilter(Color.argb(128, 255, 255, 255), android.graphics.PorterDuff.Mode.SRC_IN)
+    redoBtn.setColorFilter(Color.argb(128, 255, 255, 255), android.graphics.PorterDuff.Mode.SRC_IN)
   }
 
   fun onSaveClicked() {
@@ -1304,13 +1313,22 @@ class VideoTrimmerView(
 
   // region Transform
 
+  private fun containerContentWidth(): Float =
+    (videoContainer.width - videoContainer.paddingLeft - videoContainer.paddingRight).toFloat()
+
+  private fun containerContentHeight(): Float =
+    (videoContainer.height - videoContainer.paddingTop - videoContainer.paddingBottom).toFloat()
+
+  private fun bracketOverflow(): Int =
+    TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 4f, resources.displayMetrics).toInt()
+
   private fun onFlipTapped() {
     pushUndo()
     isFlipped = !isFlipped
     val newCumDeg = -cumulativeRotationDeg
     val fitScale = if (rotationCount % 2 != 0) {
-      val cw = videoContainer.width.toFloat()
-      val ch = videoContainer.height.toFloat()
+      val cw = containerContentWidth()
+      val ch = containerContentHeight()
       if (cw > 0 && ch > 0) minOf(cw / ch, ch / cw) else 1f
     } else {
       1f
@@ -1379,12 +1397,12 @@ class VideoTrimmerView(
   }
 
   private fun updateVideoTransform(resetCrop: Boolean = false) {
-    val containerW = videoContainer.width.toFloat()
-    val containerH = videoContainer.height.toFloat()
-    if (containerW <= 0 || containerH <= 0) return
+    val cw = containerContentWidth()
+    val ch = containerContentHeight()
+    if (cw <= 0 || ch <= 0) return
 
     val fitScale = if (rotationCount % 2 != 0) {
-      minOf(containerW / containerH, containerH / containerW)
+      minOf(cw / ch, ch / cw)
     } else {
       1f
     }
@@ -1487,22 +1505,22 @@ class VideoTrimmerView(
   }
 
   private fun getVideoDisplayRectInContainer(): RectF {
-    val containerW = videoContainer.width.toFloat()
-    val containerH = videoContainer.height.toFloat()
-    if (containerW <= 0 || containerH <= 0) return RectF()
+    val cw = containerContentWidth()
+    val ch = containerContentHeight()
+    if (cw <= 0 || ch <= 0) return RectF()
 
     val tvW = mVideoView.width.toFloat()
     val tvH = mVideoView.height.toFloat()
     if (tvW <= 0 || tvH <= 0) return RectF()
 
-    val tvX = (containerW - tvW) / 2f
-    val tvY = (containerH - tvH) / 2f
+    val tvX = (cw - tvW) / 2f
+    val tvY = (ch - tvH) / 2f
     val videoRect = RectF(tvX, tvY, tvX + tvW, tvY + tvH)
 
-    val pivotX = containerW / 2f
-    val pivotY = containerH / 2f
+    val pivotX = cw / 2f
+    val pivotY = ch / 2f
     val fitScale = if (rotationCount % 2 != 0) {
-      minOf(containerW / containerH, containerH / containerW)
+      minOf(cw / ch, ch / cw)
     } else {
       1f
     }
@@ -1603,10 +1621,10 @@ class VideoTrimmerView(
     isFlipped = snap.isFlipped
     cumulativeRotationDeg = snap.cumulativeRotationDeg
 
-    val containerW = videoContainer.width.toFloat()
-    val containerH = videoContainer.height.toFloat()
-    val fitScale = if (rotationCount % 2 != 0 && containerW > 0 && containerH > 0) {
-      minOf(containerW / containerH, containerH / containerW)
+    val cw = containerContentWidth()
+    val ch = containerContentHeight()
+    val fitScale = if (rotationCount % 2 != 0 && cw > 0 && ch > 0) {
+      minOf(cw / ch, ch / cw)
     } else {
       1f
     }

package/android/src/main/res/layout/video_trimmer_view.xml

@@ -94,8 +94,8 @@
 
       <ImageView
         android:id="@+id/undoBtn"
-        android:layout_width="22dp"
-        android:layout_height="22dp"
+        android:layout_width="18dp"
+        android:layout_height="18dp"
         android:src="@drawable/arrow_uturn_backward"
         android:tint="#80FFFFFF"
         android:scaleType="fitCenter"
@@ -104,8 +104,8 @@
 
       <ImageView
         android:id="@+id/redoBtn"
-        android:layout_width="22dp"
-        android:layout_height="22dp"
+        android:layout_width="18dp"
+        android:layout_height="18dp"
         android:src="@drawable/arrow_uturn_forward"
         android:tint="#80FFFFFF"
         android:scaleType="fitCenter"
@@ -120,7 +120,9 @@
     android:layout_above="@+id/layout"
     android:layout_below="@+id/transformRow"
     android:background="@android:color/black"
-    android:clipChildren="true">
+    android:clipChildren="true"
+    android:clipToPadding="false"
+    android:paddingVertical="4dp">
 
     <TextureView
       android:id="@+id/video_loader"

package/ios/CropOverlayView.swift

@@ -6,7 +6,6 @@ class CropOverlayView: UIView {
     var cropRect: CGRect = .zero {
         didSet {
             setNeedsDisplay()
-            updateDimmingMask()
         }
     }
 
@@ -31,6 +30,7 @@ class CropOverlayView: UIView {
     private let borderWidth: CGFloat = 1.0
     private let cornerLength: CGFloat = 20
     private let cornerWidth: CGFloat = 4.0
+    private let edgeHandleLength: CGFloat = 20
     private let gridLineWidth: CGFloat = CGFloat(1.0 / UIScreen.main.scale)
     private let edgeHitZone: CGFloat = 30
 
@@ -38,8 +38,6 @@ class CropOverlayView: UIView {
     private var dragStart: CGPoint = .zero
     private var dragStartRect: CGRect = .zero
 
-    private let dimmingLayer = CAShapeLayer()
-
     private enum DragEdge {
         case top, bottom, left, right
         case topLeft, topRight, bottomLeft, bottomRight
@@ -59,13 +57,9 @@ class CropOverlayView: UIView {
     private func commonInit() {
         backgroundColor = .clear
         isUserInteractionEnabled = true
-        clipsToBounds = true
+        clipsToBounds = false
         isOpaque = false
 
-        dimmingLayer.fillRule = .evenOdd
-        dimmingLayer.fillColor = UIColor.black.withAlphaComponent(0.55).cgColor
-        layer.addSublayer(dimmingLayer)
-
         let pan = UIPanGestureRecognizer(target: self, action: #selector(handlePan(_:)))
         addGestureRecognizer(pan)
 
@@ -73,32 +67,26 @@ class CropOverlayView: UIView {
         addGestureRecognizer(pinch)
     }
 
-    override func layoutSubviews() {
-        super.layoutSubviews()
-        updateDimmingMask()
-    }
-
-    private func updateDimmingMask() {
-        let full = UIBezierPath(rect: bounds)
-        if !cropRect.isEmpty {
-            full.append(UIBezierPath(rect: cropRect))
-        }
-        dimmingLayer.path = full.cgPath
-        dimmingLayer.frame = bounds
-    }
-
     // MARK: - Drawing
 
     override func draw(_ rect: CGRect) {
         guard !cropRect.isEmpty, let ctx = UIGraphicsGetCurrentContext() else { return }
         let cr = cropRect
 
-        ctx.setStrokeColor(UIColor.white.withAlphaComponent(0.6).cgColor)
+        ctx.saveGState()
+        let fullPath = UIBezierPath(rect: bounds)
+        fullPath.append(UIBezierPath(rect: cr))
+        fullPath.usesEvenOddFillRule = true
+        ctx.addPath(fullPath.cgPath)
+        ctx.setFillColor(UIColor.black.withAlphaComponent(0.55).cgColor)
+        ctx.fillPath(using: .evenOdd)
+        ctx.restoreGState()
+
+        ctx.setStrokeColor(UIColor.white.cgColor)
         ctx.setLineWidth(borderWidth)
         ctx.stroke(cr)
 
         ctx.setLineWidth(gridLineWidth)
-        ctx.setStrokeColor(UIColor.white.cgColor)
         for i in 1...2 {
             let x = cr.minX + cr.width * CGFloat(i) / 3
             ctx.move(to: CGPoint(x: x, y: cr.minY))
@@ -114,27 +102,41 @@ class CropOverlayView: UIView {
         ctx.setStrokeColor(UIColor.white.cgColor)
         ctx.setLineWidth(cornerWidth)
         ctx.setLineCap(.round)
+        ctx.setLineJoin(.round)
 
         let cl = cornerLength
+        let hw = cornerWidth / 2
         let corners: [(CGPoint, CGPoint, CGPoint)] = [
-            (CGPoint(x: cr.minX, y: cr.minY + cl),
-             CGPoint(x: cr.minX, y: cr.minY),
-             CGPoint(x: cr.minX + cl, y: cr.minY)),
-            (CGPoint(x: cr.maxX - cl, y: cr.minY),
-             CGPoint(x: cr.maxX, y: cr.minY),
-             CGPoint(x: cr.maxX, y: cr.minY + cl)),
-            (CGPoint(x: cr.minX, y: cr.maxY - cl),
-             CGPoint(x: cr.minX, y: cr.maxY),
-             CGPoint(x: cr.minX + cl, y: cr.maxY)),
-            (CGPoint(x: cr.maxX - cl, y: cr.maxY),
-             CGPoint(x: cr.maxX, y: cr.maxY),
-             CGPoint(x: cr.maxX, y: cr.maxY - cl)),
+            (CGPoint(x: cr.minX - hw, y: cr.minY + cl),
+             CGPoint(x: cr.minX - hw, y: cr.minY - hw),
+             CGPoint(x: cr.minX + cl, y: cr.minY - hw)),
+            (CGPoint(x: cr.maxX - cl, y: cr.minY - hw),
+             CGPoint(x: cr.maxX + hw, y: cr.minY - hw),
+             CGPoint(x: cr.maxX + hw, y: cr.minY + cl)),
+            (CGPoint(x: cr.minX - hw, y: cr.maxY - cl),
+             CGPoint(x: cr.minX - hw, y: cr.maxY + hw),
+             CGPoint(x: cr.minX + cl, y: cr.maxY + hw)),
+            (CGPoint(x: cr.maxX - cl, y: cr.maxY + hw),
+             CGPoint(x: cr.maxX + hw, y: cr.maxY + hw),
+             CGPoint(x: cr.maxX + hw, y: cr.maxY - cl)),
         ]
         for (start, corner, end) in corners {
             ctx.move(to: start)
             ctx.addLine(to: corner)
             ctx.addLine(to: end)
         }
+
+        let ehl = edgeHandleLength / 2
+        let cx = cr.midX, cy = cr.midY
+        ctx.move(to: CGPoint(x: cx - ehl, y: cr.minY - hw))
+        ctx.addLine(to: CGPoint(x: cx + ehl, y: cr.minY - hw))
+        ctx.move(to: CGPoint(x: cx - ehl, y: cr.maxY + hw))
+        ctx.addLine(to: CGPoint(x: cx + ehl, y: cr.maxY + hw))
+        ctx.move(to: CGPoint(x: cr.minX - hw, y: cy - ehl))
+        ctx.addLine(to: CGPoint(x: cr.minX - hw, y: cy + ehl))
+        ctx.move(to: CGPoint(x: cr.maxX + hw, y: cy - ehl))
+        ctx.addLine(to: CGPoint(x: cr.maxX + hw, y: cy + ehl))
+
         ctx.strokePath()
     }
 

package/ios/VideoTrimmerViewController.swift

@@ -469,11 +469,12 @@ class VideoTrimmerViewController: UIViewController {
         addChild(playerController)
         playerContainerView.addSubview(playerController.view)
         playerController.view.translatesAutoresizingMaskIntoConstraints = false
+        let bracketInset: CGFloat = 4
         NSLayoutConstraint.activate([
-            playerController.view.leadingAnchor.constraint(equalTo: playerContainerView.leadingAnchor),
-            playerController.view.trailingAnchor.constraint(equalTo: playerContainerView.trailingAnchor),
-            playerController.view.topAnchor.constraint(equalTo: playerContainerView.topAnchor),
-            playerController.view.bottomAnchor.constraint(equalTo: playerContainerView.bottomAnchor)
+            playerController.view.leadingAnchor.constraint(equalTo: playerContainerView.leadingAnchor, constant: bracketInset),
+            playerController.view.trailingAnchor.constraint(equalTo: playerContainerView.trailingAnchor, constant: -bracketInset),
+            playerController.view.topAnchor.constraint(equalTo: playerContainerView.topAnchor, constant: bracketInset),
+            playerController.view.bottomAnchor.constraint(equalTo: playerContainerView.bottomAnchor, constant: -bracketInset)
         ])
         
         // Add observer for the end of playback

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-video-trim",
-  "version": "7.0.0",
+  "version": "7.0.1",
   "description": "Video trimmer for your React Native app",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",