diff --git a/app/lib/components/HiddenPeers.jsx b/app/lib/components/HiddenPeers.jsx index 0dbdbb9..47c3c57 100644 --- a/app/lib/components/HiddenPeers.jsx +++ b/app/lib/components/HiddenPeers.jsx @@ -38,7 +38,9 @@ class HiddenPeers extends Component >
openUsersTab()}> -

+{lastNLength}
participant(s)

+

+{lastNLength}
participant + {(lastNLength === 1) ? null : 's'} +

diff --git a/app/lib/components/ParticipantList/ListPeer.jsx b/app/lib/components/ParticipantList/ListPeer.jsx index fec2269..82e252c 100644 --- a/app/lib/components/ParticipantList/ListPeer.jsx +++ b/app/lib/components/ParticipantList/ListPeer.jsx @@ -10,12 +10,9 @@ const ListPeer = (props) => const { peer, micConsumer, - webcamConsumer, screenConsumer, onMuteMic, onUnmuteMic, - onDisableWebcam, - onEnableWebcam, onDisableScreen, onEnableScreen } = props; @@ -26,12 +23,6 @@ const ListPeer = (props) => !micConsumer.remotelyPaused ); - const videoVisible = ( - Boolean(webcamConsumer) && - !webcamConsumer.locallyPaused && - !webcamConsumer.remotelyPaused - ); - const screenVisible = ( Boolean(screenConsumer) && !screenConsumer.locallyPaused && @@ -61,6 +52,9 @@ const ListPeer = (props) => :null } +
+
+
{ screenConsumer ?
off : !micEnabled, disabled : peer.peerAudioInProgress })} - style={{ opacity : micEnabled && micConsumer ? (micConsumer.volume/10) - + 0.2 :1 }} onClick={(e) => { e.stopPropagation(); micEnabled ? onMuteMic(peer.name) : onUnmuteMic(peer.name); }} /> - -
- { - e.stopPropagation(); - videoVisible ? - onDisableWebcam(peer.name) : onEnableWebcam(peer.name); - }} - />
); diff --git a/app/stylus/components/ParticipantList.styl b/app/stylus/components/ParticipantList.styl index becb317..b1218cd 100644 --- a/app/stylus/components/ParticipantList.styl +++ b/app/stylus/components/ParticipantList.styl @@ -26,7 +26,6 @@ [data-component='ListPeer'] { display: flex; - align-items: center; > .indicators { left: 0; @@ -76,6 +75,41 @@ } } } + > .volume-container { + float: right; + display: flex; + flex-direction: row; + justify-content: flex-start; + width: 1vmin; + position: relative; + background-size: 75%; + + > .bar { + flex: 0 0 auto; + margin: 0.3rem; + background-size: 75%; + background-repeat: no-repeat; + cursor: pointer; + transition-property: opacity, background-color; + width: 3px; + border-radius: 6px; + transition-duration: 0.25s; + position: absolute; + bottom: 0px; + + &.level0 { height: 0; background-color: rgba(#000, 0.8); } + &.level1 { height: 0.2vh; background-color: rgba(#000, 0.8); } + &.level2 { height: 0.4vh; background-color: rgba(#000, 0.8); } + &.level3 { height: 0.6vh; background-color: rgba(#000, 0.8); } + &.level4 { height: 0.8vh; background-color: rgba(#000, 0.8); } + &.level5 { height: 1.0vh; background-color: rgba(#000, 0.8); } + &.level6 { height: 1.2vh; background-color: rgba(#000, 0.8); } + &.level7 { height: 1.4vh; background-color: rgba(#000, 0.8); } + &.level8 { height: 1.6vh; background-color: rgba(#000, 0.8); } + &.level9 { height: 1.8vh; background-color: rgba(#000, 0.8); } + &.level10 { height: 2.0vh; background-color: rgba(#000, 0.8); } + } + } > .controls { float: right; display: flex;