background loading fixed, components improved

This commit is contained in:
2024-09-27 20:35:27 +02:00
Unverified
parent fd99280ebf
commit d87f4f9d83
12 changed files with 140 additions and 89 deletions

View File

@@ -1,6 +1,4 @@
<div class="row">
<div class="col">
<div class="rounded-3 panel panel-regular p-4">
<div class="rounded-3 panel panel-regular p-4">
<div class="container-fluid">
<div class="row">
<div class="col">
@@ -27,6 +25,4 @@
</div>
}
</div>
</div>
</div>
</div>

View File

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

View File

@@ -56,7 +56,7 @@
<style>
/* TAGS */
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 */
.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>
}

View File

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

View File

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

View File

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

View File

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

View File

@@ -2,6 +2,7 @@
using WatchIt.Common.Model.Media;
using WatchIt.Common.Model.Movies;
using WatchIt.Common.Model.Series;
using WatchIt.Website.Layout;
using WatchIt.Website.Services.WebAPI.Media;
using WatchIt.Website.Services.WebAPI.Movies;
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
private bool _loaded;
@@ -39,6 +48,8 @@ public partial class HomePage
{
if (firstRender)
{
Layout.BackgroundPhoto = null;
List<Task> step1Tasks = new List<Task>();
List<Task> endTasks = new List<Task>();

View File

@@ -362,31 +362,28 @@
}
else
{
<div class="row">
<div class="col">
<ErrorComponent ErrorMessage="You do not have permission to view this site"/>
</div>
</div>
}
}
else
{
<div class="row">
<div class="col">
<ErrorComponent ErrorMessage="@_error"/>
</div>
</div>
}
}
else
{
<div class="row">
<div class="col">
<LoadingComponent/>
</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>
}

View File

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

View File

@@ -193,26 +193,19 @@ else
}
else
{
<div class="row">
<div class="col">
<ErrorComponent ErrorMessage="@_error"/>
</div>
</div>
}
}
else
{
<div class="row">
<div class="col">
<LoadingComponent/>
</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>
}

View File

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