Add Android TextureView (#2540)

* test project added

* add media element to test project

* working implementation

* Add Builder Method

* comments updated

* Remove My Temp Test Project (Unneeded)

* removed unneeded "using"

* comment update

* Update Sample App

* Update src/CommunityToolkit.Maui.MediaElement/MediaElement.shared.cs

Co-authored-by: Pedro Jesus <[email protected]>

* switch to "is not null" rather than != null

* add 2nd builder method and alternative xml method

* 3 builder options working

* remove stopwatch test as done testing

* refactored redundancies in UseMauiCommunityToolkitMediaElement

* made PlayerView inaccessible to users again

* reduce to one version of UseMauiCommunityToolkitMediaElement

* Removed second TextureView constructor method

* Remove commented code

* Move to `Primitives` Folder, Fix Namespaces

* Refactor MediaElement `Options`, Update Formatting

* Demonstrate `AndroidViewType.SurfaceView`

* Use existing ItemGroup

* Remove unused code

* Add `StreamingVideoUrls`

* Remove duplicate string

* Pass in `AndroidViewType`

* Refactor

* Remove unused code

* `dotnet format`

* Remove redundant MediaElement constructor

* Use `SurfaceType` for existing MediaElement pages

* Remove embedded videos

* Use `.shared.cs`

* Update MediaManager.android.cs

* Undo changes

* `dotnet format`

* Use `private set;`

* Use SurfaceView

* Fix typo

* - Fix sample
- Fix tizen invalid using statement

* Add unit tests for MediaElement default view type

Implemented unit tests for `AppBuilderExtensions_MediaElement` and `MediaElementOptions` to validate the setting and retrieval of the default Android view type for media elements. The tests cover various scenarios to ensure expected behavior.

* Fix Tizen MediaManager

* Fix tests

* Add Label to texture view explaining what it can do

* Use transparent background

* Update MediaElementTextureViewPage.cs

* Revert "Fix tests"

This reverts commit 5b59f77.

* Remove TextureViewPage

* Update Unit Tests

---------

Co-authored-by: James Crutchley <[email protected]>
Co-authored-by: Pedro Jesus <[email protected]>
Co-authored-by: Brandon Minnick <[email protected]>
Co-authored-by: Brandon Minnick <[email protected]>

Author: 4 people

samples/CommunityToolkit.Maui.Sample/Constants/StreamingVideoUrls.cs

@@ -0,0 +1,8 @@
+namespace CommunityToolkit.Maui.Sample.Constants;
+
+static class StreamingVideoUrls
+{
+	public const string BuckBunny = "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4";
+	public const string ElephantsDream = "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4";
+	public const string Sintel = "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/Sintel.mp4";
+}

samples/CommunityToolkit.Maui.Sample/MauiProgram.cs

@@ -1,5 +1,6 @@
 using System.Diagnostics.CodeAnalysis;
 using CommunityToolkit.Maui.ApplicationModel;
+using CommunityToolkit.Maui.Core;
 using CommunityToolkit.Maui.Markup;
 using CommunityToolkit.Maui.Media;
 using CommunityToolkit.Maui.Sample.Models;
@@ -26,6 +27,7 @@
 using CommunityToolkit.Maui.Sample.ViewModels.Views;
 using CommunityToolkit.Maui.Sample.Views.Popups;
 using CommunityToolkit.Maui.Storage;
+using CommunityToolkit.Maui.Views;
 using Microsoft.Extensions.Http.Resilience;
 using Microsoft.Extensions.Logging;
 using Microsoft.Maui.LifecycleEvents;
@@ -66,9 +68,11 @@ public static MauiApp CreateMauiApp()
 #endif
 								.UseMauiCommunityToolkitMarkup()
 								.UseMauiCommunityToolkitCamera()
-								.UseMauiCommunityToolkitMediaElement()
-
-								.ConfigureMauiHandlers(handlers =>
+								.UseMauiCommunityToolkitMediaElement(static options =>
+								{
+									options.SetDefaultAndroidViewType(AndroidViewType.TextureView);
+								})
+								.ConfigureMauiHandlers(static handlers =>
 								{
 #if IOS || MACCATALYST
 									handlers.AddHandler<CollectionView, Microsoft.Maui.Controls.Handlers.Items2.CollectionViewHandler2>();

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

@@ -37,6 +37,7 @@
                         </Border.StrokeShape>
                         <VerticalStackLayout Spacing="6" HeightRequest="250">
                             <toolkit:MediaElement
+                                AndroidViewType="SurfaceView"
                                 HeightRequest="200"
                                 x:Name="MediaElement"
                                 ShouldAutoPlay="True"

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

@@ -37,6 +37,7 @@
                     </Border.StrokeShape>
                     <VerticalStackLayout Spacing="6" HeightRequest="250">
                         <toolkit:MediaElement
+                            AndroidViewType="SurfaceView"
                             HeightRequest="200"
                             x:Name="MediaElement"
                             ShouldAutoPlay="True"

samples/CommunityToolkit.Maui.Sample/Pages/Views/MediaElement/MediaElementMultipleWindowsPage.cs

@@ -1,5 +1,7 @@
+using CommunityToolkit.Maui.Core;
 using CommunityToolkit.Maui.Sample.ViewModels.Views;
 #if WINDOWS || MACCATALYST
+using CommunityToolkit.Maui.Sample.Constants;
 using CommunityToolkit.Maui.Views;
 #else
 using CommunityToolkit.Maui.Markup;
@@ -9,9 +11,7 @@ namespace CommunityToolkit.Maui.Sample.Pages.Views;
 
 public partial class MediaElementMultipleWindowsPage : BasePage<MediaElementMultipleWindowsViewModel>
 {
-	const string buckBunnyMp4Url = "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4";
 #if WINDOWS || MACCATALYST
-	const string elephantsDreamMp4Url = "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4";
 	readonly Window secondWindow;
 #endif
 
@@ -22,14 +22,16 @@ public MediaElementMultipleWindowsPage(MediaElementMultipleWindowsViewModel view
 		{
 			Content = new MediaElement
 			{
-				Source = elephantsDreamMp4Url,
+				AndroidViewType= AndroidViewType.SurfaceView,
+				Source = StreamingVideoUrls.ElephantsDream,
 				ShouldAutoPlay = true
 			}
 		});
 
 		Content = new MediaElement
 		{
-			Source = buckBunnyMp4Url,
+			AndroidViewType= AndroidViewType.SurfaceView,
+			Source = StreamingVideoUrls.BuckBunny,
 			ShouldAutoPlay = true
 		};
 #else

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

@@ -3,6 +3,7 @@
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
              xmlns:pages="clr-namespace:CommunityToolkit.Maui.Sample.Pages"
              xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
+             xmlns:constants="clr-namespace:CommunityToolkit.Maui.Sample.Constants"
              xmlns:viewModels="clr-namespace:CommunityToolkit.Maui.Sample.ViewModels.Views"
              xmlns:converters="clr-namespace:CommunityToolkit.Maui.Sample.Converters"
              x:TypeArguments="viewModels:MediaElementViewModel"
@@ -29,7 +30,7 @@
             <toolkit:MediaElement
                 x:Name="MediaElement"
                 ShouldAutoPlay="True"
-                Source="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
+                Source="{x:Static constants:StreamingVideoUrls.BuckBunny}"
                 MetadataArtworkUrl="https://lh3.googleusercontent.com/pw/AP1GczNRrebWCJvfdIau1EbsyyYiwAfwHS0JXjbioXvHqEwYIIdCzuLodQCZmA57GADIo5iB3yMMx3t_vsefbfoHwSg0jfUjIXaI83xpiih6d-oT7qD_slR0VgNtfAwJhDBU09kS5V2T5ZML-WWZn8IrjD4J-g=w1792-h1024-s-no-gm"
                 MetadataTitle="Big Buck Bunny"
                 MetadataArtist="Blender Foundation"

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

@@ -1,5 +1,6 @@
 using System.ComponentModel;
-using CommunityToolkit.Maui.Core.Primitives;
+using CommunityToolkit.Maui.Core;
+using CommunityToolkit.Maui.Sample.Constants;
 using CommunityToolkit.Maui.Sample.ViewModels.Views;
 using CommunityToolkit.Maui.Views;
 using Microsoft.Extensions.Logging;
@@ -17,7 +18,6 @@ public partial class MediaElementPage : BasePage<MediaElementViewModel>
 	const string resetSource = "Reset Source to null";
 	const string loadMusic = "Load Music";
 
-	const string buckBunnyMp4Url = "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4";
 	const string botImageUrl = "https://lh3.googleusercontent.com/pw/AP1GczNRrebWCJvfdIau1EbsyyYiwAfwHS0JXjbioXvHqEwYIIdCzuLodQCZmA57GADIo5iB3yMMx3t_vsefbfoHwSg0jfUjIXaI83xpiih6d-oT7qD_slR0VgNtfAwJhDBU09kS5V2T5ZML-WWZn8IrjD4J-g=w1792-h1024-s-no-gm";
 	const string hlsStreamTestUrl = "https://mtoczko.github.io/hls-test-streams/test-gap/playlist.m3u8";
 	const string hal9000AudioUrl = "https://github.com/prof3ssorSt3v3/media-sample-files/raw/master/hal-9000.mp3";
@@ -170,7 +170,7 @@ async void ChangeSourceClicked(Object sender, EventArgs e)
 				MediaElement.MetadataArtworkUrl = botImageUrl;
 				MediaElement.MetadataArtist = "Big Buck Bunny Album";
 				MediaElement.Source =
-					MediaSource.FromUri(buckBunnyMp4Url);
+					MediaSource.FromUri(StreamingVideoUrls.BuckBunny);
 				return;
 
 			case loadHls:
@@ -248,6 +248,7 @@ void DisplayPopup(object sender, EventArgs e)
 		MediaElement.Pause();
 		var popupMediaElement = new MediaElement
 		{
+			AndroidViewType = AndroidViewType.SurfaceView,
 			Source = MediaSource.FromResource("AppleVideo.mp4"),
 			HeightRequest = 600,
 			WidthRequest = 600,

samples/CommunityToolkit.Maui.Sample/Platforms/Android/AndroidManifest.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <manifest xmlns:android="http://schemas.android.com/apk/res/android">
-    <application android:allowBackup="true" android:icon="@mipmap/appicon" android:enableOnBackInvokedCallback="true"
+    <application android:allowBackup="true" android:icon="@mipmap/appicon" android:enableOnBackInvokedCallback="true" android:hardwareAccelerated="true"
                  android:supportsRtl="true">
 
       <meta-data android:name="com.google.android.geo.API_KEY" android:value="PASTE-YOUR-API-KEY-HERE" />

samples/CommunityToolkit.Maui.Sample/ViewModels/Views/MediaElement/MediaElementCarouselViewViewModel.cs

@@ -1,17 +1,15 @@
 using System.Collections.ObjectModel;
+using CommunityToolkit.Maui.Sample.Constants;
+
 namespace CommunityToolkit.Maui.Sample.ViewModels.Views;
 
 public partial class MediaElementCarouselViewViewModel : BaseViewModel
 {
-	const string buckBunnyMp4Url = "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4";
-	const string elephantsDreamMp4Url = "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4";
-	const string sintelMp4Url = "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/Sintel.mp4";
-
 	public ObservableCollection<MediaElementDataSource> ItemSource { get; } =
 	[
-		new(new Uri(buckBunnyMp4Url), "Buck Bunny", 720, 1280),
-		new(new Uri(elephantsDreamMp4Url), "Elephants Dream", 720, 1280),
-		new(new Uri(sintelMp4Url), "Sintel", 546, 1280)
+		new(new Uri(StreamingVideoUrls.BuckBunny), "Buck Bunny", 720, 1280),
+		new(new Uri(StreamingVideoUrls.ElephantsDream), "Elephants Dream", 720, 1280),
+		new(new Uri(StreamingVideoUrls.Sintel), "Sintel", 546, 1280)
 	];
 }
 

samples/CommunityToolkit.Maui.Sample/ViewModels/Views/MediaElement/MediaElementCollectionViewViewModel.cs

@@ -1,16 +1,14 @@
 using System.Collections.ObjectModel;
+using CommunityToolkit.Maui.Sample.Constants;
+
 namespace CommunityToolkit.Maui.Sample.ViewModels.Views;
 
 public partial class MediaElementCollectionViewViewModel : BaseViewModel
 {
-	const string buckBunnyMp4Url = "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4";
-	const string elephantsDreamMp4Url = "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4";
-	const string sintelMp4Url = "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/Sintel.mp4";
-
 	public ObservableCollection<MediaElementDataSource> ItemSource { get; } =
 	[
-		new(new Uri(buckBunnyMp4Url), "Buck Bunny", 720, 1280),
-		new(new Uri(elephantsDreamMp4Url), "Elephants Dream", 720, 1280),
-		new(new Uri(sintelMp4Url), "Sintel", 546, 1280)
+		new(new Uri(StreamingVideoUrls.BuckBunny), "Buck Bunny", 720, 1280),
+		new(new Uri(StreamingVideoUrls.ElephantsDream), "Elephants Dream", 720, 1280),
+		new(new Uri(StreamingVideoUrls.Sintel), "Sintel", 546, 1280)
 	];
 }