feat: 파일전송, 연결 상태처리

Author: codejs-kr

frontend/contents/css/style.css

@@ -133,10 +133,10 @@ button:hover {
   background-color: #cf402f;
 }
 button[disabled] {
-  color: #ccc;
+  background-color: #c4918b;
 }
 button[disabled]:hover {
-  background-color: #d84a38;
+  cursor: default;
 }
 video {
   margin: 0 0 20px 0;

frontend/views/examples/data-channel/css/main.css

@@ -6,14 +6,6 @@
  *
  */
 
-input[type='text'] {
-  padding: 6px 10px;
-  width: 120px;
-  height: 30px;
-  border: solid 1px #bbb;
-  font-size: 1.3em;
-}
-
 .wrap {
   margin-top: 30px;
   position: relative;
@@ -22,7 +14,7 @@ input[type='text'] {
 }
 
 .wrap p {
-  font-size: 1.25em;
+  font-size: 20px;
 }
 
 .wrap button {
@@ -31,92 +23,25 @@ input[type='text'] {
   vertical-align: top;
 }
 
-.room-info {
-  vertical-align: top;
-}
-
-/********************************************
-  Below room style
-*********************************************/
-video {
-  margin: 0 0 20px 0;
-  width: 100%;
-  z-index: 1;
-  background: #222;
-  border: solid 1px #fff;
-  transition: all 0.6s ease-out;
-}
-
-video.effect {
-  transform: scale(1, 1);
-}
-
-.room-component {
-  display: none;
-}
-
-#video-wrap {
-  position: relative;
-  margin: 0 auto;
-  min-height: 620px;
-}
-
-#video-wrap .buttons {
-  position: absolute;
-  bottom: 0;
-}
-
 #file-wrap {
   margin: 10px 0;
   padding: 30px 0;
   text-align: left;
 }
 
-#local {
-  position: absolute;
-  top: 4%;
-  right: 2%;
-  width: 340px;
-  height: 220px;
-  border: solid 1px #fff;
-}
-
-#local-video {
-  position: absolute;
-  top: 0;
-  left: 0;
-}
-
-#share-wrap {
-  display: none;
-  margin: 10px 0;
-}
-
-.room #enter-wrap,
-.connected #create-wrap,
-.connected #wait-wrap {
-  display: none;
-}
-.connected #local-video {
-  top: 2px;
-  left: 2px !important;
-  width: 150px !important;
-  border: solid 1px #fff;
-  z-index: 2;
+#file-wrap progress {
+  width: 100%;
 }
 
-.room #share-wrap {
-  display: block;
+#connection-status i {
+  font-size: 60px;
 }
 
-.room #wait-wrap {
+#connection-status .people-two,
+.connected #connection-status .people-one {
   display: none;
 }
 
-.room .room-component {
+.connected #connection-status .people-two {
   display: block;
 }
-
-.room #content {
-  padding-top: 30px;
-}

frontend/views/examples/data-channel/index.ejs

@@ -3,14 +3,21 @@
 
   <div id="content">
     <div class="wrap">
-      <section id="share-wrap">
-        <a href="#" id="unique-token">Share this room link</a>
+      <section id="connection-status">
+        <div class="people-one">
+          <i class="fas fa-child"></i>
+          <p>혼자예요</p>
+        </div>
+        <div class="people-two">
+          <i class="fas fa-people-arrows"></i>
+          <p>둘이예요</p>
+        </div>
       </section>
 
       <section id="file-wrap">
         <div class="buttons">
           <input type="file" id="file" /><br />
-          <button id="btn-send">Send</button>
+          <button id="btn-send" disabled>Send</button>
         </div>
 
         <div class="progress">

frontend/views/examples/data-channel/js/main.js

@@ -48,21 +48,8 @@ function handleFileInputChange() {
 function onDetectUser() {
   console.log('onDetectUser');
 
-  // TODO: 연결 UI 처리
-
-  // $waitWrap.innerHTML = `
-  //   <div class="room-info">
-  //     <p>당신을 기다리고 있어요. 참여 하실래요?</p>
-  //     <button id="btn-join">Join</button>
-  //   </div>
-  // `;
-
-  // document.querySelector('#btn-join').addEventListener('click', (e) => {
-  //   e.target.disabled = true;
-  //   isOffer = true;
-  //   getUserMedia();
-  // });
-  // $createWrap.classList.add('slideup');
+  $btnSend.disabled = false;
+  $body.classList.add('connected');
 }
 
 /**
@@ -91,10 +78,9 @@ function onLeave(userId) {
   console.log('onLeave', arguments);
 
   if (remoteUserId === userId) {
-    document.querySelector('#remote-video').remove();
-    $body.classList.remove('connected');
-    $body.classList.add('wait');
     remoteUserId = null;
+    $body.classList.remove('connected');
+    $btnSend.disabled = true;
   }
 }
 
@@ -134,45 +120,14 @@ function send(data) {
 function setRoomToken() {
   const hashValue = (Math.random() * new Date().getTime()).toString(32).toUpperCase().replace(/\./g, '-');
 
-  if (location.hash.length > 2) {
-    $uniqueToken.href = location.href;
-  } else {
+  if (location.hash.length < 2) {
     location.hash = '#' + hashValue;
   }
 }
-
-/**
- * 클립보드 복사
- */
-function setClipboard() {
-  $uniqueToken.addEventListener('click', () => {
-    const link = location.href;
-
-    if (window.clipboardData) {
-      window.clipboardData.setData('text', link);
-      alert('Copy to Clipboard successful.');
-    } else {
-      window.prompt('Copy to clipboard: Ctrl+C, Enter', link); // Copy to clipboard: Ctrl+C, Enter
-    }
-  });
-}
-
 /**
  * DOM 이벤트 바인딩
  */
 function bindDomEvent() {
-  // document.querySelector('#btn-start').addEventListener('click', getUserMedia);
-  // document.querySelector('#btn-camera')?.addEventListener('click', (e) => {
-  //   const $this = e.target;
-  //   $this.classList.toggle('active');
-  //   mediaHandler[$this.className === 'active' ? 'pauseVideo' : 'resumeVideo']();
-  // });
-  // document.querySelector('#btn-mic')?.addEventListener('click', (e) => {
-  //   const $this = e.target;
-  //   $this.classList.toggle('active');
-  //   mediaHandler[$this.className === 'active' ? 'muteAudio' : 'unmuteAudio']();
-  // });
-
   $btnSend.addEventListener('click', () => {
     peerHandler.sendData($fileInput.files[0]);
   });
@@ -183,7 +138,6 @@ function bindDomEvent() {
  */
 function initialize() {
   setRoomToken();
-  setClipboard();
   roomId = location.href.replace(/\/|:|#|%|\.|\[|\]/g, '');
   userId = Math.round(Math.random() * 99999);