From 7b94ac644dde09005c6058e2cee4ccfc4738a68a Mon Sep 17 00:00:00 2001
From: Hanusiak Piotr <piotr@ltmp.co>
Date: Fri, 26 Nov 2021 23:30:21 +0100
Subject: [PATCH] working woka picture if no camera view is provided

---
 .../src/Components/Video/VideoMediaBox.svelte | 53 ++++++++++++++-----
 front/src/Stores/UserWokaPictureStore.ts      |  3 +-
 2 files changed, 41 insertions(+), 15 deletions(-)

diff --git a/front/src/Components/Video/VideoMediaBox.svelte b/front/src/Components/Video/VideoMediaBox.svelte
index cc7fb424..46554128 100644
--- a/front/src/Components/Video/VideoMediaBox.svelte
+++ b/front/src/Components/Video/VideoMediaBox.svelte
@@ -1,12 +1,14 @@
 <script lang="ts">
-    import type {VideoPeer} from "../../WebRtc/VideoPeer";
+    import type { VideoPeer } from "../../WebRtc/VideoPeer";
     import SoundMeterWidget from "../SoundMeterWidget.svelte";
     import microphoneCloseImg from "../images/microphone-close.svg";
     import reportImg from "./images/report.svg";
     import blockSignImg from "./images/blockSign.svg";
-    import {videoFocusStore} from "../../Stores/VideoFocusStore";
-    import {showReportScreenStore} from "../../Stores/ShowReportScreenStore";
-    import {getColorByString, srcObject} from "./utils";
+    import { videoFocusStore } from "../../Stores/VideoFocusStore";
+    import { showReportScreenStore } from "../../Stores/ShowReportScreenStore";
+    import { userWokaPictureStore } from "../../Stores/UserWokaPictureStore";
+    import { getColorByString, srcObject } from "./utils";
+    import { onDestroy } from "svelte";
 
     export let peer: VideoPeer;
     let streamStore = peer.streamStore;
@@ -14,33 +16,56 @@
     let statusStore = peer.statusStore;
     let constraintStore = peer.constraintsStore;
 
+    let userWokaPictureSrc: string | undefined = undefined;
+
+    const unsubscribeFromUserWokaPictureStore = userWokaPictureStore.subscribe((playersAvatars) => {
+        userWokaPictureSrc = playersAvatars.get(peer.userId);
+        console.log(userWokaPictureSrc);
+    });
+
     function openReport(peer: VideoPeer): void {
-        showReportScreenStore.set({ userId:peer.userId, userName: peer.userName });
+        showReportScreenStore.set({ userId: peer.userId, userName: peer.userName });
     }
 
+    onDestroy(unsubscribeFromUserWokaPictureStore);
 </script>
 
 <div class="video-container">
-    {#if $statusStore === 'connecting'}
-        <div class="connecting-spinner"></div>
+    {#if $statusStore === "connecting"}
+        <div class="connecting-spinner" />
     {/if}
-    {#if $statusStore === 'error'}
-        <div class="rtc-error"></div>
+    {#if $statusStore === "error"}
+        <div class="rtc-error" />
     {/if}
     {#if !$constraintStore || $constraintStore.video === false}
-        <i style="background-color: {getColorByString(name)};">{name}</i>
+        <i style="background-color: {getColorByString(name)};">
+            {#if !userWokaPictureSrc}
+                {name}
+            {:else}
+                <img src={userWokaPictureSrc} class="user-woka-picture" alt="player avatar" />
+            {/if}
+        </i>
     {/if}
     {#if $constraintStore && $constraintStore.audio === false}
-        <img src={microphoneCloseImg} class="active" alt="Muted">
+        <img src={microphoneCloseImg} class="active" alt="Muted" />
     {/if}
     <button class="report" on:click={() => openReport(peer)}>
-        <img alt="Report this user" src={reportImg}>
+        <img alt="Report this user" src={reportImg} />
         <span>Report/Block</span>
     </button>
-    <video use:srcObject={$streamStore} autoplay playsinline on:click={() => videoFocusStore.toggleFocus(peer)}></video>
+    <video use:srcObject={$streamStore} autoplay playsinline on:click={() => videoFocusStore.toggleFocus(peer)} />
     <img src={blockSignImg} class="block-logo" alt="Block" />
     {#if $constraintStore && $constraintStore.audio !== false}
-        <SoundMeterWidget stream={$streamStore}></SoundMeterWidget>
+        <SoundMeterWidget stream={$streamStore} />
     {/if}
 </div>
 
+<style lang="scss">
+    .user-woka-picture {
+        display: block;
+        left: calc(50% - 45px);
+        top: calc(50% - 45px);
+        width: 90px;
+        height: 90px;
+    }
+</style>
\ No newline at end of file
diff --git a/front/src/Stores/UserWokaPictureStore.ts b/front/src/Stores/UserWokaPictureStore.ts
index de3f759a..6ce7ba7d 100644
--- a/front/src/Stores/UserWokaPictureStore.ts
+++ b/front/src/Stores/UserWokaPictureStore.ts
@@ -5,12 +5,13 @@ import type { RoomConnection } from "../Connexion/RoomConnection";
  * A store that contains the players avatars pictures
  */
 function createUserWokaPictureStore() {
-    let players = new Map<number, string>();
+    const players = new Map<number, string>();
 
     const { subscribe, update } = writable(players);
 
     return {
         subscribe,
+        // P.H. NOTE: Not clearing the store after reconnecting to the room - is this a problem?
         connectToRoomConnection: (roomConnection: RoomConnection) => {
             roomConnection.onUserLeft((userId) => {
                 update((users) => {