Skip to content

Commit

Permalink
Commit
Browse files Browse the repository at this point in the history
  • Loading branch information
@naweed
naweed committed Aug 28, 2022
1 parent 1b05b41 commit dc61764
Show file tree
Hide file tree
Showing 7 changed files with 192 additions and 2 deletions.
6 changes: 6 additions & 0 deletions src/MauiTubePlayer.sln
View file
Expand Up @@ -7,6 +7,8 @@ Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "MauiTubePlayer", "MauiTubeP
EndProject
Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Maui.Apps.Framework", "Maui.Apps.Framework\Maui.Apps.Framework.csproj", "{2CB3A55A-9FDB-44C5-9231-04D216E4722C}"
EndProject
Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Maui.Controls.BottomSheet", "Maui.Controls.BottomSheet\Maui.Controls.BottomSheet.csproj", "{647D02F1-4DA9-4F64-B853-21C541F1F80E}"
EndProject
Global
GlobalSection(SolutionConfigurationPlatforms) = preSolution
Debug|Any CPU = Debug|Any CPU
Expand All @@ -23,6 +25,10 @@ Global
{2CB3A55A-9FDB-44C5-9231-04D216E4722C}.Debug|Any CPU.Build.0 = Debug|Any CPU
{2CB3A55A-9FDB-44C5-9231-04D216E4722C}.Release|Any CPU.ActiveCfg = Release|Any CPU
{2CB3A55A-9FDB-44C5-9231-04D216E4722C}.Release|Any CPU.Build.0 = Release|Any CPU
{647D02F1-4DA9-4F64-B853-21C541F1F80E}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
{647D02F1-4DA9-4F64-B853-21C541F1F80E}.Debug|Any CPU.Build.0 = Debug|Any CPU
{647D02F1-4DA9-4F64-B853-21C541F1F80E}.Release|Any CPU.ActiveCfg = Release|Any CPU
{647D02F1-4DA9-4F64-B853-21C541F1F80E}.Release|Any CPU.Build.0 = Release|Any CPU
EndGlobalSection
GlobalSection(SolutionProperties) = preSolution
HideSolutionNode = FALSE
Expand Down
5 changes: 4 additions & 1 deletion src/MauiTubePlayer/GlobalUsings.cs
View file
Expand Up @@ -18,4 +18,7 @@
global using Maui.Apps.Framework.Exceptions;
global using CommunityToolkit.Mvvm.ComponentModel;
global using System.Collections.ObjectModel;
global using Maui.Apps.Framework.Extensions;
global using Maui.Apps.Framework.Extensions;
global using Microsoft.Maui.Controls.Compatibility.Hosting;
global using YoutubeExplode;
global using YoutubeExplode.Videos.Streams;
7 changes: 7 additions & 0 deletions src/MauiTubePlayer/MauiProgram.cs
View file
Expand Up @@ -7,6 +7,7 @@ public static MauiApp CreateMauiApp()
var builder = MauiApp.CreateBuilder();
builder
.UseMauiApp<App>()
.UseMauiCompatibility()
.ConfigureFonts(fonts =>
{
fonts.AddFont("FiraSans-Light.ttf", "RegularFont");
Expand All @@ -26,6 +27,12 @@ static void MakeStatusBarTranslucent(Android.App.Activity activity)
activity.Window.SetStatusBarColor(Android.Graphics.Color.Transparent);
}
#endif
}).ConfigureMauiHandlers(handlers =>
{
//Add Legacy MediaElement Renderer
handlers.AddCompatibilityRenderer(
typeof(Xamarin.CommunityToolkit.UI.Views.MediaElement),
typeof(Xamarin.CommunityToolkit.UI.Views.MediaElementRenderer));
});

