MateuszSkoczek/WatchIt
1
0
Fork 0
Code Issues Pull Requests Actions Projects Wiki Activity

background loading fixed, components improved

Browse Source
This commit is contained in:
Mateusz Skoczek
2024-09-27 20:35:27 +02:00
Unverified
parent fd99280ebf
commit d87f4f9d83
12 changed files with 140 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
WatchIt.Website/WatchIt.Website/Components/ErrorComponent.razor
View File

@@ -1,32 +1,28 @@
<div class="row"> <div class="rounded-3 panel panel-regular p-4">
<div class="col"> <div class="container-fluid">
<div class="rounded-3 panel panel-regular p-4"> <div class="row">
<div class="container-fluid"> <div class="col">
<div class="row"> <div class="d-flex justify-content-center">
<div class="col"> <div class="text-danger icon-size">⚠&#xFE0E;</div>
<div class="d-flex justify-content-center">
<div class="text-danger icon-size">⚠&#xFE0E;</div>
</div>
</div>
</div> </div>
<div class="row">
<div class="col">
<div class="d-flex justify-content-center">
<h3 class="text-danger">An error occured while loading a page</h3>
</div>
</div>
</div>
@if (!string.IsNullOrWhiteSpace(ErrorMessage))
{
<div class="row">
<div class="col">
<div class="d-flex justify-content-center">
<p>@ErrorMessage</p>
</div>
</div>
</div>
}
</div> </div>
</div> </div>
<div class="row">
<div class="col">
<div class="d-flex justify-content-center">
<h3 class="text-danger">An error occured while loading a page</h3>
</div>
</div>
</div>
@if (!string.IsNullOrWhiteSpace(ErrorMessage))
{
<div class="row">
<div class="col">
<div class="d-flex justify-content-center">
<p>@ErrorMessage</p>
</div>
</div>
</div>
}
</div> </div>
</div> </div>

16
WatchIt.Website/WatchIt.Website/Components/LoadingComponent.razor
View File

@@ -1,12 +1,8 @@
<div class="row"> <div class="d-flex flex-column m-5">
<div class="col"> <div class="d-flex justify-content-center">
<div class="d-flex flex-column m-5"> <div id="spinner" class="spinner-border text-dark"></div>
<div class="d-flex justify-content-center"> </div>
<div id="spinner" class="spinner-border text-dark"></div> <div class="d-flex justify-content-center">
</div> <p id="text" class="text-dark">Loading...</p>
<div class="d-flex justify-content-center">
<p id="text" class="text-dark">Loading...</p>
</div>
</div>
</div> </div>
</div> </div>

4
WatchIt.Website/WatchIt.Website/Layout/MainLayout.razor
View File

@@ -56,7 +56,7 @@
<style> <style>
/* TAGS */ /* TAGS */
body { body {
background-image: url('@(BackgroundPhoto?.Background is null ? "assets/background_temp.jpg": BackgroundPhoto.ToString())'); background-image: url('@(GetBackgroundPhoto() is null ? "assets/background_temp.jpg": GetBackgroundPhoto().ToString())');
} }
@@ -70,7 +70,7 @@
/* CLASSES */ /* CLASSES */
.logo, .main-button { .logo, .main-button {
background-image: linear-gradient(45deg, @(BackgroundPhoto?.Background is null ? "#c6721c, #85200c" : $"#{Convert.ToHexString(BackgroundPhoto.Background.FirstGradientColor)}, #{Convert.ToHexString(BackgroundPhoto.Background.SecondGradientColor)}")); background-image: linear-gradient(45deg, @(GetBackgroundPhoto() is null ? "#c6721c, #85200c" : $"#{Convert.ToHexString(GetBackgroundPhoto().Background.FirstGradientColor)}, #{Convert.ToHexString(GetBackgroundPhoto().Background.SecondGradientColor)}"));
} }
</style> </style>
} }

30
WatchIt.Website/WatchIt.Website/Layout/MainLayout.razor.cs
View File

