From 64c73b7b5d20330110e756724677ef2068e848e6 Mon Sep 17 00:00:00 2001
From: Mateusz Skoczek <mateusz5432160@gmail.com>
Date: Sat, 28 Sep 2024 02:36:53 +0200
Subject: [PATCH] search page finished

---
 .../RatingRequest.cs}                         |  6 +-
 .../RatingResponse.cs}                        |  8 +--
 .../MediaController.cs                        |  5 +-
 .../IMediaControllerService.cs                |  3 +-
 .../MediaControllerService.cs                 |  5 +-
 .../IMediaWebAPIService.cs                    |  5 +-
 .../MediaWebAPIService.cs                     |  5 +-
 .../Components/ListItemComponent.razor        | 26 +++++++++
 .../Components/ListItemComponent.razor.cs     | 56 +++++++++++++++++++
 .../Components/ListItemComponent.razor.css    | 17 ++++++
 .../SearchPage/SearchResultComponent.razor    | 31 +++++++++-
 .../SearchPage/SearchResultComponent.razor.cs | 43 +++++++++++++-
 .../WatchIt.Website/Pages/MediaPage.razor.cs  |  5 +-
 .../WatchIt.Website/Pages/SearchPage.razor    | 16 +++++-
 .../WatchIt.Website/Pages/SearchPage.razor.cs |  2 +
 .../WatchIt.Website/wwwroot/app.css           |  4 ++
 16 files changed, 212 insertions(+), 25 deletions(-)
 rename WatchIt.Common/WatchIt.Common.Model/{Media/MediaRatingRequest.cs => Rating/RatingRequest.cs} (74%)
 rename WatchIt.Common/WatchIt.Common.Model/{Media/MediaRatingResponse.cs => Rating/RatingResponse.cs} (74%)
 create mode 100644 WatchIt.Website/WatchIt.Website/Components/ListItemComponent.razor
 create mode 100644 WatchIt.Website/WatchIt.Website/Components/ListItemComponent.razor.cs
 create mode 100644 WatchIt.Website/WatchIt.Website/Components/ListItemComponent.razor.css

diff --git a/WatchIt.Common/WatchIt.Common.Model/Media/MediaRatingRequest.cs b/WatchIt.Common/WatchIt.Common.Model/Rating/RatingRequest.cs
similarity index 74%
rename from WatchIt.Common/WatchIt.Common.Model/Media/MediaRatingRequest.cs
rename to WatchIt.Common/WatchIt.Common.Model/Rating/RatingRequest.cs
index 6358b4a..54b7ac2 100644
--- a/WatchIt.Common/WatchIt.Common.Model/Media/MediaRatingRequest.cs
+++ b/WatchIt.Common/WatchIt.Common.Model/Rating/RatingRequest.cs
@@ -1,9 +1,9 @@
 using System.Diagnostics.CodeAnalysis;
 using System.Text.Json.Serialization;
 
-namespace WatchIt.Common.Model.Media;
+namespace WatchIt.Common.Model.Rating;
 
