Kraut.World/server
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fixing warnings and moving biggest area compute in store

Browse source
This commit is contained in:
David Négrier 2021-06-17 10:07:15 +02:00
parent d3544e2d97
commit d533894a74
11 changed files with 180 additions and 106 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,7 +1,8 @@
<script lang="ts">
import Peer from "./Peer.svelte";
import {layoutStore} from "../../Stores/LayoutStore";
import {onDestroy} from "svelte";
import {afterUpdate, onDestroy} from "svelte";
import {biggestAvailableArrayStore} from "../../Stores/BiggestAvailableArrayStore";
let cssClass = 'one-col';
@ -21,6 +22,10 @@
onDestroy(() => {
unsubscribe();
});
afterUpdate(() => {
biggestAvailableArrayStore.recompute();
})
</script>
<div class="chat-mode {cssClass}">

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

@ -1,11 +1,11 @@
<script lang="typescript">
import {ScreenSharingLocalMedia} from "../../Stores/ScreenSharingStore";
import type {ScreenSharingLocalMedia} from "../../Stores/ScreenSharingStore";
import {videoFocusStore} from "../../Stores/VideoFocusStore";
function srcObject(node, stream) {
function srcObject(node: HTMLVideoElement, stream: MediaStream) {
node.srcObject = stream;
return {
update(newStream) {
update(newStream: MediaStream) {
if (node.srcObject != newStream) {
node.srcObject = newStream
}
@ -14,11 +14,13 @@
}
export let peer : ScreenSharingLocalMedia;
let stream : MediaStream|undefined = peer.stream;
let stream = peer.stream;
export let cssClass : string|undefined;
</script>
<div class="video-container {cssClass ? cssClass : ''}" class:hide={!stream}>
{#if stream}
<video use:srcObject={stream} autoplay muted playsinline on:click={() => videoFocusStore.toggleFocus(peer)}></video>
{/if}
</div>

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

@ -4,7 +4,7 @@
import ScreenSharingMedia from "./ScreenSharingMedia.svelte";
import {ScreenSharingPeer} from "../../WebRtc/ScreenSharingPeer";
import LocalStreamMedia from "./LocalStreamMedia.svelte";
import {DisplayableMedia} from "../../Stores/LayoutStore";
import type {DisplayableMedia} from "../../Stores/LayoutStore";
export let peer: DisplayableMedia;
</script>
@ -15,6 +15,6 @@
{:else if peer instanceof ScreenSharingPeer}
<ScreenSharingMedia peer={peer}/>
{:else}
<LocalStreamMedia peer={peer}/>
<LocalStreamMedia peer={peer} cssClass=""/>
{/if}
</div>

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

@ -2,6 +2,12 @@
import Peer from "./Peer.svelte";
import {layoutStore} from "../../Stores/LayoutStore";
import {videoFocusStore} from "../../Stores/VideoFocusStore";
import {afterUpdate} from "svelte";
import {biggestAvailableArrayStore} from "../../Stores/BiggestAvailableArrayStore";
afterUpdate(() => {
biggestAvailableArrayStore.recompute();
})
</script>
<div class="main-section">

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

@ -1,5 +1,5 @@
<script lang="ts">
import {ScreenSharingPeer} from "../../WebRtc/ScreenSharingPeer";
import type {ScreenSharingPeer} from "../../WebRtc/ScreenSharingPeer";
import {videoFocusStore} from "../../Stores/VideoFocusStore";
export let peer: ScreenSharingPeer;
@ -7,10 +7,10 @@
let name = peer.userName;
let statusStore = peer.statusStore;
function srcObject(node, stream) {
function srcObject(node: HTMLVideoElement, stream: MediaStream) {
node.srcObject = stream;
return {
update(newStream) {
update(newStream: MediaStream) {
if (node.srcObject != newStream) {
node.srcObject = newStream
}
@ -45,8 +45,9 @@
{/if}
{#if $streamStore === null}
<i style="background-color: {getColorByString(name)};">{name}</i>
{:else}
<video use:srcObject={$streamStore} autoplay playsinline on:click={() => videoFocusStore.toggleFocus(peer)}></video>
{/if}
<video use:srcObject={$streamStore} autoplay playsinline on:click={() => videoFocusStore.toggleFocus(peer)}></video>
</div>
<style lang="scss">

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

@ -1,13 +1,10 @@
<script lang="ts">
import {VideoPeer} from "../../WebRtc/VideoPeer";
import type {VideoPeer} from "../../WebRtc/VideoPeer";
import SoundMeterWidget from "../SoundMeterWidget.svelte";
import microphoneCloseImg from "../images/microphone-close.svg";
import reportImg from "./images/report.svg";
import blockSignImg from "./images/blockSign.svg";
import {DivImportance} from "../../WebRtc/LayoutManager";
import {videoFocusStore} from "../../Stores/VideoFocusStore";
import {EnableCameraScene, EnableCameraSceneName} from "../../Phaser/Login/EnableCameraScene";
import {MenuScene, MenuSceneName} from "../../Phaser/Menu/MenuScene";
import {showReportScreenStore} from "../../Stores/ShowReportScreenStore";
export let peer: VideoPeer;
@ -16,8 +13,6 @@
let statusStore = peer.statusStore;
let constraintStore = peer.constraintsStore;
constraintStore.subscribe((vl) => console.log('CONS', vl));
function getColorByString(str: string) : string|null {
let hash = 0;
if (str.length === 0) {
@ -35,10 +30,10 @@
return color;
}
function srcObject(node, stream) {
function srcObject(node: HTMLVideoElement, stream: MediaStream) {
node.srcObject = stream;
return {
update(newStream) {
update(newStream: MediaStream) {
if (node.srcObject != newStream) {
node.srcObject = newStream
}
@ -47,7 +42,6 @@
}
function openReport(peer: VideoPeer): void {
console.log('OPENING REPORT');
showReportScreenStore.set({ userId:peer.userId, userName: peer.userName });
}
@ -70,7 +64,9 @@
<img alt="Report this user" src={reportImg}>
<span>Report/Block</span>
</button>
{#if $streamStore }
<video use:srcObject={$streamStore} autoplay playsinline on:click={() => videoFocusStore.toggleFocus(peer)}></video>
{/if}
<img src={blockSignImg} class="block-logo" alt="Block" />
{#if $constraintStore && $constraintStore.audio !== false}
<SoundMeterWidget stream={$streamStore}></SoundMeterWidget>