@mvanark/photiflow-display-stream-provider NPM

Display stream provider for Photiflow

This package provides various display stream provider for Photiflow

Installation

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

Usage

First create a provider of you choice

API Provider

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

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

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

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

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

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
};