Renaming biggestAvailableArray to biggestAvailableArea + removing duplicated code.

front/src/Components/Video/ChatLayout.svelte

@@ -2,7 +2,7 @@
     import Peer from "./Peer.svelte";
     import {layoutStore} from "../../Stores/LayoutStore";
     import {afterUpdate, onDestroy} from "svelte";
-    import {biggestAvailableArrayStore} from "../../Stores/BiggestAvailableArrayStore";
+    import {biggestAvailableAreaStore} from "../../Stores/BiggestAvailableAreaStore";
 
     let cssClass = 'one-col';
 
@@ -24,7 +24,7 @@
     });
 
     afterUpdate(() => {
-        biggestAvailableArrayStore.recompute();
+        biggestAvailableAreaStore.recompute();
     })
 </script>
 

front/src/Components/Video/LocalStreamMedia.svelte

@@ -1,17 +1,7 @@
 <script lang="typescript">
     import type {ScreenSharingLocalMedia} from "../../Stores/ScreenSharingStore";
     import {videoFocusStore} from "../../Stores/VideoFocusStore";
-
+    import {srcObject} from "./utils";
-    function srcObject(node: HTMLVideoElement, stream: MediaStream) {
-        node.srcObject = stream;
-        return {
-            update(newStream: MediaStream) {
-                if (node.srcObject != newStream) {
-                    node.srcObject = newStream
-                }
-            }
-        }
-    }
 
     export let peer : ScreenSharingLocalMedia;
     let stream = peer.stream;

front/src/Components/Video/PresentationLayout.svelte

@@ -3,10 +3,10 @@
     import {layoutStore} from "../../Stores/LayoutStore";
     import {videoFocusStore} from "../../Stores/VideoFocusStore";
     import {afterUpdate} from "svelte";
-    import {biggestAvailableArrayStore} from "../../Stores/BiggestAvailableArrayStore";
+    import {biggestAvailableAreaStore} from "../../Stores/BiggestAvailableAreaStore";
 
     afterUpdate(() => {
-        biggestAvailableArrayStore.recompute();
+        biggestAvailableAreaStore.recompute();
     })
 </script>
 

front/src/Components/Video/ScreenSharingMedia.svelte

@@ -1,39 +1,13 @@
 <script lang="ts">
     import type {ScreenSharingPeer} from "../../WebRtc/ScreenSharingPeer";
     import {videoFocusStore} from "../../Stores/VideoFocusStore";
+    import {getColorByString, srcObject} from "./utils";
 
     export let peer: ScreenSharingPeer;
     let streamStore = peer.streamStore;
     let name = peer.userName;
     let statusStore = peer.statusStore;
 
-    function srcObject(node: HTMLVideoElement, stream: MediaStream) {
-        node.srcObject = stream;
-        return {
-            update(newStream: MediaStream) {
-                if (node.srcObject != newStream) {
-                    node.srcObject = newStream
-                }
-            }
-        }
-    }
-
-    function getColorByString(str: string) : string|null {
-        let hash = 0;
-        if (str.length === 0) {
-            return null;
-        }
-        for (let i = 0; i < str.length; i++) {
-            hash = str.charCodeAt(i) + ((hash << 5) - hash);
-            hash = hash & hash;
-        }
-        let color = '#';
-        for (let i = 0; i < 3; i++) {
-            const value = (hash >> (i * 8)) & 255;
-            color += ('00' + value.toString(16)).substr(-2);
-        }
-        return color;
-    }
 </script>
 
 <div class="video-container">

front/src/Components/Video/VideoMedia.svelte

@@ -6,6 +6,7 @@
     import blockSignImg from "./images/blockSign.svg";
     import {videoFocusStore} from "../../Stores/VideoFocusStore";
     import {showReportScreenStore} from "../../Stores/ShowReportScreenStore";
+    import {getColorByString, srcObject} from "./utils";
 
     export let peer: VideoPeer;
     let streamStore = peer.streamStore;
@@ -13,34 +14,6 @@
     let statusStore = peer.statusStore;
     let constraintStore = peer.constraintsStore;
 
-    function getColorByString(str: string) : string|null {
-        let hash = 0;
-        if (str.length === 0) {
-            return null;
-        }
-        for (let i = 0; i < str.length; i++) {
-            hash = str.charCodeAt(i) + ((hash << 5) - hash);
-            hash = hash & hash;
-        }
-        let color = '#';
-        for (let i = 0; i < 3; i++) {
-            const value = (hash >> (i * 8)) & 255;
-            color += ('00' + value.toString(16)).substr(-2);
-        }
-        return color;
-    }
-
-    function srcObject(node: HTMLVideoElement, stream: MediaStream) {
-        node.srcObject = stream;
-        return {
-            update(newStream: MediaStream) {
-                if (node.srcObject != newStream) {
-                    node.srcObject = newStream
-                }
-            }
-        }
-    }
-
     function openReport(peer: VideoPeer): void {
         showReportScreenStore.set({ userId:peer.userId, userName: peer.userName });
     }

front/src/Components/Video/utils.ts

@@ -0,0 +1,27 @@
+export function getColorByString(str: string) : string|null {
+    let hash = 0;
+    if (str.length === 0) {
+        return null;
+    }
+    for (let i = 0; i < str.length; i++) {
+        hash = str.charCodeAt(i) + ((hash << 5) - hash);
+        hash = hash & hash;
+    }
+    let color = '#';
+    for (let i = 0; i < 3; i++) {
+        const value = (hash >> (i * 8)) & 255;
+        color += ('00' + value.toString(16)).substr(-2);
+    }
+    return color;
+}
+
+export function srcObject(node: HTMLVideoElement, stream: MediaStream) {
+    node.srcObject = stream;
+    return {
+        update(newStream: MediaStream) {
+            if (node.srcObject != newStream) {
+                node.srcObject = newStream
+            }
+        }
+    }
+}

