From e69d6b2e7ce5eb88401f1c124607275867094b5e Mon Sep 17 00:00:00 2001 From: ccd0 Date: Mon, 7 Apr 2014 13:30:12 -0700 Subject: [PATCH 1/4] gallery thumbnail shouldn't clone contracted image/video --- builds/4chan-X.user.js | 22 ++++++++++++---------- builds/crx/script.js | 22 ++++++++++++---------- src/Images/Gallery.coffee | 20 +++++++++++--------- 3 files changed, 35 insertions(+), 29 deletions(-) diff --git a/builds/4chan-X.user.js b/builds/4chan-X.user.js index 01344da69..0c74a9a09 100644 --- a/builds/4chan-X.user.js +++ b/builds/4chan-X.user.js @@ -7346,18 +7346,20 @@ return nodes.total.textContent = --i; }, generateThumb: function(file) { - var double, post, thumb, title; + var post, thumb, thumbImg, title; post = Get.postFromNode(file); title = ($('.fileText a', file)).textContent; - thumb = post.file.thumb.parentNode.cloneNode(true); - if (double = $('img + img', thumb)) { - $.rm(double); - } - thumb.className = 'gal-thumb'; - thumb.title = title; - thumb.dataset.id = Gallery.images.length; - thumb.dataset.post = $('a[title="Highlight this post"]', post.nodes.info).href; - thumb.firstElementChild.style.cssText = ''; + thumb = $.el('a', { + className: 'gal-thumb', + href: post.file.URL, + target: '_blank' + }, title = title, { + 'data-id': Gallery.images.length, + 'data-post': $('a[title="Highlight this post"]', post.nodes.info).href + }); + thumbImg = post.file.thumb.cloneNode(false); + thumbImg.style.cssText = ''; + $.add(thumb, thumbImg); $.on(thumb, 'click', Gallery.cb.open); Gallery.images.push(thumb); return $.add(Gallery.nodes.thumbs, thumb); diff --git a/builds/crx/script.js b/builds/crx/script.js index 2e3d3a4aa..f3029b67a 100644 --- a/builds/crx/script.js +++ b/builds/crx/script.js @@ -7365,18 +7365,20 @@ return nodes.total.textContent = --i; }, generateThumb: function(file) { - var double, post, thumb, title; + var post, thumb, thumbImg, title; post = Get.postFromNode(file); title = ($('.fileText a', file)).textContent; - thumb = post.file.thumb.parentNode.cloneNode(true); - if (double = $('img + img', thumb)) { - $.rm(double); - } - thumb.className = 'gal-thumb'; - thumb.title = title; - thumb.dataset.id = Gallery.images.length; - thumb.dataset.post = $('a[title="Highlight this post"]', post.nodes.info).href; - thumb.firstElementChild.style.cssText = ''; + thumb = $.el('a', { + className: 'gal-thumb', + href: post.file.URL, + target: '_blank' + }, title = title, { + 'data-id': Gallery.images.length, + 'data-post': $('a[title="Highlight this post"]', post.nodes.info).href + }); + thumbImg = post.file.thumb.cloneNode(false); + thumbImg.style.cssText = ''; + $.add(thumb, thumbImg); $.on(thumb, 'click', Gallery.cb.open); Gallery.images.push(thumb); return $.add(Gallery.nodes.thumbs, thumb); diff --git a/src/Images/Gallery.coffee b/src/Images/Gallery.coffee index 03215608c..e2c031b6c 100644 --- a/src/Images/Gallery.coffee +++ b/src/Images/Gallery.coffee @@ -106,16 +106,18 @@ Gallery = generateThumb: (file) -> post = Get.postFromNode file title = ($ '.fileText a', file).textContent - thumb = post.file.thumb.parentNode.cloneNode true - if double = $ 'img + img', thumb - $.rm double - - thumb.className = 'gal-thumb' - thumb.title = title - thumb.dataset.id = Gallery.images.length - thumb.dataset.post = $('a[title="Highlight this post"]', post.nodes.info).href - thumb.firstElementChild.style.cssText = '' + thumb = $.el 'a', + className: 'gal-thumb' + href: post.file.URL + target: '_blank' + title = title + 'data-id': Gallery.images.length + 'data-post': $('a[title="Highlight this post"]', post.nodes.info).href + thumbImg = post.file.thumb.cloneNode false + thumbImg.style.cssText = '' + $.add thumb, thumbImg + $.on thumb, 'click', Gallery.cb.open Gallery.images.push thumb From deeba623a0dd53111e9db07fd3845bc2cf6b382a Mon Sep 17 00:00:00 2001 From: ccd0 Date: Mon, 7 Apr 2014 15:48:56 -0700 Subject: [PATCH 2/4] contract thumbnails in hover preview ... and don't clone the video element --- builds/4chan-X.user.js | 36 ++++++++++++++++++++++++++++++------ builds/crx/script.js | 36 ++++++++++++++++++++++++++++++------ src/General/Get.coffee | 2 +- src/General/lib/clone.class | 26 ++++++++++++++++++++++++-- src/General/lib/post.class | 4 ++-- 5 files changed, 87 insertions(+), 17 deletions(-) diff --git a/builds/4chan-X.user.js b/builds/4chan-X.user.js index 0c74a9a09..1d409d3ad 100644 --- a/builds/4chan-X.user.js +++ b/builds/4chan-X.user.js @@ -1214,8 +1214,8 @@ return this.board.posts.rm(this); }; - Post.prototype.addClone = function(context) { - return new Clone(this, context); + Post.prototype.addClone = function(context, contractThumb) { + return new Clone(this, context, contractThumb); }; Post.prototype.rmClone = function(index) { @@ -1235,8 +1235,8 @@ Clone = (function(_super) { __extends(Clone, _super); - function Clone(origin, context) { - var file, info, inline, inlined, key, nodes, post, root, val, _i, _j, _k, _len, _len1, _len2, _ref, _ref1, _ref2, _ref3; + function Clone(origin, context, contractThumb) { + var file, info, inline, inlined, key, nodes, post, root, val, _i, _j, _k, _len, _len1, _len2, _ref, _ref1, _ref2, _ref3, _ref4; this.origin = origin; this.context = context; _ref = ['ID', 'fullID', 'board', 'thread', 'info', 'quotes', 'isReply']; @@ -1245,7 +1245,7 @@ this[key] = origin[key]; } nodes = origin.nodes; - root = nodes.root.cloneNode(true); + root = contractThumb ? this.cloneWithoutVideo(nodes.root) : nodes.root.cloneNode(true); post = $('.post', root); info = $('.postInfo', post); this.nodes = { @@ -1305,6 +1305,13 @@ this.file.text = file.firstElementChild; this.file.thumb = $('img[data-md5]', file); this.file.fullImage = $('.full-image', file); + if (contractThumb) { + $.rmClass(this.nodes.root, 'expanded-image'); + $.rmClass(this.file.thumb, 'expanding'); + } + if ((_ref4 = this.file.fullImage) != null) { + _ref4.removeAttribute('id'); + } } if (origin.isDead) { this.isDead = true; @@ -1313,6 +1320,23 @@ root.dataset.clone = origin.clones.push(this) - 1; } + Clone.prototype.cloneWithoutVideo = function(node) { + var child, clone, _i, _len, _ref; + if (node.tagName === 'VIDEO') { + return []; + } else if (node.nodeType === Node.ELEMENT_NODE && $('video', node)) { + clone = node.cloneNode(false); + _ref = node.childNodes; + for (_i = 0, _len = _ref.length; _i < _len; _i++) { + child = _ref[_i]; + $.add(clone, this.cloneWithoutVideo(child)); + } + return clone; + } else { + return node.cloneNode(true); + } + }; + return Clone; })(Post); @@ -3325,7 +3349,7 @@ if (!root.parentNode) { return; } - clone = post.addClone(context); + clone = post.addClone(context, $.hasClass(root, 'dialog')); Main.callbackNodes(Clone, [clone]); nodes = clone.nodes; $.rmAll(nodes.root); diff --git a/builds/crx/script.js b/builds/crx/script.js index f3029b67a..34784c010 100644 --- a/builds/crx/script.js +++ b/builds/crx/script.js @@ -1251,8 +1251,8 @@ return this.board.posts.rm(this); }; - Post.prototype.addClone = function(context) { - return new Clone(this, context); + Post.prototype.addClone = function(context, contractThumb) { + return new Clone(this, context, contractThumb); }; Post.prototype.rmClone = function(index) { @@ -1272,8 +1272,8 @@ Clone = (function(_super) { __extends(Clone, _super); - function Clone(origin, context) { - var file, info, inline, inlined, key, nodes, post, root, val, _i, _j, _k, _len, _len1, _len2, _ref, _ref1, _ref2, _ref3; + function Clone(origin, context, contractThumb) { + var file, info, inline, inlined, key, nodes, post, root, val, _i, _j, _k, _len, _len1, _len2, _ref, _ref1, _ref2, _ref3, _ref4; this.origin = origin; this.context = context; _ref = ['ID', 'fullID', 'board', 'thread', 'info', 'quotes', 'isReply']; @@ -1282,7 +1282,7 @@ this[key] = origin[key]; } nodes = origin.nodes; - root = nodes.root.cloneNode(true); + root = contractThumb ? this.cloneWithoutVideo(nodes.root) : nodes.root.cloneNode(true); post = $('.post', root); info = $('.postInfo', post); this.nodes = { @@ -1342,6 +1342,13 @@ this.file.text = file.firstElementChild; this.file.thumb = $('img[data-md5]', file); this.file.fullImage = $('.full-image', file); + if (contractThumb) { + $.rmClass(this.nodes.root, 'expanded-image'); + $.rmClass(this.file.thumb, 'expanding'); + } + if ((_ref4 = this.file.fullImage) != null) { + _ref4.removeAttribute('id'); + } } if (origin.isDead) { this.isDead = true; @@ -1350,6 +1357,23 @@ root.dataset.clone = origin.clones.push(this) - 1; } + Clone.prototype.cloneWithoutVideo = function(node) { + var child, clone, _i, _len, _ref; + if (node.tagName === 'VIDEO') { + return []; + } else if (node.nodeType === Node.ELEMENT_NODE && $('video', node)) { + clone = node.cloneNode(false); + _ref = node.childNodes; + for (_i = 0, _len = _ref.length; _i < _len; _i++) { + child = _ref[_i]; + $.add(clone, this.cloneWithoutVideo(child)); + } + return clone; + } else { + return node.cloneNode(true); + } + }; + return Clone; })(Post); @@ -3366,7 +3390,7 @@ if (!root.parentNode) { return; } - clone = post.addClone(context); + clone = post.addClone(context, $.hasClass(root, 'dialog')); Main.callbackNodes(Clone, [clone]); nodes = clone.nodes; $.rmAll(nodes.root); diff --git a/src/General/Get.coffee b/src/General/Get.coffee index 7d23faf3b..7b74973ee 100755 --- a/src/General/Get.coffee +++ b/src/General/Get.coffee @@ -85,7 +85,7 @@ Get = insert: (post, root, context) -> # Stop here if the container has been removed while loading. return unless root.parentNode - clone = post.addClone context + clone = post.addClone context, ($.hasClass root, 'dialog') Main.callbackNodes Clone, [clone] # Get rid of the side arrows. diff --git a/src/General/lib/clone.class b/src/General/lib/clone.class index df724e6b9..aa407199f 100755 --- a/src/General/lib/clone.class +++ b/src/General/lib/clone.class @@ -1,11 +1,14 @@ class Clone extends Post - constructor: (@origin, @context) -> + constructor: (@origin, @context, contractThumb) -> for key in ['ID', 'fullID', 'board', 'thread', 'info', 'quotes', 'isReply'] # Copy or point to the origin's key value. @[key] = origin[key] {nodes} = origin - root = nodes.root.cloneNode true + root = if contractThumb + @cloneWithoutVideo nodes.root + else + nodes.root.cloneNode true post = $ '.post', root info = $ '.postInfo', post @nodes = @@ -56,6 +59,25 @@ class Clone extends Post @file.thumb = $ 'img[data-md5]', file @file.fullImage = $ '.full-image', file + # Contract thumbnails in quote preview + if contractThumb + $.rmClass @nodes.root, 'expanded-image' + $.rmClass @file.thumb, 'expanding' + + # Remove any #ihover ID + @file.fullImage?.removeAttribute 'id' + @isDead = true if origin.isDead @isClone = true root.dataset.clone = origin.clones.push(@) - 1 + + cloneWithoutVideo: (node) -> + if node.tagName is 'VIDEO' + [] + else if node.nodeType is Node.ELEMENT_NODE and $ 'video', node + clone = node.cloneNode false + $.add clone, @cloneWithoutVideo child for child in node.childNodes + clone + else + node.cloneNode true + diff --git a/src/General/lib/post.class b/src/General/lib/post.class index c1b87c71a..0f15e0907 100755 --- a/src/General/lib/post.class +++ b/src/General/lib/post.class @@ -214,8 +214,8 @@ class Post @thread.posts.rm @ @board.posts.rm @ - addClone: (context) -> - new Clone @, context + addClone: (context, contractThumb) -> + new Clone @, context, contractThumb rmClone: (index) -> @clones.splice index, 1 From 1ef501fc9167b44d466a9f972b037605249e4615 Mon Sep 17 00:00:00 2001 From: ccd0 Date: Mon, 7 Apr 2014 17:38:00 -0700 Subject: [PATCH 3/4] set up clones of videos properly --- builds/4chan-X.user.js | 56 ++++++++++++++++++++--------------- builds/crx/script.js | 56 ++++++++++++++++++++--------------- src/General/lib/clone.class | 6 +++- src/Images/ImageExpand.coffee | 33 ++++++++++++--------- 4 files changed, 88 insertions(+), 63 deletions(-) diff --git a/builds/4chan-X.user.js b/builds/4chan-X.user.js index 1d409d3ad..4f86f6093 100644 --- a/builds/4chan-X.user.js +++ b/builds/4chan-X.user.js @@ -1236,7 +1236,7 @@ __extends(Clone, _super); function Clone(origin, context, contractThumb) { - var file, info, inline, inlined, key, nodes, post, root, val, _i, _j, _k, _len, _len1, _len2, _ref, _ref1, _ref2, _ref3, _ref4; + var file, info, inline, inlined, key, nodes, post, root, val, _i, _j, _k, _len, _len1, _len2, _ref, _ref1, _ref2, _ref3, _ref4, _ref5; this.origin = origin; this.context = context; _ref = ['ID', 'fullID', 'board', 'thread', 'info', 'quotes', 'isReply']; @@ -1306,12 +1306,16 @@ this.file.thumb = $('img[data-md5]', file); this.file.fullImage = $('.full-image', file); if (contractThumb) { - $.rmClass(this.nodes.root, 'expanded-image'); + $.rmClass(root, 'expanded-image'); $.rmClass(this.file.thumb, 'expanding'); } + this.file.isExpanded = $.hasClass(root, 'expanded-image'); if ((_ref4 = this.file.fullImage) != null) { _ref4.removeAttribute('id'); } + if ((_ref5 = $('.video-controls', this.file.text)) != null) { + _ref5.remove(); + } } if (origin.isDead) { this.isDead = true; @@ -7600,10 +7604,10 @@ $.on(thumb.parentNode, 'click', ImageExpand.cb.toggle); if (this.isClone && $.hasClass(thumb, 'expanding')) { ImageExpand.contract(this); - ImageExpand.expand(this); - return; - } - if (ImageExpand.on && !this.isHidden && (Conf['Expand spoilers'] || !this.file.isSpoiler)) { + return ImageExpand.expand(this); + } else if (this.isClone && this.file.isExpanded && this.file.isVideo) { + return ImageExpand.setupVideo(this); + } else if (ImageExpand.on && !this.isHidden && (Conf['Expand spoilers'] || !this.file.isSpoiler)) { return ImageExpand.expand(this); } }, @@ -7692,7 +7696,7 @@ return ImageExpand.contract(post); }, contract: function(post) { - var cb, eventName, video, _ref, _ref1; + var cb, eventName, video, _ref; if (post.file.isVideo && (video = post.file.fullImage)) { video.pause(); TrashQueue.add(video, post); @@ -7703,9 +7707,7 @@ cb = _ref[eventName]; $.off(video, eventName, cb); } - if ((_ref1 = post.file.videoControls) != null) { - _ref1.map($.rm); - } + $.rm(post.file.videoControls); delete post.file.videoControls; } $.rmClass(post.nodes.root, 'expanded-image'); @@ -7750,25 +7752,29 @@ if (!$.hasClass(thumb, 'expanding')) { return; } - post.file.isExpanded = true; - if (post.file.isVideo) { - ImageExpand.setupVideo(post); - } if (!post.nodes.root.parentNode) { - $.addClass(post.nodes.root, 'expanded-image'); - $.rmClass(post.file.thumb, 'expanding'); + ImageExpand.completeExpand2(post); return; } bottom = post.nodes.root.getBoundingClientRect().bottom; return $.queueTask(function() { - $.addClass(post.nodes.root, 'expanded-image'); - $.rmClass(post.file.thumb, 'expanding'); + ImageExpand.completeExpand2(post); if (!(bottom <= 0)) { return; } return window.scrollBy(0, post.nodes.root.getBoundingClientRect().bottom - bottom); }); }, + completeExpand2: function(post) { + var thumb; + thumb = post.file.thumb; + $.addClass(post.nodes.root, 'expanded-image'); + $.rmClass(post.file.thumb, 'expanding'); + post.file.isExpanded = true; + if (post.file.isVideo) { + return ImageExpand.setupVideo(post, Conf['Autoplay']); + } + }, videoCB: { mousedown: function(e) { if (e.button === 0) { @@ -7789,11 +7795,13 @@ } } }, - setupVideo: function(post) { - var cb, contract, eventName, file, play, video, _ref; + setupVideo: function(post, play) { + var cb, contract, eventName, file, video, _ref; file = post.file; video = file.fullImage; - file.videoControls = []; + file.videoControls = $.el('span', { + className: 'video-controls' + }); file.thumb.parentNode.removeAttribute('href'); file.thumb.parentNode.removeAttribute('target'); video.muted = !Conf['Allow Sound']; @@ -7813,9 +7821,9 @@ $.on(contract, 'click', function(e) { return ImageExpand.contract(post); }); - file.videoControls.push($.tn('\u00A0'), contract); + $.add(file.videoControls, [$.tn('\u00A0'), contract]); } - if (Conf['Autoplay']) { + if (play) { video.controls = false; video.play(); if (Conf['Show Controls']) { @@ -7836,7 +7844,7 @@ video[this.textContent](); return this.textContent = this.textContent === 'play' ? 'pause' : 'play'; }); - file.videoControls.push($.tn('\u00A0'), play); + $.add(file.videoControls, [$.tn('\u00A0'), play]); } return $.add(file.text, file.videoControls); }, diff --git a/builds/crx/script.js b/builds/crx/script.js index 34784c010..dd9f2a051 100644 --- a/builds/crx/script.js +++ b/builds/crx/script.js @@ -1273,7 +1273,7 @@ __extends(Clone, _super); function Clone(origin, context, contractThumb) { - var file, info, inline, inlined, key, nodes, post, root, val, _i, _j, _k, _len, _len1, _len2, _ref, _ref1, _ref2, _ref3, _ref4; + var file, info, inline, inlined, key, nodes, post, root, val, _i, _j, _k, _len, _len1, _len2, _ref, _ref1, _ref2, _ref3, _ref4, _ref5; this.origin = origin; this.context = context; _ref = ['ID', 'fullID', 'board', 'thread', 'info', 'quotes', 'isReply']; @@ -1343,12 +1343,16 @@ this.file.thumb = $('img[data-md5]', file); this.file.fullImage = $('.full-image', file); if (contractThumb) { - $.rmClass(this.nodes.root, 'expanded-image'); + $.rmClass(root, 'expanded-image'); $.rmClass(this.file.thumb, 'expanding'); } + this.file.isExpanded = $.hasClass(root, 'expanded-image'); if ((_ref4 = this.file.fullImage) != null) { _ref4.removeAttribute('id'); } + if ((_ref5 = $('.video-controls', this.file.text)) != null) { + _ref5.remove(); + } } if (origin.isDead) { this.isDead = true; @@ -7619,10 +7623,10 @@ $.on(thumb.parentNode, 'click', ImageExpand.cb.toggle); if (this.isClone && $.hasClass(thumb, 'expanding')) { ImageExpand.contract(this); - ImageExpand.expand(this); - return; - } - if (ImageExpand.on && !this.isHidden && (Conf['Expand spoilers'] || !this.file.isSpoiler)) { + return ImageExpand.expand(this); + } else if (this.isClone && this.file.isExpanded && this.file.isVideo) { + return ImageExpand.setupVideo(this); + } else if (ImageExpand.on && !this.isHidden && (Conf['Expand spoilers'] || !this.file.isSpoiler)) { return ImageExpand.expand(this); } }, @@ -7711,7 +7715,7 @@ return ImageExpand.contract(post); }, contract: function(post) { - var cb, eventName, video, _ref, _ref1; + var cb, eventName, video, _ref; if (post.file.isVideo && (video = post.file.fullImage)) { video.pause(); TrashQueue.add(video, post); @@ -7722,9 +7726,7 @@ cb = _ref[eventName]; $.off(video, eventName, cb); } - if ((_ref1 = post.file.videoControls) != null) { - _ref1.map($.rm); - } + $.rm(post.file.videoControls); delete post.file.videoControls; } $.rmClass(post.nodes.root, 'expanded-image'); @@ -7769,25 +7771,29 @@ if (!$.hasClass(thumb, 'expanding')) { return; } - post.file.isExpanded = true; - if (post.file.isVideo) { - ImageExpand.setupVideo(post); - } if (!post.nodes.root.parentNode) { - $.addClass(post.nodes.root, 'expanded-image'); - $.rmClass(post.file.thumb, 'expanding'); + ImageExpand.completeExpand2(post); return; } bottom = post.nodes.root.getBoundingClientRect().bottom; return $.queueTask(function() { - $.addClass(post.nodes.root, 'expanded-image'); - $.rmClass(post.file.thumb, 'expanding'); + ImageExpand.completeExpand2(post); if (!(bottom <= 0)) { return; } return window.scrollBy(0, post.nodes.root.getBoundingClientRect().bottom - bottom); }); }, + completeExpand2: function(post) { + var thumb; + thumb = post.file.thumb; + $.addClass(post.nodes.root, 'expanded-image'); + $.rmClass(post.file.thumb, 'expanding'); + post.file.isExpanded = true; + if (post.file.isVideo) { + return ImageExpand.setupVideo(post, Conf['Autoplay']); + } + }, videoCB: { mousedown: function(e) { if (e.button === 0) { @@ -7808,11 +7814,13 @@ } } }, - setupVideo: function(post) { - var cb, contract, eventName, file, play, video, _ref; + setupVideo: function(post, play) { + var cb, contract, eventName, file, video, _ref; file = post.file; video = file.fullImage; - file.videoControls = []; + file.videoControls = $.el('span', { + className: 'video-controls' + }); file.thumb.parentNode.removeAttribute('href'); file.thumb.parentNode.removeAttribute('target'); video.muted = !Conf['Allow Sound']; @@ -7832,9 +7840,9 @@ $.on(contract, 'click', function(e) { return ImageExpand.contract(post); }); - file.videoControls.push($.tn('\u00A0'), contract); + $.add(file.videoControls, [$.tn('\u00A0'), contract]); } - if (Conf['Autoplay']) { + if (play) { video.controls = false; video.play(); if (Conf['Show Controls']) { @@ -7855,7 +7863,7 @@ video[this.textContent](); return this.textContent = this.textContent === 'play' ? 'pause' : 'play'; }); - file.videoControls.push($.tn('\u00A0'), play); + $.add(file.videoControls, [$.tn('\u00A0'), play]); } return $.add(file.text, file.videoControls); }, diff --git a/src/General/lib/clone.class b/src/General/lib/clone.class index aa407199f..4599d330b 100755 --- a/src/General/lib/clone.class +++ b/src/General/lib/clone.class @@ -61,12 +61,16 @@ class Clone extends Post # Contract thumbnails in quote preview if contractThumb - $.rmClass @nodes.root, 'expanded-image' + $.rmClass root, 'expanded-image' $.rmClass @file.thumb, 'expanding' + @file.isExpanded = $.hasClass root, 'expanded-image' # Remove any #ihover ID @file.fullImage?.removeAttribute 'id' + # Remove video controls. + ($ '.video-controls', @file.text)?.remove() + @isDead = true if origin.isDead @isClone = true root.dataset.clone = origin.clones.push(@) - 1 diff --git a/src/Images/ImageExpand.coffee b/src/Images/ImageExpand.coffee index da977b6de..7c955149e 100755 --- a/src/Images/ImageExpand.coffee +++ b/src/Images/ImageExpand.coffee @@ -22,8 +22,9 @@ ImageExpand = # make it loading in the clone too. ImageExpand.contract @ ImageExpand.expand @ - return - if ImageExpand.on and !@isHidden and (Conf['Expand spoilers'] or !@file.isSpoiler) + else if @isClone and @file.isExpanded and @file.isVideo + ImageExpand.setupVideo @ + else if ImageExpand.on and !@isHidden and (Conf['Expand spoilers'] or !@file.isSpoiler) ImageExpand.expand @ cb: toggle: (e) -> @@ -99,7 +100,7 @@ ImageExpand = post.file.thumb.parentNode.target = '_blank' for eventName, cb of ImageExpand.videoCB $.off video, eventName, cb - post.file.videoControls?.map($.rm) + $.rm post.file.videoControls delete post.file.videoControls $.rmClass post.nodes.root, 'expanded-image' $.rmClass post.file.thumb, 'expanding' @@ -126,21 +127,24 @@ ImageExpand = completeExpand: (post) -> {thumb} = post.file return unless $.hasClass thumb, 'expanding' # contracted before the image loaded - post.file.isExpanded = true - ImageExpand.setupVideo post if post.file.isVideo unless post.nodes.root.parentNode # Image might start/finish loading before the post is inserted. # Don't scroll when it's expanded in a QP for example. - $.addClass post.nodes.root, 'expanded-image' - $.rmClass post.file.thumb, 'expanding' + ImageExpand.completeExpand2 post return {bottom} = post.nodes.root.getBoundingClientRect() $.queueTask -> - $.addClass post.nodes.root, 'expanded-image' - $.rmClass post.file.thumb, 'expanding' + ImageExpand.completeExpand2 post return unless bottom <= 0 window.scrollBy 0, post.nodes.root.getBoundingClientRect().bottom - bottom + completeExpand2: (post) -> + {thumb} = post.file + $.addClass post.nodes.root, 'expanded-image' + $.rmClass post.file.thumb, 'expanding' + post.file.isExpanded = true + ImageExpand.setupVideo post, Conf['Autoplay'] if post.file.isVideo + videoCB: mousedown: (e) -> @dataset.mousedown = 'true' if e.button is 0 mouseup: (e) -> @dataset.mousedown = 'false' if e.button is 0 @@ -149,10 +153,11 @@ ImageExpand = if @dataset.mousedown is 'true' and e.clientX <= @getBoundingClientRect().left ImageExpand.contract (Get.postFromNode @) - setupVideo: (post) -> + setupVideo: (post, play) -> {file} = post video = file.fullImage - file.videoControls = [] + file.videoControls = $.el 'span', + className: 'video-controls' file.thumb.parentNode.removeAttribute 'href' file.thumb.parentNode.removeAttribute 'target' video.muted = !Conf['Allow Sound'] @@ -167,8 +172,8 @@ ImageExpand = href: 'javascript:;' title: 'You can also contract the video by dragging it to the left.' $.on contract, 'click', (e) -> ImageExpand.contract post - file.videoControls.push $.tn('\u00A0'), contract - if Conf['Autoplay'] + $.add file.videoControls, [$.tn('\u00A0'), contract] + if play video.controls = false video.play() # Hacky workaround for Firefox forever-loading bug @@ -183,7 +188,7 @@ ImageExpand = $.on play, 'click', (e) -> video[@textContent]() @textContent = if @textContent is 'play' then 'pause' else 'play' - file.videoControls.push $.tn('\u00A0'), play + $.add file.videoControls, [$.tn('\u00A0'), play] $.add file.text, file.videoControls error: -> From fe1b68a635fd05c82b83e72e8e879ed775290a19 Mon Sep 17 00:00:00 2001 From: ccd0 Date: Mon, 7 Apr 2014 18:23:33 -0700 Subject: [PATCH 4/4] change UI for no autoplay, no controls --- builds/4chan-X.user.js | 44 ++++++++++++++++---------------- builds/crx/script.js | 44 ++++++++++++++++---------------- src/Images/ImageExpand.coffee | 47 ++++++++++++++++++++--------------- 3 files changed, 73 insertions(+), 62 deletions(-) diff --git a/builds/4chan-X.user.js b/builds/4chan-X.user.js index 4f86f6093..67fce89fe 100644 --- a/builds/4chan-X.user.js +++ b/builds/4chan-X.user.js @@ -7606,7 +7606,7 @@ ImageExpand.contract(this); return ImageExpand.expand(this); } else if (this.isClone && this.file.isExpanded && this.file.isVideo) { - return ImageExpand.setupVideo(this); + return ImageExpand.setupVideoControls(this); } else if (ImageExpand.on && !this.isHidden && (Conf['Expand spoilers'] || !this.file.isSpoiler)) { return ImageExpand.expand(this); } @@ -7772,10 +7772,16 @@ $.rmClass(post.file.thumb, 'expanding'); post.file.isExpanded = true; if (post.file.isVideo) { - return ImageExpand.setupVideo(post, Conf['Autoplay']); + return ImageExpand.setupVideo(post); } }, videoCB: { + click: function(e) { + if (this.paused && !this.controls) { + this.play(); + return e.stopPropagation(); + } + }, mousedown: function(e) { if (e.button === 0) { return this.dataset.mousedown = 'true'; @@ -7795,23 +7801,21 @@ } } }, - setupVideo: function(post, play) { + setupVideoControls: function(post) { var cb, contract, eventName, file, video, _ref; file = post.file; video = file.fullImage; - file.videoControls = $.el('span', { - className: 'video-controls' - }); file.thumb.parentNode.removeAttribute('href'); file.thumb.parentNode.removeAttribute('target'); - video.muted = !Conf['Allow Sound']; - video.controls = Conf['Show Controls']; video.dataset.mousedown = 'false'; _ref = ImageExpand.videoCB; for (eventName in _ref) { cb = _ref[eventName]; $.on(video, eventName, cb); } + file.videoControls = $.el('span', { + className: 'video-controls' + }); if (Conf['Show Controls']) { contract = $.el('a', { textContent: 'contract', @@ -7823,11 +7827,20 @@ }); $.add(file.videoControls, [$.tn('\u00A0'), contract]); } - if (play) { + return $.add(file.text, file.videoControls); + }, + setupVideo: function(post) { + var file, video; + ImageExpand.setupVideoControls(post); + file = post.file; + video = file.fullImage; + video.muted = !Conf['Allow Sound']; + video.controls = Conf['Show Controls']; + if (Conf['Autoplay']) { video.controls = false; video.play(); if (Conf['Show Controls']) { - $.asap((function() { + return $.asap((function() { return (video.readyState >= 3 && video.currentTime <= Math.max(0.1, video.duration - 0.5)) || !file.isExpanded; }), function() { if (file.isExpanded) { @@ -7835,18 +7848,7 @@ } }, 500); } - } else if (!Conf['Show Controls']) { - play = $.el('a', { - textContent: 'play', - href: 'javascript:;' - }); - $.on(play, 'click', function(e) { - video[this.textContent](); - return this.textContent = this.textContent === 'play' ? 'pause' : 'play'; - }); - $.add(file.videoControls, [$.tn('\u00A0'), play]); } - return $.add(file.text, file.videoControls); }, error: function() { var URL, post, src, timeoutID; diff --git a/builds/crx/script.js b/builds/crx/script.js index dd9f2a051..f83466d20 100644 --- a/builds/crx/script.js +++ b/builds/crx/script.js @@ -7625,7 +7625,7 @@ ImageExpand.contract(this); return ImageExpand.expand(this); } else if (this.isClone && this.file.isExpanded && this.file.isVideo) { - return ImageExpand.setupVideo(this); + return ImageExpand.setupVideoControls(this); } else if (ImageExpand.on && !this.isHidden && (Conf['Expand spoilers'] || !this.file.isSpoiler)) { return ImageExpand.expand(this); } @@ -7791,10 +7791,16 @@ $.rmClass(post.file.thumb, 'expanding'); post.file.isExpanded = true; if (post.file.isVideo) { - return ImageExpand.setupVideo(post, Conf['Autoplay']); + return ImageExpand.setupVideo(post); } }, videoCB: { + click: function(e) { + if (this.paused && !this.controls) { + this.play(); + return e.stopPropagation(); + } + }, mousedown: function(e) { if (e.button === 0) { return this.dataset.mousedown = 'true'; @@ -7814,23 +7820,21 @@ } } }, - setupVideo: function(post, play) { + setupVideoControls: function(post) { var cb, contract, eventName, file, video, _ref; file = post.file; video = file.fullImage; - file.videoControls = $.el('span', { - className: 'video-controls' - }); file.thumb.parentNode.removeAttribute('href'); file.thumb.parentNode.removeAttribute('target'); - video.muted = !Conf['Allow Sound']; - video.controls = Conf['Show Controls']; video.dataset.mousedown = 'false'; _ref = ImageExpand.videoCB; for (eventName in _ref) { cb = _ref[eventName]; $.on(video, eventName, cb); } + file.videoControls = $.el('span', { + className: 'video-controls' + }); if (Conf['Show Controls']) { contract = $.el('a', { textContent: 'contract', @@ -7842,11 +7846,20 @@ }); $.add(file.videoControls, [$.tn('\u00A0'), contract]); } - if (play) { + return $.add(file.text, file.videoControls); + }, + setupVideo: function(post) { + var file, video; + ImageExpand.setupVideoControls(post); + file = post.file; + video = file.fullImage; + video.muted = !Conf['Allow Sound']; + video.controls = Conf['Show Controls']; + if (Conf['Autoplay']) { video.controls = false; video.play(); if (Conf['Show Controls']) { - $.asap((function() { + return $.asap((function() { return (video.readyState >= 3 && video.currentTime <= Math.max(0.1, video.duration - 0.5)) || !file.isExpanded; }), function() { if (file.isExpanded) { @@ -7854,18 +7867,7 @@ } }, 500); } - } else if (!Conf['Show Controls']) { - play = $.el('a', { - textContent: 'play', - href: 'javascript:;' - }); - $.on(play, 'click', function(e) { - video[this.textContent](); - return this.textContent = this.textContent === 'play' ? 'pause' : 'play'; - }); - $.add(file.videoControls, [$.tn('\u00A0'), play]); } - return $.add(file.text, file.videoControls); }, error: function() { var URL, post, src, timeoutID; diff --git a/src/Images/ImageExpand.coffee b/src/Images/ImageExpand.coffee index 7c955149e..6c0a992d6 100755 --- a/src/Images/ImageExpand.coffee +++ b/src/Images/ImageExpand.coffee @@ -23,7 +23,7 @@ ImageExpand = ImageExpand.contract @ ImageExpand.expand @ else if @isClone and @file.isExpanded and @file.isVideo - ImageExpand.setupVideo @ + ImageExpand.setupVideoControls @ else if ImageExpand.on and !@isHidden and (Conf['Expand spoilers'] or !@file.isSpoiler) ImageExpand.expand @ cb: @@ -143,9 +143,15 @@ ImageExpand = $.addClass post.nodes.root, 'expanded-image' $.rmClass post.file.thumb, 'expanding' post.file.isExpanded = true - ImageExpand.setupVideo post, Conf['Autoplay'] if post.file.isVideo + ImageExpand.setupVideo post if post.file.isVideo videoCB: + click: (e) -> + if @paused and not @controls + @play() + e.stopPropagation() + + # dragging to the left contracts the video mousedown: (e) -> @dataset.mousedown = 'true' if e.button is 0 mouseup: (e) -> @dataset.mousedown = 'false' if e.button is 0 mouseover: (e) -> @dataset.mousedown = 'false' @@ -153,43 +159,44 @@ ImageExpand = if @dataset.mousedown is 'true' and e.clientX <= @getBoundingClientRect().left ImageExpand.contract (Get.postFromNode @) - setupVideo: (post, play) -> + setupVideoControls: (post) -> {file} = post video = file.fullImage - file.videoControls = $.el 'span', - className: 'video-controls' + + # disable link to file so native controls can work file.thumb.parentNode.removeAttribute 'href' file.thumb.parentNode.removeAttribute 'target' - video.muted = !Conf['Allow Sound'] - video.controls = Conf['Show Controls'] - # drag left to contract + + # setup callbacks on video element video.dataset.mousedown = 'false' $.on video, eventName, cb for eventName, cb of ImageExpand.videoCB + + # setup controls in file info + file.videoControls = $.el 'span', + className: 'video-controls' if Conf['Show Controls'] - # contract link in file info contract = $.el 'a', textContent: 'contract' href: 'javascript:;' title: 'You can also contract the video by dragging it to the left.' $.on contract, 'click', (e) -> ImageExpand.contract post $.add file.videoControls, [$.tn('\u00A0'), contract] - if play + $.add file.text, file.videoControls + + setupVideo: (post) -> + ImageExpand.setupVideoControls post + {file} = post + video = file.fullImage + video.muted = !Conf['Allow Sound'] + video.controls = Conf['Show Controls'] + if Conf['Autoplay'] video.controls = false video.play() - # Hacky workaround for Firefox forever-loading bug + # Hacky workaround for Firefox forever-loading bug for very short videos if Conf['Show Controls'] $.asap (-> (video.readyState >= 3 and video.currentTime <= Math.max 0.1, (video.duration - 0.5)) or !file.isExpanded), -> video.controls = true if file.isExpanded , 500 - else unless Conf['Show Controls'] - play = $.el 'a', - textContent: 'play' - href: 'javascript:;' - $.on play, 'click', (e) -> - video[@textContent]() - @textContent = if @textContent is 'play' then 'pause' else 'play' - $.add file.videoControls, [$.tn('\u00A0'), play] - $.add file.text, file.videoControls error: -> post = Get.postFromNode @