MediaDataPage - info section completed

WatchIt.Common/WatchIt.Common.Model/Genres/GenreResponse.cs

@@ -16,6 +16,9 @@ public class GenreResponse : Genre
     
     #region CONSTRUCTORS
 
+    [JsonConstructor]
+    public GenreResponse() {}
+    
     [SetsRequiredMembers]
     public GenreResponse(Database.Model.Common.Genre genre)
     {

WatchIt.Website/WatchIt.Website.Services/WatchIt.Website.Services.WebAPI/WatchIt.Website.Services.WebAPI.Media/IMediaWebAPIService.cs

@@ -8,6 +8,7 @@ public interface IMediaWebAPIService
     Task Get(long mediaId, Action<MediaResponse> successAction = null, Action? notFoundAction = null);
     Task GetGenres(long mediaId, Action<IEnumerable<GenreResponse>>? successAction = null, Action? notFoundAction = null);
     Task PostGenre(long mediaId, long genreId, Action? successAction = null, Action? unauthorizedAction = null, Action? forbiddenAction = null, Action? notFoundAction = null);
+    Task GetPhotoMediaRandomBackground(long mediaId, Action<MediaPhotoResponse>? successAction = null, Action? notFoundAction = null);
     Task GetPhotoRandomBackground(Action<MediaPhotoResponse>? successAction = null, Action? notFoundAction = null);
     Task GetPoster(long mediaId, Action<MediaPosterResponse>? successAction = null, Action<IDictionary<string, string[]>>? badRequestAction = null, Action? notFoundAction = null);
     Task PutPoster(long mediaId, MediaPosterRequest data, Action? successAction = null, Action<IDictionary<string, string[]>>? badRequestAction = null, Action? unauthorizedAction = null, Action? forbiddenAction = null);

WatchIt.Website/WatchIt.Website.Services/WatchIt.Website.Services.WebAPI/WatchIt.Website.Services.WebAPI.Media/MediaWebAPIService.cs

@@ -49,6 +49,18 @@ public class MediaWebAPIService(IHttpClientService httpClientService, IConfigura
                 .ExecuteAction();
     }
 
+    public async Task GetPhotoMediaRandomBackground(long mediaId, Action<MediaPhotoResponse>? successAction = null, Action? notFoundAction = null)
+    {
+        string url = GetUrl(EndpointsConfiguration.Media.GetPhotoMediaRandomBackground, mediaId);
+        
+        HttpRequest request = new HttpRequest(HttpMethodType.Get, url);
+        
+        HttpResponse response = await httpClientService.SendRequestAsync(request);
+        response.RegisterActionFor2XXSuccess(successAction)
+                .RegisterActionFor404NotFound(notFoundAction)
+                .ExecuteAction();
+    }
+
     public async Task GetPhotoRandomBackground(Action<MediaPhotoResponse>? successAction = null, Action? notFoundAction = null)
     {
         string url = GetUrl(EndpointsConfiguration.Media.GetPhotoRandomBackground);

WatchIt.Website/WatchIt.Website/App.razor

@@ -9,8 +9,8 @@
     <link rel="icon" type="image/png" href="favicon.png"/>
     
     <!-- CSS -->
-    <link rel="stylesheet" href="app.css?version=0.14"/>
+    <link rel="stylesheet" href="app.css?version=0.15"/>
-    <link rel="stylesheet" href="WatchIt.Website.styles.css?version=0.12"/>
+    <link rel="stylesheet" href="WatchIt.Website.styles.css?version=0.15"/>
     
     <!-- BOOTSTRAP -->
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

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

@@ -60,6 +60,7 @@
             background-position: center;
             background-repeat: no-repeat;
             background-size: cover;
+            background-attachment: fixed;
         }
         
         .logo, .main-button {

WatchIt.Website/WatchIt.Website/Pages/MediaDataPage.razor

@@ -1,5 +1,7 @@
 @page "/media/{id:long}"
 @using System.Text
+@using Microsoft.IdentityModel.Tokens
+@using WatchIt.Common.Model.Genres
 
 @layout MainLayout
 
@@ -15,14 +17,96 @@
                 </div>
                 <div class="col">
                     <div class="d-flex h-100">
-                        <h1 class="align-self-end font-weight-bold">@_media.Title</h1>
+                        <div class="container-fluid px-0 align-self-end">
-                    </div>
+                            <div class="row">
-                </div>
-            </div>
-            <div class="row mt-2">
                                 <div class="col">
-                    <div class="rounded-3 panel panel-regular">
+                                    <h1 class="align-self-end title-shadow">
-                        Test
+                                        <strong>@_media.Title</strong>
+                                    </h1>
+                                </div>
+                            </div>
+                            @if (!string.IsNullOrWhiteSpace(_media.Description))
+                            {
+                                <div class="row">
+                                    <div class="col">
+                                        <div class="description-shadow">
+                                            @_media.Description
+                                        </div>
+                                    </div>
+                                </div>
+                            }
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="row mt-3 gx-3">
+                <div class="col">
+                    <div class="rounded-3 panel panel-regular p-4 h-100">
+                        <div class="container-fluid px-0">
+                            <div class="row">
+                                <div class="col">
+                                    <div class="d-flex flex-wrap gap-3">
+                                        @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">
+                                                <strong>Release date:</strong> @_media.ReleaseDate.ToString()
+                                            </div>
+                                        }
+                                        @if (_media.Length is not null)
+                                        {
+                                            <div class="metadata-pill">
+                                                <strong>Length:</strong> @TimeSpan.FromMinutes(_media.Length.Value).ToString(@"hh\:mm")
+                                            </div>
+                                        }
+                                        @if (_movie?.Budget is not null)
+                                        {
+                                            <div class="metadata-pill">
+                                                <strong>Budget:</strong> @(Math.Round(_movie.Budget.Value))$
+                                            </div>
+                                        }
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="row mt-4">
+                                <div class="col">
+                                    <h4><strong>Genres:</strong></h4>
+                                </div>
+                            </div>
+                            <div class="row">
+                                <div class="col">
+                                    <div class="d-flex flex-wrap gap-3">
+                                        @if (_genres.IsNullOrEmpty())
+                                        {
+                                            <div>
+                                                No genres assigned.
+                                            </div>
+                                        }
+                                        else
+                                        {
+                                            foreach (GenreResponse genre in _genres)
+                                            {
+                                                <a class="text-decoration-none text-light" href="/genre/@genre.Id">
+                                                    <div class="metadata-pill">
+                                                        @genre.Name
+                                                    </div>
+                                                </a>
+                                            }
+                                        }
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-auto">
+                    <div class="rounded-3 panel panel-yellow p-2 h-100">
+                        Oceny tutaj będą
                     </div>
                 </div>
             </div>
@@ -43,3 +127,18 @@
         <LoadingPageComponent/>
     }
 </div>