//Register Services
Expand Down
5 changes: 5 additions & 0 deletions src/MauiTubePlayer/MauiTubePlayer.csproj
View file
Expand Up @@ -57,10 +57,14 @@
<None Remove="Views\Base\" />
<None Remove="ViewModels\Base\" />
<None Remove="ViewControls\Common\" />
<None Remove="Xamarin.CommunityToolkit.MauiCompat" />
<None Remove="YoutubeExplode" />
</ItemGroup>
<ItemGroup>
<PackageReference Include="CommunityToolkit.Mvvm" Version="8.0.0" />
<PackageReference Include="MonkeyCache.FileStore" Version="2.0.0-beta" />
<PackageReference Include="Xamarin.CommunityToolkit.MauiCompat" Version="2.0.2-preview1013" />
<PackageReference Include="YoutubeExplode" Version="6.2.1" />
</ItemGroup>
<ItemGroup>
<Folder Include="Helpers\" />
Expand Down Expand Up @@ -100,5 +104,6 @@
</ItemGroup>
<ItemGroup>
<ProjectReference Include="..\Maui.Apps.Framework\Maui.Apps.Framework.csproj" />
<ProjectReference Include="..\Maui.Controls.BottomSheet\Maui.Controls.BottomSheet.csproj" />
</ItemGroup>
</Project>
24 changes: 24 additions & 0 deletions src/MauiTubePlayer/ViewModels/VideoDetailsPageViewModel.cs
View file
Expand Up @@ -16,6 +16,11 @@ public partial class VideoDetailsPageViewModel : AppViewModelBase

public event EventHandler DownloadCompleted;

[ObservableProperty]
private string videoSource;

private IEnumerable<MuxedStreamInfo> streamInfo;


public VideoDetailsPageViewModel(IApiService appApiService) : base(appApiService)
{
Expand Down Expand Up @@ -55,6 +60,10 @@ public override async void OnNavigatedTo(object parameters)
Comments = commentsSearchResult.Items;


//Get Stream URL
await GetVideoURL();


//Raise Data Load completed event to the UI
this.DataLoaded = true;

Expand Down Expand Up @@ -121,6 +130,21 @@ private async Task NavigateToVideoDetailsPage(string videoID)
await NavigationService.PushAsync(new VideoDetailsPage(videoID));
}

private async Task GetVideoURL()
{
var youtube = new YoutubeClient();

var streamManifest = await youtube.Videos.Streams.GetManifestAsync(
$"https://youtube.com/watch?v={TheVideo.Id}"
);

// Get highest quality muxed stream
streamInfo = streamManifest.GetMuxedStreams();

var videoPlayerStream = streamInfo.First(video => video.VideoQuality.Label is "240p" or "360p" or "480p");

VideoSource = videoPlayerStream.Url;
}

}

131 changes: 130 additions & 1 deletion src/MauiTubePlayer/Views/VideoDetailsPage.xaml
View file
Expand Up @@ -6,7 +6,9 @@
xmlns:viewmodels="clr-namespace:MauiTubePlayer.ViewModels"
xmlns:models="clr-namespace:MauiTubePlayer.Models"
xmlns:controls="clr-namespace:MauiTubePlayer.ViewControls"
xmlns:botshtcontrols="clr-namespace:XGENO.Maui.Controls;assembly=Maui.Controls.BottomSheet"
xmlns:converters="clr-namespace:Maui.Apps.Framework.Converters;assembly=Maui.Apps.Framework"
xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
x:Class="MauiTubePlayer.Views.VideoDetailsPage"
x:TypeArguments="viewmodels:VideoDetailsPageViewModel"
x:DataType="viewmodels:VideoDetailsPageViewModel"
Expand Down Expand Up @@ -58,6 +60,15 @@
</Image.Source>
</Image>

<!-- Play Button -->
<ImageButton
Source="imgplay.png"
HeightRequest="64"
WidthRequest="64"
VerticalOptions="Center"
HorizontalOptions="Center"
Clicked="VideoPlayerButton_Clicked"/>

<!-- Duration -->
<Border
Padding="8"
Expand All @@ -75,6 +86,17 @@
VerticalTextAlignment="Center"/>
</Border>

<!-- Media Player -->
<xct:MediaElement
x:Name="VideoPlayer"
IsVisible="False"
HorizontalOptions="Fill"
VerticalOptions="Fill"
ShowsPlaybackControls="True"
AutoPlay="False"
Source="{Binding VideoSource, Mode=OneWay}" />


</Grid>

</Frame>
Expand Down Expand Up @@ -351,7 +373,114 @@
FontFamily="MediumFont"
BorderColor="{StaticResource LightBorderColor}"
BorderWidth="0.5"
Background="{StaticResource DarkColor}"/>
Background="{StaticResource DarkColor}"
Clicked="btnComments_Clicked"/>