-public class MediaRatingRequest
+public class RatingRequest
 {
     #region PROPERTIES
     
@@ -17,7 +17,7 @@ public class MediaRatingRequest
     #region CONSTRUCTORS
 
     [SetsRequiredMembers]
-    public MediaRatingRequest(short rating)
+    public RatingRequest(short rating)
     {
         Rating = rating;
     }
diff --git a/WatchIt.Common/WatchIt.Common.Model/Media/MediaRatingResponse.cs b/WatchIt.Common/WatchIt.Common.Model/Rating/RatingResponse.cs
similarity index 74%
rename from WatchIt.Common/WatchIt.Common.Model/Media/MediaRatingResponse.cs
rename to WatchIt.Common/WatchIt.Common.Model/Rating/RatingResponse.cs
index e51c9e9..b2b374c 100644
--- a/WatchIt.Common/WatchIt.Common.Model/Media/MediaRatingResponse.cs
+++ b/WatchIt.Common/WatchIt.Common.Model/Rating/RatingResponse.cs
@@ -1,9 +1,9 @@
 using System.Diagnostics.CodeAnalysis;
 using System.Text.Json.Serialization;
 
-namespace WatchIt.Common.Model.Media;
+namespace WatchIt.Common.Model.Rating;
 
-public class MediaRatingResponse
+public class RatingResponse
 {
     #region PROPERTIES
     
@@ -20,10 +20,10 @@ public class MediaRatingResponse
     #region CONSTRUCTORS
 
     [JsonConstructor]
-    public MediaRatingResponse() {}
+    public RatingResponse() {}
     
     [SetsRequiredMembers]
-    public MediaRatingResponse(double ratingAverage, long ratingCount)
+    public RatingResponse(double ratingAverage, long ratingCount)
     {
         RatingAverage = ratingAverage;
         RatingCount = ratingCount;
diff --git a/WatchIt.WebAPI/WatchIt.WebAPI.Controllers/MediaController.cs b/WatchIt.WebAPI/WatchIt.WebAPI.Controllers/MediaController.cs
index e2cbce7..0a095e1 100644
--- a/WatchIt.WebAPI/WatchIt.WebAPI.Controllers/MediaController.cs
+++ b/WatchIt.WebAPI/WatchIt.WebAPI.Controllers/MediaController.cs
@@ -5,6 +5,7 @@ using Microsoft.AspNetCore.Mvc;
 using WatchIt.Common.Model.Genres;
 using WatchIt.Common.Model.Media;
 using WatchIt.Common.Model.Photos;
+using WatchIt.Common.Model.Rating;
 using WatchIt.WebAPI.Services.Controllers.Media;
 
 namespace WatchIt.WebAPI.Controllers;
@@ -74,7 +75,7 @@ public class MediaController : ControllerBase
 
     [HttpGet("{id}/rating")]
     [AllowAnonymous]
-    [ProducesResponseType(typeof(MediaRatingResponse), StatusCodes.Status200OK)]
+    [ProducesResponseType(typeof(RatingResponse), StatusCodes.Status200OK)]
     [ProducesResponseType(StatusCodes.Status404NotFound)]
     public async Task<ActionResult> GetMediaRating([FromRoute] long id) => await _mediaControllerService.GetMediaRating(id);
     
@@ -90,7 +91,7 @@ public class MediaController : ControllerBase
     [ProducesResponseType(StatusCodes.Status400BadRequest)]
     [ProducesResponseType(typeof(void), StatusCodes.Status401Unauthorized)]
     [ProducesResponseType(StatusCodes.Status404NotFound)]
-    public async Task<ActionResult> PutMediaRating([FromRoute] long id, [FromBody] MediaRatingRequest data) => await _mediaControllerService.PutMediaRating(id, data);
+    public async Task<ActionResult> PutMediaRating([FromRoute] long id, [FromBody] RatingRequest data) => await _mediaControllerService.PutMediaRating(id, data);
     
     [HttpDelete("{id}/rating")]
     [Authorize(AuthenticationSchemes = JwtBearerDefaults.AuthenticationScheme)]
diff --git a/WatchIt.WebAPI/WatchIt.WebAPI.Services/WatchIt.WebAPI.Services.Controllers/WatchIt.WebAPI.Services.Controllers.Media/IMediaControllerService.cs b/WatchIt.WebAPI/WatchIt.WebAPI.Services/WatchIt.WebAPI.Services.Controllers/WatchIt.WebAPI.Services.Controllers.Media/IMediaControllerService.cs
index df8c5c4..a93a938 100644
--- a/WatchIt.WebAPI/WatchIt.WebAPI.Services/WatchIt.WebAPI.Services.Controllers/WatchIt.WebAPI.Services.Controllers.Media/IMediaControllerService.cs
+++ b/WatchIt.WebAPI/WatchIt.WebAPI.Services/WatchIt.WebAPI.Services.Controllers/WatchIt.WebAPI.Services.Controllers.Media/IMediaControllerService.cs
@@ -1,5 +1,6 @@
 using WatchIt.Common.Model.Media;
 using WatchIt.Common.Model.Photos;
+using WatchIt.Common.Model.Rating;
 using WatchIt.WebAPI.Services.Controllers.Common;
 
 namespace WatchIt.WebAPI.Services.Controllers.Media;
@@ -14,7 +15,7 @@ public interface IMediaControllerService
 
     Task<RequestResult> GetMediaRating(long mediaId);
     Task<RequestResult> GetMediaRatingByUser(long mediaId, long userId);
-    Task<RequestResult> PutMediaRating(long mediaId, MediaRatingRequest data);
+    Task<RequestResult> PutMediaRating(long mediaId, RatingRequest data);
     Task<RequestResult> DeleteMediaRating(long mediaId);
 
     Task<RequestResult> PostMediaView(long mediaId);
diff --git a/WatchIt.WebAPI/WatchIt.WebAPI.Services/WatchIt.WebAPI.Services.Controllers/WatchIt.WebAPI.Services.Controllers.Media/MediaControllerService.cs b/WatchIt.WebAPI/WatchIt.WebAPI.Services/WatchIt.WebAPI.Services.Controllers/WatchIt.WebAPI.Services.Controllers.Media/MediaControllerService.cs
index 50ee996..454cd97 100644
--- a/WatchIt.WebAPI/WatchIt.WebAPI.Services/WatchIt.WebAPI.Services.Controllers/WatchIt.WebAPI.Services.Controllers.Media/MediaControllerService.cs
+++ b/WatchIt.WebAPI/WatchIt.WebAPI.Services/WatchIt.WebAPI.Services.Controllers/WatchIt.WebAPI.Services.Controllers.Media/MediaControllerService.cs
@@ -3,6 +3,7 @@ using SimpleToolkit.Extensions;
 using WatchIt.Common.Model.Genres;
 using WatchIt.Common.Model.Media;
 using WatchIt.Common.Model.Photos;
+using WatchIt.Common.Model.Rating;
 using WatchIt.Database;
 using WatchIt.Database.Model.Media;
 using WatchIt.Database.Model.Rating;
@@ -109,7 +110,7 @@ public class MediaControllerService(DatabaseContext database, IUserService userS
 
         double ratingAverage = item.RatingMedia.Any() ? item.RatingMedia.Average(x => x.Rating) : 0;
         long ratingCount = item.RatingMedia.Count();
-        MediaRatingResponse ratingResponse = new MediaRatingResponse(ratingAverage, ratingCount);
+        RatingResponse ratingResponse = new RatingResponse(ratingAverage, ratingCount);
         
         return RequestResult.Ok(ratingResponse);
     }
@@ -131,7 +132,7 @@ public class MediaControllerService(DatabaseContext database, IUserService userS
         return RequestResult.Ok(rating.Value);
     }
     
-    public async Task<RequestResult> PutMediaRating(long mediaId, MediaRatingRequest data)
+    public async Task<RequestResult> PutMediaRating(long mediaId, RatingRequest data)
     {
         short ratingValue = data.Rating;
         if (ratingValue < 1 || ratingValue > 10)
diff --git a/WatchIt.Website/WatchIt.Website.Services/WatchIt.Website.Services.WebAPI/WatchIt.Website.Services.WebAPI.Media/IMediaWebAPIService.cs b/WatchIt.Website/WatchIt.Website.Services/WatchIt.Website.Services.WebAPI/WatchIt.Website.Services.WebAPI.Media/IMediaWebAPIService.cs
index 4eae4f4..9e5c9b4 100644
--- a/WatchIt.Website/WatchIt.Website.Services/WatchIt.Website.Services.WebAPI/WatchIt.Website.Services.WebAPI.Media/IMediaWebAPIService.cs
+++ b/WatchIt.Website/WatchIt.Website.Services/WatchIt.Website.Services.WebAPI/WatchIt.Website.Services.WebAPI.Media/IMediaWebAPIService.cs
@@ -1,6 +1,7 @@
 using WatchIt.Common.Model.Genres;
 using WatchIt.Common.Model.Media;
 using WatchIt.Common.Model.Photos;
+using WatchIt.Common.Model.Rating;
 
 namespace WatchIt.Website.Services.WebAPI.Media;
 
@@ -12,9 +13,9 @@ public interface IMediaWebAPIService
     Task PostMediaGenre(long mediaId, long genreId, Action? successAction = null, Action? unauthorizedAction = null, Action? forbiddenAction = null, Action? notFoundAction = null);
     Task DeleteMediaGenre(long mediaId, long genreId, Action? successAction = null, Action? unauthorizedAction = null, Action? forbiddenAction = null, Action? notFoundAction = null);
 
-    Task GetMediaRating(long mediaId, Action<MediaRatingResponse>? successAction = null, Action? notFoundAction = null);
+    Task GetMediaRating(long mediaId, Action<RatingResponse>? successAction = null, Action? notFoundAction = null);
     Task GetMediaRatingByUser(long mediaId, long userId, Action<short>? successAction = null, Action? notFoundAction = null);
-    Task PutMediaRating(long mediaId, MediaRatingRequest body, Action? successAction = null, Action<IDictionary<string, string[]>>? badRequestAction = null, Action? unauthorizedAction = null, Action? notFoundAction = null);
+    Task PutMediaRating(long mediaId, RatingRequest body, Action? successAction = null, Action<IDictionary<string, string[]>>? badRequestAction = null, Action? unauthorizedAction = null, Action? notFoundAction = null);
     Task DeleteMediaRating(long mediaId, Action? successAction = null, Action? unauthorizedAction = null);
 
     Task PostMediaView(long mediaId, Action? successAction = null, Action? notFoundAction = null);
diff --git a/WatchIt.Website/WatchIt.Website.Services/WatchIt.Website.Services.WebAPI/WatchIt.Website.Services.WebAPI.Media/MediaWebAPIService.cs b/WatchIt.Website/WatchIt.Website.Services/WatchIt.Website.Services.WebAPI/WatchIt.Website.Services.WebAPI.Media/MediaWebAPIService.cs
index 47bec77..f95ae52 100644
--- a/WatchIt.Website/WatchIt.Website.Services/WatchIt.Website.Services.WebAPI/WatchIt.Website.Services.WebAPI.Media/MediaWebAPIService.cs
+++ b/WatchIt.Website/WatchIt.Website.Services/WatchIt.Website.Services.WebAPI/WatchIt.Website.Services.WebAPI.Media/MediaWebAPIService.cs
@@ -1,6 +1,7 @@
 using WatchIt.Common.Model.Genres;
 using WatchIt.Common.Model.Media;
 using WatchIt.Common.Model.Photos;
+using WatchIt.Common.Model.Rating;
 using WatchIt.Common.Services.HttpClient;
 using WatchIt.Website.Services.Utility.Configuration;
 using WatchIt.Website.Services.Utility.Configuration.Model;
@@ -93,7 +94,7 @@ public class MediaWebAPIService : BaseWebAPIService, IMediaWebAPIService
 
     #region Rating
 
-    public async Task GetMediaRating(long mediaId, Action<MediaRatingResponse>? successAction = null, Action? notFoundAction = null)
+    public async Task GetMediaRating(long mediaId, Action<RatingResponse>? successAction = null, Action? notFoundAction = null)
     {
         string url = GetUrl(EndpointsConfiguration.Media.GetMediaRating, mediaId);
         
@@ -117,7 +118,7 @@ public class MediaWebAPIService : BaseWebAPIService, IMediaWebAPIService
                 .ExecuteAction();
     }
 
-    public async Task PutMediaRating(long mediaId, MediaRatingRequest body, Action? successAction = null, Action<IDictionary<string, string[]>>? badRequestAction = null, Action? unauthorizedAction = null, Action? notFoundAction = null)
+    public async Task PutMediaRating(long mediaId, RatingRequest body, Action? successAction = null, Action<IDictionary<string, string[]>>? badRequestAction = null, Action? unauthorizedAction = null, Action? notFoundAction = null)
     {
         string url = GetUrl(EndpointsConfiguration.Media.PutMediaRating, mediaId);
         
diff --git a/WatchIt.Website/WatchIt.Website/Components/ListItemComponent.razor b/WatchIt.Website/WatchIt.Website/Components/ListItemComponent.razor
new file mode 100644
index 0000000..562ce9b
--- /dev/null
+++ b/WatchIt.Website/WatchIt.Website/Components/ListItemComponent.razor
@@ -0,0 +1,26 @@
+<div class="container-float m-0 p-0">
+    <div class="row">
+        <div class="col-auto">
+            <img id="picture" class="rounded-2 shadow object-fit-cover picture-aspect-ratio" src="@(_picture is not null ? _picture.ToString() : "assets/poster.png")" alt="picture" height="@(PictureHeight)"/>
+        </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>
+                </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 is not null && _rating.RatingCount > 0 ? _rating.RatingAverage : "--")/10</span>
+                        @if (_rating is not null && _rating.RatingCount > 0)
+                        {
+                            <span id="ratingCount">@(_rating.RatingCount)</span>
+                        }
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/WatchIt.Website/WatchIt.Website/Components/ListItemComponent.razor.cs b/WatchIt.Website/WatchIt.Website/Components/ListItemComponent.razor.cs
new file mode 100644
index 0000000..3b72748
--- /dev/null
+++ b/WatchIt.Website/WatchIt.Website/Components/ListItemComponent.razor.cs
@@ -0,0 +1,56 @@
+using Microsoft.AspNetCore.Components;
+using WatchIt.Common.Model;
+using WatchIt.Common.Model.Rating;
+
+namespace WatchIt.Website.Components;
+
+public partial class ListItemComponent : ComponentBase
+{
+    #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 Func<long, Action<Picture>, Task> PictureDownloadingTask { get; set; }
+    [Parameter] public required Func<long, Action<RatingResponse>, Task> RatingDownloadingTask { get; set; }
+    [Parameter] public int PictureHeight { get; set; } = 150;
+
+    #endregion
+    
+    
+    
+    #region FIELDS
+
+    private bool _loaded;
+    
+    private Picture? _picture;
+    private RatingResponse? _rating;
+    
+    #endregion
+    
+    
+    
+    #region PRIVATE METHODS
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            List<Task> endTasks = new List<Task>();
+            
+            // STEP 0
+            endTasks.AddRange(
+            [
+                PictureDownloadingTask(Id, picture => _picture = picture),
+                RatingDownloadingTask(Id, rating => _rating = rating)
+            ]);
+            
+            await Task.WhenAll(endTasks);
+            
+            _loaded = true;
+            StateHasChanged();
+        }
+    }
+
+    #endregion
+}
\ No newline at end of file
diff --git a/WatchIt.Website/WatchIt.Website/Components/ListItemComponent.razor.css b/WatchIt.Website/WatchIt.Website/Components/ListItemComponent.razor.css
new file mode 100644
index 0000000..91b920c
--- /dev/null
+++ b/WatchIt.Website/WatchIt.Website/Components/ListItemComponent.razor.css
@@ -0,0 +1,17 @@
+/* IDS */
+
+#nameText {
+    font-size: 25px;
+}
+
+#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/SearchPage/SearchResultComponent.razor b/WatchIt.Website/WatchIt.Website/Components/SearchPage/SearchResultComponent.razor
index a4a8bfc..d25f4ec 100644
--- a/WatchIt.Website/WatchIt.Website/Components/SearchPage/SearchResultComponent.razor
+++ b/WatchIt.Website/WatchIt.Website/Components/SearchPage/SearchResultComponent.razor
@@ -1,5 +1,6 @@
-@typeparam TItem
 @using Microsoft.IdentityModel.Tokens
+
+@typeparam TItem
 @typeparam TQuery where TQuery : WatchIt.Common.Query.QueryParameters
 
 
@@ -27,7 +28,33 @@
                     }
                     <div class="row">
                         <div class="col">
