From bcd4628ba2576704113d6b2eb7983f3f38c134b5 Mon Sep 17 00:00:00 2001
From: Mateusz Skoczek <mateusz5432160@gmail.com>
Date: Tue, 22 Oct 2024 02:34:02 +0200
Subject: [PATCH 1/4] person page created, small fixes

---
 .../IPersonsWebAPIService.cs                  |  1 +
 .../PersonsWebAPIService.cs                   |  2 +-
 .../Panels/ItemPageHeaderPanelComponent.razor | 22 ++++++
 .../ItemPageHeaderPanelComponent.razor.cs     | 51 +++++++++++++
 .../ItemPageHeaderPanelComponent.razor.css    | 13 ++++
 .../Panels/PictureEditorPanelComponent.razor  |  2 +-
 .../Subcomponents/PictureComponent.razor      |  8 +--
 .../WatchIt.Website/Pages/MediaPage.razor     | 37 ++--------
 .../WatchIt.Website/Pages/MediaPage.razor.cs  |  1 -
 .../WatchIt.Website/Pages/PersonPage.razor    | 51 +++++++++++++
 .../WatchIt.Website/Pages/PersonPage.razor.cs | 72 +++++++++++++++++++
 .../PersonPage.razor.css}                     |  0
 .../WatchIt.Website/WatchIt.Website.csproj    |  5 ++
 13 files changed, 224 insertions(+), 41 deletions(-)
 create mode 100644 WatchIt.Website/WatchIt.Website/Components/Common/Panels/ItemPageHeaderPanelComponent.razor
 create mode 100644 WatchIt.Website/WatchIt.Website/Components/Common/Panels/ItemPageHeaderPanelComponent.razor.cs
 create mode 100644 WatchIt.Website/WatchIt.Website/Components/Common/Panels/ItemPageHeaderPanelComponent.razor.css
 create mode 100644 WatchIt.Website/WatchIt.Website/Pages/PersonPage.razor
 create mode 100644 WatchIt.Website/WatchIt.Website/Pages/PersonPage.razor.cs
 rename WatchIt.Website/WatchIt.Website/{Components/Common/Panels/PictureEditorPanelComponent.razor.css => Pages/PersonPage.razor.css} (100%)

diff --git a/WatchIt.Website/WatchIt.Website.Services/WatchIt.Website.Services.WebAPI/WatchIt.Website.Services.WebAPI.Persons/IPersonsWebAPIService.cs b/WatchIt.Website/WatchIt.Website.Services/WatchIt.Website.Services.WebAPI/WatchIt.Website.Services.WebAPI.Persons/IPersonsWebAPIService.cs
index c1f7cd9..bbb0b96 100644
--- a/WatchIt.Website/WatchIt.Website.Services/WatchIt.Website.Services.WebAPI/WatchIt.Website.Services.WebAPI.Persons/IPersonsWebAPIService.cs
+++ b/WatchIt.Website/WatchIt.Website.Services/WatchIt.Website.Services.WebAPI/WatchIt.Website.Services.WebAPI.Persons/IPersonsWebAPIService.cs
@@ -12,6 +12,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);
diff --git a/WatchIt.Website/WatchIt.Website.Services/WatchIt.Website.Services.WebAPI/WatchIt.Website.Services.WebAPI.Persons/PersonsWebAPIService.cs b/WatchIt.Website/WatchIt.Website.Services/WatchIt.Website.Services.WebAPI/WatchIt.Website.Services.WebAPI.Persons/PersonsWebAPIService.cs
index cd1fd70..a3c8e14 100644
--- a/WatchIt.Website/WatchIt.Website.Services/WatchIt.Website.Services.WebAPI/WatchIt.Website.Services.WebAPI.Persons/PersonsWebAPIService.cs
+++ b/WatchIt.Website/WatchIt.Website.Services/WatchIt.Website.Services.WebAPI/WatchIt.Website.Services.WebAPI.Persons/PersonsWebAPIService.cs
@@ -139,7 +139,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);
         
diff --git a/WatchIt.Website/WatchIt.Website/Components/Common/Panels/ItemPageHeaderPanelComponent.razor b/WatchIt.Website/WatchIt.Website/Components/Common/Panels/ItemPageHeaderPanelComponent.razor
new file mode 100644
index 0000000..689936a
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/WatchIt.Website/WatchIt.Website/Components/Common/Panels/ItemPageHeaderPanelComponent.razor.cs b/WatchIt.Website/WatchIt.Website/Components/Common/Panels/ItemPageHeaderPanelComponent.razor.cs
new file mode 100644
index 0000000..96e0fdd
--- /dev/null
+++ b/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
+}
\ No newline at end of file
diff --git a/WatchIt.Website/WatchIt.Website/Components/Common/Panels/ItemPageHeaderPanelComponent.razor.css b/WatchIt.Website/WatchIt.Website/Components/Common/Panels/ItemPageHeaderPanelComponent.razor.css
new file mode 100644
index 0000000..8d33a8c
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/WatchIt.Website/WatchIt.Website/Components/Common/Panels/PictureEditorPanelComponent.razor b/WatchIt.Website/WatchIt.Website/Components/Common/Panels/PictureEditorPanelComponent.razor
index f2a1ac3..2264955 100644
--- a/WatchIt.Website/WatchIt.Website/Components/Common/Panels/PictureEditorPanelComponent.razor
+++ b/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)
             {
diff --git a/WatchIt.Website/WatchIt.Website/Components/Common/Subcomponents/PictureComponent.razor b/WatchIt.Website/WatchIt.Website/Components/Common/Subcomponents/PictureComponent.razor
index 52a3e03..398c4d6 100644
--- a/WatchIt.Website/WatchIt.Website/Components/Common/Subcomponents/PictureComponent.razor
+++ b/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)"/>
-
-<style>
-    #imgObject {
-        aspect-ratio: @(AspectRatio.ToString());
-    }
-</style>
\ No newline at end of file
+<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());"/>
\ No newline at end of file
diff --git a/WatchIt.Website/WatchIt.Website/Pages/MediaPage.razor b/WatchIt.Website/WatchIt.Website/Pages/MediaPage.razor
index 47a2c9b..08f47bd 100644
--- a/WatchIt.Website/WatchIt.Website/Pages/MediaPage.razor
+++ b/WatchIt.Website/WatchIt.Website/Pages/MediaPage.razor
@@ -30,32 +30,13 @@ else
     {
         if (string.IsNullOrWhiteSpace(_error))
         {
-            <div class="row mt-9">
-                <div class="col-auto">
-                    <PictureComponent Picture="@(_poster)" Placeholder="/assets/media_poster.png" AlternativeText="poster" Width="200"/>
-                </div>
+            <div class="row">
                 <div class="col">
-                    <div class="d-flex h-100">
-                        <div class="container-grid align-self-end">
-                            <div class="row">
-                                <div class="col">
-                                    <h1 class="align-self-end title-shadow">
-                                        <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>
+                    <ItemPageHeaderPanelComponent Name="@(_media.Title)"
+                                                  Subname="@(_media.OriginalTitle)"
+                                                  Description="@(_media.Description)"
+                                                  PosterPlaceholder="/assets/media_poster.png"
+                                                  GetPosterMethod="@(action => MediaWebAPIService.GetMediaPoster(_media.Id, action))"/>
                 </div>
             </div>
             <div class="row mt-3 gx-3">
@@ -68,12 +49,6 @@ else
                                         <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">
diff --git a/WatchIt.Website/WatchIt.Website/Pages/MediaPage.razor.cs b/WatchIt.Website/WatchIt.Website/Pages/MediaPage.razor.cs
index fb48fd0..e3321c9 100644
--- a/WatchIt.Website/WatchIt.Website/Pages/MediaPage.razor.cs
+++ b/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),
diff --git a/WatchIt.Website/WatchIt.Website/Pages/PersonPage.razor b/WatchIt.Website/WatchIt.Website/Pages/PersonPage.razor
new file mode 100644
index 0000000..4a1c110
--- /dev/null
+++ b/WatchIt.Website/WatchIt.Website/Pages/PersonPage.razor
@@ -0,0 +1,51 @@
+@using System.Text
+
+@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>
+        }
+        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>
\ No newline at end of file
diff --git a/WatchIt.Website/WatchIt.Website/Pages/PersonPage.razor.cs b/WatchIt.Website/WatchIt.Website/Pages/PersonPage.razor.cs
new file mode 100644
index 0000000..79886bb
--- /dev/null
+++ b/WatchIt.Website/WatchIt.Website/Pages/PersonPage.razor.cs
@@ -0,0 +1,72 @@
+using Microsoft.AspNetCore.Components;
+using WatchIt.Common.Model.Persons;
+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 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);
+            endTasks.AddRange(
+            [
+                PersonsWebAPIService.PostPersonView(Id),
+            ]);
+            
+            // END
+            await Task.WhenAll(endTasks);
+            
+            _loaded = true;
+            StateHasChanged();
+        }
+    }
+
+    #endregion
+}
\ No newline at end of file
diff --git a/WatchIt.Website/WatchIt.Website/Components/Common/Panels/PictureEditorPanelComponent.razor.css b/WatchIt.Website/WatchIt.Website/Pages/PersonPage.razor.css
similarity index 100%
rename from WatchIt.Website/WatchIt.Website/Components/Common/Panels/PictureEditorPanelComponent.razor.css
rename to WatchIt.Website/WatchIt.Website/Pages/PersonPage.razor.css
diff --git a/WatchIt.Website/WatchIt.Website/WatchIt.Website.csproj b/WatchIt.Website/WatchIt.Website/WatchIt.Website.csproj
index eb28837..96dece4 100644
--- a/WatchIt.Website/WatchIt.Website/WatchIt.Website.csproj
+++ b/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\PersonPage\Panels\" />
+      <Folder Include="Components\Pages\PersonPage\Subcomponents\" />
+    </ItemGroup>
+
 </Project>

