Merge pull request #131 from mateuszskoczek/features/person_page

Features/person page

WatchIt.Common/WatchIt.Common.Model/Rating/RatingResponse.cs

@@ -45,6 +45,11 @@ public class RatingResponse
     {
         IEnumerable<RatingPersonActorRole> ratingsActorRoles = personActorRoles.SelectMany(x => x.RatingPersonActorRole);
         IEnumerable<RatingPersonCreatorRole> ratingsCreatorRoles = personCreatorRoles.SelectMany(x => x.RatingPersonCreatorRole);
+        return Create(ratingsActorRoles, ratingsCreatorRoles);
+    }
+
+    public static RatingResponse Create(IEnumerable<RatingPersonActorRole> ratingsActorRoles, IEnumerable<RatingPersonCreatorRole> ratingsCreatorRoles)
+    {
         long ratingSum = ratingsActorRoles.Sum(x => x.Rating) + ratingsCreatorRoles.Sum(x => x.Rating);
         long ratingCount = ratingsActorRoles.Count() + ratingsCreatorRoles.Count(); 
         return new RatingResponse(ratingSum, ratingCount);

WatchIt.WebAPI/WatchIt.WebAPI.Controllers/PersonsController.cs

@@ -3,6 +3,7 @@ using Microsoft.AspNetCore.Authorization;
 using Microsoft.AspNetCore.Http;
 using Microsoft.AspNetCore.Mvc;
 using WatchIt.Common.Model.Persons;
+using WatchIt.Common.Model.Rating;
 using WatchIt.Common.Model.Roles;
 using WatchIt.WebAPI.Services.Controllers.Persons;
 
@@ -145,6 +146,22 @@ public class PersonsController : ControllerBase
     [ProducesResponseType(StatusCodes.Status404NotFound)]
     public async Task<ActionResult> PostPersonCreatorRole([FromRoute]long id, [FromBody]CreatorRolePersonRequest body) => await _personsControllerService.PostPersonCreatorRole(id, body);
 
+    #endregion
+
+    #region Rating
+
+    [HttpGet("{id}/rating")]
+    [AllowAnonymous]
+    [ProducesResponseType(typeof(RatingResponse), StatusCodes.Status200OK)]
+    [ProducesResponseType(StatusCodes.Status404NotFound)]
+    public async Task<ActionResult> GetPersonGlobalRating([FromRoute]long id) => await _personsControllerService.GetPersonGlobalRating(id);
+    
+    [HttpGet("{id}/rating/{user_id}")]
+    [AllowAnonymous]
+    [ProducesResponseType(typeof(RatingResponse), StatusCodes.Status200OK)]
+    [ProducesResponseType(StatusCodes.Status404NotFound)]
+    public async Task<ActionResult> GetPersonUserRating([FromRoute]long id, [FromRoute(Name = "user_id")]long userId) => await _personsControllerService.GetPersonUserRating(id, userId);
+
     #endregion
     
     #endregion

WatchIt.WebAPI/WatchIt.WebAPI.Services/WatchIt.WebAPI.Services.Controllers/WatchIt.WebAPI.Services.Controllers.Persons/IPersonsControllerService.cs

@@ -23,4 +23,7 @@ public interface IPersonsControllerService
     Task<RequestResult> PostPersonActorRole(long personId, ActorRolePersonRequest data);
     Task<RequestResult> GetPersonAllCreatorRoles(long personId, CreatorRolePersonQueryParameters queryParameters);
     Task<RequestResult> PostPersonCreatorRole(long personId, CreatorRolePersonRequest data);
+
+    Task<RequestResult> GetPersonGlobalRating(long id);
+    Task<RequestResult> GetPersonUserRating(long id, long userId);
 }

WatchIt.WebAPI/WatchIt.WebAPI.Services/WatchIt.WebAPI.Services.Controllers/WatchIt.WebAPI.Services.Controllers.Persons/PersonsControllerService.cs

@@ -1,8 +1,10 @@
 using Microsoft.EntityFrameworkCore;
 using WatchIt.Common.Model.Persons;
+using WatchIt.Common.Model.Rating;
 using WatchIt.Common.Model.Roles;
 using WatchIt.Database;
 using WatchIt.Database.Model.Person;
+using WatchIt.Database.Model.Rating;
 using WatchIt.Database.Model.ViewCount;
 using WatchIt.WebAPI.Services.Controllers.Common;
 using WatchIt.WebAPI.Services.Utility.User;
@@ -321,6 +323,38 @@ public class PersonsControllerService : IPersonsControllerService
         return RequestResult.Created($"roles/creator/{item.Id}", new CreatorRoleResponse(item));
     }
     
+    #endregion
+
+    #region Rating
+
+    public async Task<RequestResult> GetPersonGlobalRating(long id)
+    {
+        Person? item = await _database.Persons.FirstOrDefaultAsync(x => x.Id == id);
+        if (item is null)
+        {
+            return RequestResult.NotFound();
+        }
+        
+        RatingResponse ratingResponse = RatingResponse.Create(item.PersonActorRoles, item.PersonCreatorRoles);
+        
+        return RequestResult.Ok(ratingResponse);
+    }
+
+    public async Task<RequestResult> GetPersonUserRating(long id, long userId)
+    {
+        Person? item = await _database.Persons.FirstOrDefaultAsync(x => x.Id == id);
+        if (item is null)
+        {
+            return RequestResult.NotFound();
+        }
+        
+        IEnumerable<RatingPersonActorRole> actorRoleRatings = item.PersonActorRoles.SelectMany(x => x.RatingPersonActorRole).Where(x => x.AccountId == userId);
+        IEnumerable<RatingPersonCreatorRole> creatorRoleRatings = item.PersonCreatorRoles.SelectMany(x => x.RatingPersonCreatorRole).Where(x => x.AccountId == userId);
+        RatingResponse ratingResponse = RatingResponse.Create(actorRoleRatings, creatorRoleRatings);
+        
+        return RequestResult.Ok(ratingResponse);
+    }
+
     #endregion
     
     #endregion

WatchIt.Website/WatchIt.Website.Services/WatchIt.Website.Services.Utility/WatchIt.Website.Services.Utility.Configuration/Model/Persons.cs

@@ -17,4 +17,6 @@ public class Persons
     public string PostPersonActorRole { get; set; }
     public string GetPersonAllCreatorRoles { get; set; }
     public string PostPersonCreatorRole { get; set; }
+    public string GetPersonGlobalRating { get; set; }
+    public string GetPersonUserRating { get; set; }
 }

WatchIt.Website/WatchIt.Website.Services/WatchIt.Website.Services.WebAPI/WatchIt.Website.Services.WebAPI.Persons/IPersonsWebAPIService.cs

@@ -1,4 +1,5 @@
 using WatchIt.Common.Model.Persons;
+using WatchIt.Common.Model.Rating;
 using WatchIt.Common.Model.Roles;
 
 namespace WatchIt.Website.Services.WebAPI.Persons;
@@ -12,6 +13,7 @@ public interface IPersonsWebAPIService
     Task DeletePerson(long id, Action? successAction = null, Action? unauthorizedAction = null, Action? forbiddenAction = null);
     
     Task GetPersonsViewRank(int? first = null, int? days = null, Action<IEnumerable<PersonResponse>>? successAction = null, Action<IDictionary<string, string[]>>? badRequestAction = null);
+    Task PostPersonView(long personId, Action? successAction = null, Action? notFoundAction = null);
     
     Task GetPersonPhoto(long id, Action<PersonPhotoResponse>? successAction = null, Action<IDictionary<string, string[]>>? badRequestAction = null, Action? notFoundAction = null);
     Task PutPersonPhoto(long id, PersonPhotoRequest data, Action<PersonPhotoResponse>? successAction = null, Action<IDictionary<string, string[]>>? badRequestAction = null, Action? unauthorizedAction = null, Action? forbiddenAction = null);
@@ -21,4 +23,7 @@ public interface IPersonsWebAPIService
     Task PostPersonActorRole(long id, ActorRolePersonRequest data, Action<ActorRoleResponse>? successAction = null, Action<IDictionary<string, string[]>>? badRequestAction = null, Action? unauthorizedAction = null, Action? forbiddenAction = null);
     Task GetPersonAllCreatorRoles(long id, CreatorRolePersonQueryParameters? query = null, Action<IEnumerable<CreatorRoleResponse>>? successAction = null);
     Task PostPersonCreatorRole(long id, CreatorRolePersonRequest data, Action<CreatorRoleResponse>? successAction = null, Action<IDictionary<string, string[]>>? badRequestAction = null, Action? unauthorizedAction = null, Action? forbiddenAction = null);
+
+    Task GetPersonGlobalRating(long id, Action<RatingResponse>? successAction = null, Action? notFoundAction = null);
+    Task GetPersonUserRating(long id, long userId, Action<RatingResponse>? successAction = null, Action? notFoundAction = null);
 }

WatchIt.Website/WatchIt.Website.Services/WatchIt.Website.Services.WebAPI/WatchIt.Website.Services.WebAPI.Persons/PersonsWebAPIService.cs

@@ -2,6 +2,7 @@
 using Microsoft.AspNetCore.Components;
 using Microsoft.Extensions.Primitives;
 using WatchIt.Common.Model.Persons;
+using WatchIt.Common.Model.Rating;
 using WatchIt.Common.Model.Roles;
 using WatchIt.Common.Services.HttpClient;
 using WatchIt.Website.Services.Utility.Configuration;
@@ -139,7 +140,7 @@ public class PersonsWebAPIService : BaseWebAPIService, IPersonsWebAPIService
                 .ExecuteAction();
     }
     