-                            test
+                            <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]))"
+                                                   PictureDownloadingTask="@(PictureDownloadingTask)"
+                                                   RatingDownloadingTask="@(RatingDownloadingTask)"/>
+                            </a>
+                        </div>
+                    </div>
+                }
+                if (!_allItemsLoaded)
+                {
+                    <div class="row mt-3">
+                        <div class="col">
+                            <div class="d-flex justify-content-center">
+                                <button class="btn btn-secondary" @onclick="DownloadItems">
+                                    @if (!_itemsLoading)
+                                    {
+                                        <span class="sr-only">Load more</span>
+                                    }
+                                    else
+                                    {
+                                        <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
+                                        <span class="sr-only">Saving...</span>
+                                    }
+                                </button>
+                            </div>
                         </div>
                     </div>
                 }
diff --git a/WatchIt.Website/WatchIt.Website/Components/SearchPage/SearchResultComponent.razor.cs b/WatchIt.Website/WatchIt.Website/Components/SearchPage/SearchResultComponent.razor.cs
index cc55aa7..d115cac 100644
--- a/WatchIt.Website/WatchIt.Website/Components/SearchPage/SearchResultComponent.razor.cs
+++ b/WatchIt.Website/WatchIt.Website/Components/SearchPage/SearchResultComponent.razor.cs
@@ -1,4 +1,6 @@
 using Microsoft.AspNetCore.Components;
