Merge branch 'v2.0.x-release' of...

Merge branch 'v2.0.x-release' of https://github.com/bigbluebutton/bigbluebutton into 5909-toggle-screenshare-icon

bigbluebutton-html5/imports/ui/components/user-avatar/component.jsx

@@ -38,27 +38,34 @@ const UserAvatar = ({
   voice,
   className,
 }) => (
-  <div
-    aria-hidden="true"
-    data-test="userAvatar"
-    className={cx(styles.avatar, {
-      [styles.moderator]: moderator,
-      [styles.presenter]: presenter,
-      [styles.muted]: muted,
-      [styles.listenOnly]: listenOnly,
-      [styles.talking]: (talking && !muted),
-      [styles.voice]: voice,
-    }, className)}
-    style={{
-      backgroundColor: color,
-      color, // We need the same color on both for the border
-    }}
-  >
-    <div className={styles.content}>
-      {children}
+
+    <div
+      aria-hidden="true"
+      data-test="userAvatar"
+      className={cx(styles.avatar, {
+        [styles.moderator]: moderator,
+        [styles.presenter]: presenter,
+        [styles.muted]: muted,
+        [styles.listenOnly]: listenOnly,
+        [styles.voice]: voice,
+      }, className)}
+      style={{
+        backgroundColor: color,
+        color, // We need the same color on both for the border
+      }}
+    >
+
+      <div className={cx({
+        [styles.talking]: (talking && !muted),
+      })}
+      />
+
+
+      <div className={styles.content}>
+        {children}
+      </div>
     </div>
-  </div>
-);
+  );
 
 UserAvatar.propTypes = propTypes;
 UserAvatar.defaultProps = defaultProps;

bigbluebutton-html5/imports/ui/components/user-avatar/styles.scss

@@ -46,22 +46,30 @@ $user-color: currentColor; //picks the current color reference in the class
     text-align: center;
     vertical-align: middle;
     letter-spacing: -.65rem;
+    z-index: 1;
   }
 }
 
 .talking {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: $user-color;
+  border-radius: inherit;
   animation: pulse 1s infinite ease-in;
 }
 
+
 @keyframes pulse {
   0% {
-    box-shadow: 0 0 0 0 $user-color;
-  }
-  70% {
-    box-shadow: 0 0 0 0.5625rem transparent;
+    opacity: 1;
+    transform: scale(1);
   }
   100% {
-    box-shadow: 0 0 0 0 transparent;
+    opacity: 0;
+    transform: scale(1.5);
   }
 }
 
@@ -92,6 +100,7 @@ $user-color: currentColor; //picks the current color reference in the class
   }
 }
 
+
 .listenOnly {
   &:after {
     content: "\00a0\e90c\00a0";