diff --git a/front/src/Components/Video/ChatLayout.svelte b/front/src/Components/Video/ChatLayout.svelte
index 50c9ed2f..31b3b574 100644
--- a/front/src/Components/Video/ChatLayout.svelte
+++ b/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();
})
diff --git a/front/src/Components/Video/LocalStreamMedia.svelte b/front/src/Components/Video/LocalStreamMedia.svelte
index 97b69070..55c7f22c 100644
--- a/front/src/Components/Video/LocalStreamMedia.svelte
+++ b/front/src/Components/Video/LocalStreamMedia.svelte
@@ -1,17 +1,7 @@
diff --git a/front/src/Components/Video/ScreenSharingMedia.svelte b/front/src/Components/Video/ScreenSharingMedia.svelte
index 5cb84237..c6e1564f 100644
--- a/front/src/Components/Video/ScreenSharingMedia.svelte
+++ b/front/src/Components/Video/ScreenSharingMedia.svelte
@@ -1,39 +1,13 @@
diff --git a/front/src/Components/Video/VideoMedia.svelte b/front/src/Components/Video/VideoMedia.svelte
index 6944401d..1a581914 100644
--- a/front/src/Components/Video/VideoMedia.svelte
+++ b/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 });
}
diff --git a/front/src/Components/Video/utils.ts b/front/src/Components/Video/utils.ts
new file mode 100644
index 00000000..ab7a63be
--- /dev/null
+++ b/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
+ }
+ }
+ }
+}
diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts
index 050c3e06..d1c00aab 100644
--- a/front/src/Phaser/Game/GameScene.ts
+++ b/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);
- biggestAvailableArrayStore.subscribe((box) => this.updateCameraOffset(box));
+ biggestAvailableAreaStore.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();
}
}
diff --git a/front/src/Phaser/Menu/MenuScene.ts b/front/src/Phaser/Menu/MenuScene.ts
index db41504c..d0c6556c 100644
--- a/front/src/Phaser/Menu/MenuScene.ts
+++ b/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.
diff --git a/front/src/Stores/BiggestAvailableArrayStore.ts b/front/src/Stores/BiggestAvailableAreaStore.ts
similarity index 87%
rename from front/src/Stores/BiggestAvailableArrayStore.ts
rename to front/src/Stores/BiggestAvailableAreaStore.ts
index 0427b918..16cc8a27 100644
--- a/front/src/Stores/BiggestAvailableArrayStore.ts
+++ b/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('#game canvas');
if (get(layoutModeStore) === LayoutMode.VideoChat) {
const children = document.querySelectorAll('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({xStart:0, yStart: 0, xEnd: 1, yEnd: 1});
+ const { subscribe, set } = writable({xStart:0, yStart: 0, xEnd: 1, yEnd: 1});
return {
subscribe,
recompute: () => {
- set(findBiggestAvailableArray());
+ set(findBiggestAvailableArea());
}
};
}
-export const biggestAvailableArrayStore = createBiggestAvailableArrayStore();
+export const biggestAvailableAreaStore = createBiggestAvailableAreaStore();