+using WatchIt.Common.Model;
+using WatchIt.Common.Model.Rating;
 using WatchIt.Common.Query;
 
 namespace WatchIt.Website.Components.SearchPage;
@@ -9,7 +11,13 @@ public partial class SearchResultComponent<TItem, TQuery> : ComponentBase where
 
     [Parameter] public required string Title { get; set; }
     [Parameter] public required TQuery Query { get; set; }
-    [Parameter] public Func<TQuery, Action<IEnumerable<TItem>>, Task> DownloadingTask { 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 string UrlIdTemplate { 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; }
+    [Parameter] public required Func<long, Action<RatingResponse>, Task> RatingDownloadingTask { get; set; }
 
     #endregion
     
@@ -21,7 +29,7 @@ public partial class SearchResultComponent<TItem, TQuery> : ComponentBase where
     
     private List<TItem> _items = [];
     private bool _allItemsLoaded;
-    
+    private bool _itemsLoading;
     
     #endregion
     
@@ -41,7 +49,18 @@ public partial class SearchResultComponent<TItem, TQuery> : ComponentBase where
             // STEP 0
             endTasks.AddRange(
             [
-                DownloadingTask(Query, data => _items.AddRange(data))
+                ItemDownloadingTask(Query, data =>
+                {
+                    _items.AddRange(data);
+                    if (data.Count() < 5)
+                    {
+                        _allItemsLoaded = true;
+                    }
+                    else
+                    {
+                        Query.After = 5;
+                    }
+                })
             ]);
             
             // END
@@ -52,5 +71,23 @@ public partial class SearchResultComponent<TItem, TQuery> : ComponentBase where
         }
     }
 
