Skip to content

Commit 1303a46

Browse files
author
Shahen Hovhannisyan
committed
feat(Trimmer iOS): Added trackerHandle
BREAKING CHANGE changed some styles and dimensions
1 parent 4d10f0c commit 1303a46

File tree

6 files changed

+128
-39
lines changed

6 files changed

+128
-39
lines changed

‎ios/RNVideoProcessing/RNTrimmerView/ICGVideoTrimmer/ICGVideoTrimmerView.h‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,11 @@ NS_ASSUME_NONNULL_BEGIN
3333
// Customize color for tracker
3434
@property (assign, nonatomic) UIColor *trackerColor;
3535

36+
// Customize color for tracker handle
37+
@property (assign, nonatomic) UIColor *trackerHandleColor;
38+
39+
@property (assign, nonatomic) Boolean showTrackerHandle;
40+
3641
// Custom image for the left thumb
3742
@property (strong, nonatomic, nullable) UIImage *leftThumbImage;
3843

‎ios/RNVideoProcessing/RNTrimmerView/ICGVideoTrimmer/ICGVideoTrimmerView.m‎

Lines changed: 48 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,8 @@ @interface ICGVideoTrimmerView() <UIScrollViewDelegate>
2323
@property (strong, nonatomic) ICGThumbView *rightThumbView;
2424

2525
@property (strong, nonatomic) UIView *trackerView;
26+
@property (strong, nonatomic) UIView *tracker;
27+
@property (strong, nonatomic) UIView *trackerHandle;
2628
@property (strong, nonatomic) UIView *topBorder;
2729
@property (strong, nonatomic) UIView *bottomBorder;
2830
@property (strong, nonatomic) UIPanGestureRecognizer *panGestureRecognizer;
@@ -31,6 +33,7 @@ @interface ICGVideoTrimmerView() <UIScrollViewDelegate>
3133
@property (nonatomic) CGFloat endTime;
3234

3335
@property (nonatomic) CGFloat widthPerSecond;
36+
@property (nonatomic) int trackerHandleHeight;
3437

3538
@property (nonatomic) CGPoint leftStartPoint;
3639
@property (nonatomic) CGPoint rightStartPoint;
@@ -91,6 +94,16 @@ - (UIColor *)trackerColor
9194
return _trackerColor ?: [UIColor whiteColor];
9295
}
9396

97+
- (UIColor *) trackerHandleColor
98+
{
99+
return _trackerHandleColor ?: [UIColor whiteColor];
100+
}
101+
102+
- (Boolean) showTrackerHandle
103+
{
104+
return _showTrackerHandle ?: NO;
105+
}
106+
94107
- (CGFloat)borderWidth
95108
{
96109
return _borderWidth ?: 1;
@@ -103,13 +116,15 @@ - (CGFloat)thumbWidth
103116

104117
- (void)resetSubviews
105118
{
106-
self.clipsToBounds = YES;
119+
// self.clipsToBounds = YES;
120+
121+
self.trackerHandleHeight = 20;
107122

108-
[self setBackgroundColor:[UIColor blackColor]];
123+
[self setBackgroundColor:[UIColor clearColor]];
109124

110125
[self.subviews makeObjectsPerformSelector:@selector(removeFromSuperview)];
111126

112-
self.scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, CGRectGetWidth(self.frame), CGRectGetHeight(self.frame))];
127+
self.scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, CGRectGetWidth(self.frame), CGRectGetHeight(self.frame) - self.trackerHandleHeight)];
113128
[self.scrollView setBounces:NO];
114129
[self.scrollView setScrollEnabled:NO];
115130
[self addSubview:self.scrollView];
@@ -122,7 +137,7 @@ - (void)resetSubviews
122137

123138
CGFloat ratio = self.showsRulerView ? 0.7 : 1.0;
124139
self.frameView = [[UIView alloc] initWithFrame:CGRectMake(self.thumbWidth, 0, CGRectGetWidth(self.contentView.frame)-2*self.thumbWidth, CGRectGetHeight(self.contentView.frame)*ratio)];
125-
[self.frameView.layer setMasksToBounds:YES];
140+
//[self.frameView.layer setMasksToBounds:YES];
126141
[self.contentView addSubview:self.frameView];
127142

128143
[self addFrames];
@@ -154,19 +169,38 @@ - (void)resetSubviews
154169
self.leftThumbView = [[ICGThumbView alloc] initWithFrame:leftThumbFrame color:self.themeColor right:NO];
155170
}
156171