+
+
+
+@if (_background is not null)
+{
+    <style>
+        body {
+            background-image: url('@($"data:{_background.MimeType};base64,{Convert.ToBase64String(_background.Image)}")') !important;
+        }
+
+        .logo, .main-button {
+            background-image: linear-gradient(45deg, @($"#{BitConverter.ToString(_background.Background.FirstGradientColor).Replace("-", string.Empty)}"), @($"#{BitConverter.ToString(_background.Background.SecondGradientColor).Replace("-", string.Empty)}")) !important;
+        }
+    </style>
+}

WatchIt.Website/WatchIt.Website/Pages/MediaDataPage.razor.cs

@@ -1,5 +1,7 @@
 using Microsoft.AspNetCore.Components;
+using WatchIt.Common.Model.Genres;
 using WatchIt.Common.Model.Media;
+using WatchIt.Common.Model.Movies;
 using WatchIt.Website.Services.Utility.Authentication;
 using WatchIt.Website.Services.WebAPI.Media;
 using WatchIt.Website.Services.WebAPI.Movies;
@@ -34,6 +36,9 @@ public partial class MediaDataPage : ComponentBase
     private string? _error;
 
     private MediaResponse? _media;
+    private MovieResponse? _movie;
+    private IEnumerable<GenreResponse> _genres;
+    private MediaPhotoResponse? _background;
     private MediaPosterResponse? _poster;
     private User? _user;
 
@@ -51,13 +56,28 @@ public partial class MediaDataPage : ComponentBase
 
             if (_error is null)
             {
-                Task<User?> userTask = AuthenticationService.GetUserAsync();
+                Task backgroundTask = MediaWebAPIService.GetPhotoMediaRandomBackground(Id, data => _background = data);
                 Task posterTask = MediaWebAPIService.GetPoster(Id, data => _poster = data);
+                Task<User?> userTask = AuthenticationService.GetUserAsync();
+                Task genresTask = MediaWebAPIService.GetGenres(Id, data => _genres = data);
+                Task specificMediaTask;
+                if (_media.Type == MediaType.Movie)
+                {
+                    specificMediaTask = MoviesWebAPIService.Get(Id, data => _movie = data);
+                }
+                else
+                {
+                    // TODO: download tv series info
+                    specificMediaTask = null;
+                }
 
                 await Task.WhenAll(
                 [
                     userTask,
-                    posterTask
+                    specificMediaTask,
+                    genresTask,
+                    backgroundTask,
+                    posterTask,
                 ]);
 
                 _user = await userTask;

WatchIt.Website/WatchIt.Website/Pages/MediaDataPage.razor.css

@@ -1 +1,18 @@
-
+/* CLASSES */
+
+.metadata-pill {
+    border-color: gray;
+    border-width: 2px;
+    border-radius: 30px;
+    border-style: solid;
+    
+    padding: 2px 10px;
+}
+
+.title-shadow {
+    text-shadow: 2px 2px 2px #000;
+}
+
+.description-shadow {
+    text-shadow: 1px 1px 1px #000;
+}

WatchIt.Website/WatchIt.Website/wwwroot/app.css

@@ -27,6 +27,10 @@ body, html {
     background-color: rgba(0, 0, 0, 0.6);
 }
 
+.panel-yellow {
+    background-color: rgba(255, 184, 58, 0.6);
+}
+
 .panel {
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
     backdrop-filter: blur(25px);