From b80b8cc1b56c0862c94516cf5514f346ffdb8916 Mon Sep 17 00:00:00 2001
From: Jon <jon@daily.co>
Date: Wed, 16 Jun 2021 11:59:46 +0100
Subject: [PATCH] added active speaker border. Fixed tile avatar glitch

---
 dailyjs/basic-call/components/Audio/Audio.js | 6 +++---
 dailyjs/shared/components/Tile/Tile.js       | 6 ++++++
 dailyjs/shared/components/Tile/avatar.svg    | 7 +------
 3 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/dailyjs/basic-call/components/Audio/Audio.js b/dailyjs/basic-call/components/Audio/Audio.js
index 788737d..3e5b7f1 100644
--- a/dailyjs/basic-call/components/Audio/Audio.js
+++ b/dailyjs/basic-call/components/Audio/Audio.js
@@ -10,15 +10,15 @@ const AudioItem = React.memo(({ participant }) => {
   useEffect(() => {
     if (!audioTrack || !audioRef.current) return;
 
-    // sanity check to make sure this is an audio track
-    if (audioTrack && audioTrack !== 'audio') return;
+    // quick sanity to check to make sure this is an audio track...
+    if (audioTrack.kind !== 'audio') return;
 
     audioRef.current.srcObject = new MediaStream([audioTrack]);
   }, [audioTrack]);
 
   return (
     <>
-      <audio autoPlay playsInline ref={audioRef}>
+      <audio autoPlay playsInline ref={audioRef} id={participant.name}>
         <track kind="captions" />
       </audio>
     </>
diff --git a/dailyjs/shared/components/Tile/Tile.js b/dailyjs/shared/components/Tile/Tile.js
index a3ee850..53afe11 100644
--- a/dailyjs/shared/components/Tile/Tile.js
+++ b/dailyjs/shared/components/Tile/Tile.js
@@ -22,6 +22,7 @@ export const Tile = React.memo(
     const cx = classNames('tile', {
       mirrored,
       avatar: showAvatar && !videoTrack,
+      active: participant.isActiveSpeaker,
     });
 
     return (
@@ -60,6 +61,11 @@ export const Tile = React.memo(
             min-width: 1px;
             position: relative;
             width: 100%;
+            box-sizing: border-box;
+          }
+
+          .tile.active {
+            border: 2px solid var(--primary-default);
           }
 
           .tile.mirrored :global(video) {
diff --git a/dailyjs/shared/components/Tile/avatar.svg b/dailyjs/shared/components/Tile/avatar.svg
index 7867c23..da7b868 100644
--- a/dailyjs/shared/components/Tile/avatar.svg
+++ b/dailyjs/shared/components/Tile/avatar.svg
@@ -1,12 +1,7 @@
 <svg width="100%" viewBox="0 0 87 87" fill="none" xmlns="http://www.w3.org/2000/svg">
 <circle cx="43.75" cy="43.5" r="43" fill="#1F2D3D"/>
-<g clip-path="url(#clip0)">
+<g>
 <path d="M43.75 59.5C39.5188 59.6114 35.3061 58.9031 31.344 57.414C31.1672 57.3354 31.0169 57.2073 30.9115 57.0451C30.8061 56.8828 30.75 56.6935 30.75 56.5C30.7529 53.8487 31.8074 51.3069 33.6821 49.4321C35.5569 47.5574 38.0987 46.5029 40.75 46.5H46.75C49.4013 46.5029 51.9431 47.5574 53.8179 49.4321C55.6926 51.3069 56.7471 53.8487 56.75 56.5C56.75 56.6935 56.6939 56.8828 56.5885 57.0451C56.4831 57.2073 56.3328 57.3354 56.156 57.414C52.1939 58.9031 47.9812 59.6114 43.75 59.5Z" fill="#7B848F"/>
 <path d="M43.75 44.5C39.171 44.5 35.75 39.749 35.75 35.5C35.75 33.3783 36.5929 31.3434 38.0931 29.8431C39.5934 28.3429 41.6283 27.5 43.75 27.5C45.8717 27.5 47.9066 28.3429 49.4069 29.8431C50.9071 31.3434 51.75 33.3783 51.75 35.5C51.75 39.749 48.329 44.5 43.75 44.5Z" fill="#7B848F"/>
 </g>
-<defs>
-<clipPath id="clip0">
-<rect width="32" height="32" fill="white" transform="translate(27.75 27.5)"/>
-</clipPath>
-</defs>
 </svg>