From 0715f85796150d79b10bf36d7dfe26f42adea0d1 Mon Sep 17 00:00:00 2001
From: robertpin <robert.pin9@gmail.com>
Date: Fri, 22 Oct 2021 16:50:07 +0300
Subject: [PATCH] fix(video-thumbnail) Fixed name for remote participants

Display name on thumbnail for remote participants as well
Updated style
---
 css/_videolayout_default.scss                        | 7 +++++++
 react/features/filmstrip/components/web/Thumbnail.js | 3 ++-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/css/_videolayout_default.scss b/css/_videolayout_default.scss
index c622d123e..1ce2a2f13 100644
--- a/css/_videolayout_default.scss
+++ b/css/_videolayout_default.scss
@@ -190,6 +190,13 @@
         z-index: $zindex2;
     }
 
+    &__participant-name {
+        color: #fff;
+        background-color: rgba(0,0,0,.4);
+        padding: 3px 7px;
+        border-radius: 3px;
+    }
+
     @media (min-width: 581px) {
         &.shift-right {
             &#largeVideoContainer {
diff --git a/react/features/filmstrip/components/web/Thumbnail.js b/react/features/filmstrip/components/web/Thumbnail.js
index db48e6c6d..0f75380a3 100644
--- a/react/features/filmstrip/components/web/Thumbnail.js
+++ b/react/features/filmstrip/components/web/Thumbnail.js
@@ -812,7 +812,7 @@ class Thumbnail extends Component<Props, State> {
                 </span>
                 <div className = 'videocontainer__toolbar'>
                     <StatusIndicators participantID = { id } />
-                    <div>{ _participant.name }</div>
+                    <span className = 'videocontainer__participant-name'>{_participant.name}</span>
                 </div>
                 <div className = 'videocontainer__toptoolbar'>
                     { this._renderTopIndicators() }
@@ -960,6 +960,7 @@ class Thumbnail extends Component<Props, State> {
                 </div>
                 <div className = 'videocontainer__toolbar'>
                     <StatusIndicators participantID = { id } />
+                    <span className = 'videocontainer__participant-name'>{_participant.name}</span>
                 </div>
                 <div className = 'videocontainer__hoverOverlay' />
                 <div className = 'displayNameContainer'>