-    public async Task PostPersonsView(long personId, Action? successAction = null, Action? notFoundAction = null)
+    public async Task PostPersonView(long personId, Action? successAction = null, Action? notFoundAction = null)
     {
         string url = GetUrl(EndpointsConfiguration.Persons.PostPersonsView, personId);
         
@@ -258,6 +259,34 @@ public class PersonsWebAPIService : BaseWebAPIService, IPersonsWebAPIService
     
     #endregion
 
+    #region Rating
+
+    public async Task GetPersonGlobalRating(long id, Action<RatingResponse>? successAction = null, Action? notFoundAction = null)
+    {
+        string url = GetUrl(EndpointsConfiguration.Persons.GetPersonGlobalRating, id);
+        
+        HttpRequest request = new HttpRequest(HttpMethodType.Get, url);
+        
+        HttpResponse response = await _httpClientService.SendRequestAsync(request);
+        response.RegisterActionFor2XXSuccess(successAction)
+                .RegisterActionFor404NotFound(notFoundAction)
+                .ExecuteAction();
+    }
+    
+    public async Task GetPersonUserRating(long id, long userId, Action<RatingResponse>? successAction = null, Action? notFoundAction = null)
+    {
+        string url = GetUrl(EndpointsConfiguration.Persons.GetPersonUserRating, id, userId);
+        
+        HttpRequest request = new HttpRequest(HttpMethodType.Get, url);
+        
+        HttpResponse response = await _httpClientService.SendRequestAsync(request);
+        response.RegisterActionFor2XXSuccess(successAction)
+                .RegisterActionFor404NotFound(notFoundAction)
+                .ExecuteAction();
+    }
+
+    #endregion
+
     #endregion
     
     

WatchIt.Website/WatchIt.Website/App.razor

@@ -9,11 +9,11 @@
     <link rel="icon" type="image/png" href="favicon.png"/>
     
     <!-- CSS -->
-    <link rel="stylesheet" href="css/general.css?version=0.3.0.4"/>
+    <link rel="stylesheet" href="css/general.css?version=0.3.0.5"/>
     <link rel="stylesheet" href="css/panel.css?version=0.3.0.3"/>
     <link rel="stylesheet" href="css/main_button.css?version=0.3.0.0"/>
     <link rel="stylesheet" href="css/gaps.css?version=0.3.0.1"/>
-    <link rel="stylesheet" href="WatchIt.Website.styles.css?version=0.3.0.16"/>
+    <link rel="stylesheet" href="WatchIt.Website.styles.css?version=0.3.0.22"/>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
     
     <!-- BOOTSTRAP -->

WatchIt.Website/WatchIt.Website/Components/Common/Panels/ItemPageHeaderPanelComponent.razor

@@ -0,0 +1,22 @@
+<div class="container-grid mt-grid">
+    <div class="row">
+        <div class="col-auto">
+            <PictureComponent Picture="@(_poster)" Placeholder="@(PosterPlaceholder)" AlternativeText="poster" Height="350"/>
+        </div>
+        <div class="col">
+            <div class="d-flex flex-column justify-content-end h-100">
+                <h1 class="fw-bold title-shadow">@(Name)</h1>
+                <div class="d-flex flex-column gap-3">
+                    @if (!string.IsNullOrWhiteSpace(Subname))
+                    {
+                        <span class="fst-italic description-shadow">@(Subname)</span>
+                    }
+                    @if (!string.IsNullOrWhiteSpace(Description))
+                    {
+                        <span class="description-shadow">@(Description)</span>
+                    }
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

WatchIt.Website/WatchIt.Website/Components/Common/Panels/ItemPageHeaderPanelComponent.razor.cs

@@ -0,0 +1,51 @@
+using Microsoft.AspNetCore.Components;
+using WatchIt.Common.Model;
+
+namespace WatchIt.Website.Components.Common.Panels;
+
+public partial class ItemPageHeaderPanelComponent : ComponentBase
+{
+    #region PARAMETERS
+    
+    [Parameter] public required string Name { get; set; }
+    [Parameter] public string? Subname { get; set; }
+    [Parameter] public string? Description { get; set; }
+    
+    [Parameter] public required string PosterPlaceholder { get; set; }
+    [Parameter] public required Func<Action<Picture>, Task> GetPosterMethod { get; set; }
+
+    #endregion
+    
+    
+    
+    #region FIELDS
+    
+    private Picture? _poster;
+    
+    #endregion
+
+
+
+    #region PRIVATE METHODS
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            List<Task> endTasks = new List<Task>(1);
+            
+            // STEP 0
+            endTasks.AddRange(
+            [
+                GetPosterMethod(data => _poster = data)
+            ]);
+            
+            // END
+            await Task.WhenAll(endTasks);
+            
+            StateHasChanged();
+        }
+    }
+
+    #endregion
+}

WatchIt.Website/WatchIt.Website/Components/Common/Panels/ItemPageHeaderPanelComponent.razor.css

@@ -0,0 +1,13 @@
+/* CLASSES */
+
+.mt-grid {
+    margin-top: 9rem !important;
+}
+
+.title-shadow {
+    text-shadow: 2px 2px 2px #000;
+}
+
+.description-shadow {
+    text-shadow: 1px 1px 1px #000;
+}

WatchIt.Website/WatchIt.Website/Components/Common/Panels/PictureEditorPanelComponent.razor

@@ -2,7 +2,7 @@
     @if (_loaded)
     {
         <div class="vstack gap-3">
-            <PictureComponent Picture="@(_pictureSelected)" Placeholder="@(PicturePlaceholder)" AlternativeText="poster" Width="@(ContentWidth)"/>
+            <PictureComponent Picture="@(_pictureSelected)" Placeholder="@(PicturePlaceholder)" AlternativeText="poster" Width="@(ContentWidth)" AspectRatio="PictureComponent.PictureComponentAspectRatio.Default"/>
             <InputFile class="form-control content-width" OnChange="Load" disabled="@(!Id.HasValue)" autocomplete="off"/>
             @if (_pictureChanged || _pictureSaved is not null)
             {

WatchIt.Website/WatchIt.Website/Components/Common/Subcomponents/DisplayRatingComponent.razor

@@ -0,0 +1,51 @@
+@using Blazorise.Extensions
+<div class="d-flex align-items-center gap-2">
+    @if (Rating is null || Rating.Count > 0 || EmptyMode == DisplayRatingComponentEmptyMode.DoubleDash)
+    {
+        <i id="star" class="fas fa-star"></i>
+    }
+    <div class="vstack">
+        @if (Rating is not null && Rating.Count > 0)
+        {
+            <span id="ratingAverage">@($"{Math.Round(Rating.Average, 2)}/10")</span>
+            <span id="ratingCount">@(Rating.Count)</span>
+        }
+        else
+        {
+            <div id="ratingNoItems">
+                @if (Rating is null)
+                {
+                    <span><div class="spinner-border spinner-border-sm"></div>/10</span>
+                }
+                else
+                {
+                    switch (EmptyMode)
+                    {
+                        case DisplayRatingComponentEmptyMode.NoRatings: @("no ratings"); break;
+                        case DisplayRatingComponentEmptyMode.DoubleDash: @("--/10"); break;
+                    }
+                }
+            </div>
+        }
+    </div>
+</div>
+
+<style>
+    #star {
+        font-size: @((2 * Scale).ToCultureInvariantString())rem;
+    }
+
+    #ratingAverage {
+        margin-top: @((-5 * Scale).ToCultureInvariantString())px;
+        font-size: @((1.3 * Scale).ToCultureInvariantString())rem;
+    }
+
+    #ratingNoItems {
+        font-size: @((1.3 * Scale).ToCultureInvariantString())rem;
+    }
+
+    #ratingCount {
+        margin-top: @((-5 * Scale).ToCultureInvariantString())px;
+        font-size: @((0.8 * Scale).ToCultureInvariantString())rem;
+    }
+</style>

WatchIt.Website/WatchIt.Website/Components/Common/Subcomponents/DisplayRatingComponent.razor.cs

@@ -0,0 +1,27 @@
+using Microsoft.AspNetCore.Components;
+using WatchIt.Common.Model.Rating;
+
+namespace WatchIt.Website.Components.Common.Subcomponents;
+
+public partial class DisplayRatingComponent : ComponentBase
+{
+    #region PARAMETERS
+    
+    [Parameter] public RatingResponse? Rating { get; set; }
+    [Parameter] public DisplayRatingComponentEmptyMode EmptyMode { get; set; } = DisplayRatingComponentEmptyMode.NoRatings;
+    [Parameter] public double Scale { get; set; } = 1;
+
+    #endregion
+    
+    
+    
+    #region ENUMS
+
+    public enum DisplayRatingComponentEmptyMode
+    {
+        NoRatings,
+        DoubleDash,
+    }
+    
+    #endregion
+}

WatchIt.Website/WatchIt.Website/Components/Common/Subcomponents/ListItemComponent.razor

@@ -1,24 +1,50 @@
 <div class="container-grid">
     <div class="row">
         <div class="col-auto">
-            <PictureComponent Picture="@(_picture)" Placeholder="/assets/media_poster.png" AlternativeText="poster" Height="@(PictureHeight)"/>
+            <a class="text-reset text-decoration-none" href="@(ItemUrl)">
+                <PictureComponent Picture="@(_poster)" Placeholder="@(PosterPlaceholder)" AlternativeText="poster" Height="@(PosterHeight)"/>
+            </a>
         </div>
         <div class="col">
             <div class="d-flex align-items-start flex-column h-100">
                 <div class="mb-auto">
-                    <span id="nameText">
+                    <a style="font-size: @(NameSize)px" class="text-reset text-decoration-none" href="@(ItemUrl)">
-                        <strong>@(Name)</strong>@(string.IsNullOrWhiteSpace(AdditionalNameInfo) ? string.Empty : AdditionalNameInfo)
+                        <strong>@(Name)</strong>@(string.IsNullOrWhiteSpace(AdditionalInfo) ? string.Empty : AdditionalInfo)
-                    </span>
+                    </a>
                 </div>
-                <div class="d-inline-flex gap-2">
+                <div class="d-inline-flex gap-3">
-                    <span id="ratingStar">★</span>
+                    <a class="text-reset text-decoration-none" href="@(ItemUrl)">
-                    <div class="d-inline-flex flex-column justify-content-center">
+                        <div class="vstack gap-2">
-                        <span id="ratingValue">@(Rating.Count > 0 ? Rating.Average : "--")/10</span>
+                            <span id="ratingNameText">Global rating:</span>
-                        @if (Rating.Count > 0)
+                            <DisplayRatingComponent Rating="GlobalRating"
-                        {
+                                                    EmptyMode="DisplayRatingComponent.DisplayRatingComponentEmptyMode.DoubleDash"
-                            <span id="ratingCount">@(Rating.Count)</span>
+                                                    Scale="0.85"/>
-                        }
+                        </div>
-                    </div>
+                    </a>
+                    @if (GetUserRatingMethod is not null && PutRatingMethod is not null && DeleteRatingMethod is not null)
+                    {
+                        <div class="vr"></div>
+                        <div class="vstack gap-2">
+                            <span id="ratingNameText">Your rating:</span>
+                            <div class="d-inline-flex align-items-center h-100">
+                                @if (_user is null)
+                                {
+                                    <span id="ratingLoginInfoText">You must be logged in to rate</span>
+                                }
+                                else if (!_userRatingLoaded)
+                                {
+                                    <div class="d-flex align-items-center gap-2">
+                                        <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
+                                        <span>Loading...</span>
+                                    </div>
+                                }
+                                else
+                                {
+                                    <Rating Color="Color.Light" MaxValue="10" @bind-SelectedValue="@(_userRating)" @onclick="@(RatingChanged)"/>
+                                }
+                            </div>
+                        </div>
+                    }
                 </div>
             </div>
         </div>

WatchIt.Website/WatchIt.Website/Components/Common/Subcomponents/ListItemComponent.razor.cs

@@ -1,29 +1,52 @@
 using Microsoft.AspNetCore.Components;
 using WatchIt.Common.Model;
 using WatchIt.Common.Model.Rating;
