Adding button to change layout

This commit is contained in:
David Négrier 2021-06-15 17:30:28 +02:00
parent 3b278d0498
commit d888b694cc
6 changed files with 92 additions and 32 deletions

View file

@ -0,0 +1,30 @@
<script lang="ts">
import Peer from "./Peer.svelte";
import {layoutStore} from "../../Stores/LayoutStore";
import {onDestroy} from "svelte";
let cssClass = 'one-col';
const unsubscribe = layoutStore.subscribe((displayableMedias) => {
const nbUsers = displayableMedias.size;
if (nbUsers <= 1) {
cssClass = 'one-col';
} else if (nbUsers <= 4) {
cssClass = 'two-col';
} else if (nbUsers <= 9) {
cssClass = 'three-col';
} else {
cssClass = 'four-col';
}
});
onDestroy(() => {
unsubscribe();
});
</script>
<div class="chat-mode {cssClass}">
{#each [...$layoutStore.values()] as peer (peer.uniqueId)}
<Peer peer={peer}></Peer>
{/each}
</div>