212 lines
11 KiB
Plaintext
212 lines
11 KiB
Plaintext
@using System.Text
|
|
@using Microsoft.IdentityModel.Tokens
|
|
@using WatchIt.Common.Model.Genres
|
|
@using WatchIt.Website.Components.Pages.MediaPage.Panels
|
|
|
|
@page "/media/{id:long}"
|
|
|
|
@layout MainLayout
|
|
|
|
@if (_loaded)
|
|
{
|
|
if (string.IsNullOrWhiteSpace(_error))
|
|
{
|
|
<PageTitle>@_media.Title@(_media.ReleaseDate is not null ? $" ({_media.ReleaseDate.Value.Year})" : string.Empty) - WatchIt</PageTitle>
|
|
}
|
|
else
|
|
{
|
|
<PageTitle>Error - WatchIt</PageTitle>
|
|
}
|
|
}
|
|
else
|
|
{
|
|
<PageTitle>Loading... - WatchIt</PageTitle>
|
|
}
|
|
|
|
|
|
|
|
<div class="container-grid">
|
|
@if (_loaded)
|
|
{
|
|
if (string.IsNullOrWhiteSpace(_error))
|
|
{
|
|
<div class="row">
|
|
<div class="col">
|
|
<ItemPageHeaderPanelComponent Name="@(_media.Title)"
|
|
Subname="@(_media.OriginalTitle)"
|
|
Description="@(_media.Description)"
|
|
PosterPlaceholder="/assets/media_poster.png"
|
|
GetPosterMethod="@(action => MediaClientService.GetMediaPoster(_media.Id, action))"/>
|
|
</div>
|
|
</div>
|
|
<div class="row mt-3 gx-3">
|
|
<div class="col">
|
|
<div class="panel panel-regular h-100">
|
|
<div class="container-grid">
|
|
<div class="row">
|
|
<div class="col">
|
|
<div class="d-flex flex-wrap metadata-pill-container">
|
|
<div class="metadata-pill">
|
|
<strong>@(_media.Type == MediaType.Movie ? "Movie" : "TV Series")</strong>
|
|
</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>
|
|
}
|
|
@if (_series?.HasEnded == true)
|
|
{
|
|
<div class="metadata-pill">
|
|
Ended
|
|
</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="panel panel-background-gold h-100 text-dark">
|
|
<div class="container-grid">
|
|
<div class="row">
|
|
<div class="col">
|
|
<TitledDisplayRatingComponent Rating="@(_globalRating)" Title="Global rating:"/>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<hr class="rating-separator"/>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<h4 class="text-dark">
|
|
<strong>Your rating:</strong>
|
|
</h4>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
@if (_user is not null)
|
|
{
|
|
<div class="d-flex rating">
|
|
<input id="r1" type="radio" name="rate" checked="@(_userRating == 1 )" onclick="@(async () => await AddRating(1 ))"/>
|
|
<label class="text-dark" for="r1">@(_userRating >= 1 ? "\u2605" : "\u2606")</label>
|
|
<input id="r2" type="radio" name="rate" checked="@(_userRating == 2 )" onclick="@(async () => await AddRating(2 ))"/>
|
|
<label class="text-dark" for="r2">@(_userRating >= 2 ? "\u2605" : "\u2606")</label>
|
|
<input id="r3" type="radio" name="rate" checked="@(_userRating == 3 )" onclick="@(async () => await AddRating(3 ))"/>
|
|
<label class="text-dark" for="r3">@(_userRating >= 3 ? "\u2605" : "\u2606")</label>
|
|
<input id="r4" type="radio" name="rate" checked="@(_userRating == 4 )" onclick="@(async () => await AddRating(4 ))"/>
|
|
<label class="text-dark" for="r4">@(_userRating >= 4 ? "\u2605" : "\u2606")</label>
|
|
<input id="r5" type="radio" name="rate" checked="@(_userRating == 5 )" onclick="@(async () => await AddRating(5 ))"/>
|
|
<label class="text-dark" for="r5">@(_userRating >= 5 ? "\u2605" : "\u2606")</label>
|
|
<input id="r6" type="radio" name="rate" checked="@(_userRating == 6 )" onclick="@(async () => await AddRating(6 ))"/>
|
|
<label class="text-dark" for="r6">@(_userRating >= 6 ? "\u2605" : "\u2606")</label>
|
|
<input id="r7" type="radio" name="rate" checked="@(_userRating == 7 )" onclick="@(async () => await AddRating(7 ))"/>
|
|
<label class="text-dark" for="r7">@(_userRating >= 7 ? "\u2605" : "\u2606")</label>
|
|
<input id="r8" type="radio" name="rate" checked="@(_userRating == 8 )" onclick="@(async () => await AddRating(8 ))"/>
|
|
<label class="text-dark" for="r8">@(_userRating >= 8 ? "\u2605" : "\u2606")</label>
|
|
<input id="r9" type="radio" name="rate" checked="@(_userRating == 9 )" onclick="@(async () => await AddRating(9 ))"/>
|
|
<label class="text-dark" for="r9">@(_userRating >= 9 ? "\u2605" : "\u2606")</label>
|
|
<input id="r10" type="radio" name="rate" checked="@(_userRating == 10)" onclick="@(async () => await AddRating(10))"/>
|
|
<label class="text-dark" for="r10">@(_userRating == 10 ? "\u2605" : "\u2606")</label>
|
|
</div>
|
|
}
|
|
else
|
|
{
|
|
<p class="text-dark">You must be logged in to add a rating</p>
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row mt-over-panel-menu">
|
|
<div class="col">
|
|
<Tabs Pills
|
|
RenderMode="TabsRenderMode.LazyLoad"
|
|
SelectedTab="actors"
|
|
Class="panel panel-menu panel-background-menu">
|
|
<Items>
|
|
<Tab Name="actors">Actors</Tab>
|
|
<Tab Name="creators">Creators</Tab>
|
|
</Items>
|
|
<Content>
|
|
<TabPanel Name="actors">
|
|
<div class="mt-default">
|
|
<MediaActorRolesPanelComponent Id="@(Id)"/>
|
|
</div>
|
|
</TabPanel>
|
|
<TabPanel Name="creators">
|
|
<div class="mt-default">
|
|
<MediaCreatorRolesPanelComponent Id="@(Id)"/>
|
|
</div>
|
|
</TabPanel>
|
|
</Content>
|
|
</Tabs>
|
|
</div>
|
|
</div>
|
|
}
|
|
else
|
|
{
|
|
<div class="row">
|
|
<div class="col">
|
|
<ErrorPanelComponent ErrorMessage="@_error"/>
|
|
</div>
|
|
</div>
|
|
}
|
|
}
|
|
else
|
|
{
|
|
<div class="row">
|
|
<div class="col">
|
|
<div class="m-5">
|
|
<LoadingComponent/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
</div> |