diff --git a/css/_base.scss b/css/_base.scss index 439451302..be6bfc068 100644 --- a/css/_base.scss +++ b/css/_base.scss @@ -85,11 +85,6 @@ form { background-color: #00ccff; } -.glow -{ - text-shadow: 0px 0px 30px #06a5df, 0px 0px 10px #06a5df, 0px 0px 5px #06a5df,0px 0px 3px #06a5df; -} - .watermark { display: block; position: absolute; diff --git a/css/_toolbars.scss b/css/_toolbars.scss index a30f622ae..d235d78b5 100644 --- a/css/_toolbars.scss +++ b/css/_toolbars.scss @@ -110,6 +110,11 @@ cursor: default; } +.button.glow +{ + text-shadow: 0px 0px 5px $toolbarToggleBackground; +} + a.button.unclickable:hover, a.button.unclickable:active, a.button.unclickable.selected{ diff --git a/css/_variables.scss b/css/_variables.scss index b471f9a02..e25d93796 100644 --- a/css/_variables.scss +++ b/css/_variables.scss @@ -30,6 +30,7 @@ $toolbarSelectBackground: rgba(0, 0, 0, .6); $toolbarBadgeBackground: #165ECC; $toolbarBadgeColor: #FFFFFF; +$toolbarToggleBackground: #165ECC; // Main controls $inputBackground: rgba(132, 132, 132, .5); @@ -39,7 +40,7 @@ $inputBorderColor: #EBEBEB; $buttonBackground: #44A5FF; // Video layout. -$videoThumbnailHovered: #44A5FF; +$videoThumbnailHovered: #BFEBFF; $videoThumbnailSelected: #165ECC; $participantNameColor: #fff; $thumbnailPictogramColor: #fff; diff --git a/css/_videolayout_default.scss b/css/_videolayout_default.scss index e53a4b55f..9a276de2c 100644 --- a/css/_videolayout_default.scss +++ b/css/_videolayout_default.scss @@ -25,7 +25,7 @@ left: 0; right: 0; width:auto; - border:1px solid transparent; + border: 2px solid transparent; z-index: 5; transition: bottom 2s; overflow: visible !important; @@ -48,7 +48,6 @@ background-size: contain; border-radius:1px; margin: 0 $thumbnailVideoMargin; - border: 1px solid $defaultDarkColor; } /** @@ -67,22 +66,35 @@ padding: 0 5px 0 5px; } +#remoteVideos .videocontainer.videoContainerFocused, +#remoteVideos .videocontainer:hover { + cursor: hand; + margin-right: $thumbnailVideoMargin - 2; + margin-left: $thumbnailVideoMargin - 2; + margin-top: -2px; +} /** * Focused video thumbnail. */ #remoteVideos .videocontainer.videoContainerFocused { - cursor: hand; transition-duration: 0.5s; -webkit-transition-duration: 0.5s; -webkit-animation-name: greyPulse; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: 1; - border: 1px solid $videoThumbnailSelected; + border: 2px solid $videoThumbnailSelected !important; + box-shadow: inset 0 0 3px $videoThumbnailSelected, + 0 0 3px $videoThumbnailSelected !important; } -#remoteVideos .videocontainer:hover, -#remoteVideos .videocontainer.videoContainerFocused:hover { - border: 1px solid $videoThumbnailHovered; +/** + * Hovered video thumbnail. + */ +#remoteVideos .videocontainer:hover { + cursor: hand; + border: 2px solid $videoThumbnailHovered; + box-shadow: inset 0 0 3px $videoThumbnailHovered, + 0 0 3px $videoThumbnailHovered; } #localVideoWrapper { diff --git a/modules/UI/audio_levels/AudioLevels.js b/modules/UI/audio_levels/AudioLevels.js index dc188c48c..258168909 100644 --- a/modules/UI/audio_levels/AudioLevels.js +++ b/modules/UI/audio_levels/AudioLevels.js @@ -147,17 +147,13 @@ const AudioLevels = { * Updates the audio level canvas for the given id. If the canvas * didn't exist we create it. */ - createAudioLevelCanvas (id, thumbWidth, thumbHeight) { - - let videoSpanId = (id === "local") - ? "localVideoContainer" - : `participant_${id}`; + createAudioLevelCanvas (videoSpanId, thumbWidth, thumbHeight) { let videoSpan = document.getElementById(videoSpanId); if (!videoSpan) { - if (id) { - console.error("No video element for id", id); + if (videoSpanId) { + console.error("No video element for id", videoSpanId); } else { console.error("No video element for local video."); } @@ -245,27 +241,18 @@ const AudioLevels = { }, updateCanvasSize (localVideo, remoteVideo) { - let localCanvasWidth - = localVideo.thumbWidth + interfaceConfig.CANVAS_EXTRA; - let localCanvasHeight - = localVideo.thumbHeight + interfaceConfig.CANVAS_EXTRA; - let remoteCanvasWidth - = remoteVideo.thumbWidth + interfaceConfig.CANVAS_EXTRA; - let remoteCanvasHeight - = remoteVideo.thumbHeight + interfaceConfig.CANVAS_EXTRA; - let { remoteThumbs, localThumb } = FilmStrip.getThumbs(); - remoteThumbs.children('canvas').each(function () { - $(this).attr('width', remoteCanvasWidth); - $(this).attr('height', remoteCanvasHeight); + remoteThumbs.each(( index, element ) => { + this.createAudioLevelCanvas(element.id, + remoteVideo.thumbWidth, + remoteVideo.thumbHeight); }); - if(localThumb) { - localThumb.children('canvas').each(function () { - $(this).attr('width', localCanvasWidth); - $(this).attr('height', localCanvasHeight); - }); + if (localThumb) { + this.createAudioLevelCanvas(localThumb.get(0).id, + localVideo.thumbWidth, + localVideo.thumbHeight); } } }; diff --git a/modules/UI/videolayout/RemoteVideo.js b/modules/UI/videolayout/RemoteVideo.js index 6d577765a..52a769c15 100644 --- a/modules/UI/videolayout/RemoteVideo.js +++ b/modules/UI/videolayout/RemoteVideo.js @@ -33,9 +33,10 @@ RemoteVideo.prototype.addRemoteVideoContainer = function() { this.addRemoteVideoMenu(); } - let { remoteVideo } = this.VideoLayout.resizeThumbnails(); + let { remoteVideo } = this.VideoLayout.resizeThumbnails(false, true); let { thumbHeight, thumbWidth } = remoteVideo; - AudioLevels.createAudioLevelCanvas(this.id, thumbWidth, thumbHeight); + AudioLevels.createAudioLevelCanvas( + this.videoSpanId, thumbWidth, thumbHeight); return this.container; }; diff --git a/modules/UI/videolayout/VideoLayout.js b/modules/UI/videolayout/VideoLayout.js index 0b3b68375..2ed4175e6 100644 --- a/modules/UI/videolayout/VideoLayout.js +++ b/modules/UI/videolayout/VideoLayout.js @@ -109,7 +109,9 @@ var VideoLayout = { // the local video thumb maybe one pixel let { localVideo } = this.resizeThumbnails(false, true); AudioLevels.createAudioLevelCanvas( - "local", localVideo.thumbWidth, localVideo.thumbHeight); + "localVideoContainer", + localVideo.thumbWidth, + localVideo.thumbHeight); emitter.addListener(UIEvents.CONTACT_CLICKED, onContactClicked); this.lastNCount = config.channelLastN;