Add Subtitle Support for MediaElement

samples/CommunityToolkit.Maui.Sample/MauiProgram.cs

@@ -41,6 +41,8 @@
 using Microsoft.Maui.Platform;
 #endif
 
+[assembly: ExportFont("Poppins-Regular.ttf", Alias = "Poppins")]
+[assembly: ExportFont("PlaywriteSK-Regular.ttf", Alias = "PlaywriteSK")]
 [assembly: XamlCompilation(XamlCompilationOptions.Compile)]
 
 namespace CommunityToolkit.Maui.Sample;

samples/CommunityToolkit.Maui.Sample/Pages/Views/MediaElement/MediaElementPage.xaml

@@ -31,6 +31,7 @@
             <toolkit:MediaElement
                 x:Name="MediaElement"
                 ShouldAutoPlay="True"
+                SubtitleUrl=""
                 Source="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
                 MetadataArtworkUrl="https://lh3.googleusercontent.com/pw/AP1GczNRrebWCJvfdIau1EbsyyYiwAfwHS0JXjbioXvHqEwYIIdCzuLodQCZmA57GADIo5iB3yMMx3t_vsefbfoHwSg0jfUjIXaI83xpiih6d-oT7qD_slR0VgNtfAwJhDBU09kS5V2T5ZML-WWZn8IrjD4J-g=w1792-h1024-s-no-gm"
                 MetadataTitle="Big Buck Bunny"

samples/CommunityToolkit.Maui.Sample/Pages/Views/MediaElement/MediaElementPage.xaml.cs

@@ -3,7 +3,12 @@
 using CommunityToolkit.Maui.Sample.ViewModels.Views;
 using CommunityToolkit.Maui.Views;
 using Microsoft.Extensions.Logging;
+using CommunityToolkit.Maui.Sample.Resources.Fonts;
 using LayoutAlignment = Microsoft.Maui.Primitives.LayoutAlignment;
+using System.Globalization;
+using System.Text.RegularExpressions;
+using System.Text;
+using CommunityToolkit.Maui.Core;
 
 namespace CommunityToolkit.Maui.Sample.Pages.Views;
 
@@ -15,6 +20,7 @@ public partial class MediaElementPage : BasePage<MediaElementViewModel>
 	const string loadHls = "Load HTTP Live Stream (HLS)";
 	const string loadLocalResource = "Load Local Resource";
 	const string resetSource = "Reset Source to null";
+	const string loadSubTitles = "Load sample with Subtitles";
 	const string loadMusic = "Load Music";
 
 	const string buckBunnyMp4Url = "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4";
@@ -161,14 +167,15 @@ void Button_Clicked(object? sender, EventArgs e)
 	async void ChangeSourceClicked(Object sender, EventArgs e)
 	{
 		var result = await DisplayActionSheet("Choose a source", "Cancel", null,
-			loadOnlineMp4, loadHls, loadLocalResource, resetSource, loadMusic);
+			loadOnlineMp4, loadHls, loadLocalResource, resetSource, loadSubTitles, loadMusic);
 
 		switch (result)
 		{
 			case loadOnlineMp4:
 				MediaElement.MetadataTitle = "Big Buck Bunny";
 				MediaElement.MetadataArtworkUrl = botImageUrl;
 				MediaElement.MetadataArtist = "Big Buck Bunny Album";
+				MediaElement.SubtitleUrl = string.Empty;
 				MediaElement.Source =
 					MediaSource.FromUri(buckBunnyMp4Url);
 				return;
@@ -177,21 +184,23 @@ async void ChangeSourceClicked(Object sender, EventArgs e)
 				MediaElement.MetadataArtist = "HLS Album";
 				MediaElement.MetadataArtworkUrl = botImageUrl;
 				MediaElement.MetadataTitle = "HLS Title";
+				MediaElement.SubtitleUrl = string.Empty;
 				MediaElement.Source = MediaSource.FromUri(hlsStreamTestUrl);
 				return;
 
 			case resetSource:
 				MediaElement.MetadataArtworkUrl = string.Empty;
 				MediaElement.MetadataTitle = string.Empty;
 				MediaElement.MetadataArtist = string.Empty;
+				MediaElement.SubtitleUrl = string.Empty;
 				MediaElement.Source = null;
 				return;
 
 			case loadLocalResource:
 				MediaElement.MetadataArtworkUrl = botImageUrl;
 				MediaElement.MetadataTitle = "Local Resource Title";
 				MediaElement.MetadataArtist = "Local Resource Album";
-
+				MediaElement.SubtitleUrl = string.Empty;
 				if (DeviceInfo.Platform == DevicePlatform.MacCatalyst
 					|| DeviceInfo.Platform == DevicePlatform.iOS)
 				{
@@ -207,6 +216,24 @@ async void ChangeSourceClicked(Object sender, EventArgs e)
 				}
 				return;
 
+			case loadSubTitles:
+				SrtParser srtParser = new();
+				MediaElement.CustomSubtitleParser = srtParser;
+				if (DevicePlatform.iOS == DeviceInfo.Platform || DevicePlatform.macOS == DeviceInfo.Platform)
+				{
+					MediaElement.SubtitleFont = @"PlaywriteSK-Regular.ttf#Playwrite SK";
+					MediaElement.SubtitleFontSize = 12;
+				}
+				else
+				{
+					MediaElement.SubtitleFont = @"Poppins-Regular.ttf#Poppins";
+					MediaElement.SubtitleFontSize = 16;
+				}
+
+				MediaElement.SubtitleUrl = "https://raw.githubusercontent.com/ne0rrmatrix/SampleVideo/main/SRT/WindowsVideo.srt";
+				MediaElement.Source = MediaSource.FromResource("WindowsVideo.mp4");
+				return;
+
 			case loadMusic:
 				MediaElement.MetadataTitle = "HAL 9000";
 				MediaElement.MetadataArtist = "HAL 9000 Album";
@@ -242,7 +269,6 @@ async void ChangeAspectClicked(object? sender, EventArgs e)
 
 		MediaElement.Aspect = (Aspect)aspectEnum;
 	}
