lbehm/workadventure
1
0
Fork 0
Code Issues Pull requests Releases Activity

Renaming biggestAvailableArray to biggestAvailableArea + removing duplicated code.

Browse source
This commit is contained in:
David Négrier 2021-06-21 14:07:03 +02:00
parent 227575043b
commit 77a4d23301
9 changed files with 45 additions and 91 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
front/src/Components/Video/ChatLayout.svelte
View file

@ -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>

12
front/src/Components/Video/LocalStreamMedia.svelte
View file

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

4
front/src/Components/Video/PresentationLayout.svelte
View file

@ -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>

28
front/src/Components/Video/ScreenSharingMedia.svelte
View file

@ -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">

29
front/src/Components/Video/VideoMedia.svelte
View file

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

27
front/src/Components/Video/utils.ts Normal file
View file

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

11
front/src/Phaser/Game/GameScene.ts
View file

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

4
front/src/Phaser/Menu/MenuScene.ts
View file

@ -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.

17
front/src/Stores/BiggestAvailableArrayStore.ts → front/src/Stores/BiggestAvailableAreaStore.ts
View file

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