From 31b7b5aa0854108efe141c8a5088a76dbfe64eb8 Mon Sep 17 00:00:00 2001
From: Gregoire Parant <g.parant@thecodingmachine.com>
Date: Fri, 28 Jan 2022 19:17:40 +0100
Subject: [PATCH] Add name on screen sharing

Signed-off-by: Gregoire Parant <g.parant@thecodingmachine.com>
---
 .../Components/Video/ScreenSharingMediaBox.svelte    | 12 +++++++++---
 front/src/Components/Video/VideoMediaBox.svelte      |  2 +-
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/front/src/Components/Video/ScreenSharingMediaBox.svelte b/front/src/Components/Video/ScreenSharingMediaBox.svelte
index 022770bb..9b27bc8d 100644
--- a/front/src/Components/Video/ScreenSharingMediaBox.svelte
+++ b/front/src/Components/Video/ScreenSharingMediaBox.svelte
@@ -30,10 +30,11 @@
     {#if $statusStore === "error"}
         <div class="rtc-error" />
     {/if}
-    {#if $streamStore === null}
-        <i style="background-color: {getColorByString(name)};">{name}</i>
-    {:else}
+    {#if $streamStore !== null}
         <!-- svelte-ignore a11y-media-has-caption -->
+        <i class="container">
+            <span style="background-color: {getColorByString(name)};">{name}</span>
+        </i>
         <video
             use:srcObject={$streamStore}
             autoplay
@@ -48,5 +49,10 @@
         video {
             width: 100%;
         }
+        i {
+            span {
+                padding: 2px 32px;
+            }
+        }
     }
 </style>
diff --git a/front/src/Components/Video/VideoMediaBox.svelte b/front/src/Components/Video/VideoMediaBox.svelte
index 3359bc19..71d4404b 100644
--- a/front/src/Components/Video/VideoMediaBox.svelte
+++ b/front/src/Components/Video/VideoMediaBox.svelte
@@ -59,7 +59,7 @@
     {/if}
     <!-- {#if !$constraintStore || $constraintStore.video === false} -->
     <i class="container">
-        <span style="background-color: {getColorByString(name)};">{peer.userName}</span>
+        <span style="background-color: {getColorByString(name)};">{name}</span>
     </i>
     <div class="woka-icon {($constraintStore && $constraintStore.video !== false) || minimized ? '' : 'no-video'}">
         <Woka userId={peer.userId} placeholderSrc={""} />