2021-06-15 17:30:28 +02:00
|
|
|
<script lang="ts">
|
2021-12-06 16:12:37 +01:00
|
|
|
import { streamableCollectionStore } from "../../Stores/StreamableCollectionStore";
|
|
|
|
import { videoFocusStore } from "../../Stores/VideoFocusStore";
|
|
|
|
import { afterUpdate } from "svelte";
|
|
|
|
import { biggestAvailableAreaStore } from "../../Stores/BiggestAvailableAreaStore";
|
2021-06-21 14:43:10 +02:00
|
|
|
import MediaBox from "./MediaBox.svelte";
|
2021-06-17 10:07:15 +02:00
|
|
|
|
|
|
|
afterUpdate(() => {
|
2021-06-21 14:07:03 +02:00
|
|
|
biggestAvailableAreaStore.recompute();
|
2021-12-06 16:12:37 +01:00
|
|
|
});
|
2021-06-15 17:30:28 +02:00
|
|
|
</script>
|
|
|
|
|
|
|
|
<div class="main-section">
|
2021-12-06 16:12:37 +01:00
|
|
|
{#if $videoFocusStore}
|
2021-09-03 15:16:21 +02:00
|
|
|
{#key $videoFocusStore.uniqueId}
|
2021-12-06 16:12:37 +01:00
|
|
|
<MediaBox streamable={$videoFocusStore} />
|
2021-09-03 15:16:21 +02:00
|
|
|
{/key}
|
2021-06-21 14:43:10 +02:00
|
|
|
{/if}
|
2021-06-15 17:30:28 +02:00
|
|
|
</div>
|
|
|
|
<aside class="sidebar">
|
2021-06-21 14:43:10 +02:00
|
|
|
{#each [...$streamableCollectionStore.values()] as peer (peer.uniqueId)}
|
2021-12-06 16:12:37 +01:00
|
|
|
{#if peer !== $videoFocusStore}
|
|
|
|
<MediaBox streamable={peer} />
|
2021-06-15 17:30:28 +02:00
|
|
|
{/if}
|
|
|
|
{/each}
|
|
|
|
</aside>
|