PersonMetadataPanel created, RoleListComponent rebuilded and separated from MediaPage

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"/>

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

@@ -1,26 +1,52 @@
 <div class="container-grid">
     <div class="row">
         <div class="col-auto">
-            <PictureComponent Picture="@(_picture)" Placeholder="/assets/media_poster.png" AlternativeText="poster" Height="@(PictureHeight)"/>
+            <a class="text-reset text-decoration-none" href="@(ItemUrl)">
+                <PictureComponent Picture="@(_poster)" Placeholder="@(PosterPlaceholder)" AlternativeText="poster" Height="@(PosterHeight)"/>
+            </a>
         </div>
         <div class="col">
             <div class="d-flex align-items-start flex-column h-100">
                 <div class="mb-auto">
-                    <span id="nameText">
+                    <a style="font-size: @(NameSize)px" class="text-reset text-decoration-none" href="@(ItemUrl)">
-                        <strong>@(Name)</strong>@(string.IsNullOrWhiteSpace(AdditionalNameInfo) ? string.Empty : AdditionalNameInfo)
+                        <strong>@(Name)</strong>@(string.IsNullOrWhiteSpace(AdditionalInfo) ? string.Empty : AdditionalInfo)
-                    </span>
+                    </a>
                 </div>
-                <div class="d-inline-flex gap-2">
+                <div class="d-inline-flex gap-3">
-                    <span id="ratingStar">★</span>
+                    <a class="text-reset text-decoration-none" href="@(ItemUrl)">
-                    <div class="d-inline-flex flex-column justify-content-center">
+                        <div class="vstack gap-2">
-                        <span id="ratingValue">@(Rating.Count > 0 ? Rating.Average : "--")/10</span>
+                            <span id="ratingNameText">Global rating:</span>
-                        @if (Rating.Count > 0)
+                            <DisplayRatingComponent Rating="GlobalRating"
+                                                    EmptyMode="DisplayRatingComponent.DisplayRatingComponentEmptyMode.DoubleDash"
+                                                    Scale="0.85"/>
+                        </div>
+                    </a>
+                    @if (GetUserRatingMethod is not null && PutRatingMethod is not null && DeleteRatingMethod is not null)
                     {
-                            <span id="ratingCount">@(Rating.Count)</span>
+                        <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>
     </div>
-    </div>
 </div>

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

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

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

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

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

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

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

@@ -1,32 +1,34 @@
-using System.ComponentModel;
 using Microsoft.AspNetCore.Components;
+using WatchIt.Common.Model;
 using WatchIt.Common.Model.Rating;
-using WatchIt.Common.Model.Roles;
-using WatchIt.Common.Query;
 
-namespace WatchIt.Website.Components.Pages.MediaPage.Subcomponents;
+namespace WatchIt.Website.Components.Common.Subcomponents;
 
-public partial class RoleListComponent<TRole, TQuery> : ComponentBase where TRole : IRoleResponse, IQueryOrderable<TRole> where TQuery : QueryParameters<TRole>
+public partial class RoleListComponent<TRole, TQuery, TRoleParent> : ComponentBase where TRole : WatchIt.Common.Model.Roles.IRoleResponse, WatchIt.Common.Query.IQueryOrderable<TRole>
+                                                                                   where TQuery : WatchIt.Common.Query.QueryParameters<TRole>
 {
-    #region SERVICES
-    
-    [Inject] private NavigationManager NavigationManager { get; set; } = default!;
-    
-    #endregion
-    
-    
-    
     #region PARAMETERS
     
     [Parameter] public required long Id { get; set; }
     [Parameter] public TQuery Query { get; set; } = Activator.CreateInstance<TQuery>();
-    [Parameter] public Func<TRole, string>? AdditionalTextSource { get; set; } 
-    
     [Parameter] public required Func<long, TQuery, Action<IEnumerable<TRole>>, Task> GetRolesAction { get; set; }
-    [Parameter] public required Func<Guid, Action<RatingResponse>, Task> GetGlobalRatingAction { get; set; }
+    
-    [Parameter] public required Func<Guid, long, Action<short>, Action, Task> GetUserRatingAction { get; set; }
+    [Parameter] public required Func<TRole, TRoleParent, string> NameSource { get; set; }
-    [Parameter] public required Func<Guid, RatingRequest, Task> PutRatingAction { get; set; }
+    [Parameter] public Func<TRole, TRoleParent, string>? AdditionalInfoSource { get; set; }
-    [Parameter] public required Func<Guid, Task> DeleteRatingAction { get; set; }
+    
+    [Parameter] public required Func<long, Action<TRoleParent>, Task> GetRoleParentMethod { get; set; }
+    [Parameter] public required Func<TRole, long> ParentItemIdSource { get; set; }
+    [Parameter] public required string ParentUrlTemplate { get; set; }
+    
+    [Parameter] public required string PosterPlaceholder { get; set; }
+    [Parameter] public required Func<long, Action<Picture>, Task> PosterDownloadingTask { get; set; }
+    
+    [Parameter] public required Func<Guid, Action<RatingResponse>, Task> GetGlobalRatingMethod { get; set; }
+    [Parameter] public required Func<Guid, long, Action<short>, Action, Task> GetUserRatingMethod { get; set; }
+    [Parameter] public required Func<Guid, RatingRequest, Task> PutRatingMethod { get; set; }
+    [Parameter] public required Func<Guid, Task> DeleteRatingMethod { get; set; }
+    
+    [Parameter] public Action? OnRatingChanged { get; set; }
     
     #endregion
     
@@ -39,7 +41,7 @@ public partial class RoleListComponent<TRole, TQuery> : ComponentBase where TRol
     private bool _loaded;
     private bool _allItemsLoaded;
     
-    private List<TRole> _roles = new List<TRole>();
+    private Dictionary<TRole, TRoleParent> _roles = new Dictionary<TRole, TRoleParent>();
     private bool _rolesFetching;
 
     #endregion
@@ -72,6 +74,7 @@ public partial class RoleListComponent<TRole, TQuery> : ComponentBase where TRol
             
             // INIT
             Query.First = _pageSize;
+            Query.OrderBy = "rating.average";
             
             // STEP 0
             endTasks.AddRange(
@@ -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();
         });
     }
 

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

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

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

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

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

