[BUG] No artwork shown in-app on MediaElement using meta data

[jfversluis]

Is there an existing issue for this?

• I have searched the existing issues

Did you read the "Reporting a bug" section on Contributing file?

• I have read the "Reporting a bug" section on Contributing file: https://github.com/CommunityToolkit/Maui/blob/main/CONTRIBUTING.md#reporting-a-bug

Current Behavior

Its not really a bug but also not really a new feature? 😅

Using the new meta data properties on the MediaElement they show up wonderfully in the control centers and lock screens etc. but there is some inconsistency now with how its shown inside the app.

On Android, namely the artwork is shown on the MediaElement instance when there is no video to show, for example when there is only audio.

But on iOS, macOS and Windows, it will not show. For Windows you just see nothing and for iOS & macOS you see the QuickTime logo (which I personally really hate).

I have been poking into showing the artwork for iOS on the MediaElement itself, but its hard to get it 100% right. I have been able to add the image and center it, however, you can still see the QuickTime logo underneath it. So I tried adding something artistic, like adding a blurred version of that same image behind the actual image, but I can't get that to have the right dimensions while also keeping in mind the memory usage here. You can see my hacky code here: https://github.com/CommunityToolkit/Maui/tree/dev/jfversluis/metadata-mediaelement

On Windows we can fix it relatively easily by doing: mediaPlayerElement.PosterSource = new BitmapImage(new Uri(mediaElement.MetadataArtworkUrl));

Expected Behavior

MediaElement shows the artwork on the actual control inside the app when there is no visual media to show and the artwork meta data value is set.

Steps To Reproduce

1. Open Toolkit sample app code
2. Go to MediaElement sample page
3. Change source to be an audio only source
4. Run the app on Android
5. Observe the artwork being shown (on the MediaElement control)
6. Run the app on any other platform
7. Observe the artwork not being shown (on the MediaElement control)

Link to public reproduction project repository

https://github.com/CommunityToolkit/Maui

Environment

- .NET MAUI CommunityToolkit MediaElement: 4.0.0
- OS: Not important
- .NET MAUI: Not important

Anything else?

I also talk about this in my video and you can see it in action.