Video Recommendation Page

[lfaucon]

Context:
One of the most important piece of Tournesol is its video recommendation page. Tournesol's API returns lists of video sorted by the multiple rating criterias.

The page would have principally two components: 1. The list of video using Tournesol's VideoCard component; 2. The collapsible configuration panel allowing to configure the search preference.

Notes:

• The video recommendation API endpoint is still a work in progress (tournesol-backend PR 36). Most of the work on this ticket should be first done without it, probably with a a mock like:

const getRecommendationsFromAPI = (searchOptions) => {
    // TODO use API endpoint instead
    return [
        { ...video_1_metadata },
        { ...video_2_metadata },
        { ...video_3_metadata },
    ]
}

we will only afterwards replace the mock function with the proper API call once it is available

• Visual guide for these components can be found on Figma. ⚠️ The search configurations on the Figma mockup are not exactly what we want. For this first iteration, I would recommend only using date and language.

• The same Slider components can be used as the one from my current work-in-progress branch: reboot-patch-comparisons

Screenshots:

Configuration collapsed:

Configuration extended:

Details:

• A new component for the recommendation configuration. It can be collapsed (best using Material-UI Collapse).
• A new component for a list of video cards receiving the list of video metadata as props
• A new page at the url /recommendations/ that displays the configuration and the recommendation list and also handles the API connection logic (see notes above)
• The /recommendations/ url can also be used with GET parameters to configure the API call (for example: /recommendations/?search=Vaccines&date=...&reliability=100)
• Using the search bar in the top bar brings to the page /recommendations/?search={USER_INPUT}