From 90a9de39ee32bd2b794e051ed6036913bf0b823c Mon Sep 17 00:00:00 2001
From: guiyomj <wastfg6972@naver.com>
Date: Fri, 24 Sep 2021 03:28:01 +0900
Subject: [PATCH] =?UTF-8?q?[#9]=20=ED=8C=8C=EC=9D=BC=20=EC=97=85=EB=A1=9C?=
 =?UTF-8?q?=EB=93=9C,=20=ED=8C=8C=EC=9D=BC=20=EB=9E=9C=EB=8D=A4=20?=
 =?UTF-8?q?=EC=9E=AC=EC=83=9D=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

이제 자러가자~~
---
 public/html/main.html             |  4 +++-
 public/javascripts/main_bundle.js |  2 +-
 src/html/main.html                |  2 ++
 src/js/main.js                    | 38 +++++++++++++++++++++++++++----
 4 files changed, 40 insertions(+), 6 deletions(-)

diff --git a/public/html/main.html b/public/html/main.html
index 2aa8123..da62a21 100644
--- a/public/html/main.html
+++ b/public/html/main.html
@@ -18,7 +18,7 @@
         <img class='move_btn' src='/image/left_btn.svg' />
       </button>
       <div id='main_video'>
-        <iframe src="https://www.youtube.com/embed/S91wQbYYX3Q?autoplay=1&mute=1&autohide=1" frameborder="0" allowfullscreen="1" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture;"></iframe>
+        <iframe src="https://www.youtube.com/embed/S91wQbYYX3Q?autoplay=1&mute=1&autohide=1" frameborder="0" allowfullscreen allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture;"></iframe>
         <div class="video_cover"></div>
       </div>
       <button type='button' id='right_move'>
@@ -46,10 +46,12 @@ <h4 class="title">Add your video</h4>
               <span class="title-cont">Upload your video, enjoy together!</span>
           </div>
           <div class="popup-body">
+            <form id="form">
               <div class="file-upload-btn">
                   <span>Drag and drop or click your video</span>
               </div>
               <input type="file" id="video" accept="video/*">
+            </form>
           </div>
       </div>
   </body>
diff --git a/public/javascripts/main_bundle.js b/public/javascripts/main_bundle.js
index 4d8788c..54255fe 100644
--- a/public/javascripts/main_bundle.js
+++ b/public/javascripts/main_bundle.js
@@ -48,7 +48,7 @@ eval("var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPAC
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _css_main_scss__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../css/main.scss */ \"./src/css/main.scss\");\n/* harmony import */ var _js_kakao_min__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../js/kakao.min */ \"./src/js/kakao.min.js\");\n/* harmony import */ var _js_kakao_min__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_js_kakao_min__WEBPACK_IMPORTED_MODULE_1__);\n\n\nvar shareOpenBtn = document.querySelector('.share-btn');\nvar shareBtnList = document.querySelector('.share-btn-list');\nvar volumeRangeBar = document.querySelector('.volume-controller > input[type=range]');\nvar volumeBtn = document.querySelector('.volumn-btn');\nvar writePopup = document.querySelector('.popup');\nvar writeBtn = document.querySelector('.write-btn');\nvar fileUploadBtn = document.querySelector('.file-upload-btn');\nvar href = location.href;\n\nvar copyHandler = function copyHandler() {\n  var url = '';\n  var textarea = document.createElement('textarea');\n  document.body.appendChild(textarea);\n  textarea.value = href;\n  textarea.select();\n  document.execCommand('copy');\n  document.body.removeChild(textarea);\n  alert('URL이 복사되었습니다.');\n};\n\nvar naverShareHandler = function naverShareHandler() {\n  window.open(\"https://share.naver.com/web/shareView.nhn?url=\".concat(location.href, \"&title=i'am everywhere\"), '_blank');\n};\n\nvar kakaoShareHandler = function kakaoShareHandler() {\n  Kakao.init('d3fd7feec833bfcac050d9c364bcb690'); // 사용할 앱의 JavaScript 키를 설정\n\n  Kakao.Link.sendDefault({\n    objectType: 'feed',\n    content: {\n      title: \"I'm Everywhere\",\n      imageUrl: href + '/image/favicon.png',\n      link: {\n        mobileWebUrl: href // 모바일 카카오톡에서 사용하는 웹 링크 URL\n        ,\n        webUrl: href // PC버전 카카오톡에서 사용하는 웹 링크 URL\n\n      }\n    },\n    buttons: [{\n      title: 'Go!' // 버튼 제목\n      ,\n      link: {\n        mobileWebUrl: href // 모바일 카카오톡에서 사용하는 웹 링크 URL\n        ,\n        webUrl: href // PC버전 카카오톡에서 사용하는 웹 링크 URL\n\n      }\n    }]\n  });\n};\n\nvar showPopup = function showPopup() {\n  return writePopup.classList.add('on');\n};\n\nvar hidePopup = function hidePopup() {\n  return writePopup.classList.remove('on');\n};\n\nvar uploadVideo = function uploadVideo() {\n  document.all.video.click();\n};\n\nshareOpenBtn.addEventListener('click', function () {\n  return shareOpenBtn.classList.toggle('on');\n});\nshareBtnList.addEventListener('click', function () {\n  return shareOpenBtn.classList.remove('on');\n});\nshareBtnList.querySelector('.copy-btn').addEventListener('click', copyHandler);\nshareBtnList.querySelector('.naver-btn').addEventListener('click', naverShareHandler);\nshareBtnList.querySelector('.kakao-btn').addEventListener('click', kakaoShareHandler);\nvolumeRangeBar.addEventListener('input', function () {\n  var volume = Number(volumeRangeBar.value);\n  volume === 0 ? volumeBtn.classList.add('off') : volumeBtn.classList.remove('off');\n});\nvolumeBtn.addEventListener('click', function () {\n  volumeBtn.classList.toggle('off');\n  volumeRangeBar.value = volumeBtn.classList.contains('off') ? 0 : 100;\n});\nwriteBtn.addEventListener('click', showPopup);\nwritePopup.querySelector('.close-btn').addEventListener('click', hidePopup);\nfileUploadBtn.addEventListener('click', uploadVideo);\n\n//# sourceURL=webpack://everywhere/./src/js/main.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _css_main_scss__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../css/main.scss */ \"./src/css/main.scss\");\n/* harmony import */ var _js_kakao_min__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../js/kakao.min */ \"./src/js/kakao.min.js\");\n/* harmony import */ var _js_kakao_min__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_js_kakao_min__WEBPACK_IMPORTED_MODULE_1__);\n\n\nvar shareOpenBtn = document.querySelector('.share-btn');\nvar shareBtnList = document.querySelector('.share-btn-list');\nvar volumeRangeBar = document.querySelector('.volume-controller > input[type=range]');\nvar volumeBtn = document.querySelector('.volumn-btn');\nvar writePopup = document.querySelector('.popup');\nvar writeBtn = document.querySelector('.write-btn');\nvar fileUploadBtn = document.querySelector('.file-upload-btn');\nvar uploadFile = document.querySelector('#video');\nvar leftMove = document.querySelector('#left_move');\nvar rightMove = document.querySelector('#right_move');\nvar locationName = document.querySelector('#address_text');\nvar videoIframe = document.querySelector('#main_video > iframe');\nvar href = location.href;\nvar backend = \"http://101.101.217.153\";\n\nvar copyHandler = function copyHandler() {\n  var url = '';\n  var textarea = document.createElement('textarea');\n  document.body.appendChild(textarea);\n  textarea.value = href;\n  textarea.select();\n  document.execCommand('copy');\n  document.body.removeChild(textarea);\n  alert('URL이 복사되었습니다.');\n};\n\nvar getRandomVideo = function getRandomVideo() {\n  fetch(\"\".concat(backend, \"/api/video/random\")).then(function (res) {\n    return res.json();\n  }).then(function (res) {\n    locationName.textContent = res.video.location;\n    videoIframe.src = res.video.videoURL.replace('localhost', '101.101.217.153') + '?autoplay=1&mute=1';\n  });\n};\n\nleftMove.addEventListener('click', getRandomVideo);\nrightMove.addEventListener('click', getRandomVideo);\n\nvar naverShareHandler = function naverShareHandler() {\n  window.open(\"https://share.naver.com/web/shareView.nhn?url=\".concat(location.href, \"&title=i'am everywhere\"), '_blank');\n};\n\nvar kakaoShareHandler = function kakaoShareHandler() {\n  Kakao.init('d3fd7feec833bfcac050d9c364bcb690'); // 사용할 앱의 JavaScript 키를 설정\n\n  Kakao.Link.sendDefault({\n    objectType: 'feed',\n    content: {\n      title: \"I'm Everywhere\",\n      imageUrl: href + '/image/favicon.png',\n      link: {\n        mobileWebUrl: href // 모바일 카카오톡에서 사용하는 웹 링크 URL\n        ,\n        webUrl: href // PC버전 카카오톡에서 사용하는 웹 링크 URL\n\n      }\n    },\n    buttons: [{\n      title: 'Go!' // 버튼 제목\n      ,\n      link: {\n        mobileWebUrl: href // 모바일 카카오톡에서 사용하는 웹 링크 URL\n        ,\n        webUrl: href // PC버전 카카오톡에서 사용하는 웹 링크 URL\n\n      }\n    }]\n  });\n};\n\nvar showPopup = function showPopup() {\n  return writePopup.classList.add('on');\n};\n\nvar hidePopup = function hidePopup() {\n  return writePopup.classList.remove('on');\n};\n\nvar uploadVideo = function uploadVideo() {\n  return document.all.video.click();\n};\n\nvar locationList = ['Seoul', 'Gyunggido', 'Daejeon', 'Daegu'];\n\nvar getRandomLoc = function getRandomLoc() {\n  return locationList[parseInt(Math.random() * 5)];\n};\n\nuploadFile.addEventListener('input', function () {\n  var formData = new FormData();\n  formData.append('video', document.querySelector('#video').files[0]);\n  formData.append('location', getRandomLoc());\n  fetch(\"\".concat(backend, \"/api/video\"), {\n    method: \"POST\",\n    headers: {},\n    body: formData\n  }).then(function (res) {\n    return console.log(res);\n  });\n});\nshareOpenBtn.addEventListener('click', function () {\n  return shareOpenBtn.classList.toggle('on');\n});\nshareBtnList.addEventListener('click', function () {\n  return shareOpenBtn.classList.remove('on');\n});\nshareBtnList.querySelector('.copy-btn').addEventListener('click', copyHandler);\nshareBtnList.querySelector('.naver-btn').addEventListener('click', naverShareHandler);\nshareBtnList.querySelector('.kakao-btn').addEventListener('click', kakaoShareHandler);\nvolumeRangeBar.addEventListener('input', function () {\n  var volume = Number(volumeRangeBar.value);\n  volume === 0 ? volumeBtn.classList.add('off') : volumeBtn.classList.remove('off');\n});\nvolumeBtn.addEventListener('click', function () {\n  volumeBtn.classList.toggle('off');\n  volumeRangeBar.value = volumeBtn.classList.contains('off') ? 0 : 100;\n});\nwriteBtn.addEventListener('click', showPopup);\nwritePopup.querySelector('.close-btn').addEventListener('click', hidePopup);\nfileUploadBtn.addEventListener('click', uploadVideo);\ngetRandomVideo();\n\n//# sourceURL=webpack://everywhere/./src/js/main.js?");
 
 /***/ }),
 
