implement improvements

Author: marcustyphoon

src/features/accesskit/disable_gifs.js

@@ -3,18 +3,19 @@ import { keyToCss } from '../../utils/css_map.js';
 import { dom } from '../../utils/dom.js';
 import { buildStyle, postSelector } from '../../utils/interface.js';
 import { getPreferences } from '../../utils/preferences.js';
+import { memoize } from '../../utils/memoize.js';
 
-const canvasClass = 'xkit-paused-gif-placeholder';
 const pausedPosterAttribute = 'data-paused-gif-use-poster';
+const pausedContentVar = '--xkit-paused-gif-content';
+const pausedBackgroundImageVar = '--xkit-paused-gif-background-image';
 const hoverContainerAttribute = 'data-paused-gif-hover-container';
 const labelAttribute = 'data-paused-gif-label';
+const hoverFixAttribute = 'data-paused-gif-hover-fix';
 const containerClass = 'xkit-paused-gif-container';
-const backgroundGifClass = 'xkit-paused-background-gif';
 
 let loadingMode;
 
 const hovered = `:is(:hover, [${hoverContainerAttribute}]:hover *)`;
-const parentHovered = `:is(:hover > *, [${hoverContainerAttribute}]:hover *)`;
 
 export const styleElement = buildStyle(`
 [${labelAttribute}]::after {
@@ -44,16 +45,17 @@ export const styleElement = buildStyle(`
   transform: translateY(-50%);
 }
 