From b2d1ba6dc42b598d545c3c7f8fd0555dd6229297 Mon Sep 17 00:00:00 2001
From: Mateusz Skoczek <mateusz5432160@gmail.com>
Date: Wed, 23 Oct 2024 02:39:15 +0200
Subject: [PATCH 2/4] rating panel added

---
 .../Rating/RatingResponse.cs                  |  5 +
 .../PersonsController.cs                      | 17 ++++
 .../IPersonsControllerService.cs              |  3 +
 .../PersonsControllerService.cs               | 34 +++++++
 .../Model/Persons.cs                          |  2 +
 .../IPersonsWebAPIService.cs                  |  4 +
 .../PersonsWebAPIService.cs                   | 29 ++++++
 WatchIt.Website/WatchIt.Website/App.razor     |  2 +-
 .../DisplayRatingComponent.razor              | 51 ++++++++++
 .../DisplayRatingComponent.razor.cs           | 27 ++++++
 .../TitledDisplayRatingComponent.razor        | 10 ++
 .../TitledDisplayRatingComponent.razor.cs     | 14 +++
 .../TitledDisplayRatingComponent.razor.css    |  5 +
 .../Subcomponents/RoleComponent.razor         | 24 +----
 .../PersonPage/Panels/PersonRatingPanel.razor | 17 ++++
 .../Panels/PersonRatingPanel.razor.cs         | 93 +++++++++++++++++++
 .../Pages/DatabasePage.razor.cs               | 14 +++
 .../WatchIt.Website/Pages/MediaPage.razor     |  8 +-
 .../WatchIt.Website/Pages/PersonPage.razor    | 17 +++-
 .../WatchIt.Website/Pages/PersonPage.razor.cs | 14 ++-
 .../WatchIt.Website/WatchIt.Website.csproj    |  1 -
 .../WatchIt.Website/appsettings.json          |  4 +-
 22 files changed, 361 insertions(+), 34 deletions(-)
 create mode 100644 WatchIt.Website/WatchIt.Website/Components/Common/Subcomponents/DisplayRatingComponent.razor
 create mode 100644 WatchIt.Website/WatchIt.Website/Components/Common/Subcomponents/DisplayRatingComponent.razor.cs
 create mode 100644 WatchIt.Website/WatchIt.Website/Components/Common/Subcomponents/TitledDisplayRatingComponent.razor
 create mode 100644 WatchIt.Website/WatchIt.Website/Components/Common/Subcomponents/TitledDisplayRatingComponent.razor.cs
 create mode 100644 WatchIt.Website/WatchIt.Website/Components/Common/Subcomponents/TitledDisplayRatingComponent.razor.css
 create mode 100644 WatchIt.Website/WatchIt.Website/Components/Pages/PersonPage/Panels/PersonRatingPanel.razor
 create mode 100644 WatchIt.Website/WatchIt.Website/Components/Pages/PersonPage/Panels/PersonRatingPanel.razor.cs

diff --git a/WatchIt.Common/WatchIt.Common.Model/Rating/RatingResponse.cs b/WatchIt.Common/WatchIt.Common.Model/Rating/RatingResponse.cs
index 77fed60..9037814 100644
--- a/WatchIt.Common/WatchIt.Common.Model/Rating/RatingResponse.cs
+++ b/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);
diff --git a/WatchIt.WebAPI/WatchIt.WebAPI.Controllers/PersonsController.cs b/WatchIt.WebAPI/WatchIt.WebAPI.Controllers/PersonsController.cs
index a36a45e..ed213b0 100644
--- a/WatchIt.WebAPI/WatchIt.WebAPI.Controllers/PersonsController.cs
+++ b/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
diff --git a/WatchIt.WebAPI/WatchIt.WebAPI.Services/WatchIt.WebAPI.Services.Controllers/WatchIt.WebAPI.Services.Controllers.Persons/IPersonsControllerService.cs b/WatchIt.WebAPI/WatchIt.WebAPI.Services/WatchIt.WebAPI.Services.Controllers/WatchIt.WebAPI.Services.Controllers.Persons/IPersonsControllerService.cs
index b5802ce..76599a3 100644
--- a/WatchIt.WebAPI/WatchIt.WebAPI.Services/WatchIt.WebAPI.Services.Controllers/WatchIt.WebAPI.Services.Controllers.Persons/IPersonsControllerService.cs
+++ b/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);
 }