-
 	void DisplayPopup(object sender, EventArgs e)
 	{
 		MediaElement.Pause();
@@ -274,4 +300,87 @@ void DisplayPopup(object sender, EventArgs e)
 			popupMediaElement.Handler?.DisconnectHandler();
 		};
 	}
+}
+
+/// <summary>
+/// Sample implementation of an SRT parser.
+/// </summary>
+partial class SrtParser : IParser
+{
+	static readonly Regex timecodePatternSRT = SRTRegex();
+
+	public List<SubtitleCue> ParseContent(string content)
+	{
+		var cues = new List<SubtitleCue>();
+		if (string.IsNullOrEmpty(content))
+		{
+			return cues;
+		}
+
+		var lines = content.Split(SubtitleParser.Separator, StringSplitOptions.RemoveEmptyEntries);
+
+		SubtitleCue? currentCue = null;
+		var textBuffer = new StringBuilder();
+
+		foreach (var line in lines)
+		{
+			if (int.TryParse(line, out _))
+			{
+				continue;
+			}
+
+			var match = timecodePatternSRT.Match(line);
+			if (match.Success)
+			{
+				if (currentCue is not null)
+				{
+					currentCue.Text = textBuffer.ToString().TrimEnd('\r', '\n');
+					cues.Add(currentCue);
+					textBuffer.Clear();
+				}
+
+				currentCue = CreateCue(match);
+			}
+			else if (currentCue is not null && !string.IsNullOrWhiteSpace(line))
+			{
+				textBuffer.AppendLine(line.Trim().TrimEnd('\r', '\n'));
+			}
+		}
+
+		if (currentCue is not null)
+		{
+			currentCue.Text = textBuffer.ToString().TrimEnd('\r', '\n');
+			cues.Add(currentCue);
+		}
+		if (cues.Count == 0)
+		{
+			throw new FormatException("Invalid SRT format");
+		}
+		return cues;
+	}
+
+	static SubtitleCue CreateCue(Match match)
+	{
+		var StartTime = ParseTimecode(match.Groups[1].Value);
+		var EndTime = ParseTimecode(match.Groups[2].Value);
+		var Text = string.Empty;
+		if (StartTime > EndTime)
+		{
+			throw new FormatException("Start time cannot be greater than end time.");
+		}
+		return new SubtitleCue
+		{
+			StartTime = StartTime,
+			EndTime = EndTime,
+			Text = Text
+		};
+	}
+
+	static TimeSpan ParseTimecode(string timecode)
+	{
+		return TimeSpan.ParseExact(timecode, @"hh\:mm\:ss\,fff", CultureInfo.InvariantCulture);
+	}
+
+	[GeneratedRegex(@"(\d{2}\:\d{2}\:\d{2}\,\d{3}) --> (\d{2}\:\d{2}\:\d{2}\,\d{3})", RegexOptions.Compiled)]
+	private static partial Regex SRTRegex();
 }

samples/CommunityToolkit.Maui.Sample/Platforms/MacCatalyst/Info.plist

@@ -39,5 +39,9 @@
 		<string>bluetooth-central</string>
 		<string>audio</string>
 	</array>
+    <key>UIAppFonts</key>
+    <array>
+        <string>Resources/Fonts/PlaywriteSK-Regular.ttf</string>
+    </array>
 </dict>
 </plist>

samples/CommunityToolkit.Maui.Sample/Platforms/iOS/Info.plist

