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";
-
-    function srcObject(node: HTMLVideoElement, stream: MediaStream) {
-        node.srcObject = stream;
-        return {
-            update(newStream: MediaStream) {
-                if (node.srcObject != newStream) {
-                    node.srcObject = newStream
-                }
-            }
-        }
-    }
+    import {srcObject} from "./utils";
 
     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
+            }
+        }
+    }
+}