\ No newline at end of file
diff --git a/WatchIt.WebAPI/WatchIt.WebAPI.Services/WatchIt.WebAPI.Services.Controllers/WatchIt.WebAPI.Services.Controllers.Persons/PersonsControllerService.cs b/WatchIt.WebAPI/WatchIt.WebAPI.Services/WatchIt.WebAPI.Services.Controllers/WatchIt.WebAPI.Services.Controllers.Persons/PersonsControllerService.cs
index daafedf..3a80110 100644
--- a/WatchIt.WebAPI/WatchIt.WebAPI.Services/WatchIt.WebAPI.Services.Controllers/WatchIt.WebAPI.Services.Controllers.Persons/PersonsControllerService.cs
+++ b/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
diff --git a/WatchIt.Website/WatchIt.Website.Services/WatchIt.Website.Services.Utility/WatchIt.Website.Services.Utility.Configuration/Model/Persons.cs b/WatchIt.Website/WatchIt.Website.Services/WatchIt.Website.Services.Utility/WatchIt.Website.Services.Utility.Configuration/Model/Persons.cs
index 4f372c7..0bbc44e 100644
--- a/WatchIt.Website/WatchIt.Website.Services/WatchIt.Website.Services.Utility/WatchIt.Website.Services.Utility.Configuration/Model/Persons.cs
+++ b/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; }
 }
\ No newline at end of file
diff --git a/WatchIt.Website/WatchIt.Website.Services/WatchIt.Website.Services.WebAPI/WatchIt.Website.Services.WebAPI.Persons/IPersonsWebAPIService.cs b/WatchIt.Website/WatchIt.Website.Services/WatchIt.Website.Services.WebAPI/WatchIt.Website.Services.WebAPI.Persons/IPersonsWebAPIService.cs
index bbb0b96..071ed25 100644
--- a/WatchIt.Website/WatchIt.Website.Services/WatchIt.Website.Services.WebAPI/WatchIt.Website.Services.WebAPI.Persons/IPersonsWebAPIService.cs
+++ b/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;
@@ -22,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);
 }
\ No newline at end of file
diff --git a/WatchIt.Website/WatchIt.Website.Services/WatchIt.Website.Services.WebAPI/WatchIt.Website.Services.WebAPI.Persons/PersonsWebAPIService.cs b/WatchIt.Website/WatchIt.Website.Services/WatchIt.Website.Services.WebAPI/WatchIt.Website.Services.WebAPI.Persons/PersonsWebAPIService.cs
index a3c8e14..a38a6f0 100644
--- a/WatchIt.Website/WatchIt.Website.Services/WatchIt.Website.Services.WebAPI/WatchIt.Website.Services.WebAPI.Persons/PersonsWebAPIService.cs
+++ b/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;
@@ -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
     
     
diff --git a/WatchIt.Website/WatchIt.Website/App.razor b/WatchIt.Website/WatchIt.Website/App.razor
index 92e4b6b..c54fec3 100644
--- a/WatchIt.Website/WatchIt.Website/App.razor
+++ b/WatchIt.Website/WatchIt.Website/App.razor
@@ -13,7 +13,7 @@
     <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 -->
diff --git a/WatchIt.Website/WatchIt.Website/Components/Common/Subcomponents/DisplayRatingComponent.razor b/WatchIt.Website/WatchIt.Website/Components/Common/Subcomponents/DisplayRatingComponent.razor
new file mode 100644
index 0000000..da7a6c5
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/WatchIt.Website/WatchIt.Website/Components/Common/Subcomponents/DisplayRatingComponent.razor.cs b/WatchIt.Website/WatchIt.Website/Components/Common/Subcomponents/DisplayRatingComponent.razor.cs
new file mode 100644
index 0000000..8f6935e
--- /dev/null
+++ b/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
+}
\ No newline at end of file
diff --git a/WatchIt.Website/WatchIt.Website/Components/Common/Subcomponents/TitledDisplayRatingComponent.razor b/WatchIt.Website/WatchIt.Website/Components/Common/Subcomponents/TitledDisplayRatingComponent.razor
new file mode 100644
index 0000000..6eb08a6
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/WatchIt.Website/WatchIt.Website/Components/Common/Subcomponents/TitledDisplayRatingComponent.razor.cs b/WatchIt.Website/WatchIt.Website/Components/Common/Subcomponents/TitledDisplayRatingComponent.razor.cs
new file mode 100644
index 0000000..937e658
--- /dev/null
+++ b/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
+}
\ No newline at end of file
diff --git a/WatchIt.Website/WatchIt.Website/Components/Common/Subcomponents/TitledDisplayRatingComponent.razor.css b/WatchIt.Website/WatchIt.Website/Components/Common/Subcomponents/TitledDisplayRatingComponent.razor.css
new file mode 100644
index 0000000..f0c49bb
--- /dev/null
+++ b/WatchIt.Website/WatchIt.Website/Components/Common/Subcomponents/TitledDisplayRatingComponent.razor.css
@@ -0,0 +1,5 @@
+/* IDS */
+
+#title {
+    font-size: 1.5rem;
+}
\ No newline at end of file
diff --git a/WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Subcomponents/RoleComponent.razor b/WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Subcomponents/RoleComponent.razor
index a05b1fd..fbef83b 100644
--- a/WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Subcomponents/RoleComponent.razor
+++ b/WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Subcomponents/RoleComponent.razor
@@ -25,28 +25,14 @@
                     </span>
                 </div>
                 <div class="d-inline-flex gap-3">
-                    <div class="vstack">
+                    <div class="vstack gap-2">
                         <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>
+                        <DisplayRatingComponent Rating="_globalRating"
+                                                EmptyMode="DisplayRatingComponent.DisplayRatingComponentEmptyMode.DoubleDash"
+                                                Scale="0.85"/>
                     </div>
                     <div class="vr"></div>
-                    <div class="vstack">
+                    <div class="vstack gap-2">
                         <span id="ratingNameText">Your rating:</span>
                         <div class="d-inline-flex align-items-center h-100">
                             @if (_user is not null)
diff --git a/WatchIt.Website/WatchIt.Website/Components/Pages/PersonPage/Panels/PersonRatingPanel.razor b/WatchIt.Website/WatchIt.Website/Components/Pages/PersonPage/Panels/PersonRatingPanel.razor
new file mode 100644
index 0000000..2490e0b
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/WatchIt.Website/WatchIt.Website/Components/Pages/PersonPage/Panels/PersonRatingPanel.razor.cs b/WatchIt.Website/WatchIt.Website/Components/Pages/PersonPage/Panels/PersonRatingPanel.razor.cs
new file mode 100644
index 0000000..2393a2c
--- /dev/null
+++ b/WatchIt.Website/WatchIt.Website/Components/Pages/PersonPage/Panels/PersonRatingPanel.razor.cs
@@ -0,0 +1,93 @@
+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());
+
+    #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
+}
\ No newline at end of file
diff --git a/WatchIt.Website/WatchIt.Website/Pages/DatabasePage.razor.cs b/WatchIt.Website/WatchIt.Website/Pages/DatabasePage.razor.cs
index 3f9f6d9..179454a 100644
--- a/WatchIt.Website/WatchIt.Website/Pages/DatabasePage.razor.cs
+++ b/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
 }
\ No newline at end of file
diff --git a/WatchIt.Website/WatchIt.Website/Pages/MediaPage.razor b/WatchIt.Website/WatchIt.Website/Pages/MediaPage.razor
index 08f47bd..ec8b3dc 100644
--- a/WatchIt.Website/WatchIt.Website/Pages/MediaPage.razor
+++ b/WatchIt.Website/WatchIt.Website/Pages/MediaPage.razor
@@ -41,7 +41,7 @@ else
             </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">
