feat(TrimmerView): Added ability to move tracker

Added ability to move tracker and get that video position, also added hitSlop for left and right corners this push should close out #41
shahen94 · Mar 13, 2017 · 293741c · 293741c
1 parent 03a9878
commit 293741c
Show file tree

Hide file tree

Showing 10 changed files with 103 additions and 48 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,6 @@
+# MacOS temporary files
+.DS_Store
+
 # Logs
 logs
 *.log

diff --git a/ios/.DS_Store b/ios/.DS_Store
diff --git a/ios/RNVideoProcessing/.DS_Store b/ios/RNVideoProcessing/.DS_Store
diff --git a/ios/RNVideoProcessing/RNTrimmerView/.DS_Store b/ios/RNVideoProcessing/RNTrimmerView/.DS_Store
diff --git a/ios/RNVideoProcessing/RNTrimmerView/ICGVideoTrimmer/ICGThumbView.m b/ios/RNVideoProcessing/RNTrimmerView/ICGVideoTrimmer/ICGThumbView.m
@@ -55,6 +55,12 @@ - (BOOL)pointInside:(CGPoint)point withEvent:(UIEvent *)event
     return CGRectContainsPoint(hitFrame, point);
 }
 
+- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event {
+    CGRect frame = CGRectInset(self.bounds, -20, -20);
+
+    return CGRectContainsPoint(frame, point) ? self : nil;
+}
+
 - (void)drawRect:(CGRect)rect
 {
     // Drawing code
@@ -81,7 +87,7 @@ - (void)drawRect:(CGRect)rect
         [decoratingPath closePath];
         [[UIColor colorWithWhite:1 alpha:0.5] setFill];
         [decoratingPath fill];
-
+        
     }
 
 

diff --git a/ios/RNVideoProcessing/RNTrimmerView/ICGVideoTrimmer/ICGVideoTrimmerView.h b/ios/RNVideoProcessing/RNTrimmerView/ICGVideoTrimmer/ICGVideoTrimmerView.h
@@ -68,6 +68,7 @@ NS_ASSUME_NONNULL_END
 @protocol ICGVideoTrimmerDelegate <NSObject>
 
 - (void)trimmerView:(nonnull ICGVideoTrimmerView *)trimmerView didChangeLeftPosition:(CGFloat)startTime rightPosition:(CGFloat)endTime;
+- (void)trimmerView:(nonnull ICGVideoTrimmerView *)trimmerView currentPosition:(CGFloat)currentTime;
 
 @end
 

diff --git a/ios/RNVideoProcessing/RNTrimmerView/ICGVideoTrimmer/ICGVideoTrimmerView.m b/ios/RNVideoProcessing/RNTrimmerView/ICGVideoTrimmer/ICGVideoTrimmerView.m
@@ -25,6 +25,7 @@ @interface ICGVideoTrimmerView() <UIScrollViewDelegate>
 @property (strong, nonatomic) UIView *trackerView;
 @property (strong, nonatomic) UIView *topBorder;
 @property (strong, nonatomic) UIView *bottomBorder;
+@property (strong, nonatomic) UIPanGestureRecognizer *panGestureRecognizer;
 
 @property (nonatomic) CGFloat startTime;
 @property (nonatomic) CGFloat endTime;
@@ -109,6 +110,8 @@ - (void)resetSubviews
     [self.subviews makeObjectsPerformSelector:@selector(removeFromSuperview)];
 
     self.scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, CGRectGetWidth(self.frame), CGRectGetHeight(self.frame))];
+    [self.scrollView setBounces:NO];
+    [self.scrollView setScrollEnabled:NO];
     [self addSubview:self.scrollView];
     [self.scrollView setDelegate:self];
     [self.scrollView setShowsHorizontalScrollIndicator:NO];
@@ -151,12 +154,20 @@ - (void)resetSubviews
         self.leftThumbView = [[ICGThumbView alloc] initWithFrame:leftThumbFrame color:self.themeColor right:NO];
     }
 