front/src/Phaser/Game/GameScene.ts

@@ -94,7 +94,7 @@ import {waScaleManager} from "../Services/WaScaleManager";
 import {peerStore, screenSharingPeerStore} from "../../Stores/PeerStore";
 import {EmoteManager} from "./EmoteManager";
 import {videoFocusStore} from "../../Stores/VideoFocusStore";
-import {biggestAvailableArrayStore} from "../../Stores/BiggestAvailableArrayStore";
+import {biggestAvailableAreaStore} from "../../Stores/BiggestAvailableAreaStore";
 
 export interface GameSceneInitInterface {
     initPosition: PointInterface|null,
@@ -508,8 +508,7 @@ export class GameScene extends DirtyScene {
         this.reposition();
 
         // From now, this game scene will be notified of reposition events
-        //layoutManager.setListener(this);
+        biggestAvailableAreaStore.subscribe((box) => this.updateCameraOffset(box));
-        biggestAvailableArrayStore.subscribe((box) => this.updateCameraOffset(box));
 
         this.triggerOnMapLayerPropertyChange();
         this.listenToIframeEvents();
@@ -1115,7 +1114,7 @@ ${escapedMessage}
     initCamera() {
         this.cameras.main.setBounds(0,0, this.Map.widthInPixels, this.Map.heightInPixels);
         this.cameras.main.startFollow(this.CurrentPlayer, true);
-        biggestAvailableArrayStore.recompute();
+        biggestAvailableAreaStore.recompute();
     }
 
     addLayer(Layer : Phaser.Tilemaps.TilemapLayer){
@@ -1495,7 +1494,7 @@ ${escapedMessage}
         this.openChatIcon.setY(this.game.renderer.height - 2);
 
         // Recompute camera offset if needed
-        biggestAvailableArrayStore.recompute();
+        biggestAvailableAreaStore.recompute();
     }
 
     /**
@@ -1571,6 +1570,6 @@ ${escapedMessage}
 
     zoomByFactor(zoomFactor: number) {
         waScaleManager.zoomModifier *= zoomFactor;
-        biggestAvailableArrayStore.recompute();
+        biggestAvailableAreaStore.recompute();
     }
 }

front/src/Phaser/Menu/MenuScene.ts

@@ -101,10 +101,6 @@ export class MenuScene extends Phaser.Scene {
         worldFullWarningStream.stream.subscribe(() => this.showWorldCapacityWarning());
     }
 
-    public openReport(userId: number, userName: string): void {
-        this.gameReportElement.open(userId, userName);
-    }
-
     //todo put this method in a parent menuElement class
     static revealMenusAfterInit(menuElement: Phaser.GameObjects.DOMElement, rootDomId: string) {
         //Dom elements will appear inside the viewer screen when creating before being moved out of it, which create a flicker effect.

front/src/Stores/BiggestAvailableAreaStore.ts

@@ -1,16 +1,13 @@
-import {derived, get, Readable, writable} from "svelte/store";
+import {get, writable} from "svelte/store";
 import type {Box} from "../WebRtc/LayoutManager";
 import {HtmlUtils} from "../WebRtc/HtmlUtils";
 import {LayoutMode} from "../WebRtc/LayoutManager";
 import {layoutModeStore} from "./LayoutStore";
-import {VideoPeer} from "../WebRtc/VideoPeer";
-import {RemotePeer, SimplePeer} from "../WebRtc/SimplePeer";
-import {ScreenSharingPeer} from "../WebRtc/ScreenSharingPeer";
 
 /**
  * Tries to find the biggest available box of remaining space (this is a space where we can center the character)
  */
-function findBiggestAvailableArray(): Box {
+function findBiggestAvailableArea(): Box {
     const game = HtmlUtils.querySelectorOrFail<HTMLCanvasElement>('#game canvas');
     if (get(layoutModeStore) === LayoutMode.VideoChat) {
         const children = document.querySelectorAll<HTMLDivElement>('div.chat-mode > div');
@@ -45,7 +42,6 @@ function findBiggestAvailableArray(): Box {
             }
         }
         if (area1 <= area2) {
-            console.log('lastDiv', lastDiv.offsetTop, lastDiv.offsetHeight);
             return {
                 xStart: 0,
                 yStart: lastDiv.offsetTop + lastDiv.offsetHeight,
@@ -53,7 +49,6 @@ function findBiggestAvailableArray(): Box {
                 yEnd: game.offsetHeight
             }
         } else {
-            console.log('lastDiv', lastDiv.offsetTop);
             return {
                 xStart: lastDiv.offsetLeft + lastDiv.offsetWidth,
                 yStart: lastDiv.offsetTop,
@@ -117,16 +112,16 @@ function findBiggestAvailableArray(): Box {
 /**
  * A store that contains the list of (video) peers we are connected to.
  */
-function createBiggestAvailableArrayStore() {
+function createBiggestAvailableAreaStore() {
 
-    const { subscribe, set, update } = writable<Box>({xStart:0, yStart: 0, xEnd: 1, yEnd: 1});
+    const { subscribe, set } = writable<Box>({xStart:0, yStart: 0, xEnd: 1, yEnd: 1});
 
     return {
         subscribe,
         recompute: () => {
-            set(findBiggestAvailableArray());
+            set(findBiggestAvailableArea());
         }
     };
 }
 
-export const biggestAvailableArrayStore = createBiggestAvailableArrayStore();
+export const biggestAvailableAreaStore = createBiggestAvailableAreaStore();