feat(FEC-14250): Modify start time as multiple of 2 (#60)

### Description of the Changes

Resolves [FEC-14250]

### CheckLists

- [ ] changes have been done against master branch, and PR does not
conflict
- [ ] new unit / functional tests have been added (whenever applicable)
- [ ] test are passing in local environment
- [ ] Travis tests are passing (or test results are not worse than on
master branch :))
- [ ] Docs have been updated


[FEC-14250]:
https://kaltura.atlassian.net/browse/FEC-14250?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

---------

Co-authored-by: quantumInverter <[email protected]>

src/components/share-overlay/share-overlay.js

@@ -285,7 +285,7 @@ const VideoStartOptions = (props: Object): React$Element<any> => {
 
     const clipStartTimeInputProps = {
       'aria-labelledby': 'clip-seek-from-label',
-      value: toHHMMSS(props.clipStartTimeValue),
+      value: toHHMMSS(props.clipOriginalStartTimeValue || props.clipStartTimeValue),
       onChange: e => onInputChangeHandler(e.target.value, _clipStartTimeInputRef),
       onBlur: e => onInputFocusOutHandler(e, props.handleClipStartTimeChange),
       ...sharedAttr
@@ -426,6 +426,15 @@ const mapStateToProps = state => ({
 const PLAYER_WIDTH_EMBED_DEFAULT = '560';
 const PLAYER_HEIGHT_EMBED_DEFAULT = '395';
 
+/**
+ * convert time so it will be aligned with search frame rulings
+ * @param {Number} time - time that needs to be cropped
+ * @returns {Number} - time that has been cropped in multiples of 2
+ */
+const cropTimeForFrames = (time: Number) => {
+  return Math.floor(time / 2) * 2;
+};
+
 /**
  * ShareOverlay component
  *
@@ -448,7 +457,8 @@ class ShareOverlay extends Component {
       view: shareOverlayView.Main,
       startFromValue: Math.floor(this.props.player.currentTime),
       videoClippingOption: VIDEO_CLIPPING_OPTIONS.FULL_VIDEO,
-      clipStartTimeValue: Math.floor(this.props.player.currentTime),
+      clipStartTimeValue: cropTimeForFrames(this.props.player.currentTime),
+      clipOriginalStartTimeValue: Math.floor(this.props.player.currentTime),
       clipEndTimeValue: Math.floor(this.props.player.duration)
     });
   }
@@ -509,8 +519,9 @@ class ShareOverlay extends Component {
    * @memberof ShareOverlay
    */
   _addKalturaClipParams(url: string): string {
-    url = this._updateUrlParams(url, 'kalturaSeekFrom', this.state.clipStartTimeValue);
-    return this._updateUrlParams(url, 'kalturaClipTo', this.state.clipEndTimeValue);
+    url = this._updateUrlParams(url, 'kalturaSeekFrom', cropTimeForFrames(this.state.clipStartTimeValue));
+    url = this._updateUrlParams(url, 'kalturaClipTo', this.state.clipEndTimeValue);
+    return this._updateUrlParams(url, 'kalturaStartTime', this.state.clipOriginalStartTimeValue % 2);
   }
 
   /**
@@ -607,7 +618,8 @@ class ShareOverlay extends Component {
    * @memberof ShareOverlay
    */
   _handleClipStartTimeChange = (value: string): void => {
-    this.setState({clipStartTimeValue: this._convertTimeValue(value)});
+    const newTime = cropTimeForFrames(this._convertTimeValue(value));
+    this.setState({clipStartTimeValue: newTime, clipOriginalStartTimeValue: this._convertTimeValue(value)});
   };
 
   /**
@@ -735,7 +747,7 @@ class ShareOverlay extends Component {
         config={this.props.config}
         videoClippingOption={this.state.videoClippingOption}
         setVideoClippingOption={this._onVideoClippingOptionChange}
-        clipStartTimeValue={this.state.clipStartTimeValue}
+        clipStartTimeValue={this.state.clipOriginalStartTimeValue}
         handleClipStartTimeChange={this._handleClipStartTimeChange}
         handleClipEndTimeChange={this._handleClipEndTimeChange}
         clipEndTimeValue={this.state.clipEndTimeValue}