Implement webm thumbnail replacement.

Conflicts:
	LICENSE
	builds/4chan-X-beta.user.js
	builds/4chan-X.user.js
	src/General/css/style.css
	src/Images/AutoGIF.coffee
	src/Images/Gallery.coffee
	src/Images/ImageLoader.coffee

src/General/Config.coffee

@@ -173,15 +173,19 @@ Config =
       ]
       'Replace GIF': [
         false
-        'Replace thumbnail of gifs with its actual image.'
+        'Replace gif thumbnails with the actual image.'
-      ]
-      'Replace PNG': [
-        false
-        'Replace pngs.'
       ]
       'Replace JPG': [
         false
-        'Replace jpgs.'
+        'Replace jpg thumbnails with the actual image.'
+      ]
+      'Replace PNG': [
+        false
+        'Replace png thumbnails with the actual image.'
+      ]
+      'Replace WEBM': [
+        false
+        'Replace webm thumbnails with the actual webm video. Probably will degrade browser performance ;)'
       ]
       'Image Prefetching': [
         false

src/General/css/style.css

@@ -711,6 +711,7 @@ span.hide-announcement {
 /* File */
 .fnswitch:hover > .fntrunc,
 .fnswitch:not(:hover) > .fnfull,
+.expanded-image > .post > .file > .fileThumb > video[data-md5],
 .expanded-image > .post > .file > .fileThumb > img[data-md5] {
   display: none;
 }

src/Images/AutoGIF.coffee

@@ -1,20 +0,0 @@
-AutoGIF =
-  init: ->
-    return if g.VIEW is 'catalog' or !Conf['Auto-GIF'] or g.BOARD.ID in ['gif', 'wsg']
-
-    Post.callbacks.push
-      name: 'Auto-GIF'
-      cb:   @node
-  node: ->
-    return if @isClone or @isHidden or @thread.isHidden or !@file?.isImage
-    {thumb, URL} = @file
-    return unless /gif$/.test(URL) and !/spoiler/.test thumb.src
-    if @file.isSpoiler
-      # Revealed spoilers do not have height/width set, this fixes auto-gifs dimensions.
-      {style} = thumb
-      style.maxHeight = style.maxWidth = if @isReply then '125px' else '250px'
-    gif = $.el 'img'
-    $.on gif, 'load', ->
-      # Replace the thumbnail once the GIF has finished loading.
-      thumb.src = URL
-    gif.src = URL

src/Images/ImageLoader.coffee

@@ -1,7 +1,7 @@
 ImageLoader =
   init: ->
     return if g.VIEW is 'catalog'
-    return unless Conf["Image Prefetching"] or Conf["Replace JPG"] or Conf["Replace PNG"] or Conf["Replace GIF"]
+    return unless Conf["Image Prefetching"] or Conf["Replace JPG"] or Conf["Replace PNG"] or Conf["Replace GIF"] or Conf["Replace WEBM"]
 
     Post.callbacks.push
       name: 'Image Replace'
@@ -11,8 +11,6 @@ ImageLoader =
       name: 'Image Replace'
       cb:   @thread
 
-    return unless Conf['Image Prefetching'] and g.VIEW is 'thread'
-    
     prefetch = $.el 'label',
       <%= html('<input type="checkbox" name="prefetch"> Prefetch Images') %>
 
@@ -27,22 +25,42 @@ ImageLoader =
     ImageLoader.thread = @
 
   node: ->
-    return if @isClone or @isHidden or @thread.isHidden or !@file?.isImage
+    return unless @file
+    {isImage, isVideo} = @file
+    return if @isClone or @isHidden or @thread.isHidden or !(isImage or isVideo)
     {thumb, URL} = @file
-    return unless (Conf[string = "Replace #{if (type = (URL.match /\w{3}$/)[0].toUpperCase()) is 'PEG' then 'JPG' else type}"] and !/spoiler/.test thumb.src) or Conf['prefetch']
+    {style} = thumb
+    type = if (match = URL.match(/\.([^.]+)$/)[1].toUpperCase()) is 'JPEG' then 'JPG' else match
+    replace = "Replace #{type}"
+    return unless (Conf[replace] and !/spoiler/.test thumb.src) or (Conf['prefetch'] and g.VIEW is 'thread')
     if @file.isSpoiler
       # Revealed spoilers do not have height/width set, this fixes the image's dimensions.
-      {style} = thumb
       style.maxHeight = style.maxWidth = if @isReply then '125px' else '250px'
-    img = $.el 'img'
+    file = $.el if isImage then 'img' else 'video'
-    if Conf[string]
+    if Conf[replace]
-      $.on img, 'load', ->
+      if isVideo
-        # Replace the thumbnail once the GIF has finished loading.
+      
+        file.alt          = thumb.alt
+        file.dataset.md5  = thumb.dataset.md5
+        file.style.height = style.height
+        file.style.width  = style.width
+        file.style.maxHeight = style.maxHeight
+        file.style.maxWidth  = style.maxWidth
+        file.loop     = true
+        file.autoplay = Conf['Autoplay']
+        if Conf['Image Hover']
+          $.on file, 'mouseover', ImageHover.mouseover
+      $.on file, 'load loadedmetadata', =>
+        # Replace the thumbnail once the file has finished loading.
+        if isVideo
+          $.replace thumb, file
+          @file.thumb = file # XXX expanding requires the post.file.thumb node.
+          return
         thumb.src = URL
-    img.src = URL
+    file.src = URL
 
   toggle: ->
     enabled = Conf['prefetch'] = @checked
     if enabled
-      ImageLoader.thread.posts.forEach (post) -> ImageLoader.node.call post
+      g.BOARD.posts.forEach (post) -> ImageLoader.node.call post
     return