From fd99280ebf55bb88b2e262f96adbc468be46836d Mon Sep 17 00:00:00 2001 From: Mateusz Skoczek Date: Fri, 27 Sep 2024 19:38:05 +0200 Subject: [PATCH] MainLayout - data downloading improved, background displaying improved --- .../Accounts/AccountProfilePicture.cs | 14 +- .../WatchIt.Website/Layout/MainLayout.razor | 227 +++++------------- .../Layout/MainLayout.razor.cs | 102 ++++++++ .../Layout/MainLayout.razor.css | 22 +- .../WatchIt.Website/Pages/SearchPage.razor | 5 + .../WatchIt.Website/Pages/SearchPage.razor.cs | 7 + .../Pages/SearchPage.razor.css | 0 .../WatchIt.Website/wwwroot/app.css | 17 ++ 8 files changed, 211 insertions(+), 183 deletions(-) create mode 100644 WatchIt.Website/WatchIt.Website/Layout/MainLayout.razor.cs create mode 100644 WatchIt.Website/WatchIt.Website/Pages/SearchPage.razor create mode 100644 WatchIt.Website/WatchIt.Website/Pages/SearchPage.razor.cs create mode 100644 WatchIt.Website/WatchIt.Website/Pages/SearchPage.razor.css diff --git a/WatchIt.Common/WatchIt.Common.Model/Accounts/AccountProfilePicture.cs b/WatchIt.Common/WatchIt.Common.Model/Accounts/AccountProfilePicture.cs index 8ca5569..06114ee 100644 --- a/WatchIt.Common/WatchIt.Common.Model/Accounts/AccountProfilePicture.cs +++ b/WatchIt.Common/WatchIt.Common.Model/Accounts/AccountProfilePicture.cs @@ -2,20 +2,8 @@ namespace WatchIt.Common.Model.Accounts; -public abstract class AccountProfilePicture +public abstract class AccountProfilePicture : Picture { - #region PROPERTIES - - [JsonPropertyName("image")] - public required byte[] Image { get; set; } - - [JsonPropertyName("mime_type")] - public required string MimeType { get; set; } - - #endregion - - - #region CONSTRUCTORS [JsonConstructor] diff --git a/WatchIt.Website/WatchIt.Website/Layout/MainLayout.razor b/WatchIt.Website/WatchIt.Website/Layout/MainLayout.razor index 338cb2f..b816a89 100644 --- a/WatchIt.Website/WatchIt.Website/Layout/MainLayout.razor +++ b/WatchIt.Website/WatchIt.Website/Layout/MainLayout.razor @@ -1,178 +1,77 @@ @using WatchIt.Common.Model.Photos @using WatchIt.Website.Services.WebAPI.Photos + @inherits LayoutComponentBase -@if (_loaded) -{ -
-
-
- + + + + @if (_loaded) + { +
+
+
+ +
+
+

Menu

+
+
+
+ @if (_user is null) + { + Sign in + } + else + { +
+ + +
+ } +
+
-
-

Menu

-
-
-
- @if (_user is null) - { - Sign in - } - else - { -
- - -
- } +
+
+ @Body
-
-
- @Body -
-
-
- -} - - - - -@code -{ - #region SERVICES - - [Inject] public ILogger Logger { get; set; } = default!; - [Inject] public NavigationManager NavigationManager { get; set; } = default!; - [Inject] public ITokensService TokensService { get; set; } = default!; - [Inject] public IAuthenticationService AuthenticationService { get; set; } = default!; - [Inject] public IAccountsWebAPIService AccountsWebAPIService { get; set; } = default!; - [Inject] public IMediaWebAPIService MediaWebAPIService { get; set; } = default!; - [Inject] public IPhotosWebAPIService PhotosWebAPIService { get; set; } = default!; - - #endregion - - - - #region FIELDS - - private bool _loaded = false; - - private string _background = "assets/background_temp.jpg"; - private string _firstGradientColor = "#c6721c"; - private string _secondGradientColor = "#85200c"; - - private User? _user = null; - private string _userProfilePicture = "assets/user_placeholder.png"; - private bool _userMenuIsActive = false; - - #endregion - - - - #region METHODS - - protected override async Task OnAfterRenderAsync(bool firstRender) - { - if (firstRender) - { - List bgTasks = new List(); - - bgTasks.Add(GetBackground()); - - await GetAuthenticatedUser(); - - if (_user is not null) - { - bgTasks.Add(GetProfilePicture()); + } - - private async Task GetAuthenticatedUser() - { - _user = await AuthenticationService.GetUserAsync(); - } - - private async Task GetProfilePicture() - { - Action successAction = (data) => - { - string imageBase64 = Convert.ToBase64String(data.Image); - _userProfilePicture = $"data:{data.MimeType};base64,{imageBase64}"; - }; - await AccountsWebAPIService.GetAccountProfilePicture(_user.Id, successAction); - } - - private async Task UserMenuLogOut() - { - await AuthenticationService.LogoutAsync(); - await TokensService.RemoveAuthenticationData(); - NavigationManager.Refresh(true); - } - - #endregion -} \ No newline at end of file + \ No newline at end of file diff --git a/WatchIt.Website/WatchIt.Website/Layout/MainLayout.razor.cs b/WatchIt.Website/WatchIt.Website/Layout/MainLayout.razor.cs new file mode 100644 index 0000000..feeecbe --- /dev/null +++ b/WatchIt.Website/WatchIt.Website/Layout/MainLayout.razor.cs @@ -0,0 +1,102 @@ +using Microsoft.AspNetCore.Components; +using WatchIt.Common.Model.Accounts; +using WatchIt.Common.Model.Photos; +using WatchIt.Website.Services.Utility.Authentication; +using WatchIt.Website.Services.Utility.Tokens; +using WatchIt.Website.Services.WebAPI.Accounts; +using WatchIt.Website.Services.WebAPI.Media; +using WatchIt.Website.Services.WebAPI.Photos; + +namespace WatchIt.Website.Layout; + +public partial class MainLayout : LayoutComponentBase +{ + #region SERVICES + + [Inject] public ILogger Logger { get; set; } = default!; + [Inject] public NavigationManager NavigationManager { get; set; } = default!; + [Inject] public ITokensService TokensService { get; set; } = default!; + [Inject] public IAuthenticationService AuthenticationService { get; set; } = default!; + [Inject] public IAccountsWebAPIService AccountsWebAPIService { get; set; } = default!; + [Inject] public IMediaWebAPIService MediaWebAPIService { get; set; } = default!; + [Inject] public IPhotosWebAPIService PhotosWebAPIService { get; set; } = default!; + + #endregion + + + + #region FIELDS + + private bool _loaded = false; + + private User? _user = null; + private AccountProfilePictureResponse? _userProfilePicture; + + private bool _menuUserIsActive; + + #endregion + + + + #region PROPERTIES + + public PhotoResponse? BackgroundPhoto { get; set; } + + #endregion + + + + #region PRIVATE METHODS + + #region Main + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + if (firstRender) + { + List endTasks = new List(); + List step1Tasks = new List(); + + // STEP 0 + step1Tasks.AddRange( + [ + Task.Run(async () => _user = await AuthenticationService.GetUserAsync()) + ]); + endTasks.AddRange( + [ + PhotosWebAPIService.GetPhotoRandomBackground(data => BackgroundPhoto = data) + ]); + + // STEP 1 + await Task.WhenAll(step1Tasks); + if (_user is not null) + { + endTasks.AddRange( + [ + AccountsWebAPIService.GetAccountProfilePicture(_user.Id, data => _userProfilePicture = data) + ]); + } + + // END + await Task.WhenAll(endTasks); + + _loaded = true; + StateHasChanged(); + } + } + + #endregion + + #region User menu + + private async Task UserMenuLogOut() + { + await AuthenticationService.LogoutAsync(); + await TokensService.RemoveAuthenticationData(); + NavigationManager.Refresh(true); + } + + #endregion + + #endregion +} \ No newline at end of file diff --git a/WatchIt.Website/WatchIt.Website/Layout/MainLayout.razor.css b/WatchIt.Website/WatchIt.Website/Layout/MainLayout.razor.css index 350d80d..7538cab 100644 --- a/WatchIt.Website/WatchIt.Website/Layout/MainLayout.razor.css +++ b/WatchIt.Website/WatchIt.Website/Layout/MainLayout.razor.css @@ -1,7 +1,21 @@ -body { - background-size: cover; +/* TAGS */ + +h1 { + margin: 0; } + + +/* IDS */ + +#user-menu { + position: fixed; +} + + + +/* CLASSES */ + .logo { font-size: 40px; } @@ -14,8 +28,4 @@ body { .body-content { padding-top: 100px; -} - -h1 { - margin: 0; } \ No newline at end of file diff --git a/WatchIt.Website/WatchIt.Website/Pages/SearchPage.razor b/WatchIt.Website/WatchIt.Website/Pages/SearchPage.razor new file mode 100644 index 0000000..ed6aeca --- /dev/null +++ b/WatchIt.Website/WatchIt.Website/Pages/SearchPage.razor @@ -0,0 +1,5 @@ +@page "/search" + + + +

SearchPage

\ No newline at end of file diff --git a/WatchIt.Website/WatchIt.Website/Pages/SearchPage.razor.cs b/WatchIt.Website/WatchIt.Website/Pages/SearchPage.razor.cs new file mode 100644 index 0000000..dbf03b0 --- /dev/null +++ b/WatchIt.Website/WatchIt.Website/Pages/SearchPage.razor.cs @@ -0,0 +1,7 @@ +using Microsoft.AspNetCore.Components; + +namespace WatchIt.Website.Pages; + +public partial class SearchPage : ComponentBase +{ +} \ No newline at end of file diff --git a/WatchIt.Website/WatchIt.Website/Pages/SearchPage.razor.css b/WatchIt.Website/WatchIt.Website/Pages/SearchPage.razor.css new file mode 100644 index 0000000..e69de29 diff --git a/WatchIt.Website/WatchIt.Website/wwwroot/app.css b/WatchIt.Website/WatchIt.Website/wwwroot/app.css index dbd9667..575af4e 100644 --- a/WatchIt.Website/WatchIt.Website/wwwroot/app.css +++ b/WatchIt.Website/WatchIt.Website/wwwroot/app.css @@ -1,5 +1,22 @@ +/* TAGS */ + +html { + height: 100%; +} + +body { + background-position: center; + background-repeat: no-repeat; + background-size: cover; + background-attachment: fixed; + + height: 100%; +} + body, html { background-color: transparent; + + height: 100%; margin: 0; padding: 0;