Skip to content

Commit

Permalink
MT-25 Edit Videos (#16)
Browse files Browse the repository at this point in the history
* MT-20 Basic Search and small refactoring of Video Service

* MT-25 Added Edit Functionality for videos
  • Loading branch information
DCay committed Mar 31, 2024
1 parent b198b8b commit 50799b3
Show file tree
Hide file tree
Showing 6 changed files with 181 additions and 16 deletions.
5 changes: 4 additions & 1 deletion src/Service/MeTube.Service/Videos/VideoService.cs
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,10 @@ public async Task<VideoDto> CreateAsync(VideoDto videoDto, string userId)

public async Task<VideoDto> 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();
}
Expand Down
7 changes: 7 additions & 0 deletions src/Web/MeTube.Web.Models/Video/VideoEditModel.cs
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
namespace MeTube.Web.Models.Video;

public class VideoEditModel
{
public string Title { get; set; }
public string Description { get;set; }
}
33 changes: 33 additions & 0 deletions src/Web/MeTube.Web/Controllers/VideoController.cs
Original file line number Diff line number Diff line change
@@ -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;
Expand Down Expand Up @@ -96,5 +97,37 @@ public async Task<IActionResult> Comment([FromQuery] string videoId, [FromBody]

return Ok(await this._videoService.Comment(videoId, commentCreateModel.Content, currentUser.Id));
}

