[10.x] Add a thumbnail setting to open VideoJs inside a Dialog (Modal)

Instead of having this as a seperate formatter, we should use a setting instead. Through #3577815: [10.x] Prepare 10.x branch for Video.js 10 implementation we'll already implement some kind of "thumbnail" behavior, which we'll use to have the following behaviors:
- Open in seperate Tab
- Open in same Tab
- Default behavior (play inline)

We will add another "Open in Modal / Dialog" option, once this gets supported through https://github.com/videojs/v10/discussions/2158. If the maintainers decide to not support this feature out of the box, we'll have to implement it ourselves.

See discuission here: https://git.drupalcode.org/project/drupal/-/merge_requests/16540#note_17...

For an example implementation.

I restored the original implementation I made through #3577815: [10.x] Prepare 10.x branch for Video.js 10 implementation, for the HTMX implementation.

The implementation still needs to be checked and compared with the comment from https://git.drupalcode.org/project/drupal/-/merge_requests/16540#note_17....

But first we should implement the native dialog implementation anyway.

Apparently its now completed: https://github.com/videojs/v10/issues/2384.

OK inside beta31, the dialog is not yet included and beta32 doesn't have a built (yet).

We should prefer "3616068-10.x-videojs-dialog" as the first implementation. The gist of its current implementation is good, but far from being final. I basically almost copy pasted the example from https://videojs.org/docs/framework/html/reference/dialog.

But since media-dialog doesn't exist in the current js library yet, we have to wait a bit more.

Unfortunately, we still can't continue here.....

see https://github.com/videojs/v10/issues/2526#issuecomment-5760545155

The dialog works now, but the presentation is off. @thomas.frobieter, maybe you can do something about that?

@anybody agreed!

I've just tested the implementation.

- In the template, we have a title and a description. Neither of these is configurable in the field formatter. There should be a select for both fields providing media entity fields (and maybe custom tokens, as we have for Photoswipe Dynamic Caption). Furthermore the current default value for title seems to be the media entity title, what is not ment to be public on most sites.
- The thumbnail image is wrapped in a button, which makes no sense
- The modal itself is way too small. Seems to be a CSS calc() issue on the library side:
--media-dialog-max-width: calc(var(--media-spacing) * 72);
- The modal overlay does not cover the entire viewport. This is because the module prints the media dialog component right after the image, while the library seems to require it within the document root. They use position: absolute instead of position: fixed. In my opinion, position:fixed is much more typical and offers more flexibility.
- Clicking on the backdrop of the modal does not close it, which is quite typical - at least as an option
- (The close button is way too large, but this is up to the library and can easily be fixed at theme level)

We can easily fix most of the current flaws in the library in the module so that the feature is useful. We should create issues for Video.js on GitHub to fix them there.

Done, please review: https://git.drupalcode.org/issue/videojs-3616068/-/compare/10.x...3616068-10.x-videojs-dialog-fixes

It has been tested and works perfectly.

The thumbnail image is wrapped in a button, which makes no sense

I have to backtrack on this point—as weird as it is, it's semantically OK. I've added a CSS reset for the button style.

Some unrelated fixes have been made to the background SDC.

I'll create the library issues on Github later.

Alright, that should be it now. @thomasfrobieter might quickly introduce a topbar fix for the modal, otherwise this is good to go if the tests suceed.

Ok, just talked with @thomas.frobieter, the bug only appears for olivero. Not for any other themes, so good to go!