Fix aspect ratio video box size in Safari

[ferishili]

This PR fixes #1382

Problem

The problem is simply the lack of support in Safari that it could not recognize and allocate height based on aspect ratio.
The reason behind it, is because Safari support for aspect ratio was introduced in v15, and it is far behind the other browsers.

Solution

In order to tackle that, this PR just introduces a wrapper around the React video player, by allowing it to have the height of 100% set for each video! That means now the height is not more a burden on browser to calculate based on aspect ratio!
The wrapper on the other hand is responsible to occupy the width and height designed for this section and let the video just take up the space it needs!

NOTE: it not only works for dual video, but the single video is covered too!

To test

• you would need to have Safari to see the difference!
• patch this PR (locally, if you will)
• npm start (locally, if you will)
• Make sure you test it with single and dual videos in cutting page!

[github-actions]

This pull request is deployed at test.editor.opencast.org/1383/2024-06-10_08-46-54/ .
It might take a few minutes for it to become available.

[Arnei]

And now I'm gonna be the mean person that reminds everyone that we technically also support more than two videos.

While three videos also looks good, it looks different from two videos in that the videos are now spaced out instead of grouped up in the center. I think it would be preferrable if the three videos were also grouped up in the center. What do you think?

[ferishili]

Well, good to know that more than 2 videos are also supported, let me fix that.
And you are right, it is better to make them grouped up in the center!

[github-actions]

This pull request is deployed at test.editor.opencast.org/1383/2024-06-10_11-02-10/ .
It might take a few minutes for it to become available.

[github-actions]

This pull request is deployed at test.editor.opencast.org/1383/2024-06-10_11-08-43/ .
It might take a few minutes for it to become available.

[oas777]

Late to the game, but this works for me, Safari shows the same size Chrome and Firefox display. Thanks, Farbod!

[ferishili]

Great, with my pleasure.