Yuncheol Kwak

Feat modified design

1 -const http = require('http'); 1 +var papago = require("./papago.js");
2 -const fs = require('fs'); 2 +var http = require('http');
3 -const url = require('url'); 3 +var fs = require('fs');
4 -const testFolder = './data'; 4 +var url = require('url');
5 -const qs = require('querystring'); 5 +var testFolder = './data';
6 -const path = require('path'); 6 +var qs = require('querystring');
7 +var path = require('path');
7 const {google} = require("googleapis"); 8 const {google} = require("googleapis");
8 const service = google.youtube('v3'); 9 const service = google.youtube('v3');
9 const apiKey = 'AIzaSyCjBrFKnBlGvxsfOD-qJP8nBkdEoqKRHu8'; //api키 10 const apiKey = 'AIzaSyCjBrFKnBlGvxsfOD-qJP8nBkdEoqKRHu8'; //api키
10 let videoNum = "TpPwI_Lo0YY"; //비디오 주소(예시) 11 let videoNum = "TpPwI_Lo0YY"; //비디오 주소(예시)
12 +const serverIP = "http://localhost:3000" //서버의 주소
11 var commentList = new Array(); 13 var commentList = new Array();
12 var commentNum = 0; 14 var commentNum = 0;
13 var savednpt = '' 15 var savednpt = ''
...@@ -34,10 +36,10 @@ function showcomment(response, VideoNum){ ...@@ -34,10 +36,10 @@ function showcomment(response, VideoNum){
34 <link href="https://fonts.googleapis.com/css2?family=Ubuntu&display=swap" rel="stylesheet"> 36 <link href="https://fonts.googleapis.com/css2?family=Ubuntu&display=swap" rel="stylesheet">
35 </head> 37 </head>
36 <body style="margin:5%"> 38 <body style="margin:5%">
37 - <h1 style="font-family: 'Permanent Marker', cursive; text-align:center; padding-bottom:1%;">Youtube Comment Seperator</h1> 39 + <h1 style="font-family: 'Permanent Marker', cursive; text-align:center; padding-bottom:1%;"><a href="${serverIP}" style="text-decoration:none; color:inherit;">Youtube Comment Seperator</a></h1>
38 - <form action="http://localhost:3000/search" method="get"> 40 + <form action="${serverIP}/search" method="get">
39 <div class="form-group" style="font-family: 'Ubuntu', sans-serif;"> 41 <div class="form-group" style="font-family: 'Ubuntu', sans-serif;">
40 - <input type="text" name="videourl" placeholder="Type in video ID" class="form-control" style="margin-bottom:10px;"> 42 + <input type="text" name="videourl" placeholder="Type in video Url" class="form-control" style="margin-bottom:10px;">
41 <label for="language-select">Choose a language:</label> 43 <label for="language-select">Choose a language:</label>
42 <select class="form-control" name="languages" id="language-select" style="display:inline-flex;"> 44 <select class="form-control" name="languages" id="language-select" style="display:inline-flex;">
43 <option value="all" selected>--Please choose an option--</option> 45 <option value="all" selected>--Please choose an option--</option>
...@@ -60,9 +62,8 @@ function showcomment(response, VideoNum){ ...@@ -60,9 +62,8 @@ function showcomment(response, VideoNum){
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> 62 <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> 63 </div>
62 <br> 64 <br>
63 - <a class="btn btn-dark" href="http://localhost:3000/search?videourl=${VideoNum}&nextpage=${savednpt}" role="button">Show more comments</a> 65 + <a class="btn btn-dark" href="${serverIP}/search?videourl=${VideoNum}&nextpage=${savednpt}" role="button">Show more comments</a>
64 <br> 66 <br>
65 - <div id="results"></div>
66 ${commentDisplay} 67 ${commentDisplay}
67 </body> 68 </body>
68 </html> 69 </html>
...@@ -83,10 +84,12 @@ function loadcomment(ApiKey, VideoNum, npt, n, res){ ...@@ -83,10 +84,12 @@ function loadcomment(ApiKey, VideoNum, npt, n, res){
83 }).then(function(response) { 84 }).then(function(response) {
84 //console.log("Response", response); 85 //console.log("Response", response);
85 for(let iter = 0; iter < response.data.pageInfo.totalResults; iter++){ 86 for(let iter = 0; iter < response.data.pageInfo.totalResults; iter++){
87 + let templang = papago.getLang(response.data.items[iter].snippet.topLevelComment.snippet.textDisplay)
86 let tempComment = { 88 let tempComment = {
87 'name' : response.data.items[iter].snippet.topLevelComment.snippet.authorDisplayName, 89 'name' : response.data.items[iter].snippet.topLevelComment.snippet.authorDisplayName,
88 'image' : response.data.items[iter].snippet.topLevelComment.snippet.authorProfileImageUrl, 90 'image' : response.data.items[iter].snippet.topLevelComment.snippet.authorProfileImageUrl,
89 - 'text' : response.data.items[iter].snippet.topLevelComment.snippet.textDisplay 91 + 'text' : response.data.items[iter].snippet.topLevelComment.snippet.textDisplay,
92 + 'lang' : templang
90 } 93 }
91 commentList.push(tempComment); 94 commentList.push(tempComment);
92 commentNum += 1; 95 commentNum += 1;
...@@ -130,10 +133,10 @@ var app = http.createServer(function(request,response){ // request는 브라우 ...@@ -130,10 +133,10 @@ var app = http.createServer(function(request,response){ // request는 브라우
130 <link href="https://fonts.googleapis.com/css2?family=Ubuntu&display=swap" rel="stylesheet"> 133 <link href="https://fonts.googleapis.com/css2?family=Ubuntu&display=swap" rel="stylesheet">
131 </head> 134 </head>
132 <body style="margin:5%"> 135 <body style="margin:5%">
133 - <h1 style="font-family: 'Permanent Marker', cursive; text-align:center; padding-bottom:1%;">Youtube Comment Seperator</h1> 136 + <h1 style="font-family: 'Permanent Marker', cursive; text-align:center; padding-bottom:1%;"><a href="${serverIP}" style="text-decoration:none; color:inherit;">Youtube Comment Seperator</a></h1>
134 - <form action="http://localhost:3000/search" method="get"> 137 + <form action="${serverIP}/search" method="get">
135 <div class="form-group" style="font-family: 'Ubuntu', sans-serif;"> 138 <div class="form-group" style="font-family: 'Ubuntu', sans-serif;">
136 - <input type="text" name="videourl" placeholder="Type in video ID" class="form-control" style="margin-bottom:10px;"> 139 + <input type="text" name="videourl" placeholder="Type in video Url" class="form-control" style="margin-bottom:10px;">
137 <label for="language-select">Choose a language:</label> 140 <label for="language-select">Choose a language:</label>
138 <select class="form-control" name="languages" id="language-select" style="display:inline-flex;"> 141 <select class="form-control" name="languages" id="language-select" style="display:inline-flex;">
139 <option value="all" selected>--Please choose an option--</option> 142 <option value="all" selected>--Please choose an option--</option>
...@@ -151,7 +154,7 @@ var app = http.createServer(function(request,response){ // request는 브라우 ...@@ -151,7 +154,7 @@ var app = http.createServer(function(request,response){ // request는 브라우
151 </div> 154 </div>
152 </form> 155 </form>
153 </body> 156 </body>
154 - </html> 157 + </html>
155 `; 158 `;
156 response.writeHead(200); 159 response.writeHead(200);
157 response.end(body); 160 response.end(body);
......