bug: headers don't respect 'reduce motion'

[asleepyskye]

when the 'reduced motion' accessibility option is on, and the user header or user avatar is an animated image, Discord changes the image source to a static version (seemingly via the Discord CDN) and back to the animated version on hover.
this does not happen with the patched popouts/profiles

it's fairly easy to get the user's accessibility options
const AccessibilityStore = BdApi.Webpack.getModule(BdApi.Webpack.Filters.byStoreName('AccessibilityStore'));

but:

• we can't rely on the avatar/header URL to have a static version available as not all avatars/headers are from the PK/Discord CDN

[ariagivens]

Looks like the best way to freeze an animated image is to write it to a canvas then get the image out of the canvas.

[asleepyskye]

the best way we've found so far is this janky mess which just updates the banner if it is animated (but as a result causes a few frames of the gif to play anyways):

export async function freezeIfAnimated(url) {
  let blobURL;
  const response = await BdApi.Net.fetch(url, {
    method: 'GET'
  });
  const type = response.headers.get('content-type');
  const data = await response.arrayBuffer();
  const decoder = new ImageDecoder({data: data, type:type});
  await decoder.tracks.ready;
  const frames = decoder.tracks.selectedTrack.frameCount;
  if(frames > 1){
    const decoded = await decoder.decode();
    const frame = decoded.image;
    let canvas = document.createElement('canvas');
    canvas.width = frame.displayWidth;
    canvas.height = frame.displayHeight;
    let ctx = canvas.getContext("2d");
    ctx.drawImage(frame, 0, 0);
    blobURL = new Promise((resolve, reject) => canvas.toBlob((blob) => {
      if(blob) resolve(URL.createObjectURL(blob));
      else reject();
    }));
  }
  decoder.close();
  return{
    animated: (frames > 1),
    blobURL: (frames > 1) ? await blobURL : undefined
  };
}

export async function updateBannerIfAnim(displayProfile){
  try{
    const bannerElement = document.querySelector('[id*="popout_"] [class*="banner_"], [class*="fullSize_"] [class*="banner_"]');
    if(!bannerElement) return;
    if(bannerElement.bannerUpdated) return;
    bannerElement.bannerUpdated = true;

    let frozen = displayProfile.banner;
    const attemptFreeze = await freezeIfAnimated(frozen);
    if(attemptFreeze.animated) frozen = attemptFreeze.blobURL;
    bannerElement.style.backgroundImage = `url("${frozen}")`;
  }catch(error){
    console.error("[PLURALCHUM] error while updating banner:", error);
  }
}

it's a pain because to check if the banner is animated, we have to request it first -- which means async functions

i think for now it's probably just best to add a toggle for displaying banners in the profile that defaults to off if the user has reduced motion on (maybe display some sort of popup/warning?)
(or even just leave this as a known bug for now)

we also could just cache static versions of animated banners, but that'd be more new code that should be written after rewriting the profiles so they're properly split into system/member (which we are still working on)

(we could also be missing something obvious here though)

EDIT:
we could also check if the profile has an animated banner when grabbing the profile in the first place, but that would just add complexity there
(and add a whole bunch of potential HTTP requests)