fix mobile and max-height

devdanim · Jul 7, 2021 · e13e52c · e13e52c
1 parent 692f733
commit e13e52c
Show file tree

Hide file tree

Showing 7 changed files with 61 additions and 52 deletions.
diff --git a/dist/dnm-react-video-cut.es.js b/dist/dnm-react-video-cut.es.js
diff --git a/dist/dnm-react-video-cut.es.min.js b/dist/dnm-react-video-cut.es.min.js
diff --git a/dist/dnm-react-video-cut.umd.js b/dist/dnm-react-video-cut.umd.js
diff --git a/dist/dnm-react-video-cut.umd.min.js b/dist/dnm-react-video-cut.umd.min.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "dnm-react-video-cut",
-  "version": "1.2.4",
+  "version": "1.2.5",
   "description": "",
   "main": "dist/dnm-react-video-cut.umd.min.js",
   "module": "dist/dnm-react-video-cut.es.min.js",

diff --git a/src/core.js b/src/core.js
@@ -34,7 +34,7 @@ export default class DnmVideoCut extends React.Component {
         this.scrollable = React.createRef();
         this.draggable = React.createRef();
         this.draggableApi = null;
-        this.seekVideoTo = throttle(this._seekVideoTo, 50);
+        this.seekVideoTo = throttle(this._seekVideoTo, 20);
     }
 
     componentDidMount() {
@@ -264,9 +264,10 @@ export default class DnmVideoCut extends React.Component {
     handleContainerMouseDown = (ev) => {
         ev.stopPropagation();
         const { target } = ev;
+        const { rangeDisabled, forceCursorDragging } = this.state;
         if(!target.classList.contains("rc-slider-handle") && !target.classList.contains("dnm-video-cut-playing-cursor")) {
-            this.setState({ rangeDisabled: true, forceCursorDragging: true });
-        } else this.setState({ rangeDisabled: false, forceCursorDragging: false });
+            if (!rangeDisabled || !forceCursorDragging) this.setState({ rangeDisabled: true, forceCursorDragging: true });
+        } else if (rangeDisabled || forceCursorDragging) this.setState({ rangeDisabled: false, forceCursorDragging: false });
     }
 
     handleContainerMouseUp = () => this.setState({ rangeDisabled: true, forceCursorDragging: false });
@@ -278,12 +279,12 @@ export default class DnmVideoCut extends React.Component {
 
     render() {
         const { inValue, outValue } = this.getFormatedValues();
-        const { videoDuration, isEditing, playCursorPosition, isPlaying, forceCursorDragging, zoomFactor, } = this.state;
+        const { videoDuration, playCursorPosition, isPlaying, forceCursorDragging, zoomFactor, } = this.state;
         const { src, catalogue, classes, playerCursorWidth, muted, onMuteChange, } = this.props;
 
         return (
             <div css={css`${styles}`}> 
-                <div className={`dnm-video-cut-root ${classes.root || ""} ${isEditing ? "is-editing" : ""} ${isPlaying ? "is-playing" : "is-paused"}`}>
+                <div className={`dnm-video-cut-root ${classes.root || ""} ${isPlaying ? "is-playing" : "is-paused"}`}>
                     <video 
                         className={`dnm-video-cut-player ${classes.player || ""}`}
                         src={`${src}`}
@@ -294,13 +295,21 @@ export default class DnmVideoCut extends React.Component {
                         onLoadedData={this.handleLoadedData}
                         onLoad={this.handleVideoLoad}
                         onError={this.handleVideoPlayerError}
+                        preload="auto"
                     />
                     <div>
                         <div className="dnm-video-cut-play-icon" onClick={this.handleFreePlayClick}>
                             {isPlaying ? <PauseIcon /> : <PlayIcon /> }
                         </div>
                         <div className="dnm-video-cut-progress-scrollable-parent" ref={this.scrollable}>
-                            <div className="dnm-video-cut-progress-container" style={{ width: `calc(${zoomFactor[0] + 100}% - 20px)` }} onTouchStart={this.handleContainerMouseDown} onTouchEnd={this.handleContainerMouseUp} onMouseDown={this.handleContainerMouseDown} onMouseUp={this.handleContainerMouseUp}>
+                            <div 
+                                className="dnm-video-cut-progress-container" 
+                                style={{ width: `calc(${zoomFactor[0] + 100}% - 20px)` }} 
+                                onTouchMove={this.handleContainerMouseDown} 
+                                onTouchEnd={this.handleContainerMouseUp} 
+                                onMouseDown={this.handleContainerMouseDown} 
+                                onMouseUp={this.handleContainerMouseUp}
+                            >
                                 <Draggable 
                                     className="dnm-video-cut-playing-cursor-draggable-item"
                                     axis="x" 

diff --git a/src/css/styles.js b/src/css/styles.js
@@ -261,18 +261,12 @@ export default css`
   }
   
   .dnm-video-cut-player {
-    transform: scale(1);
     opacity: 1;
     width: 100%;
+    max-height: 60vh;
     transition: all 0.2s ease-in-out;
   }
   
-  .dnm-video-cut-root.is-editing .dnm-video-cut-player {
-    transform: scale(0.9);
-    opacity: 0.8;
-    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.5);
-  }
-  
   .dnm-video-cut-range {
     width: 100%;
     position: relative;