From 779d44298b320e4084f46eb82d14e39745618ef4 Mon Sep 17 00:00:00 2001
From: Andrei Oltean <andioltean@users.noreply.github.com>
Date: Mon, 25 Oct 2021 16:35:40 +0300
Subject: [PATCH] feat: (video-thumbnail) add permanent video participant name
 to thumbnail (#10242)

* feat: (video-thumbnail) add permanent participant name to video thumbnail

* feat: (video-thumbnail) add permanent participant name to video thumbnail

* # Conflicts:
#	react/features/filmstrip/components/web/Thumbnail.js

* feat: (video-thumbnail) add permanent participant name to video thumbnail fix display

* fix(translation) Reverted changes to translation parameter

Reverted param name change on translation

* feat: (video-thumbnail) add permanent participant name to video thumbnail fix display

* feat: (video-thumbnail) add permanent participant name to video thumbnail fix display

* fix(lang): update German translation (#10188)

Signed-off-by: Christoph Settgast <csett86@web.de>

* Update Virtual Background Model  (#9867)

* update virtual background

* remove comments

* remove general model

* fix(lang): update French translation (#10239)

* feat: (video-thumbnail) add permanent participant name to video thumbnail fix display

* Update Occitan (#10240)

* feat: (video-thumbnail) add permanent participant name to video thumbnail

* feat: (video-thumbnail) add permanent participant name to video thumbnail

* feat: (video-thumbnail) add permanent participant name to video thumbnail fix display

* feat: (video-thumbnail) add permanent participant name to video thumbnail fix display

* feat(reactions) Added metrics for disable reaction sounds

Reordered reactions middleware alphabetically

* feat: (video-thumbnail) add permanent participant name to video thumbnail

* feat: (video-thumbnail) add permanent participant name to video thumbnail

Co-authored-by: robertpin <robert.pin9@gmail.com>
Co-authored-by: csett86 <csett86@web.de>
Co-authored-by: Roshan Pulapura <81193065+rpulapura@users.noreply.github.com>
Co-authored-by: gpatel-fr <44170243+gpatel-fr@users.noreply.github.com>
Co-authored-by: Mejans <61360811+Mejans@users.noreply.github.com>
---
 css/_videolayout_default.scss                 | 23 +++++---------
 .../filmstrip/components/web/Thumbnail.js     | 30 +++++++++----------
 2 files changed, 22 insertions(+), 31 deletions(-)

diff --git a/css/_videolayout_default.scss b/css/_videolayout_default.scss
index 1ce2a2f13..5947afe91 100644
--- a/css/_videolayout_default.scss
+++ b/css/_videolayout_default.scss
@@ -87,7 +87,6 @@
 
     &__toolbar {
         bottom: 0;
-        height: $thumbnailToolbarHeight;
         padding: 0 5px 0 5px;
     }
 
@@ -195,6 +194,13 @@
         background-color: rgba(0,0,0,.4);
         padding: 3px 7px;
         border-radius: 3px;
+        max-width: calc(100% - 32px);
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+        height: 16px;
+        display: inline-block;
+        text-align: right;
     }
 
     @media (min-width: 581px) {
@@ -288,21 +294,8 @@
 #alwaysOnTop .displayname,
 .videocontainer .displayname,
 .videocontainer .editdisplayname {
-    display: inline-block;
-    position: absolute;
-    left: 10%;
-    width: 80%;
-    top: 50%;
-    @include transform(translateY(-40%));
-    color: $participantNameColor;
-    text-align: center;
-    text-overflow: ellipsis;
-    font-size: 12px;
     font-weight: 100;
-    overflow: hidden;
-    white-space: nowrap;
-    line-height: $thumbnailToolbarHeight;
-    z-index: $zindex2;
+    color: $participantNameColor;
 }
 
 #alwaysOnTop .displayname {
diff --git a/react/features/filmstrip/components/web/Thumbnail.js b/react/features/filmstrip/components/web/Thumbnail.js
index 0f75380a3..3c9a21926 100644
--- a/react/features/filmstrip/components/web/Thumbnail.js
+++ b/react/features/filmstrip/components/web/Thumbnail.js
@@ -812,21 +812,20 @@ class Thumbnail extends Component<Props, State> {
                 </span>
                 <div className = 'videocontainer__toolbar'>
                     <StatusIndicators participantID = { id } />
-                    <span className = 'videocontainer__participant-name'>{_participant.name}</span>
+                    <div
+                        className = 'videocontainer__participant-name'
+                        onClick = { onClick }>
+                        <DisplayName
+                            allowEditing = { _allowEditing }
+                            displayNameSuffix = { _defaultLocalDisplayName }
+                            elementID = 'localDisplayName'
+                            participantID = { id } />
+                    </div>
                 </div>
                 <div className = 'videocontainer__toptoolbar'>
                     { this._renderTopIndicators() }
                 </div>
                 <div className = 'videocontainer__hoverOverlay' />
-                <div
-                    className = 'displayNameContainer'
-                    onClick = { onClick }>
-                    <DisplayName
-                        allowEditing = { _allowEditing }
-                        displayNameSuffix = { _defaultLocalDisplayName }
-                        elementID = 'localDisplayName'
-                        participantID = { id } />
-                </div>
                 { this._renderAvatar(styles.avatar) }
                 <span className = 'audioindicator-container'>
                     <AudioLevelIndicator audioLevel = { audioLevel } />
@@ -960,14 +959,13 @@ class Thumbnail extends Component<Props, State> {
                 </div>
                 <div className = 'videocontainer__toolbar'>
                     <StatusIndicators participantID = { id } />
-                    <span className = 'videocontainer__participant-name'>{_participant.name}</span>
+                    <div className = 'videocontainer__participant-name'>
+                        <DisplayName
+                            elementID = { `participant_${id}_name` }
+                            participantID = { id } />
+                    </div>
                 </div>
                 <div className = 'videocontainer__hoverOverlay' />
-                <div className = 'displayNameContainer'>
-                    <DisplayName
-                        elementID = { `participant_${id}_name` }
-                        participantID = { id } />
-                </div>
                 { this._renderAvatar(styles.avatar) }
                 <div className = 'presence-label-container'>
                     <PresenceLabel