+using WatchIt.Website.Services.Utility.Authentication;
 
 namespace WatchIt.Website.Components.Common.Subcomponents;
 
 public partial class ListItemComponent : ComponentBase
 {
+    #region SERVICES
+
+    [Inject] private IAuthenticationService AuthenticationService { get; set; } = default!;
+    
+    #endregion
+    
+    
+    
     #region PARAMETERS
     
-    [Parameter] public required long Id { get; set; }
     [Parameter] public required string Name { get; set; }
-    [Parameter] public string? AdditionalNameInfo { get; set; }
+    [Parameter] public string? AdditionalInfo { get; set; }
-    [Parameter] public required RatingResponse Rating { get; set; }
+    
-    [Parameter] public required Func<long, Action<Picture>, Task> PictureDownloadingTask { get; set; }
+    [Parameter] public int NameSize { get; set; } = 25;
-    [Parameter] public int PictureHeight { get; set; } = 150;
+    
+    [Parameter] public required string PosterPlaceholder { get; set; }
+    [Parameter] public int PosterHeight { get; set; } = 150;
+    [Parameter] public required Func<Action<Picture>, Task> PosterDownloadingTask { get; set; }
+    
+    [Parameter] public RatingResponse? GlobalRating { get; set; }
+    [Parameter] public required Func<Action<RatingResponse>, Task> GetGlobalRatingMethod { get; set; }
+    [Parameter] public Func<long, Action<short>, Action, Task>? GetUserRatingMethod { get; set; }
+    [Parameter] public Func<RatingRequest, Task>? PutRatingMethod { get; set; }
+    [Parameter] public Func<Task>? DeleteRatingMethod { get; set; }
+    [Parameter] public Action? OnRatingChanged { get; set; }
+    
+    [Parameter] public required string ItemUrl { get; set; }
 
     #endregion
     
     
     
     #region FIELDS
-
-    private bool _loaded;
     
-    private Picture? _picture;
+    private User? _user;
+    
+    private Picture? _poster;
+    
+    private int _userRating;
+    private bool _userRatingLoaded;
     
     #endregion
     
@@ -35,20 +58,71 @@ public partial class ListItemComponent : ComponentBase
     {
         if (firstRender)
         {
-            List<Task> endTasks = new List<Task>();
+            List<Task> step1Tasks = new List<Task>(1);
+            List<Task> endTasks = new List<Task>(3);
             
             // STEP 0
+            if (GetUserRatingMethod is not null)
+            {
+                step1Tasks.AddRange(
+                [
+                    Task.Run(async () => _user = await AuthenticationService.GetUserAsync()), 
+                ]);
+            }
             endTasks.AddRange(
             [
-                PictureDownloadingTask(Id, picture => _picture = picture),
+                PosterDownloadingTask(data => _poster = data),
             ]);
+            if (GlobalRating is null)
+            {
+                endTasks.AddRange(
+                [
+                    GetGlobalRatingMethod(data => GlobalRating = data),
+                ]);
+            }
+            
+            // STEP 1
+            await Task.WhenAll(step1Tasks);
+            StateHasChanged();
+            if (GetUserRatingMethod is not null && _user is not null)
+            {
+                endTasks.AddRange(
+                [
+                    GetUserRatingMethod(_user.Id, 
+                        data =>
+                        {
+                            _userRating = data;
+                            _userRatingLoaded = true;
+                        }, 
+                        () =>
+                        {
+                            _userRating = 0;
+                            _userRatingLoaded = true;
+                        }
+                    )
+                ]);
+            }
             
             await Task.WhenAll(endTasks);
             
-            _loaded = true;
             StateHasChanged();
         }
     }
+    
+    private async Task RatingChanged()
+    {
+        if (_userRating == 0)
+        {
+            await DeleteRatingMethod!();
+        }
+        else
+        {
+            await PutRatingMethod!(new RatingRequest((short)_userRating));
+        }
+        
+        await GetGlobalRatingMethod(data => GlobalRating = data);
+        OnRatingChanged?.Invoke();
+    }
 
     #endregion
 }

WatchIt.Website/WatchIt.Website/Components/Common/Subcomponents/ListItemComponent.razor.css

@@ -1,17 +1,10 @@
 /* IDS */
 
-#nameText {
+#ratingNameText {
-    font-size: 25px;
+    font-size: 14px;
+    font-weight: bold;
 }
 
-#ratingStar {
+#ratingLoginInfoText {
-    font-size: 30px;
+    font-size: 13px;
-}
-
-#ratingValue {
-    font-size: 20px;
-}
-
-#ratingCount {
-    font-size: 10px;
 }

WatchIt.Website/WatchIt.Website/Components/Common/Subcomponents/PictureComponent.razor

@@ -1,7 +1 @@
-<img id="imgObject" class="rounded-2 shadow object-fit-cover @(Class)" src="@(Picture is not null ? Picture.ToString() : Placeholder)" alt="@(AlternativeText)" @attributes="@(_attributes)"/>
+<img id="imgObject" class="rounded-2 shadow object-fit-cover @(Class)" src="@(Picture is not null ? Picture.ToString() : Placeholder)" alt="@(AlternativeText)" @attributes="@(_attributes)" style="aspect-ratio: @(AspectRatio.ToString());"/>
-
-<style>
-    #imgObject {
-        aspect-ratio: @(AspectRatio.ToString());
-    }
-</style>

WatchIt.Website/WatchIt.Website/Components/Common/Subcomponents/RoleListComponent.razor

@@ -0,0 +1,58 @@
+@typeparam TRole where TRole : WatchIt.Common.Model.Roles.IRoleResponse, WatchIt.Common.Query.IQueryOrderable<TRole>
+@typeparam TQuery where TQuery : WatchIt.Common.Query.QueryParameters<TRole>
+@typeparam TRoleParent
+
+
+
+@if (_loaded)
+{
+    if (_roles.Count > 0)
+    {
+        <div class="vstack">
+            @for (int i = 0; i < _roles.Count; i++)
+            {
+                {
+                    int iCopy = i;
+                    KeyValuePair<TRole, TRoleParent> roleParentPair = _roles.ElementAt(i);
+                    TRole role = roleParentPair.Key;
+                    TRoleParent parent = roleParentPair.Value;
+                    string url = string.Format(ParentUrlTemplate, ParentItemIdSource(role));
+                    if (i > 0)
+                    {
+                        <hr/>
+                    }
+                    <ListItemComponent Name="@(NameSource(role, parent))"
+                                       AdditionalInfo="@(AdditionalInfoSource is not null ? AdditionalInfoSource(role, parent) : null)"
+                                       PosterPlaceholder="@(PosterPlaceholder)"
+                                       PosterDownloadingTask="@(action => PosterDownloadingTask(ParentItemIdSource(role), action))"
+                                       GetGlobalRatingMethod="@(action => GetGlobalRatingMethod(role.Id, action))"
+                                       GetUserRatingMethod="@((user, actionSuccess, actionNotFound) => GetUserRatingMethod(role.Id, user, actionSuccess, actionNotFound))"
+                                       PutRatingMethod="@(request => PutRatingMethod(role.Id, request))"
+                                       DeleteRatingMethod="@(() => DeleteRatingMethod(role.Id))"
+                                       ItemUrl="@(url)"
+                                       PosterHeight="110"
+                                       NameSize="20"
+                                       OnRatingChanged="@(OnRatingChanged)"/>
+                } 
+            }
+            @if (!_allItemsLoaded)
+            {
+                <div class="d-flex justify-content-center">
+                    <button class="btn btn-secondary" @onclick="@(async () => await GetRoles())">
+                        <LoadingButtonContentComponent Content="Load more"
+                                                       LoadingContent="Loading..."
+                                                       IsLoading="@(_rolesFetching)"/>
+                    </button>
+                </div>
+            }
+        </div>
+    }
+    else
+    {
+        <span class="text-center">No roles found</span>
+    }
+}
+else
+{
+    <LoadingComponent Color="LoadingComponent.LoadingComponentColors.Light"/>
+}

WatchIt.Website/WatchIt.Website/Components/Common/Subcomponents/RoleListComponent.razor.cs

@@ -1,33 +1,35 @@
-using System.ComponentModel;
 using Microsoft.AspNetCore.Components;
+using WatchIt.Common.Model;
 using WatchIt.Common.Model.Rating;
-using WatchIt.Common.Model.Roles;
-using WatchIt.Common.Query;
 
-namespace WatchIt.Website.Components.Pages.MediaPage.Subcomponents;
+namespace WatchIt.Website.Components.Common.Subcomponents;
 
