From 50799b387054c2ebef9421469c33b32b1135c497 Mon Sep 17 00:00:00 2001 From: Ivaylo Jelev Date: Sun, 31 Mar 2024 14:00:35 +0300 Subject: [PATCH] MT-25 Edit Videos (#16) * MT-20 Basic Search and small refactoring of Video Service * MT-25 Added Edit Functionality for videos --- .../MeTube.Service/Videos/VideoService.cs | 5 +- .../MeTube.Web.Models/Video/VideoEditModel.cs | 7 ++ .../MeTube.Web/Controllers/VideoController.cs | 33 ++++++++ src/Web/MeTube.Web/Views/Video/Details.cshtml | 39 +++++---- src/Web/MeTube.Web/Views/Video/Edit.cshtml | 80 +++++++++++++++++++ src/Web/MeTube.Web/wwwroot/css/site.css | 33 ++++++++ 6 files changed, 181 insertions(+), 16 deletions(-) create mode 100644 src/Web/MeTube.Web.Models/Video/VideoEditModel.cs create mode 100644 src/Web/MeTube.Web/Views/Video/Edit.cshtml diff --git a/src/Service/MeTube.Service/Videos/VideoService.cs b/src/Service/MeTube.Service/Videos/VideoService.cs index 22af874..5e4f1ee 100644 --- a/src/Service/MeTube.Service/Videos/VideoService.cs +++ b/src/Service/MeTube.Service/Videos/VideoService.cs @@ -74,7 +74,10 @@ public async Task CreateAsync(VideoDto videoDto, string userId) public async Task EditAsync(VideoDto videoDto) { - Video video = videoDto.ToVideoEntity(); + Video video = await this.GetByIdInternalAsync(videoDto.Id); + + video.Title = videoDto.Title; + video.Description = videoDto.Description; return (await _videoRepository.EditAsync(video)).ToVideoDto(); } diff --git a/src/Web/MeTube.Web.Models/Video/VideoEditModel.cs b/src/Web/MeTube.Web.Models/Video/VideoEditModel.cs new file mode 100644 index 0000000..4f633a3 --- /dev/null +++ b/src/Web/MeTube.Web.Models/Video/VideoEditModel.cs @@ -0,0 +1,7 @@ +namespace MeTube.Web.Models.Video; + +public class VideoEditModel +{ + public string Title { get; set; } + public string Description { get;set; } +} \ No newline at end of file diff --git a/src/Web/MeTube.Web/Controllers/VideoController.cs b/src/Web/MeTube.Web/Controllers/VideoController.cs index d26ff11..10c909a 100644 --- a/src/Web/MeTube.Web/Controllers/VideoController.cs +++ b/src/Web/MeTube.Web/Controllers/VideoController.cs @@ -1,5 +1,6 @@ using MeTube.Data.Models; using MeTube.Service.Channels; +using MeTube.Service.Models.Videos; using MeTube.Service.Playlists; using MeTube.Service.Reactions; using MeTube.Service.Videos; @@ -96,5 +97,37 @@ public async Task Comment([FromQuery] string videoId, [FromBody] return Ok(await this._videoService.Comment(videoId, commentCreateModel.Content, currentUser.Id)); } + + [HttpGet] + public async Task Edit([FromQuery(Name = "v")] string videoId) + { + MeTubeUser currentUser = await this._userManager.GetUserAsync(this.User); + + if (this.User.Identity.IsAuthenticated) + { + this.ViewData["Channel"] = await this._channelService.GetByUserIdAsync(currentUser.Id); + } + + this.ViewData["ReactionTypes"] = await this._reactionTypeService.GetAll().ToListAsync(); + + var video = await this._videoService.ViewVideoByIdAsync(videoId); + + return View(video); + } + + [HttpPost] + public async Task Edit([FromQuery(Name = "v")] string videoId, [FromForm] VideoEditModel videoEditModel) + { + VideoDto videoModifiedDto = new VideoDto + { + Id = videoId, + Title = videoEditModel.Title, + Description = videoEditModel.Description + }; + + await this._videoService.EditAsync(videoModifiedDto); + + return Redirect("/Video/Details?v=" + videoId); + } } } \ No newline at end of file diff --git a/src/Web/MeTube.Web/Views/Video/Details.cshtml b/src/Web/MeTube.Web/Views/Video/Details.cshtml index 43c2382..9c4e533 100644 --- a/src/Web/MeTube.Web/Views/Video/Details.cshtml +++ b/src/Web/MeTube.Web/Views/Video/Details.cshtml @@ -33,12 +33,21 @@
-
- -
-
@Model.CreatedBy.Name
-
@Model.CreatedBy.Subscribers.Count subscribers
+
+
+ +
+
@Model.CreatedBy.Name
+
@Model.CreatedBy.Subscribers.Count subscribers
+
+ @if (this.User.FindFirst("ChannelId")?.Value == Model.CreatedBy.Id || this.User.IsInRole("Admin")) + { +
+ Edit Video + Delete Video +
+ }
@Model.Views views, @Model.CreatedOn.ToString("dd/MM/yyyy")
@@ -162,17 +171,17 @@ const commentsWrapper = document.querySelector('.comments-wrapper'); const commentTemplate = ` -
- - -
-
- @@{commentChannelName} - @@{commentDate} +
+ + +
+
+ @@{commentChannelName} + @@{commentDate} +
+

{commentContent}

-

{commentContent}

-
-
`; +
`; commentInput.addEventListener('keydown', (e) => { const commentInputValue = commentInput.value; diff --git a/src/Web/MeTube.Web/Views/Video/Edit.cshtml b/src/Web/MeTube.Web/Views/Video/Edit.cshtml new file mode 100644 index 0000000..b32df89 --- /dev/null +++ b/src/Web/MeTube.Web/Views/Video/Edit.cshtml @@ -0,0 +1,80 @@ +@model VideoDto + +@{ + ViewData["Title"] = "Video"; + var reactionTypes = (List)ViewData["ReactionTypes"]; + var currentUserChannel = this.User.Identity.IsAuthenticated ? (ChannelDto)ViewData["Channel"] : null; +} + +
+
+ + +
+
+
+
+
+ +
+ +
+
+
+ +
+ @foreach (var reactionType in reactionTypes.OrderByDescending(rt => Model.Reactions.Count(reaction => reaction.Type.Type == rt.Type))) + { +
+ + @Model.Reactions.Count(reaction => reaction.Type.Type == reactionType.Type) +
+ } +
+
+
+
+
+ +
+
@Model.CreatedBy.Name
+
@Model.CreatedBy.Subscribers.Count subscribers
+
+
+ @if (this.User.FindFirst("ChannelId")?.Value == Model.CreatedBy.Id || this.User.IsInRole("Admin")) + { +
+ + Cancel Edition +
+ } +
+
+
@Model.Views views, @Model.CreatedOn.ToString("dd/MM/yyyy")
+ +
+
+
+ @foreach (var comment in Model.Comments) + { +
+ + +
+
+ @@@comment.CreatedBy.Name + @comment.CreatedOn.ToString("dd/MM/yyyy") +
+

+ @comment.Content +

+
+
+ } +
+
+
+
+
+
+
\ No newline at end of file diff --git a/src/Web/MeTube.Web/wwwroot/css/site.css b/src/Web/MeTube.Web/wwwroot/css/site.css index 9bfdd35..503b350 100644 --- a/src/Web/MeTube.Web/wwwroot/css/site.css +++ b/src/Web/MeTube.Web/wwwroot/css/site.css @@ -19,6 +19,30 @@ body { border: 10px solid #ebebeb; } +.btn-edit { + background-color: #84C3BE; + color: white; + font-weight: bold; +} + +.btn-edit:hover { + background-color: white; + color: black; + border: 2px solid #ebebeb; +} + +.btn-delete { + background-color: #fc656a; + color: white; + font-weight: bold; +} + +.btn-delete:hover { + background-color: white; + color: black; + border: 2px solid #ebebeb; +} + .btn-custom { } @@ -746,11 +770,20 @@ textarea { width: 1280px; } +.video-administration { + display: flex; + justify-content: space-between; +} + .video-metadata-channel { display: flex; justify-content: flex-start; } +.video-operations { + margin-top: 15px; +} + .video-matadata-channel-profile-picture { width: 80px; height: 80px;