<!-- Comments Sheet -->
<botshtcontrols:BottomSheet
Margin="-16,0"
x:Name="CommentsBottomSheet"
Grid.Row="0"
Grid.RowSpan="8"
HeaderText="{Binding TheVideo.CommentsCount, Mode=OneWay, StringFormat='COMMENTS ({0})'}"
HeaderStyle="{StaticResource PageHeaderTextStyle}"
SheetHeight="660"
Theme="Dark">
<botshtcontrols:BottomSheet.BottomSheetContent>

<CollectionView
ItemsSource="{Binding Comments, Mode=OneWay}"
ItemSizingStrategy="MeasureAllItems">

<CollectionView.ItemsLayout>
<LinearItemsLayout
Orientation="Vertical"
ItemSpacing="12" />
</CollectionView.ItemsLayout>

<CollectionView.ItemTemplate>
<DataTemplate
x:DataType="models:Comment">
<Border
BackgroundColor="{StaticResource DarkColor}"
StrokeShape="RoundRectangle 8"
Padding="16"
HorizontalOptions="Fill"
VerticalOptions="FillAndExpand">

<Grid
RowDefinitions="Auto,*"
ColumnDefinitions="32,*,Auto"
VerticalOptions="FillAndExpand"
RowSpacing="6"
ColumnSpacing="12"
BackgroundColor="{StaticResource DarkColor}">

<Border
WidthRequest="32"
HeightRequest="32"
VerticalOptions="Start"
Stroke="{StaticResource LightBorderColor}"
StrokeThickness="1"
StrokeShape="RoundRectangle 16"
Grid.Row="0"
Grid.RowSpan="2"
Grid.Column="0">

<Image
VerticalOptions="Center"
HorizontalOptions="Center"
WidthRequest="30"
HeightRequest="30">

<Image.Clip>
<EllipseGeometry
Center="15,15"
RadiusX="15"
RadiusY="15"/>
</Image.Clip>

<Image.Source>
<UriImageSource
Uri="{Binding Snippet.TopLevelComment.Snippet.AuthorProfileImageUrl, Mode=OneWay}"
CacheValidity="1:00:00.0" />
</Image.Source>
</Image>

</Border>

<Label
Text="{Binding Snippet.TopLevelComment.Snippet.AuthorDisplayName, Mode=OneWay}"
Style="{StaticResource MediumLightText14}"
Grid.Row="0"
Grid.Column="1" />

<Label
Text="{Binding Snippet.TopLevelComment.Snippet.PublishedAt, Mode=OneWay, StringFormat='{0:dd-MMM-yyyy}'}"
Style="{StaticResource RegularLightText12}"
Grid.Row="0"
Grid.Column="2" />

<Label
Text="{Binding Snippet.TopLevelComment.Snippet.TextDisplay, Mode=OneWay}"
Style="{StaticResource RegularLightText12}"
Grid.Row="1"
Grid.Column="1"
Grid.ColumnSpan="2"
LineBreakMode="WordWrap"
VerticalOptions="Start" />

</Grid>

</Border>
</DataTemplate>
</CollectionView.ItemTemplate>

</CollectionView>

</botshtcontrols:BottomSheet.BottomSheetContent>
</botshtcontrols:BottomSheet>

</Grid>

Expand Down
16 changes: 16 additions & 0 deletions src/MauiTubePlayer/Views/VideoDetailsPage.xaml.cs
View file
Expand Up @@ -16,6 +16,13 @@ protected override void OnDisappearing()
{
(this.BindingContext as VideoDetailsPageViewModel).DownloadCompleted -= VideoDetailsPage_DownloadCompleted;

try
{
VideoPlayer.Stop();
}
catch { }


base.OnDisappearing();
}

Expand Down Expand Up @@ -74,4 +81,13 @@ private void VideoDetailsPage_DownloadCompleted(object sender, EventArgs e)
});

}

async void btnComments_Clicked(System.Object sender, System.EventArgs e) =>
await CommentsBottomSheet.OpenBottomSheet();

void VideoPlayerButton_Clicked(System.Object sender, System.EventArgs e)
{
VideoPlayer.IsVisible = true;
VideoPlayer.Play();
}
}

0 comments on commit dc61764

Please sign in to comment.