@@ -108,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">
-                                        <strong>Global rating:</strong> @(_globalRating.Count == 0 ? "no ratings" : $"{Math.Round(_globalRating.Average, 1)}/10")
-                                    </h4>
+                                    <TitledRatingComponent Rating="@(_globalRating)" Title="Global rating:"/>
                                 </div>
                             </div>
                             <div class="row">
diff --git a/WatchIt.Website/WatchIt.Website/Pages/PersonPage.razor b/WatchIt.Website/WatchIt.Website/Pages/PersonPage.razor
index 4a1c110..b250711 100644
--- a/WatchIt.Website/WatchIt.Website/Pages/PersonPage.razor
+++ b/WatchIt.Website/WatchIt.Website/Pages/PersonPage.razor
@@ -1,13 +1,14 @@
 @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); }
+    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>
 }
@@ -28,6 +29,16 @@
                                                   GetPosterMethod="@(action => PersonsWebAPIService.GetPersonPhoto(_person.Id, action))"/>
                 </div>
             </div>
+            <div class="row mt-default gx-default">
+                <div class="col">
+                    
+                </div>
+                <div class="col-auto">
+                    <PersonRatingPanel @ref="_ratingPanel" 
+                                       Id="@(_person.Id)"
+                                       Rating="@(_person.Rating)"/>
+                </div>
+            </div>
         }
         else
         {
diff --git a/WatchIt.Website/WatchIt.Website/Pages/PersonPage.razor.cs b/WatchIt.Website/WatchIt.Website/Pages/PersonPage.razor.cs
index 79886bb..12120a1 100644
--- a/WatchIt.Website/WatchIt.Website/Pages/PersonPage.razor.cs
+++ b/WatchIt.Website/WatchIt.Website/Pages/PersonPage.razor.cs
@@ -1,5 +1,6 @@
 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;
 
@@ -28,6 +29,8 @@ public partial class PersonPage : ComponentBase
     #region FIELDS
 
     private bool _loaded;
+
+    private PersonRatingPanel _ratingPanel = default!;
     
     private PersonResponse? _person;
 
@@ -55,10 +58,13 @@ public partial class PersonPage : ComponentBase
             
             // STEP 1
             await Task.WhenAll(step1Tasks);
-            endTasks.AddRange(
-            [
-                PersonsWebAPIService.PostPersonView(Id),
-            ]);
+            if (_person is not null)
+            {
+                endTasks.AddRange(
+                [
+                    PersonsWebAPIService.PostPersonView(Id),
+                ]);
+            }
             
             // END
             await Task.WhenAll(endTasks);
diff --git a/WatchIt.Website/WatchIt.Website/WatchIt.Website.csproj b/WatchIt.Website/WatchIt.Website/WatchIt.Website.csproj
index 96dece4..b8a140b 100644
--- a/WatchIt.Website/WatchIt.Website/WatchIt.Website.csproj
+++ b/WatchIt.Website/WatchIt.Website/WatchIt.Website.csproj
@@ -52,7 +52,6 @@
     </ItemGroup>
 
     <ItemGroup>
-      <Folder Include="Components\Pages\PersonPage\Panels\" />
       <Folder Include="Components\Pages\PersonPage\Subcomponents\" />
     </ItemGroup>
 
diff --git a/WatchIt.Website/WatchIt.Website/appsettings.json b/WatchIt.Website/WatchIt.Website/appsettings.json
index 2142c32..2e65e00 100644
--- a/WatchIt.Website/WatchIt.Website/appsettings.json
+++ b/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",

From fd38d899c982db4b3443dbca79ba4acf79b7643c Mon Sep 17 00:00:00 2001
From: Mateusz Skoczek <mateusz5432160@gmail.com>
Date: Thu, 24 Oct 2024 23:15:09 +0200
Subject: [PATCH 3/4] PersonMetadataPanel created, RoleListComponent rebuilded
 and separated from MediaPage

---
 WatchIt.Website/WatchIt.Website/App.razor     |   2 +-
 .../Subcomponents/ListItemComponent.razor     |  52 ++++++---
 .../Subcomponents/ListItemComponent.razor.cs  |  96 +++++++++++++++--
 .../Subcomponents/ListItemComponent.razor.css |  17 +--
 .../Subcomponents/RoleListComponent.razor     |  58 ++++++++++
 .../Subcomponents/RoleListComponent.razor.cs  |  56 ++++++----
 .../DatabasePage/DatabasePageComponent.razor  |  19 ++--
 .../DatabasePageComponent.razor.cs            |   6 ++
 .../Panels/ActorRolesPanelComponent.razor     |  26 +++--
 .../Panels/ActorRolesPanelComponent.razor.cs  |   2 +
 .../Panels/CreatorRolesPanelComponent.razor   |  23 ++--
 .../CreatorRolesPanelComponent.razor.cs       |  17 ++-
 .../Subcomponents/RoleComponent.razor         |  52 ---------
 .../Subcomponents/RoleComponent.razor.cs      | 100 ------------------
 .../Subcomponents/RoleComponent.razor.css     |  26 -----
 .../Subcomponents/RoleListComponent.razor     |  45 --------
 .../Subcomponents/RoleListComponent.razor.css |   0
 .../Panels/PersonMetadataPanel.razor          |  16 +++
 .../Panels/PersonMetadataPanel.razor.cs       |  13 +++
 .../Panels/SearchResultPanelComponent.razor   |  22 ++--
 .../SearchResultPanelComponent.razor.cs       |   7 ++
 .../WatchIt.Website/Pages/DatabasePage.razor  |  18 +++-
 .../WatchIt.Website/Pages/MediaPage.razor     |   4 +-
 .../WatchIt.Website/Pages/PersonPage.razor    |  27 ++++-
 .../WatchIt.Website/Pages/SearchPage.razor    |  18 +++-
 .../WatchIt.Website/WatchIt.Website.csproj    |   1 +
 .../WatchIt.Website/wwwroot/css/general.css   |  13 +++
 27 files changed, 403 insertions(+), 333 deletions(-)
 create mode 100644 WatchIt.Website/WatchIt.Website/Components/Common/Subcomponents/RoleListComponent.razor
 rename WatchIt.Website/WatchIt.Website/Components/{Pages/MediaPage => Common}/Subcomponents/RoleListComponent.razor.cs (50%)
 delete mode 100644 WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Subcomponents/RoleComponent.razor
 delete mode 100644 WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Subcomponents/RoleComponent.razor.cs
 delete mode 100644 WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Subcomponents/RoleComponent.razor.css
 delete mode 100644 WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Subcomponents/RoleListComponent.razor
 delete mode 100644 WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Subcomponents/RoleListComponent.razor.css
 create mode 100644 WatchIt.Website/WatchIt.Website/Components/Pages/PersonPage/Panels/PersonMetadataPanel.razor
 create mode 100644 WatchIt.Website/WatchIt.Website/Components/Pages/PersonPage/Panels/PersonMetadataPanel.razor.cs

diff --git a/WatchIt.Website/WatchIt.Website/App.razor b/WatchIt.Website/WatchIt.Website/App.razor
index c54fec3..e5cba46 100644
--- a/WatchIt.Website/WatchIt.Website/App.razor
+++ b/WatchIt.Website/WatchIt.Website/App.razor
@@ -9,7 +9,7 @@
     <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"/>
diff --git a/WatchIt.Website/WatchIt.Website/Components/Common/Subcomponents/ListItemComponent.razor b/WatchIt.Website/WatchIt.Website/Components/Common/Subcomponents/ListItemComponent.razor
index 7f48f38..42b9837 100644
--- a/WatchIt.Website/WatchIt.Website/Components/Common/Subcomponents/ListItemComponent.razor
+++ b/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">
-                        <strong>@(Name)</strong>@(string.IsNullOrWhiteSpace(AdditionalNameInfo) ? string.Empty : AdditionalNameInfo)
-                    </span>
+                    <a style="font-size: @(NameSize)px" class="text-reset text-decoration-none" href="@(ItemUrl)">
+                        <strong>@(Name)</strong>@(string.IsNullOrWhiteSpace(AdditionalInfo) ? string.Empty : AdditionalInfo)
+                    </a>
                 </div>
-                <div class="d-inline-flex gap-2">
-                    <span id="ratingStar">★</span>
-                    <div class="d-inline-flex flex-column justify-content-center">
-                        <span id="ratingValue">@(Rating.Count > 0 ? Rating.Average : "--")/10</span>
-                        @if (Rating.Count > 0)
-                        {
-                            <span id="ratingCount">@(Rating.Count)</span>
-                        }
-                    </div>
+                <div class="d-inline-flex gap-3">
+                    <a class="text-reset text-decoration-none" href="@(ItemUrl)">
+                        <div class="vstack gap-2">
+                            <span id="ratingNameText">Global rating:</span>
+                            <DisplayRatingComponent Rating="GlobalRating"
+                                                    EmptyMode="DisplayRatingComponent.DisplayRatingComponentEmptyMode.DoubleDash"
+                                                    Scale="0.85"/>
+                        </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>
diff --git a/WatchIt.Website/WatchIt.Website/Components/Common/Subcomponents/ListItemComponent.razor.cs b/WatchIt.Website/WatchIt.Website/Components/Common/Subcomponents/ListItemComponent.razor.cs
index f96cf4b..818f3ee 100644
--- a/WatchIt.Website/WatchIt.Website/Components/Common/Subcomponents/ListItemComponent.razor.cs
+++ b/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 required RatingResponse Rating { get; set; }
-    [Parameter] public required Func<long, Action<Picture>, Task> PictureDownloadingTask { get; set; }
-    [Parameter] public int PictureHeight { get; set; } = 150;
+    [Parameter] public string? AdditionalInfo { get; set; }
+    
+    [Parameter] public int NameSize { get; set; } = 25;
+    
+    [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
 }
\ No newline at end of file
diff --git a/WatchIt.Website/WatchIt.Website/Components/Common/Subcomponents/ListItemComponent.razor.css b/WatchIt.Website/WatchIt.Website/Components/Common/Subcomponents/ListItemComponent.razor.css
index 91b920c..7c26de1 100644
--- a/WatchIt.Website/WatchIt.Website/Components/Common/Subcomponents/ListItemComponent.razor.css
+++ b/WatchIt.Website/WatchIt.Website/Components/Common/Subcomponents/ListItemComponent.razor.css
@@ -1,17 +1,10 @@
 /* IDS */
 
-#nameText {
-    font-size: 25px;
+#ratingNameText {
+    font-size: 14px;
+    font-weight: bold;
 }
 
