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
>
{ 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;