Split a video should be interactive (see #366)

[LeMouj]

Updated the scenario to split a video and modified the expected document list.

Co-authored-by: Enzo MOUGIN enzo.mougin@utt.fr
Co-authored-by: Côme PEYRELONGUE come.peyrelongue@utt.fr

We, Enzo MOUGIN & Côme PEYRELONGUE, hereby grant to Hyperglosae maintainers the right to publish our contribution under the terms of any licenses the Free Software Foundation classifies as Free Software Licenses.

[benel]

Thank you very much for your contribution @LeMouj and @Come-Peyrelongue.
This seems to be very promising.

However, before being merged several changes are necessary...

Concerning the name of the ticket (and then the commits titles), please consider first my 2-months-old comment. Its conclusion is that it is probably a new sub-feature of "Create a comment from a fragment" as described in comment_fragment.feature

As such:

• tickets and implementation commit should be labeled as FEATURE,
• tickets and commits should be named appropriately,
• its scenario should be added to the file above.

The main scenario step should be something like Quand je sélectionne le fragment de vidéo de "00:03:09.000" à "00:03:15.000". This means that you have to put together all the steps you detailed before. This means also that you should not describe the user interface specificities (to be done independently from the mockup). Those two rules were defined in the course about scenarios.

If you have any question or if you need help, please ask.

[benel]

Can you explain why you need this function and how does it work?

[Come-Peyrelongue]

Why stub_youtube_api is needed:

To implement the "Define segment" feature, we use the YouTube IFrame Player API (player.getCurrentTime()) to capture the current playback position. However, in Cypress tests, we cannot control a real YouTube player — the playback time depends on network loading, buffering, and actual video playback, making tests non-deterministic.

stub_youtube_api replaces the real YouTube API with a controlled mock so that tests can simulate precise timecodes without depending on external network or video playback.

How it works:

cy.intercept('GET', 'https://www.youtube.com/iframe_api', { body: ... })

Cypress intercepts the HTTP request for the YouTube IFrame API script and responds with our own JavaScript instead. This mock JavaScript defines a window.YT.Player constructor that:

1. Creates a real iframe in the DOM (so the UI renders normally)
2. Sets data-video-id on it (so VideoComment can target the correct video)
3. Returns a controlled getCurrentTime() that reads from window.__ytMockCurrentTime — a value we set via cy.set_video_time(seconds) during tests
4. Calls onReady after 50ms (simulating the player becoming ready)

This way, the component code (VideoPlayer.jsx) runs its real logic — it calls player.getCurrentTime(), formats the timecode, and injects it into the editor — but with predictable, test-controlled values instead of a real video stream.

Example test flow:

cy.set_video_time(189);           // simulate video at 00:03:09
cy.contains('button', '...').click(); // first click → captures start
cy.set_video_time(195);           // simulate video at 00:03:15  
cy.contains('button', '...').click(); // second click → captures end
// → editor opens with "00:03:09.000 --> 00:03:15.000"

[Come-Peyrelongue]

No additional licenses or API keys are required for this integration.

Here's why:

• YouTube IFrame Player API — We load it via the public script https://www.youtube.com/iframe_api. This API is free to use and does not require an API key (unlike the YouTube Data API v3 which requires a Google Cloud project + key). It is governed by YouTube's Terms of Service, which we comply with since we embed the official player with its branding intact.

• No new dependencies — We did not add any npm package, third-party proxy, or external service. The only external resource is the YouTube script, which was already implicitly loaded before our changes (the app was already embedding YouTube iframes).

• stub_youtube_api (test only) — This is entirely our own code, used only in Cypress tests. It intercepts the YouTube script request and replaces it with a mock. It never runs in production. No license applies.

• player.getVideoData() — This method is available on the YT.Player object. It does not require authentication or an API key. It simply returns metadata (title, author) from the already-loaded video.

In summary: the integration relies solely on YouTube's free, public IFrame Player API with no registration, no credentials, and no additional licensing beyond standard YouTube Terms of Service compliance (which is already satisfied by using the official embed player).