-#ratingStar {
-    font-size: 30px;
-}
-
-#ratingValue {
-    font-size: 20px;
-}
-
-#ratingCount {
-    font-size: 10px;
+#ratingLoginInfoText {
+    font-size: 13px;
 }
\ No newline at end of file
diff --git a/WatchIt.Website/WatchIt.Website/Components/Common/Subcomponents/RoleListComponent.razor b/WatchIt.Website/WatchIt.Website/Components/Common/Subcomponents/RoleListComponent.razor
new file mode 100644
index 0000000..01b8398
--- /dev/null
+++ b/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"/>
+}
\ No newline at end of file
diff --git a/WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Subcomponents/RoleListComponent.razor.cs b/WatchIt.Website/WatchIt.Website/Components/Common/Subcomponents/RoleListComponent.razor.cs
similarity index 50%
rename from WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Subcomponents/RoleListComponent.razor.cs
rename to WatchIt.Website/WatchIt.Website/Components/Common/Subcomponents/RoleListComponent.razor.cs
index da39771..a44624f 100644
--- a/WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Subcomponents/RoleListComponent.razor.cs
+++ b/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<Guid, RatingRequest, Task> PutRatingAction { get; set; }
-    [Parameter] public required Func<Guid, Task> DeleteRatingAction { get; set; }
-
+    
+    [Parameter] public required Func<TRole, TRoleParent, string> NameSource { get; set; }
+    [Parameter] public Func<TRole, TRoleParent, string>? AdditionalInfoSource { 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(
@@ -90,9 +93,15 @@ public partial class RoleListComponent<TRole, TQuery> : ComponentBase where TRol
     private async Task GetRoles(bool firstFetch = false)
     {
         _rolesFetching = true;
-        await GetRolesAction(Id, Query, data =>
+        await GetRolesAction(Id, Query, async data =>
         {
-            _roles.AddRange(data);
+            List<TRole> newRolesArray = data.ToList();
+            Dictionary<TRole, TRoleParent> newRoles = new Dictionary<TRole, TRoleParent>();
+            await Parallel.ForEachAsync(data, new ParallelOptions { MaxDegreeOfParallelism = 4 }, async (item, _) => await GetRoleParentMethod(ParentItemIdSource(item), parent => newRoles[item] = parent));
+            foreach (KeyValuePair<TRole, TRoleParent> kvp in newRoles.OrderBy(x => newRolesArray.IndexOf(x.Key)))
+            {
+                _roles[kvp.Key] = kvp.Value;
+            }
             if (data.Count() < _pageSize)
             {
                 _allItemsLoaded = true;
@@ -106,6 +115,7 @@ public partial class RoleListComponent<TRole, TQuery> : ComponentBase where TRol
             }
             Query.After += data.Count();
             _rolesFetching = false;
+            StateHasChanged();
         });
     }
 
diff --git a/WatchIt.Website/WatchIt.Website/Components/Pages/DatabasePage/DatabasePageComponent.razor b/WatchIt.Website/WatchIt.Website/Components/Pages/DatabasePage/DatabasePageComponent.razor
index 2df7f44..0a3738a 100644
--- a/WatchIt.Website/WatchIt.Website/Components/Pages/DatabasePage/DatabasePageComponent.razor
+++ b/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))))">
-                            <ListItemComponent Id="@(IdSource(item))"
-                                               Name="@(NameSource(item))"
-                                               AdditionalNameInfo="@(AdditionalNameInfoSource(item))"
-                                               Rating="@(RatingSource(item))"
-                                               PictureDownloadingTask="@(PictureDownloadingTask)"/>
+                        long id = IdSource(item);
+                        string url = string.Format(UrlIdTemplate, id);
+                        <div class="panel p-2">
+                            <ListItemComponent Name="@(NameSource(item))"
+                                               AdditionalInfo="@(AdditionalNameInfoSource(item))"
+                                               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)
diff --git a/WatchIt.Website/WatchIt.Website/Components/Pages/DatabasePage/DatabasePageComponent.razor.cs b/WatchIt.Website/WatchIt.Website/Components/Pages/DatabasePage/DatabasePageComponent.razor.cs
index 2bb0928..6d07ab9 100644
--- a/WatchIt.Website/WatchIt.Website/Components/Pages/DatabasePage/DatabasePageComponent.razor.cs
+++ b/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
     
