From 3a759f81e30fe9ec5bcfb6fd9bc48e1a01cd4995 Mon Sep 17 00:00:00 2001
From: Kate Hudson <katehudsondesign@gmail.com>
Date: Tue, 5 Mar 2013 11:50:01 -0500
Subject: [PATCH 1/3] [t3268] Convert URL stuff to being not editable, pull
 clip metadata

---
 css/editors.less                  |  14 ++
 css/media-editor.less             | 215 +++++++++++++++---------------
 src/editor/sequencer-editor.js    |  39 +++++-
 src/layouts/sequencer-editor.html |  12 +-
 4 files changed, 168 insertions(+), 112 deletions(-)

diff --git a/css/editors.less b/css/editors.less
index 8245a72a0..9b060ff3e 100644
--- a/css/editors.less
+++ b/css/editors.less
@@ -592,6 +592,20 @@ textarea {
   margin: 0;
   padding: 10px 20px;
   border-bottom: 1px solid @baseLightOutline;
+  &.media-properties {
+    font-size: 11px;
+    background: darken( @baseLight, 5% );
+    .clearfix();
+  }
+}
+
+.source-container {
+  display: none;
+  margin-bottom: 5px;
+  &.loaded {
+    display: block;
+  }
+  .clearfix();
 }
 
 .butter-form .switch {
diff --git a/css/media-editor.less b/css/media-editor.less
index e8907b98e..972348ff0 100644
--- a/css/media-editor.less
+++ b/css/media-editor.less
@@ -132,112 +132,6 @@
     border-radius: 2px;
   }
 
-  .media-gallery-item {
-    position: relative;
-    padding: 10px 20px;
-    height: 60px;
-    border: 0 solid @baseLightOutline;
-    border-top-width: 1px;
-    background-color: @baseLight;
-    font-size: 11px;
-    .transition( background-color 0.2s linear );
-    &:first-child {
-      margin-top: -1px;
-    }
-    &.new {
-      background: @green;
-      color: #FFF;
-      > .delete-btn {
-        display: none;
-      }
-      > .mg-meta-data {
-        > .mg-type {
-          color: #FFF;
-        }
-      }
-    }
-  }
-
-  .mg-thumbnail {
-    position: relative;
-    overflow: hidden;
-    float: left;
-    margin-right: 10px;
-    border: 1px solid @baseLightOutline;
-    > img, video {
-      display: block;
-      width: 80px;
-      height: 60px;
-    }
-    &:hover {
-      border-color: @green;
-    }
-    &:hover:before {
-      content: "";
-      display: block;
-      position: absolute;
-      top: 0;
-      left: 0;
-      height: 100%;
-      width: 100%;
-      background: fade( @green, 60% );
-    }
-    &:hover:after {
-      content: "";
-      height: 14px;
-      width: 14px;
-      position: absolute;
-      top: 50%;
-      margin-top: -7px;
-      margin-left: -7px;
-      left: 50%;
-      background: url( "../resources/icons/glyphiconshalflings-white.png" ) -408px -96px no-repeat;
-    }
-  }
-  .mg-html5 .mg-thumbnail {
-    > video {
-      height: auto;
-    }
-    background: url( "../resources/icons/media.png" ) center no-repeat;
-  }
-
-  .mg-meta-data {
-    float: left;
-    width: 190px;
-    height: 60px;
-    line-height: 1.2em;
-  }
-  .mg-title {
-    overflow: hidden;
-    font-weight: 700;
-    max-height: 3.6em; // 3 lines
-  }
-  .mg-type {
-    &:after {
-      content: " clip";
-      text-transform: lowercase;
-    }
-    color: #999;
-    text-transform: capitalize;
-  }
-  .mg-error {
-    color: #FF0000;
-  }
-  .mg-duration {
-    &:before {
-      content: "Duration: "
-    }
-  }
-  .mg-delete-btn {
-    position: absolute;
-    top: 10px;
-    right: 5px;
-    opacity: 0.5;
-    &:hover {
-      opacity: 1;
-    }
-  }
-
   .add-media-input {
     height: 50px;
   }
@@ -261,3 +155,112 @@
   }
 }
 
