MediaApplication constraining extensions based on the first instantiated media field

[automatedChaos]

Describe the bug

When adding multiple content items that each contain a media field to a flow part only the last media field's preferences are applied to all media fields. This is particularly inconvenient if the last media field has format preferences such as being constrained to only video formats. All of the other media fields will then also limit the user to selecting video.

To Reproduce

Steps to reproduce the behavior Using the blog example theme:

1. Create a new 'Video' Content Item with a media field restricted to video formats
   Content Item:
   
   Media Field:
   

2. Add a new Page to the blog

3. Add a Video Content Item to the Page flow part

4. Add an Image Content Item to the Page flow part

5. Add a video to the video content item

6. Attempt to add an image to the Image content item but the media field for the image Content Item will be constrained by the video media field preferences

Expected behavior

It was expected that the image media field would accept any file to upload to the media library and image files in the media library would be visible to select. This is not the case and instead, all that is visible are video files.

Screenshots

Media library when the Video Content Item is present on the page

Media library when the Video Content Item has been deleted and the page refreshed.

It looks like the MediaApplication Vue app is a singleton and initialised once for the first media field. The mediaApplicationUrl is then never updated again so the listed files are always the same. I am happy to spend some time working out a fix if it is agreed that I am heading in the right direction.

[Skrypt]

To be honest. I'm refactoring the Media gallery to Vue 3 right now in a PR. This will probably change the way we initialize the Media Gallery entirely. I would rather invest time there than on the actual one.

[cbadger-montecitobank]

This bug is also impacting an application I'm working on as well. In my case, I have a single content item with two media fields (one for picking a PDF, the other a thumbnail) and the allowed extensions on the first media field are being applied to both. Problematic since these media fields need the user to pick two entirely different types of media (document vs. image).

[Piedone]

Some more context: #16440