@@ -28,6 +28,8 @@ public partial class MainLayout : LayoutComponentBase
#region FIELDS #region FIELDS
private bool _loaded = false; private bool _loaded = false;
private PhotoResponse? _defaultBackgroundPhoto;
private User? _user = null; private User? _user = null;
private AccountProfilePictureResponse? _userProfilePicture; private AccountProfilePictureResponse? _userProfilePicture;
@@ -39,8 +41,17 @@ public partial class MainLayout : LayoutComponentBase
#region PROPERTIES #region PROPERTIES
public PhotoResponse? BackgroundPhoto { get; set; } private PhotoResponse? _backgroundPhoto;
public PhotoResponse? BackgroundPhoto
{
get => _backgroundPhoto;
set
{
_backgroundPhoto = value;
StateHasChanged();
}
}
#endregion #endregion
@@ -64,7 +75,7 @@ public partial class MainLayout : LayoutComponentBase
]); ]);
endTasks.AddRange( endTasks.AddRange(
[ [
PhotosWebAPIService.GetPhotoRandomBackground(data => BackgroundPhoto = data) PhotosWebAPIService.GetPhotoRandomBackground(data => _defaultBackgroundPhoto = data)
]); ]);
// STEP 1 // STEP 1
@@ -84,6 +95,19 @@ public partial class MainLayout : LayoutComponentBase
StateHasChanged(); StateHasChanged();
} }
} }
private PhotoResponse? GetBackgroundPhoto()
{
if (BackgroundPhoto?.Background is not null)
{
return BackgroundPhoto;
}
else if (_defaultBackgroundPhoto?.Background is not null)
{
return _defaultBackgroundPhoto;
}
return null;
}
#endregion #endregion

12
WatchIt.Website/WatchIt.Website/Pages/AdminPage.razor
View File

@@ -26,11 +26,19 @@
} }
else else
{ {
<ErrorComponent ErrorMessage="You do not have permission to view this site"/> <div class="row">
<div class="col">
<ErrorComponent ErrorMessage="You do not have permission to view this site"/>
</div>
</div>
} }
} }
else else
{ {
<LoadingComponent/> <div class="row">
<div class="col">
<LoadingComponent/>
</div>
</div>
} }
</div> </div>

13
WatchIt.Website/WatchIt.Website/Pages/AdminPage.razor.cs
View File

