From 480ffba15c582755bff51288f2efb9420198e680 Mon Sep 17 00:00:00 2001 From: Mayhem Date: Mon, 7 Apr 2014 09:14:54 +0200 Subject: [PATCH 1/9] Keep playing .webms in clones. --- src/Images/ImageExpand.coffee | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/src/Images/ImageExpand.coffee b/src/Images/ImageExpand.coffee index ccc23709a..3d5cb6522 100644 --- a/src/Images/ImageExpand.coffee +++ b/src/Images/ImageExpand.coffee @@ -16,12 +16,16 @@ ImageExpand = return unless @file and (@file.isImage or @file.isVideo) {thumb} = @file $.on thumb.parentNode, 'click', ImageExpand.cb.toggle - if @isClone and $.hasClass thumb, 'expanding' - # If we clone a post where the image is still loading, - # make it loading in the clone too. - ImageExpand.contract @ - ImageExpand.expand @ - return + if @isClone + if @file.isImage and $.hasClass thumb, 'expanding' + # If we clone a post where the image is still loading, + # make it loading in the clone too. + ImageExpand.contract @ + ImageExpand.expand @ + return + if @file.isVideo and $.hasClass @nodes.root, 'expanded-image' + @file.fullImage.play() + return if ImageExpand.on and !@isHidden and (Conf['Expand spoilers'] or !@file.isSpoiler) ImageExpand.expand @ cb: From 40d8d0626633033e375db14c06d3d3f7e47600c3 Mon Sep 17 00:00:00 2001 From: Mayhem Date: Mon, 7 Apr 2014 09:45:33 +0200 Subject: [PATCH 2/9] Wait for the video metadata to be loaded before completing the expansion. --- src/Images/ImageExpand.coffee | 33 ++++++++++++++++++++++----------- 1 file changed, 22 insertions(+), 11 deletions(-) diff --git a/src/Images/ImageExpand.coffee b/src/Images/ImageExpand.coffee index 3d5cb6522..4354f6dc9 100644 --- a/src/Images/ImageExpand.coffee +++ b/src/Images/ImageExpand.coffee @@ -14,16 +14,15 @@ ImageExpand = cb: @node node: -> return unless @file and (@file.isImage or @file.isVideo) - {thumb} = @file - $.on thumb.parentNode, 'click', ImageExpand.cb.toggle + $.on @file.thumb.parentNode, 'click', ImageExpand.cb.toggle if @isClone - if @file.isImage and $.hasClass thumb, 'expanding' + if @file.isImage and $.hasClass @file.thumb, 'expanding' # If we clone a post where the image is still loading, # make it loading in the clone too. ImageExpand.contract @ ImageExpand.expand @ return - if @file.isVideo and $.hasClass @nodes.root, 'expanded-image' + if @file.isVideo and @file.isExpanded @file.fullImage.play() return if ImageExpand.on and !@isHidden and (Conf['Expand spoilers'] or !@file.isSpoiler) @@ -76,7 +75,7 @@ ImageExpand = $.rmClass post.nodes.root, 'expanded-image' $.rmClass post.file.thumb, 'expanding' post.file.isExpanded = false - post.file.fullImage.pause() if post.file.isVideo + post.file.fullImage.pause() if post.file.isVideo and post.file.fullImage expand: (post, src) -> # Do not expand images of hidden/filtered replies, or already expanded pictures. @@ -85,10 +84,9 @@ ImageExpand = $.addClass thumb, 'expanding' if post.file.fullImage # Expand already-loaded/ing picture. - $.asap (-> post.file.isVideo or post.file.fullImage.naturalHeight), -> - ImageExpand.completeExpand post + ImageExpand.waitExpand post return - file = if post.file.isImage + post.file.fullImage = file = if post.file.isImage $.el 'img', className: 'full-image' src: src or post.file.URL @@ -97,12 +95,24 @@ ImageExpand = className: 'full-image' src: src or post.file.URL loop: true - post.file.fullImage = file $.on file, 'error', ImageExpand.error - $.asap (-> post.file.isVideo or post.file.fullImage.naturalHeight), -> - ImageExpand.completeExpand post + ImageExpand.waitExpand post $.after thumb, file + waitExpand: (post) -> + if post.file.isReady + ImageExpand.completeExpand post + else if post.file.isImage + $.asap (-> post.file.fullImage.naturalHeight), -> + post.file.isReady = true + ImageExpand.completeExpand post + else if post.file.isVideo + complete = -> + $.off post.file.fullImage, 'loadedmetadata', complete + post.file.isReady = true + ImageExpand.completeExpand post + $.on post.file.fullImage, 'loadedmetadata', complete + completeExpand: (post) -> {thumb} = post.file return unless $.hasClass thumb, 'expanding' # contracted before the image loaded @@ -123,6 +133,7 @@ ImageExpand = error: -> post = Get.postFromNode @ + post.file.isReady = false $.rm @ delete post.file.fullImage # Images can error: From 7f1abad58bc51bd21cae7a12a6cb89025efeafff Mon Sep 17 00:00:00 2001 From: Mayhem Date: Mon, 7 Apr 2014 10:02:15 +0200 Subject: [PATCH 3/9] Don't add the 'expanding' class when unecessary. --- src/Images/ImageExpand.coffee | 35 +++++++++++++++++------------------ 1 file changed, 17 insertions(+), 18 deletions(-) diff --git a/src/Images/ImageExpand.coffee b/src/Images/ImageExpand.coffee index 4354f6dc9..a8b7c6cd1 100644 --- a/src/Images/ImageExpand.coffee +++ b/src/Images/ImageExpand.coffee @@ -15,16 +15,12 @@ ImageExpand = node: -> return unless @file and (@file.isImage or @file.isVideo) $.on @file.thumb.parentNode, 'click', ImageExpand.cb.toggle - if @isClone - if @file.isImage and $.hasClass @file.thumb, 'expanding' - # If we clone a post where the image is still loading, - # make it loading in the clone too. - ImageExpand.contract @ - ImageExpand.expand @ - return - if @file.isVideo and @file.isExpanded - @file.fullImage.play() - return + if @isClone and @file.isImage and @file.isExpanding + # If we clone a post where the image is still loading, + # make it loading in the clone too. + ImageExpand.contract @ + ImageExpand.expand @ + return if ImageExpand.on and !@isHidden and (Conf['Expand spoilers'] or !@file.isSpoiler) ImageExpand.expand @ cb: @@ -57,7 +53,7 @@ ImageExpand = toggle: (post) -> {thumb} = post.file - unless post.file.isExpanded or $.hasClass thumb, 'expanding' + unless post.file.isExpanded or post.file.isExpanding ImageExpand.expand post return @@ -79,9 +75,7 @@ ImageExpand = expand: (post, src) -> # Do not expand images of hidden/filtered replies, or already expanded pictures. - {thumb} = post.file - return if post.file.isExpanded or $.hasClass thumb, 'expanding' - $.addClass thumb, 'expanding' + return if post.file.isExpanding or post.file.isExpanded if post.file.fullImage # Expand already-loaded/ing picture. ImageExpand.waitExpand post @@ -97,12 +91,16 @@ ImageExpand = loop: true $.on file, 'error', ImageExpand.error ImageExpand.waitExpand post - $.after thumb, file + $.after post.file.thumb, file waitExpand: (post) -> + post.file.isExpanding = true if post.file.isReady ImageExpand.completeExpand post - else if post.file.isImage + return + + $.addClass post.file.thumb, 'expanding' + if post.file.isImage $.asap (-> post.file.fullImage.naturalHeight), -> post.file.isReady = true ImageExpand.completeExpand post @@ -115,7 +113,8 @@ ImageExpand = completeExpand: (post) -> {thumb} = post.file - return unless $.hasClass thumb, 'expanding' # contracted before the image loaded + return unless post.file.isExpanding # contracted before the image loaded + delete post.file.isExpanding post.file.isExpanded = true post.file.fullImage.play() if post.file.isVideo unless post.nodes.root.parentNode @@ -139,7 +138,7 @@ ImageExpand = # Images can error: # - before the image started loading. # - after the image started loading. - unless $.hasClass(post.file.thumb, 'expanding') or $.hasClass post.nodes.root, 'expanded-image' + unless post.file.isExpanding or post.file.isExpanded # Don't try to re-expend if it was already contracted. return ImageExpand.contract post From fba314e05a8b7986dccb242d1e4fbfe42fad0967 Mon Sep 17 00:00:00 2001 From: Mayhem Date: Mon, 7 Apr 2014 11:06:34 +0200 Subject: [PATCH 4/9] Pause videos when they are not visible. #1538 --- src/General/Header.coffee | 3 +++ src/Images/ImageExpand.coffee | 27 +++++++++++++++++++-------- 2 files changed, 22 insertions(+), 8 deletions(-) diff --git a/src/General/Header.coffee b/src/General/Header.coffee index 0222ec41c..e6d6d09db 100644 --- a/src/General/Header.coffee +++ b/src/General/Header.coffee @@ -291,6 +291,9 @@ Header = headRect = (if $.hasClass Header.bar, 'autohide' then Header.hitzone else Header.bar).getBoundingClientRect() bottom -= clientHeight - headRect.bottom + headRect.height bottom + isNodeVisible: (node) -> + {height} = node.getBoundingClientRect() + Header.getTopOf(node) + height >= 0 and Header.getBottomOf(node) + height >= 0 isHidden: -> {top} = Header.bar.getBoundingClientRect() if Conf['Bottom header'] diff --git a/src/Images/ImageExpand.coffee b/src/Images/ImageExpand.coffee index a8b7c6cd1..455004e90 100644 --- a/src/Images/ImageExpand.coffee +++ b/src/Images/ImageExpand.coffee @@ -6,8 +6,9 @@ ImageExpand = className: 'expand-all-shortcut fa fa-expand' title: 'Expand All Images' href: 'javascript:;' - $.on @EAI, 'click', ImageExpand.cb.toggleAll + $.on @EAI, 'click', @cb.toggleAll Header.addShortcut @EAI, 3 + $.on d, 'scroll visibilitychange', @cb.playVideos Post.callbacks.push name: 'Image Expansion' @@ -15,12 +16,16 @@ ImageExpand = node: -> return unless @file and (@file.isImage or @file.isVideo) $.on @file.thumb.parentNode, 'click', ImageExpand.cb.toggle - if @isClone and @file.isImage and @file.isExpanding - # If we clone a post where the image is still loading, - # make it loading in the clone too. - ImageExpand.contract @ - ImageExpand.expand @ - return + if @isClone + if @file.isImage and @file.isExpanding + # If we clone a post where the image is still loading, + # make it loading in the clone too. + ImageExpand.contract @ + ImageExpand.expand @ + return + if @file.isVideo and @file.isExpanded + @file.fullImage.play() + return if ImageExpand.on and !@isHidden and (Conf['Expand spoilers'] or !@file.isSpoiler) ImageExpand.expand @ cb: @@ -48,6 +53,12 @@ ImageExpand = continue $.queueTask func, post return + playVideos: (e) -> + for fullID, post of g.posts + continue unless post.file and post.file.isVideo and post.file.isExpanded + play = !d.hidden and !post.isHidden and doc.contains(post.nodes.root) and Header.isNodeVisible post.nodes.root + if play then post.file.fullImage.play() else post.file.fullImage.pause() + return setFitness: -> (if @checked then $.addClass else $.rmClass) doc, @name.toLowerCase().replace /\s+/g, '-' @@ -116,13 +127,13 @@ ImageExpand = return unless post.file.isExpanding # contracted before the image loaded delete post.file.isExpanding post.file.isExpanded = true - post.file.fullImage.play() 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' return + post.file.fullImage.play() if post.file.isVideo and !d.hidden and Header.isNodeVisible post.nodes.root {bottom} = post.nodes.root.getBoundingClientRect() $.queueTask -> $.addClass post.nodes.root, 'expanded-image' From 78c86945f929ee50b22f73180bcf217a15d32c9a Mon Sep 17 00:00:00 2001 From: Mayhem Date: Mon, 7 Apr 2014 11:11:39 +0200 Subject: [PATCH 5/9] Automatically play/pause videos in clones too. --- src/Images/ImageExpand.coffee | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/Images/ImageExpand.coffee b/src/Images/ImageExpand.coffee index 455004e90..aa6934104 100644 --- a/src/Images/ImageExpand.coffee +++ b/src/Images/ImageExpand.coffee @@ -56,8 +56,9 @@ ImageExpand = playVideos: (e) -> for fullID, post of g.posts continue unless post.file and post.file.isVideo and post.file.isExpanded - play = !d.hidden and !post.isHidden and doc.contains(post.nodes.root) and Header.isNodeVisible post.nodes.root - if play then post.file.fullImage.play() else post.file.fullImage.pause() + for post in [post].concat post.clones + play = !d.hidden and !post.isHidden and doc.contains(post.nodes.root) and Header.isNodeVisible post.nodes.root + if play then post.file.fullImage.play() else post.file.fullImage.pause() return setFitness: -> (if @checked then $.addClass else $.rmClass) doc, @name.toLowerCase().replace /\s+/g, '-' From de112fcfa993ff9269536b82386fada725043340 Mon Sep 17 00:00:00 2001 From: Mayhem Date: Mon, 7 Apr 2014 11:22:17 +0200 Subject: [PATCH 6/9] Fix EAI loading files in hidden posts. Fix #1542 --- src/Images/ImageExpand.coffee | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/Images/ImageExpand.coffee b/src/Images/ImageExpand.coffee index aa6934104..539be750d 100644 --- a/src/Images/ImageExpand.coffee +++ b/src/Images/ImageExpand.coffee @@ -43,13 +43,13 @@ ImageExpand = ImageExpand.EAI.className = 'expand-all-shortcut fa fa-expand' ImageExpand.EAI.title = 'Expand All Images' func = ImageExpand.contract - for ID, post of g.posts + for ID, post of g.posts when post.file and (post.file.isImage or post.file.isVideo) for post in [post].concat post.clones - {file} = post - continue unless file and (file.isImage or file.isVideo) and doc.contains post.nodes.root - if ImageExpand.on and !post.isHidden and - (!Conf['Expand spoilers'] and file.isSpoiler or - Conf['Expand from here'] and Header.getTopOf(file.thumb) < 0) + if ImageExpand.on and ( + post.isHidden or + !Conf['Expand spoilers'] and post.file.isSpoiler or + !doc.contains(post.nodes.root) or + Conf['Expand from here'] and Header.getTopOf(post.file.thumb) < 0) continue $.queueTask func, post return From 3dc8a6de5e831fc544dd882107e51d852f4d56b0 Mon Sep 17 00:00:00 2001 From: Mayhem Date: Mon, 7 Apr 2014 11:26:17 +0200 Subject: [PATCH 7/9] Changelog. --- CHANGELOG.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index c98307544..8d2ea7f44 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,5 @@ +- Dramatically decreased CPU usage by pausing webm files not in the viewport. + ### 3.20.2 - *2014-04-06* - Fix webm upload. From c1846c01ad335ea9bb0f71903e53eb15d28b7e62 Mon Sep 17 00:00:00 2001 From: Mayhem Date: Mon, 7 Apr 2014 11:26:56 +0200 Subject: [PATCH 8/9] Release 4chan X v3.20.3. --- CHANGELOG.md | 2 ++ package.json | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 8d2ea7f44..21ece63cf 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,5 @@ +### 3.20.3 - *2014-04-07* + - Dramatically decreased CPU usage by pausing webm files not in the viewport. ### 3.20.2 - *2014-04-06* diff --git a/package.json b/package.json index 09921427c..bf6ede022 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "4chan-X", - "version": "3.20.2", + "version": "3.20.3", "description": "Cross-browser extension for productive lurking on 4chan.", "meta": { "name": "4chan X", From 445edcf8673426d5d930cf7c67a0ef0c32ea7479 Mon Sep 17 00:00:00 2001 From: Mayhem Date: Mon, 7 Apr 2014 12:05:37 +0200 Subject: [PATCH 9/9] After contracting, isExpanding should be falsy. --- src/Images/ImageExpand.coffee | 1 + 1 file changed, 1 insertion(+) diff --git a/src/Images/ImageExpand.coffee b/src/Images/ImageExpand.coffee index 539be750d..88b4788ac 100644 --- a/src/Images/ImageExpand.coffee +++ b/src/Images/ImageExpand.coffee @@ -82,6 +82,7 @@ ImageExpand = contract: (post) -> $.rmClass post.nodes.root, 'expanded-image' $.rmClass post.file.thumb, 'expanding' + delete post.file.isExpanding post.file.isExpanded = false post.file.fullImage.pause() if post.file.isVideo and post.file.fullImage