157-
self.trackerView = [[UIView alloc] initWithFrame:CGRectMake(self.thumbWidth, -5, 3, CGRectGetHeight(self.frameView.frame) + 20)];
158-
self.trackerView.backgroundColor = self.trackerColor;
159-
self.trackerView.layer.masksToBounds = true;
160-
self.trackerView.layer.cornerRadius = 2;
172+
self.trackerView = [[UIView alloc] initWithFrame:CGRectMake(self.thumbWidth - self.trackerHandleHeight / 2, 0, 20, CGRectGetHeight(self.frameView.frame) + self.trackerHandleHeight)];
161173

174+
self.tracker = [[UIView alloc] initWithFrame:CGRectMake(self.thumbWidth, 0, 3, CGRectGetHeight(self.frameView.frame))];
175+
self.trackerHandle = [[UIView alloc] initWithFrame:CGRectMake(1, CGRectGetHeight(self.frameView.frame), self.trackerHandleHeight, self.trackerHandleHeight)];
176+
177+
[self.trackerHandle.layer setMasksToBounds:YES];
178+
[self.contentView setUserInteractionEnabled:YES];
179+
180+
// self.trackerHandle.clipsToBounds = YES;
181+
[self.trackerHandle.layer setCornerRadius:10];
182+
self.tracker.backgroundColor = self.trackerColor;
183+
self.trackerHandle.backgroundColor = self.trackerHandleColor;
184+
// self.trackerView.layer.masksToBounds = true;
185+
self.tracker.layer.cornerRadius = 2;
186+
187+
188+
[self.trackerView addSubview:self.tracker];
189+
if (self.showTrackerHandle) {
190+
[self.trackerView addSubview: self.trackerHandle];
191+
}
192+
[self.tracker setUserInteractionEnabled:YES];
162193
[self.trackerView setUserInteractionEnabled:YES];
194+
[self.trackerHandle setUserInteractionEnabled:YES];
163195
[self addSubview:self.trackerView];
164196

165197
self.panGestureRecognizer = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(handleTrackerPan:)];
166198

167-
[self.panGestureRecognizer locationInView:self.trackerView];
199+
[self.panGestureRecognizer locationInView: self.trackerView];
168200

169201
[self.trackerView addGestureRecognizer:self.panGestureRecognizer];
202+
// [self.trackerHandle addGestureRecognizer:self.panGestureRecognizer];
203+
170204

171205
[self.leftThumbView.layer setMasksToBounds:YES];
172206
[self.leftOverlayView addSubview:self.leftThumbView];
@@ -203,14 +237,15 @@ - (void)updateBorderFrames
203237
[self.bottomBorder setFrame:CGRectMake(CGRectGetMaxX(self.leftOverlayView.frame), CGRectGetHeight(self.frameView.frame)-height, CGRectGetMinX(self.rightOverlayView.frame)-CGRectGetMaxX(self.leftOverlayView.frame), height)];
204238
}
205239

206-
- (void)handleTrackerPan: (UISwipeGestureRecognizer *) recognizer {
240+
- (void)handleTrackerPan: (UIGestureRecognizer *) recognizer {
241+
NSLog(@"Test");
207242
CGPoint point = [self.panGestureRecognizer locationInView:self.trackerView];
208243

209244
CGRect trackerFrame = self.trackerView.frame;
210-
trackerFrame.origin.x += point.x;
245+
trackerFrame.origin.x += point.x - self.trackerHandleHeight / 2;
211246
self.trackerView.frame = trackerFrame;
212247

213-
CGFloat time = (trackerFrame.origin.x - self.thumbWidth + self.scrollView.contentOffset.x) / self.widthPerSecond;
248+
CGFloat time = (trackerFrame.origin.x - self.thumbWidth + self.scrollView.contentOffset.x + self.trackerHandleHeight) / self.widthPerSecond;
214249
[self.delegate trimmerView:self currentPosition:time ];
215250

216251
}
@@ -294,7 +329,7 @@ - (void)seekToTime:(CGFloat) time
294329
CGFloat posToMove = time * self.widthPerSecond + self.thumbWidth - self.scrollView.contentOffset.x;
295330

296331
CGRect trackerFrame = self.trackerView.frame;
297-
trackerFrame.origin.x = posToMove;
332+
trackerFrame.origin.x = posToMove - self.trackerHandleHeight / 2;
298333
self.trackerView.frame = trackerFrame;
299334

300335
}

