[front] feat: add a comparison UI on the home page

[lfaucon]

I'm quite happy about the simplicity of the implementation :) There is some duplicated code, but I think that making it DRY would be overdoing it and make things more complicated overall.

TODO:

• [ ] Discuss layout & UX with the team
• [ ] Make it worked for not-logged in users
• [ ] Add texts & translations
• [ ] Agree on weekly comparison selection mecanism
• [ ] Implement initialization of video selection

[aidanjungo]

1. When I do comparison proposed on the home page and then come back to the home page, I did not see that I already did this comparison. I think we should either:

   • Have the slider at the correct position (corresponding to my vote)
   • Have a message saying that I already did this comparison

2. If I move the slider then load a new video the slider is not reset to its initial position.

[GresilleSiffle]

I have some questions regarding the comparison on the home page, can you tell me what do you think @aidanjungo @amatissart, @lfaucon? Thanks you in advance :)

questions

1. How should the Compare the videos button behaves for non-logger users?

There are two types of non-logged users: returning users that have more than 4 comparisons, and newcomers that haven't completed the tutorial yet. The later raises a little problem.

Our strategy until now was to display on the home page a single call-to-action button named Start. By clicking on Start all users are always redirected to the tutorial. The component then detects if the users have more than 4 comparisons to display a regular comparison UI instead of the tutorial if needed.

problem (a) If the new Compare the videos button always redirects to the comparison UI, we make the newcomers, and the logged users with less than 4 skip the tutorial. I think we don't want this.

A possible fix could be to always include the URL parameter series=true in the Compare the videos button, exactly as we do for the Start button.

I think it's important to synchronize the behaviour of these two buttons. By including series=true we make sure that no one will skip the tutorial. This fixes part of the problem.

problem (b) The tutorial has been made to suggest only short videos to help the onboarding of newcomers. Should we always display short videos on the home page comparison instead of weekly recommendations?

A possible fix could be to display weekly recommendations for logged users, and "tutorial videos" for non-logged users. This is easy to do, and allow the newcomers to always be suggested "tutorial videos". The day we will change how the tutorial behaves, the home page comparison will be automatically updated if it uses the same functions to retrieve the "tutorial videos".

2. What should be displayed on the home page when a user click on Compare the videos then previous?

For a first step I think it's acceptable to completely refresh the comparison. Each time the page is loaded the comparison is refreshed. We could change this in the future.

3. Are we still OK to display a small panel next to the comparison as we decided on Miro?

4. Should we remove the Auto buttons?

As we already made an attempt to add the comparison UI on the home page (see #327), we have already addressed some design considerations.

In my opinion the home page comparison should be as simple as possible, so I'm in favor of removing any kind of button like Auto, video selectors, etc. Removing these buttons also remove a lot of design issues :))

[GresilleSiffle]

Here is the path I'm following:

the comparison

• [x] the comparison is a tutorial comparison (videos' duration < 5 minutes, etc.).
• [x] completely simplify the interface by also hiding the auto button
• [x] the selected score on the home page should be carry over the redirection to the comparison page
  • I created a "pending rating" API to make this feature re-usable
  • [x] make it easy to delete all pending ratings at once
  • [x] auto-clean pending ratings during any comparison when relevant

The home page comparison section suggests "tutorial videos" for both logged and non-logged users. If we want logged users to be suggested videos from a different pool (longer videos, recent videos, comparison of the week, etc.) it's possible.

Their rating is saved on the local storage in order to be displayed on the comparison page after they have clicked on submit. This pending rating is automatically cleared when they move the corresponding slider on the comparison page.

The pending ratings API use a single local storage key, allowing us to easily add a "clear my pending ratings" button in the settings.

the texts

• [x] display, and translate the help text
• [x] display the comparison metric
  • [x] make it pretty
  • [x] make the numbers more friendly with .toLocaleString(i18n.resolvedLanguage)
• [x] increase locally the size of the comparison? (it currently has a max width making it not that nice on large screen).

I took the time update the display of the current metrics to make them match the users locale. I also reworked how the usage stats section works, to be able to retrieve the stats from the API only once, even if several components use these values.

logged-in users

• [x] it redirects to the tutorial when the user is a newcomer (logged && n_comp < 4)
• [x] it redirects to the regular comparison UI instead
• [x] if the user is logged-in, the comparison must be one he/she never made

non logged-in users

• [x] non logged-in users should be able to see the comparison (see (a))
• [x] non logged-in users should be able to use the slider

errors

• [x] correctly handle API errors when retrieving the videos pool

When an API error occurs during the video loading, a warning is displayed under the comparison. I didn't use the regular enqueue snackbar hook here on purpose: the home page will be long, and a lot of components can trigger warnings and errors. To avoid flooding the users with error messages (that stay only few seconds on the screen), I choose to display the error next to the failing component. This should ease debugging and error reporting.

comparison path

• [x] I'm logged, a click on the submit button redirects to the correct comparison page
• [x] I'm not logged, a click on the submit button redirects to the login UI
  • [x] After the login, I'm redirected to the correct comparison page
• [x] I'm not logged, a click on the submit button redirects to the login UI
  • [x] I don't have an account, I use the signup form
    • [x] After the email activation I'm redirected to the tutorial
      • [x] OK like this for the first implementation But the comparison is not the one I expected

tech

(a) The <EntitySelector> doesn't display the <EntityCard> when the user has no contributor rating associated with the entity yet. As all anonymous users have no rating, the current comparison section doesn't work for them. A possible fix could be to make the <EntitySelector> aware of the logged-in state of the user and make it behave accordingly.

• fixed by https://github.com/tournesol-app/tournesol/pull/1128/commits/1f08040d18e6a0a230ccc7972f866802ee299085

preview

900 px resolution with an error message