Merge branch 'ccd0' into v3

Conflicts:
	CHANGELOG.md
	builds/4chan-X.user.js
	builds/crx/script.js
	src/Images/ImageHover.coffee
	src/Posting/QR.coffee

CHANGELOG.md

@@ -69,6 +69,14 @@
 - Fixed an issue with Thread Updater intervals not saving correctly.
 - Many spiffy performance, state awareness, and sanity improvements to JSON Navigation.
 
+### v1.5.1 
+*2014-04-04*
+
+**ccd0**:
+- Support hover for .webm videos.
+- Add .webm to supported posting types.
+- Add option to enable/disable sound.
+
 ## v1.5.0 
 *2014-04-04*
 

LICENSE

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

builds/4chan-X.meta.js

@@ -1,6 +1,6 @@
 // ==UserScript==
 // @name         4chan X
-// @version      1.5.0
+// @version      1.5.1
 // @minGMVer     1.14
 // @minFFVer     26
 // @namespace    4chan-X

builds/crx/manifest.json

@@ -1,6 +1,6 @@
 {
   "name": "4chan X",
-  "version": "1.5.0",
+  "version": "1.5.1",
   "manifest_version": 2,
   "description": "Cross-browser userscript for maximum lurking on 4chan.",
   "icons": {

builds/updates.xml

@@ -1,7 +1,7 @@
 <?xml version='1.0' encoding='UTF-8'?>
 <gupdate xmlns='http://www.google.com/update2/response' protocol='2.0'>
   <app appid='lacclbnghgdicfifcamcmcnilckjamag'>
-    <updatecheck codebase='https://ccd0.github.io/4chan-x/builds/crx.crx' version='1.5.0' />
+    <updatecheck codebase='https://ccd0.github.io/4chan-x/builds/crx.crx' version='1.5.1' />
   </app>
 </gupdate>
 

latest.js

@@ -1 +1 @@
-postMessage({version:'1.5.0'},'*')
+postMessage({version:'1.5.1'},'*')

package.json

@@ -1,6 +1,6 @@
 {
   "name": "4chan-X",
-  "version": "1.5.0",
+  "version": "1.5.1",
   "description": "Cross-browser userscript for maximum lurking on 4chan.",
   "meta": {
     "name": "4chan X",

src/General/Config.coffee

@@ -141,7 +141,7 @@ Config =
       ]
       'Image Hover': [
         true
-        'Show full image on mouseover.'
+        'Show full image / video on mouseover.'
       ]
       'Image Hover in Catalog': [
         false
@@ -191,6 +191,10 @@ Config =
         true
         'Show native seek and volume controls on videos. Contract videos when dragged to the left.'
       ]
+      'Allow Sound': [
+        true
+        'Allow sound in inline videos.'
+      ]
 
     'Menu':
       'Menu': [

src/General/UI.coffee

@@ -368,7 +368,7 @@ UI = do ->
 
   hoverend = (e) ->
     return if e.type is 'keydown' and e.keyCode isnt 13 or e.target.nodeName is "TEXTAREA"
-    $.rm @el
+    $.rm @el if @el.parentNode is Header.hover
     $.off @root, @endEvents,  @hoverend
     $.off d,     'keydown',   @hoverend
     $.off @root, 'mousemove', @hover

src/General/css/style.css

@@ -108,7 +108,7 @@ div.center:not(.ad-cnt) {
 /* fixed, z-index */
 #overlay,
 #fourchanx-settings,
-#qp, #ihover,
+#qp, .ihover,
 #navlinks, .fixed #header-bar,
 :root.float #updater,
 :root.float #thread-stats,
@@ -124,7 +124,7 @@ div.center:not(.ad-cnt) {
 #notifications {
   z-index: 70;
 }
-#qp, #ihover {
+#qp, .ihover {
   z-index: 60;
 }
 #menu {
@@ -840,7 +840,7 @@ span.hide-announcement {
 :root.gecko.fit-width .full-image {
   width: 100%;
 }
-#ihover {
+.ihover {
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   max-height: 100%;

src/Images/ImageExpand.coffee

@@ -100,9 +100,12 @@ ImageExpand =
     return if post.isHidden or post.file.isExpanded or $.hasClass thumb, 'expanding'
     $.addClass thumb, 'expanding'
     naturalHeight = if isVideo then 'videoHeight' else 'naturalHeight'
-    if post.file.fullImage
+    if img = post.file.fullImage
       # Expand already-loaded/ing picture.
-      $.asap (-> post.file.fullImage[naturalHeight]), ->
+      $.rmClass img, 'ihover'
+      $.addClass img, 'full-image'
+      img.controls = (img.parentNode isnt thumb.parentNode)
+      $.asap (-> img[naturalHeight]), ->
         ImageExpand.completeExpand post
       return
     post.file.fullImage = img = $.el (if isVideo then 'video' else 'img'),
@@ -138,7 +141,7 @@ ImageExpand =
     {file} = post
     video = file.fullImage
     file.videoControls = []
-    video.muted = true
+    video.muted = not Conf['Allow Sound']
     if video.controls
       # contract link in file info
       contract = $.el 'a',

src/Images/ImageHover.coffee

@@ -9,7 +9,7 @@ ImageHover =
         name: 'Image Hover'
         cb:   @catalogNode
   node: ->
-    return unless @file?.isImage
+    return unless @file?.isImage or @file?.isVideo
     $.on @file.thumb, 'mouseover', ImageHover.mouseover
   catalogNode: ->
     return unless @thread.OP.file?.isImage
@@ -19,17 +19,35 @@ ImageHover =
       g.posts[@parentNode.dataset.fullID]
     else
       Get.postFromNode @
-    el = $.el 'img',
+    {isVideo} = post.file
-      id: 'ihover'
+    if post.file.fullImage
-      src: post.file.URL
+      el = post.file.fullImage
+      $.rmClass el, 'full-image'
+      $.addClass el, 'ihover'
+    else
+      el = $.el (if isVideo then 'video' else 'img'),
+        className: 'ihover'
+        src: post.file.URL
+      post.file.fullImage = el
+      {thumb} = post.file
+      $.after (if isVideo and Conf['Show Controls'] then thumb.parentNode else thumb), el
     el.dataset.fullID = post.fullID
-    $.add Header.hover, el
+    if isVideo
+      el.loop = true
+      el.controls = false
+      el.muted = not Conf['Allow Sound']
+      el.play() if Conf['Autoplay']
+    naturalHeight = if post.file.isVideo then 'videoHeight' else 'naturalHeight'
     UI.hover
       root: @
       el: el
       latestEvent: e
       endEvents: 'mouseout click'
-      asapTest: -> el.naturalHeight
+      asapTest: -> el[naturalHeight]
+      cb: ->
+        el.pause() if isVideo
+        $.rmClass el, 'ihover'
+        $.addClass el, 'full-image'
     $.on el, 'error', ImageHover.error
   error: ->
     return unless doc.contains @

src/Posting/QR.coffee

@@ -1,6 +1,6 @@
 QR =
   # Add empty mimeType to avoid errors with URLs selected in Window's file dialog.
-  mimeTypes: ['image/jpeg', 'image/png', 'image/gif', 'application/pdf', 'application/x-shockwave-flash', '']
+  mimeTypes: ['image/jpeg', 'image/png', 'image/gif', 'application/pdf', 'application/x-shockwave-flash', 'video/webm', '']
 
   init: ->
     return if !Conf['Quick Reply']
@@ -375,13 +375,16 @@ QR =
     $.addClass QR.nodes.el, 'dump' unless isSingle
 
   checkDimensions: (file, isSingle, max) ->
-    img = new Image()
+    if /^image\//.test file.type
-    img.onload = =>
+      img = new Image()
-      {height, width} = img
+      img.onload = =>
-      return QR.error "#{file.name}: Image too large (image: #{img.height}x#{img.width}px, max: #{QR.max_heigth}x#{QR.max_width}px)" if height > QR.max_heigth or width > QR.max_heigth
+        {height, width} = img
-      return QR.error "#{file.name}: Image too small (image: #{img.height}x#{img.width}px, min: #{QR.min_heigth}x#{QR.min_width}px)" if height < QR.min_heigth or width < QR.min_heigth
+        return QR.error "#{file.name}: Image too large (image: #{img.height}x#{img.width}px, max: #{QR.max_heigth}x#{QR.max_width}px)" if height > QR.max_heigth or width > QR.max_heigth
+        return QR.error "#{file.name}: Image too small (image: #{img.height}x#{img.width}px, min: #{QR.min_heigth}x#{QR.min_width}px)" if height < QR.min_heigth or width < QR.min_heigth
+        QR.handleFile file, isSingle, max
+      img.src = URL.createObjectURL file
+    else
       QR.handleFile file, isSingle, max
-    img.src = URL.createObjectURL file
 
   handleFile: (file, isSingle, max) ->
     if file.size > max

src/Posting/QR.post.coffee

@@ -142,7 +142,7 @@ QR.post = class
       when 'filename'
         return unless @file
         @file.newName = @filename.replace /[/\\]/g, '-'
-        unless /\.(jpe?g|png|gif|pdf|swf)$/i.test @filename
+        unless /\.(jpe?g|png|gif|pdf|swf|webm)$/i.test @filename
           # 4chan will truncate the filename if it has no extension,
           # but it will always replace the extension by the correct one,
           # so we suffix it with '.jpg' when needed.