Release 4chan X v1.9.21.10.

CHANGELOG.md

@@ -3,6 +3,11 @@ The attributions below are for work that has been incorporated into the script a
 The links to individual versions below are to copies of the script with the update URL removed. If you want automatic updates, install the script from the links on the [main page](https://github.com/ccd0/4chan-x).
 
 <!-- v1.9.21.x -->
+### v1.9.21.10 
+*2015-01-31* - [[Firefox](https://raw.githubusercontent.com/ccd0/4chan-x/1.9.21.10/builds/4chan-X-noupdate.user.js "Firefox version")] [[Chromium](https://raw.githubusercontent.com/ccd0/4chan-x/1.9.21.10/builds/4chan-X-noupdate.crx "Chromium version")]
+
+- Add `Click Passthrough` option (off by default) to allow clicks on videos to perform the browser's default function. Restore dragging to the left to contract and the contract button (shown if `Click Passthrough` is on).
+
 ### v1.9.21.9 
 *2015-01-31* - [[Firefox](https://raw.githubusercontent.com/ccd0/4chan-x/1.9.21.9/builds/4chan-X-noupdate.user.js "Firefox version")] [[Chromium](https://raw.githubusercontent.com/ccd0/4chan-x/1.9.21.9/builds/4chan-X-noupdate.crx "Chromium version")]
 

LICENSE

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

builds/4chan-X-beta.meta.js

@@ -1,6 +1,6 @@
 // ==UserScript==
 // @name         4chan X beta
-// @version      1.9.21.9
+// @version      1.9.21.10
 // @minGMVer     1.14
 // @minFFVer     26
 // @namespace    4chan-X

builds/4chan-X-beta.user.js

@@ -1,7 +1,7 @@
 // Generated by CoffeeScript
 // ==UserScript==
 // @name         4chan X beta
-// @version      1.9.21.9
+// @version      1.9.21.10
 // @minGMVer     1.14
 // @minFFVer     26
 // @namespace    4chan-X
@@ -25,7 +25,7 @@
 // ==/UserScript==
 
 /*
-* 4chan X - Version 1.9.21.9
+* 4chan X - Version 1.9.21.10
 *
 * Licensed under the MIT license.
 * https://github.com/ccd0/4chan-x/blob/master/LICENSE
@@ -196,6 +196,7 @@
         'Autoplay': [true, 'Videos begin playing immediately when opened.'],
         'Restart when Opened': [true, 'Restart GIFs and WebMs when you hover over or expand them.'],
         'Show Controls': [true, 'Show controls on videos expanded inline.'],
+        'Click Passthrough': [false, 'Clicks on videos trigger your browser\'s default behavior. Videos can be contracted with button / dragging to the left.', 1],
         'Allow Sound': [true, 'Allow sound in videos.'],
         'Loop in New Tab': [true, 'Loop videos opened in their own tabs.']
       },
@@ -397,7 +398,7 @@
   doc = d.documentElement;
 
   g = {
-    VERSION: '1.9.21.9',
+    VERSION: '1.9.21.10',
     NAMESPACE: '4chan X.',
     NAME: '4chan X',
     FAQ: 'https://github.com/ccd0/4chan-x/wiki/Frequently-Asked-Questions',
@@ -1516,6 +1517,7 @@
         this.file.text = file.firstElementChild;
         this.file.thumb = $('.fileThumb > [data-md5]', file);
         this.file.fullImage = $('.full-image', file);
+        this.file.videoControls = $('.video-controls', this.file.text);
         if (this.file.videoThumb) {
           this.file.thumb.muted = true;
         }
@@ -9404,7 +9406,7 @@
       return $.on(video, 'mouseover', handler);
     },
     onControls: function(e) {
-      return e.target.controls && e.target.getBoundingClientRect().bottom - e.clientY < 35;
+      return (Conf['Show Controls'] && Conf['Click Passthrough']) || (e.target.controls && e.target.getBoundingClientRect().bottom - e.clientY < 35);
     },
     download: function(e) {
       if (this.protocol === 'blob:') {
@@ -9439,6 +9441,12 @@
       $.on(this.EAI, 'click', this.cb.toggleAll);
       Header.addShortcut(this.EAI, 3);
       $.on(d, 'scroll visibilitychange', this.cb.playVideos);
+      this.videoControls = $.el('span', {
+        className: 'video-controls'
+      });
+      $.extend(this.videoControls, {
+        innerHTML: " <a href=\"javascript:;\" title=\"You can also contract the video by dragging it to the left.\">contract</a>"
+      });
       return Post.callbacks.push({
         name: 'Image Expansion',
         cb: this.node
@@ -9456,6 +9464,7 @@
           return ImageExpand.expand(this);
         } else if (this.file.isExpanded && this.file.isVideo) {
           this.file.fullImage.muted = !Conf['Allow Sound'];
+          ImageExpand.setupVideoCB(this);
           return ImageExpand.setupVideo(this, !((_ref = this.origin.file.fullImage) != null ? _ref.paused : void 0) || this.origin.file.wasPlaying, this.file.fullImage.controls);
         }
       } else if (ImageExpand.on && !this.isHidden && !this.isFetchedQuote && (Conf['Expand spoilers'] || !this.file.isSpoiler) && (Conf['Expand videos'] || !this.file.isVideo)) {
@@ -9563,7 +9572,7 @@
       }
     },
     contract: function(post) {
-      var bottom, el, file, oldHeight, scrollY, top, x, _i, _len, _ref;
+      var bottom, cb, el, eventName, file, oldHeight, scrollY, top, x, _i, _len, _ref, _ref1;
       file = post.file;
       if (el = file.fullImage) {
         top = Header.getTopOf(el);
@@ -9573,9 +9582,12 @@
       }
       $.rmClass(post.nodes.root, 'expanded-image');
       $.rmClass(file.thumb, 'expanding');
+      if (file.videoControls) {
+        $.rm(file.videoControls);
+      }
       file.thumb.parentNode.href = file.URL;
       file.thumb.parentNode.target = '_blank';
-      _ref = ['isExpanding', 'isExpanded', 'wasPlaying', 'scrollIntoView'];
+      _ref = ['isExpanding', 'isExpanded', 'videoControls', 'wasPlaying', 'scrollIntoView'];
       for (_i = 0, _len = _ref.length; _i < _len; _i++) {
         x = _ref[_i];
         delete file[x];
@@ -9597,6 +9609,11 @@
       ImageCommon.pushCache(el);
       if (file.isVideo) {
         el.pause();
+        _ref1 = ImageExpand.videoCB;
+        for (eventName in _ref1) {
+          cb = _ref1[eventName];
+          $.off(el, eventName, cb);
+        }
       }
       if (Conf['Restart when Opened']) {
         ImageCommon.rewind(file.thumb);
@@ -9640,10 +9657,15 @@
       el.className = 'full-image';
       $.after(thumb, el);
       if (isVideo) {
+        if (Conf['Show Controls'] && Conf['Click Passthrough'] && !file.videoControls) {
+          file.videoControls = ImageExpand.videoControls.cloneNode(true);
+          $.add(file.text, file.videoControls);
+        }
         thumb.parentNode.removeAttribute('href');
         thumb.parentNode.removeAttribute('target');
         el.loop = true;
         el.muted = !Conf['Allow Sound'];
+        ImageExpand.setupVideoCB(post);
       }
       if (!isVideo) {
         return $.asap((function() {
@@ -9711,6 +9733,43 @@
         return ImageCommon.addControls(fullImage);
       }
     },
+    videoCB: (function() {
+      var mousedown;
+      mousedown = false;
+      return {
+        mouseover: function() {
+          return mousedown = false;
+        },
+        mousedown: function(e) {
+          if (e.button === 0) {
+            return mousedown = true;
+          }
+        },
+        mouseup: function(e) {
+          if (e.button === 0) {
+            return mousedown = false;
+          }
+        },
+        mouseout: function(e) {
+          if (mousedown && e.clientX <= this.getBoundingClientRect().left) {
+            return ImageExpand.toggle(Get.postFromNode(this));
+          }
+        }
+      };
+    })(),
+    setupVideoCB: function(post) {
+      var cb, eventName, _ref;
+      _ref = ImageExpand.videoCB;
+      for (eventName in _ref) {
+        cb = _ref[eventName];
+        $.on(post.file.fullImage, eventName, cb);
+      }
+      if (post.file.videoControls) {
+        return $.on(post.file.videoControls.firstElementChild, 'click', function() {
+          return ImageExpand.toggle(post);
+        });
+      }
+    },
     error: function() {
       var post;
       post = Get.postFromNode(this);

builds/4chan-X-noupdate.user.js

@@ -1,7 +1,7 @@
 // Generated by CoffeeScript
 // ==UserScript==
 // @name         4chan X
-// @version      1.9.21.9
+// @version      1.9.21.10
 // @minGMVer     1.14
 // @minFFVer     26
 // @namespace    4chan-X
@@ -24,7 +24,7 @@
 // ==/UserScript==
 
 /*
-* 4chan X - Version 1.9.21.9
+* 4chan X - Version 1.9.21.10
 *
 * Licensed under the MIT license.
 * https://github.com/ccd0/4chan-x/blob/master/LICENSE
@@ -195,6 +195,7 @@
         'Autoplay': [true, 'Videos begin playing immediately when opened.'],
         'Restart when Opened': [true, 'Restart GIFs and WebMs when you hover over or expand them.'],
         'Show Controls': [true, 'Show controls on videos expanded inline.'],
+        'Click Passthrough': [false, 'Clicks on videos trigger your browser\'s default behavior. Videos can be contracted with button / dragging to the left.', 1],
         'Allow Sound': [true, 'Allow sound in videos.'],
         'Loop in New Tab': [true, 'Loop videos opened in their own tabs.']
       },
@@ -396,7 +397,7 @@
   doc = d.documentElement;
 
   g = {
-    VERSION: '1.9.21.9',
+    VERSION: '1.9.21.10',
     NAMESPACE: '4chan X.',
     NAME: '4chan X',
     FAQ: 'https://github.com/ccd0/4chan-x/wiki/Frequently-Asked-Questions',
@@ -1515,6 +1516,7 @@
         this.file.text = file.firstElementChild;
         this.file.thumb = $('.fileThumb > [data-md5]', file);
         this.file.fullImage = $('.full-image', file);
+        this.file.videoControls = $('.video-controls', this.file.text);
         if (this.file.videoThumb) {
           this.file.thumb.muted = true;
         }
@@ -9403,7 +9405,7 @@
       return $.on(video, 'mouseover', handler);
     },
     onControls: function(e) {
-      return e.target.controls && e.target.getBoundingClientRect().bottom - e.clientY < 35;
+      return (Conf['Show Controls'] && Conf['Click Passthrough']) || (e.target.controls && e.target.getBoundingClientRect().bottom - e.clientY < 35);
     },
     download: function(e) {
       if (this.protocol === 'blob:') {
@@ -9438,6 +9440,12 @@
       $.on(this.EAI, 'click', this.cb.toggleAll);
       Header.addShortcut(this.EAI, 3);
       $.on(d, 'scroll visibilitychange', this.cb.playVideos);
+      this.videoControls = $.el('span', {
+        className: 'video-controls'
+      });
+      $.extend(this.videoControls, {
+        innerHTML: " <a href=\"javascript:;\" title=\"You can also contract the video by dragging it to the left.\">contract</a>"
+      });
       return Post.callbacks.push({
         name: 'Image Expansion',
         cb: this.node
@@ -9455,6 +9463,7 @@
           return ImageExpand.expand(this);
         } else if (this.file.isExpanded && this.file.isVideo) {
           this.file.fullImage.muted = !Conf['Allow Sound'];
+          ImageExpand.setupVideoCB(this);
           return ImageExpand.setupVideo(this, !((_ref = this.origin.file.fullImage) != null ? _ref.paused : void 0) || this.origin.file.wasPlaying, this.file.fullImage.controls);
         }
       } else if (ImageExpand.on && !this.isHidden && !this.isFetchedQuote && (Conf['Expand spoilers'] || !this.file.isSpoiler) && (Conf['Expand videos'] || !this.file.isVideo)) {
@@ -9562,7 +9571,7 @@
       }
     },
     contract: function(post) {
-      var bottom, el, file, oldHeight, scrollY, top, x, _i, _len, _ref;
+      var bottom, cb, el, eventName, file, oldHeight, scrollY, top, x, _i, _len, _ref, _ref1;
       file = post.file;
       if (el = file.fullImage) {
         top = Header.getTopOf(el);
@@ -9572,9 +9581,12 @@
       }
       $.rmClass(post.nodes.root, 'expanded-image');
       $.rmClass(file.thumb, 'expanding');
+      if (file.videoControls) {
+        $.rm(file.videoControls);
+      }
       file.thumb.parentNode.href = file.URL;
       file.thumb.parentNode.target = '_blank';
-      _ref = ['isExpanding', 'isExpanded', 'wasPlaying', 'scrollIntoView'];
+      _ref = ['isExpanding', 'isExpanded', 'videoControls', 'wasPlaying', 'scrollIntoView'];
       for (_i = 0, _len = _ref.length; _i < _len; _i++) {
         x = _ref[_i];
         delete file[x];
@@ -9596,6 +9608,11 @@
       ImageCommon.pushCache(el);
       if (file.isVideo) {
         el.pause();
+        _ref1 = ImageExpand.videoCB;
+        for (eventName in _ref1) {
+          cb = _ref1[eventName];
+          $.off(el, eventName, cb);
+        }
       }
       if (Conf['Restart when Opened']) {
         ImageCommon.rewind(file.thumb);
@@ -9639,10 +9656,15 @@
       el.className = 'full-image';
       $.after(thumb, el);
       if (isVideo) {
+        if (Conf['Show Controls'] && Conf['Click Passthrough'] && !file.videoControls) {
+          file.videoControls = ImageExpand.videoControls.cloneNode(true);
+          $.add(file.text, file.videoControls);
+        }
         thumb.parentNode.removeAttribute('href');
         thumb.parentNode.removeAttribute('target');
         el.loop = true;
         el.muted = !Conf['Allow Sound'];
+        ImageExpand.setupVideoCB(post);
       }
       if (!isVideo) {
         return $.asap((function() {
@@ -9710,6 +9732,43 @@
         return ImageCommon.addControls(fullImage);
       }
     },
+    videoCB: (function() {
+      var mousedown;
+      mousedown = false;
+      return {
+        mouseover: function() {
+          return mousedown = false;
+        },
+        mousedown: function(e) {
+          if (e.button === 0) {
+            return mousedown = true;
+          }
+        },
+        mouseup: function(e) {
+          if (e.button === 0) {
+            return mousedown = false;
+          }
+        },
+        mouseout: function(e) {
+          if (mousedown && e.clientX <= this.getBoundingClientRect().left) {
+            return ImageExpand.toggle(Get.postFromNode(this));
+          }
+        }
+      };
+    })(),
+    setupVideoCB: function(post) {
+      var cb, eventName, _ref;
+      _ref = ImageExpand.videoCB;
+      for (eventName in _ref) {
+        cb = _ref[eventName];
+        $.on(post.file.fullImage, eventName, cb);
+      }
+      if (post.file.videoControls) {
+        return $.on(post.file.videoControls.firstElementChild, 'click', function() {
+          return ImageExpand.toggle(post);
+        });
+      }
+    },
     error: function() {
       var post;
       post = Get.postFromNode(this);

builds/4chan-X.meta.js

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

builds/4chan-X.user.js

@@ -1,7 +1,7 @@
 // Generated by CoffeeScript
 // ==UserScript==
 // @name         4chan X
-// @version      1.9.21.9
+// @version      1.9.21.10
 // @minGMVer     1.14
 // @minFFVer     26
 // @namespace    4chan-X
@@ -25,7 +25,7 @@
 // ==/UserScript==
 
 /*
-* 4chan X - Version 1.9.21.9
+* 4chan X - Version 1.9.21.10
 *
 * Licensed under the MIT license.
 * https://github.com/ccd0/4chan-x/blob/master/LICENSE
@@ -196,6 +196,7 @@
         'Autoplay': [true, 'Videos begin playing immediately when opened.'],
         'Restart when Opened': [true, 'Restart GIFs and WebMs when you hover over or expand them.'],
         'Show Controls': [true, 'Show controls on videos expanded inline.'],
+        'Click Passthrough': [false, 'Clicks on videos trigger your browser\'s default behavior. Videos can be contracted with button / dragging to the left.', 1],
         'Allow Sound': [true, 'Allow sound in videos.'],
         'Loop in New Tab': [true, 'Loop videos opened in their own tabs.']
       },
@@ -397,7 +398,7 @@
   doc = d.documentElement;
 
   g = {
-    VERSION: '1.9.21.9',
+    VERSION: '1.9.21.10',
     NAMESPACE: '4chan X.',
     NAME: '4chan X',
     FAQ: 'https://github.com/ccd0/4chan-x/wiki/Frequently-Asked-Questions',
@@ -1516,6 +1517,7 @@
         this.file.text = file.firstElementChild;
         this.file.thumb = $('.fileThumb > [data-md5]', file);
         this.file.fullImage = $('.full-image', file);
+        this.file.videoControls = $('.video-controls', this.file.text);
         if (this.file.videoThumb) {
           this.file.thumb.muted = true;
         }
@@ -9404,7 +9406,7 @@
       return $.on(video, 'mouseover', handler);
     },
     onControls: function(e) {
-      return e.target.controls && e.target.getBoundingClientRect().bottom - e.clientY < 35;
+      return (Conf['Show Controls'] && Conf['Click Passthrough']) || (e.target.controls && e.target.getBoundingClientRect().bottom - e.clientY < 35);
     },
     download: function(e) {
       if (this.protocol === 'blob:') {
@@ -9439,6 +9441,12 @@
       $.on(this.EAI, 'click', this.cb.toggleAll);
       Header.addShortcut(this.EAI, 3);
       $.on(d, 'scroll visibilitychange', this.cb.playVideos);
+      this.videoControls = $.el('span', {
+        className: 'video-controls'
+      });
+      $.extend(this.videoControls, {
+        innerHTML: " <a href=\"javascript:;\" title=\"You can also contract the video by dragging it to the left.\">contract</a>"
+      });
       return Post.callbacks.push({
         name: 'Image Expansion',
         cb: this.node
@@ -9456,6 +9464,7 @@
           return ImageExpand.expand(this);
         } else if (this.file.isExpanded && this.file.isVideo) {
           this.file.fullImage.muted = !Conf['Allow Sound'];
+          ImageExpand.setupVideoCB(this);
           return ImageExpand.setupVideo(this, !((_ref = this.origin.file.fullImage) != null ? _ref.paused : void 0) || this.origin.file.wasPlaying, this.file.fullImage.controls);
         }
       } else if (ImageExpand.on && !this.isHidden && !this.isFetchedQuote && (Conf['Expand spoilers'] || !this.file.isSpoiler) && (Conf['Expand videos'] || !this.file.isVideo)) {
@@ -9563,7 +9572,7 @@
       }
     },
     contract: function(post) {
-      var bottom, el, file, oldHeight, scrollY, top, x, _i, _len, _ref;
+      var bottom, cb, el, eventName, file, oldHeight, scrollY, top, x, _i, _len, _ref, _ref1;
       file = post.file;
       if (el = file.fullImage) {
         top = Header.getTopOf(el);
@@ -9573,9 +9582,12 @@
       }
       $.rmClass(post.nodes.root, 'expanded-image');
       $.rmClass(file.thumb, 'expanding');
+      if (file.videoControls) {
+        $.rm(file.videoControls);
+      }
       file.thumb.parentNode.href = file.URL;
       file.thumb.parentNode.target = '_blank';
-      _ref = ['isExpanding', 'isExpanded', 'wasPlaying', 'scrollIntoView'];
+      _ref = ['isExpanding', 'isExpanded', 'videoControls', 'wasPlaying', 'scrollIntoView'];
       for (_i = 0, _len = _ref.length; _i < _len; _i++) {
         x = _ref[_i];
         delete file[x];
@@ -9597,6 +9609,11 @@
       ImageCommon.pushCache(el);
       if (file.isVideo) {
         el.pause();
+        _ref1 = ImageExpand.videoCB;
+        for (eventName in _ref1) {
+          cb = _ref1[eventName];
+          $.off(el, eventName, cb);
+        }
       }
       if (Conf['Restart when Opened']) {
         ImageCommon.rewind(file.thumb);
@@ -9640,10 +9657,15 @@
       el.className = 'full-image';
       $.after(thumb, el);
       if (isVideo) {
+        if (Conf['Show Controls'] && Conf['Click Passthrough'] && !file.videoControls) {
+          file.videoControls = ImageExpand.videoControls.cloneNode(true);
+          $.add(file.text, file.videoControls);
+        }
         thumb.parentNode.removeAttribute('href');
         thumb.parentNode.removeAttribute('target');
         el.loop = true;
         el.muted = !Conf['Allow Sound'];
+        ImageExpand.setupVideoCB(post);
       }
       if (!isVideo) {
         return $.asap((function() {
@@ -9711,6 +9733,43 @@
         return ImageCommon.addControls(fullImage);
       }
     },
+    videoCB: (function() {
+      var mousedown;
+      mousedown = false;
+      return {
+        mouseover: function() {
+          return mousedown = false;
+        },
+        mousedown: function(e) {
+          if (e.button === 0) {
+            return mousedown = true;
+          }
+        },
+        mouseup: function(e) {
+          if (e.button === 0) {
+            return mousedown = false;
+          }
+        },
+        mouseout: function(e) {
+          if (mousedown && e.clientX <= this.getBoundingClientRect().left) {
+            return ImageExpand.toggle(Get.postFromNode(this));
+          }
+        }
+      };
+    })(),
+    setupVideoCB: function(post) {
+      var cb, eventName, _ref;
+      _ref = ImageExpand.videoCB;
+      for (eventName in _ref) {
+        cb = _ref[eventName];
+        $.on(post.file.fullImage, eventName, cb);
+      }
+      if (post.file.videoControls) {
+        return $.on(post.file.videoControls.firstElementChild, 'click', function() {
+          return ImageExpand.toggle(post);
+        });
+      }
+    },
     error: function() {
       var post;
       post = Get.postFromNode(this);

builds/updates-beta.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/4chan-X-beta.crx' version='1.9.21.9' />
+    <updatecheck codebase='https://ccd0.github.io/4chan-x/builds/4chan-X-beta.crx' version='1.9.21.10' />
   </app>
 </gupdate>
 

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/4chan-X.crx' version='1.9.21.9' />
+    <updatecheck codebase='https://ccd0.github.io/4chan-x/builds/4chan-X.crx' version='1.9.21.10' />
   </app>
 </gupdate>
 

package.json

@@ -3,7 +3,7 @@
   "description": "Cross-browser userscript for maximum lurking on 4chan.",
   "meta": {
     "name": "4chan X",
-    "version": "1.9.21.9",
+    "version": "1.9.21.10",
     "repo": "https://github.com/ccd0/4chan-x/",
     "page": "https://github.com/ccd0/4chan-x",
     "downloads": "https://ccd0.github.io/4chan-x/builds/",