feat(watchlist): display media from external API as a DiscoverSliderType

[dohnutt]

Description

Defines a new DiscoverSliderType named ExternalWatchlistSlider, which pulls TMDB IDs from a given external API and displays them in a slider view, very similar to how Overseerr displays your Plex Watchlist.

I'm pretty inexperienced with React so I leaned heavily on existing conventions within the project—namely the PlexWatchlistSlider. This implementation displays the first 20 results from your external API (in my example, a scraped Google Watchlist from a personal project, but ideally it would be able to display the full results of the API in a paginated/infinite scroll view similar to the Plex Watchlist.

The challenges here, as far as I can tell, are:

• Creating a ListView route per slider—though a way around this is to have one route with parameters passed to it (/discover/external-watchlist?apiUrl=http://example.com/api&pageParam=p)
• As subtly referenced in the above bullet, you'd need to somehow define how to paginate the API. Is the URL param p=X or page=X, or perhaps something else?
• How would you map fields from the external API to a WatchlistItem[]?

Perhaps these challenges could be out of scope of this feature request and it could simply be a DiscoverSliderType. This could especially work if it were paired with a linkUrl property so as to link to your external list rather than try to build a frontend into Overseerr—but of course then you lose the request functionality on the rest of your external list.

I am very green to contributing to open source, very green to React, and more generally comfortable with HTML and CSS than with complex JS so please feel free to tear it apart! If you've read this far, thank you for your time ❤️

Screenshot (if UI-related)

External Watchlist slider being added

External Watchlist slider in the discover edit view

External Watchlist slider on the discover page

To-Dos

• Successful build yarn build
• Translation keys yarn i18n:extract
• Database migration (if required)

Issues Fixed or Closed

N/A

[dohnutt]

I figured out the standalone page fed by the external API. You can see here dohnutt/overseerr@e121845

The page, at /discover/externalwatchlist, accepts a couple URL parameters so that the page can be built on the fly. For example, http://localhost:5055/discover/externalwatchlist?apiUrl=http:example.com/api&title=Google%20Watchlist

could return this page