From e1fdd7da9c9411f424d8fdf339a28a9785098e04 Mon Sep 17 00:00:00 2001 From: Tristan Date: Thu, 18 Mar 2021 23:43:12 +0800 Subject: [PATCH] refactor: vera camera --- public/crx/vera/models/Camera.js | 157 ++++++++++++++---------------- public/crx/vera/style.css | 12 ++- public/crx/vera/style.less | 1 - public/crx/vera/style/camera.css | 8 +- public/crx/vera/style/camera.less | 8 +- public/crx/vera/style/invite.css | 10 +- public/crx/vera/style/invite.less | 5 +- 7 files changed, 98 insertions(+), 103 deletions(-) diff --git a/public/crx/vera/models/Camera.js b/public/crx/vera/models/Camera.js index e676d1e..c860435 100644 --- 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 {
processing
- - - - + + + +
@@ -21,8 +80,7 @@ class Camera {
Camera Error
`; - 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 index e03ae57..198cc9c 100644 --- 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 index 470f335..6fc0bc9 100644 --- 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 index cfddde2..a216ec1 100644 --- 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 index b5129e7..52e0eff 100644 --- 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 index 2bbe547..5654f86 100644 --- 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 index 5b1765a..4c022f9 100644 --- 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; + } } }