+
+.media-gallery-item {
+  position: relative;
+  padding: 10px 20px;
+  height: 60px;
+  border: 0 solid @baseLightOutline;
+  border-top-width: 1px;
+  background-color: @baseLight;
+  font-size: 11px;
+  .transition( background-color 0.2s linear );
+  &:first-child {
+    margin-top: -1px;
+  }
+  &.new {
+    background: @green;
+    color: #FFF;
+    > .delete-btn {
+      display: none;
+    }
+    > .mg-meta-data {
+      > .mg-type {
+        color: #FFF;
+      }
+    }
+  }
+}
+
+.mg-thumbnail {
+  position: relative;
+  overflow: hidden;
+  float: left;
+  margin-right: 10px;
+  border: 1px solid @baseLightOutline;
+  width: 80px;
+  height: 60px;
+  > img, video {
+    display: block;
+    width: 80px;
+    height: 60px;
+  }
+  &:hover {
+    border-color: @green;
+  }
+  &:hover:before {
+    content: "";
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    background: fade( @green, 60% );
+  }
+  &:hover:after {
+    content: "";
+    height: 14px;
+    width: 14px;
+    position: absolute;
+    top: 50%;
+    margin-top: -7px;
+    margin-left: -7px;
+    left: 50%;
+    background: url( "../resources/icons/glyphiconshalflings-white.png" ) -408px -96px no-repeat;
+  }
+}
+.mg-html5 .mg-thumbnail {
+  > video {
+    height: auto;
+  }
+  background: url( "../resources/icons/media.png" ) center no-repeat;
+}
+
+.mg-meta-data {
+  float: left;
+  width: 190px;
+  height: 60px;
+  line-height: 1.2em;
+}
+.mg-title {
+  overflow: hidden;
+  font-weight: 700;
+  max-height: 3.6em; // 3 lines
+}
+.mg-type {
+  &:after {
+    content: " clip";
+    text-transform: lowercase;
+  }
+  color: #999;
+  text-transform: capitalize;
+}
+.mg-error {
+  color: #FF0000;
+}
+.mg-duration {
+  &:before {
+    content: "Duration: "
+  }
+}
+.mg-delete-btn {
+  position: absolute;
+  top: 10px;
+  right: 5px;
+  opacity: 0.5;
+  &:hover {
+    opacity: 1;
+  }
+}
+
diff --git a/src/editor/sequencer-editor.js b/src/editor/sequencer-editor.js
index 80927c205..0c897768a 100644
--- a/src/editor/sequencer-editor.js
+++ b/src/editor/sequencer-editor.js
@@ -451,16 +451,48 @@ define( [ "util/mediatypes", "editor/editor", "util/time",
       };
 
       _fields.startEnd = new StartEnd( startEndContainer, "start", _this.updateTrackEventSafe );
-      _fields.source = new Input( sourceEl, "source", sourceCallback, sourceUpdateUI );
+     // _fields.source = new Input( sourceEl, "source", sourceCallback, sourceUpdateUI );
       _fields.fallback = new Input( fallbackEl, "fallback", _this.updateTrackEventSafe, fallbackUpdateUI );
       _fields.title = new Input( titleEl, "title", _this.updateTrackEventSafe );
       _fields.mute = new Toggler( muteEl, "mute", "reverse", muteUpdateUI );
       _fields.volume = new Slider( sliderEl, "volume" );
       _fields.hidden = new Toggler( hiddenEl, "hidden", "reverse" );
       _fields.from = new Trimmer( clipTrimmerEl );
+      _fields.source = {
+        el: sourceEl,
+        updateUI: function() {
+          if ( !Array.isArray( _popcornOptions.source ) ) {
+            _popcornOptions.source = [ _popcornOptions.source ];
+          }
 
-      Textbox.applyTo( _fields.source.el, "textarea" );
-      Textbox.applyTo( _fields.fallback.el, "textarea" );
+          if ( MediaUtils.checkUrl( _popcornOptions.source[ 0 ] ) === "html5" ) {
+            fallbackContainer.classList.add( "show" );
+          } else {
+            fallbackContainer.classList.remove( "show" );
+          }
+
+          MediaUtils.getMetaData( _popcornOptions.source[ 0 ], function( data ) {
+            var thumbnailImg;
+            sourceEl.classList.add( "loaded" );
+            sourceEl.querySelector( ".mg-title" ).innerHTML = data.title;
+            sourceEl.querySelector( ".mg-type" ).innerHTML = data.type;
+            sourceEl.querySelector( ".mg-duration" ).innerHTML = Time.toTimecode( data.duration ) || "???";
+            if ( data.type === "html5" ) {
+              thumbnailImg = data.thumbnail;
+            } else {
+              thumbnailImg = document.createElement( "img" );
+              thumbnailImg.src = data.thumbnail;
+              sourceEl.querySelector( ".mg-thumbnail" ).appendChild( thumbnailImg );
+            }
+            sourceEl.classList.add( "mg-" + data.type );
+            sourceEl.querySelector( ".mg-title" ).addEventListener( "click", function( e ) {
+              _butter.editor.openEditor( "media-editor" );
+            }, false );
+          });
+        }
+      };
+
+      _fields.source.updateUI();
 
     } //setup
 
@@ -478,6 +510,7 @@ define( [ "util/mediatypes", "editor/editor", "util/time",
           }
         }
       }
+
       _this.setErrorState( false );
     }
 
diff --git a/src/layouts/sequencer-editor.html b/src/layouts/sequencer-editor.html
index 04842a9a6..faf596de3 100644
--- a/src/layouts/sequencer-editor.html
+++ b/src/layouts/sequencer-editor.html
@@ -9,9 +9,15 @@ <h1>Clip editor</h1>
       <div class="editor-options scrollbar-inner">
 
         <fieldset class="butter-editor-section media-properties">
-          <label>URL</label>
-           <textarea class="url two-lines" data-manifest-key="source"></textarea>
-
+          <div data-manifest-key="source" class="source-container">
+            <div class="mg-thumbnail"></div>
+            <div class="mg-meta-data">
+              <div class="mg-title"></div>
+              <div class="mg-type"></div>
+              <div class="mg-duration"></div>
+              <div class="mg-error"></div>
+            </div>
+          </div>
           <div class="fallback-container">
             <label>Fallback
               <span class="icon icon-only icon-question-sign">

