dotlottie / player-component

https://dotlottie.io
MIT License
206 stars 28 forks source link

Email response regarding fflate #19

Closed 101arrowz closed 1 year ago

101arrowz commented 2 years ago

I'm the maintainer of fflate and received an email from presumably someone who is on your team regarding substituting jszip with fflate, but the sender does not seem to be a valid email address. Here is my response:


Sorry for the late reply! I took a look into the dotLottie format, and it seems that your files are traditionally only a few kilobytes to a few hundreds of kilobytes large (correct me if I'm wrong). In that case, you probably want to use the synchronous, non-streaming zip decompression API provided by fflate.

import { unzipSync, strFromU8 } from 'fflate';
// yourZipFile is a Uint8Array, e.g. from this:
// const yourZipFile = new Uint8Array(await (await fetch('/example.dotLottie')).arrayBuffer());
const data = unzipSync(yourZipFile);
// strFromU8 converts Uint8Array output from fflate into strings that can be parsed
if (data['manifest.json']) {
  const manifest = JSON.parse(strFromU8(data['manifest.json']));
  for (const animName of manifest.animations) {
    const animation = JSON.parse(strFromU8(data[`animations/${animName}.json`]));
    // To get base64 PNG, you should probably use base64-js on the Uint8Arrays for performance and memory
    // However you can also pass strFromU8(data, true) to make a binary string, which btoa understands
    // This is going to cause performance issues for PNGs over 500 kB due to binary strings being wasteful, so be careful
    const base64Png = btoa(strFromU8(data['your-png-file.png'], true));
  }
}

Let me know if this works for you.

Also, I'm familiar with ES6 distribution but in the case of fflate, I've found that utilizing most ES6 features in the source code does not improve bundle size substantially for ES6 consumers but does make the generated ES3 bundle much larger due to ES6->ES3 transpilers not being perfectly effective, so I decided not to provide one.

samuelOsborne commented 1 year ago

Thanks @101arrowz we've started using fflate, cheers!