[front] feat: display unavailable video message on comparison page for unavaible video

[GresilleSiffle]

related to #1070

---

This PR attempts to fix the conflicts between #1426 and the branch main.

@OoIwazaruoO I've imported all your code as-is here, you can continue on this branch.

to-do

• simplify the introduced complexity if possible
• hunt bugs

[GresilleSiffle]

Hello @tournesol-app/maintainers

I've reviewed those changes and I'd like your input before going further.

(1) about the usage setTimeout to modify the states

The function handleChange and the useEffect hook, responsible of asking for new videos when an unavailable one is returned by the Auto button, use the setTimeout to set a state after a certain delay. I don't know if it's a common practice or something that should be avoided. What do you think @amatissart and @lfaucon ?

Regarding the useEffect, the timeout is used to enable the access again to the function getVideoForComparison, previously blocked by the setLoading(true).

See:

tournesol/frontend/src/features/entity_selector/EntitySelector.tsx

Line 246 in ab7845d

setLoading(true);

(2) about the auto-load feature

When opening a comparison link, the EntitySelectors will automatically replace the unavailable videos by available ones. As a result, opening or sharing a previously made comparison involving unavailable entities redirects to a different comparison. It's not possible anymore to see or edit those comparisons.

In my opinion this is a small problem, but a problem still: redirecting users to an unexpected place, and preventing them to edit their comparisons could be a source of frustration. This is something I'd like to avoid as much as possible in the UX: unexpected behaviours.

Propositions:

• allow the users to disable the auto-load feature in the settings (out of scope)
• allow the users to see and update their own comparisons even if the auto-load feature is enabled

(3) about the getVideoForComparison

We currently call a non-generic function in a supposedly generic effect.

As we don't have a generic getEntityForComparison, we could bypass this feature for non-video entities.

The feedback are more than welcome on this : )

[amatissart]

The behavior on this branch has a few problems:

• it's not possible to access a past comparison related to an unavailable video. The video is automatically replaced with another video without any explanation, which is very confusing for the user.
• when selecting an unavailable video manually in one of the selectors, I can see the message "Only available videos can be compared". However it's still possible to submit the comparison.

But more importantly, I'm not confident with how the EntitySelector uses setTimeout in multiple places . It's not clear what is the problem they are supposed to solve, and if they are actually fixed especially when some requests would be slower than expected.

This problem seems to arise because the video availability is achieved independently from the existing requests to the API. This creates a lot of potential race conditions.
I think it could make sense to move the state related to the selected entities in a new dedicated state/context, in order to reduce the complexity of EntitySelector and define a single validation flow, to check the video availability, fetch the contributor rating, etc.

[amatissart]

After discussion, let's remove the "autoReload" feature for now.

We can allow unavailable videos to be compared (or their past comparisons to be modified). The message used on the entity selector should be modified to clarify that.

cc @OoIwazaruoO

[GresilleSiffle]

I can't approve a pull request I opened myself, but the code looks good to me 👍

It's far more simple now : ) @amatissart do you want to have a final look before approving?

Next step

We now have a small display bug making the duration not easy to read when the entities are not available (see the bottom right corner of the capture):

edit fixed by 1d7b731

[amatissart]

LGTM. Thanks for the simplification @OoIwazaruoO @GresilleSiffle !