+    private async Task DownloadItems()
+    {
+        _itemsLoading = true;
+        await ItemDownloadingTask(Query, data =>
+        {
+            _items.AddRange(data);
+            if (data.Count() < 5)
+            {
+                _allItemsLoaded = true;
+            }
+            else
+            {
+                Query.After += 5;
+            }
+            _itemsLoading = false;
+        });
+    }
+
     #endregion
 }
\ No newline at end of file
diff --git a/WatchIt.Website/WatchIt.Website/Pages/MediaPage.razor.cs b/WatchIt.Website/WatchIt.Website/Pages/MediaPage.razor.cs
index 50ad2f4..fb48fd0 100644
--- a/WatchIt.Website/WatchIt.Website/Pages/MediaPage.razor.cs
+++ b/WatchIt.Website/WatchIt.Website/Pages/MediaPage.razor.cs
@@ -4,6 +4,7 @@ using WatchIt.Common.Model.Genres;
 using WatchIt.Common.Model.Media;
 using WatchIt.Common.Model.Movies;
 using WatchIt.Common.Model.Photos;
+using WatchIt.Common.Model.Rating;
 using WatchIt.Common.Model.Series;
 using WatchIt.Website.Layout;
 using WatchIt.Website.Services.Utility.Authentication;
@@ -48,7 +49,7 @@ public partial class MediaPage : ComponentBase
     
     private MediaPosterResponse? _poster;
     private IEnumerable<GenreResponse> _genres;