diff --git a/src/html/main.html b/src/html/main.html
index 699ec9d..0bd4037 100644
--- a/src/html/main.html
+++ b/src/html/main.html
@@ -46,10 +46,12 @@ <h4 class="title">Add your video</h4>
               <span class="title-cont">Upload your video, enjoy together!</span>
           </div>
           <div class="popup-body">
+            <form id="form">
               <div class="file-upload-btn">
                   <span>Drag and drop or click your video</span>
               </div>
               <input type="file" id="video" accept="video/*">
+            </form>
           </div>
       </div>
   </body>
diff --git a/src/js/main.js b/src/js/main.js
index 88c9434..07df162 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -8,8 +8,14 @@ const volumeBtn = document.querySelector('.volumn-btn')
 const writePopup = document.querySelector('.popup')
 const writeBtn = document.querySelector('.write-btn')
 const fileUploadBtn = document.querySelector('.file-upload-btn')
+const uploadFile = document.querySelector('#video')
+const leftMove = document.querySelector('#left_move')
+const rightMove = document.querySelector('#right_move')
+const locationName = document.querySelector('#address_text')
+const videoIframe = document.querySelector('#main_video > iframe')
 
 const href = location.href
+const backend = `http://101.101.217.153`
 
 const copyHandler = () => {
     let url = ''
@@ -22,6 +28,17 @@ const copyHandler = () => {
     alert('URL이 복사되었습니다.')
 }
 
+const getRandomVideo = () => {
+    fetch(`${backend}/api/video/random`).then(res => res.json())
+    .then(res => {
+        locationName.textContent = res.video.location
+        videoIframe.src = res.video.videoURL.replace('localhost', '101.101.217.153') + '?autoplay=1&mute=1'
+    })
+}
+
+leftMove.addEventListener('click', getRandomVideo)
+rightMove.addEventListener('click', getRandomVideo)
+
 const naverShareHandler = () => {
     window.open(`https://share.naver.com/web/shareView.nhn?url=${location.href}&title=i'am everywhere`,'_blank');
 }
@@ -52,9 +69,20 @@ const kakaoShareHandler = () => {
 
 const showPopup = () => writePopup.classList.add('on')
 const hidePopup = () => writePopup.classList.remove('on')
-const uploadVideo = () => {
-    document.all.video.click()
-}
+const uploadVideo = () => document.all.video.click()
+
+const locationList = ['Seoul', 'Gyunggido', 'Daejeon', 'Daegu']
+const getRandomLoc = () => locationList[parseInt(Math.random() * 5)]
+uploadFile.addEventListener('input', () => {
+    const formData = new FormData()
+    formData.append('video', document.querySelector('#video').files[0])
+    formData.append('location', getRandomLoc())
+    fetch(`${backend}/api/video`, {
+        method: "POST",
+        headers: {  },
+        body: formData
+      })
+})
 
 shareOpenBtn.addEventListener('click', () => shareOpenBtn.classList.toggle('on'))
 shareBtnList.addEventListener('click', () => shareOpenBtn.classList.remove('on'))
@@ -71,4 +99,6 @@ volumeBtn.addEventListener('click', () => {
 })
 writeBtn.addEventListener('click', showPopup)
 writePopup.querySelector('.close-btn').addEventListener('click', hidePopup)
-fileUploadBtn.addEventListener('click', uploadVideo)
\ No newline at end of file
+fileUploadBtn.addEventListener('click', uploadVideo)
+
+getRandomVideo()
\ No newline at end of file