MateuszSkoczek/WatchIt
1
0
Fork 0
Code Issues Pull Requests Actions Projects Wiki Activity

Merge pull request #70 from mateuszskoczek/features/main_page

Browse Source 
Main page finished
This commit is contained in:
Mateusz Skoczek
2024-09-23 20:26:45 +02:00
committed by GitHub
Unverified
parent f357c62c77 bf39baadc8
commit 88d071392b
5 changed files with 174 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
WatchIt.Website/WatchIt.Website.Services/WatchIt.Website.Services.WebAPI/WatchIt.Website.Services.WebAPI.Movies/IMoviesWebAPIService.cs
View File

@@ -9,4 +9,6 @@ public interface IMoviesWebAPIService
Task GetMovie(long id, Action<MovieResponse>? successAction = null, Action? notFoundAction = null);
Task PutMovie(long id, MovieRequest data, Action? successAction = null, Action<IDictionary<string, string[]>>? badRequestAction = null, Action? unauthorizedAction = null, Action? forbiddenAction = null);
Task DeleteMovie(long id, Action? successAction = null, Action? unauthorizedAction = null, Action? forbiddenAction = null);
Task GetMoviesViewRank(int? first = null, int? days = null, Action<IEnumerable<MovieResponse>>? successAction = null, Action<IDictionary<string, string[]>>? badRequestAction = null);
}

2
WatchIt.Website/WatchIt.Website/App.razor
View File

@@ -10,7 +10,7 @@
<!-- CSS -->
<link rel="stylesheet" href="app.css?version=0.1.0.16"/>
<link rel="stylesheet" href="WatchIt.Website.styles.css?version=0.1.0.29"/>
<link rel="stylesheet" href="WatchIt.Website.styles.css?version=0.1.0.26"/>
<!-- BOOTSTRAP -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

139
WatchIt.Website/WatchIt.Website/Pages/HomePage.razor
View File

@@ -1,54 +1,97 @@
@page "/"
@using WatchIt.Common.Model.Movies
<PageTitle>WatchIt</PageTitle>
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<h2>Hello, world!</h2>
<p>Welcome to your new app.</p>
<h2>Hello, world!</h2>
<p>Welcome to your new app.</p>
<h2>Hello, world!</h2>
<p>Welcome to your new app.</p>
<h2>Hello, world!</h2>
<p>Welcome to your new app.</p>
<h2>Hello, world!</h2>
<p>Welcome to your new app.</p>
<h2>Hello, world!</h2>
<p>Welcome to your new app.</p>
<h2>Hello, world!</h2>
<p>Welcome to your new app.</p>
<h2>Hello, world!</h2>
<p>Welcome to your new app.</p>
<h2>Hello, world!</h2>
<p>Welcome to your new app.</p>
<h2>Hello, world!</h2>
<p>Welcome to your new app.</p>
<h2>Hello, world!</h2>
<p>Welcome to your new app.</p>
<h2>Hello, world!</h2>
<p>Welcome to your new app.</p>
<h2>Hello, world!</h2>
<p>Welcome to your new app.</p>
<h2>Hello, world!</h2>
<p>Welcome to your new app.</p>
<h2>Hello, world!</h2>
<p>Welcome to your new app.</p>
<h2>Hello, world!</h2>
<p>Welcome to your new app.</p>
<h2>Hello, world!</h2>
<p>Welcome to your new app.</p>
<h2>Hello, world!</h2>
<p>Welcome to your new app.</p>
<h2>Hello, world!</h2>
<p>Welcome to your new app.</p>
<h2>Hello, world!</h2>
<p>Welcome to your new app.</p>
<h2>Hello, world!</h2>
<p>Welcome to your new app.</p>
<h2>Hello, world!</h2>
<p>Welcome to your new app.</p>
</div>
</div>
@if (_loaded)
{
if (string.IsNullOrWhiteSpace(_error))
{
<div class="row">
<div class="col">
<div class="rounded-3 panel panel-regular p-4">
<div class="container-fluid p-0">
<div class="row">
<div class="col">
<h4><strong>Top 5 movies this week by popularity</strong></h4>
</div>
</div>
<div class="row mt-3">
@for (int i = 0; i < 5; i++)
{
<div class="col">
@if (_topMovies.Count > i)
{
<a class="text-reset text-decoration-none" href="/media/@_topMovies.ToArray()[i].Key.Id">
<div class="d-flex flex-column align-items-center gap-2 h-100">
<img class="rounded-2 shadow object-fit-cover poster-aspect-ratio" src="@(_topMovies.ToArray()[i].Value is not null ? _topMovies.ToArray()[i].Value.ToString() : "assets/poster.png")" alt="poster" width="100%"/>
<div class="container-fluid p-0">
<div class="row">
<div class="col-auto">
<div class="text-center border border-2 border-light rounded-circle place-circle"><strong>@(i + 1)</strong></div>
</div>
<div class="col">
<div class="text-end ms-auto">@_topMovies.ToArray()[i].Key.Title@(_topMovies.ToArray()[i].Key.ReleaseDate.HasValue ? $" ({_topMovies.ToArray()[i].Key.ReleaseDate.Value.Year})" : string.Empty)</div>
</div>
</div>
</div>
</div>
</a>
}
</div>
}
</div>
</div>
</div>
</div>
</div>
<div class="row mt-3">
<div class="col">
<div class="rounded-3 panel panel-regular p-4">
<div class="container-fluid p-0">
<div class="row">
<div class="col">
<h4><strong>Top 5 TV series this week by popularity</strong></h4>
</div>
</div>
<div class="row mt-3">
@for (int i = 0; i < 5; i++)
{
<div class="col">
@if (_topSeries.Count > i)
{
<a class="text-reset text-decoration-none" href="/media/@_topSeries.ToArray()[i].Key.Id">
<div class="d-flex flex-column align-items-center gap-2 h-100">
<img class="rounded-2 shadow object-fit-cover poster-aspect-ratio" src="@(_topSeries.ToArray()[i].Value is not null ? _topSeries.ToArray()[i].Value.ToString() : "assets/poster.png")" alt="poster" width="100%"/>
<div class="container-fluid p-0">
<div class="row">
<div class="col-auto">
<div class="text-center border border-2 border-light rounded-circle place-circle"><strong>@(i + 1)</strong></div>
</div>
<div class="col">
<div class="text-end ms-auto">@_topSeries.ToArray()[i].Key.Title@(_topSeries.ToArray()[i].Key.ReleaseDate.HasValue ? $" ({_topSeries.ToArray()[i].Key.ReleaseDate.Value.Year})" : string.Empty)</div>
</div>
</div>
</div>
</div>
</a>
}
</div>
}
</div>
</div>
</div>
</div>
</div>
}
else
{
<ErrorComponent ErrorMessage="@_error"/>
}
}
else
{
<LoadingComponent/>
}
</div>

