video hover

src/General/Config.coffee

@@ -145,7 +145,7 @@ Config =
       ]
       'Image Hover': [
         true
-        'Show full image on mouseover.'
+        'Show full image / video on mouseover.'
       ]
       'Gallery': [
         true

src/General/UI.coffee

@@ -362,7 +362,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 {
@@ -729,7 +729,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

@@ -103,9 +103,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'),

src/Images/ImageHover.coffee

@@ -6,21 +6,39 @@ ImageHover =
       name: 'Image Hover'
       cb:   @node
   node: ->
-    return unless @file?.isImage
+    return unless @file?.isImage or @file?.isVideo
     $.on @file.thumb, 'mouseover', ImageHover.mouseover
   mouseover: (e) ->
     post = Get.postFromNode @
-    el = $.el 'img',
-      id: 'ihover'
-      src: post.file.URL
+    {isVideo} = post.file
+    if post.file.fullImage
+      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 = true
+      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 @