-    private MediaRatingResponse _globalRating;
+    private RatingResponse _globalRating;
     private MovieResponse? _movie;
     private SeriesResponse? _series;
     
@@ -123,7 +124,7 @@ public partial class MediaPage : ComponentBase
         }
         else
         {
-            await MediaWebAPIService.PutMediaRating(Id, new MediaRatingRequest(rating));
+            await MediaWebAPIService.PutMediaRating(Id, new RatingRequest(rating));
             _userRating = rating;
         }
         await MediaWebAPIService.GetMediaRating(Id, data => _globalRating = data);
diff --git a/WatchIt.Website/WatchIt.Website/Pages/SearchPage.razor b/WatchIt.Website/WatchIt.Website/Pages/SearchPage.razor
index 1da37d9..61bac3b 100644
--- a/WatchIt.Website/WatchIt.Website/Pages/SearchPage.razor
+++ b/WatchIt.Website/WatchIt.Website/Pages/SearchPage.razor
@@ -33,8 +33,14 @@
                     <SearchResultComponent TItem="MovieResponse"
                                            TQuery="MovieQueryParameters"
                                            Title="Movies"
+                                           UrlIdTemplate="/media/{0}"
+                                           IdSource="@(item => item.Id)"
+                                           NameSource="@(item => item.Title)"
+                                           AdditionalNameInfoSource="@(item => item.ReleaseDate.HasValue ? $" ({item.ReleaseDate.Value.Year})" : null)"
                                            Query="@(new MovieQueryParameters { Title = DecodedQuery })"