[HttpGet]
public async Task<IActionResult> 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<IActionResult> 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);
}
}
}
39 changes: 24 additions & 15 deletions src/Web/MeTube.Web/Views/Video/Details.cshtml
Original file line number Diff line number Diff line change
Expand Up @@ -33,12 +33,21 @@
</div>
</div>
<div class="video-metadata mt-3">
<div class="video-metadata-channel">
<img class="video-matadata-channel-profile-picture" src="@Model.CreatedBy.ProfilePicture.CloudURL" />
<div class="video-matadata-channel-data">
<h5 class="fw-bold"><a class="link-custom" href="/Channel/Details?channelId=@Model.CreatedBy.Id">@Model.CreatedBy.Name</a></h5>
<h6 class="text-faded fw-normal">@Model.CreatedBy.Subscribers.Count subscribers</h6>
<div class="video-administration">
<div class="video-metadata-channel">
<img class="video-matadata-channel-profile-picture" src="@Model.CreatedBy.ProfilePicture.CloudURL" />
<div class="video-matadata-channel-data">
<h5 class="fw-bold"><a class="link-custom" href="/Channel/Details?channelId=@Model.CreatedBy.Id">@Model.CreatedBy.Name</a></h5>
<h6 class="text-faded fw-normal">@Model.CreatedBy.Subscribers.Count subscribers</h6>
</div>
</div>
@if (this.User.FindFirst("ChannelId")?.Value == Model.CreatedBy.Id || this.User.IsInRole("Admin"))
{
<div class="video-operations">
<a href="/Video/Edit?v=@Model.Id" class="btn btn-edit">Edit Video</a>
<a href="" class="btn btn-delete">Delete Video</a>
</div>
}
</div>
<div class="video-metadata-description mt-3">
<h6 class="video-metadata-views-and-date fw-bold">@Model.Views views, @Model.CreatedOn.ToString("dd/MM/yyyy")</h6>
Expand Down Expand Up @@ -162,17 +171,17 @@
const commentsWrapper = document.querySelector('.comments-wrapper');
const commentTemplate = `
<div class="comment-container d-flex justify-content-start mt-4">
<span class="comment-id-container" id="{commentId}" hidden></span>
<img class="comment-channel-profile-picture" width="65px" height="65px" src="{commentChannelProfilePicture}" />
<div class="comment-data">
<div class="comment-channel-metadata">
<span class="comment-channel-name">@@{commentChannelName}</span>
<span class="comment-date text-faded">@@{commentDate}</span>
<div class="comment-container d-flex justify-content-start mt-4">
<span class="comment-id-container" id="{commentId}" hidden></span>
<img class="comment-channel-profile-picture" width="65px" height="65px" src="{commentChannelProfilePicture}" />
<div class="comment-data">
<div class="comment-channel-metadata">
<span class="comment-channel-name">@@{commentChannelName}</span>
<span class="comment-date text-faded">@@{commentDate}</span>
</div>
<p class="comment-content mt-2">{commentContent}</p>
</div>
<p class="comment-content mt-2">{commentContent}</p>
</div>
</div>`;
</div>`;
commentInput.addEventListener('keydown', (e) => {
const commentInputValue = commentInput.value;
Expand Down
80 changes: 80 additions & 0 deletions src/Web/MeTube.Web/Views/Video/Edit.cshtml
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
@model VideoDto

@{
ViewData["Title"] = "Video";
var reactionTypes = (List<ReactionTypeDto>)ViewData["ReactionTypes"];
var currentUserChannel = this.User.Identity.IsAuthenticated ? (ChannelDto)ViewData["Channel"] : null;
}

<header>
<div class="search-bar-container">
<input class="search-bar" type="text" />
<img class="search-bar-icon" src="~/images/search-icon.png" />
</div>
</header>
<main>
<div class="video-page-content d-flex ">
<div class="video-play-container">
<span id="video-id-@Model.Id" hidden></span>
<div class="video-visualizer">
<video controls src="@Model.VideoFile.CloudURL"></video>
</div>
<form action="/Video/Edit?v=@Model.Id" method="post">
<div class="video-title-and-reactions d-flex justify-content-between mt-3">
<input class="form-control fw-bold" type="text" value="@Model.Title" placeholder="Enter title..." name="Title" />
<div class="video-reactions d-flex justify-content-end w-50">
@foreach (var reactionType in reactionTypes.OrderByDescending(rt => Model.Reactions.Count(reaction => reaction.Type.Type == rt.Type)))
{
<div class="video-reaction-type-card p-3 d-flex justify-content-around" id="reaction-type-@reactionType.Id">
<img width="25px" height="25px" src="@reactionType.ReactionIcon.CloudURL" />
<span class="fw-bold">@Model.Reactions.Count(reaction => reaction.Type.Type == reactionType.Type)</span>
</div>
}
</div>
</div>
<div class="video-metadata mt-3">
<div class="video-administration">
<div class="video-metadata-channel">
<img class="video-matadata-channel-profile-picture" src="@Model.CreatedBy.ProfilePicture.CloudURL" />
<div class="video-matadata-channel-data">
<h5 class="fw-bold"><a class="link-custom" href="/Channel/Details?channelId=@Model.CreatedBy.Id">@Model.CreatedBy.Name</a></h5>
<h6 class="text-faded fw-normal">@Model.CreatedBy.Subscribers.Count subscribers</h6>
</div>
</div>
@if (this.User.FindFirst("ChannelId")?.Value == Model.CreatedBy.Id || this.User.IsInRole("Admin"))
{
<div class="video-operations">
<button type="submit" class="btn btn-edit">Confirm Edition</button>
<a href="/Video/Details?v=@Model.Id" class="btn btn-delete">Cancel Edition</a>
</div>
}
</div>
<div class="video-metadata-description mt-3">
<h6 class="video-metadata-views-and-date fw-bold">@Model.Views views, @Model.CreatedOn.ToString("dd/MM/yyyy")</h6>
<textarea class="form-control" rows="5" name="Description">@Model.Description</textarea>
</div>
<div class="comment-section mt-3">
<div class="comments-wrapper">
@foreach (var comment in Model.Comments)
{
<div class="comment-container d-flex justify-content-start mt-4">
<span class="comment-id-container" id="@comment.Id" hidden></span>
<img class="comment-channel-profile-picture" width="65px" height="65px" src="@comment.CreatedBy.ProfilePicture.CloudURL" />
<div class="comment-data">
<div class="comment-channel-metadata">
<span class="comment-channel-name"><a class="link-custom" href="/Channel/Details?channelId=@comment.CreatedBy.Id">@@@comment.CreatedBy.Name</a></span>
<span class="comment-date text-faded">@comment.CreatedOn.ToString("dd/MM/yyyy")</span>
</div>
<p class="comment-content mt-2">
@comment.Content
</p>
</div>
</div>
}
</div>
</div>
</div>
</form>
</div>
</div>
</main>
33 changes: 33 additions & 0 deletions src/Web/MeTube.Web/wwwroot/css/site.css
Original file line number Diff line number Diff line change
Expand Up @@ -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 {

}
Expand Down Expand Up @@ -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;
Expand Down

0 comments on commit 50799b3

Please sign in to comment.