# finetune video performance

import zlib from 'zlib';

// ...

fetch('/api/endpoint')
  .then(response => {
    // Check the headers to see if the response is gzip-compressed
    const contentEncoding = response.headers.get('content-encoding');
    if (contentEncoding === 'gzip') {
      // If it is, create a new stream to decompress the response
      const gunzip = zlib.createGunzip();
      const decompressedResponse = response.body.pipe(gunzip);
      // Use the decompressed response as you normally would
      // ...
    } else {
      // If the response is not gzip-compressed, you can use it directly
      // ...
    }
  });

import zlib from 'zlib';
import { Image } from 'react-konva';

// ...

// Make a request to the API endpoint that returns gzip-compressed responses
fetch('/api/endpoint')
  .then(response => {
    // Check the headers to see if the response is gzip-compressed
    const contentEncoding = response.headers.get('content-encoding');
    if (contentEncoding === 'gzip') {
      // If it is, create a new stream to decompress the response
      const gunzip = zlib.createGunzip();
      const decompressedResponse = response.body.pipe(gunzip);
      // Use the decompressed response to create a new image
      return new Promise((resolve, reject) => {
        const img = new Image();
        img.onload = () => resolve(img);
        img.onerror = reject;
        img.src = URL.createObjectURL(decompressedResponse);
      });
    } else {
      // If the response is not gzip-compressed, create the image directly from the response
      return new Promise((resolve, reject) => {
        const img = new Image();
        img.onload = () => resolve(img);
        img.onerror = reject;
        img.src = URL.createObjectURL(response.body);
      });
    }
  })
  .then(img => {
    // Use the image with the react-konva Image component
    // ...
  });