‎ios/RNVideoProcessing/RNTrimmerView/RNTrimmerView.h‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
#define RNTrimmerView_h
88

99
#import "ICGVideoTrimmer.h"
10+
#import "React/RCTView.h"
1011
#import "React/RCTViewManager.h"
1112
#import "React/RCTConvert.h"
1213
#import "React/RCTBridge.h"

‎ios/RNVideoProcessing/RNTrimmerView/RNTrimmerView.swift‎

Lines changed: 63 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import AVKit
88

99
@objc(RNTrimmerView)
1010
class RNTrimmerView: RCTView, ICGVideoTrimmerDelegate {
11-
11+
1212
var trimmerView: ICGVideoTrimmerView?
1313
var asset: AVAsset!
1414
var rect: CGRect = CGRect.zero
@@ -20,27 +20,63 @@ class RNTrimmerView: RCTView, ICGVideoTrimmerDelegate {
2020
var _maxLength: CGFloat? = nil
2121
var _thumbWidth: CGFloat? = nil
2222
var _trackerColor: UIColor = UIColor.clear
23-
23+
var _trackerHandleColor: UIColor = UIColor.clear
24+
var _showTrackerHandle = false
25+
2426
var source: NSString? {
2527
set {
2628
setSource(source: newValue)
2729
}
2830
get {
29-
31+
3032
return nil
3133
}
3234
}
33-
35+
36+
var showTrackerHandle: NSNumber? {
37+
set {
38+
if newValue == nil {
39+
return
40+
}
41+
let _nVal = newValue! == 1 ? true : false
42+
if _showTrackerHandle != _nVal {
43+
print("CHANGED: showTrackerHandle \(newValue!)");
44+
_showTrackerHandle = _nVal
45+
self.updateView()
46+
}
47+
}
48+
get {
49+
return nil
50+
}
51+
}
52+
53+
var trackerHandleColor: NSString? {
54+
set {
55+
if newValue != nil {
56+
let color = NumberFormatter().number(from: newValue! as String)
57+
let formattedColor = RCTConvert.uiColor(color)
58+
if formattedColor != nil {
59+
print("CHANGED: trackerHandleColor: \(newValue!)")
60+
self._trackerHandleColor = formattedColor!
61+
self.updateView();
62+
}
63+
}
64+
}
65+
get {
66+
return nil
67+
}
68+
}
69+
3470
var height: NSNumber? {
3571
set {
36-
self.rect.size.height = RCTConvert.cgFloat(newValue)
72+
self.rect.size.height = RCTConvert.cgFloat(newValue) + 40
3773
self.updateView()
3874
}
3975
get {
4076
return nil
4177
}
4278
}
43-
79+
4480
var width: NSNumber? {
4581
set {
4682
self.rect.size.width = RCTConvert.cgFloat(newValue)
@@ -50,7 +86,7 @@ class RNTrimmerView: RCTView, ICGVideoTrimmerDelegate {
5086
return nil
5187
}
5288
}
53-
89+
5490
var themeColor: NSString? {
5591
set {
5692
if newValue != nil {
@@ -63,7 +99,7 @@ class RNTrimmerView: RCTView, ICGVideoTrimmerDelegate {
6399
return nil
64100
}
65101
}
66-
102+
67103
var maxLength: NSNumber? {
68104
set {
69105
if newValue != nil {
@@ -75,7 +111,7 @@ class RNTrimmerView: RCTView, ICGVideoTrimmerDelegate {
75111
return nil
76112
}
77113
}
78-
114+
79115
var minLength: NSNumber? {
80116
set {
81117
if newValue != nil {
@@ -87,7 +123,7 @@ class RNTrimmerView: RCTView, ICGVideoTrimmerDelegate {
87123
return nil
88124
}
89125
}
90-
126+
91127
var thumbWidth: NSNumber? {
92128
set {
93129
if newValue != nil {
@@ -99,7 +135,7 @@ class RNTrimmerView: RCTView, ICGVideoTrimmerDelegate {
99135
return nil
100136
}
101137
}
102-
138+
103139
var currentTime: NSNumber? {
104140
set {
105141
print("CHANGED: [TrimmerView]: currentTime: \(newValue)")
@@ -113,15 +149,13 @@ class RNTrimmerView: RCTView, ICGVideoTrimmerDelegate {
113149
return nil
114150
}
115151
}
116-
152+
117153
var trackerColor: NSString? {
118154
set {
119155
if newValue == nil {
120156
return
121157
}
122-
if self.trimmerView == nil {
123-
return
124-
}
158+
print("CHANGED: trackerColor \(newValue!)")
125159
let color = NumberFormatter().number(from: newValue! as String)
126160
let formattedColor = RCTConvert.uiColor(color)
127161
if formattedColor != nil {
@@ -133,14 +167,18 @@ class RNTrimmerView: RCTView, ICGVideoTrimmerDelegate {
133167
return nil
134168
}
135169
}
136-
170+
137171
func updateView() {
138172
self.frame = rect
139173
if trimmerView != nil {
140174
trimmerView!.frame = rect
141175
trimmerView!.themeColor = self.mThemeColor
142176
trimmerView!.trackerColor = self._trackerColor
177+
trimmerView!.trackerHandleColor = self._trackerHandleColor
178+
trimmerView!.showTrackerHandle = self._showTrackerHandle
143179
trimmerView!.maxLength = _maxLength == nil ? CGFloat(self.asset.duration.seconds) : _maxLength!
180+
self.frame = CGRect(x: rect.origin.x, y: rect.origin.y, width: rect.size.width, height: rect.size.height + 20)
181+
self.backgroundColor = UIColor.blue
144182
if _minLength != nil {
145183
trimmerView!.minLength = _minLength!
146184
}
@@ -151,16 +189,16 @@ class RNTrimmerView: RCTView, ICGVideoTrimmerDelegate {
151189
// Timer.scheduledTimer(timeInterval: 0.5, target: self, selector: #selector(self.updateTrimmer), userInfo: nil, repeats: false)
152190
}
153191
}
154-
192+
155193
func updateTrimmer() {
156194
self.trimmerView!.resetSubviews()
157195
}
158-
196+
159197
func setSource(source: NSString?) {
160198
if source != nil {
161199
let pathToSource = NSURL(string: source! as String)
162-
self.asset = AVURLAsset(url: pathToSource as! URL, options: nil)
163-
200+
self.asset = AVURLAsset(url: pathToSource! as URL, options: nil)
201+
164202
trimmerView = ICGVideoTrimmerView(frame: rect, asset: self.asset)
165203
trimmerView!.showsRulerView = false
166204
trimmerView!.hideTracker(false)
@@ -170,27 +208,27 @@ class RNTrimmerView: RCTView, ICGVideoTrimmerDelegate {
170208
self.updateView()
171209
}
172210
}
173-
211+
174212
init(frame: CGRect, bridge: RCTBridge) {
175213
super.init(frame: frame)
176214
self.bridge = bridge
177215
}
178-
216+
179217
required init?(coder aDecoder: NSCoder) {
180218
fatalError("init(coder:) has not been implemented")
181219
}
182-
220+
183221
func onTrimmerPositionChange(startTime: CGFloat, endTime: CGFloat) {
184222
if self.onChange != nil {
185223
let event = ["startTime": startTime, "endTime": endTime]
186224
self.onChange!(event)
187225
}
188226
}
189-
227+
190228
func trimmerView(_ trimmerView: ICGVideoTrimmerView, didChangeLeftPosition startTime: CGFloat, rightPosition endTime: CGFloat) {
191229
onTrimmerPositionChange(startTime: startTime, endTime: endTime)
192230
}
193-
231+
194232
public func trimmerView(_ trimmerView: ICGVideoTrimmerView, currentPosition currentTime: CGFloat) {
195233
print("current", currentTime)
196234
if onTrackerMove == nil {

‎ios/RNVideoProcessing/RNTrimmerView/RNTrimmerViewBridge.m‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,5 +21,7 @@ @interface RCT_EXTERN_MODULE(RNTrimmerViewManager, RCTViewManager)
2121
RCT_EXPORT_VIEW_PROPERTY(currentTime, NSNumber)
2222
RCT_EXPORT_VIEW_PROPERTY(trackerColor, NSString)
2323
RCT_EXPORT_VIEW_PROPERTY(thumbWidth, NSNumber)
24+
RCT_EXPORT_VIEW_PROPERTY(showTrackerHandle, NSNumber)
25+
RCT_EXPORT_VIEW_PROPERTY(trackerHandleColor, NSString)
2426

2527
@end

0 commit comments

Comments
 (0)