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

front/src/Components/Video/ScreenSharingMediaBox.svelte

@@ -30,10 +30,11 @@
     {#if $statusStore === "error"}
         <div class="rtc-error" />
     {/if}
-    {#if $streamStore === null}
+    {#if $streamStore !== null}
-        <i style="background-color: {getColorByString(name)};">{name}</i>
-    {:else}
         <!-- 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

@@ -58,15 +58,12 @@
         <div class="rtc-error" />
     {/if}
     <!-- {#if !$constraintStore || $constraintStore.video === false} -->
-    <i
+    <i class="container">
-        class="container"
+        <span style="background-color: {getColorByString(name)};">{name}</span>
-        class:has-video={$constraintStore && $constraintStore.video === true}
-        class:minimized={(!$constraintStore || $constraintStore.video !== true) && minimized}
-        style="background-color: {getColorByString(name)};"
-    >
-        <span style="noselect">{peer.userName}</span>
-        <div class="woka-icon"><Woka userId={peer.userId} placeholderSrc={""} /></div>
     </i>
+    <div class="woka-icon {($constraintStore && $constraintStore.video !== false) || minimized ? '' : 'no-video'}">
+        <Woka userId={peer.userId} placeholderSrc={""} />
+    </div>
     <!-- {/if} -->
     {#if $constraintStore && $constraintStore.audio === false}
         <img
@@ -99,22 +96,6 @@
     .container {
         display: flex;
         flex-direction: column;
-        padding-top: 15px;
-
-        &.has-video {
-            left: auto;
-            transform: scale(0.5);
-            opacity: 0.5;
-        }
-
-        &.minimized {
-            transform: scale(0.5);
-            opacity: 0.5;
-        }
-
-        .woka-icon {
-            margin-right: 3px;
-        }
     }
     video.no-video {
         visibility: collapse;

front/src/Connexion/ConnectionManager.ts

@@ -187,14 +187,14 @@ class ConnectionManager {
                     window.location.hash;
             }
 
+            //Set last room visited! (connected or nor, must to be saved in localstorage and cache API)
+            //use href to keep # value
+            await localUserStore.setLastRoomUrl(new URL(roomPath).href);
+
             //get detail map for anonymous login and set texture in local storage
             //before set token of user we must load room and all information. For example the mandatory authentication could be require on current room
             this._currentRoom = await Room.createRoom(new URL(roomPath));
 
-            //Set last room visited! (connected or nor, must to be saved in localstorage and cache API)
-            //use href to keep # value
-            await localUserStore.setLastRoomUrl(this._currentRoom.href);
-
             //todo: add here some kind of warning if authToken has expired.
             if (!this.authToken && !this._currentRoom.authenticationMandatory) {
                 await this.anonymousLogin();

front/src/Phaser/Game/GameScene.ts

@@ -1648,7 +1648,10 @@ export class GameScene extends DirtyScene {
         this.sharedVariablesManager?.close();
         this.embeddedWebsiteManager?.close();
 
-        mediaManager.hideMyCamera();
+        //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) {
             iframeEvents.unsubscribe();

front/src/Phaser/Game/PlayerMovement.ts

@@ -41,7 +41,7 @@ export class PlayerMovement {
             oldX: this.startPosition.x,
             oldY: this.startPosition.y,
             direction: this.endPosition.direction,
-            moving: this.endPosition.moving,
+            moving: this.isOutdated(tick) ? false : this.endPosition.moving,
         };
     }
 }

front/src/Phaser/Login/EntryScene.ts

@@ -8,8 +8,6 @@ import LL from "../../i18n/i18n-svelte";
 import { get } from "svelte/store";
 import { localeDetector } from "../../i18n/locales";
 
-const $LL = get(LL);
-
 export const EntrySceneName = "EntryScene";
 
 /**
@@ -43,6 +41,7 @@ export class EntryScene extends Scene {
                         this.scene.start(nextSceneName);
                     })
                     .catch((err) => {
+                        const $LL = get(LL);
                         if (err.response && err.response.status == 404) {
                             ErrorScene.showError(
                                 new WAError(

front/src/Stores/Utils/MapStore.ts

@@ -96,6 +96,7 @@ export class MapStore<K, V> extends Map<K, V> implements Readable<Map<K, V>> {
             const unsubscribe = storeByKey.subscribe((newMapValue) => {
                 if (unsubscribeDeepStore) {
                     unsubscribeDeepStore();
+                    unsubscribeDeepStore = undefined;
                 }
                 if (newMapValue === undefined) {
                     set(undefined);
@@ -115,6 +116,7 @@ export class MapStore<K, V> extends Map<K, V> implements Readable<Map<K, V>> {
                 unsubscribe();
                 if (unsubscribeDeepStore) {
                     unsubscribeDeepStore();
+                    unsubscribeDeepStore = undefined;
                 }
             };
         });

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;
             }

front/style/style.scss

@@ -34,7 +34,6 @@ body .message-info.warning{
 .video-container {
     display: flex;
     transition: all 0.2s ease;
-
     width: 100%;
 
     video {
@@ -47,25 +46,67 @@ body .message-info.warning{
             width: 100%;
             height: 21vh;
         }
+        &:focus{
+            outline: none;
+        }
     }
 
     i {
         position: absolute;
         width: 100px;
-        height: 100px;
+        height: auto;
-        left: calc(50% - 50px);
+        left: -6px;
-        top: calc(50% - 50px);
+        top: calc(100% - 28px);
         text-align: center;
-        font-size: 14px;
         color: white;
+        span{
+            font-size: 14px;
+            margin: 2px;
+            background-color: white;
+            border: solid 3px black;
+            border-radius: 8px;
+            font-style: normal;
+        }
+    }
+
+    .woka-icon{
+        position: absolute;
+        left: 90px;
+        top: calc(100% - 24px);
+        height: 23px;
         overflow: hidden;
+        border-radius: 50%;
+        transition: all 0.2s ease;
+        &.no-video{
+            left: calc(50% - 30px);
+            top: calc(50% - 30px);
+            height: auto;
+            img{
+                height: 60px;
+                width: 60px;
+            }
+        }
+        img{
+            height: 40px;
+            width: 40px;
+        }
+    }
+    &:hover{
+        .woka-icon{
+            top: calc(100% - 30px);
+            height: 30px;
+            &.no-video{
+                top: calc(100% - 32px);
+                height: 35px;
+            }
+        }
     }
 
     img {
         position: absolute;
         display: none;
-        width: 40px;
+        width: 20px;
-        height: 40px;
+        height: 20px;
         left: 5px;
         bottom: 5px;
         padding: 10px;
@@ -126,10 +167,6 @@ body .message-info.warning{
             width: 160px;
         }
     }
-
-    video:focus{
-        outline: none;
-    }
 }
 
 .sound-progress{