[#3286] Validate media editor trimmer and fix if out of bounds during a drag.

public/src/editor/sequencer-editor.js

@@ -130,11 +130,26 @@ define( [ "util/mediatypes", "editor/editor", "util/time",
 
         // Updating functions
         function updateUI( options ) {
-          options = options || _popcornOptions;
+          var start,
+              end,
+              from;
 
-          var start = ( options.start || options.start === 0 ) && options.start || _popcornOptions.start,
-              end = options.end || ( options.end || options.end === 0 ) && options.end || _popcornOptions.end,
-              from = options.from || ( options.from || options.from === 0 ) && options.from || _popcornOptions.from;
+          options = options || _popcornOptions;
+          start = options.start;
+          end = options.end;
+          from = options.from;
+
+          if ( !from && from !== 0 ) {
+            from = _popcornOptions.from;
+          }
+
+          if ( !end && end !== 0 ) {
+            end = _popcornOptions.end;
+          }
+
+          if ( !start && start !== 0 ) {
+            start = _popcornOptions.start;
+          }
 
           // Adjust UI to account for very small durations
           if ( timeToPosition( end - start ) < MIN_VISUAL_WIDTH ) {
@@ -143,16 +158,11 @@ define( [ "util/mediatypes", "editor/editor", "util/time",
             clipSection.classList.remove( "small" );
           }
 
-          if ( options.from || options.from === 0 ) {
-            clipSection.style.left = timeToPosition( from ) + "px";
-            inInput.value = Time.toTimecode( from );
-            outInput.value = Time.toTimecode( from + end - start );
-          }
+          clipSection.style.left = timeToPosition( from ) + "px";
+          inInput.value = Time.toTimecode( from );
 
-          if ( options.end || options.start ) {
-            clipSection.style.width = timeToPosition( end - start ) + "px";
-            outInput.value = Time.toTimecode( from + end - start );
-          }
+          clipSection.style.width = timeToPosition( end - start ) + "px";
+          outInput.value = Time.toTimecode( from + end - start );
 
           if ( options.duration ) {
             clipEndLable.innerHTML = Time.toTimecode( options.duration );
@@ -216,13 +226,17 @@ define( [ "util/mediatypes", "editor/editor", "util/time",
           var left = startLeft + e.clientX - firstX,
               width = startWidth - ( e.clientX - firstX );
 
-          if ( left < 0 || width < 0 ) {
+          if ( left < 0 ) {
+            width += left;
+            left = 0;
+          }
+
+          if ( width < 0 ) {
             return;
           }
 
           updateOptions.end = _popcornOptions.start + positionToTime( width );
           updateOptions.from = positionToTime( left );
-
           updateUI({
             from: updateOptions.from,
             end: updateOptions.end
@@ -235,7 +249,11 @@ define( [ "util/mediatypes", "editor/editor", "util/time",
           var left = clipSection.offsetLeft,
               width = startWidth + e.clientX - firstX;
 
-          if ( left + width > el.offsetWidth || width < 0 ) {
+          if ( left + width > el.offsetWidth ) {
+            width = el.offsetWidth - left;
+          }
+
+          if ( width < 0 ) {
             return;
           }
 
@@ -277,7 +295,15 @@ define( [ "util/mediatypes", "editor/editor", "util/time",
           var left = startLeft + e.clientX - firstX,
               width = clipSection.offsetWidth;
 
-          if ( left < 0 || ( left + width ) > el.offsetWidth ) {
+          if ( left < 0 ) {
+            left = 0;
+          }
+
+          if ( left + width > el.offsetWidth ) {
+            left = el.offsetWidth - width;
+          }
+
+          if ( width < 0 ) {
             return;
           }