-public partial class RoleListComponent<TRole, TQuery> : ComponentBase where TRole : IRoleResponse, IQueryOrderable<TRole> where TQuery : QueryParameters<TRole>
+public partial class RoleListComponent<TRole, TQuery, TRoleParent> : ComponentBase where TRole : WatchIt.Common.Model.Roles.IRoleResponse, WatchIt.Common.Query.IQueryOrderable<TRole>
+                                                                                   where TQuery : WatchIt.Common.Query.QueryParameters<TRole>
 {
-    #region SERVICES
-    
-    [Inject] private NavigationManager NavigationManager { get; set; } = default!;
-    
-    #endregion
-    
-    
-    
     #region PARAMETERS
     
     [Parameter] public required long Id { get; set; }
     [Parameter] public TQuery Query { get; set; } = Activator.CreateInstance<TQuery>();
-    [Parameter] public Func<TRole, string>? AdditionalTextSource { get; set; } 
-    
     [Parameter] public required Func<long, TQuery, Action<IEnumerable<TRole>>, Task> GetRolesAction { get; set; }
-    [Parameter] public required Func<Guid, Action<RatingResponse>, Task> GetGlobalRatingAction { get; set; }
+    
-    [Parameter] public required Func<Guid, long, Action<short>, Action, Task> GetUserRatingAction { get; set; }
+    [Parameter] public required Func<TRole, TRoleParent, string> NameSource { get; set; }
-    [Parameter] public required Func<Guid, RatingRequest, Task> PutRatingAction { get; set; }
+    [Parameter] public Func<TRole, TRoleParent, string>? AdditionalInfoSource { get; set; }
-    [Parameter] public required Func<Guid, Task> DeleteRatingAction { get; set; }
+    
-
+    [Parameter] public required Func<long, Action<TRoleParent>, Task> GetRoleParentMethod { get; set; }
+    [Parameter] public required Func<TRole, long> ParentItemIdSource { get; set; }
+    [Parameter] public required string ParentUrlTemplate { get; set; }
+    
+    [Parameter] public required string PosterPlaceholder { get; set; }
+    [Parameter] public required Func<long, Action<Picture>, Task> PosterDownloadingTask { get; set; }
+    
+    [Parameter] public required Func<Guid, Action<RatingResponse>, Task> GetGlobalRatingMethod { get; set; }
+    [Parameter] public required Func<Guid, long, Action<short>, Action, Task> GetUserRatingMethod { get; set; }
+    [Parameter] public required Func<Guid, RatingRequest, Task> PutRatingMethod { get; set; }
+    [Parameter] public required Func<Guid, Task> DeleteRatingMethod { get; set; }
+    
+    [Parameter] public Action? OnRatingChanged { get; set; }
+    
     #endregion
     
     
@@ -39,7 +41,7 @@ public partial class RoleListComponent<TRole, TQuery> : ComponentBase where TRol
     private bool _loaded;
     private bool _allItemsLoaded;
     
-    private List<TRole> _roles = new List<TRole>();
+    private Dictionary<TRole, TRoleParent> _roles = new Dictionary<TRole, TRoleParent>();
     private bool _rolesFetching;
 
     #endregion
@@ -72,6 +74,7 @@ public partial class RoleListComponent<TRole, TQuery> : ComponentBase where TRol
             
             // INIT
             Query.First = _pageSize;
+            Query.OrderBy = "rating.average";
             
             // STEP 0
             endTasks.AddRange(
@@ -81,18 +84,18 @@ public partial class RoleListComponent<TRole, TQuery> : ComponentBase where TRol
             
             // END
             await Task.WhenAll(endTasks);
-            
-            _loaded = true;
-            StateHasChanged();
         }
     }
 
     private async Task GetRoles(bool firstFetch = false)
     {
         _rolesFetching = true;
-        await GetRolesAction(Id, Query, data =>
+        await GetRolesAction(Id, Query, async data =>
         {
-            _roles.AddRange(data);
+            foreach (TRole item in data)
+            {
+                await GetRoleParentMethod(ParentItemIdSource(item), parent => _roles[item] = parent);
+            }
             if (data.Count() < _pageSize)
             {
                 _allItemsLoaded = true;
@@ -106,6 +109,9 @@ public partial class RoleListComponent<TRole, TQuery> : ComponentBase where TRol
             }
             Query.After += data.Count();
             _rolesFetching = false;
+            
+            _loaded = true;
+            StateHasChanged();
         });
     }
 

WatchIt.Website/WatchIt.Website/Components/Common/Subcomponents/TitledDisplayRatingComponent.razor

@@ -0,0 +1,10 @@
+<div class="container-grid">
+    <div class="row gx-3">
+        <div class="col">
+            <span id="title" class="fw-bold">@(Title)</span>
+        </div>
+        <div class="col-auto align-self-center">
+            <DisplayRatingComponent Rating="@(Rating)"/>
+        </div>
+    </div>
+</div>

WatchIt.Website/WatchIt.Website/Components/Common/Subcomponents/TitledDisplayRatingComponent.razor.cs

@@ -0,0 +1,14 @@
+using Microsoft.AspNetCore.Components;
+using WatchIt.Common.Model.Rating;
+
+namespace WatchIt.Website.Components.Common.Subcomponents;
+
+public partial class TitledDisplayRatingComponent : ComponentBase
+{
+    #region PARAMETERS
+    
+    [Parameter] public required RatingResponse Rating { get; set; }
+    [Parameter] public required string Title { get; set; }
+    
+    #endregion
+}

WatchIt.Website/WatchIt.Website/Components/Common/Subcomponents/TitledDisplayRatingComponent.razor.css

@@ -0,0 +1,5 @@
+/* IDS */
+
+#title {
+    font-size: 1.5rem;
+}

WatchIt.Website/WatchIt.Website/Components/Pages/DatabasePage/DatabasePageComponent.razor

@@ -52,12 +52,19 @@
                 {
                     foreach (TItem item in _items)
                     {
-                        <div role="button" class="rounded-3 panel panel-regular p-2" @onclick="@(() => NavigationManager.NavigateTo(string.Format(UrlIdTemplate, IdSource(item))))">
+                        long id = IdSource(item);
-                            <ListItemComponent Id="@(IdSource(item))"
+                        string url = string.Format(UrlIdTemplate, id);
-                                               Name="@(NameSource(item))"
+                        <div class="panel p-2">
-                                               AdditionalNameInfo="@(AdditionalNameInfoSource(item))"
+                            <ListItemComponent Name="@(NameSource(item))"
-                                               Rating="@(RatingSource(item))"
+                                               AdditionalInfo="@(AdditionalNameInfoSource(item))"
-                                               PictureDownloadingTask="@(PictureDownloadingTask)"/>
+                                               PosterPlaceholder="@(PosterPlaceholder)"
+                                               PosterDownloadingTask="@(action => PictureDownloadingTask(id, action))"
+                                               GlobalRating="@(RatingSource(item))"
+                                               GetGlobalRatingMethod="@(action => GetGlobalRatingMethod(id, action))"
+                                               GetUserRatingMethod="@(GetUserRatingMethod is not null ? (user, actionSuccess, actionNotFound) => GetUserRatingMethod(id, user, actionSuccess, actionNotFound) : null)"
+                                               PutRatingMethod="@(PutRatingMethod is not null ? (request) => PutRatingMethod(id, request) : null)"
+                                               DeleteRatingMethod="@(DeleteRatingMethod is not null ? () => DeleteRatingMethod(id) : null)"
+                                               ItemUrl="@(url)"/>
                         </div>
                     }
                     if (!_allItemsLoaded)

WatchIt.Website/WatchIt.Website/Components/Pages/DatabasePage/DatabasePageComponent.razor.cs

@@ -28,6 +28,12 @@ public partial class DatabasePageComponent<TItem, TQuery> : ComponentBase where
     [Parameter] public required Func<TQuery, Action<IEnumerable<TItem>>, Task> ItemDownloadingTask { get; set; }
     [Parameter] public required Dictionary<string, string> SortingOptions { get; set; }
     [Parameter] public required RenderFragment ChildContent { get; set; }
+    [Parameter] public required Func<long, Action<RatingResponse>, Task> GetGlobalRatingMethod { get; set; }
+    [Parameter] public Func<long, long, Action<short>, Action, Task>? GetUserRatingMethod { get; set; }
+    [Parameter] public Func<long, RatingRequest, Task>? PutRatingMethod { get; set; }
+    [Parameter] public Func<long, Task>? DeleteRatingMethod { get; set; }
+    [Parameter] public required string PosterPlaceholder { get; set; }
+    
 
     #endregion
     

WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Panels/ActorRolesPanelComponent.razor

@@ -1,18 +0,0 @@
-@using WatchIt.Website.Components.Pages.MediaPage.Subcomponents
-
-
-
-<div class="panel panel-padding-regular panel-radius-regular panel-background-regular @(Class)">
-    <div class="vstack gap-3">
-        <span class="panel-text-title">Actors</span>
-        <RoleListComponent Id="@(Id)" 
-                           TRole="WatchIt.Common.Model.Roles.ActorRoleResponse"
-                           TQuery="WatchIt.Common.Model.Roles.ActorRoleMediaQueryParameters"
-                           AdditionalTextSource="@(data => data.Name)"
-                           GetRolesAction="@(MediaWebAPIService.GetMediaAllActorRoles)"
-                           GetGlobalRatingAction="@((id, action) => RolesWebAPIService.GetActorRoleRating(id, action))"
-                           GetUserRatingAction="@((id, userId, actionSuccess, actionNotFound) => RolesWebAPIService.GetActorRoleRatingByUser(id, userId, actionSuccess, actionNotFound))"
-                           PutRatingAction="(id, request) => RolesWebAPIService.PutActorRoleRating(id, request)"
-                           DeleteRatingAction="(id) => RolesWebAPIService.DeleteActorRoleRating(id)"/>
-    </div>
-</div>

WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Panels/MediaActorRolesPanelComponent.razor

@@ -0,0 +1,26 @@
+@using WatchIt.Common.Model.Persons
+@using WatchIt.Common.Model.Roles
+
+
+
+<div class="panel @(Class)">
+    <div class="vstack gap-3">
+        <span class="panel-text-title">Actors</span>
+        <RoleListComponent TRole="ActorRoleResponse"
+                           TQuery="ActorRoleMediaQueryParameters"
+                           TRoleParent="PersonResponse"
+                           Id="@(Id)"
+                           GetRolesAction="@(MediaWebAPIService.GetMediaAllActorRoles)"
+                           NameSource="@((_, parent) => parent.Name)"
+                           AdditionalInfoSource="@((item, _) => $" as {item.Name}")"
+                           GetRoleParentMethod="@((id, action) => PersonsWebAPIService.GetPerson(id, action))"
+                           ParentItemIdSource="@(item => item.PersonId)"
+                           ParentUrlTemplate="/person/{0}"
+                           PosterPlaceholder="/assets/person_poster.png"
+                           PosterDownloadingTask="@((id, action) => PersonsWebAPIService.GetPersonPhoto(id, action))"
+                           GetGlobalRatingMethod="@((id, action) => RolesWebAPIService.GetActorRoleRating(id, action))"
+                           GetUserRatingMethod="@((id, userId, actionSuccess, actionNotFound) => RolesWebAPIService.GetActorRoleRatingByUser(id, userId, actionSuccess, actionNotFound))"
+                           PutRatingMethod="@((id, request) => RolesWebAPIService.PutActorRoleRating(id, request))"
+                           DeleteRatingMethod="@(id => RolesWebAPIService.DeleteActorRoleRating(id))"/>
+    </div>
+</div>

WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Panels/MediaActorRolesPanelComponent.razor.cs

@@ -1,15 +1,17 @@
 using Microsoft.AspNetCore.Components;
 using WatchIt.Website.Services.Utility.Authentication;
 using WatchIt.Website.Services.WebAPI.Media;
+using WatchIt.Website.Services.WebAPI.Persons;
 using WatchIt.Website.Services.WebAPI.Roles;
 
 namespace WatchIt.Website.Components.Pages.MediaPage.Panels;
 
-public partial class ActorRolesPanelComponent : ComponentBase
+public partial class MediaActorRolesPanelComponent : ComponentBase
 {
     #region SERVICES
     
     [Inject] private IMediaWebAPIService MediaWebAPIService { get; set; } = default!;
+    [Inject] private IPersonsWebAPIService PersonsWebAPIService { get; set; } = default!;
     [Inject] private IRolesWebAPIService RolesWebAPIService { get; set; } = default!;
     
     #endregion

WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Panels/MediaCreatorRolesPanelComponent.razor

@@ -1,5 +1,5 @@
+@using WatchIt.Common.Model.Persons
 @using WatchIt.Common.Model.Roles
-@using WatchIt.Website.Components.Pages.MediaPage.Subcomponents
 
 
 
@@ -16,16 +16,23 @@
                     }
                 </RadioGroup>
             </div>
-            <RoleListComponent @ref=@(_roleListComponent) 
+            <RoleListComponent @ref=@(_roleListComponent)
-                               Id="@(Id)"
                                TRole="CreatorRoleResponse"
                                TQuery="CreatorRoleMediaQueryParameters"
+                               TRoleParent="PersonResponse"
+                               Id="@(Id)"
                                Query="@(_query)"
-                               GetRolesAction="MediaWebAPIService.GetMediaAllCreatorRoles"
+                               GetRolesAction="@(MediaWebAPIService.GetMediaAllCreatorRoles)"
-                               GetGlobalRatingAction="@((id, action) => RolesWebAPIService.GetCreatorRoleRating(id, action))"
+                               NameSource="@((_, parent) => parent.Name)"
-                               GetUserRatingAction="@((id, userId, actionSuccess, actionNotFound) => RolesWebAPIService.GetCreatorRoleRatingByUser(id, userId, actionSuccess, actionNotFound))"
+                               GetRoleParentMethod="@((id, action) => PersonsWebAPIService.GetPerson(id, action))"
-                               PutRatingAction="(id, request) => RolesWebAPIService.PutActorRoleRating(id, request)"
+                               ParentItemIdSource="@(item => item.PersonId)"
-                               DeleteRatingAction="(id) => RolesWebAPIService.DeleteActorRoleRating(id)"/>
+                               ParentUrlTemplate="/person/{0}"
+                               PosterPlaceholder="/assets/person_poster.png"
+                               PosterDownloadingTask="@((id, action) => PersonsWebAPIService.GetPersonPhoto(id, action))"
+                               GetGlobalRatingMethod="@((id, action) => RolesWebAPIService.GetCreatorRoleRating(id, action))"
+                               GetUserRatingMethod="@((id, userId, actionSuccess, actionNotFound) => RolesWebAPIService.GetCreatorRoleRatingByUser(id, userId, actionSuccess, actionNotFound))"
+                               PutRatingMethod="@((id, request) => RolesWebAPIService.PutCreatorRoleRating(id, request))"
+                               DeleteRatingMethod="@((id) => RolesWebAPIService.DeleteCreatorRoleRating(id))"/>
         </div>
     }
     else

WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Panels/MediaCreatorRolesPanelComponent.razor.cs

@@ -1,19 +1,21 @@
 using Microsoft.AspNetCore.Components;
+using WatchIt.Common.Model.Persons;
 using WatchIt.Common.Model.Roles;
-using WatchIt.Website.Components.Pages.MediaPage.Subcomponents;
+using WatchIt.Website.Components.Common.Subcomponents;
 using WatchIt.Website.Services.Utility.Authentication;
 using WatchIt.Website.Services.WebAPI.Media;
+using WatchIt.Website.Services.WebAPI.Persons;
 using WatchIt.Website.Services.WebAPI.Roles;
 
 namespace WatchIt.Website.Components.Pages.MediaPage.Panels;
 
-public partial class CreatorRolesPanelComponent : ComponentBase
+public partial class MediaCreatorRolesPanelComponent : ComponentBase
 {
     #region SERVICES
-    
+
+    [Inject] private IPersonsWebAPIService PersonsWebAPIService { get; set; } = default!;
     [Inject] private IMediaWebAPIService MediaWebAPIService { get; set; } = default!;
     [Inject] private IRolesWebAPIService RolesWebAPIService { get; set; } = default!;
-    [Inject] private IAuthenticationService AuthenticationService { get; set; } = default!;
     
     #endregion
     
@@ -29,10 +31,8 @@ public partial class CreatorRolesPanelComponent : ComponentBase
 
 
     #region FIELDS
-    
-    private User? _user;
 
-    private RoleListComponent<CreatorRoleResponse, CreatorRoleMediaQueryParameters> _roleListComponent;
+    private RoleListComponent<CreatorRoleResponse, CreatorRoleMediaQueryParameters, PersonResponse> _roleListComponent;
 
     private bool _loaded;
 
@@ -44,11 +44,6 @@ public partial class CreatorRolesPanelComponent : ComponentBase
 
 
     #region PRIVATE METHODS
-    
-    protected override async Task OnParametersSetAsync()
-    {
-        _user = await AuthenticationService.GetUserAsync();
-    }
 
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {

WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Subcomponents/RoleComponent.razor

@@ -1,66 +0,0 @@
-@using WatchIt.Common.Model.Roles
-@typeparam TRole where TRole : WatchIt.Common.Model.Roles.IRoleResponse
-
-<div class="container-grid">
-    <div class="row">
-        <div class="col-auto">
-            <a class="text-reset text-decoration-none" href="/person/@(Role.PersonId)">
-                <PictureComponent Picture="@(_picture)" Placeholder="/assets/person_poster.png" AlternativeText="poster" Height="110"/>
-            </a>
-        </div>
-        <div class="col">
-            <div class="d-flex align-items-start flex-column h-100">
-                <div class="mb-auto">
-                    <span id="nameText">
-                        @if (_person is null)
-                        {
-                            <span>Loading...</span>
-                        }
-                        else
-                        {
-                            <a class="text-reset text-decoration-none" href="/person/@(Role.PersonId)">
-                                <strong>@(_person.Name)</strong>@(Role is ActorRoleResponse actor ? $" as {actor.Name}" : string.Empty)
-                            </a>
-                        }
-                    </span>
-                </div>
-                <div class="d-inline-flex gap-3">
-                    <div class="vstack">
-                        <span id="ratingNameText">Global rating:</span>
-                        <div class="hstack gap-2">
-                            <span id="ratingStar">★</span>
-                            <div class="d-inline-flex flex-column justify-content-center">
-                                @if (_globalRating is not null)
-                                {
-                                    <span id="ratingValue">@(_globalRating.Count > 0 ? _globalRating.Average : "--")/10</span>
-                                    if (_globalRating.Count > 0)
-                                    {
-                                        <span id="ratingCount">@(_globalRating.Count)</span>
-                                    }
-                                }
-                                else
-                                {
-                                    <div class="spinner-border spinner-border-sm text-light"></div>
-                                }
-                            </div>
-                        </div>
-                    </div>
-                    <div class="vr"></div>
-                    <div class="vstack">
-                        <span id="ratingNameText">Your rating:</span>
-                        <div class="d-inline-flex align-items-center h-100">
-                            @if (_user is not null)
-                            {
-                                <Rating Color="Color.Light" MaxValue="10" @bind-SelectedValue="@(_yourRating)" @onclick="@(RatingChanged)"/>
-                            }
-                            else
-                            {
-                                <span id="ratingLoginInfoText">You must be logged in to rate the role</span>
-                            }
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>

WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Subcomponents/RoleComponent.razor.cs

@@ -1,100 +0,0 @@
-using Microsoft.AspNetCore.Components;
-using WatchIt.Common.Model;
-using WatchIt.Common.Model.Persons;
-using WatchIt.Common.Model.Rating;
-using WatchIt.Common.Model.Roles;
-using WatchIt.Website.Services.Utility.Authentication;
-using WatchIt.Website.Services.WebAPI.Persons;
-
-namespace WatchIt.Website.Components.Pages.MediaPage.Subcomponents;
-
-public partial class RoleComponent<TRole> : ComponentBase where TRole : IRoleResponse
-{
-    #region SERVICES
-
-    [Inject] private IPersonsWebAPIService PersonsWebAPIService { get; set; } = default!;
-    [Inject] private IAuthenticationService AuthenticationService { get; set; } = default!;
-    
-    #endregion
-    
-    
-    
-    #region PARAMETERS
-    
-    [Parameter] public required TRole Role { get; set; }
-    [Parameter] public required Func<Guid, Action<RatingResponse>, Task> GetGlobalRatingAction { get; set; }
-    [Parameter] public required Func<Guid, long, Action<short>, Action, Task> GetUserRatingAction { get; set; }
-    [Parameter] public required Func<Guid, RatingRequest, Task> PutRatingAction { get; set; }
-    [Parameter] public required Func<Guid, Task> DeleteRatingAction { get; set; }
-    
-    #endregion
-
-
-
-    #region FIELDS
-
-    private User? _user;
-    private PersonResponse? _person;
-    private Picture? _picture;
-    private RatingResponse? _globalRating;
-    
-    private int _yourRating;
-
-    #endregion
-
-
-
-    #region PRIVATE METHODS
-
-    protected override async Task OnAfterRenderAsync(bool firstRender)
-    {
-        if (firstRender)
-        {
-            List<Task> step1Tasks = new List<Task>();
-            List<Task> endTasks = new List<Task>();
-            
-            // STEP 0
-            step1Tasks.AddRange(
-            [
-                Task.Run(async () => _user = await AuthenticationService.GetUserAsync()),
-            ]);
-            endTasks.AddRange(
-            [
-                PersonsWebAPIService.GetPersonPhoto(Role.PersonId, data => _picture = data),
-                PersonsWebAPIService.GetPerson(Role.PersonId, data => _person = data),
-                GetGlobalRatingAction(Role.Id, data => _globalRating = data)
-            ]);
-            
-            // STEP 1
-            await Task.WhenAll(step1Tasks);
-            if (_user is not null)
-            {
-                endTasks.AddRange(
-                [
-                    GetUserRatingAction(Role.Id, _user.Id, data => _yourRating = data, () => _yourRating = 0)
-                ]);
-            }
-            
-            // END
-            await Task.WhenAll(endTasks);
-            
-            StateHasChanged();
-        }
-    }
-
-    private async Task RatingChanged()
-    {
-        if (_yourRating == 0)
-        {
-            await DeleteRatingAction(Role.Id);
-        }
-        else
-        {
-            await PutRatingAction(Role.Id, new RatingRequest((short)_yourRating));
-        }
-        
-        await GetGlobalRatingAction(Role.Id, data => _globalRating = data);
-    }
-
-    #endregion
-}

WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Subcomponents/RoleComponent.razor.css

@@ -1,26 +0,0 @@
-/* IDS */
-
-#nameText {
-    font-size: 20px;
-}
-
-#ratingNameText {
-    font-size: 14px;
-    font-weight: bold;
-}
-
-#ratingLoginInfoText {
-    font-size: 13px;
-}
-
-#ratingStar {
-    font-size: 30px;
-}
-
-#ratingValue {
-    font-size: 20px;
-}
-
-#ratingCount {
-    font-size: 10px;
-}

WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Subcomponents/RoleListComponent.razor

@@ -1,45 +0,0 @@
-@typeparam TRole where TRole : WatchIt.Common.Model.Roles.IRoleResponse, WatchIt.Common.Query.IQueryOrderable<TRole>
-@typeparam TQuery where TQuery : WatchIt.Common.Query.QueryParameters<TRole>
-
-@if (_loaded)
-{
-    if (_roles.Count > 0)
-    {
-        <div class="vstack">
-            @for (int i = 0; i < _roles.Count; i++)
-            {
-                {
-                    int iCopy = i;
-                    if (i > 0)
-                    {
-                        <hr/>
-                    }
-                    <RoleComponent TRole="TRole"
-                                   Role="@(_roles[i])"
-                                   GetGlobalRatingAction="@(GetGlobalRatingAction)"
-                                   GetUserRatingAction="@(GetUserRatingAction)"
-                                   PutRatingAction="@(PutRatingAction)"
-                                   DeleteRatingAction="@(DeleteRatingAction)"/>
-                } 
-            }
-            @if (!_allItemsLoaded)
-            {
-                <div class="d-flex justify-content-center">
-                    <button class="btn btn-secondary" @onclick="@(async () => await GetRoles())">
-                        <LoadingButtonContentComponent Content="Load more"
-                                                       LoadingContent="Loading..."
-                                                       IsLoading="@(_rolesFetching)"/>
-                    </button>
-                </div>
-            }
-        </div>
-    }
-    else
-    {
-        <span class="text-center">No roles found</span>
-    }
-}
-else
-{
-    <LoadingComponent Color="LoadingComponent.LoadingComponentColors.Light"/>
-}