-    self.trackerView = [[UIView alloc] initWithFrame:CGRectMake(self.thumbWidth, -5, 3, CGRectGetHeight(self.frameView.frame) + 10)];
+    self.trackerView = [[UIView alloc] initWithFrame:CGRectMake(self.thumbWidth, -5, 3, CGRectGetHeight(self.frameView.frame) + 20)];
     self.trackerView.backgroundColor = self.trackerColor;
     self.trackerView.layer.masksToBounds = true;
     self.trackerView.layer.cornerRadius = 2;
+
+    [self.trackerView setUserInteractionEnabled:YES];
     [self addSubview:self.trackerView];
 
+    self.panGestureRecognizer = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(handleTrackerPan:)];
+
+    [self.panGestureRecognizer locationInView:self.trackerView];
+
+    [self.trackerView addGestureRecognizer:self.panGestureRecognizer];
+
     [self.leftThumbView.layer setMasksToBounds:YES];
     [self.leftOverlayView addSubview:self.leftThumbView];
     [self.leftOverlayView setUserInteractionEnabled:YES];
@@ -192,6 +203,18 @@ - (void)updateBorderFrames
     [self.bottomBorder setFrame:CGRectMake(CGRectGetMaxX(self.leftOverlayView.frame), CGRectGetHeight(self.frameView.frame)-height, CGRectGetMinX(self.rightOverlayView.frame)-CGRectGetMaxX(self.leftOverlayView.frame), height)];
 }
 