-.${canvasClass} {
-  position: absolute;
-  visibility: visible;
+[${labelAttribute}]${hovered}::after,
+[${pausedPosterAttribute}]:not(${hovered}) > div > ${keyToCss('knightRiderLoader')} {
+  display: none;
+}
 
-  background-color: rgb(var(--white));
+${keyToCss('blogCard')} ${keyToCss('headerImage')}${keyToCss('small')}[${labelAttribute}]::after {
+  font-size: 0.8rem;
+  top: calc(140px - 1em - 2.2ch);
 }
 
-.${canvasClass}${parentHovered},
-[${labelAttribute}]${hovered}::after,
-[${pausedPosterAttribute}]:not(${hovered}) > div > ${keyToCss('knightRiderLoader')} {
+img:is([${pausedPosterAttribute}], [style*="${pausedContentVar}"]):not(${hovered}) ~ div > ${keyToCss('knightRiderLoader')} {
   display: none;
 }
 ${keyToCss('background')}[${labelAttribute}]::after {
@@ -71,13 +73,16 @@ ${keyToCss('background')}[${labelAttribute}]::after {
   display: none;
 }
 
-.${backgroundGifClass}:not(:hover) {
-  background-image: none !important;
-  background-color: rgb(var(--secondary-accent));
+img[style*="${pausedContentVar}"]:not(${hovered}) {
+  content: var(${pausedContentVar});
+}
+[style*="${pausedBackgroundImageVar}"]:not(${hovered}) {
+  background-image: var(${pausedBackgroundImageVar}) !important;
 }
 
-.${backgroundGifClass}:not(:hover) > :is(div, span) {
-  color: rgb(var(--black));
+[${hoverFixAttribute}] {
+  position: relative;
+  pointer-events: auto !important;
 }
 `);
 
@@ -92,54 +97,86 @@ const addLabel = (element, inside = false) => {
   }
 };
 
-const pauseGif = function (gifElement) {
-  const image = new Image();
-  image.src = gifElement.currentSrc;
-  image.onload = () => {
-    if (gifElement.parentNode && gifElement.parentNode.querySelector(`.${canvasClass}`) === null) {
-      const canvas = document.createElement('canvas');
-      canvas.width = image.naturalWidth;
-      canvas.height = image.naturalHeight;
-      canvas.className = gifElement.className;
-      canvas.classList.add(canvasClass);
-      canvas.setAttribute('style', gifElement.getAttribute('style'));
-      canvas.getContext('2d').drawImage(image, 0, 0);
-      gifElement.after(canvas);
-      addLabel(gifElement);
+const createPausedUrl = memoize(async sourceUrl => {
+  const response = await fetch(sourceUrl, { headers: { Accept: 'image/webp,*/*' } });
+  const contentType = response.headers.get('Content-Type');
+  const canvas = document.createElement('canvas');
+
+  /* globals ImageDecoder */
+  if (typeof ImageDecoder === 'function' && await ImageDecoder.isTypeSupported(contentType)) {
+    const decoder = new ImageDecoder({
+      type: contentType,
+      data: response.body,
+      preferAnimation: true
+    });
+    const { image: videoFrame } = await decoder.decode();
+    if (decoder.tracks.selectedTrack.animated === false) {
+      // source image is not animated; decline to pause it
+      return undefined;
     }
-  };
-};
+    canvas.width = videoFrame.displayWidth;
+    canvas.height = videoFrame.displayHeight;
+    canvas.getContext('2d').drawImage(videoFrame, 0, 0);
+  } else {
+    if (sourceUrl.endsWith('.webp')) {
+      // source image may not be animated; decline to pause it
+      return undefined;
+    }
+    const imageBitmap = await response.blob().then(blob => window.createImageBitmap(blob));
+    canvas.width = imageBitmap.width;
+    canvas.height = imageBitmap.height;
+    canvas.getContext('2d').drawImage(imageBitmap, 0, 0);
+  }
+  const blob = await new Promise(resolve => canvas.toBlob(resolve, 'image/webp', 1));
+  return URL.createObjectURL(blob);
+});
 
 const processGifs = function (gifElements) {
-  gifElements.forEach(gifElement => {
+  gifElements.forEach(async gifElement => {
     if (gifElement.closest(`${keyToCss('avatarImage', 'subAvatarImage')}, .block-editor-writing-flow`)) return;
-    const pausedGifElements = [...gifElement.parentNode.querySelectorAll(`.${canvasClass}`)];
-    if (pausedGifElements.length) {
-      gifElement.after(...pausedGifElements);
-      return;
-    }
-
     gifElement.decoding = 'sync';
 
     const posterElement = gifElement.parentElement.querySelector(keyToCss('poster'));
     if (posterElement) {
       gifElement.parentElement.setAttribute(pausedPosterAttribute, loadingMode);
-      addLabel(posterElement);
-      return;
-    }
-
-    if (gifElement.complete && gifElement.currentSrc) {
-      pauseGif(gifElement);
     } else {
-      gifElement.onload = () => pauseGif(gifElement);
+      const sourceUrl = gifElement.currentSrc ||
+        await new Promise(resolve => gifElement.addEventListener('load', () => resolve(gifElement.currentSrc), { once: true }));
+
+      const pausedUrl = await createPausedUrl(sourceUrl);
+      if (!pausedUrl) return;
+
+      gifElement.style.setProperty(pausedContentVar, `url(${pausedUrl})`);
     }
+    addLabel(gifElement);
+
+    gifElement.closest(keyToCss(
+      'albumImage', // post audio element
+      'imgLink' // trending tag: https://www.tumblr.com/explore/trending
+    ))?.setAttribute(hoverFixAttribute, '');
   });
 };
 
+const sourceUrlRegex = /(?<=url\(["'])[^)]*?\.(?:gif|gifv|webp)(?=["']\))/g;
 const processBackgroundGifs = function (gifBackgroundElements) {
-  gifBackgroundElements.forEach(gifBackgroundElement => {
-    gifBackgroundElement.classList.add(backgroundGifClass);
+  gifBackgroundElements.forEach(async gifBackgroundElement => {
+    const sourceValue = gifBackgroundElement.style.backgroundImage;
+    const sourceUrl = sourceValue.match(sourceUrlRegex)?.[0];
+    if (!sourceUrl) return;
+
+    const pausedUrl = await createPausedUrl(sourceUrl);
+    if (!pausedUrl) return;
+
+    gifBackgroundElement.style.setProperty(
+      pausedBackgroundImageVar,
+      sourceValue.replaceAll(sourceUrlRegex, pausedUrl)
+    );
     addLabel(gifBackgroundElement, true);
+
+    gifBackgroundElement.closest(keyToCss(
+      'media', // old activity item: "liked your post", "reblogged your post", "mentioned you in a post"
+      'activityMedia' // new activity item: "replied to your post", "replied to you in a post"
+    ))?.setAttribute(hoverFixAttribute, '');
   });
 };
 
@@ -179,30 +216,53 @@ export const main = async function () {
       ${
         'figure' // post image/imageset; recommended blog carousel entry; blog view sidebar "more like this"; post in grid view; blog card modal post entry
       },
+      ${
+        'main.labs' // labs settings header: https://www.tumblr.com/settings/labs
+      },
       ${keyToCss(
         'linkCard', // post link element
+        'albumImage', // post audio element
+        'messageImage', // direct message attached image
+        'messagePost', // direct message linked post
         'typeaheadRow', // modal search dropdown entry
         'tagImage', // search page sidebar related tags, recommended tag carousel entry: https://www.tumblr.com/search/gif, https://www.tumblr.com/explore/recommended-for-you
+        'headerBanner', // blog view header
+        'headerImage', // modal blog card header, activity page "biggest fans" header
         'topPost', // activity page top post
+        'colorfulListItemWrapper', // trending tag: https://www.tumblr.com/explore/trending
         'takeoverBanner' // advertisement
       )}
-    ) img[srcset*=".gif"]:not(${keyToCss('poster')})
+    ) img:is([srcset*=".gif"], [src*=".gif"], [srcset*=".webp"], [src*=".webp"]):not(${keyToCss('poster')})
   `;
   pageModifications.register(gifImage, processGifs);
 
   const gifBackgroundImage = `
     ${keyToCss(
+      'media', // old activity item: "liked your post", "reblogged your post", "mentioned you in a post"
+      'activityMedia', // new activity item: "replied to your post", "replied to you in a post"
       'communityHeaderImage', // search page tags section header: https://www.tumblr.com/search/gif?v=tag
       'bannerImage', // tagged page sidebar header: https://www.tumblr.com/tagged/gif
-      'tagChicletWrapper' // "trending" / "your tags" timeline carousel entry: https://www.tumblr.com/dashboard/trending, https://www.tumblr.com/dashboard/hubs
-    )}[style*=".gif"]
+      'tagChicletWrapper', // "trending" / "your tags" timeline carousel entry: https://www.tumblr.com/dashboard/trending, https://www.tumblr.com/dashboard/hubs
+      'communityCategoryImage' // tumblr communities browse page entry: https://www.tumblr.com/communities/browse, https://www.tumblr.com/communities/browse/movies
+    )}:is([style*=".gif"], [style*=".webp"])
   `;
   pageModifications.register(gifBackgroundImage, processBackgroundGifs);
 
-  pageModifications.register(
-    `${keyToCss('listTimelineObject')} ${keyToCss('carouselWrapper')} ${keyToCss('postCard')}`, // recommended blog carousel entry: https://www.tumblr.com/tagged/gif
-    processHoverableElements
-  );
+  const hoverableElement = `
+    ${
+      `${keyToCss('listTimelineObject')} ${keyToCss('carouselWrapper')} ${keyToCss('postCard')}` // recommended blog carousel entry
+    },
+    ${
+      `div:has(> a${keyToCss('cover')}):has(${keyToCss('communityCategoryImage')})`// tumblr communities browse page entry: https://www.tumblr.com/communities/browse
+    },
+    ${
+      `${keyToCss('linkCard')} ${keyToCss('withImage')}` // post link element
+    },
+    ${
+      `${keyToCss('gridTimelineObject')}` // likes page or patio grid view post: https://www.tumblr.com/likes
+    }
+  `;
+  pageModifications.register(hoverableElement, processHoverableElements);
 
   pageModifications.register(
     `:is(${postSelector}, ${keyToCss('blockEditorContainer')}) ${keyToCss('rows')}`,
@@ -224,9 +284,12 @@ export const clean = async function () {
     wrapper.replaceWith(...wrapper.children)
   );
 
-  $(`.${canvasClass}`).remove();
-  $(`.${backgroundGifClass}`).removeClass(backgroundGifClass);
   $(`[${labelAttribute}]`).removeAttr(labelAttribute);
   $(`[${pausedPosterAttribute}]`).removeAttr(pausedPosterAttribute);
   $(`[${hoverContainerAttribute}]`).removeAttr(hoverContainerAttribute);
+  $(`[${hoverFixAttribute}]`).removeAttr(hoverFixAttribute);
+  [...document.querySelectorAll(`img[style*="${pausedContentVar}"]`)]
+    .forEach(element => element.style.removeProperty(pausedContentVar));
+  [...document.querySelectorAll(`[style*="${pausedBackgroundImageVar}"]`)]
+    .forEach(element => element.style.removeProperty(pausedBackgroundImageVar));
 };