Merge pull request #1790 from thecodingmachine/fix_screensharing_spinner

Fix screensharing spinner

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>

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={""} />

front/src/Phaser/Game/GameScene.ts

@@ -1605,6 +1605,7 @@ ${escapedMessage}
 
         //When we leave game, the camera is stop to be reopen after.
         // I think that we could keep camera status and the scene can manage camera setup
+        //TODO find wy chrome don't manage correctly a multiple ask mediaDevices
         //mediaManager.hideMyCamera();
 
         for (const iframeEvents of this.iframeSubscriptionList) {

front/src/WebRtc/ScreenSharingPeer.ts

@@ -2,7 +2,7 @@ import type * as SimplePeerNamespace from "simple-peer";
 import type { RoomConnection } from "../Connexion/RoomConnection";
 import { MESSAGE_TYPE_CONSTRAINT, PeerStatus } from "./VideoPeer";
 import type { UserSimplePeerInterface } from "./SimplePeer";
-import { Readable, readable } from "svelte/store";
+import { Readable, readable, writable, Writable } from "svelte/store";
 import { getIceServersConfig } from "../Components/Video/utils";
 import { highlightedEmbedScreen } from "../Stores/EmbedScreensStore";
 import { isMediaBreakpointUp } from "../Utils/BreakpointsUtils";
@@ -22,7 +22,7 @@ export class ScreenSharingPeer extends Peer {
     public readonly userId: number;
     public readonly uniqueId: string;
     public readonly streamStore: Readable<MediaStream | null>;
-    public readonly statusStore: Readable<PeerStatus>;
+    public readonly statusStore: Writable<PeerStatus>;
 
     constructor(
         user: UserSimplePeerInterface,
@@ -70,7 +70,7 @@ export class ScreenSharingPeer extends Peer {
             };
         });
 
-        this.statusStore = readable<PeerStatus>("connecting", (set) => {
+        this.statusStore = writable<PeerStatus>("connecting", (set) => {
             const onConnect = () => {
                 set("connected");
             };
@@ -141,6 +141,12 @@ export class ScreenSharingPeer extends Peer {
         if (!stream) {
             this.isReceivingStream = false;
         } else {
+            //Check if the peer connection is already connected status. In this case, the status store must be set to 'connected'.
+            //In the case or player A send stream and player B send a stream, it's same peer connection, also the status must be changed to connect.
+            //TODO add event listening when the stream is ready for displaying and change the status
+            if (this._connected) {
+                this.statusStore.set("connected");
+            }
             this.isReceivingStream = true;
         }
     }

front/src/WebRtc/SimplePeer.ts

@@ -259,7 +259,7 @@ export class SimplePeer {
                 console.warn(
                     "closeScreenSharingConnection => Tried to close connection for user " +
                         userId +
-                        " but could not find user"
+                        " but could not find user or no peer connection started"
                 );
                 return;
             }