npm package: @mvanark/photiflow-display-stream-provider
Description: Display stream provider for Photiflow
Author: Martijn van Ark
Latest version: 0.4.2

# Display stream provider for Photiflow

This package provides various display stream provider for Photiflow

## Installation

```bash
yarn add @mvanark/photiflow-display-stream-provider
```

## Usage

First create a provider of you choice

### API Provider

```ts
import { APIPhotoStreamProvider } from "@mvanark/photiflow-display-stream-provider";

const streamProvider = new APIPhotoStreamProvider({
  endPoint: process.env.API_URL || "",
  secret: process.env.API_SECRET || "",
  socketUrl: process.env.SOCKET_URL || "",
});
```

### JSON Provider

```ts
import { JSONPhotoStreamProvider } from "@mvanark/photiflow-display-stream-provider";

const streamProvider = new JSONPhotoStreamProvider({
  jsonUrl: process.env.JSON_URL || "",
});
```

Next add some optional listers to see what the stream is up to. and to know if it is ready for processing or there were some errors you might want to handle

```ts
streamProvider.addImageLoadListener((firstLoad, error, queue, state) => {
  // After first load you can start requesting images from the queue
  // Subsequent / more image loads for the same stream will have the firstLoad flag set to false
  if (state === "non-existing") {
    noSuchStream(); // stream does not exist
  } else if (queue.length === 0) {
    noImages(); // no images were loaded for the stream
  } else if (firstLoad) {
    startProcessing(); // start processing
  }
});
```

Once you have that all setup you can start the actual stream by providing the StreamId and some config values on how too handle the stream.

### API Stream

```ts
streamProvider.startStream(process.env.STREAM_ID || "", {
  targetAmount: 25, // number of photos to try and keep in the stack / queue
  limit: 50, // number of images to load per request
  sortOrder: "Descending", // "Ascending" | "Descending"
  resultType: "processed", // "processed" | "raw"
  targetSize: 1024, // target size for processed images
  preloadPhotos: true, // preload images in the browser
  preloadAmount: 10, // number of images to preload
  debug: false, // enable debug logging
});
```

### JSON Stream

for static JSON data you can use an empty StreamId because no identification is needed. also limit and targetAmount are ignored. just make sure limit is greater than targetAmount

```ts
streamProvider.startStream("", {
  targetAmount: 0, // que will auto rotate the loaded JSON
  limit: 1000, // ignored, just make it some large number
  sortOrder: "Descending", // "Ascending" | "Descending"
  resultType: "processed", // "processed" | "raw"
  targetSize: 1024, // target size for processed images
  preloadPhotos: true, // preload images in the browser
  preloadAmount: 10, // number of images to preload
  debug: false, // enable debug logging
});
```

once a stream is started you will receive its events. After firstload was indicated you can start requesting images from the queue

```ts
const startProcessing = () => {
  const { images, cdnUrl } = streamProvider.getNextImages(
    1, // number of images to return
    "processed", // "processed" | "raw" result type
    "forward" // "forward" | "backward" direction
  );

  displayProcessedImages(images, cdnUrl); // handle your new image(s) any way you want

  setTimeout(startProcessing, 4000); // get next image(s) after 4 seconds
};
```

## License

MIT

## Author

[Martijn van Ark](https://github.com/MartijnVanArk)