WatchIt.Website/WatchIt.Website/Components/Pages/PersonPage/Panels/PersonActorRolesPanelComponent.razor

@@ -0,0 +1,27 @@
+@using WatchIt.Common.Model.Persons
+@using WatchIt.Common.Model.Roles
+
+
+
+<div class="panel @(Class)">
+    <div class="vstack gap-3">
+        <span class="panel-text-title">Actor</span>
+        <RoleListComponent TRole="ActorRoleResponse"
+                           TQuery="ActorRolePersonQueryParameters"
+                           TRoleParent="MediaResponse"
+                           Id="@(Id)"
+                           GetRolesAction="@(PersonsWebAPIService.GetPersonAllActorRoles)"
+                           NameSource="@((_, parent) => parent.Title)"
+                           AdditionalInfoSource="@((item, _) => $" as {item.Name}")"
+                           GetRoleParentMethod="@((id, action) => MediaWebAPIService.GetMedia(id, action))"
+                           ParentItemIdSource="@(item => item.MediaId)"
+                           ParentUrlTemplate="/media/{0}"
+                           PosterPlaceholder="/assets/media_poster.png"
+                           PosterDownloadingTask="@((id, action) => MediaWebAPIService.GetMediaPoster(id, action))"
+                           GetGlobalRatingMethod="@((id, action) => RolesWebAPIService.GetActorRoleRating(id, action))"
+                           GetUserRatingMethod="@((id, userId, actionSuccess, actionNotFound) => RolesWebAPIService.GetActorRoleRatingByUser(id, userId, actionSuccess, actionNotFound))"
+                           PutRatingMethod="@((id, request) => RolesWebAPIService.PutActorRoleRating(id, request))"
+                           DeleteRatingMethod="@(id => RolesWebAPIService.DeleteActorRoleRating(id))"
+                           OnRatingChanged="@(OnRatingChanged)"/>
+    </div>
+</div>

WatchIt.Website/WatchIt.Website/Components/Pages/PersonPage/Panels/PersonActorRolesPanelComponent.razor.cs

@@ -0,0 +1,27 @@
+using Microsoft.AspNetCore.Components;
+using WatchIt.Website.Services.WebAPI.Media;
+using WatchIt.Website.Services.WebAPI.Persons;
+using WatchIt.Website.Services.WebAPI.Roles;
+
+namespace WatchIt.Website.Components.Pages.PersonPage.Panels;
+
+public partial class PersonActorRolesPanelComponent : ComponentBase
+{
+    #region SERVICES
+    
+    [Inject] private IMediaWebAPIService MediaWebAPIService { get; set; } = default!;
+    [Inject] private IPersonsWebAPIService PersonsWebAPIService { get; set; } = default!;
+    [Inject] private IRolesWebAPIService RolesWebAPIService { get; set; } = default!;
+    
+    #endregion
+    
+    
+    
+    #region PARAMETERS
+    
+    [Parameter] public string Class { get; set; } = string.Empty;
+    [Parameter] public required long Id { get; set; }
+    [Parameter] public Action? OnRatingChanged { get; set; }
+    
+    #endregion
+}

WatchIt.Website/WatchIt.Website/Components/Pages/PersonPage/Panels/PersonCreatorRolesPanelComponent.razor

@@ -0,0 +1,43 @@
+@using WatchIt.Common.Model.Persons
+@using WatchIt.Common.Model.Roles
+
+
+
+<div class="panel panel-padding-regular panel-radius-regular panel-background-regular @(Class)">
+    @if (_loaded)
+    {
+        <div class="vstack gap-3">
+            <span class="panel-text-title">Creators</span>
+            <div class="d-flex justify-content-center">
+                <RadioGroup TValue="short" Color="Color.Default" Buttons Size="Size.Small" CheckedValue="@(_query.TypeId!.Value)" CheckedValueChanged="CheckedTypeChanged">
+                    @foreach (RoleTypeResponse roleType in _roleTypes)
+                    {
+                        <Radio Value="@(roleType.Id)">@roleType.Name</Radio>
+                    }
+                </RadioGroup>
+            </div>
+            <RoleListComponent @ref=@(_roleListComponent)
+                               TRole="CreatorRoleResponse"
+                               TQuery="CreatorRolePersonQueryParameters"
+                               TRoleParent="MediaResponse"
+                               Id="@(Id)"
+                               Query="@(_query)"
+                               GetRolesAction="@(PersonsWebAPIService.GetPersonAllCreatorRoles)"
+                               NameSource="@((_, parent) => parent.Title)"
+                               GetRoleParentMethod="@((id, action) => MediaWebAPIService.GetMedia(id, action))"
+                               ParentItemIdSource="@(item => item.MediaId)"
+                               ParentUrlTemplate="/media/{0}"
+                               PosterPlaceholder="/assets/media_poster.png"
+                               PosterDownloadingTask="@((id, action) => MediaWebAPIService.GetMediaPoster(id, action))"
+                               GetGlobalRatingMethod="@((id, action) => RolesWebAPIService.GetCreatorRoleRating(id, action))"
+                               GetUserRatingMethod="@((id, userId, actionSuccess, actionNotFound) => RolesWebAPIService.GetCreatorRoleRatingByUser(id, userId, actionSuccess, actionNotFound))"
+                               PutRatingMethod="@((id, request) => RolesWebAPIService.PutCreatorRoleRating(id, request))"
+                               DeleteRatingMethod="@((id) => RolesWebAPIService.DeleteCreatorRoleRating(id))"
+                               OnRatingChanged="@(OnRatingChanged)"/>
+        </div>
+    }
+    else
+    {
+        <LoadingComponent Color="@(LoadingComponent.LoadingComponentColors.Light)"/>
+    }
+</div>

WatchIt.Website/WatchIt.Website/Components/Pages/PersonPage/Panels/PersonCreatorRolesPanelComponent.razor.cs

@@ -0,0 +1,76 @@
+using Microsoft.AspNetCore.Components;
+using WatchIt.Common.Model.Media;
+using WatchIt.Common.Model.Roles;
+using WatchIt.Website.Components.Common.Subcomponents;
+using WatchIt.Website.Services.WebAPI.Media;
+using WatchIt.Website.Services.WebAPI.Persons;
+using WatchIt.Website.Services.WebAPI.Roles;
+
+namespace WatchIt.Website.Components.Pages.PersonPage.Panels;
+
+public partial class PersonCreatorRolesPanelComponent : ComponentBase
+{
+    #region SERVICES
+
+    [Inject] private IPersonsWebAPIService PersonsWebAPIService { get; set; } = default!;
+    [Inject] private IMediaWebAPIService MediaWebAPIService { get; set; } = default!;
+    [Inject] private IRolesWebAPIService RolesWebAPIService { get; set; } = default!;
+    
+    #endregion
+    
+    
+    
+    #region PARAMETERS
+    
+    [Parameter] public string Class { get; set; } = string.Empty;
+    [Parameter] public required long Id { get; set; }
+    [Parameter] public Action? OnRatingChanged { get; set; }
+    
+    #endregion
+
+
+
+    #region FIELDS
+
+    private RoleListComponent<CreatorRoleResponse, CreatorRolePersonQueryParameters, MediaResponse> _roleListComponent;
+
+    private bool _loaded;
+
+    private IEnumerable<RoleTypeResponse> _roleTypes;
+    private CreatorRolePersonQueryParameters _query;
+
+    #endregion
+
+
+
+    #region PRIVATE METHODS
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            List<Task> endTasks = new List<Task>();
+            
+            // STEP 0
+            endTasks.AddRange(
+            [
+                RolesWebAPIService.GetAllCreatorRoleTypes(successAction: data => _roleTypes = data)
+            ]);
+            
+            // END
+            await Task.WhenAll(endTasks);
+            _query = new CreatorRolePersonQueryParameters { TypeId = _roleTypes.First().Id };
+            
+            _loaded = true;
+            StateHasChanged();
+        }
+    }
+
+    private async Task CheckedTypeChanged(short value)
+    {
+        _query.TypeId = value;
+        await _roleListComponent.Refresh();
+    }
+
+    #endregion
+}

WatchIt.Website/WatchIt.Website/Components/Pages/PersonPage/Panels/PersonMetadataPanel.razor

@@ -0,0 +1,16 @@
+<div class="panel h-100">
+    <div class="d-flex flex-wrap metadata-pill-container">
+        @if (!string.IsNullOrWhiteSpace(Item.Gender?.Name))
+        {
+            <div class="metadata-pill"><strong>Gender:</strong> @(Item.Gender?.Name)</div>
+        }
+        @if (Item.BirthDate.HasValue)
+        {
+            <div class="metadata-pill"><strong>Birth date:</strong> @(Item.BirthDate.Value.ToString())</div>
+        }
+        @if (Item.DeathDate.HasValue)
+        {
+            <div class="metadata-pill"><strong>Death date:</strong> @(Item.DeathDate.Value.ToString())</div>
+        }
+    </div>
+</div>

WatchIt.Website/WatchIt.Website/Components/Pages/PersonPage/Panels/PersonMetadataPanel.razor.cs

@@ -0,0 +1,13 @@
+using Microsoft.AspNetCore.Components;
+using WatchIt.Common.Model.Persons;
+
+namespace WatchIt.Website.Components.Pages.PersonPage.Panels;
+
+public partial class PersonMetadataPanel : ComponentBase
+{
+    #region PARAMETERS
+
+    [Parameter] public required PersonResponse Item { get; set; }
+
+    #endregion
+}

WatchIt.Website/WatchIt.Website/Components/Pages/PersonPage/Panels/PersonRatingPanel.razor

@@ -0,0 +1,17 @@
+<div class="panel panel-background-gold h-100 text-dark">
+    <div class="vstack">
+        <TitledDisplayRatingComponent Rating="@(Rating)" Title="Global rating:"/>
+        <hr/>
+        @if (_user is not null)
+        {
+            <TitledDisplayRatingComponent Rating="@(_userRating)" Title="Your rating:"/>
+        }
+        else
+        {
+            <div class="vstack">
+                <h4 class="fw-bold">Your rating:</h4>
+                <span>Log in to see your rating</span>
+            </div>
+        }
+    </div>
+</div>

WatchIt.Website/WatchIt.Website/Components/Pages/PersonPage/Panels/PersonRatingPanel.razor.cs

