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

img changed to picturecomponent

Browse Source
This commit is contained in:
Mateusz Skoczek
2024-10-19 22:05:53 +02:00
Unverified
parent 25fccff60d
commit 83da90ef67
11 changed files with 45 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
WatchIt.Website/WatchIt.Website/Components/Common/Panels/PictureEditorPanelComponent.razor
View File

@@ -2,7 +2,7 @@
@if (_loaded)
{
<div class="vstack gap-3">
<img class="rounded-2 shadow object-fit-cover picture-aspect-ratio" src="@(_pictureSelected is not null ? _pictureSelected.ToString() : PicturePlaceholder)" alt="poster" width="@(ContentWidth)"/>
<PictureComponent Picture="@(_pictureSelected)" Placeholder="@(PicturePlaceholder)" AlternativeText="poster" Width="@(ContentWidth)"/>
<InputFile class="form-control content-width" OnChange="Load" disabled="@(!Id.HasValue)" autocomplete="off"/>
@if (_pictureChanged || _pictureSaved is not null)
{

2
WatchIt.Website/WatchIt.Website/Components/Common/Subcomponents/ListItemComponent.razor
View File

@@ -1,7 +1,7 @@
<div class="container-grid">
<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/media_poster.png")" alt="picture" height="@(PictureHeight)"/>
<PictureComponent Picture="@(_picture)" Placeholder="/assets/media_poster.png" AlternativeText="poster" Height="@(PictureHeight)"/>
</div>
<div class="col">
<div class="d-flex align-items-start flex-column h-100">

2
WatchIt.Website/WatchIt.Website/Components/Common/Subcomponents/PictureComponent.razor
View File

@@ -1,4 +1,4 @@
<img id="imgObject" class="rounded-2 shadow object-fit-cover @(Class)" src="@(Picture is not null ? Picture.ToString() : Placeholder)" alt="@(AlternativeText)"/>
<img id="imgObject" class="rounded-2 shadow object-fit-cover @(Class)" src="@(Picture is not null ? Picture.ToString() : Placeholder)" alt="@(AlternativeText)" @attributes="@(_attributes)"/>
<style>
#imgObject {

32
WatchIt.Website/WatchIt.Website/Components/Common/Subcomponents/PictureComponent.razor.cs
View File

@@ -12,6 +12,35 @@ public partial class PictureComponent : ComponentBase
[Parameter] public PictureComponentAspectRatio AspectRatio { get; set; } = PictureComponentAspectRatio.Default;
[Parameter] public string AlternativeText { get; set; } = "picture";
[Parameter] public string Class { get; set; } = string.Empty;
[Parameter] public int? Height { get; set; }
[Parameter] public int? Width { get; set; }
#endregion
#region FIELDS
private Dictionary<string, object> _attributes = [];
#endregion
#region PRIVATE METHODS
protected override void OnParametersSet()
{
_attributes.Clear();
if (Height.HasValue)
{
_attributes.Add("height", Height.Value);
}
else if (Width.HasValue)
{
_attributes.Add("width", Width.Value);
}
}
#endregion
@@ -40,7 +69,8 @@ public partial class PictureComponent : ComponentBase
Vertical = vertical;
}
public static PictureComponentAspectRatio Default = new PictureComponentAspectRatio();
public static readonly PictureComponentAspectRatio Default = new PictureComponentAspectRatio();
public static readonly PictureComponentAspectRatio Photo = new PictureComponentAspectRatio(16, 9);
#endregion

2
WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Subcomponents/RoleComponent.razor
View File

@@ -4,7 +4,7 @@
<div class="container-grid">
<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/person_picture.png")" alt="picture" height="100"/>
<PictureComponent Picture="@(_picture)" Placeholder="/assets/person_poster.png" AlternativeText="poster" Height="100"/>
</div>
<div class="col">
<div class="d-flex align-items-start flex-column h-100">

64
WatchIt.Website/WatchIt.Website/Pages/MediaEditPage.razor
View File

@@ -57,60 +57,12 @@
</div>
<div class="row mt-3 gx-3">
<div class="col-auto">
<div class="rounded-3 panel panel-regular p-4 h-100">
<div class="container-grid">
<div class="row">
<div class="col">
<img class="rounded-2 shadow object-fit-cover" src="@(_mediaPosterRequest is not null ? _mediaPosterRequest.ToString() : "assets/media_poster.png")" alt="poster" width="300" height="500"/>
</div>
</div>
<div class="row mt-4">
<div class="col">
<InputFile class="form-control" OnChange="LoadPoster" disabled="@(_media is null)" autocomplete="off" style="width: 300px;"/>
</div>
</div>
@if (_mediaPosterChanged || _mediaPosterSaved is not null)
{
<div class="row mt-4 gx-1" style="width: 300px;">
@if (_mediaPosterChanged)
{
<div class="col">
<button type="button" class="btn btn-secondary btn-block btn-stretch-x" @onclick="SavePoster" disabled=@(!Id.HasValue || _mediaPosterSaving || _mediaPosterDeleting) autocomplete="off">
@if (!_mediaPosterSaving)
{
<span>Save poster</span>
}
else
{
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
<span>Saving...</span>
}
</button>
</div>
<div class="col">
<button type="button" class="btn btn-danger btn-block btn-stretch-x" @onclick="CancelPoster" disabled=@(!Id.HasValue || _mediaPosterSaving || _mediaPosterDeleting) autocomplete="off">Drop changes</button>
</div>
}
else if (_mediaPosterSaved is not null)
{
<div class="col">
<button type="button" class="btn btn-danger btn-block btn-stretch-x" @onclick="DeletePoster" disabled=@(!Id.HasValue || _mediaPosterSaving || _mediaPosterDeleting) autocomplete="off">
@if (!_mediaPosterSaving)
{
<span>Delete poster</span>
}
else
{
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
<span>Deleting...</span>
}
</button>
</div>
}
</div>
}
</div>
</div>
<PictureEditorPanelComponent Id="@(Id)"
PictureGetTask="@(async (id, action) => await MediaWebAPIService.GetMediaPoster(id, action))"
PicturePutTask="@(async (id, data, action) => await MediaWebAPIService.PutMediaPoster(id, new MediaPosterRequest(data), action))"
PictureDeleteTask="@(async (id, action) => await MediaWebAPIService.DeleteMediaPoster(id, action))"
PicturePlaceholder="/assets/media_poster.png"
Class="h-100"/>
</div>
<div class="col">
<div class="rounded-3 panel panel-regular p-4 h-100">
@@ -264,7 +216,7 @@
<div class="container-grid photo-container">
<div class="row">
<div class="col">
<img class="rounded-1 shadow object-fit-cover photo-default-aspect-ratio" src="@(photo.ToString())" alt="photo" width="350"/>
<PictureComponent Picture="@(photo)" AlternativeText="photo" Width="350" Placeholder="/assets/photo.png" AspectRatio="PictureComponent.PictureComponentAspectRatio.Photo"/>
</div>
</div>
<div class="row mt-2 gx-2">
@@ -320,7 +272,7 @@
<div class="container-grid">
<div class="row">
<div class="col">
<img class="rounded-1 shadow object-fit-cover photo-default-aspect-ratio" src="@(_photoEditRequest is null ? "assets/photo.png" : _photoEditRequest.ToString())" alt="edit_photo" width="300px"/>
<PictureComponent Picture="@(_photoEditRequest)" Placeholder="/assets/photo.png" AlternativeText="edit_photo" Width="300" AspectRatio="PictureComponent.PictureComponentAspectRatio.Photo"/>
</div>
</div>
@if (_photoEditId is null)

2
WatchIt.Website/WatchIt.Website/Pages/MediaPage.razor
View File

@@ -32,7 +32,7 @@ else
{
<div class="row mt-9">
<div class="col-auto">
<img class="rounded-2 shadow object-fit-cover" src="@(_poster is not null ? _poster.ToString() : "assets/media_poster.png")" alt="poster" width="200" height="333"/>
<PictureComponent Picture="@(_poster)" Placeholder="/assets/media_poster.png" AlternativeText="poster" Width="200"/>
</div>
<div class="col">
<div class="d-flex h-100">

2
WatchIt.Website/WatchIt.Website/Pages/PersonEditPage.razor
View File

@@ -52,7 +52,7 @@
PictureGetTask="@(async (id, action) => await PersonsWebAPIService.GetPersonPhoto(id, action))"
PicturePutTask="@(async (id, data, action) => await PersonsWebAPIService.PutPersonPhoto(id, new PersonPhotoRequest(data), action))"
PictureDeleteTask="@(async (id, action) => await PersonsWebAPIService.DeletePersonPhoto(id, action))"
PicturePlaceholder="/assets/person_picture.png"
PicturePlaceholder="/assets/person_poster.png"
Class="h-100"/>
</div>
<div class="col">

4
WatchIt.Website/WatchIt.Website/WatchIt.Website.csproj
View File

@@ -51,8 +51,4 @@
<PackageReference Include="Blazorise.Icons.FontAwesome" Version="1.6.1" />
</ItemGroup>
<ItemGroup>
<Folder Include="Components\DatabasePage\" />
</ItemGroup>
</Project>

BIN
WatchIt.Website/WatchIt.Website/wwwroot/assets/person_picture.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 747 KiB

BIN
WatchIt.Website/WatchIt.Website/wwwroot/assets/poster.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 798 KiB