-                                           DownloadingTask="MoviesWebAPIService.GetAllMovies"/>
+                                           ItemDownloadingTask="@(MoviesWebAPIService.GetAllMovies)"
+                                           PictureDownloadingTask="@((id, action) => MediaWebAPIService.GetMediaPoster(id, action))"
+                                           RatingDownloadingTask="@((id, action) => MediaWebAPIService.GetMediaRating(id, action))"/>
                 </div>
             </div>
             <div class="row mt-3">
@@ -42,8 +48,14 @@
                     <SearchResultComponent TItem="SeriesResponse" 
                                            TQuery="SeriesQueryParameters"
                                            Title="TV series"
+                                           UrlIdTemplate="/media/{0}"
+                                           IdSource="@(item => item.Id)"
+                                           NameSource="@(item => item.Title)"
+                                           AdditionalNameInfoSource="@(item => item.ReleaseDate.HasValue ? $" ({item.ReleaseDate.Value.Year})" : null)"
                                            Query="@(new SeriesQueryParameters { Title = DecodedQuery })"
-                                           DownloadingTask="SeriesWebAPIService.GetAllSeries"/>
+                                           ItemDownloadingTask="@(SeriesWebAPIService.GetAllSeries)"
+                                           PictureDownloadingTask="@((id, action) => MediaWebAPIService.GetMediaPoster(id, action))"
+                                           RatingDownloadingTask="@((id, action) => MediaWebAPIService.GetMediaRating(id, action))"/>
                 </div>
             </div>
         }
diff --git a/WatchIt.Website/WatchIt.Website/Pages/SearchPage.razor.cs b/WatchIt.Website/WatchIt.Website/Pages/SearchPage.razor.cs
index 5fa86fb..0e926d6 100644
--- a/WatchIt.Website/WatchIt.Website/Pages/SearchPage.razor.cs
+++ b/WatchIt.Website/WatchIt.Website/Pages/SearchPage.razor.cs
@@ -1,6 +1,7 @@
 using System.Net;
 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.Series;
 
@@ -12,6 +13,7 @@ public partial class SearchPage : ComponentBase
 
     [Inject] private IMoviesWebAPIService MoviesWebAPIService { get; set; } = default!;
     [Inject] private ISeriesWebAPIService SeriesWebAPIService { get; set; } = default!;
+    [Inject] private IMediaWebAPIService MediaWebAPIService { get; set; } = default!;
     
     #endregion
 
diff --git a/WatchIt.Website/WatchIt.Website/wwwroot/app.css b/WatchIt.Website/WatchIt.Website/wwwroot/app.css
index 575af4e..b27ac15 100644
--- a/WatchIt.Website/WatchIt.Website/wwwroot/app.css
+++ b/WatchIt.Website/WatchIt.Website/wwwroot/app.css
@@ -113,4 +113,8 @@ body, html {
 
 .w-100 {
     width: 100%;
+}
+
+.picture-aspect-ratio {
+    aspect-ratio: 3/5;
 }
\ No newline at end of file