Lock Screen Controls and Metadata Support for Windows, Android, IOS and Mac Catalyst

[ne0rrmatrix]

• Feature/Proposal

Add Support for Lock Screen Controls and Metadata.

Description of Change

Add Lock Screen Media Controls to Windows, Android, iOS, and Mac Catalyst. Metadata like Title, Artist, and Album art will be displayed for playing media.

Linked Issues

• Fixes MediaElement: To add metadata support to .NET MAUI #1682
• Fixes MediaElement - Lock Screen Player #1667
• Fixes MediaElement album name, song name and album art #1765

PR Checklist

• Has a linked Issue, and the Issue has been approved(bug) or Championed (feature/proposal)
• Has tests (if omitted, state reason in description)
• Has samples (if omitted, state reason in description)
• Rebased on top of main at time of PR
• Changes adhere to coding standard
• Documentation created or updated: Add support for media playback controls and metadata in MediaElement MicrosoftDocs/CommunityToolkit#414

Additional information

Add support for Lock Screen Controls to Windows, Mac, IOS, and Android. Support for adding Metadata in XAML or code behind.

Example usage in XAML:

 <toolkit:MediaElement
     x:Name="MediaElement"
     WidthRequest="{OnIdiom Tablet=410, Default=380}"
     ShouldAutoPlay="True"
     Source="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
     MetaDataArtworkUrl="https://michellevella.com/cdn/shop/products/BeatlesLonelyHearts4UP_1728x.jpg?v=1660582971"
     MetaDataTitle="Big Buck Bunny"
     MetaDataArtist="Blender Foundation"
     SourceType="Audio"
   MediaEnded="OnMediaEnded"
     MediaFailed="OnMediaFailed"
     MediaOpened="OnMediaOpened"
     PositionChanged="OnPositionChanged"
     StateChanged="OnStateChanged"
     SeekCompleted="OnSeekCompleted"/>

Example in code behind:

async void ChangeSourceClicked(Object sender, EventArgs e)
{
	var result = await DisplayActionSheet("Choose a source", "Cancel", null,
		loadOnlineMp4, loadHls, loadLocalResource, resetSource);

	switch (result)
	{
		case loadOnlineMp4:
			MediaElement.MetaDataTitle = "Big Buck Bunny";
			MediaElement.MetaDataArtworkUrl = "https://michellevella.com/cdn/shop/products/BeatlesLonelyHearts4UP_1728x.jpg?v=1660582971";
			MediaElement.MetaDataArtist = "Big Buck Bunny Album";
			MediaElement.SourceType = Primitives.MediaElementSourceType.Audio;
			MediaElement.Source =
				MediaSource.FromUri(
					"https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4");
			return;

		case loadHls:
			MediaElement.MetaDataArtist = "HLS Album";
			MediaElement.MetaDataArtworkUrl = "https://michellevella.com/cdn/shop/products/BeatlesLonelyHearts4UP_1728x.jpg?v=1660582971";
			MediaElement.MetaDataTitle = "HLS Title";
			MediaElement.SourceType = Primitives.MediaElementSourceType.Audio;
			MediaElement.Source
				= MediaSource.FromUri(
					"https://mtoczko.github.io/hls-test-streams/test-gap/playlist.m3u8");
			return;

		case resetSource:
			MediaElement.MetaDataArtworkUrl = string.Empty;
			MediaElement.MetaDataTitle = string.Empty;
			MediaElement.MetaDataArtist = string.Empty;
			MediaElement.SourceType = Primitives.MediaElementSourceType.Unknown;
			MediaElement.Source = null;
			return;

		case loadLocalResource:
			MediaElement.MetaDataArtworkUrl = "https://michellevella.com/cdn/shop/products/BeatlesLonelyHearts4UP_1728x.jpg?v=1660582971";
			MediaElement.MetaDataTitle = "Local Resource Title";
			MediaElement.MetaDataArtist = "Local Resource Album";
			MediaElement.SourceType = Primitives.MediaElementSourceType.Audio;

			if (DeviceInfo.Platform == DevicePlatform.MacCatalyst
				|| DeviceInfo.Platform == DevicePlatform.iOS)
			{
				MediaElement.Source = MediaSource.FromResource("AppleVideo.mp4");
			}
			else if (DeviceInfo.Platform == DevicePlatform.Android)
			{
				MediaElement.Source = MediaSource.FromResource("AndroidVideo.mp4");
			}
			else if (DeviceInfo.Platform == DevicePlatform.WinUI)
			{
				MediaElement.Source = MediaSource.FromResource("WindowsVideo.mp4");
			}
			return;
	}
}

Sample API

/// <summary>
/// Gets or sets the Title of the media.
/// This is a bindable property.
/// </summary>
public string MetaDataTitle
{
	get => (string)GetValue(MetaDataTitleProperty);
	set => SetValue(MetaDataTitleProperty, value);
}

/// <summary>
/// Gets or sets the Artist of the media.
/// This is a bindable property.
/// </summary>
public string MetaDataArtist
{
	get => (string)GetValue(MetaDataArtistProperty);
	set => SetValue(MetaDataArtistProperty, value);
}

/// <summary>
/// Gets or sets the Artwork Image Url of the media.
/// This is a bindable property.
/// </summary>
public string MetaDataArtworkUrl
{
	get => (string)GetValue(MetaDataArtworkUrlProperty);
	set => SetValue(MetaDataArtworkUrlProperty, value);
}

/// <summary>
/// Gets or sets the source type of the media.
/// This is a bindable property.
/// </summary>
public MediaElementSourceType SourceType
{
	get => (MediaElementSourceType)GetValue(MediaElementSourceTypeProperty);
	set => SetValue(MediaElementSourceTypeProperty, value);
}

Android and Windows

iOS

Mac Catalyst

[pictos]

@ne0rrmatrix, I took the liberty of taking this and moving forward, so I refactor all the code related to the async tasks, that way I hope to unblock you and this PR. Let me know if you've any question on what I did, I'll be more than happy to provide further context.

Not related to this PR, but while working on it I just saw that ExoPlayer is obsolete, they moved it to AndroidX lib, more info here, should we look and migrate to this lib?

[ne0rrmatrix]

@ne0rrmatrix, I took the liberty of taking this and moving forward, so I refactor all the code related to the async tasks, that way I hope to unblock you and this PR. Let me know if you've any question on what I did, I'll be more than happy to provide further context.

Not related to this PR, but while working on it I just saw that ExoPlayer is obsolete, they moved it to AndroidX lib, more info here, should we look and migrate to this lib?

@pictos thank you for fixing all the code. I appreciate it. I will look and try to remember the pattern for async await that you have implemented. You did great! BTW we are currently blocked for updating to AndroidX as the bindings are not out yet. But there is an open PR with regards to this that should start the process of migration once the bindings are available. Or at least I saw a team member had started a discussion about it with regards to media element.

[pictos]

LGTM! Awaiting for other reviewers

[ne0rrmatrix]

Before we pull the trigger does anyone want to update the doc's with how to add metadata? I can do that or does someone who is good with Markdown want to do it?

[ne0rrmatrix]

At a minimum the docs need to be updated for android manifest changes. plist changes for mac and iOS needs to be done too. Updating the docs for how to use and set the metadata would be useful too.

[ne0rrmatrix]

Updated docs. Link to PR: MicrosoftDocs/CommunityToolkit#414