@@ -1,18 +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)" 
+        <RoleListComponent TRole="ActorRoleResponse"
-                           TRole="WatchIt.Common.Model.Roles.ActorRoleResponse"
+                           TQuery="ActorRoleMediaQueryParameters"
-                           TQuery="WatchIt.Common.Model.Roles.ActorRoleMediaQueryParameters"
+                           TRoleParent="PersonResponse"
-                           AdditionalTextSource="@(data => data.Name)"
+                           Id="@(Id)"
                            GetRolesAction="@(MediaWebAPIService.GetMediaAllActorRoles)"
-                           GetGlobalRatingAction="@((id, action) => RolesWebAPIService.GetActorRoleRating(id, action))"
+                           NameSource="@((_, parent) => parent.Name)"
-                           GetUserRatingAction="@((id, userId, actionSuccess, actionNotFound) => RolesWebAPIService.GetActorRoleRatingByUser(id, userId, actionSuccess, actionNotFound))"
+                           AdditionalInfoSource="@((item, _) => $" as {item.Name}")"
-                           PutRatingAction="(id, request) => RolesWebAPIService.PutActorRoleRating(id, request)"
+                           GetRoleParentMethod="@((id, action) => PersonsWebAPIService.GetPerson(id, action))"
-                           DeleteRatingAction="(id) => RolesWebAPIService.DeleteActorRoleRating(id)"/>
+                           ParentItemIdSource="@(item => item.PersonId)"
+                           ParentUrlTemplate="/person/{0}"
+                           PosterPlaceholder="/assets/person_poster.png"
+                           PosterDownloadingTask="@((id, action) => PersonsWebAPIService.GetPersonPhoto(id, action))"
+                           GetGlobalRatingMethod="@((id, action) => RolesWebAPIService.GetActorRoleRating(id, action))"
+                           GetUserRatingMethod="@((id, userId, actionSuccess, actionNotFound) => RolesWebAPIService.GetActorRoleRatingByUser(id, userId, actionSuccess, actionNotFound))"
+                           PutRatingMethod="@((id, request) => RolesWebAPIService.PutActorRoleRating(id, request))"
+                           DeleteRatingMethod="@(id => RolesWebAPIService.DeleteActorRoleRating(id))"/>
     </div>
 </div>

WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Panels/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

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
 
 
 
@@ -17,15 +17,22 @@
                 </RadioGroup>
             </div>
             <RoleListComponent @ref=@(_roleListComponent)
-                               Id="@(Id)"
                                TRole="CreatorRoleResponse"
                                TQuery="CreatorRoleMediaQueryParameters"
+                               TRoleParent="PersonResponse"
+                               Id="@(Id)"
                                Query="@(_query)"
-                               GetRolesAction="MediaWebAPIService.GetMediaAllCreatorRoles"
+                               GetRolesAction="@(MediaWebAPIService.GetMediaAllCreatorRoles)"
-                               GetGlobalRatingAction="@((id, action) => RolesWebAPIService.GetCreatorRoleRating(id, action))"
+                               NameSource="@((_, parent) => parent.Name)"
-                               GetUserRatingAction="@((id, userId, actionSuccess, actionNotFound) => RolesWebAPIService.GetCreatorRoleRatingByUser(id, userId, actionSuccess, actionNotFound))"
+                               GetRoleParentMethod="@((id, action) => PersonsWebAPIService.GetPerson(id, action))"
-                               PutRatingAction="(id, request) => RolesWebAPIService.PutActorRoleRating(id, request)"
+                               ParentItemIdSource="@(item => item.PersonId)"
-                               DeleteRatingAction="(id) => RolesWebAPIService.DeleteActorRoleRating(id)"/>
+                               ParentUrlTemplate="/person/{0}"
+                               PosterPlaceholder="/assets/person_poster.png"
+                               PosterDownloadingTask="@((id, action) => PersonsWebAPIService.GetPersonPhoto(id, action))"
+                               GetGlobalRatingMethod="@((id, action) => RolesWebAPIService.GetCreatorRoleRating(id, action))"
+                               GetUserRatingMethod="@((id, userId, actionSuccess, actionNotFound) => RolesWebAPIService.GetCreatorRoleRatingByUser(id, userId, actionSuccess, actionNotFound))"
+                               PutRatingMethod="@((id, request) => RolesWebAPIService.PutCreatorRoleRating(id, request))"
+                               DeleteRatingMethod="@((id) => RolesWebAPIService.DeleteCreatorRoleRating(id))"/>
         </div>
     }
     else

WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Panels/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;
@@ -11,9 +13,9 @@ 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
     
@@ -30,9 +32,7 @@ public partial class CreatorRolesPanelComponent : ComponentBase
 
     #region FIELDS
 
-    private User? _user;
+    private RoleListComponent<CreatorRoleResponse, CreatorRoleMediaQueryParameters, PersonResponse> _roleListComponent;
-
-    private RoleListComponent<CreatorRoleResponse, CreatorRoleMediaQueryParameters> _roleListComponent;
 
     private bool _loaded;
 
@@ -45,11 +45,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)
     {
         if (firstRender)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

WatchIt.Website/WatchIt.Website/Pages/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">

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
         {

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

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

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

@@ -52,6 +52,7 @@
     </ItemGroup>
 
     <ItemGroup>
+      <Folder Include="Components\Pages\MediaPage\Subcomponents\" />
       <Folder Include="Components\Pages\PersonPage\Subcomponents\" />
     </ItemGroup>
 

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;
+}
+