show woka-icon with camera on

front/src/Components/Video/VideoMediaBox.svelte

@@ -28,11 +28,15 @@
     {#if $statusStore === "error"}
         <div class="rtc-error" />
     {/if}
-    {#if !$constraintStore || $constraintStore.video === false}
-        <i class="container" style="background-color: {getColorByString(name)};">
-            <div class="woka-icon"><Woka userId={peer.userId} placeholderSrc={""} /></div>
-        </i>
-    {/if}
+    <!-- {#if !$constraintStore || $constraintStore.video === false} -->
+    <i
+        class="container {!$constraintStore || $constraintStore.video === false ? '' : 'minimized'}"
+        style="background-color: {getColorByString(name)};"
+    >
+        <span>{peer.userName}</span>
+        <div class="woka-icon"><Woka userId={peer.userId} placeholderSrc={""} /></div>
+    </i>
+    <!-- {/if} -->
     {#if $constraintStore && $constraintStore.audio === false}
         <img src={microphoneCloseImg} class="active" alt="Muted" />
     {/if}
@@ -51,8 +55,14 @@
 <style>
     .container {
         display: flex;
-        justify-content: center;
-        align-items: center;
+        flex-direction: column;
+        padding-top: 15px;
+    }
+
+    .minimized {
+        left: auto;
+        transform: scale(0.5);
+        opacity: 0.5;
     }
 
     .woka-icon {

front/style/style.scss

@@ -62,7 +62,7 @@ body .message-info.warning{
         background-color: black;
         border-radius: 50%;
         text-align: center;
-        font-size: 28px;
+        font-size: 14px;
         color: white;
         overflow: hidden;
     }