diff --git a/WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Panels/ActorRolesPanelComponent.razor b/WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Panels/ActorRolesPanelComponent.razor
index 8b32774..9f1a1df 100644
--- a/WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Panels/ActorRolesPanelComponent.razor
+++ b/WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Panels/ActorRolesPanelComponent.razor
@@ -1,18 +1,26 @@
-@using WatchIt.Website.Components.Pages.MediaPage.Subcomponents
+@using WatchIt.Common.Model.Persons
+@using WatchIt.Common.Model.Roles
 
 
 
 <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)"
+        <RoleListComponent TRole="ActorRoleResponse"
+                           TQuery="ActorRoleMediaQueryParameters"
+                           TRoleParent="PersonResponse"
+                           Id="@(Id)"
                            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)"/>
+                           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>
\ No newline at end of file
diff --git a/WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Panels/ActorRolesPanelComponent.razor.cs b/WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Panels/ActorRolesPanelComponent.razor.cs
index 5cd65b7..023869c 100644
--- a/WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Panels/ActorRolesPanelComponent.razor.cs
+++ b/WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Panels/ActorRolesPanelComponent.razor.cs
@@ -1,6 +1,7 @@
 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;
@@ -10,6 +11,7 @@ public partial class ActorRolesPanelComponent : 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
diff --git a/WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Panels/CreatorRolesPanelComponent.razor b/WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Panels/CreatorRolesPanelComponent.razor
index 29a7c51..3361227 100644
--- a/WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Panels/CreatorRolesPanelComponent.razor
+++ b/WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Panels/CreatorRolesPanelComponent.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) 
-                               Id="@(Id)"
+            <RoleListComponent @ref=@(_roleListComponent)
                                TRole="CreatorRoleResponse"
                                TQuery="CreatorRoleMediaQueryParameters"
+                               TRoleParent="PersonResponse"
+                               Id="@(Id)"
                                Query="@(_query)"
-                               GetRolesAction="MediaWebAPIService.GetMediaAllCreatorRoles"
-                               GetGlobalRatingAction="@((id, action) => RolesWebAPIService.GetCreatorRoleRating(id, action))"
-                               GetUserRatingAction="@((id, userId, actionSuccess, actionNotFound) => RolesWebAPIService.GetCreatorRoleRatingByUser(id, userId, actionSuccess, actionNotFound))"
-                               PutRatingAction="(id, request) => RolesWebAPIService.PutActorRoleRating(id, request)"
-                               DeleteRatingAction="(id) => RolesWebAPIService.DeleteActorRoleRating(id)"/>
+                               GetRolesAction="@(MediaWebAPIService.GetMediaAllCreatorRoles)"
+                               NameSource="@((_, parent) => parent.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.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
diff --git a/WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Panels/CreatorRolesPanelComponent.razor.cs b/WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Panels/CreatorRolesPanelComponent.razor.cs
index 181c061..8c84b65 100644
--- a/WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Panels/CreatorRolesPanelComponent.razor.cs
+++ b/WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Panels/CreatorRolesPanelComponent.razor.cs
@@ -1,8 +1,10 @@
 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;
@@ -10,10 +12,10 @@ namespace WatchIt.Website.Components.Pages.MediaPage.Panels;
 public partial class CreatorRolesPanelComponent : 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)
     {
diff --git a/WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Subcomponents/RoleComponent.razor b/WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Subcomponents/RoleComponent.razor
deleted file mode 100644
index fbef83b..0000000
--- a/WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Subcomponents/RoleComponent.razor
+++ /dev/null
@@ -1,52 +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 gap-2">
-                        <span id="ratingNameText">Global rating:</span>
-                        <DisplayRatingComponent Rating="_globalRating"
-                                                EmptyMode="DisplayRatingComponent.DisplayRatingComponentEmptyMode.DoubleDash"
-                                                Scale="0.85"/>
-                    </div>
-                    <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 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>
\ No newline at end of file
diff --git a/WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Subcomponents/RoleComponent.razor.cs b/WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Subcomponents/RoleComponent.razor.cs
deleted file mode 100644
index fe7d00d..0000000
--- a/WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Subcomponents/RoleComponent.razor.cs
+++ /dev/null
@@ -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
-}
\ No newline at end of file
diff --git a/WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Subcomponents/RoleComponent.razor.css b/WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Subcomponents/RoleComponent.razor.css
deleted file mode 100644
index 9179236..0000000
--- a/WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Subcomponents/RoleComponent.razor.css
+++ /dev/null
@@ -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;
-}
\ No newline at end of file
diff --git a/WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Subcomponents/RoleListComponent.razor b/WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Subcomponents/RoleListComponent.razor
deleted file mode 100644
index f16167c..0000000
--- a/WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Subcomponents/RoleListComponent.razor
+++ /dev/null
@@ -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"/>
-}
\ No newline at end of file
diff --git a/WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Subcomponents/RoleListComponent.razor.css b/WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Subcomponents/RoleListComponent.razor.css
deleted file mode 100644
index e69de29..0000000
diff --git a/WatchIt.Website/WatchIt.Website/Components/Pages/PersonPage/Panels/PersonMetadataPanel.razor b/WatchIt.Website/WatchIt.Website/Components/Pages/PersonPage/Panels/PersonMetadataPanel.razor
new file mode 100644
index 0000000..331fec5
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/WatchIt.Website/WatchIt.Website/Components/Pages/PersonPage/Panels/PersonMetadataPanel.razor.cs b/WatchIt.Website/WatchIt.Website/Components/Pages/PersonPage/Panels/PersonMetadataPanel.razor.cs
new file mode 100644
index 0000000..03abb8b
--- /dev/null
+++ b/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
+}
\ No newline at end of file
diff --git a/WatchIt.Website/WatchIt.Website/Components/Pages/SearchPage/Panels/SearchResultPanelComponent.razor b/WatchIt.Website/WatchIt.Website/Components/Pages/SearchPage/Panels/SearchResultPanelComponent.razor
index e899426..c0a7d47 100644
--- a/WatchIt.Website/WatchIt.Website/Components/Pages/SearchPage/Panels/SearchResultPanelComponent.razor
+++ b/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]))"
-                                                   Name="@(NameSource(_items[i]))"
-                                                   AdditionalNameInfo="@(AdditionalNameInfoSource(_items[i]))"
-                                                   Rating="@(RatingSource(_items[i]))"
-                                                   PictureDownloadingTask="@(PictureDownloadingTask)"/>
-                            </a>
+                            @{
+                                int iCopy = i;
+                                long id = IdSource(_items[iCopy]);
+                                string url = string.Format(UrlIdTemplate, id);
+                            }
+                            <ListItemComponent Name="@(NameSource(_items[i]))"
+                                               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>
                 }
diff --git a/WatchIt.Website/WatchIt.Website/Components/Pages/SearchPage/Panels/SearchResultPanelComponent.razor.cs b/WatchIt.Website/WatchIt.Website/Components/Pages/SearchPage/Panels/SearchResultPanelComponent.razor.cs
index 428f4fe..e3f2f68 100644
--- a/WatchIt.Website/WatchIt.Website/Components/Pages/SearchPage/Panels/SearchResultPanelComponent.razor.cs
+++ b/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; }
 
