add .webm, .pdf support to gallery

LICENSE

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

src/General/Config.coffee

@@ -155,6 +155,10 @@ Config =
         true
         'Adds a simple and cute image gallery.' 
       ]
+      'PDF in Gallery': [
+        false
+        'Show PDF files in gallery.'
+      ]
       'Sauce': [
         true
         'Add sauce links to images.'

src/General/css/style.css

@@ -1364,20 +1364,26 @@ div.boardTitle {
   /* Flex > Non-Flex child max-width and overflow fix (Firefox only?) */
   width: 1%;
 }
-:root:not(.gal-fit-height) .gal-image {
+:root:not(.gal-fit-height):not(.gal-pdf) .gal-image {
   overflow-y: scroll !important;
 }
-:root:not(.gal-fit-width) .gal-image {
+:root:not(.gal-fit-width):not(.gal-pdf) .gal-image {
   overflow-x: scroll !important;
 }
 .gal-image a {
   margin: auto;
   line-height: 0;
 }
-.gal-fit-width .gal-image img {
+:root.gal-pdf .gal-image a {
+  width: 100%;
+  height: 100%;
+}
+.gal-fit-width .gal-image img,
+.gal-fit-width .gal-image video {
   max-width: 100%;
 }
-.gal-fit-height .gal-image img {
+.gal-fit-height .gal-image img,
+.gal-fit-height .gal-image video {
   /*
     Chrome doesn't support viewpoint units in calc()
     http://bugs.chromium.org/168840
@@ -1387,11 +1393,22 @@ div.boardTitle {
   max-height: 95vh;
   max-height: calc(100vh - 25px);
 }
+.gal-image iframe {
+  width: 100%;
+  height: 100%;
+}
 .gal-buttons {
   font-size: 2em;
-  margin-right: 10px;
+  margin-right: 3px;
+  padding-left: 7px;
+  padding-right: 7px;
   top: 5px;
 }
+:root.gal-pdf .gal-buttons {
+  top: 40px;
+  background: rgba(0,0,0,0.6) !important;
+  border-radius: 3px;
+}
 .gal-buttons i {
   vertical-align: baseline;
   border-top-width: .4em;
@@ -1411,12 +1428,12 @@ div.boardTitle {
 .gal-name,
 .gal-count {
   position: fixed;
-  right: 178px;
+  right: 195px;
 }
 .gal-hide-thumbnails .gal-buttons,
 .gal-hide-thumbnails .gal-count,
 .gal-hide-thumbnails .gal-name {
-  right: 28px;
+  right: 44px;
 }
 .gal-name {
   bottom: 6px;
@@ -1431,6 +1448,10 @@ div.boardTitle {
 .gal-buttons .menu-button:hover {
   color: rgb(95, 95, 101) !important;
 }
+:root.gal-pdf .gal-close:hover,
+:root.gal-pdf .gal-buttons .menu-button:hover {
+  color: rgb(204, 204, 204) !important;
+}
 .gal-count {
   bottom: 27px;
   background: rgba(0,0,0,0.6) !important;
@@ -1438,21 +1459,21 @@ div.boardTitle {
   padding: 1px 5px 2px 5px;
   color: #ffffff !important;
 }
-:root:not(.gal-fit-width) .gal-name {
+:root:not(.gal-fit-width):not(.gal-pdf) .gal-name {
   bottom: 23px !important;
 }
-:root:not(.gal-fit-width) .gal-count {
+:root:not(.gal-fit-width):not(.gal-pdf) .gal-count {
   bottom: 44px !important;
 }
-:root:not(.gal-fit-height):not(.gal-hide-thumbnails) .gal-buttons,
+:root.gal-fit-height:not(.gal-pdf):not(.gal-hide-thumbnails) .gal-buttons,
-:root:not(.gal-fit-height):not(.gal-hide-thumbnails) .gal-name,
+:root.gal-fit-height:not(.gal-pdf):not(.gal-hide-thumbnails) .gal-name,
-:root:not(.gal-fit-height):not(.gal-hide-thumbnails) .gal-count {
+:root.gal-fit-height:not(.gal-pdf):not(.gal-hide-thumbnails) .gal-count {
-  right: 195px !important;
+  right: 178px !important;
 }
-:root.gal-hide-thumbnails:not(.gal-fit-height) .gal-buttons,
+:root.gal-hide-thumbnails:.gal-fit-height:not(.gal-pdf) .gal-buttons,
-:root.gal-hide-thumbnails:not(.gal-fit-height) .gal-name,
+:root.gal-hide-thumbnails:.gal-fit-height:not(.gal-pdf) .gal-name,
-:root.gal-hide-thumbnails:not(.gal-fit-height) .gal-count {
+:root.gal-hide-thumbnails:.gal-fit-height:not(.gal-pdf) .gal-count {
-  right: 44px !important;
+  right: 28px !important;
 }
 @media screen and (resolution: 1dppx) {
  .fa-bars {

src/Images/Gallery.coffee

@@ -18,7 +18,7 @@ Gallery =
       cb: @node
 
   node: ->
-    return unless @file?.isImage
+    return unless @file
     if Gallery.nodes
       Gallery.generateThumb $ '.file', @nodes.root
       Gallery.nodes.total.textContent = Gallery.images.length
@@ -64,8 +64,7 @@ Gallery =
 
     {cb} = Gallery
     $.on nodes.frame,              'click', cb.blank
-    $.on nodes.current,            'click', cb.download
+    $.on nodes.next,               'click', cb.advance
-    $.on nodes.next,               'click', cb.next
     $.on ($ '.gal-prev',  dialog), 'click', cb.prev
     $.on ($ '.gal-next',  dialog), 'click', cb.next
     $.on ($ '.gal-close', dialog), 'click', cb.close
@@ -105,6 +104,7 @@ Gallery =
 
   generateThumb: (file) ->
     post  = Get.postFromNode file
+    return unless post.file and (post.file.isImage or post.file.isVideo or Conf['PDF in Gallery'])
     title = ($ '.fileText a', file).textContent
     thumb = $.el 'a',
       className: 'gal-thumb'
@@ -130,8 +130,10 @@ Gallery =
       cb = switch key
         when 'Esc', Conf['Open Gallery']
           Gallery.cb.close
-        when 'Right', 'Enter'
+        when 'Right'
           Gallery.cb.next
+        when 'Enter'
+          Gallery.cb.advance
         when 'Left', ''
           Gallery.cb.prev
 
@@ -150,11 +152,20 @@ Gallery =
       $.rmClass  el, 'gal-highlight' if el = $ '.gal-highlight', Gallery.thumbs
       $.addClass @,  'gal-highlight'
 
-      img = $.el 'img',
+      elType = 'img'
+      elType = 'video' if /\.webm$/.test(@href)
+      elType = 'iframe' if /\.pdf$/.test(@href)
+      (if elType is 'iframe' then $.addClass else $.rmClass) doc, 'gal-pdf'
+      img = $.el elType,
         src:   name.href     = @href
         title: name.download = name.textContent = @title
+      if elType is 'video'
+        img.loop = true
+        img.autoplay = Conf['Autoplay']
+        img.muted = !Conf['Allow Sound']
 
       $.extend  img.dataset,   @dataset
+      nodes.current.pause?()
       $.replace nodes.current, img
       nodes.count.textContent = +@dataset.id + 1
       nodes.current = img
@@ -183,18 +194,14 @@ Gallery =
       delete post.file.fullImage
 
       src = @src.split '/'
-      if src[2] is 'images.4chan.org'
+      if src[2] is 'i.4cdn.org'
         URL = Redirect.to 'file',
           boardID:  src[3]
           filename: src[5]
         if URL
           thumb.href = URL
           return unless Gallery.nodes.current is img
-          revived = $.el 'img',
+          img.src = URL
-            src:   URL
-            title: img.title
-          $.extend revived.dataset, img.dataset
-          $.replace img, revived
           return
         if g.DEAD or post.isDead or post.file.isDead
           return
@@ -213,10 +220,14 @@ Gallery =
 
     prev:   -> Gallery.cb.open.call Gallery.images[+Gallery.nodes.current.dataset.id - 1]
     next:   -> Gallery.cb.open.call Gallery.images[+Gallery.nodes.current.dataset.id + 1]
+    advance:-> if Gallery.nodes.current.paused then Gallery.nodes.current.play() else Gallery.cb.next()
+    pause:  -> if Gallery.nodes.current.nodeType is 'VIDEO'
+      if Gallery.nodes.current.paused then Gallery.nodes.current.play() else Gallery.nodes.current.pause()
     toggle: -> (if Gallery.nodes then Gallery.cb.close else Gallery.build)()
     blank: (e) -> Gallery.cb.close() if e.target is @
 
     close: ->
+      Gallery.nodes.current.pause?()
       $.rm Gallery.nodes.el
       delete Gallery.nodes
       d.body.style.overflow = ''