reuse dimension check image/video elements for thumbnail maker

src/Posting/QR.coffee

@@ -366,11 +366,12 @@ QR =
     else if index isnt 0 or (post = QR.posts[QR.posts.length - 1]).file
       isNewPost = true
       post = new QR.post()
-    QR.checkDimensions file, (pass) ->
+    QR.checkDimensions file, (pass, el) ->
       if pass or isSingle
-        post.setFile file
+        post.setFile file, el
       else if isNewPost
         post.rm()
+        URL.revokeObjectURL el.src if el
 
   checkDimensions: (file, cb) ->
     if /^image\//.test file.type
@@ -384,7 +385,7 @@ QR =
         if height < QR.min_height or width < QR.min_width
           QR.error "#{file.name}: Image too small (image: #{height}x#{width}px, min: #{QR.min_height}x#{QR.min_width}px)"
           pass = false
-        cb pass
+        cb pass, img
       img.src = URL.createObjectURL file
     else if /^video\//.test file.type
       video = $.el 'video'
@@ -400,10 +401,10 @@ QR =
         if videoHeight < QR.min_height or videoWidth < QR.min_width
           QR.error "#{file.name}: Video too small (video: #{videoHeight}x#{videoWidth}px, min: #{QR.min_height}x#{QR.min_width}px)"
           pass = false
-        unless isFinite video.duration
+        unless isFinite duration
           QR.error "#{file.name}: Video lacks duration metadata (try remuxing)"
           pass = false
-        if duration > QR.max_duration_video
+        else if duration > QR.max_duration_video
           QR.error "#{file.name}: Video too long (video: #{duration}s, max: #{QR.max_duration_video}s)"
           pass = false
         <% if (type === 'userscript') { %>
@@ -411,7 +412,7 @@ QR =
           QR.error "#{file.name}: Audio not allowed"
           pass = false
         <% } %>
-        cb pass
+        cb pass, video
         cb = null
       $.on video, 'error', ->
         return unless cb
@@ -419,11 +420,12 @@ QR =
           # only report error here if we should have been able to play the video
           # otherwise "unsupported type" should already have been shown
           QR.error "#{file.name}: Video appears corrupt"
-        cb false
+        URL.revokeObjectURL file
+        cb false, null
         cb = null
       video.src = URL.createObjectURL file
     else
-      cb true
+      cb true, null
 
   openFileInput: (e) ->
     e.stopPropagation()

src/Posting/QR.post.coffee

@@ -156,55 +156,50 @@ QR.post = class
       @save node
     return
 
-  setFile: (@file) ->
+  setFile: (@file, el) ->
     @filename = file.name
     @filesize = $.bytesToString file.size
     @nodes.label.hidden = false if QR.spoiler
     URL.revokeObjectURL @URL
     @showFileData() if @ is QR.selected
-    unless /^(image|video)\//.test file.type
+    if el
+      @setThumbnail el
+    else
       @nodes.el.style.backgroundImage = null
-      return
-    @setThumbnail()
 
-  setThumbnail: ->
+  setThumbnail: (el) ->
     # Create a redimensioned thumbnail.
-    isVideo = /^video\//.test @file.type
+    isVideo = el.tagName is 'VIDEO'
-    img = $.el (if isVideo then 'video' else 'img')
 
-    $.on img, (if isVideo then 'loadeddata' else 'load'), =>
+    # Generate thumbnails only if they're really big.
-      # Generate thumbnails only if they're really big.
+    # Resized pictures through canvases look like ass,
-      # Resized pictures through canvases look like ass,
+    # so we generate thumbnails `s` times bigger then expected
-      # so we generate thumbnails `s` times bigger then expected
+    # to avoid crappy resized quality.
-      # to avoid crappy resized quality.
+    s = 90 * 2 * window.devicePixelRatio
-      s = 90 * 2 * window.devicePixelRatio
+    s *= 3 if @file.type is 'image/gif' # let them animate
-      s *= 3 if @file.type is 'image/gif' # let them animate
+    if isVideo
-      if isVideo
+      height = el.videoHeight
-        height = img.videoHeight
+      width = el.videoWidth
-        width = img.videoWidth
+    else
-      else
+      {height, width} = el
-        {height, width} = img
+      if height < s or width < s
-        if height < s or width < s
+        @URL = el.src
-          @URL = fileURL
-          @nodes.el.style.backgroundImage = "url(#{@URL})"
-          return
-      if height <= width
-        width  = s / height * width
-        height = s
-      else
-        height = s / width  * height
-        width  = s
-      cv = $.el 'canvas'
-      cv.height = img.height = height
-      cv.width  = img.width  = width
-      cv.getContext('2d').drawImage img, 0, 0, width, height
-      URL.revokeObjectURL fileURL
-      cv.toBlob (blob) =>
-        @URL = URL.createObjectURL blob
         @nodes.el.style.backgroundImage = "url(#{@URL})"
-
+        return
-    fileURL = URL.createObjectURL @file
+    if height <= width
-    img.src = fileURL
+      width  = s / height * width
+      height = s
+    else
+      height = s / width  * height
+      width  = s
+    cv = $.el 'canvas'
+    cv.height = height
+    cv.width  = width
+    cv.getContext('2d').drawImage el, 0, 0, width, height
+    URL.revokeObjectURL el.src
+    cv.toBlob (blob) =>
+      @URL = URL.createObjectURL blob
+      @nodes.el.style.backgroundImage = "url(#{@URL})"
 
   rmFile: ->
     return if @isLocked