diff --git a/WatchIt.Website/WatchIt.Website/Pages/DatabasePage.razor b/WatchIt.Website/WatchIt.Website/Pages/DatabasePage.razor
index 0d46cb7..5740ae8 100644
--- a/WatchIt.Website/WatchIt.Website/Pages/DatabasePage.razor
+++ b/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;     
diff --git a/WatchIt.Website/WatchIt.Website/Pages/MediaPage.razor b/WatchIt.Website/WatchIt.Website/Pages/MediaPage.razor
index ec8b3dc..a295da4 100644
--- a/WatchIt.Website/WatchIt.Website/Pages/MediaPage.razor
+++ b/WatchIt.Website/WatchIt.Website/Pages/MediaPage.razor
@@ -45,7 +45,7 @@ else
                         <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>
@@ -112,7 +112,7 @@ else
                         <div class="container-grid">
                             <div class="row">
                                 <div class="col">
-                                    <TitledRatingComponent Rating="@(_globalRating)" Title="Global rating:"/>
+                                    <TitledDisplayRatingComponent Rating="@(_globalRating)" Title="Global rating:"/>
                                 </div>
                             </div>
                             <div class="row">
diff --git a/WatchIt.Website/WatchIt.Website/Pages/PersonPage.razor b/WatchIt.Website/WatchIt.Website/Pages/PersonPage.razor
index b250711..7e6d327 100644
--- a/WatchIt.Website/WatchIt.Website/Pages/PersonPage.razor
+++ b/WatchIt.Website/WatchIt.Website/Pages/PersonPage.razor
@@ -31,7 +31,7 @@
             </div>
             <div class="row mt-default gx-default">
                 <div class="col">
-                    
+                    <PersonMetadataPanel Item="@(_person)"/>
                 </div>
                 <div class="col-auto">
                     <PersonRatingPanel @ref="_ratingPanel" 
@@ -39,6 +39,31 @@
                                        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">
+                                    <!--ActorRolesPanelComponent Id="@(Id)"/-->
+                                </div>
+                            </TabPanel>
+                            <TabPanel Name="creator">
+                                <div class="mt-default">
+                                    <!--CreatorRolesPanelComponent Id="@(Id)"/-->
+                                </div>
+                            </TabPanel>
+                        </Content>
+                    </Tabs>
+                </div>
+            </div>
         }
         else
         {
diff --git a/WatchIt.Website/WatchIt.Website/Pages/SearchPage.razor b/WatchIt.Website/WatchIt.Website/Pages/SearchPage.razor
index 1b962e4..a88e28e 100644
--- a/WatchIt.Website/WatchIt.Website/Pages/SearchPage.razor
+++ b/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>
\ No newline at end of file
diff --git a/WatchIt.Website/WatchIt.Website/WatchIt.Website.csproj b/WatchIt.Website/WatchIt.Website/WatchIt.Website.csproj
index b8a140b..9601cf7 100644
--- a/WatchIt.Website/WatchIt.Website/WatchIt.Website.csproj
+++ b/WatchIt.Website/WatchIt.Website/WatchIt.Website.csproj
@@ -52,6 +52,7 @@
     </ItemGroup>
 
     <ItemGroup>
+      <Folder Include="Components\Pages\MediaPage\Subcomponents\" />
       <Folder Include="Components\Pages\PersonPage\Subcomponents\" />
     </ItemGroup>
 
diff --git a/WatchIt.Website/WatchIt.Website/wwwroot/css/general.css b/WatchIt.Website/WatchIt.Website/wwwroot/css/general.css
index 4223bee..319ee59 100644
--- a/WatchIt.Website/WatchIt.Website/wwwroot/css/general.css
+++ b/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;
+}
+
 
 
 

From 975ba2dd6fcb406f5e510970dd2265a443f4867d Mon Sep 17 00:00:00 2001
From: Mateusz Skoczek <mateusz5432160@gmail.com>
Date: Thu, 24 Oct 2024 23:50:21 +0200
Subject: [PATCH 4/4] roles panels for PersonPage created

---
 .../Subcomponents/RoleListComponent.razor.cs  | 12 +--
 ...or => MediaActorRolesPanelComponent.razor} |  2 +-
 ...=> MediaActorRolesPanelComponent.razor.cs} |  2 +-
 ... => MediaCreatorRolesPanelComponent.razor} |  0
 ... MediaCreatorRolesPanelComponent.razor.cs} |  2 +-
 .../PersonActorRolesPanelComponent.razor      | 27 +++++++
 .../PersonActorRolesPanelComponent.razor.cs   | 27 +++++++
 .../PersonCreatorRolesPanelComponent.razor    | 43 +++++++++++
 .../PersonCreatorRolesPanelComponent.razor.cs | 76 +++++++++++++++++++
 .../Panels/PersonRatingPanel.razor.cs         |  6 +-
 .../WatchIt.Website/Pages/MediaPage.razor     |  4 +-
 .../WatchIt.Website/Pages/PersonPage.razor    |  6 +-
 12 files changed, 191 insertions(+), 16 deletions(-)
 rename WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Panels/{ActorRolesPanelComponent.razor => MediaActorRolesPanelComponent.razor} (94%)
 rename WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Panels/{ActorRolesPanelComponent.razor.cs => MediaActorRolesPanelComponent.razor.cs} (92%)
 rename WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Panels/{CreatorRolesPanelComponent.razor => MediaCreatorRolesPanelComponent.razor} (100%)
 rename WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Panels/{CreatorRolesPanelComponent.razor.cs => MediaCreatorRolesPanelComponent.razor.cs} (96%)
 create mode 100644 WatchIt.Website/WatchIt.Website/Components/Pages/PersonPage/Panels/PersonActorRolesPanelComponent.razor
 create mode 100644 WatchIt.Website/WatchIt.Website/Components/Pages/PersonPage/Panels/PersonActorRolesPanelComponent.razor.cs
 create mode 100644 WatchIt.Website/WatchIt.Website/Components/Pages/PersonPage/Panels/PersonCreatorRolesPanelComponent.razor
 create mode 100644 WatchIt.Website/WatchIt.Website/Components/Pages/PersonPage/Panels/PersonCreatorRolesPanelComponent.razor.cs

diff --git a/WatchIt.Website/WatchIt.Website/Components/Common/Subcomponents/RoleListComponent.razor.cs b/WatchIt.Website/WatchIt.Website/Components/Common/Subcomponents/RoleListComponent.razor.cs
index a44624f..8e5f918 100644
--- a/WatchIt.Website/WatchIt.Website/Components/Common/Subcomponents/RoleListComponent.razor.cs
+++ b/WatchIt.Website/WatchIt.Website/Components/Common/Subcomponents/RoleListComponent.razor.cs
@@ -84,9 +84,6 @@ public partial class RoleListComponent<TRole, TQuery, TRoleParent> : ComponentBa
             
             // END
             await Task.WhenAll(endTasks);
-            
-            _loaded = true;
-            StateHasChanged();
         }
     }
 
