From 38d531f947563cc29b8ef4c906b083c9f75bd327 Mon Sep 17 00:00:00 2001 From: kahays Date: Thu, 22 Sep 2022 11:05:12 -0600 Subject: [PATCH 1/2] Fix GIF freezing issues. --- .../src/main/assets/javascript/thread.js | 31 ++++++++++++------- 1 file changed, 19 insertions(+), 12 deletions(-) diff --git a/Awful.apk/src/main/assets/javascript/thread.js b/Awful.apk/src/main/assets/javascript/thread.js index b2769b4c2..90b1c4648 100644 --- a/Awful.apk/src/main/assets/javascript/thread.js +++ b/Awful.apk/src/main/assets/javascript/thread.js @@ -34,10 +34,11 @@ function containerInit() { loadIgnoredPost(target, event); return; } - if (target.tagName === 'IMG' && target.hasAttribute('title') && target.src.endsWith('.gif')) { + if (target.tagName === 'IMG' && target.src.endsWith('.gif')) { freezeGif(target); return; } + // TODO 2022/09/22: does this get called anymore? images get wrapped in tags upstream, and gif freezing acts on the tags. if (target.tagName === 'CANVAS' && target.hasAttribute('title') && target.getAttribute('src').endsWith('.gif')) { target.outerHTML = ''; return; @@ -188,11 +189,11 @@ function processPosts(scopeElement) { // handle all GIFs that are not avatars if (listener.getPreference('disableGifs') === 'true') { - scopeElement.querySelectorAll('img[title][src$=".gif"]:not(.avatar)').forEach(prepareFreezeGif); + scopeElement.querySelectorAll('img[src$=".gif"]:not(.avatar)').forEach(prepareFreezeGif); } // this handles all avatar processing, meaning if the avatar is a GIF we need to handle freezing as well - scopeElement.querySelectorAll("img[title].avatar").forEach(function each(img) { + scopeElement.querySelectorAll("img.avatar").forEach(function each(img) { img.addEventListener('load', processSecondaryAvatar); }); function processSecondaryAvatar() { @@ -309,18 +310,16 @@ function showInlineImage(url) { } /** - * Adds an empty Image Element to the Link if the link is not around a gif + * Adds an empty Image Element to the Link * @param {Element} link Link Element */ function addEmptyImg(link) { - // basically treating anything not marked as a frozen gif as a text link - if (!link.classList.contains(FROZEN_GIF)) { - var image = document.createElement('img'); - image.src = ''; - link.appendChild(image); - } else { - link.classList.add(LOADING); - } + var image = document.createElement('img'); + image.src = ''; + link.appendChild(image); + if (link.classList.contains(FROZEN_GIF)) { + link.classList.add(LOADING); + } } /** @@ -332,6 +331,9 @@ function showInlineImage(url) { image.src = url; image.style.height = 'auto'; image.style.width = 'auto'; + if (link.classList.contains(FROZEN_GIF)) { + link.querySelector('canvas').replaceWith(image); + } link.classList.remove(LOADING); link.classList.remove(FROZEN_GIF); } @@ -371,6 +373,8 @@ function changeFontFace(font) { * @param {Element} image Gif image that will be turned into a still canvas */ function freezeGif(image) { + var FROZEN_GIF = 'playGif'; + var canvas = document.createElement('canvas'); var imageWidth = image.naturalWidth; var imageHeight = image.naturalHeight; @@ -382,6 +386,9 @@ function freezeGif(image) { canvas.setAttribute(image.attributes[i].name, image.attributes[i].value); } image.parentNode.replaceChild(canvas, image); + if (canvas.parentNode.tagName === "A") { + canvas.parentNode.classList.add(FROZEN_GIF); + } } /** From f9a372f03d7f2aa43c455457cb1eaa3bb50c155c Mon Sep 17 00:00:00 2001 From: kahays Date: Mon, 3 Oct 2022 06:09:33 -0600 Subject: [PATCH 2/2] Restore tab indentation. --- .../src/main/assets/javascript/thread.js | 100 +++++++++--------- 1 file changed, 50 insertions(+), 50 deletions(-) diff --git a/Awful.apk/src/main/assets/javascript/thread.js b/Awful.apk/src/main/assets/javascript/thread.js index 90b1c4648..7ac70a708 100644 --- a/Awful.apk/src/main/assets/javascript/thread.js +++ b/Awful.apk/src/main/assets/javascript/thread.js @@ -187,26 +187,26 @@ function processPosts(scopeElement) { highlightOwnQuotes(scopeElement); } - // handle all GIFs that are not avatars + // handle all GIFs that are not avatars if (listener.getPreference('disableGifs') === 'true') { scopeElement.querySelectorAll('img[src$=".gif"]:not(.avatar)').forEach(prepareFreezeGif); } - // this handles all avatar processing, meaning if the avatar is a GIF we need to handle freezing as well - scopeElement.querySelectorAll("img.avatar").forEach(function each(img) { - img.addEventListener('load', processSecondaryAvatar); - }); - function processSecondaryAvatar() { - // when people want to use gangtags as avatars, etc., they often use a 1x1 image as their primary avatar. - // if this is the case, we change over to a "secondary" avatar, which is probably what's intended. - if (this.naturalWidth === 1 && this.naturalHeight === 1 && this.dataset.avatarSecondSrc && this.dataset.avatarSecondSrc.length) { - this.src = this.dataset.avatarSecondSrc; - } - - if (listener.getPreference('disableGifs') === 'true' && this.src.slice(-4) === ".gif") { - prepareFreezeGif(this); - } - } + // this handles all avatar processing, meaning if the avatar is a GIF we need to handle freezing as well + scopeElement.querySelectorAll("img.avatar").forEach(function each(img) { + img.addEventListener('load', processSecondaryAvatar); + }); + function processSecondaryAvatar() { + // when people want to use gangtags as avatars, etc., they often use a 1x1 image as their primary avatar. + // if this is the case, we change over to a "secondary" avatar, which is probably what's intended. + if (this.naturalWidth === 1 && this.naturalHeight === 1 && this.dataset.avatarSecondSrc && this.dataset.avatarSecondSrc.length) { + this.src = this.dataset.avatarSecondSrc; + } + + if (listener.getPreference('disableGifs') === 'true' && this.src.slice(-4) === ".gif") { + prepareFreezeGif(this); + } + } } /** @@ -214,7 +214,7 @@ function processPosts(scopeElement) { * @param {Element} scopeElement The element containing videos to pause */ function pauseVideosOutOfView(scopeElement) { - scopeElement = scopeElement || document; + scopeElement = scopeElement || document; scopeElement.querySelectorAll('video').forEach(function eachVideo(video) { if (isElementInViewport(video) && video.parentElement.parentElement.tagName !== 'BLOCKQUOTE' && video.firstElementChild.src.indexOf('webm') === -1) { video.play(); @@ -314,12 +314,12 @@ function showInlineImage(url) { * @param {Element} link Link Element */ function addEmptyImg(link) { - var image = document.createElement('img'); - image.src = ''; - link.appendChild(image); - if (link.classList.contains(FROZEN_GIF)) { - link.classList.add(LOADING); - } + var image = document.createElement('img'); + image.src = ''; + link.appendChild(image); + if (link.classList.contains(FROZEN_GIF)) { + link.classList.add(LOADING); + } } /** @@ -332,8 +332,8 @@ function showInlineImage(url) { image.style.height = 'auto'; image.style.width = 'auto'; if (link.classList.contains(FROZEN_GIF)) { - link.querySelector('canvas').replaceWith(image); - } + link.querySelector('canvas').replaceWith(image); + } link.classList.remove(LOADING); link.classList.remove(FROZEN_GIF); } @@ -373,7 +373,7 @@ function changeFontFace(font) { * @param {Element} image Gif image that will be turned into a still canvas */ function freezeGif(image) { - var FROZEN_GIF = 'playGif'; + var FROZEN_GIF = 'playGif'; var canvas = document.createElement('canvas'); var imageWidth = image.naturalWidth; @@ -387,7 +387,7 @@ function freezeGif(image) { } image.parentNode.replaceChild(canvas, image); if (canvas.parentNode.tagName === "A") { - canvas.parentNode.classList.add(FROZEN_GIF); + canvas.parentNode.classList.add(FROZEN_GIF); } } @@ -396,13 +396,13 @@ function freezeGif(image) { * @param {Element} image Gif image to monitor */ function prepareFreezeGif(image) { - if (!image.complete) { - image.addEventListener('load', function freezeLoadHandler() { - freezeGif(image); - }); - } else { - freezeGif(image); - } + if (!image.complete) { + image.addEventListener('load', function freezeLoadHandler() { + freezeGif(image); + }); + } else { + freezeGif(image); + } } /** @@ -471,9 +471,9 @@ function handleQuoteLink(link, event) { * @param {Element} info The HTMLElement of the postinfo */ function toggleInfo(info) { - var posterTitle = info.querySelector('.postinfo-title'); - var posterRegDate = info.querySelector('.postinfo-regdate'); - if (!posterTitle) { return; } + var posterTitle = info.querySelector('.postinfo-title'); + var posterRegDate = info.querySelector('.postinfo-regdate'); + if (!posterTitle) { return; } if (posterTitle.classList.contains('extended')) { if (info.querySelector('.avatar') !== null) { @@ -482,15 +482,15 @@ function toggleInfo(info) { info.querySelector('canvas').classList.add('avatar'); } window.requestAnimationFrame(function shrinkAvatar() { - info.querySelector('.avatar').classList.remove('extended'); + info.querySelector('.avatar').classList.remove('extended'); }); } posterTitle.classList.remove('extended'); posterTitle.setAttribute('aria-hidden', 'true'); if (posterRegDate) { - posterRegDate.classList.remove('extended'); - posterRegDate.setAttribute('aria-hidden', 'true'); - } + posterRegDate.classList.remove('extended'); + posterRegDate.setAttribute('aria-hidden', 'true'); + } } else { if (info.querySelector('.avatar') !== null) { if (info.querySelector('canvas') !== null) { @@ -507,9 +507,9 @@ function toggleInfo(info) { posterTitle.classList.add('extended'); posterTitle.setAttribute('aria-hidden', 'false'); if (posterRegDate) { - posterRegDate.classList.add('extended'); - posterRegDate.setAttribute('aria-hidden', 'false'); - } + posterRegDate.classList.add('extended'); + posterRegDate.setAttribute('aria-hidden', 'false'); + } } } @@ -720,16 +720,16 @@ function handleTouchLeave() { * Hides all instances of the given avatar on the page */ function hideAvatar(avatarUrl) { - document.querySelectorAll('[src="' + avatarUrl + '"]').forEach(function(avatarTag) { - avatarTag.classList.add('hide-avatar'); - }); + document.querySelectorAll('[src="' + avatarUrl + '"]').forEach(function(avatarTag) { + avatarTag.classList.add('hide-avatar'); + }); } /** * Shows all instances of the given avatar on the page */ function showAvatar(avatarUrl) { - document.querySelectorAll('[src="' + avatarUrl + '"]').forEach(function(avatarTag) { - avatarTag.classList.remove('hide-avatar'); - }); + document.querySelectorAll('[src="' + avatarUrl + '"]').forEach(function(avatarTag) { + avatarTag.classList.remove('hide-avatar'); + }); } \ No newline at end of file