From 581876d3ad1384b02646ee5f6dbee3b364126da0 Mon Sep 17 00:00:00 2001
From: Kate Hudson <katehudsondesign@gmail.com>
Date: Tue, 5 Mar 2013 12:03:58 -0500
Subject: [PATCH 2/3] removing old code

---
 src/editor/sequencer-editor.js | 679 ++++++++++++++++-----------------
 1 file changed, 327 insertions(+), 352 deletions(-)

diff --git a/src/editor/sequencer-editor.js b/src/editor/sequencer-editor.js
index 0c897768a..180522e0f 100644
--- a/src/editor/sequencer-editor.js
+++ b/src/editor/sequencer-editor.js
@@ -19,371 +19,411 @@ define( [ "util/mediatypes", "editor/editor", "util/time",
 
     var _fields = {};
 
-      // Creates an "off-on" toggler
-      function Toggler( el, property, isReverse, customUpdateUI ) {
-        var hiddenInput = el.querySelector( "input" );
-
-        function updateUI() {
-          var val = _popcornOptions[ property ];
-          if ( val && !isReverse || !val && isReverse ) {
-            el.classList.add( "on" );
-          } else {
-            el.classList.remove( "on" );
-          }
-          hiddenInput.checked = val;
-          if ( customUpdateUI ) {
-            customUpdateUI( el );
-          }
+    // Creates an "off-on" toggler
+    function Toggler( el, property, isReverse, customUpdateUI ) {
+      var hiddenInput = el.querySelector( "input" );
+
+      function updateUI() {
+        var val = _popcornOptions[ property ];
+        if ( val && !isReverse || !val && isReverse ) {
+          el.classList.add( "on" );
+        } else {
+          el.classList.remove( "on" );
         }
-
-        function updateTrackEvent( val ) {
-          var properties = {};
-          properties[ property ] = val;
-          updateUI( val );
-          _this.updateTrackEventSafe( _trackEvent, properties );
+        hiddenInput.checked = val;
+        if ( customUpdateUI ) {
+          customUpdateUI( el );
         }
+      }
 
-        el.addEventListener( "click", function() {
-          // Toggle the state
-          updateTrackEvent( !hiddenInput.checked );
-        }, false );
-
-        updateUI( _popcornOptions[ property ] );
+      function updateTrackEvent( val ) {
+        var properties = {};
+        properties[ property ] = val;
+        updateUI( val );
+        _this.updateTrackEventSafe( _trackEvent, properties );
+      }
 
-        return {
-          el: el,
-          updateUI: updateUI,
-        };
+      el.addEventListener( "click", function() {
+        // Toggle the state
+        updateTrackEvent( !hiddenInput.checked );
+      }, false );
 
-      }
+      updateUI( _popcornOptions[ property ] );
 
-      // Creates a standard input
-      function Input( el, property, callback, customUpdate ) {
-        _this.attachInputChangeHandler( el, _trackEvent, property, callback );
+      return {
+        el: el,
+        updateUI: updateUI,
+      };
 
-        function updateUI() {
-          var val = _popcornOptions[ property ];
-          el.value = val;
-          if ( customUpdate ) {
-            customUpdate( el );
-          }
-        }
+    }
 
-        updateUI( _popcornOptions[ property ] );
+    // Creates a standard input
+    function Input( el, property, callback, customUpdate ) {
+      _this.attachInputChangeHandler( el, _trackEvent, property, callback );
 
-        return {
-          el: el,
-          updateUI: updateUI
-        };
+      function updateUI() {
+        var val = _popcornOptions[ property ];
+        el.value = val;
+        if ( customUpdate ) {
+          customUpdate( el );
+        }
       }
 
-      function StartEnd( el ) {
-        var container = _this.createStartEndInputs( _trackEvent, _this.updateTrackEventSafe ),
-            startEl = container.querySelector( "[data-manifest-key=start]" ),
-            endEl = container.querySelector( "[data-manifest-key=end]" );
+      updateUI( _popcornOptions[ property ] );
 
-        el.appendChild( container );
+      return {
+        el: el,
+        updateUI: updateUI
+      };
+    }
 
-        function updateUI() {
-          startEl.value = Time.toTimecode( _popcornOptions.start );
-          endEl.value = Time.toTimecode( _popcornOptions.end );
-        }
+    function StartEnd( el ) {
+      var container = _this.createStartEndInputs( _trackEvent, _this.updateTrackEventSafe ),
+          startEl = container.querySelector( "[data-manifest-key=start]" ),
+          endEl = container.querySelector( "[data-manifest-key=end]" );
 
-        updateUI();
+      el.appendChild( container );
 
-        return {
-          el: el,
-          updateUI: updateUI
-        };
+      function updateUI() {
+        startEl.value = Time.toTimecode( _popcornOptions.start );
+        endEl.value = Time.toTimecode( _popcornOptions.end );
       }
 
-      function Slider( el, property ) {
-        var scrubber = el.querySelector( ".butter-slider-scrubber" ),
-            MAX_VAL = el.getAttribute( "data-max" ) || 100;
+      updateUI();
 
-        function toReal( n ) {
-          var maxUI = el.offsetWidth;
-          return ( n / maxUI ) * MAX_VAL;
-        }
+      return {
+        el: el,
+        updateUI: updateUI
+      };
+    }
 
-        function toUI( n ) {
-          var maxUI = el.offsetWidth;
-          return ( n / MAX_VAL ) * maxUI;
-        }
+    function Slider( el, property ) {
+      var scrubber = el.querySelector( ".butter-slider-scrubber" ),
+          MAX_VAL = el.getAttribute( "data-max" ) || 100;
 
-        function normalize( n ) {
-          if ( n < 0 ) {
-            n = 0;
-          } else if ( n > MAX_VAL ) {
-            n = MAX_VAL;
-          }
-          return n;
-        }
+      function toReal( n ) {
+        var maxUI = el.offsetWidth;
+        return ( n / maxUI ) * MAX_VAL;
+      }
 
-        function updateUI() {
-          scrubber.style.left = toUI( _popcornOptions[ property ] ) + "px";
-        }
+      function toUI( n ) {
+        var maxUI = el.offsetWidth;
+        return ( n / MAX_VAL ) * maxUI;
+      }
 
-        function updateTrackEvent( options) {
-          _this.updateTrackEventSafe( _trackEvent, options );
-          updateUI();
+      function normalize( n ) {
+        if ( n < 0 ) {
+          n = 0;
+        } else if ( n > MAX_VAL ) {
+          n = MAX_VAL;
         }
+        return n;
+      }
 
-        var firstX,
-            startLeft;
+      function updateUI() {
+        scrubber.style.left = toUI( _popcornOptions[ property ] ) + "px";
+      }
 
-        function onSlideStop() {
-          document.removeEventListener( "mousemove", onSliding, false );
-          document.removeEventListener( "mouseup", onSlideStop, false );
-        }
+      function updateTrackEvent( options) {
+        _this.updateTrackEventSafe( _trackEvent, options );
+        updateUI();
+      }
 
-        function onSliding( e ) {
-          var left = startLeft + e.clientX - firstX,
-              properties = {};
-          properties[ property ] = normalize( toReal( left ) );
-          updateTrackEvent( properties );
-        }
+      var firstX,
+          startLeft;
 
-        function onSlideStart( e ) {
-          e.preventDefault();
-          firstX = e.clientX;
-          startLeft = scrubber.offsetLeft;
-          document.addEventListener( "mousemove", onSliding, false );
-          document.addEventListener( "mouseup", onSlideStop, false );
-        }
+      function onSlideStop() {
+        document.removeEventListener( "mousemove", onSliding, false );
+        document.removeEventListener( "mouseup", onSlideStop, false );
+      }
 
-        scrubber.addEventListener( "mousedown", onSlideStart, false );
-        updateUI();
+      function onSliding( e ) {
+        var left = startLeft + e.clientX - firstX,
+            properties = {};
+        properties[ property ] = normalize( toReal( left ) );
+        updateTrackEvent( properties );
       }
 
-      // Our custom trimmer thingy
-      function Trimmer( el ) {
-
-        var MIN_VISUAL_WIDTH = 5;
-
-        var rightHandle = el.querySelector( ".trimmer-resizable-e" ),
-            leftHandle = el.querySelector( ".trimmer-resizable-w" ),
-            outInput = _rootElement.querySelector( ".trimmer-input-right" ),
-            inInput = _rootElement.querySelector( ".trimmer-input-left" ),
-            clipSection = el.querySelector( ".clip-section" ),
-            clipEndLable = el.querySelector( ".clip-end" );
-
-        var firstX,
-            startLeft,
-            startWidth,
-            activeHandle,
-            updateOptions = {};
-
-        // Converting px <=> time, normalizing
-        function positionToTime( pos ) {
-          var max1 = _popcornOptions.duration,
-              max2 = el.offsetWidth;
-          return ( pos / max2 ) * max1;
-        }
+      function onSlideStart( e ) {
+        e.preventDefault();
+        firstX = e.clientX;
+        startLeft = scrubber.offsetLeft;
+        document.addEventListener( "mousemove", onSliding, false );
+        document.addEventListener( "mouseup", onSlideStop, false );
+      }
 
-        function timeToPosition( time ) {
-          var max1 = _popcornOptions.duration,
-              max2 = el.offsetWidth;
-          return ( time / max1 ) * max2;
-        }
+      scrubber.addEventListener( "mousedown", onSlideStart, false );
+      updateUI();
+    }
 
-        // Updating functions
-        function updateUI( options ) {
-          options = options || _popcornOptions;
+    // Our custom trimmer thingy
+    function Trimmer( el ) {
 
-          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;
+      var MIN_VISUAL_WIDTH = 5;
 
-          // Adjust UI to account for very small durations
-          if ( timeToPosition( end - start ) < MIN_VISUAL_WIDTH ) {
-            clipSection.classList.add( "small" );
-          } else {
-            clipSection.classList.remove( "small" );
-          }
+      var rightHandle = el.querySelector( ".trimmer-resizable-e" ),
+          leftHandle = el.querySelector( ".trimmer-resizable-w" ),
+          outInput = _rootElement.querySelector( ".trimmer-input-right" ),
+          inInput = _rootElement.querySelector( ".trimmer-input-left" ),
+          clipSection = el.querySelector( ".clip-section" ),
+          clipEndLable = el.querySelector( ".clip-end" );
 
-          if ( options.from ) {
-            clipSection.style.left = timeToPosition( from ) + "px";
-            inInput.value = Time.toTimecode( from );
-            outInput.value = Time.toTimecode( from + end - start );
-          }
+      var firstX,
+          startLeft,
+          startWidth,
+          activeHandle,
+          updateOptions = {};
 
-          if ( options.end || options.start ) {
-            clipSection.style.width = timeToPosition( end - start ) + "px";
-            outInput.value = Time.toTimecode( from + end - start );
-          }
+      // Converting px <=> time, normalizing
+      function positionToTime( pos ) {
+        var max1 = _popcornOptions.duration,
+            max2 = el.offsetWidth;
+        return ( pos / max2 ) * max1;
+      }
 
-          if ( options.duration ) {
-            clipEndLable.innerHTML = Time.toTimecode( options.duration );
-          }
+      function timeToPosition( time ) {
+        var max1 = _popcornOptions.duration,
+            max2 = el.offsetWidth;
+        return ( time / max1 ) * max2;
+      }
+
+      // Updating functions
+      function updateUI( options ) {
+        options = options || _popcornOptions;
+
+        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;
+
+        // Adjust UI to account for very small durations
+        if ( timeToPosition( end - start ) < MIN_VISUAL_WIDTH ) {
+          clipSection.classList.add( "small" );
+        } else {
+          clipSection.classList.remove( "small" );
+        }
+
+        if ( options.from ) {
+          clipSection.style.left = timeToPosition( from ) + "px";
+          inInput.value = Time.toTimecode( from );
+          outInput.value = Time.toTimecode( from + end - start );
+        }
 
+        if ( options.end || options.start ) {
+          clipSection.style.width = timeToPosition( end - start ) + "px";
+          outInput.value = Time.toTimecode( from + end - start );
         }
 
-        function updateEndAfterExpand() {
-          var track = _trackEvent.track;
-          track.removeTrackEvent( _trackEvent );
-          track.addTrackEvent( _trackEvent );
-          _this.updateTrackEventSafe( _trackEvent, updateOptions );
-          _butter.unlisten( "mediaready", updateEndAfterExpand );
+        if ( options.duration ) {
+          clipEndLable.innerHTML = Time.toTimecode( options.duration );
+        }
+
+      }
+
+      function updateEndAfterExpand() {
+        var track = _trackEvent.track;
+        track.removeTrackEvent( _trackEvent );
+        track.addTrackEvent( _trackEvent );
+        _this.updateTrackEventSafe( _trackEvent, updateOptions );
+        _butter.unlisten( "mediaready", updateEndAfterExpand );
+        updateOptions = {};
+        updateUI();
+      }
+
+      function updateTrackEvent( options ) {
+        // If the end time is greater than the duration of the video, expand it to fit.
+        // We have to set an event listener on "mediaready" to update the trackevent after the base duration has been changed
+        if ( options.end && options.end > _butter.duration ) {
+          _butter.currentMedia.url = "#t=," + options.end;
+          _butter.listen( "mediaready", updateEndAfterExpand );
+        } else {
+          _this.updateTrackEventSafe( _trackEvent, options );
           updateOptions = {};
           updateUI();
         }
+      }
 
-        function updateTrackEvent( options ) {
-          // If the end time is greater than the duration of the video, expand it to fit.
-          // We have to set an event listener on "mediaready" to update the trackevent after the base duration has been changed
-          if ( options.end && options.end > _butter.duration ) {
-            _butter.currentMedia.url = "#t=," + options.end;
-            _butter.listen( "mediaready", updateEndAfterExpand );
-          } else {
-            _this.updateTrackEventSafe( _trackEvent, options );
-            updateOptions = {};
-            updateUI();
-          }
+      function onResizeStop() {
+        var accuracy,
+            start = updateOptions.start || _popcornOptions.start,
+            end = updateOptions.end || _popcornOptions.end;
+
+        el.classList.remove( "editing" );
+
+        if ( activeHandle === "left" ) {
+          accuracy = start * Math.pow( 10, Time.timeAccuracy - 1 );
+          butter.currentTime = start === 0 ? start : Math.ceil( start * accuracy ) / accuracy;
+        } else if ( activeHandle === "right" ) {
+          accuracy = end * Math.pow( 10, Time.timeAccuracy - 1 );
+          butter.currentTime = Math.floor( end * accuracy ) / accuracy;
         }
 
-        function onResizeStop() {
-          var accuracy,
-              start = updateOptions.start || _popcornOptions.start,
-              end = updateOptions.end || _popcornOptions.end;
+        updateTrackEvent( updateOptions );
+        activeHandle = "";
 
-          el.classList.remove( "editing" );
+        document.removeEventListener( "mousemove", onResizingRight, false );
+        document.removeEventListener( "mousemove", onResizingLeft, false );
+        document.removeEventListener( "mouseup", onResizeStop, false );
+      }
 
-          if ( activeHandle === "left" ) {
-            accuracy = start * Math.pow( 10, Time.timeAccuracy - 1 );
-            butter.currentTime = start === 0 ? start : Math.ceil( start * accuracy ) / accuracy;
-          } else if ( activeHandle === "right" ) {
-            accuracy = end * Math.pow( 10, Time.timeAccuracy - 1 );
-            butter.currentTime = Math.floor( end * accuracy ) / accuracy;
-          }
 
-          updateTrackEvent( updateOptions );
-          activeHandle = "";
+      function onResizingLeft( e ) {
+        e.preventDefault();
+        var left = startLeft + e.clientX - firstX,
+            width = startWidth - ( e.clientX - firstX );
 
-          document.removeEventListener( "mousemove", onResizingRight, false );
-          document.removeEventListener( "mousemove", onResizingLeft, false );
-          document.removeEventListener( "mouseup", onResizeStop, false );
+        if ( left < 0 || width < 0 ) {
+          return;
         }
 
+        updateOptions.end = _popcornOptions.start + positionToTime( width );
+        updateOptions.from = positionToTime( left );
 
-        function onResizingLeft( e ) {
-          e.preventDefault();
-          var left = startLeft + e.clientX - firstX,
-              width = startWidth - ( e.clientX - firstX );
-
-          if ( left < 0 || width < 0 ) {
-            return;
-          }
+        updateUI({
+          from: updateOptions.from,
+          end: updateOptions.end
+        });
 
-          updateOptions.end = _popcornOptions.start + positionToTime( width );
-          updateOptions.from = positionToTime( left );
+      }
 
-          updateUI({
-            from: updateOptions.from,
-            end: updateOptions.end
-          });
+      function onResizingRight( e ) {
+        e.preventDefault();
+        var left = clipSection.offsetLeft,
+            width = startWidth + e.clientX - firstX;
 
+        if ( left + width > el.offsetWidth || width < 0 ) {
+          return;
         }
 
-        function onResizingRight( e ) {
-          e.preventDefault();
-          var left = clipSection.offsetLeft,
-              width = startWidth + e.clientX - firstX;
+        updateOptions.end = _popcornOptions.start + positionToTime( width );
+        updateUI({
+          end: updateOptions.end
+        });
+
+      }
 
-          if ( left + width > el.offsetWidth || width < 0 ) {
-            return;
-          }
+      function onResizeStart( e ) {
+        e.preventDefault(); // Prevent selection
+        el.classList.add( "editing" );
 
-          updateOptions.end = _popcornOptions.start + positionToTime( width );
-          updateUI({
-            end: updateOptions.end
-          });
+        firstX = e.clientX;
+        startLeft = clipSection.offsetLeft;
+        startWidth = clipSection.offsetWidth;
 
+        if ( this === rightHandle ) {
+          document.addEventListener( "mousemove", onResizingRight, false );
+          activeHandle = "right";
+        } else if ( this === leftHandle ) {
+          activeHandle = "left";
+          document.addEventListener( "mousemove", onResizingLeft, false );
         }
+        document.addEventListener( "mouseup", onResizeStop, false );
+      }
 
-        function onResizeStart( e ) {
-          e.preventDefault(); // Prevent selection
-          el.classList.add( "editing" );
 
-          firstX = e.clientX;
-          startLeft = clipSection.offsetLeft;
-          startWidth = clipSection.offsetWidth;
+      function onDragStop() {
+        el.classList.remove( "editing" );
+        updateTrackEvent( updateOptions );
+        document.removeEventListener( "mouseup", onDragStop, false );
+        document.removeEventListener( "mousemove", onDragging, false );
+      }
 
-          if ( this === rightHandle ) {
-            document.addEventListener( "mousemove", onResizingRight, false );
-            activeHandle = "right";
-          } else if ( this === leftHandle ) {
-            activeHandle = "left";
-            document.addEventListener( "mousemove", onResizingLeft, false );
-          }
-          document.addEventListener( "mouseup", onResizeStop, false );
+      function onDragging( e ) {
+        e.preventDefault(); // Prevent selection
+        var left = startLeft + e.clientX - firstX,
+            width = clipSection.offsetWidth;
+
+        if ( left < 0 || ( left + width ) > el.offsetWidth ) {
+          return;
         }
 
+        updateOptions.from = positionToTime( left );
+        updateUI({
+          from: updateOptions.from
+        });
+      }
 
-        function onDragStop() {
-          el.classList.remove( "editing" );
-          updateTrackEvent( updateOptions );
-          document.removeEventListener( "mouseup", onDragStop, false );
-          document.removeEventListener( "mousemove", onDragging, false );
+      function onDragStart( e ) {
+        e.preventDefault();
+        if ( e.target !== clipSection ) {
+          // We are resizing, not dragging.
+          return;
         }
 
-        function onDragging( e ) {
-          e.preventDefault(); // Prevent selection
-          var left = startLeft + e.clientX - firstX,
-              width = clipSection.offsetWidth;
+        el.classList.add( "editing" );
 
-          if ( left < 0 || ( left + width ) > el.offsetWidth ) {
-            return;
-          }
+        firstX = e.clientX;
+        startLeft = clipSection.offsetLeft;
+        startWidth = clipSection.offsetWidth;
+        document.addEventListener( "mousemove", onDragging, false );
+        document.addEventListener( "mouseup", onDragStop, false );
+      }
 
-          updateOptions.from = positionToTime( left );
-          updateUI({
-            from: updateOptions.from
-          });
-        }
+      function onRightInputChange() {
+        var val = Time.toSeconds( this.value );
+        updateOptions.end = _popcornOptions.start + val - _popcornOptions.from;
+        updateTrackEvent( updateOptions );
+      }
 
-        function onDragStart( e ) {
-          e.preventDefault();
-          if ( e.target !== clipSection ) {
-            // We are resizing, not dragging.
-            return;
-          }
+      function onLeftInputChange() {
+        var val = Time.toSeconds( this.value );
+        updateOptions.from = val;
+        updateOptions.end = _popcornOptions.end + ( _popcornOptions.from - val );
+        updateTrackEvent( updateOptions );
+      }
 
-          el.classList.add( "editing" );
+      // Setup
+      outInput.addEventListener( "change", onRightInputChange, false );
+      inInput.addEventListener( "change", onLeftInputChange, false );
+      rightHandle.addEventListener( "mousedown", onResizeStart, false );
+      leftHandle.addEventListener( "mousedown", onResizeStart, false );
+      clipSection.addEventListener( "mousedown", onDragStart, false );
+      updateUI();
+
+      return {
+        el: el,
+        updateUI: updateUI
+      };
+    }
 
-          firstX = e.clientX;
-          startLeft = clipSection.offsetLeft;
-          startWidth = clipSection.offsetWidth;
-          document.addEventListener( "mousemove", onDragging, false );
-          document.addEventListener( "mouseup", onDragStop, false );
+    function metaDataBox( el ) {
+      function updateUI() {
+        if ( !Array.isArray( _popcornOptions.source ) ) {
+          _popcornOptions.source = [ _popcornOptions.source ];
         }
 
-        function onRightInputChange() {
-          var val = Time.toSeconds( this.value );
-          updateOptions.end = _popcornOptions.start + val - _popcornOptions.from;
-          updateTrackEvent( updateOptions );
-        }
+        MediaUtils.getMetaData( _popcornOptions.source[ 0 ], function( data ) {
+          var titleEl = el.querySelector( ".mg-title" ),
+              typeEl = el.querySelector( ".mg-type" ),
+              durationEl = el.querySelector( ".mg-duration" ),
+              thumbnailEl.querySelector( ".mg-thumbnail" ),
+              thumbnailImg;
 
-        function onLeftInputChange() {
-          var val = Time.toSeconds( this.value );
-          updateOptions.from = val;
-          updateOptions.end = _popcornOptions.end + ( _popcornOptions.from - val );
-          updateTrackEvent( updateOptions );
-        }
+          el.classList.add( "loaded" );
+          titleEl.innerHTML = data.title;
+          typeEl.innerHTML = data.type;
+          durationEl.innerHTML = Time.toTimecode( data.duration ) || "???";
 
-        // Setup
-        outInput.addEventListener( "change", onRightInputChange, false );
-        inInput.addEventListener( "change", onLeftInputChange, false );
-        rightHandle.addEventListener( "mousedown", onResizeStart, false );
-        leftHandle.addEventListener( "mousedown", onResizeStart, false );
-        clipSection.addEventListener( "mousedown", onDragStart, false );
-        updateUI();
+          if ( data.type === "html5" ) {
+            thumbnailImg = data.thumbnail;
+            fallbackContainer.classList.add( "show" );
+          } else {
+            thumbnailImg = document.createElement( "img" );
+            thumbnailImg.src = data.thumbnail;
+            thumbnailEl.appendChild( thumbnailImg );
+            fallbackContainer.classList.remove( "show" );
+          }
 
-        return {
-          el: el,
-          updateUI: updateUI
-        };
-      }
+          el.classList.add( "mg-" + data.type );
+          el.querySelector( ".mg-thumbnail" ).addEventListener( "click", function( e ) {
+            _butter.editor.openEditor( "media-editor" );
+          }, false );
+
+        });
+      return {
+        el: el,
+        updateUI: updateUI
+      };
+    }
 
 
     function setup( trackEvent ) {
@@ -403,40 +443,7 @@ define( [ "util/mediatypes", "editor/editor", "util/time",
           sliderContainer = _rootElement.querySelector( ".volume-slider-container" );
 
       // Custom callbacks and UI updating functions
-      var sourceCallback = function( trackEvent, updateOptions ) {
-        if ( !Array.isArray( updateOptions.source ) ) {
-          updateOptions.source = [ updateOptions.source ];
-        }
-        if ( _mediaType && _mediaType !== "html5" ) {
-          updateOptions.fallback = [ "" ];
-        }
-        updateOptions.source[ 0 ] = updateOptions.source[ 0 ] || _popcornOptions.source[ 0 ];
-
-        MediaUtils.getMetaData( updateOptions.source[ 0 ], function( data ) {
-          _mediaType = data.type;
-          updateOptions.duration = data.duration;
-          updateOptions.denied = data.denied;
-          if ( _mediaType === "html5" ) {
-            updateOptions.source[ 0 ] = URI.makeUnique( updateOptions.source[ 0 ] ).toString();
-          }
-          trackEvent.update( updateOptions );
-        });
-      },
-      sourceUpdateUI = function( el ) {
-
-        if ( !Array.isArray( _popcornOptions.source ) ) {
-          _popcornOptions.source = [ _popcornOptions.source ];
-        }
-
-        if ( MediaUtils.checkUrl( _popcornOptions.source[ 0 ] ) === "html5" ) {
-          fallbackContainer.classList.add( "show" );
-        } else {
-          fallbackContainer.classList.remove( "show" );
-        }
-        console.log( _popcornOptions.source[ 0 ] );
-        el.value = URI.stripUnique( _popcornOptions.source[ 0 ] ).toString();
-      },
-      fallbackUpdateUI = function( el ) {
+      var fallbackUpdateUI = function( el ) {
         if ( !Array.isArray( _popcornOptions.fallback ) ) {
           _popcornOptions.fallback = [ _popcornOptions.fallback ];
         }
@@ -451,45 +458,13 @@ define( [ "util/mediatypes", "editor/editor", "util/time",
       };
 
       _fields.startEnd = new StartEnd( startEndContainer, "start", _this.updateTrackEventSafe );
-     // _fields.source = new Input( sourceEl, "source", sourceCallback, sourceUpdateUI );
       _fields.fallback = new Input( fallbackEl, "fallback", _this.updateTrackEventSafe, fallbackUpdateUI );
       _fields.title = new Input( titleEl, "title", _this.updateTrackEventSafe );
       _fields.mute = new Toggler( muteEl, "mute", "reverse", muteUpdateUI );
       _fields.volume = new Slider( sliderEl, "volume" );
       _fields.hidden = new Toggler( hiddenEl, "hidden", "reverse" );
       _fields.from = new Trimmer( clipTrimmerEl );
-      _fields.source = {
-        el: sourceEl,
-        updateUI: function() {
-          if ( !Array.isArray( _popcornOptions.source ) ) {
-            _popcornOptions.source = [ _popcornOptions.source ];
-          }
-
-          if ( MediaUtils.checkUrl( _popcornOptions.source[ 0 ] ) === "html5" ) {
-            fallbackContainer.classList.add( "show" );
-          } else {
-            fallbackContainer.classList.remove( "show" );
-          }
-
-          MediaUtils.getMetaData( _popcornOptions.source[ 0 ], function( data ) {
-            var thumbnailImg;
-            sourceEl.classList.add( "loaded" );
-            sourceEl.querySelector( ".mg-title" ).innerHTML = data.title;
-            sourceEl.querySelector( ".mg-type" ).innerHTML = data.type;
-            sourceEl.querySelector( ".mg-duration" ).innerHTML = Time.toTimecode( data.duration ) || "???";
-            if ( data.type === "html5" ) {
-              thumbnailImg = data.thumbnail;
-            } else {
-              thumbnailImg = document.createElement( "img" );
-              thumbnailImg.src = data.thumbnail;
-              sourceEl.querySelector( ".mg-thumbnail" ).appendChild( thumbnailImg );
-            }
-            sourceEl.classList.add( "mg-" + data.type );
-            sourceEl.querySelector( ".mg-title" ).addEventListener( "click", function( e ) {
-              _butter.editor.openEditor( "media-editor" );
-            }, false );
-          });
-        }
+      _fields.source = new MetadataBox( sourceEl );
       };
 
       _fields.source.updateUI();

From 58e8f17429f935306a90b29ef8f8e0e916344415 Mon Sep 17 00:00:00 2001
From: Kate Hudson <katehudsondesign@gmail.com>
Date: Tue, 5 Mar 2013 12:26:27 -0500
Subject: [PATCH 3/3] fixup

---
 src/editor/sequencer-editor.js | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/editor/sequencer-editor.js b/src/editor/sequencer-editor.js
index 180522e0f..10d7ee257 100644
--- a/src/editor/sequencer-editor.js
+++ b/src/editor/sequencer-editor.js
@@ -385,7 +385,7 @@ define( [ "util/mediatypes", "editor/editor", "util/time",
       };
     }
 
-    function metaDataBox( el ) {
+    function MetadataBox( el ) {
       function updateUI() {
         if ( !Array.isArray( _popcornOptions.source ) ) {
           _popcornOptions.source = [ _popcornOptions.source ];
@@ -395,7 +395,7 @@ define( [ "util/mediatypes", "editor/editor", "util/time",
           var titleEl = el.querySelector( ".mg-title" ),
               typeEl = el.querySelector( ".mg-type" ),
               durationEl = el.querySelector( ".mg-duration" ),
-              thumbnailEl.querySelector( ".mg-thumbnail" ),
+              thumbnailEl = el.querySelector( ".mg-thumbnail" ),
               thumbnailImg;
 
           el.classList.add( "loaded" );
@@ -419,6 +419,8 @@ define( [ "util/mediatypes", "editor/editor", "util/time",
           }, false );
 
         });
+      }
+      updateUI();
       return {
         el: el,
         updateUI: updateUI
@@ -465,9 +467,6 @@ define( [ "util/mediatypes", "editor/editor", "util/time",
       _fields.hidden = new Toggler( hiddenEl, "hidden", "reverse" );
       _fields.from = new Trimmer( clipTrimmerEl );
       _fields.source = new MetadataBox( sourceEl );
-      };
-
-      _fields.source.updateUI();
 
     } //setup