Thumbnail Helper v2

[stephenwf]

A work in progress implementation of the new thumbnail "try" helper #22

Some details in the tests:

const loader = createImageServiceStore();
const store = createImageServiceTryStore({
  loader: loader.store,
  events: mitt(),
  imageService: dlcs as ImageService
});

store.getState().try({ minWidth: 100000, height: 267 });
store.getState().try({ width: 400, height: 267 });
store.getState().try({ width: 200, height: 133 });
store.getState().try({ width: 100, height: 67 });

const image = store.getState().image();
// ^ "https://dlc.services/thumbs/7/18/9a4356aa-2953-4ce8-9b94-ec8b10bf7921/full/400,/0/default.jpg"

Currently a bare store at the moment, but the nicer interface will be built on top.

Still to do:

• Async methods and waiting for services
• Testing images (HEAD requests)
• Validating CORS as a requirement
• Cropping, rotating testing
• Level0 image service validation

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

[stephenwf]

One of the things I'm realising - if there is a level2 image service, you can essentially request any image size you want - however this library should make it easy to find close-enough options first and then request that.

It should be cache friendly and prioritise sizes. The issue at the moment is the "options" where you specify wether you want a potentially unsafe direct resize from the server is global to all try() requests. I think I'll need to move that in.

const thumbnail = imageService(NLS_IMAGE_SERVICE_1)
  // We say, we never want to go above 1024x1024
  .constrain({ maxWidth: 1024, maxHeight: 1024 })
  // We also say that we can request unsafe sizes
  .options({ unsafe: false })
  // Check if there is a predefined size above 512
  .try({ minWidth: 512, minHeight: 512 })
  // Otherwise try 256
  .try({ width: 256, height: 256 })
  .try({ width: 100, height: 100 });

So where we have .options({ unsafe: false }) that's global.

Instead it could be:

const thumbnail = imageService(NLS_IMAGE_SERVICE_1)
  // We say, we never want to go above 1024x1024
  .constrain({ maxWidth: 1024, maxHeight: 1024 })
  // We also say that we can request unsafe sizes
  .options({ unsafe: false })
  // Check if there is a predefined size above 512
  .try({ minWidth: 512, minHeight: 512 })
  // Then try an unsafe 512 request  <---v--- here
  .try({ width: 512, width: 512, unsafe: true })
  // Otherwise try 256 (back to safe)
  .try({ width: 256, height: 256 })
  .try({ width: 100, height: 100 });

[stephenwf]

This might be a design issue - and the other options should also be part of the try

interface TryOptions {
  // Other options?
  unsafe: boolean;
  sizePriority:
    | "largest-size"
    | "closest-size"
    | "smallest-size"
    | "largest-possible"
    | "smallest-possible"
    | "exact";
  cors: boolean;
  headers: Record<string, string>;
  stitch: boolean; // @todo future feature.
  rounding: "ceil" | "floor" | "round";
  placeholder: string | null;
}

So you could build fairly specific chains to follow.