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

Adding button to change layout

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

30
front/src/Components/Video/ChatLayout.svelte Normal file
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>

20
front/src/Components/Video/PresentationLayout.svelte Normal file
View file

@ -0,0 +1,20 @@
<script lang="ts">
import Peer from "./Peer.svelte";
import {layoutStore} from "../../Stores/LayoutStore";
import {videoFocusStore} from "../../Stores/VideoFocusStore";
</script>
<div class="main-section">
{#each [...$layoutStore.values()] as peer (peer.uniqueId)}
{#if $videoFocusStore && peer === $videoFocusStore }
<Peer peer={peer}></Peer>
{/if}
{/each}
</div>
<aside class="sidebar">
{#each [...$layoutStore.values()] as peer (peer.uniqueId)}
{#if peer !== $videoFocusStore }
<Peer peer={peer}></Peer>
{/if}
{/each}
</aside>

32
front/src/Components/Video/VideoOverlay.svelte
View file

@ -1,31 +1,17 @@
<script lang="ts">
import {screenSharingStreamStore} from "../../Stores/PeerStore";
import {DivImportance} from "../../WebRtc/LayoutManager";
import Peer from "./Peer.svelte";
import {layoutStore} from "../../Stores/LayoutStore";
import {videoFocusStore} from "../../Stores/VideoFocusStore";
import {LayoutMode} from "../../WebRtc/LayoutManager";
import {layoutModeStore} from "../../Stores/LayoutStore";
import PresentationLayout from "./PresentationLayout.svelte";
import ChatLayout from "./ChatLayout.svelte";
</script>
<div class="video-overlay">
<div class="main-section">
{#each [...$layoutStore.values()] as peer (peer.uniqueId)}
{#if $videoFocusStore && peer === $videoFocusStore }
<Peer peer={peer}></Peer>
{/if}
{/each}
</div>
<aside class="sidebar">
{#each [...$layoutStore.values()] as peer (peer.uniqueId)}
{#if peer !== $videoFocusStore }
<Peer peer={peer}></Peer>
{/if}
{/each}
</aside>
<div class="chat-mode three-col" style="display: none;">
</div>
{#if $layoutModeStore === LayoutMode.Presentation }
<PresentationLayout />
{:else }
<ChatLayout />
{/if}
</div>
<style lang="scss">