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();