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: ->