@@ -95,12 +92,9 @@ public partial class RoleListComponent<TRole, TQuery, TRoleParent> : ComponentBa
         _rolesFetching = true;
         await GetRolesAction(Id, Query, async data =>
         {
-            List<TRole> newRolesArray = data.ToList();
-            Dictionary<TRole, TRoleParent> newRoles = new Dictionary<TRole, TRoleParent>();
-            await Parallel.ForEachAsync(data, new ParallelOptions { MaxDegreeOfParallelism = 4 }, async (item, _) => await GetRoleParentMethod(ParentItemIdSource(item), parent => newRoles[item] = parent));
-            foreach (KeyValuePair<TRole, TRoleParent> kvp in newRoles.OrderBy(x => newRolesArray.IndexOf(x.Key)))
+            foreach (TRole item in data)
             {
-                _roles[kvp.Key] = kvp.Value;
+                await GetRoleParentMethod(ParentItemIdSource(item), parent => _roles[item] = parent);
             }
             if (data.Count() < _pageSize)
             {
@@ -115,6 +109,8 @@ public partial class RoleListComponent<TRole, TQuery, TRoleParent> : ComponentBa
             }
             Query.After += data.Count();
             _rolesFetching = false;
+            
+            _loaded = true;
             StateHasChanged();
         });
     }
diff --git a/WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Panels/ActorRolesPanelComponent.razor b/WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Panels/MediaActorRolesPanelComponent.razor
similarity index 94%
rename from WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Panels/ActorRolesPanelComponent.razor
rename to WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Panels/MediaActorRolesPanelComponent.razor
index 9f1a1df..80804ab 100644
--- a/WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Panels/ActorRolesPanelComponent.razor
+++ b/WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Panels/MediaActorRolesPanelComponent.razor
@@ -3,7 +3,7 @@
 
 
 
-<div class="panel panel-padding-regular panel-radius-regular panel-background-regular @(Class)">
+<div class="panel @(Class)">
     <div class="vstack gap-3">
         <span class="panel-text-title">Actors</span>
         <RoleListComponent TRole="ActorRoleResponse"
diff --git a/WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Panels/ActorRolesPanelComponent.razor.cs b/WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Panels/MediaActorRolesPanelComponent.razor.cs
similarity index 92%
rename from WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Panels/ActorRolesPanelComponent.razor.cs
rename to WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Panels/MediaActorRolesPanelComponent.razor.cs
index 023869c..54e7287 100644
--- a/WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Panels/ActorRolesPanelComponent.razor.cs
+++ b/WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Panels/MediaActorRolesPanelComponent.razor.cs
@@ -6,7 +6,7 @@ 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
     
diff --git a/WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Panels/CreatorRolesPanelComponent.razor b/WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Panels/MediaCreatorRolesPanelComponent.razor
similarity index 100%
rename from WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Panels/CreatorRolesPanelComponent.razor
rename to WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Panels/MediaCreatorRolesPanelComponent.razor
diff --git a/WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Panels/CreatorRolesPanelComponent.razor.cs b/WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Panels/MediaCreatorRolesPanelComponent.razor.cs
similarity index 96%
rename from WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Panels/CreatorRolesPanelComponent.razor.cs
rename to WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Panels/MediaCreatorRolesPanelComponent.razor.cs
index 8c84b65..c1bb1b4 100644
--- a/WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Panels/CreatorRolesPanelComponent.razor.cs
+++ b/WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Panels/MediaCreatorRolesPanelComponent.razor.cs
@@ -9,7 +9,7 @@ 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
 
diff --git a/WatchIt.Website/WatchIt.Website/Components/Pages/PersonPage/Panels/PersonActorRolesPanelComponent.razor b/WatchIt.Website/WatchIt.Website/Components/Pages/PersonPage/Panels/PersonActorRolesPanelComponent.razor
new file mode 100644
index 0000000..88a40e8
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/WatchIt.Website/WatchIt.Website/Components/Pages/PersonPage/Panels/PersonActorRolesPanelComponent.razor.cs b/WatchIt.Website/WatchIt.Website/Components/Pages/PersonPage/Panels/PersonActorRolesPanelComponent.razor.cs
new file mode 100644
index 0000000..4b87639
--- /dev/null
+++ b/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
+}
\ No newline at end of file
diff --git a/WatchIt.Website/WatchIt.Website/Components/Pages/PersonPage/Panels/PersonCreatorRolesPanelComponent.razor b/WatchIt.Website/WatchIt.Website/Components/Pages/PersonPage/Panels/PersonCreatorRolesPanelComponent.razor
new file mode 100644
index 0000000..609b18a
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/WatchIt.Website/WatchIt.Website/Components/Pages/PersonPage/Panels/PersonCreatorRolesPanelComponent.razor.cs b/WatchIt.Website/WatchIt.Website/Components/Pages/PersonPage/Panels/PersonCreatorRolesPanelComponent.razor.cs
new file mode 100644
index 0000000..ac6f353
--- /dev/null
+++ b/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
+}
\ No newline at end of file
diff --git a/WatchIt.Website/WatchIt.Website/Components/Pages/PersonPage/Panels/PersonRatingPanel.razor.cs b/WatchIt.Website/WatchIt.Website/Components/Pages/PersonPage/Panels/PersonRatingPanel.razor.cs
index 2393a2c..4e57c54 100644
--- a/WatchIt.Website/WatchIt.Website/Components/Pages/PersonPage/Panels/PersonRatingPanel.razor.cs
+++ b/WatchIt.Website/WatchIt.Website/Components/Pages/PersonPage/Panels/PersonRatingPanel.razor.cs
@@ -37,7 +37,11 @@ public partial class PersonRatingPanel : ComponentBase
 
     #region PUBLIC METHODS
 
-    public async Task UpdateRating() => await Task.WhenAll(UpdateGlobalRating(), UpdateUserRating());
+    public async Task UpdateRating()
+    {
+        await Task.WhenAll(UpdateGlobalRating(), UpdateUserRating());
+        StateHasChanged();
+    }
 
     #endregion
     
diff --git a/WatchIt.Website/WatchIt.Website/Pages/MediaPage.razor b/WatchIt.Website/WatchIt.Website/Pages/MediaPage.razor
index a295da4..2dde4a8 100644
--- a/WatchIt.Website/WatchIt.Website/Pages/MediaPage.razor
+++ b/WatchIt.Website/WatchIt.Website/Pages/MediaPage.razor
@@ -177,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>
diff --git a/WatchIt.Website/WatchIt.Website/Pages/PersonPage.razor b/WatchIt.Website/WatchIt.Website/Pages/PersonPage.razor
index 7e6d327..d88eb16 100644
--- a/WatchIt.Website/WatchIt.Website/Pages/PersonPage.razor
+++ b/WatchIt.Website/WatchIt.Website/Pages/PersonPage.razor
@@ -52,12 +52,14 @@
                         <Content>
                             <TabPanel Name="actor">
                                 <div class="mt-default">
-                                    <!--ActorRolesPanelComponent Id="@(Id)"/-->
+                                    <PersonActorRolesPanelComponent Id="@(Id)"
+                                                                    OnRatingChanged="@(async () => await _ratingPanel.UpdateRating())"/>
                                 </div>
                             </TabPanel>
                             <TabPanel Name="creator">
                                 <div class="mt-default">
-                                    <!--CreatorRolesPanelComponent Id="@(Id)"/-->
+                                    <PersonCreatorRolesPanelComponent Id="@(Id)"
+                                                                      OnRatingChanged="@(async () => await _ratingPanel.UpdateRating())"/>
                                 </div>
                             </TabPanel>
                         </Content>