65
WatchIt.Website/WatchIt.Website/Pages/HomePage.razor.cs
View File

@@ -1,6 +1,69 @@
namespace WatchIt.Website.Pages;
using Microsoft.AspNetCore.Components;
using WatchIt.Common.Model.Media;
using WatchIt.Common.Model.Movies;
using WatchIt.Common.Model.Series;
using WatchIt.Website.Services.WebAPI.Media;
using WatchIt.Website.Services.WebAPI.Movies;
using WatchIt.Website.Services.WebAPI.Series;
namespace WatchIt.Website.Pages;
public partial class HomePage
{
#region SERVICES
[Inject] public NavigationManager NavigationManager { get; set; } = default!;
[Inject] public IMediaWebAPIService MediaWebAPIService { get; set; } = default!;
[Inject] public IMoviesWebAPIService MoviesWebAPIService { get; set; } = default!;
[Inject] public ISeriesWebAPIService SeriesWebAPIService { get; set; } = default!;
#endregion
#region FIELDS
private bool _loaded;
private string? _error;
private IDictionary<MovieResponse, MediaPosterResponse?> _topMovies = new Dictionary<MovieResponse, MediaPosterResponse?>();
private IDictionary<SeriesResponse, MediaPosterResponse?> _topSeries = new Dictionary<SeriesResponse, MediaPosterResponse?>();
#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(
[
MoviesWebAPIService.GetMoviesViewRank(successAction: data => _topMovies = data.ToDictionary(x => x, _ => default(MediaPosterResponse?))),
SeriesWebAPIService.GetSeriesViewRank(successAction: data => _topSeries = data.ToDictionary(x => x, _ => default(MediaPosterResponse?))),
]);
// STEP 1
await Task.WhenAll(step1Tasks);
endTasks.AddRange(
[
Parallel.ForEachAsync(_topMovies, async (x, _) => await MediaWebAPIService.GetPoster(x.Key.Id, y => _topMovies[x.Key] = y)),
Parallel.ForEachAsync(_topSeries, async (x, _) => await MediaWebAPIService.GetPoster(x.Key.Id, y => _topSeries[x.Key] = y))
]);
// END
await Task.WhenAll(endTasks);
_loaded = true;
StateHasChanged();
}
}
#endregion
}

16
WatchIt.Website/WatchIt.Website/Pages/HomePage.razor.css Normal file
View File

@@ -0,0 +1,16 @@
/* CLASSES */
.poster-aspect-ratio {
aspect-ratio: 3/5;
}
.border-2 {
border-width: 2px;
}
.place-circle {
width: 30px;
height: 30px;
vertical-align: middle;
line-height: 25px;
}