background loading fixed, components improved

WatchIt.Website/WatchIt.Website/Components/ErrorComponent.razor

@@ -1,6 +1,4 @@
-<div class="row">
+<div class="rounded-3 panel panel-regular p-4">
-    <div class="col">
-        <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>

WatchIt.Website/WatchIt.Website/Components/LoadingComponent.razor

@@ -1,12 +1,8 @@
-<div class="row">
+<div class="d-flex flex-column m-5">
-    <div class="col">
-        <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>

WatchIt.Website/WatchIt.Website/Layout/MainLayout.razor

@@ -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>
     }

WatchIt.Website/WatchIt.Website/Layout/MainLayout.razor.cs

@@ -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

WatchIt.Website/WatchIt.Website/Pages/AdminPage.razor

@@ -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>

WatchIt.Website/WatchIt.Website/Pages/AdminPage.razor.cs

@@ -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)
             {

WatchIt.Website/WatchIt.Website/Pages/HomePage.razor

@@ -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>

WatchIt.Website/WatchIt.Website/Pages/HomePage.razor.cs

@@ -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>();
             

WatchIt.Website/WatchIt.Website/Pages/MediaEditPage.razor

@@ -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>
-}

WatchIt.Website/WatchIt.Website/Pages/MediaEditPage.razor.cs

@@ -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;

WatchIt.Website/WatchIt.Website/Pages/MediaPage.razor

@@ -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>
-}

WatchIt.Website/WatchIt.Website/Pages/MediaPage.razor.cs

@@ -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),