feat: Add MediaPlayerElement styles and sample pages (#1042)

unoplatform · Sep 29, 2023 · 6bebcc0 · 6bebcc0
1 parent fc9d508
commit 6bebcc0
Show file tree

Hide file tree

Showing 23 changed files with 1,529 additions and 2 deletions.
diff --git a/src/library/Uno.Cupertino/Uno.Cupertino.csproj b/src/library/Uno.Cupertino/Uno.Cupertino.csproj
@@ -55,7 +55,7 @@
 
 				<PackageReference Include="Uno.WinUI.Lottie" Version="5.0.0-dev.1148" Condition="!$(_IsWinUI)" />
 
-				<PackageReference Include="Microsoft.WindowsAppSDK" Version="1.1.0" Condition="$(_IsWinUI)" />
+				<PackageReference Include="Microsoft.WindowsAppSDK" Version="1.2.0" Condition="$(_IsWinUI)" />
 				<PackageReference Include="Microsoft.Windows.SDK.BuildTools" Version="10.0.22621.755" Condition="$(_IsWinUI)" />
 			</ItemGroup>
 

diff --git a/src/library/Uno.Material/Styles/Controls/v2/MediaPlayerElement.xaml b/src/library/Uno.Material/Styles/Controls/v2/MediaPlayerElement.xaml
diff --git a/src/library/Uno.Material/Styles/Controls/v2/_Resources.xaml b/src/library/Uno.Material/Styles/Controls/v2/_Resources.xaml
@@ -22,6 +22,7 @@
 	<Style BasedOn="{StaticResource MaterialDefaultHyperlinkButtonStyle}" TargetType="HyperlinkButton" />
 	<Style BasedOn="{StaticResource MaterialDefaultListViewItemStyle}" TargetType="ListViewItem" />
 	<Style BasedOn="{StaticResource MaterialDefaultListViewStyle}" TargetType="ListView" />
+	<Style BasedOn="{StaticResource MaterialDefaultMediaTransportControlsStyle}" TargetType="MediaTransportControls" />
 	<Style BasedOn="{StaticResource MaterialDefaultMenuFlyoutItemStyle}" TargetType="MenuFlyoutItem" />
 	<Style BasedOn="{StaticResource MaterialDefaultMenuFlyoutPresenterStyle}" TargetType="MenuFlyoutPresenter" />
 	<Style BasedOn="{StaticResource MaterialDefaultMenuFlyoutSeparatorStyle}" TargetType="MenuFlyoutSeparator" />
@@ -58,6 +59,7 @@
 	<StaticResource x:Key="IconToggleButtonStyle"				ResourceKey="MaterialIconToggleButtonStyle"		/>
 	<StaticResource x:Key="ListViewItemStyle"					ResourceKey="MaterialListViewItemStyle"			/>
 	<StaticResource x:Key="ListViewStyle"						ResourceKey="MaterialListViewStyle"				/>
+	<StaticResource x:Key="MediaTransportControlsStyle"         ResourceKey="MaterialMediaTransportControlsStyle" />
 	<StaticResource x:Key="MenuFlyoutItemStyle"					ResourceKey="MaterialMenuFlyoutItemStyle"		/>
 	<StaticResource x:Key="MenuFlyoutPresenterStyle"			ResourceKey="MaterialMenuFlyoutPresenterStyle"	/>
 	<StaticResource x:Key="MenuFlyoutSeparatorStyle"			ResourceKey="MaterialMenuFlyoutSeparatorStyle"	/>

diff --git a/src/library/Uno.Material/Uno.Material.csproj b/src/library/Uno.Material/Uno.Material.csproj
@@ -60,7 +60,7 @@
 
 				<PackageReference Include="Uno.WinUI.Lottie" Version="5.0.0-dev.1148" Condition="!$(_IsWinUI)" />
 
-				<PackageReference Include="Microsoft.WindowsAppSDK" Version="1.1.0" Condition="$(_IsWinUI)" />
+				<PackageReference Include="Microsoft.WindowsAppSDK" Version="1.2.0" Condition="$(_IsWinUI)" />
 				<PackageReference Include="Microsoft.Windows.SDK.BuildTools" Version="10.0.22621.755" Condition="$(_IsWinUI)" />
 			</ItemGroup>
 

diff --git a/...amples.Shared/Assets/Thumbnails/Getting_Started_with_Uno_Platform_for_Figma.png b/...amples.Shared/Assets/Thumbnails/Getting_Started_with_Uno_Platform_for_Figma.png
diff --git a/...P/Uno.Themes.Samples.Shared/Assets/Videos/Getting_Started_with_Uno_Platform_for_Figma.mp4 b/...P/Uno.Themes.Samples.Shared/Assets/Videos/Getting_Started_with_Uno_Platform_for_Figma.mp4
diff --git a/src/samples/UWP/Uno.Themes.Samples.Shared/Content/Controls/MediaPlayerElementSamplePage.xaml b/src/samples/UWP/Uno.Themes.Samples.Shared/Content/Controls/MediaPlayerElementSamplePage.xaml
@@ -0,0 +1,55 @@
+<Page x:Class="Uno.Themes.Samples.Content.Controls.MediaPlayerElementSamplePage"
+	  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+	  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+	  xmlns:local="using:Uno.Themes.Samples.Content.Controls"
+	  xmlns:sample="using:Uno.Themes.Samples"
+	  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+	  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+	  mc:Ignorable="d"
+	  Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
+
+	<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
+		<sample:SamplePageLayout>
+			<sample:SamplePageLayout.M3MaterialTemplate>
+				<DataTemplate>
+					<StackPanel>
+						<TextBlock Text="MediaPlayerElement sample using AutoPlay, TransportControls, and a URL link with mp4 format"
+								   Style="{StaticResource TitleLarge}"
+								   Margin="0,16" />
+						<Button Content="Show sample"
+								Click="LaunchMediaPlayerElementSample1"
+								Style="{StaticResource FilledButtonStyle}" />
+
+						<TextBlock Text="MediaPlayerElement sample using PosterSource, TransportControls, and a local file with mp4 format"
+								   Style="{StaticResource TitleLarge}"
+								   Margin="0,16" />
+						<Button Content="Show sample"
+								Click="LaunchMediaPlayerElementSample2"
+								Style="{StaticResource FilledButtonStyle}" />
+
+						<TextBlock Text="MediaPlayerElement sample using PosterSource, TransportControls, and a URL link with mp3 format (audio only)"
+								   Style="{StaticResource TitleLarge}"
+								   Margin="0,16" />
+						<Button Content="Show sample"
+								Click="LaunchMediaPlayerElementSample3"
+								Style="{StaticResource FilledButtonStyle}" />
+
+						<TextBlock Text="MediaPlayerElement sample with customizable options"
+								   Style="{StaticResource TitleLarge}"
+								   Margin="0,16" />
+						<Button Content="Show sample"
+								Click="LaunchMediaPlayerElementSample4"
+								Style="{StaticResource FilledButtonStyle}" />
+
+						<TextBlock Text="MediaPlayerElement sample using a Playlist"
+								   Style="{StaticResource TitleLarge}"
+								   Margin="0,16" />
+						<Button Content="Show sample"
+								Click="LaunchMediaPlayerElementSample5"
+								Style="{StaticResource FilledButtonStyle}" />
+					</StackPanel>
+				</DataTemplate>
+			</sample:SamplePageLayout.M3MaterialTemplate>
+		</sample:SamplePageLayout>
+	</Grid>
+</Page>
diff --git a/...mples/UWP/Uno.Themes.Samples.Shared/Content/Controls/MediaPlayerElementSamplePage.xaml.cs b/...mples/UWP/Uno.Themes.Samples.Shared/Content/Controls/MediaPlayerElementSamplePage.xaml.cs
@@ -0,0 +1,41 @@
+using Uno.Themes.Samples.Content.NestedSamples;
+using Uno.Themes.Samples.Entities;
+using Windows.UI.Xaml.Controls;
+
+
+namespace Uno.Themes.Samples.Content.Controls
+{
+	[SamplePage(SampleCategory.Controls, "MediaPlayerElement", Description = "Represents an object that uses a MediaPlayer to render audio and video to the display.", DocumentationLink = "https://learn.microsoft.com/en-us/uwp/api/windows.ui.xaml.controls.mediaplayerelement")]
+	public sealed partial class MediaPlayerElementSamplePage : Page
+    {
+        public MediaPlayerElementSamplePage()
+        {
+            this.InitializeComponent();
+        }
+
+		private void LaunchMediaPlayerElementSample1(object sender, Windows.UI.Xaml.RoutedEventArgs e)
+		{
+			Shell.GetForCurrentView().ShowNestedSample<MediaPlayerElementSample_NestedPage1>(clearStack: true);
+		}
+
+		private void LaunchMediaPlayerElementSample2(object sender, Windows.UI.Xaml.RoutedEventArgs e)
+		{
+			Shell.GetForCurrentView().ShowNestedSample<MediaPlayerElementSample_NestedPage2>(clearStack: true);
+		}
+
+		private void LaunchMediaPlayerElementSample3(object sender, Windows.UI.Xaml.RoutedEventArgs e)
+		{
+			Shell.GetForCurrentView().ShowNestedSample<MediaPlayerElementSample_NestedPage3>(clearStack: true);
+		}
+
+		private void LaunchMediaPlayerElementSample4(object sender, Windows.UI.Xaml.RoutedEventArgs e)
+		{
+			Shell.GetForCurrentView().ShowNestedSample<MediaPlayerElementSample_NestedPage4>(clearStack: true);
+		}
+
+		private void LaunchMediaPlayerElementSample5(object sender, Windows.UI.Xaml.RoutedEventArgs e)
+		{
+			Shell.GetForCurrentView().ShowNestedSample<MediaPlayerElementSample_NestedPage5>(clearStack: true);
+		}
+	}
+}
diff --git a/...Uno.Themes.Samples.Shared/Content/NestedSamples/MediaPlayerElementSample_NestedPage1.xaml b/...Uno.Themes.Samples.Shared/Content/NestedSamples/MediaPlayerElementSample_NestedPage1.xaml
@@ -0,0 +1,55 @@
+<Page x:Class="Uno.Themes.Samples.Content.NestedSamples.MediaPlayerElementSample_NestedPage1"
+	  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+	  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+	  xmlns:local="using:Uno.Themes.Samples.Content.NestedSamples"
+	  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+	  xmlns:toolkit="using:Uno.UI.Toolkit"
+	  xmlns:smtx="using:ShowMeTheXAML"
+	  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+	  mc:Ignorable="d"
+	  Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
+
+	<Grid>
+		<Grid.RowDefinitions>
+			<RowDefinition Height="Auto" />
+			<RowDefinition Height="Auto" />
+			<RowDefinition Height="Auto" />
+		</Grid.RowDefinitions>
+
+		<CommandBar Content="MediaPlayerElement sample"
+					toolkit:VisibleBoundsPadding.PaddingMask="Top"
+					Style="{StaticResource MaterialCommandBarStyle}">
+			<toolkit:CommandBarExtensions.NavigationCommand>
+				<AppBarButton Click="NavigateBack"
+							  Style="{StaticResource MaterialAppBarButton}">
+					<AppBarButton.Icon>
+						<BitmapIcon UriSource="ms-appx:///Assets/Close.png"
+									ShowAsMonochrome="False" />
+					</AppBarButton.Icon>
+				</AppBarButton>
+			</toolkit:CommandBarExtensions.NavigationCommand>
+		</CommandBar>
+
+		<TextBlock Grid.Row="1"
+				   Text="MediaPlayerElement sample using AutoPlay, TransportControls, and a URL link with mp4 format"
+				   Style="{StaticResource MaterialTitleLarge}"
+				   Foreground="{ThemeResource OnBackgroundBrush}"
+				   Opacity="0.8"
+				   Margin="16,32,0,0" />
+
+		<smtx:XamlDisplay Grid.Row="2"
+						  Margin="16"
+						  Style="{StaticResource ExpandingXamlDisplayStyle}"
+						  UniqueKey="MediaPlayerElementSample_NestedPage1_AutoPlayTransportControlsEnabledUrlLinkMp4Format">
+			<MediaPlayerElement x:Name="MediaPlayerElementSample1"
+								Source="https://uno-assets.platform.uno/tests/videos/Mobile_Development_in_VS_Code_with_Uno_Platform_orDotNetMAUI.mp4"
+								AreTransportControlsEnabled="True"
+								AutoPlay="True"
+								MaxWidth="720">
+				<MediaPlayerElement.TransportControls>
+					<MediaTransportControls IsCompact="True" />
+				</MediaPlayerElement.TransportControls>
+			</MediaPlayerElement>
+		</smtx:XamlDisplay>
+	</Grid>
+</Page>
diff --git a/....Themes.Samples.Shared/Content/NestedSamples/MediaPlayerElementSample_NestedPage1.xaml.cs b/....Themes.Samples.Shared/Content/NestedSamples/MediaPlayerElementSample_NestedPage1.xaml.cs
@@ -0,0 +1,33 @@
+using System;
+using System.Collections.Generic;
+using System.IO;
+using System.Linq;
+using System.Runtime.InteropServices.WindowsRuntime;
+using Windows.Foundation;
+using Windows.Foundation.Collections;
+using Windows.UI.Xaml;
+using Windows.UI.Xaml.Controls;
+using Windows.UI.Xaml.Controls.Primitives;
+using Windows.UI.Xaml.Data;
+using Windows.UI.Xaml.Input;
+using Windows.UI.Xaml.Media;
+using Windows.UI.Xaml.Navigation;
+
+namespace Uno.Themes.Samples.Content.NestedSamples
+{
+	public sealed partial class MediaPlayerElementSample_NestedPage1 : Page
+	{
+		public MediaPlayerElementSample_NestedPage1()
+		{
+			this.InitializeComponent();
+			Unloaded += MediaPlayerElementSample_NestedPage1_Unloaded;
+		}
+
+		private void NavigateBack(object sender, RoutedEventArgs e) => Shell.GetForCurrentView().BackNavigateFromNestedSample();
+
+		private void MediaPlayerElementSample_NestedPage1_Unloaded(object sender, RoutedEventArgs e)
+		{
+			MediaPlayerElementSample1.MediaPlayer.Pause();
+		}
+	}
+}
diff --git a/...Uno.Themes.Samples.Shared/Content/NestedSamples/MediaPlayerElementSample_NestedPage2.xaml b/...Uno.Themes.Samples.Shared/Content/NestedSamples/MediaPlayerElementSample_NestedPage2.xaml
@@ -0,0 +1,57 @@
+<Page x:Class="Uno.Themes.Samples.Content.NestedSamples.MediaPlayerElementSample_NestedPage2"
+	  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+	  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+	  xmlns:local="using:Uno.Themes.Samples.Content.NestedSamples"
+	  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+	  xmlns:toolkit="using:Uno.UI.Toolkit"
+	  xmlns:smtx="using:ShowMeTheXAML"
+	  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+	  mc:Ignorable="d"
+	  Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
+
+	<Grid>
+		<Grid.RowDefinitions>
+			<RowDefinition Height="Auto" />
+			<RowDefinition Height="Auto" />
+			<RowDefinition Height="Auto" />
+		</Grid.RowDefinitions>
+
+		<CommandBar Content="MediaPlayerElement sample"
+					toolkit:VisibleBoundsPadding.PaddingMask="Top"
+					Style="{StaticResource MaterialCommandBarStyle}">
+			<toolkit:CommandBarExtensions.NavigationCommand>
+				<AppBarButton Click="NavigateBack"
+							  Style="{StaticResource MaterialAppBarButton}">
+					<AppBarButton.Icon>
+						<BitmapIcon UriSource="ms-appx:///Assets/Close.png"
+									ShowAsMonochrome="False" />
+					</AppBarButton.Icon>
+				</AppBarButton>
+			</toolkit:CommandBarExtensions.NavigationCommand>
+		</CommandBar>
+
+		<TextBlock Grid.Row="1"
+				   Text="MediaPlayerElement sample using PosterSource, TransportControls, and a local file with mp4 format"
+				   Style="{StaticResource MaterialTitleLarge}"
+				   Foreground="{ThemeResource OnBackgroundBrush}"
+				   Opacity="0.8"
+				   Margin="16,32,0,0" />
+
+		<smtx:XamlDisplay Grid.Row="2"
+						  Margin="16"
+						  Style="{StaticResource ExpandingXamlDisplayStyle}"
+						  UniqueKey="MediaPlayerElementSample_NestedPage2_TransportControlsEnabledLocalFileMp4Format">
+			<MediaPlayerElement x:Name="MediaPlayerElementSample2"
+								Source="ms-appx:///Assets/Videos/Getting_Started_with_Uno_Platform_for_Figma.mp4"
+								PosterSource="ms-appx:///Assets/Thumbnails/Getting_Started_with_Uno_Platform_for_Figma.png"
+								AreTransportControlsEnabled="True"
+								AutoPlay="False"
+								MaxWidth="720">
+
+				<MediaPlayerElement.TransportControls>
+					<MediaTransportControls IsCompact="True" />
+				</MediaPlayerElement.TransportControls>
+			</MediaPlayerElement>
+		</smtx:XamlDisplay>
+	</Grid>
+</Page>
diff --git a/....Themes.Samples.Shared/Content/NestedSamples/MediaPlayerElementSample_NestedPage2.xaml.cs b/....Themes.Samples.Shared/Content/NestedSamples/MediaPlayerElementSample_NestedPage2.xaml.cs
@@ -0,0 +1,33 @@
+using System;
+using System.Collections.Generic;
+using System.IO;
+using System.Linq;
+using System.Runtime.InteropServices.WindowsRuntime;
+using Windows.Foundation;
+using Windows.Foundation.Collections;
+using Windows.UI.Xaml;
+using Windows.UI.Xaml.Controls;
+using Windows.UI.Xaml.Controls.Primitives;
+using Windows.UI.Xaml.Data;
+using Windows.UI.Xaml.Input;
+using Windows.UI.Xaml.Media;
+using Windows.UI.Xaml.Navigation;
+
+namespace Uno.Themes.Samples.Content.NestedSamples
+{
+    public sealed partial class MediaPlayerElementSample_NestedPage2 : Page
+    {
+        public MediaPlayerElementSample_NestedPage2()
+        {
+            this.InitializeComponent();
+
+			Unloaded += MediaPlayerElementSample_NestedPage2_Unloaded;
+		}
+		private void NavigateBack(object sender, RoutedEventArgs e) => Shell.GetForCurrentView().BackNavigateFromNestedSample();
+
+		private void MediaPlayerElementSample_NestedPage2_Unloaded(object sender, RoutedEventArgs e)
+		{
+			MediaPlayerElementSample2.MediaPlayer.Pause();
+		}
+	}
+}
diff --git a/...Uno.Themes.Samples.Shared/Content/NestedSamples/MediaPlayerElementSample_NestedPage3.xaml b/...Uno.Themes.Samples.Shared/Content/NestedSamples/MediaPlayerElementSample_NestedPage3.xaml
@@ -0,0 +1,52 @@
+<Page x:Class="Uno.Themes.Samples.Content.NestedSamples.MediaPlayerElementSample_NestedPage3"
+	  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+	  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+	  xmlns:local="using:Uno.Themes.Samples.Content.NestedSamples"
+	  xmlns:toolkit="using:Uno.UI.Toolkit"
+	  xmlns:smtx="using:ShowMeTheXAML"
+	  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+	  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+	  mc:Ignorable="d"
+	  Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
+
+	<Grid>
+		<Grid.RowDefinitions>
+			<RowDefinition Height="Auto" />
+			<RowDefinition Height="Auto" />
+			<RowDefinition Height="Auto" />
+		</Grid.RowDefinitions>
+
+		<CommandBar Content="MediaPlayerElement sample"
+					toolkit:VisibleBoundsPadding.PaddingMask="Top"
+					Style="{StaticResource MaterialCommandBarStyle}">
+			<toolkit:CommandBarExtensions.NavigationCommand>
+				<AppBarButton Click="NavigateBack"
+							  Style="{StaticResource MaterialAppBarButton}">
+					<AppBarButton.Icon>
+						<BitmapIcon UriSource="ms-appx:///Assets/Close.png"
+									ShowAsMonochrome="False" />
+					</AppBarButton.Icon>
+				</AppBarButton>
+			</toolkit:CommandBarExtensions.NavigationCommand>
+		</CommandBar>
+
+		<TextBlock Grid.Row="1"
+				   Text="MediaPlayerElement sample using PosterSource, TransportControls, and a URL link with mp3 format (audio only)"
+				   Style="{StaticResource MaterialTitleLarge}"
+				   Foreground="{ThemeResource OnBackgroundBrush}"
+				   Opacity="0.8"
+				   Margin="16,32,0,0" />
+
+		<smtx:XamlDisplay Grid.Row="2"
+						  Margin="16"
+						  Style="{StaticResource ExpandingXamlDisplayStyle}"
+						  UniqueKey="MediaPlayerElementSample_NestedPage3_PosterSourceTransportControlsEnabledUrlLinkMp3Format">
+			<MediaPlayerElement x:Name="MediaPlayerElementSample3"
+								Source="https://uno-assets.platform.uno/tests/audio/Getting_Started_with_Uno_Platform_and_Visual_Studio_Code.mp3"
+								PosterSource="https://uno-assets.platform.uno/tests/thumbnails/Getting_Started_with_Uno_Platform_and_Visual_Studio_Code.png"
+								AreTransportControlsEnabled="True"
+								AutoPlay="False"
+								MaxWidth="720" />
+		</smtx:XamlDisplay>
+	</Grid>
+</Page>