Add MediaElement Subtitle Support

[ne0rrmatrix]

I would like to add support for subtitles for Android, Windows, Mac Catalyst and IOS. Supporting VTT and SRT file formats initially. Here is an example of what it could look like. I have been working on it for about a week and have some samples of how it might look. It still needs a lot of work.

I am hoping everyone can vote and decide if we want this feature. I have a proposed API if it is approved. I was thinking we could just use: MediaElement.SubtitleUrl as the source for subtitles. This is open for any suggestions. I have yet to have a PR where the names of functions and or classes did not change a lot before it made it into a repo.

Android

Windows

Proposed API

/// <summary>
/// Backing store for the <see cref="SubtitleFont"/> property.
/// </summary>
public static readonly BindableProperty SubtitleFontProperty = BindableProperty.Create(nameof(SubtitleFont), typeof(string), typeof(MediaElement), string.Empty);

/// <summary>
/// Backing store for the <see cref="SubtitleFontSize"/> property.
/// </summary>
public static readonly BindableProperty SubtitleFontSizeProperty = BindableProperty.Create(nameof(SubtitleFontSize), typeof(double), typeof(MediaElement), 16.0);

/// <summary>
/// Backing store for the <see cref="SubtitleUrl"/> property.
/// </summary>
public static readonly BindableProperty SubtitleProperty = BindableProperty.Create(nameof(SubtitleUrl), typeof(string), typeof(MediaElement), string.Empty);

/// <summary>
/// Gets or sets the URL of the subtitle file to display.
/// </summary>
public string SubtitleUrl
{
    get => (string)GetValue(SubtitleProperty);
    set => SetValue(SubtitleProperty, value);
}

/// <summary>
/// Gets or sets the font to use for the subtitle text.
/// </summary>
public string SubtitleFont
{
    get => (string)GetValue(SubtitleFontProperty);
    set => SetValue(SubtitleFontProperty, value);
}

/// <summary>
/// Gets or sets the font size of the subtitle text.
/// </summary>
public double SubtitleFontSize
{
    get => (double)GetValue(SubtitleFontSizeProperty);
    set => SetValue(SubtitleFontSizeProperty, value);
}

[pictos]

How can we change the FontSize of the subtitle? On the last image it looks pretty tiny. And can you update your comment with the API spec?

[ne0rrmatrix]

That is a bug that I have already fixed. The size of the font did not change between the regular player and full screen causing an obvious issue with readability. I changed the font from 16 to 24 and it is a lot more readable. But the change was only applied when in full screen.

Current API

/// <summary>
/// Backing store for the <see cref="SubtitleUrl"/> property.
/// </summary>
public static readonly BindableProperty SubtitleProperty = BindableProperty.Create(nameof(SubtitleUrl), typeof(string), typeof(MediaElement), string.Empty);

/// <summary>
/// Gets or sets the URL of the subtitle file to display.
/// </summary>
public string SubtitleUrl
{
	get => (string)GetValue(SubtitleProperty);
	set => SetValue(SubtitleProperty, value);
}

I am hoping for input on what we want to add to this?
Do we want to adjust font, font size? etc.

[pictos]

Yes, I would love to have the power to adjust the FontSize and make sure they follow the a11y font size that users set on their devices

[ne0rrmatrix]

Updated API

/// <summary>
/// Backing store for the <see cref="SubtitleFont"/> property.
/// </summary>
public static readonly BindableProperty SubtitleFontProperty = BindableProperty.Create(nameof(SubtitleFont), typeof(string), typeof(MediaElement), string.Empty);

/// <summary>
/// Backing store for the <see cref="SubtitleFontSize"/> property.
/// </summary>
public static readonly BindableProperty SubtitleFontSizeProperty = BindableProperty.Create(nameof(SubtitleFontSize), typeof(double), typeof(MediaElement), 16.0);

/// <summary>
/// Backing store for the <see cref="SubtitleUrl"/> property.
/// </summary>
public static readonly BindableProperty SubtitleProperty = BindableProperty.Create(nameof(SubtitleUrl), typeof(string), typeof(MediaElement), string.Empty);

/// <summary>
/// Gets or sets the URL of the subtitle file to display.
/// </summary>
public string SubtitleUrl
{
    get => (string)GetValue(SubtitleProperty);
    set => SetValue(SubtitleProperty, value);
}

/// <summary>
/// Gets or sets the font to use for the subtitle text.
/// </summary>
public string SubtitleFont
{
    get => (string)GetValue(SubtitleFontProperty);
    set => SetValue(SubtitleFontProperty, value);
}

/// <summary>
/// Gets or sets the font size of the subtitle text.
/// </summary>
public double SubtitleFontSize
{
    get => (double)GetValue(SubtitleFontSizeProperty);
    set => SetValue(SubtitleFontSizeProperty, value);
}

[ne0rrmatrix]

IOS subtitle support is now working!

2024-05-09.17-11-43.mp4

[ne0rrmatrix]

Windows, Android, and IOS all now working as expected. Android is dependant on merging #1873
Layout is fully tested on Android. Further layout testing for IOS, Windows, and Mac required. No testing on Mac done yet. Will work on that this coming week.

[MuhammadTalhaahmed]

I'm really very excited and curious for this 'Subtitle' feature, when will we get it in our MAUI APP ? Are we required to use the above API code OR the 'Subtitle' feature will be added in Media_Element Nuget package and will be easy to manage ?

[ne0rrmatrix]

This is a discussion where we talk about features we want in media element. In this case we are discussing subtitles and are trying to create an API for developers to use. Later if approved we will add a PR to repo and create the code that is needed based on the API specification. After it is reviewed by the team and accepted it can be merged. But and this is big thing it needs to go through the whole approval process and then find a sponsor from the team to oversee the process from there.