Implement webm thumbnail replacement.

LICENSE

@@ -1,5 +1,5 @@
 /*
-* 4chan X - Version 1.7.0 - 2014-04-06
+* 4chan X - Version 1.7.0 - 2014-04-07
 *
 * Licensed under the MIT license.
 * https://github.com/ccd0/4chan-x/blob/master/LICENSE

src/General/Config.coffee

@@ -165,15 +165,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

@@ -824,6 +824,7 @@ span.hide-announcement {
 /* File */
 .fileText:hover .fntrunc,
 .fileText: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,34 +0,0 @@
-AutoGIF =
-  init: ->
-    return if !Conf['Auto-GIF'] or g.BOARD.ID in ['gif', 'wsg']
-
-    Post.callbacks.push
-      name: 'Auto-GIF'
-      cb:   @node
-    CatalogThread.callbacks.push
-      name: 'Auto-GIF'
-      cb:   @catalogNode
-  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'
-    AutoGIF.replaceThumbnail thumb, URL
-  catalogNode: ->
-    {OP} = @thread
-    return unless OP.file?.isImage
-    {URL} = OP.file
-    return unless /gif$/.test URL
-    AutoGIF.replaceThumbnail @nodes.thumb, URL, true
-  replaceThumbnail: (thumb, URL, isBackground) ->
-    gif = $.el 'img'
-    $.on gif, 'load', ->
-      # Replace the thumbnail once the GIF has finished loading.
-      if isBackground
-        thumb.style.backgroundImage = "url(#{URL})"
-      else
-        thumb.src = URL
-    gif.src = URL

src/Images/Gallery.coffee

@@ -156,8 +156,8 @@ Gallery =
       if @dataset.isVideo  
         file.muted    = !Conf['Allow Sound']
         file.controls = Conf['Show Controls']
+        file.autoplay = Conf['Autoplay']
         file.loop     = true
-        file.autoplay = true
       
       $.extend  file.dataset,   @dataset
       $.replace nodes.current,  file

src/Images/ImageLoader.coffee

@@ -1,17 +1,15 @@
 ImageLoader =
   init: ->
-    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'
       cb:   @node
-    
+
     Thread.callbacks.push
       name: 'Image Replace'
       cb:   @thread
-    
+
-    return unless Conf['Image Prefetching'] and g.VIEW is 'thread'
-    
     prefetch = $.el 'label',
       innerHTML: '<input type=checkbox name="prefetch"> Prefetch Images'
 
@@ -22,27 +20,47 @@ ImageLoader =
       type: 'header'
       el: prefetch
       order: 104
-  
+
   thread: ->
     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 ImageLoader.node.call
+      g.BOARD.posts.forEach ImageLoader.node.call
     return