From 5efa17651c47ccca015b1e5277919aeeb782bdeb Mon Sep 17 00:00:00 2001
From: Hanusiak Piotr <piotr@ltmp.co>
Date: Tue, 7 Dec 2021 16:07:58 +0100
Subject: [PATCH] show woka-icon with camera on

---
 .../src/Components/Video/VideoMediaBox.svelte | 24 +++++++++++++------
 front/style/style.scss                        |  2 +-
 2 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/front/src/Components/Video/VideoMediaBox.svelte b/front/src/Components/Video/VideoMediaBox.svelte
index 4498d047..aec1b0ce 100644
--- a/front/src/Components/Video/VideoMediaBox.svelte
+++ b/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 {
diff --git a/front/style/style.scss b/front/style/style.scss
index 254d0513..89437a99 100644
--- a/front/style/style.scss
+++ b/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;
     }