Showing
1 changed file
with
73 additions
and
37 deletions
| 1 | -var http = require('http'); | 1 | +const http = require('http'); |
| 2 | -var fs = require('fs'); | 2 | +const fs = require('fs'); |
| 3 | -var url = require('url'); | 3 | +const url = require('url'); |
| 4 | -var testFolder = './data'; | 4 | +const testFolder = './data'; |
| 5 | -var qs = require('querystring'); | 5 | +const qs = require('querystring'); |
| 6 | -var path = require('path'); | 6 | +const path = require('path'); |
| 7 | const {google} = require("googleapis"); | 7 | const {google} = require("googleapis"); |
| 8 | const service = google.youtube('v3'); | 8 | const service = google.youtube('v3'); |
| 9 | const apiKey = 'AIzaSyCjBrFKnBlGvxsfOD-qJP8nBkdEoqKRHu8'; //api키 | 9 | const apiKey = 'AIzaSyCjBrFKnBlGvxsfOD-qJP8nBkdEoqKRHu8'; //api키 |
| ... | @@ -25,26 +25,45 @@ function showcomment(response, VideoNum){ | ... | @@ -25,26 +25,45 @@ function showcomment(response, VideoNum){ |
| 25 | <!doctype html> | 25 | <!doctype html> |
| 26 | <html> | 26 | <html> |
| 27 | <head> | 27 | <head> |
| 28 | - <title>Youtube Comment</title> | 28 | + <title>Youtube Comment</title> |
| 29 | - <meta charset="utf-8"> | 29 | + <meta charset="utf-8"> |
| 30 | + <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous"> | ||
| 31 | + <link rel="preconnect" href="https://fonts.googleapis.com"> | ||
| 32 | + <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | ||
| 33 | + <link href="https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap" rel="stylesheet"> | ||
| 34 | + <link href="https://fonts.googleapis.com/css2?family=Ubuntu&display=swap" rel="stylesheet"> | ||
| 30 | </head> | 35 | </head> |
| 31 | - <body> | 36 | + <body style="margin:5%"> |
| 32 | - <form action="http://localhost:3000/search" method="get"> | 37 | + <h1 style="font-family: 'Permanent Marker', cursive; text-align:center; padding-bottom:1%;">Youtube Comment Seperator</h1> |
| 33 | - <p> | 38 | + <form action="http://localhost:3000/search" method="get"> |
| 34 | - <textarea name="videourl" placeholder="Write your video Url" >${VideoNum}</textarea> | 39 | + <div class="form-group" style="font-family: 'Ubuntu', sans-serif;"> |
| 35 | - </p> | 40 | + <input type="text" name="videourl" placeholder="Type in video ID" class="form-control" style="margin-bottom:10px;"> |
| 36 | - <p> | 41 | + <label for="language-select">Choose a language:</label> |
| 37 | - <input type="submit"> | 42 | + <select class="form-control" name="languages" id="language-select" style="display:inline-flex;"> |
| 38 | - </p> | 43 | + <option value="all" selected>--Please choose an option--</option> |
| 39 | - </form> | 44 | + <option value="ko">한국어</option> |
| 40 | - <br> | 45 | + <option value="en">English</option> |
| 41 | - <br> | 46 | + <option value="ja">日本語</option> |
| 42 | - <iframe width="560" height="315" src="https://www.youtube.com/embed/${VideoNum}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> | 47 | + <option value="zh-CN">中國語</option> |
| 43 | - | 48 | + <option value="es">español</option> |
| 44 | - <br> | 49 | + <option value="fr">Français</option> |
| 45 | - <a href="http://localhost:3000/search?videourl=${VideoNum}&nextpage=${savednpt}"><input type="button" value="댓글 더 불러오기"></a> | 50 | + <option value="de">Deutsch</option> |
| 46 | - <br> | 51 | + </select> |
| 47 | - ${commentDisplay} | 52 | + <p align="right" style="margin-top:1%"> |
| 53 | + <button type="submit" class="btn btn-danger">Display Comments</button> | ||
| 54 | + </p> | ||
| 55 | + </div> | ||
| 56 | + </form> | ||
| 57 | + <br> | ||
| 58 | + <br> | ||
| 59 | + <div class="embed-responsive embed-responsive-16by9" style="text-align:center;"> | ||
| 60 | + <iframe class="embed-responsive-item" width="560" height="315" src="https://www.youtube.com/embed/${VideoNum}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> | ||
| 61 | + </div> | ||
| 62 | + <br> | ||
| 63 | + <a class="btn btn-dark" href="http://localhost:3000/search?videourl=${VideoNum}&nextpage=${savednpt}" role="button">Show more comments</a> | ||
| 64 | + <br> | ||
| 65 | + <div id="results"></div> | ||
| 66 | + ${commentDisplay} | ||
| 48 | </body> | 67 | </body> |
| 49 | </html> | 68 | </html> |
| 50 | `; | 69 | `; |
| ... | @@ -102,20 +121,37 @@ var app = http.createServer(function(request,response){ // request는 브라우 | ... | @@ -102,20 +121,37 @@ var app = http.createServer(function(request,response){ // request는 브라우 |
| 102 | <!doctype html> | 121 | <!doctype html> |
| 103 | <html> | 122 | <html> |
| 104 | <head> | 123 | <head> |
| 105 | - <title>Youtube Comment</title> | 124 | + <title>Youtube Comment</title> |
| 106 | - <meta charset="utf-8"> | 125 | + <meta charset="utf-8"> |
| 126 | + <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous"> | ||
| 127 | + <link rel="preconnect" href="https://fonts.googleapis.com"> | ||
| 128 | + <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | ||
| 129 | + <link href="https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap" rel="stylesheet"> | ||
| 130 | + <link href="https://fonts.googleapis.com/css2?family=Ubuntu&display=swap" rel="stylesheet"> | ||
| 107 | </head> | 131 | </head> |
| 108 | - <body> | 132 | + <body style="margin:5%"> |
| 109 | - <form action="http://localhost:3000/search" method="get"> | 133 | + <h1 style="font-family: 'Permanent Marker', cursive; text-align:center; padding-bottom:1%;">Youtube Comment Seperator</h1> |
| 110 | - <p> | 134 | + <form action="http://localhost:3000/search" method="get"> |
| 111 | - <textarea name="videourl" placeholder="Write your video Url"></textarea> | 135 | + <div class="form-group" style="font-family: 'Ubuntu', sans-serif;"> |
| 112 | - </p> | 136 | + <input type="text" name="videourl" placeholder="Type in video ID" class="form-control" style="margin-bottom:10px;"> |
| 113 | - <p> | 137 | + <label for="language-select">Choose a language:</label> |
| 114 | - <input type="submit"> | 138 | + <select class="form-control" name="languages" id="language-select" style="display:inline-flex;"> |
| 115 | - </p> | 139 | + <option value="all" selected>--Please choose an option--</option> |
| 116 | - </form> | 140 | + <option value="ko">한국어</option> |
| 141 | + <option value="en">English</option> | ||
| 142 | + <option value="ja">日本語</option> | ||
| 143 | + <option value="zh-CN">中國語</option> | ||
| 144 | + <option value="es">español</option> | ||
| 145 | + <option value="fr">Français</option> | ||
| 146 | + <option value="de">Deutsch</option> | ||
| 147 | + </select> | ||
| 148 | + <p align="right" style="margin-top:1%"> | ||
| 149 | + <button type="submit" class="btn btn-danger">Display Comments</button> | ||
| 150 | + </p> | ||
| 151 | + </div> | ||
| 152 | + </form> | ||
| 117 | </body> | 153 | </body> |
| 118 | - </html> | 154 | + </html> |
| 119 | `; | 155 | `; |
| 120 | response.writeHead(200); | 156 | response.writeHead(200); |
| 121 | response.end(body); | 157 | response.end(body); | ... | ... |
-
Please register or login to post a comment