img changed to picturecomponent

WatchIt.Website/WatchIt.Website/Components/Common/Panels/PictureEditorPanelComponent.razor

@@ -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)
             {

WatchIt.Website/WatchIt.Website/Components/Common/Subcomponents/ListItemComponent.razor

@@ -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">

WatchIt.Website/WatchIt.Website/Components/Common/Subcomponents/PictureComponent.razor

@@ -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 {

WatchIt.Website/WatchIt.Website/Components/Common/Subcomponents/PictureComponent.razor.cs

@@ -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
         

WatchIt.Website/WatchIt.Website/Components/Pages/MediaPage/Subcomponents/RoleComponent.razor

@@ -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">

WatchIt.Website/WatchIt.Website/Pages/MediaEditPage.razor

@@ -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">
+                        <PictureEditorPanelComponent Id="@(Id)"
-                            <div class="container-grid">
+                                                     PictureGetTask="@(async (id, action) => await MediaWebAPIService.GetMediaPoster(id, action))"
-                                <div class="row">
+                                                     PicturePutTask="@(async (id, data, action) => await MediaWebAPIService.PutMediaPoster(id, new MediaPosterRequest(data), action))"
-                                    <div class="col">
+                                                     PictureDeleteTask="@(async (id, action) => await MediaWebAPIService.DeleteMediaPoster(id, action))"
-                                        <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"/>
+                                                     PicturePlaceholder="/assets/media_poster.png"
-                                    </div>
+                                                     Class="h-100"/>
-                                </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>
                     </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)

WatchIt.Website/WatchIt.Website/Pages/MediaPage.razor

@@ -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">

WatchIt.Website/WatchIt.Website/Pages/PersonEditPage.razor

@@ -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">

WatchIt.Website/WatchIt.Website/WatchIt.Website.csproj

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