@@ -0,0 +1,97 @@
+using Microsoft.AspNetCore.Components;
+using WatchIt.Common.Model.Rating;
+using WatchIt.Website.Services.Utility.Authentication;
+using WatchIt.Website.Services.WebAPI.Persons;
+
+namespace WatchIt.Website.Components.Pages.PersonPage.Panels;
+
+public partial class PersonRatingPanel : ComponentBase
+{
+    #region SERVICES
+
+    [Inject] private IAuthenticationService AuthenticationService { get; set; } = default!;
+    [Inject] private IPersonsWebAPIService PersonsWebAPIService { get; set; } = default!;
+    
+    #endregion
+    
+    
+    
+    #region PARAMETERS
+    
+    [Parameter] public required long Id { get; set; }
+    [Parameter] public RatingResponse? Rating { get; set; }
+    
+    #endregion
+    
+    
+    
+    #region FIELDS
+
+    private User? _user;
+    
+    private RatingResponse? _userRating;
+    
+    #endregion
+
+
+
+    #region PUBLIC METHODS
+
+    public async Task UpdateRating()
+    {
+        await Task.WhenAll(UpdateGlobalRating(), UpdateUserRating());
+        StateHasChanged();
+    }
+
+    #endregion
+    
+    
+    
+    #region PRIVATE METHODS
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            List<Task> step1Tasks = new List<Task>(1);
+            List<Task> endTasks = new List<Task>(2);
+            
+            // STEP 0
+            step1Tasks.AddRange(
+            [
+                Task.Run(async () => _user = await AuthenticationService.GetUserAsync())
+            ]);
+            if (Rating is null)
+            {
+                endTasks.AddRange(
+                [
+                    UpdateGlobalRating()
+                ]);
+            }
+            
+            // STEP 1
+            await Task.WhenAll(step1Tasks);
+            endTasks.AddRange(
+            [
+                UpdateUserRating()
+            ]);
+            
+            // END
+            await Task.WhenAll(endTasks);
+
+            StateHasChanged();
+        }
+    }
+
+    protected async Task UpdateGlobalRating() => await PersonsWebAPIService.GetPersonGlobalRating(Id, data => Rating = data);
+
+    protected async Task UpdateUserRating()
+    {
+        if (_user is not null)
+        {
+            await PersonsWebAPIService.GetPersonUserRating(Id, _user.Id, data => _userRating = data);
+        }
+    }
+
+    #endregion
+}

WatchIt.Website/WatchIt.Website/Components/Pages/SearchPage/Panels/SearchResultPanelComponent.razor

@@ -28,13 +28,21 @@
                     }
                     <div class="row">
                         <div class="col">
-                            <a class="text-reset text-decoration-none" href="@(string.Format(UrlIdTemplate, IdSource(_items[i])))">
+                            @{
-                                <ListItemComponent Id="@(IdSource(_items[i]))"
+                                int iCopy = i;
-                                                   Name="@(NameSource(_items[i]))"
+                                long id = IdSource(_items[iCopy]);
-                                                   AdditionalNameInfo="@(AdditionalNameInfoSource(_items[i]))"
+                                string url = string.Format(UrlIdTemplate, id);
-                                                   Rating="@(RatingSource(_items[i]))"
+                            }
-                                                   PictureDownloadingTask="@(PictureDownloadingTask)"/>
+                            <ListItemComponent Name="@(NameSource(_items[i]))"
-                            </a>
+                                               AdditionalInfo="@(AdditionalNameInfoSource(_items[i]))"
+                                               PosterPlaceholder="@(PosterPlaceholder)"
+                                               PosterDownloadingTask="@(action => PictureDownloadingTask(id, action))"
+                                               GlobalRating="@(RatingSource(_items[i]))"
+                                               GetGlobalRatingMethod="@(action => GetGlobalRatingMethod(id, action))"
+                                               GetUserRatingMethod="@(GetUserRatingMethod is not null ? (user, actionSuccess, actionNotFound) => GetUserRatingMethod(id, user, actionSuccess, actionNotFound) : null)"
+                                               PutRatingMethod="@(PutRatingMethod is not null ? (request) => PutRatingMethod(id, request) : null)"
+                                               DeleteRatingMethod="@(DeleteRatingMethod is not null ? () => DeleteRatingMethod(id) : null)"
+                                               ItemUrl="@(url)"/>
                         </div>
                     </div>
                 }

WatchIt.Website/WatchIt.Website/Components/Pages/SearchPage/Panels/SearchResultPanelComponent.razor.cs

@@ -11,11 +11,18 @@ public partial class SearchResultPanelComponent<TItem, TQuery> : ComponentBase w
 
     [Parameter] public required string Title { get; set; }
     [Parameter] public required TQuery Query { get; set; }
+    
     [Parameter] public required Func<TItem, long> IdSource { get; set; }
     [Parameter] public required Func<TItem, string> NameSource { get; set; }
     [Parameter] public Func<TItem, string?> AdditionalNameInfoSource { get; set; } = _ => null;
     [Parameter] public required Func<TItem, RatingResponse> RatingSource { get; set; }
+    [Parameter] public required Func<long, Action<RatingResponse>, Task> GetGlobalRatingMethod { get; set; }
+    [Parameter] public Func<long, long, Action<short>, Action, Task>? GetUserRatingMethod { get; set; }
+    [Parameter] public Func<long, RatingRequest, Task>? PutRatingMethod { get; set; }
+    [Parameter] public Func<long, Task>? DeleteRatingMethod { get; set; }
     [Parameter] public required string UrlIdTemplate { get; set; }
+    [Parameter] public required string PosterPlaceholder { get; set; }
+    
     [Parameter] public required Func<TQuery, Action<IEnumerable<TItem>>, Task> ItemDownloadingTask { get; set; }
     [Parameter] public required Func<long, Action<Picture>, Task> PictureDownloadingTask { get; set; }
 

WatchIt.Website/WatchIt.Website/Pages/DatabasePage.razor

@@ -46,7 +46,12 @@
                                    { "rating.average", "Average rating" },
                                    { "title", "Title" },
                                    { "release_date", "Release date" },
-                               })">
+                               })"
+                               PosterPlaceholder="/assets/media_poster.png"
+                               GetGlobalRatingMethod="@((id, action) => MediaWebAPIService.GetMediaRating(id, action))"
+                               GetUserRatingMethod="@((id, userId, successAction, notfoundAction) => MediaWebAPIService.GetMediaRatingByUser(id, userId, successAction, notfoundAction))"
+                               PutRatingMethod="@((id, request) => MediaWebAPIService.PutMediaRating(id, request))"
+                               DeleteRatingMethod="@(id => MediaWebAPIService.DeleteMediaRating(id))">
             <MoviesFilterFormComponent/>
         </DatabasePageComponent>
         break;
@@ -67,7 +72,12 @@
                                    { "rating.average", "Average rating" },
                                    { "title", "Title" },
                                    { "release_date", "Release date" },
-                               })">
+                               })"
+                               PosterPlaceholder="/assets/media_poster.png"
+                               GetGlobalRatingMethod="@((id, action) => MediaWebAPIService.GetMediaRating(id, action))"
+                               GetUserRatingMethod="@((id, userId, successAction, notfoundAction) => MediaWebAPIService.GetMediaRatingByUser(id, userId, successAction, notfoundAction))"
+                               PutRatingMethod="@((id, request) => MediaWebAPIService.PutMediaRating(id, request))"
+                               DeleteRatingMethod="@(id => MediaWebAPIService.DeleteMediaRating(id))">
             <SeriesFilterFormComponent/>
         </DatabasePageComponent>
         break;
@@ -88,7 +98,9 @@
                                                    { "name", "Name" },
                                                    { "birth_date", "Birth date" },
                                                    { "death_date", "Death date" },
-                                               })">
+                                               })"
+                               PosterPlaceholder="/assets/person_poster.png"
+                               GetGlobalRatingMethod="@((id, action) => PersonsWebAPIService.GetPersonGlobalRating(id, action))">
             <PersonsFilterFormComponent/>
         </DatabasePageComponent>
         break;     

WatchIt.Website/WatchIt.Website/Pages/DatabasePage.razor.cs

@@ -1,4 +1,5 @@
 using Microsoft.AspNetCore.Components;
+using WatchIt.Website.Layout;
 using WatchIt.Website.Services.WebAPI.Media;
 using WatchIt.Website.Services.WebAPI.Movies;
 using WatchIt.Website.Services.WebAPI.Persons;
@@ -24,6 +25,8 @@ public partial class DatabasePage : ComponentBase
     
     [Parameter] public string? Type { get; set; }
     
+    [CascadingParameter] public MainLayout Layout { get; set; }
+    
     #endregion
     
     
@@ -46,5 +49,16 @@ public partial class DatabasePage : ComponentBase
         }
     }
 
+    protected override void OnAfterRender(bool firstRender)
+    {
+        if (firstRender)
+        {
+            // INIT
+            Layout.BackgroundPhoto = null;
+            
+            StateHasChanged();
+        }
+    }
+
     #endregion
 }

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

