Showing
8 changed files
with
105 additions
and
8 deletions
assets/js/addComment.js
0 → 100644
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 | +} |
... | @@ -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 | ... | ... |
-
Please register or login to post a comment