Merge branch 'develop' of github.com:thecodingmachine/workadventure

front/src/Components/Video/VideoMediaBox.svelte

@@ -8,6 +8,8 @@
     import { showReportScreenStore } from "../../Stores/ShowReportScreenStore";
     import { getColorByString, srcObject } from "./utils";
 
+    import Woka from "../Woka/Woka.svelte";
+
     export let peer: VideoPeer;
     let streamStore = peer.streamStore;
     let name = peer.userName;
@@ -26,9 +28,15 @@
     {#if $statusStore === "error"}
         <div class="rtc-error" />
     {/if}
-    {#if !$constraintStore || $constraintStore.video === false}
-        <i style="background-color: {getColorByString(name)};">{name}</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}
@@ -43,3 +51,21 @@
         <SoundMeterWidget stream={$streamStore} />
     {/if}
 </div>
+
+<style>
+    .container {
+        display: flex;
+        flex-direction: column;
+        padding-top: 15px;
+    }
+
+    .minimized {
+        left: auto;
+        transform: scale(0.5);
+        opacity: 0.5;
+    }
+
+    .woka-icon {
+        margin-right: 3px;
+    }
+</style>