@@ -40,5 +40,9 @@
 	<array>
 		<string>audio</string>
 	</array>
+    <key>UIAppFonts</key>
+    <array>
+        <string>Resources/Fonts/PlaywriteSK-Regular.ttf</string>
+    </array>
 </dict>
 </plist>

src/CommunityToolkit.Maui.MediaElement/AppBuilderExtensions.shared.cs

@@ -1,6 +1,6 @@
 using CommunityToolkit.Maui.Core.Handlers;
-using CommunityToolkit.Maui.Core.Views;
 using CommunityToolkit.Maui.Views;
+using CommunityToolkit.Maui.Core;
 
 namespace CommunityToolkit.Maui;
 
@@ -16,9 +16,18 @@ public static class AppBuilderExtensions
 	/// <returns><see cref="MauiAppBuilder"/> initialized for <see cref="MediaElement"/>.</returns>
 	public static MauiAppBuilder UseMauiCommunityToolkitMediaElement(this MauiAppBuilder builder)
 	{
+		var importedFonts = FontHelper.GetExportedFonts();
+
 		builder.ConfigureMauiHandlers(h =>
 		{
 			h.AddHandler<MediaElement, MediaElementHandler>();
+		})
+		.ConfigureFonts(fonts =>
+		{
+			foreach (var (FontFileName, Alias) in importedFonts)
+			{
+				fonts.AddFont(FontFileName, Alias);
+			}
 		});
 
 #if ANDROID

src/CommunityToolkit.Maui.MediaElement/CommunityToolkit.Maui.MediaElement.csproj

@@ -47,6 +47,10 @@
     <WarningsAsErrors>$(WarningsAsErrors);CS1591</WarningsAsErrors>
     <GenerateDocumentationFile>True</GenerateDocumentationFile>
   </PropertyGroup>
+
+  <ItemGroup>
+    <AndroidResource Include="Assets\*"/>
+  </ItemGroup>
 
   <ItemGroup>
     <None Include="..\..\build\nuget.png" PackagePath="icon.png" Pack="true"/>

src/CommunityToolkit.Maui.MediaElement/Extensions/FontExtensions.cs

@@ -0,0 +1,90 @@
+using System.Reflection;
+using System.Text.RegularExpressions;
+
+namespace CommunityToolkit.Maui.Core;
+
+sealed class FontExtensions
+{
+	public record struct FontFamily(string input)
+	{
+		static readonly string ttfPattern = @"(.+\.ttf)#(.+)";
+		static readonly string otfPattern = @"(.+\.otf)#(.+)";
+		readonly Match ttfMatch = Regex.Match(input, ttfPattern);
+		readonly Match otfMatch = Regex.Match(input, otfPattern);
+		public readonly string Android
+		{
+				get 
+				{
+					if (ttfMatch.Success)
+					{
+						return ttfMatch.Groups[1].Value;
+					}
+					if (otfMatch.Success)
+					{
+						return otfMatch.Groups[1].Value;
+					}
+					else
+					{
+						System.Diagnostics.Trace.TraceError("The input string is not in the expected format.");
+						return string.Empty;
+					}
+				}
+		}
+		public readonly string WindowsFont
+		{
+				get 
+				{
+					if (ttfMatch.Success)
+					{
+						return $"ms-appx:///{ttfMatch.Groups[1].Value}#{ttfMatch.Groups[2].Value}";
+					}
+					if (otfMatch.Success)
+					{
+						return $"ms-appx:///{otfMatch.Groups[1].Value}#{otfMatch.Groups[2].Value}";
+					}
+					else
+					{
+						System.Diagnostics.Trace.TraceError("The input string is not in the expected format.");
+						return string.Empty;
+					}				}
+		}
+		public readonly string MacIOS
+		{
+				get 
+				{
+					if (ttfMatch.Success)
+					{
+						return ttfMatch.Groups[2].Value;
+					}
+					if (otfMatch.Success)
+					{
+						return otfMatch.Groups[2].Value;
+					}
+					else
+					{
+						System.Diagnostics.Trace.TraceError("The input string is not in the expected format.");
+						return string.Empty;
+					}
+				}
+		}
+	}
+}
+
+static class FontHelper
+{
+	/// <summary>
+	/// Returns the list of exported fonts from the assembly.
+	/// </summary>
+	/// <returns></returns>
+	public static IEnumerable<(string FontFileName, string Alias)> GetExportedFonts()
+	{
+		var assembly = typeof(FontHelper).Assembly;
+		var exportedFonts = new List<(string FontFileName, string Alias)>();
+		var customAttributes = assembly.GetCustomAttributes<ExportFontAttribute>();
+		foreach (var attribute in customAttributes)
+		{
+			exportedFonts.Add((attribute.FontFileName, attribute.Alias));
+		}
+		return exportedFonts;
+	}
+}