[#9] 파일 업로드, 파일 랜덤 재생 구현

이제 자러가자~~
boostcampwm-2021 · Sep 23, 2021 · 90a9de3 · 90a9de3
1 parent 42b7e80
commit 90a9de3
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 6 deletions.
diff --git 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
diff --git 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
@@ -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)
+fileUploadBtn.addEventListener('click', uploadVideo)
+
+getRandomVideo()