How to Retrieve a Movie's Official Poster with Reshuffle Open Source

You know the name of your favorite movie, so how cool would it be to be able to retrieve any official movie poster just based on the movie’s title? While this may be a personal fun project for you and your friends, you also might be in a business where retrieving an image based on an associated name may be helpful — let’s say in marketing, you want to call up the product image by just using the product name. With Reshuffle open source integration framework, you can easily do this by setting up an API endpoint to retrieve the image, or as in our example below, the movie poster.

In this example, you’ll see how easy it is to integrate multiple services with Reshuffle, so you don't have to spend valuable development time configuring them. These integrations and workflows are created inside a Reshuffle App. The objects that let you interact with these services are called Connectors.

Let's Build It

This is a two-stage process. The code first uses Reshuffle's Entertainment Identifier Registry (EIDR) connector to resolve the movie name into a standardized movie ID. It then uses the Movies Anywhere API to look up the official movie poster image with the given ID.

See links for full documentation:

• Example Repo
• HTTP Connector
• EIDR Connector
• Movies Anywhere Connector

Let's get started by instantiating a Reshuffle app and the three connectors listed above.

// Initialize the Reshuffle application and connectors
const app = new Reshuffle();
const eidr = new EIDRConnector(app);
const http = new HttpConnector(app);
const ma = new MoviesAnywhereConnector(app);

Using the on() method of the HTTP Connector, we will be listening to an HTTP GET request on the "/" path. Inside Reshuffle, the request is transformed into an event.

http.on({ method: "GET", path: "/" }, async ({ req, res }) => {
  // Get the movie name from the query string
  const name = req.query.name;
  if (typeof name !== "string" || name.trim().length === 0) {
    return res.status(400).send(`Invalid movie name: ${name}`);
  }
  const nm = name.trim();

  // Get the image width from the query string, or default to 400
  const width = req.query.width || 400;
  const wd = typeof width === "string" ? parseInt(width, 10) : width;
  if (typeof wd !== "number" || isNaN(wd) || wd <= 1 || 8192 < wd) {
    return res.status(400).send(`Invalid width: ${wd}`);
  }

Moving forward with a valid movie name, we will use the EIDR connector with its simpleQuery method to resolve the provided name into an EIDR ID.

• For more information regarding the object passed to simpleQuery, please take a look at the readme

  // The following blocks of code will follow directly after the previous, until it reaches the final `});`
  // Lookup the movie name in EIDR. If the movie is found, we get back a unique ID
  const movies = await eidr.simpleQuery({
    name: nm,
    movie: true,
    valid: true,
    StructuralType: "Performance",
  });
  if (movies.length < 1) {
    return res.status(404).send(`Movie not found: ${nm}`);
  }
  const id = movies[0].ID;
  // The movies array may contain multiple objects that reference the same movie, but with a different EIDR ID, we take [0] since they will all point to the same title. 

If the query doesn't find a match with the provided movie name, it will be resolved into an empty array, there is a conditional block here to handle this case.

When the query passes the check above, we move on to where we will use the EIDR ID along with the Movies Anywhere connector. Keep in mind, not all movies are part of the Movies Anywhere service, so some may be resolved into undefined.

  // Lookup the movie ID in Movies Anywhere. Movies Anywhere's title service
  // provides metadata for movies, including a URL for the poster image
  const title = await ma.getTitleByEIDR(id);
  if (!title) {
    return res.status(404).send(`Movie not found: ${nm}`);
  }

Now that we have found the movie with the EIDR ID, we will create a url with the object resolved and return the image in the HTTP response.

  // Fetch the image
  const url = `https:${title.boxart}.jpg?w=${Math.round(wd)}`;
  const rs = await fetch(url);
  if (rs.status !== 200) {
    return res.status(500).send(`Unable to load poster image: ${nm}`);
  }
  // Return the image in the HTTP response
  const blob = await rs.blob();
  return res
    .set({ "Content-Type": blob.type, "Content-Length": blob.size })
    .send(Buffer.from(await blob.arrayBuffer()));

//end
});

Lastly, we need to start the Reshuffle App.

app.start(8000);

Try it out

If you copied the code from the repo, install the example and start the Reshuffle server:

npm install reshuffle-movieposter-example
npm run start

This will start a web server at local port 8000. Then point your browser to the local URL (http://localhost:8000/?name=superman) to see the poster frame.

It should look like this:

Try different movie names, but be aware that not all movies are part of the Movies Anywhere service, so some may not resolve into a poster image.

Let us know what you think

Reshuffle is continually listening to what our developers need and desire. Don’t see a Connector to a service you’d like to integrate? Send a tweet to @ReshuffleHQ to let us know which Connector you’d like us to develop next.