refactor: vera camera

Privoce · Mar 18, 2021 · e1fdd7d · e1fdd7d
1 parent f3c6c5e
commit e1fdd7d
Show file tree

Hide file tree

Showing 7 changed files with 98 additions and 103 deletions.
diff --git a/public/crx/vera/models/Camera.js b/public/crx/vera/models/Camera.js
@@ -1,6 +1,65 @@
 import { localStreamConfig, remoteStreamConfig } from './config.js';
 import { bgRemove, bgRestore, copyToClipboard, selectText } from './utils.js';
+const handleControl = async (control, btn, root) => {
+  let videoEle = btn.parentElement.nextElementSibling;
+  let videoContainer = videoEle.parentElement;
+  let isTrue;
+  let map = {
+    audio: {
+      on: 'AUDIO_ON',
+      off: 'AUDIO_OFF'
+    },
+    video: {
+      on: 'VIDEO_ON',
+      off: 'VIDEO_OFF'
+    }
+  };
+  if (['pin', 'audio', 'video'].includes(control)) {
+    isTrue = videoContainer.getAttribute(control) == 'true';
+    if (isTrue) {
+      videoContainer.removeAttribute(control);
+    } else {
+      videoContainer.setAttribute(control, true);
+    }
+  }
+  if (control == 'pin') {
+    if (document.pictureInPictureElement) {
+      document.exitPictureInPicture();
+    }
+    videoEle.requestPictureInPicture().catch((error) => {
+      // Error handling
+      console.log('pip error', error);
+    });
+  }
+  if (control == 'audio' || control == 'video') {
+    let tracks =
+      control == 'audio'
+        ? videoEle.srcObject.getAudioTracks()
+        : videoEle.srcObject.getVideoTracks();
+    tracks.forEach((t) => {
+      console.log({ t });
+      t.enabled = !t.enabled;
+    });
 
+    if (root.classList.contains('host')) {
+      window.PEER_DATA_CONN?.send({ type: isTrue ? map[control].on : map[control].off });
+    }
+  }
+  if (control == 'bg') {
+    let bgRemoved = videoContainer.getAttribute('bg') == 'true';
+    let bgRemoving = videoContainer.getAttribute('bg-removing') == 'true';
+    if (bgRemoving) return;
+    if (bgRemoved) {
+      videoContainer.removeAttribute('bg');
+      bgRestore(root);
+    } else {
+      videoContainer.setAttribute('bg-removing', true);
+      await bgRemove(root);
+      videoContainer.removeAttribute('bg-removing');
+      videoContainer.setAttribute('bg', true);
+    }
+  }
+};
 class Camera {
   constructor({ host = false, inviteId = null, localId = null }) {
     this.dom = document.createElement('div');
@@ -9,10 +68,10 @@ class Camera {
     <div class='processing'>processing</div>
     <div class='video'>
       <div class='opts'>
-      <button class='opt bg' title='clear background'></button>
-        <button class='opt video' title='video'></button>
-        <button class='opt audio' title='audio'></button>
-        <button class='opt pin' title='pin'></button>
+        <button class='opt bg' control='bg' title='clear background'></button>
+        <button class='opt video' control='video' title='video'></button>
+        <button class='opt audio' control='audio' title='audio'></button>
+        <button class='opt pin' control='pin' title='pin'></button>
       </div>
       <video playsinline autoplay ></video>
       <canvas class='render' width=200 height=200 ></canvas>
@@ -21,8 +80,7 @@ class Camera {
       <div class='mask error'>Camera Error</div>
     </div>
     `;
-    this.initOpts();
-    this.initBgRemoving();
+    this.initControls();
     if (host) {
       this.initHostCamera();
     } else {
@@ -31,90 +89,17 @@ class Camera {
 
     return this.dom;
   }
-  initOpts() {
-    // let pipBtn = this.dom.querySelector('.control.pip');
-    // console.log('init pip click', pipBtn);
-    this.dom.addEventListener(
-      'click',
-      ({ target }) => {
-        console.log('click remote', { target });
-
-        if (target.classList.contains('pin')) {
-          let videoEle = target.parentElement.nextElementSibling;
-          let videoContainer = videoEle.parentElement;
-          let pinned = videoContainer.getAttribute('pin') == 'true';
-          if (pinned) {
-            videoContainer.removeAttribute('pin');
-          } else {
-            videoContainer.setAttribute('pin', true);
-          }
-          if (document.pictureInPictureElement) {
-            document.exitPictureInPicture();
-          }
-          videoEle.requestPictureInPicture().catch((error) => {
-            // Error handling
-            console.log('pip error', error);
-          });
-        }
-        if (target.classList.contains('audio')) {
-          let videoEle = target.parentElement.nextElementSibling;
-          let videoContainer = videoEle.parentElement;
-          let isMuted = videoContainer.getAttribute('muted') == 'true';
-          if (isMuted) {
-            videoContainer.removeAttribute('muted');
-          } else {
-            videoContainer.setAttribute('muted', true);
-          }
-          videoEle.srcObject.getAudioTracks().forEach((t) => {
-            console.log({ t });
-            t.enabled = !t.enabled;
-          });
-          if (this.dom.classList.contains('host')) {
-            window.PEER_DATA_CONN?.send({ type: isMuted ? 'AUDIO_ON' : 'AUDIO_OFF' });
-          }
-        }
-        if (target.classList.contains('video')) {
-          let videoEle = target.parentElement.nextElementSibling;
-          let videoContainer = videoEle.parentElement;
-          let invisible = videoContainer.getAttribute('invisible') == 'true';
-          if (invisible) {
-            videoContainer.removeAttribute('invisible');
-          } else {
-            videoContainer.setAttribute('invisible', true);
-          }
-          videoEle.srcObject.getVideoTracks().forEach((t) => {
-            console.log({ t });
-            t.enabled = !t.enabled;
-          });
-          if (this.dom.classList.contains('host')) {
-            window.PEER_DATA_CONN?.send({ type: invisible ? 'VIDEO_ON' : 'VIDEO_OFF' });
-          }
-        }
-      },
-      true
+  initControls() {
+    let controls = [...this.dom.querySelectorAll('.opts .opt')].map((opt) =>
+      opt.getAttribute('control')
     );
-  }
-  initBgRemoving() {
     this.dom.addEventListener(
       'click',
-      async ({ target }) => {
+      ({ target }) => {
         console.log('click remote', { target });
-
-        if (target.classList.contains('bg')) {
-          let videoEle = target.parentElement.nextElementSibling;
-          let videoContainer = videoEle.parentElement;
-          let bgRemoved = videoContainer.getAttribute('bg-remove') == 'true';
-          let bgRemoving = videoContainer.getAttribute('bg-removing') == 'true';
-          if (bgRemoving) return;
-          if (bgRemoved) {
-            videoContainer.removeAttribute('bg-remove');
-            bgRestore(this.dom);
-          } else {
-            videoContainer.setAttribute('bg-removing', true);
-            await bgRemove(this.dom);
-            videoContainer.removeAttribute('bg-removing');
-            videoContainer.setAttribute('bg-remove', true);
-          }
+        let control = target.getAttribute('control');
+        if (controls.includes(control)) {
+          handleControl(control, target, this.dom);
         }
       },
       true

diff --git a/public/crx/vera/style.css b/public/crx/vera/style.css
@@ -281,10 +281,14 @@ table {
   display: flex;
   margin-top: 10px;
   font-size: 10px;
+  color: #fff;
   flex-direction: column;
   line-height: 1.5;
   color: #ccc;
 }
+#PORTAL_VERA_INVITE .intro .copyright a {
+  color: inherit;
+}
 #PORTAL_VERA_INVITE .cameras {
   overflow: hidden;
 }
@@ -374,13 +378,13 @@ table {
 #PORTAL_VERA_INVITE .cameras .camera .video .opts .opt.pin {
   background-image: url('chrome-extension://__MSG_@@extension_id__/crx/vera/assets/pin.svg');
 }
-#PORTAL_VERA_INVITE .cameras .camera .video[bg-remove='true'] .opts .opt.bg {
+#PORTAL_VERA_INVITE .cameras .camera .video[bg='true'] .opts .opt.bg {
   background-image: url('chrome-extension://__MSG_@@extension_id__/crx/vera/assets/bg.rm.off.svg');
 }
-#PORTAL_VERA_INVITE .cameras .camera .video[invisible='true'] .opts .opt.video {
+#PORTAL_VERA_INVITE .cameras .camera .video[video='true'] .opts .opt.video {
   background-image: url('chrome-extension://__MSG_@@extension_id__/crx/vera/assets/video.off.svg');
 }
-#PORTAL_VERA_INVITE .cameras .camera .video[muted='true'] .opts .opt.audio {
+#PORTAL_VERA_INVITE .cameras .camera .video[audio='true'] .opts .opt.audio {
   background-image: url('chrome-extension://__MSG_@@extension_id__/crx/vera/assets/audio.off.svg');
 }
 #PORTAL_VERA_INVITE .cameras .camera .video[pin='true'] .opts .opt.pin {
@@ -423,7 +427,7 @@ table {
   font-weight: 800;
   color: #ec3636;
 }
-#PORTAL_VERA_INVITE .cameras .camera .video[invisible='true'] .mask.user {
+#PORTAL_VERA_INVITE .cameras .camera .video[video='true'] .mask.user {
   display: block;
 }
 #PORTAL_VERA_INVITE .cameras .camera .invite {

diff --git a/public/crx/vera/style.less b/public/crx/vera/style.less
@@ -3,5 +3,4 @@
 // widget
 @import './style/widget.less';
 // invite panel
-
 @import './style/invite.less';
diff --git a/public/crx/vera/style/camera.css b/public/crx/vera/style/camera.css
@@ -84,13 +84,13 @@
 .camera .video .opts .opt.pin {
   background-image: url('chrome-extension://__MSG_@@extension_id__/crx/vera/assets/pin.svg');
 }
-.camera .video[bg-remove='true'] .opts .opt.bg {
+.camera .video[bg='true'] .opts .opt.bg {
   background-image: url('chrome-extension://__MSG_@@extension_id__/crx/vera/assets/bg.rm.off.svg');
 }
-.camera .video[invisible='true'] .opts .opt.video {
+.camera .video[video='true'] .opts .opt.video {
   background-image: url('chrome-extension://__MSG_@@extension_id__/crx/vera/assets/video.off.svg');
 }
-.camera .video[muted='true'] .opts .opt.audio {
+.camera .video[audio='true'] .opts .opt.audio {
   background-image: url('chrome-extension://__MSG_@@extension_id__/crx/vera/assets/audio.off.svg');
 }
 .camera .video[pin='true'] .opts .opt.pin {
@@ -133,7 +133,7 @@
   font-weight: 800;
   color: #ec3636;
 }
-.camera .video[invisible='true'] .mask.user {
+.camera .video[video='true'] .mask.user {
   display: block;
 }
 .camera .invite {

diff --git a/public/crx/vera/style/camera.less b/public/crx/vera/style/camera.less
@@ -92,13 +92,13 @@
       }
     }
     // 关闭态
-    &[bg-remove='true'] .opts .opt.bg {
+    &[bg='true'] .opts .opt.bg {
       background-image: url('chrome-extension://__MSG_@@extension_id__/crx/vera/assets/bg.rm.off.svg');
     }
-    &[invisible='true'] .opts .opt.video {
+    &[video='true'] .opts .opt.video {
       background-image: url('chrome-extension://__MSG_@@extension_id__/crx/vera/assets/video.off.svg');
     }
-    &[muted='true'] .opts .opt.audio {
+    &[audio='true'] .opts .opt.audio {
       background-image: url('chrome-extension://__MSG_@@extension_id__/crx/vera/assets/audio.off.svg');
     }
     &[pin='true'] .opts .opt.pin {
@@ -142,7 +142,7 @@
         color: #ec3636;
       }
     }
-    &[invisible='true'] .mask.user {
+    &[video='true'] .mask.user {
       display: block;
     }
   }

diff --git a/public/crx/vera/style/invite.css b/public/crx/vera/style/invite.css
@@ -92,10 +92,14 @@
   display: flex;
   margin-top: 10px;
   font-size: 10px;
+  color: #fff;
   flex-direction: column;
   line-height: 1.5;
   color: #ccc;
 }
+#PORTAL_VERA_INVITE .intro .copyright a {
+  color: inherit;
+}
 #PORTAL_VERA_INVITE .cameras {
   overflow: hidden;
 }
@@ -185,13 +189,13 @@
 #PORTAL_VERA_INVITE .cameras .camera .video .opts .opt.pin {
   background-image: url('chrome-extension://__MSG_@@extension_id__/crx/vera/assets/pin.svg');
 }
-#PORTAL_VERA_INVITE .cameras .camera .video[bg-remove='true'] .opts .opt.bg {
+#PORTAL_VERA_INVITE .cameras .camera .video[bg='true'] .opts .opt.bg {
   background-image: url('chrome-extension://__MSG_@@extension_id__/crx/vera/assets/bg.rm.off.svg');
 }
-#PORTAL_VERA_INVITE .cameras .camera .video[invisible='true'] .opts .opt.video {
+#PORTAL_VERA_INVITE .cameras .camera .video[video='true'] .opts .opt.video {
   background-image: url('chrome-extension://__MSG_@@extension_id__/crx/vera/assets/video.off.svg');
 }
-#PORTAL_VERA_INVITE .cameras .camera .video[muted='true'] .opts .opt.audio {
+#PORTAL_VERA_INVITE .cameras .camera .video[audio='true'] .opts .opt.audio {
   background-image: url('chrome-extension://__MSG_@@extension_id__/crx/vera/assets/audio.off.svg');
 }
 #PORTAL_VERA_INVITE .cameras .camera .video[pin='true'] .opts .opt.pin {

diff --git a/public/crx/vera/style/invite.less b/public/crx/vera/style/invite.less
@@ -93,10 +93,13 @@
       display: flex;
       margin-top: 10px;
       font-size: 10px;
-
+      color: #fff;
       flex-direction: column;
       line-height: 1.5;
       color: #ccc;
+      a {
+        color: inherit;
+      }
     }
   }