diff --git a/app/lib/RoomClient.js b/app/lib/RoomClient.js index bed1425..7ac80e3 100644 --- a/app/lib/RoomClient.js +++ b/app/lib/RoomClient.js @@ -178,11 +178,11 @@ export default class RoomClient }); } - changeProfilePicture(picture) + changeProfilePicture(picture) { logger.debug('changeProfilePicture() [picture: "%s"]', picture); - this._protoo.send('change-profile-picture', { picture }).catch((error) => + this._protoo.send('change-profile-picture', { picture }).catch((error) => { logger.error('shareProfilePicure() | failed: %o', error); }); @@ -913,11 +913,6 @@ export default class RoomClient { this._dispatch( stateActions.setMyRaiseHandState(state)); - - this._dispatch(requestActions.notify( - { - text : 'raiseHand state changed' - })); this._dispatch( stateActions.setMyRaiseHandStateInProgress(false)); }) @@ -1806,10 +1801,11 @@ export default class RoomClient this._dispatch(stateActions.addPeer( { - name : peer.name, - displayName : displayName, - device : peer.appData.device, - consumers : [] + name : peer.name, + displayName : displayName, + device : peer.appData.device, + raiseHandState : peer.appData.raiseHandState, + consumers : [] })); if (notify) diff --git a/app/lib/components/ParticipantList/ListPeer.jsx b/app/lib/components/ParticipantList/ListPeer.jsx index 8308f79..fec2269 100644 --- a/app/lib/components/ParticipantList/ListPeer.jsx +++ b/app/lib/components/ParticipantList/ListPeer.jsx @@ -47,6 +47,20 @@ const ListPeer = (props) =>
{peer.displayName}
+
+ {peer.raiseHandState ? +
+ :null + } +
{ screenConsumer ?
.indicators { + left: 0; + top: 0; + display: flex; + flex-direction:; row; + justify-content: flex-start; + align-items: center; + padding: 0.4vmin; + transition: opacity 0.3s; + > .icon { + flex: 0 0 auto; + margin: 0.2vmin; + border-radius: 2px; + background-position: center; + background-size: 75%; + background-repeat: no-repeat; + background-color: rgba(#000, 0.5); + transition-property: opacity, background-color; + transition-duration: 0.15s; + + +desktop() { + width: 24px; + height: 24px; + opacity: 0.85; + + &:hover { + opacity: 1; + } + } + + +mobile() { + width: 22px; + height: 22px; + } + + &.on { + opacity: 1; + } + + &.off { + opacity: 0.2; + } + + &.raise-hand { + background-image: url('/resources/images/icon-hand-white.svg'); + } + } + } > .controls { float: right; display: flex; @@ -124,4 +172,4 @@ flex-grow: 1; align-items: center; } -} \ No newline at end of file +} diff --git a/app/stylus/components/Peer.styl b/app/stylus/components/Peer.styl index fcff116..8afedd3 100644 --- a/app/stylus/components/Peer.styl +++ b/app/stylus/components/Peer.styl @@ -34,7 +34,6 @@ } > .indicators { position: absolute; - z-index: 200; left: 0; top: 0; display: flex; @@ -43,6 +42,7 @@ align-items: center; padding: 0.4vmin; transition: opacity 0.3s; + z-index: 10; > .icon { flex: 0 0 auto; @@ -52,7 +52,6 @@ background-size: 75%; background-repeat: no-repeat; background-color: rgba(#000, 0.5); - cursor: pointer; transition-property: opacity, background-color; transition-duration: 0.15s; diff --git a/server/lib/Room.js b/server/lib/Room.js index 096f055..9b312fe 100644 --- a/server/lib/Room.js +++ b/server/lib/Room.js @@ -279,7 +279,7 @@ class Room extends EventEmitter const { raiseHandState } = request.data; const { mediaPeer } = protooPeer.data; - mediaPeer.appData.raiseHand = request.data.raiseHandState; + mediaPeer.appData.raiseHandState = request.data.raiseHandState; // Spread to others via protoo. this._protooRoom.spread( 'raisehand-message',