@@ -30,50 +30,25 @@ else
     {
         if (string.IsNullOrWhiteSpace(_error))
         {
-            <div class="row mt-9">
+            <div class="row">
-                <div class="col-auto">
-                    <PictureComponent Picture="@(_poster)" Placeholder="/assets/media_poster.png" AlternativeText="poster" Width="200"/>
-                </div>
                 <div class="col">
-                    <div class="d-flex h-100">
+                    <ItemPageHeaderPanelComponent Name="@(_media.Title)"
-                        <div class="container-grid align-self-end">
+                                                  Subname="@(_media.OriginalTitle)"
-                            <div class="row">
+                                                  Description="@(_media.Description)"
-                                <div class="col">
+                                                  PosterPlaceholder="/assets/media_poster.png"
-                                    <h1 class="align-self-end title-shadow">
+                                                  GetPosterMethod="@(action => MediaWebAPIService.GetMediaPoster(_media.Id, action))"/>
-                                        <strong>@_media.Title</strong>
-                                    </h1>
-                                </div>
-                            </div>
-                            @if (!string.IsNullOrWhiteSpace(_media.Description))
-                            {
-                                <div class="row">
-                                    <div class="col">
-                                        <div class="description-shadow">
-                                            @_media.Description
-                                        </div>
-                                    </div>
-                                </div>
-                            }
-                        </div>
-                    </div>
                 </div>
             </div>
             <div class="row mt-3 gx-3">
                 <div class="col">
-                    <div class="rounded-3 panel panel-regular p-4 h-100">
+                    <div class="panel panel-regular h-100">
                         <div class="container-grid">
                             <div class="row">
                                 <div class="col">
-                                    <div class="d-flex flex-wrap gap-3">
+                                    <div class="d-flex flex-wrap metadata-pill-container">
                                         <div class="metadata-pill">
                                             <strong>@(_media.Type == MediaType.Movie ? "Movie" : "TV Series")</strong>
                                         </div>
-                                        @if (!string.IsNullOrWhiteSpace(_media.OriginalTitle))
-                                        {
-                                            <div class="metadata-pill">
-                                                <strong>Original title:</strong> @_media.OriginalTitle
-                                            </div>
-                                        }
                                         @if (_media.ReleaseDate is not null)
                                         {
                                             <div class="metadata-pill">
@@ -133,13 +108,11 @@ else
                     </div>
                 </div>
                 <div class="col-auto">
-                    <div class="rounded-3 panel panel-yellow p-4 h-100">
+                    <div class="panel panel-background-gold h-100 text-dark">
                         <div class="container-grid">
                             <div class="row">
                                 <div class="col">
-                                    <h4 class="text-dark">
+                                    <TitledDisplayRatingComponent Rating="@(_globalRating)" Title="Global rating:"/>
-                                        <strong>Global rating:</strong> @(_globalRating.Count == 0 ? "no ratings" : $"{Math.Round(_globalRating.Average, 1)}/10")
-                                    </h4>
                                 </div>
                             </div>
                             <div class="row">
@@ -204,12 +177,12 @@ else
                         <Content>
                             <TabPanel Name="actors">
                                 <div class="mt-default">
-                                    <ActorRolesPanelComponent Id="@(Id)"/>
+                                    <MediaActorRolesPanelComponent Id="@(Id)"/>
                                 </div>
                             </TabPanel>
                             <TabPanel Name="creators">
                                 <div class="mt-default">
-                                    <CreatorRolesPanelComponent Id="@(Id)"/>
+                                    <MediaCreatorRolesPanelComponent Id="@(Id)"/>
                                 </div>
                             </TabPanel>
                         </Content>

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

@@ -90,7 +90,6 @@ public partial class MediaPage : ComponentBase
                 [
                     MediaWebAPIService.PostMediaView(Id),
                     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),
                     _media.Type == MediaType.Movie ? MoviesWebAPIService.GetMovie(Id, data => _movie = data) : SeriesWebAPIService.GetSeries(Id, data => _series = data),

WatchIt.Website/WatchIt.Website/Pages/PersonPage.razor

@@ -0,0 +1,89 @@
+@using System.Text
+@using WatchIt.Website.Components.Pages.PersonPage.Panels
+
+@page "/person/{id:long}"
+
+@{
+    StringBuilder sb = new StringBuilder(" - WatchIt");
+    
+    if (!_loaded)               sb.Insert(0, "Loading...");
+    else if (_person is null)   sb.Insert(0, "Error");
+    else                        sb.Insert(0, _person.Name);
+    
+    <PageTitle>@(sb.ToString())</PageTitle>
+}
+
+
+
+<div class="container-grid">
+    @if (_loaded)
+    {
+        if (_person is not null)
+        {
+            <div class="row">
+                <div class="col">
+                    <ItemPageHeaderPanelComponent Name="@(_person.Name)"
+                                                  Subname="@(_person.FullName)"
+                                                  Description="@(_person.Description)"
+                                                  PosterPlaceholder="/assets/person_poster.png"
+                                                  GetPosterMethod="@(action => PersonsWebAPIService.GetPersonPhoto(_person.Id, action))"/>
+                </div>
+            </div>
+            <div class="row mt-default gx-default">
+                <div class="col">
+                    <PersonMetadataPanel Item="@(_person)"/>
+                </div>
+                <div class="col-auto">
+                    <PersonRatingPanel @ref="_ratingPanel" 
+                                       Id="@(_person.Id)"
+                                       Rating="@(_person.Rating)"/>
+                </div>
+            </div>
+            <div class="row mt-over-panel-menu">
+                <div class="col">
+                    <Tabs Pills
+                          RenderMode="TabsRenderMode.LazyLoad"
+                          SelectedTab="actor"
+                          Class="panel panel-menu panel-background-menu">
+                        <Items>
+                            <Tab Name="actor">Actor</Tab>
+                            <Tab Name="creator">Creator</Tab>
+                        </Items>
+                        <Content>
+                            <TabPanel Name="actor">
+                                <div class="mt-default">
+                                    <PersonActorRolesPanelComponent Id="@(Id)"
+                                                                    OnRatingChanged="@(async () => await _ratingPanel.UpdateRating())"/>
+                                </div>
+                            </TabPanel>
+                            <TabPanel Name="creator">
+                                <div class="mt-default">
+                                    <PersonCreatorRolesPanelComponent Id="@(Id)"
+                                                                      OnRatingChanged="@(async () => await _ratingPanel.UpdateRating())"/>
+                                </div>
+                            </TabPanel>
+                        </Content>
+                    </Tabs>
+                </div>
+            </div>
+        }
+        else
+        {
+            <div class="row">
+                <div class="col">
+                    <ErrorPanelComponent ErrorMessage="@($"Person with ID {Id} was not found")"/>
+                </div>
+            </div>
+        }
+    }
+    else
+    {
+        <div class="row">
+            <div class="col">
+                <div class="m-5">
+                    <LoadingComponent/>
+                </div>
+            </div>
+        </div>
+    }
+</div>

WatchIt.Website/WatchIt.Website/Pages/PersonPage.razor.cs

@@ -0,0 +1,78 @@
+using Microsoft.AspNetCore.Components;
+using WatchIt.Common.Model.Persons;
+using WatchIt.Website.Components.Pages.PersonPage.Panels;
+using WatchIt.Website.Layout;
+using WatchIt.Website.Services.WebAPI.Persons;
+
+namespace WatchIt.Website.Pages;
+
+public partial class PersonPage : ComponentBase
+{
+    #region SERVICES
+
+    [Inject] private IPersonsWebAPIService PersonsWebAPIService { get; set; } = default!;
+    
+    #endregion
+    
+    
+    
+    #region PARAMETERS
+    
+    [Parameter] public long Id { get; set; }
+
+    [CascadingParameter] public MainLayout Layout { get; set; } = default!;
+    
+    #endregion
+
+
+
+    #region FIELDS
+
+    private bool _loaded;
+
+    private PersonRatingPanel _ratingPanel = default!;
+    
+    private PersonResponse? _person;
+
+    #endregion
+
+
+
+    #region PRIVATE METHODS
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            // INIT
+            Layout.BackgroundPhoto = null;
+            
+            List<Task> step1Tasks = new List<Task>(1);
+            List<Task> endTasks = new List<Task>(1);
+            
+            // STEP 0
+            step1Tasks.AddRange(
+            [
+                PersonsWebAPIService.GetPerson(Id, data => _person = data)
+            ]);
+            
+            // STEP 1
+            await Task.WhenAll(step1Tasks);
+            if (_person is not null)
+            {
+                endTasks.AddRange(
+                [
+                    PersonsWebAPIService.PostPersonView(Id),
+                ]);
+            }
+            
+            // END
+            await Task.WhenAll(endTasks);
+            
+            _loaded = true;
+            StateHasChanged();
+        }
+    }
+
+    #endregion
+}

WatchIt.Website/WatchIt.Website/Pages/SearchPage.razor

@@ -29,7 +29,12 @@
                                 RatingSource="@(item => item.Rating)"
                                 Query="@(new MovieQueryParameters { Title = DecodedQuery, OrderBy = "rating.count" })"
                                 ItemDownloadingTask="@(MoviesWebAPIService.GetAllMovies)"
-                                PictureDownloadingTask="@((id, action) => MediaWebAPIService.GetMediaPoster(id, action))"/>
+                                PictureDownloadingTask="@((id, action) => MediaWebAPIService.GetMediaPoster(id, action))"
+                                PosterPlaceholder="/assets/media_poster.png"
+                                GetGlobalRatingMethod="@((id, action) => MediaWebAPIService.GetMediaRating(id, action))"
+                                GetUserRatingMethod="@((id, userId, successAction, notfoundAction) => MediaWebAPIService.GetMediaRatingByUser(id, userId, successAction, notfoundAction))"
+                                PutRatingMethod="@((id, request) => MediaWebAPIService.PutMediaRating(id, request))"
+                                DeleteRatingMethod="@(id => MediaWebAPIService.DeleteMediaRating(id))"/>
     <SearchResultPanelComponent TItem="SeriesResponse"
                                 TQuery="SeriesQueryParameters"
                                 Title="TV series"
@@ -40,7 +45,12 @@
                                 RatingSource="@(item => item.Rating)"
                                 Query="@(new SeriesQueryParameters { Title = DecodedQuery, OrderBy = "rating.count" })"
                                 ItemDownloadingTask="@(SeriesWebAPIService.GetAllSeries)"
-                                PictureDownloadingTask="@((id, action) => MediaWebAPIService.GetMediaPoster(id, action))"/>
+                                PictureDownloadingTask="@((id, action) => MediaWebAPIService.GetMediaPoster(id, action))"
+                                PosterPlaceholder="/assets/media_poster.png"
+                                GetGlobalRatingMethod="@((id, action) => MediaWebAPIService.GetMediaRating(id, action))"
+                                GetUserRatingMethod="@((id, userId, successAction, notfoundAction) => MediaWebAPIService.GetMediaRatingByUser(id, userId, successAction, notfoundAction))"
+                                PutRatingMethod="@((id, request) => MediaWebAPIService.PutMediaRating(id, request))"
+                                DeleteRatingMethod="@(id => MediaWebAPIService.DeleteMediaRating(id))"/>
     <SearchResultPanelComponent TItem="PersonResponse"
                                 TQuery="PersonQueryParameters"
                                 Title="People"
@@ -50,5 +60,7 @@
                                 RatingSource="@(item => item.Rating)"
                                 Query="@(new PersonQueryParameters { Name = DecodedQuery, OrderBy = "rating.count" })"
                                 ItemDownloadingTask="@(PersonsWebAPIService.GetAllPersons)"
-                                PictureDownloadingTask="@((id, action) => PersonsWebAPIService.GetPersonPhoto(id, action))"/>
+                                PictureDownloadingTask="@((id, action) => PersonsWebAPIService.GetPersonPhoto(id, action))"
+                                PosterPlaceholder="/assets/person_poster.png"
+                                GetGlobalRatingMethod="@((id, action) => PersonsWebAPIService.GetPersonGlobalRating(id, action))"/>
 </div>

WatchIt.Website/WatchIt.Website/WatchIt.Website.csproj

@@ -51,4 +51,9 @@
       <PackageReference Include="Blazorise.Icons.FontAwesome" Version="1.6.1" />
     </ItemGroup>
 
+    <ItemGroup>
+      <Folder Include="Components\Pages\MediaPage\Subcomponents\" />
+      <Folder Include="Components\Pages\PersonPage\Subcomponents\" />
+    </ItemGroup>
+
 </Project>

WatchIt.Website/WatchIt.Website/appsettings.json

@@ -101,7 +101,9 @@
       "GetPersonAllActorRoles": "/{0}/roles/actor",
       "PostPersonActorRole": "/{0}/roles/actor",
       "GetPersonAllCreatorRoles": "/{0}/roles/creator",
-      "PostPersonCreatorRole": "/{0}/roles/creator"
+      "PostPersonCreatorRole": "/{0}/roles/creator",
+      "GetPersonGlobalRating": "/{0}/rating",
+      "GetPersonUserRating": "/{0}/rating/{1}"
     },
     "Roles": {
       "Base": "/roles",

WatchIt.Website/WatchIt.Website/wwwroot/css/general.css

@@ -53,6 +53,19 @@ body, html {
     width: 1%;
 }
 
+.metadata-pill {
+    border-color: gray;
+    border-width: 2px;
+    border-radius: 30px;
+    border-style: solid;
+
+    padding: 2px 10px;
+}
+
+.metadata-pill-container {
+    gap: 1rem;
+}
+