@@ -1,15 +1,24 @@
using Microsoft.AspNetCore.Components; using Microsoft.AspNetCore.Components;
using WatchIt.Website.Layout;
using WatchIt.Website.Services.Utility.Authentication; using WatchIt.Website.Services.Utility.Authentication;
namespace WatchIt.Website.Pages; namespace WatchIt.Website.Pages;
public partial class AdminPage public partial class AdminPage
{ {
#region SERVICE #region SERVICES
[Inject] public IAuthenticationService AuthenticationService { get; set; } = default!; [Inject] public IAuthenticationService AuthenticationService { get; set; } = default!;
#endregion #endregion
#region PARAMETERS
[CascadingParameter] public MainLayout Layout { get; set; }
#endregion
@@ -28,6 +37,8 @@ public partial class AdminPage
{ {
if (firstRender) if (firstRender)
{ {
Layout.BackgroundPhoto = null;
User? user = await AuthenticationService.GetUserAsync(); User? user = await AuthenticationService.GetUserAsync();
if (user is not null && user.IsAdmin) if (user is not null && user.IsAdmin)
{ {

12
WatchIt.Website/WatchIt.Website/Pages/HomePage.razor
View File

@@ -87,11 +87,19 @@
} }
else else
{ {
<ErrorComponent ErrorMessage="@_error"/> <div class="row">
<div class="col">
<ErrorComponent ErrorMessage="@_error"/>
</div>
</div>
} }
} }
else else
{ {
<LoadingComponent/> <div class="row">
<div class="col">
<LoadingComponent/>
</div>
</div>
} }
</div> </div>

11
WatchIt.Website/WatchIt.Website/Pages/HomePage.razor.cs
View File

@@ -2,6 +2,7 @@
using WatchIt.Common.Model.Media; using WatchIt.Common.Model.Media;
using WatchIt.Common.Model.Movies; using WatchIt.Common.Model.Movies;
using WatchIt.Common.Model.Series; using WatchIt.Common.Model.Series;
using WatchIt.Website.Layout;
using WatchIt.Website.Services.WebAPI.Media; using WatchIt.Website.Services.WebAPI.Media;
using WatchIt.Website.Services.WebAPI.Movies; using WatchIt.Website.Services.WebAPI.Movies;
using WatchIt.Website.Services.WebAPI.Series; using WatchIt.Website.Services.WebAPI.Series;
@@ -21,6 +22,14 @@ public partial class HomePage
#region PARAMETERS
[CascadingParameter] public MainLayout Layout { get; set; }
#endregion
#region FIELDS #region FIELDS
private bool _loaded; private bool _loaded;
@@ -39,6 +48,8 @@ public partial class HomePage
{ {
if (firstRender) if (firstRender)
{ {
Layout.BackgroundPhoto = null;
List<Task> step1Tasks = new List<Task>(); List<Task> step1Tasks = new List<Task>();
List<Task> endTasks = new List<Task>(); List<Task> endTasks = new List<Task>();

35
WatchIt.Website/WatchIt.Website/Pages/MediaEditPage.razor
View File

@@ -362,31 +362,28 @@
} }
else else
{ {
<ErrorComponent ErrorMessage="You do not have permission to view this site"/> <div class="row">
<div class="col">
<ErrorComponent ErrorMessage="You do not have permission to view this site"/>
</div>
</div>
} }
} }
else else
{ {
<ErrorComponent ErrorMessage="@_error"/> <div class="row">
<div class="col">
<ErrorComponent ErrorMessage="@_error"/>
</div>
</div>
} }
} }
else else
{ {
<LoadingComponent/> <div class="row">
<div class="col">
<LoadingComponent/>
</div>
</div>
} }
</div> </div>
@if (_background is not null)
{
<style>
body {
background-image: url('@(_background.ToString())') !important;
}
.logo, .main-button {
background-image: linear-gradient(45deg, @($"#{BitConverter.ToString(_background.Background.FirstGradientColor).Replace("-", string.Empty)}"), @($"#{BitConverter.ToString(_background.Background.SecondGradientColor).Replace("-", string.Empty)}")) !important;
}
</style>
}

9
WatchIt.Website/WatchIt.Website/Pages/MediaEditPage.razor.cs
View File

@@ -5,6 +5,7 @@ using WatchIt.Common.Model.Media;
using WatchIt.Common.Model.Movies; using WatchIt.Common.Model.Movies;
using WatchIt.Common.Model.Photos; using WatchIt.Common.Model.Photos;
using WatchIt.Common.Model.Series; using WatchIt.Common.Model.Series;
using WatchIt.Website.Layout;
using WatchIt.Website.Services.Utility.Authentication; using WatchIt.Website.Services.Utility.Authentication;
using WatchIt.Website.Services.WebAPI.Media; using WatchIt.Website.Services.WebAPI.Media;
using WatchIt.Website.Services.WebAPI.Movies; using WatchIt.Website.Services.WebAPI.Movies;
@@ -33,6 +34,8 @@ public partial class MediaEditPage : ComponentBase
[Parameter] public long? Id { get; set; } [Parameter] public long? Id { get; set; }
[Parameter] public string? Type { get; set; } [Parameter] public string? Type { get; set; }
[CascadingParameter] public MainLayout Layout { get; set; }
#endregion #endregion
@@ -43,8 +46,6 @@ public partial class MediaEditPage : ComponentBase
private string? _error; private string? _error;
private User? _user; private User? _user;
private PhotoResponse? _background;
private MediaResponse? _media; private MediaResponse? _media;
private MovieRequest? _movieRequest; private MovieRequest? _movieRequest;
@@ -86,6 +87,8 @@ public partial class MediaEditPage : ComponentBase
{ {
if (firstRender) if (firstRender)
{ {
Layout.BackgroundPhoto = null;
List<Task> step1Tasks = new List<Task>(); List<Task> step1Tasks = new List<Task>();
List<Task> step2Tasks = new List<Task>(); List<Task> step2Tasks = new List<Task>();
List<Task> endTasks = new List<Task>(); List<Task> endTasks = new List<Task>();
@@ -112,7 +115,7 @@ public partial class MediaEditPage : ComponentBase
{ {
endTasks.AddRange( endTasks.AddRange(
[ [
MediaWebAPIService.GetMediaPhotoRandomBackground(Id.Value, data => _background = data), MediaWebAPIService.GetMediaPhotoRandomBackground(Id.Value, data => Layout.BackgroundPhoto = data),
MediaWebAPIService.GetMediaPoster(Id.Value, data => MediaWebAPIService.GetMediaPoster(Id.Value, data =>
{ {
_mediaPosterSaved = data; _mediaPosterSaved = data;

29
WatchIt.Website/WatchIt.Website/Pages/MediaPage.razor
View File

@@ -193,26 +193,19 @@ else
} }
else else
{ {
<ErrorComponent ErrorMessage="@_error"/> <div class="row">
<div class="col">
<ErrorComponent ErrorMessage="@_error"/>
</div>
</div>
} }
} }
else else
{ {
<LoadingComponent/> <div class="row">
<div class="col">
<LoadingComponent/>
</div>
</div>
} }
</div> </div>
@if (_background is not null)
{
<style>
body {
background-image: url('@($"data:{_background.MimeType};base64,{Convert.ToBase64String(_background.Image)}")') !important;
}
.logo, .main-button {
background-image: linear-gradient(45deg, @($"#{BitConverter.ToString(_background.Background.FirstGradientColor).Replace("-", string.Empty)}"), @($"#{BitConverter.ToString(_background.Background.SecondGradientColor).Replace("-", string.Empty)}")) !important;
}
</style>
}

8
WatchIt.Website/WatchIt.Website/Pages/MediaPage.razor.cs
View File

@@ -5,6 +5,7 @@ using WatchIt.Common.Model.Media;
using WatchIt.Common.Model.Movies; using WatchIt.Common.Model.Movies;
using WatchIt.Common.Model.Photos; using WatchIt.Common.Model.Photos;
using WatchIt.Common.Model.Series; using WatchIt.Common.Model.Series;
using WatchIt.Website.Layout;
using WatchIt.Website.Services.Utility.Authentication; using WatchIt.Website.Services.Utility.Authentication;
using WatchIt.Website.Services.WebAPI.Media; using WatchIt.Website.Services.WebAPI.Media;
using WatchIt.Website.Services.WebAPI.Movies; using WatchIt.Website.Services.WebAPI.Movies;
@@ -30,6 +31,8 @@ public partial class MediaPage : ComponentBase
[Parameter] public long Id { get; set; } [Parameter] public long Id { get; set; }
[CascadingParameter] public MainLayout Layout { get; set; }
#endregion #endregion
@@ -43,7 +46,6 @@ public partial class MediaPage : ComponentBase
private User? _user; private User? _user;
private PhotoResponse? _background;
private MediaPosterResponse? _poster; private MediaPosterResponse? _poster;
private IEnumerable<GenreResponse> _genres; private IEnumerable<GenreResponse> _genres;
private MediaRatingResponse _globalRating; private MediaRatingResponse _globalRating;
@@ -62,6 +64,8 @@ public partial class MediaPage : ComponentBase
{ {
if (firstRender) if (firstRender)
{ {
Layout.BackgroundPhoto = null;
List<Task> step1Tasks = new List<Task>(); List<Task> step1Tasks = new List<Task>();
List<Task> step2Tasks = new List<Task>(); List<Task> step2Tasks = new List<Task>();
List<Task> endTasks = new List<Task>(); List<Task> endTasks = new List<Task>();
@@ -84,7 +88,7 @@ public partial class MediaPage : ComponentBase
endTasks.AddRange( endTasks.AddRange(
[ [
MediaWebAPIService.PostMediaView(Id), MediaWebAPIService.PostMediaView(Id),
MediaWebAPIService.GetMediaPhotoRandomBackground(Id, data => _background = data), MediaWebAPIService.GetMediaPhotoRandomBackground(Id, data => Layout.BackgroundPhoto = data),
MediaWebAPIService.GetMediaPoster(Id, data => _poster = data), MediaWebAPIService.GetMediaPoster(Id, data => _poster = data),
MediaWebAPIService.GetMediaGenres(Id, data => _genres = data), MediaWebAPIService.GetMediaGenres(Id, data => _genres = data),
MediaWebAPIService.GetMediaRating(Id, data => _globalRating = data), MediaWebAPIService.GetMediaRating(Id, data => _globalRating = data),