+- (void)handleTrackerPan: (UISwipeGestureRecognizer *) recognizer {
+    CGPoint point = [self.panGestureRecognizer locationInView:self.trackerView];
+
+    CGRect trackerFrame = self.trackerView.frame;
+    trackerFrame.origin.x += point.x;
+    self.trackerView.frame = trackerFrame;
+
+    CGFloat time = (trackerFrame.origin.x - self.thumbWidth + self.scrollView.contentOffset.x) / self.widthPerSecond;
+    [self.delegate trimmerView:self currentPosition:time ];
+
+}
+
 - (void)moveLeftOverlayView:(UIPanGestureRecognizer *)gesture
 {
     switch (gesture.state) {

diff --git a/ios/RNVideoProcessing/RNTrimmerView/RNTrimmerView.swift b/ios/RNVideoProcessing/RNTrimmerView/RNTrimmerView.swift
@@ -15,6 +15,7 @@ class RNTrimmerView: RCTView, ICGVideoTrimmerDelegate {
     var mThemeColor = UIColor.clear
     var bridge: RCTBridge!
     var onChange: RCTBubblingEventBlock?
+    var onTrackerMove: RCTBubblingEventBlock?
     var _minLength: CGFloat? = nil
     var _maxLength: CGFloat? = nil
     var _trackerColor: UIColor = UIColor.clear
@@ -173,4 +174,13 @@ class RNTrimmerView: RCTView, ICGVideoTrimmerDelegate {
     func trimmerView(_ trimmerView: ICGVideoTrimmerView, didChangeLeftPosition startTime: CGFloat, rightPosition endTime: CGFloat) {
         onTrimmerPositionChange(startTime: startTime, endTime: endTime)
     }
+
+    public func trimmerView(_ trimmerView: ICGVideoTrimmerView, currentPosition currentTime: CGFloat) {
+        print("current", currentTime)
+        if onTrackerMove == nil {
+            return
+        }
+        let event = ["currentTime": currentTime]
+        self.onTrackerMove!(event)
+    }
 }
diff --git a/ios/RNVideoProcessing/RNTrimmerView/RNTrimmerViewBridge.m b/ios/RNVideoProcessing/RNTrimmerView/RNTrimmerViewBridge.m
@@ -15,6 +15,7 @@ @interface RCT_EXTERN_MODULE(RNTrimmerViewManager, RCTViewManager)
 RCT_EXPORT_VIEW_PROPERTY(height, NSNumber)
 RCT_EXPORT_VIEW_PROPERTY(themeColor, NSString)
 RCT_EXPORT_VIEW_PROPERTY(onChange, RCTBubblingEventBlock)
+RCT_EXPORT_VIEW_PROPERTY(onTrackerMove, RCTBubblingEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(minLength, NSNumber)
 RCT_EXPORT_VIEW_PROPERTY(maxLength, NSNumber)
 RCT_EXPORT_VIEW_PROPERTY(currentTime, NSNumber)

diff --git a/lib/Trimmer/Trimmer.ios.js b/lib/Trimmer/Trimmer.ios.js
@@ -4,63 +4,74 @@ import { getActualSource } from '../utils';
 const TRIMMER_COMPONENT_NAME = 'RNTrimmerView';
 
 export class Trimmer extends Component {
-	static propTypes = {
-		source: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-		width: PropTypes.number,
-		height: PropTypes.number,
-		themeColor: PropTypes.string,
-		onChange: PropTypes.func,
-		minLength: PropTypes.number,
-		maxLength: PropTypes.number,
-		currentTime: PropTypes.number,
-		trackerColor: PropTypes.string
-	};
+  static propTypes = {
+    source: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+    width: PropTypes.number,
+    height: PropTypes.number,
+    themeColor: PropTypes.string,
+    onChange: PropTypes.func,
+    onTrackerMove: PropTypes.func,
+    minLength: PropTypes.number,
+    maxLength: PropTypes.number,
+    currentTime: PropTypes.number,
+    trackerColor: PropTypes.string
+  };
 
-	static defaultProps = {
-		themeColor: 'gray',
-		trackerColor: 'black'
-	};
+  static defaultProps = {
+    themeColor: 'gray',
+    trackerColor: 'black'
+  };
 
-	constructor(...args) {
-		super(...args);
-		this.state = {};
-		this._onChange = this._onChange.bind(this);
-	}
+  constructor(...args) {
+    super(...args);
+    this.state = {};
+    this._onChange = this._onChange.bind(this);
+    this._handleTrackerMove = this._handleTrackerMove.bind(this);
+  }
 
-	_onChange(event) {
-		if (!this.props.onChange) {
-			return;
-		}
-		this.props.onChange(event.nativeEvent);
-	}
+  _onChange(event) {
+    if (!this.props.onChange) {
+      return;
+    }
+    this.props.onChange(event.nativeEvent);
+  }
 
-	render() {
-		const {
-			source,
+  _handleTrackerMove({ nativeEvent }) {
+    const { onTrackerMove } = this.props;
+    const { currentTime } = nativeEvent;
+    if (typeof onTrackerMove === 'function') {
+      onTrackerMove({ currentTime });
+    }
+  }
+
+  render() {
+    const {
+      source,
       width,
       height,
       themeColor,
       minLength,
       maxLength,
       currentTime,
       trackerColor
-		} = this.props;
-		const actualSource = getActualSource(source);
-		return (
-			<RNTrimmer
-				source={actualSource}
-				width={width}
-				height={height}
-				currentTime={currentTime}
-				themeColor={processColor(themeColor).toString()}
-				trackerColor={processColor(trackerColor).toString()}
-				pointerEvents={'box-none'}
-				onChange={this._onChange}
-				minLength={minLength}
-				maxLength={maxLength}
-			/>
-		);
-	}
+    } = this.props;
+    const actualSource = getActualSource(source);
+    return (
+      <RNTrimmer
+        source={actualSource}
+        width={width}
+        height={height}
+        currentTime={currentTime}
+        themeColor={processColor(themeColor).toString()}
+        trackerColor={processColor(trackerColor).toString()}
+        onTrackerMove={this._handleTrackerMove}
+        pointerEvents={'box-none'}
+        onChange={this._onChange}
+        minLength={minLength}
+        maxLength={maxLength}
+      />
+    );
+  }
 }
 
 const RNTrimmer = requireNativeComponent(TRIMMER_COMPONENT_NAME, Trimmer);