Skip to content

Commit

Permalink
feat: Add MediaPlayerElement styles and sample pages
Browse files Browse the repository at this point in the history
  • Loading branch information
nguyeenvy committed Aug 8, 2023
1 parent 75e56ee commit 69cde4f
Show file tree
Hide file tree
Showing 20 changed files with 1,523 additions and 0 deletions.
653 changes: 653 additions & 0 deletions src/library/Uno.Material/Styles/Controls/v2/MediaPlayerElement.xaml

Large diffs are not rendered by default.

Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Original file line number Diff line number Diff line change
@@ -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>
Original file line number Diff line number Diff line change
@@ -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);
}
}
}
Original file line number Diff line number Diff line change
@@ -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>
Original file line number Diff line number Diff line change
@@ -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();
}
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
<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>

<!-- Source="ms-appx:///Assets/Videos/Getting_Started_with_Uno_Platform_for_Figma.mp4" -->
</smtx:XamlDisplay>
</Grid>
</Page>
Original file line number Diff line number Diff line change
@@ -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();
}
}
}
Original file line number Diff line number Diff line change
@@ -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>
Original file line number Diff line number Diff line change
@@ -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_NestedPage3 : Page
{
public MediaPlayerElementSample_NestedPage3()
{
this.InitializeComponent();
Unloaded += MediaPlayerElementSample_NestedPage3_Unloaded;
}

private void NavigateBack(object sender, RoutedEventArgs e) => Shell.GetForCurrentView().BackNavigateFromNestedSample();

private void MediaPlayerElementSample_NestedPage3_Unloaded(object sender, RoutedEventArgs e)
{
MediaPlayerElementSample3.MediaPlayer.Pause();
}
}
}
Loading

0 comments on commit 69cde4f

Please sign in to comment.