MotherProject / myYoutube

Go to a project
Toggle navigation Toggle navigation pinning
Flare-k
bd523a95 1 parent 28935845

[Add] Comment and multer+S3

Expand all
Inline Side-by-side
Showing 8 changed files with 105 additions and 8 deletions
1 +import axios from "axios";
2 +const addCommentForm = document.getElementById("jsAddComment");
3 +const commentList = document.getElementById("jsCommentList");
4 +const commentNumber = document.getElementById("jsCommentNumber");
5 +
6 +const increaseNumber = () => {
7 + commentNumber.innerHTML = parseInt(commentNumber.innerHTML, 10) + 1;
8 +};
9 +
10 +const addComment = (comment) => {
11 + const li = document.createElement("li");
12 + const span = document.createElement("span");
13 + span.innerHTML = comment;
14 + li.appendChild(span);
15 + commentList.prepend(li);
16 + increaseNumber();
17 +};
18 +
19 +const sendComment = async (comment) => {
20 + const id = window.location.href.split("/videos/")[1];
21 + const response = await axios({
22 + url: `/api/${id}/comment`,
23 + method: "POST",
24 + data: {
25 + comment, // videoDetail template의 input form's name
26 + },
27 + });
28 + // console.log(response);
29 + if (response.status === 200) {
30 + addComment(comment);
31 + }
32 +};
33 +
34 +const handleSubmit = (event) => {
35 + event.preventDefault(); // 새로고침 막기
36 + const commentInput = addCommentForm.querySelector("input");
37 + const comment = commentInput.value;
38 + sendComment(comment);
39 + commentInput.value = "";
40 +};
41 +
42 +function init() {
43 + addCommentForm.addEventListener("submit", handleSubmit);
44 +}
45 +if (addCommentForm) {
46 + init();
47 +}
1 import "../scss/styles.scss"; 1 import "../scss/styles.scss";
2 import "./videoPlayer"; 2 import "./videoPlayer";
3 import "./videoRecorder"; 3 import "./videoRecorder";
4 +import "./addComment";
......
...@@ -8,7 +8,8 @@ const totalTime = document.getElementById("totalTime"); ...@@ -8,7 +8,8 @@ const totalTime = document.getElementById("totalTime");
8 const volumeRange = document.getElementById("jsVolume"); 8 const volumeRange = document.getElementById("jsVolume");
9 9
10 const registerView = () => { 10 const registerView = () => {
11 - fetch(`/api/${window.location.href.split("/videos/")[1]}/view`, { 11 + const id = window.location.href.split("/videos/")[1];
12 + fetch(`/api/${id}/view`, {
12 method: "POST", 13 method: "POST",
13 }); 14 });
14 }; 15 };
......
...@@ -34,8 +34,29 @@ ...@@ -34,8 +34,29 @@
34 } 34 }
35 .video__comments { 35 .video__comments {
36 margin-top: 25px; 36 margin-top: 25px;
37 + text-align: center;
37 .video__comment-number { 38 .video__comment-number {
38 font-size: 18px; 39 font-size: 18px;
39 } 40 }
41 + .add__comment {
42 + margin-top: 25px;
43 + width: 100%;
44 + input {
45 + width: 100%;
46 + }
47 + }
48 + .video__comments-list {
49 + margin-top: 50px;
50 + li {
51 + background-color: #3498db;
52 + color: white;
53 + padding: 15px;
54 + border-radius: 20px;
55 + border-bottom-left-radius: 0px;
56 + &:not(:last-child) {
57 + margin-bottom: 15px;
58 + }
59 + }
60 + }
40 } 61 }
41 } 62 }
......
...@@ -21,6 +21,7 @@ ...@@ -21,6 +21,7 @@
21 "@babel/polyfill": "^7.10.1", 21 "@babel/polyfill": "^7.10.1",
22 "@babel/preset-env": "^7.9.6", 22 "@babel/preset-env": "^7.9.6",
23 "autoprefixer": "^9.8.0", 23 "autoprefixer": "^9.8.0",
24 + "aws-sdk": "^2.702.0",
24 "axios": "^0.19.2", 25 "axios": "^0.19.2",
25 "babel-loader": "^8.1.0", 26 "babel-loader": "^8.1.0",
26 "body-parser": "^1.19.0", 27 "body-parser": "^1.19.0",
...@@ -35,6 +36,7 @@ ...@@ -35,6 +36,7 @@
35 "mongoose": "^5.9.15", 36 "mongoose": "^5.9.15",
36 "morgan": "^1.10.0", 37 "morgan": "^1.10.0",
37 "multer": "^1.4.2", 38 "multer": "^1.4.2",
39 + "multer-s3": "^2.9.0",
38 "ngrok": "^3.2.7", 40 "ngrok": "^3.2.7",
39 "node-sass": "^4.14.1", 41 "node-sass": "^4.14.1",
40 "passport": "^0.4.1", 42 "passport": "^0.4.1",
......
This diff is collapsed. Click to expand it.
...@@ -553,9 +553,29 @@ input[type="submit"] { ...@@ -553,9 +553,29 @@ input[type="submit"] {
553 .video-detail__container .video__info .video__description { 553 .video-detail__container .video__info .video__description {
554 font-size: 16px; } 554 font-size: 16px; }
555 .video-detail__container .video__comments { 555 .video-detail__container .video__comments {
556 - margin-top: 25px; } 556 + margin-top: 25px;
557 + text-align: center; }
557 .video-detail__container .video__comments .video__comment-number { 558 .video-detail__container .video__comments .video__comment-number {
558 font-size: 18px; } 559 font-size: 18px; }
560 + .video-detail__container .video__comments .add__comment {
561 + margin-top: 25px;
562 + width: 100%; }
563 + .video-detail__container .video__comments .add__comment input {
564 + width: 100%; }
565 + .video-detail__container .video__comments .video__comments-list {
566 + margin-top: 50px; }
567 + .video-detail__container .video__comments .video__comments-list li {
568 + background-color: #3498db;
569 + color: white;
570 + padding: 15px;
571 + -webkit-border-radius: 20px;
572 + -moz-border-radius: 20px;
573 + border-radius: 20px;
574 + -webkit-border-bottom-left-radius: 0px;
575 + -moz-border-radius-bottomleft: 0px;
576 + border-bottom-left-radius: 0px; }
577 + .video-detail__container .video__comments .video__comments-list li:not(:last-child) {
578 + margin-bottom: 15px; }
559 579
560 .user-profile { 580 .user-profile {
561 width: 100%; 581 width: 100%;
......
...@@ -19,13 +19,18 @@ block content ...@@ -19,13 +19,18 @@ block content
19 .video__author 19 .video__author
20 |Uploaded by 20 |Uploaded by
21 a(href=routes.userDetail(video.creator.id))=video.creator.name 21 a(href=routes.userDetail(video.creator.id))=video.creator.name
22 - .video__comment 22 + .video__comments
23 if video.comments.length === 1 23 if video.comments.length === 1
24 - span.video__comment-number 1 comment 24 + span.video__comment-number
25 + span#jsCommentNumber 1
26 + | comment
25 else 27 else
26 - span.video__comment-number #{video.comments.length} comments 28 + span.video__comment-number
29 + span#jsCommentNumber=video.comments.length
30 + | comments
27 form.add__comment#jsAddComment 31 form.add__comment#jsAddComment
28 input(type="text", placeholder="Add a comment", name="comment") 32 input(type="text", placeholder="Add a comment", name="comment")
29 - ul.video__comments-list
30 - each comment in video.comments
31 - span comment.text
...\ No newline at end of file ...\ No newline at end of file
33 + ul.video__comments-list#jsCommentList
34 + each comment in video.comments.reverse()
35 + li
36 + span=comment.text
...\ No newline at end of file ...\ No newline at end of file
......