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

merged develop

Browse source
This commit is contained in:
Hanusiak Piotr 2021-12-07 13:56:28 +01:00
commit e62ad6b9c9
84 changed files with 3531 additions and 1845 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,21 +1,21 @@
<script lang="ts">
import {streamableCollectionStore} from "../../Stores/StreamableCollectionStore";
import {afterUpdate, onDestroy} from "svelte";
import {biggestAvailableAreaStore} from "../../Stores/BiggestAvailableAreaStore";
import { streamableCollectionStore } from "../../Stores/StreamableCollectionStore";
import { afterUpdate, onDestroy } from "svelte";
import { biggestAvailableAreaStore } from "../../Stores/BiggestAvailableAreaStore";
import MediaBox from "./MediaBox.svelte";
let cssClass = 'one-col';
let cssClass = "one-col";
const unsubscribe = streamableCollectionStore.subscribe((displayableMedias) => {
const nbUsers = displayableMedias.size;
if (nbUsers <= 1) {
cssClass = 'one-col';
cssClass = "one-col";
} else if (nbUsers <= 4) {
cssClass = 'two-col';
cssClass = "two-col";
} else if (nbUsers <= 9) {
cssClass = 'three-col';
cssClass = "three-col";
} else {
cssClass = 'four-col';
cssClass = "four-col";
}
});
@ -25,11 +25,11 @@
afterUpdate(() => {
biggestAvailableAreaStore.recompute();
})
});
</script>
<div class="chat-mode {cssClass}">
{#each [...$streamableCollectionStore.values()] as peer (peer.uniqueId)}
<MediaBox streamable={peer}></MediaBox>
<MediaBox streamable={peer} />
{/each}
</div>

13
front/src/Components/Video/LocalStreamMediaBox.svelte
View file

@ -1,16 +1,15 @@
<script lang="typescript">
import type {ScreenSharingLocalMedia} from "../../Stores/ScreenSharingStore";
import {videoFocusStore} from "../../Stores/VideoFocusStore";
import {srcObject} from "./utils";
import type { ScreenSharingLocalMedia } from "../../Stores/ScreenSharingStore";
import { videoFocusStore } from "../../Stores/VideoFocusStore";
import { srcObject } from "./utils";
export let peer : ScreenSharingLocalMedia;
export let peer: ScreenSharingLocalMedia;
let stream = peer.stream;
export let cssClass : string|undefined;
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>
<video use:srcObject={stream} autoplay muted playsinline on:click={() => videoFocusStore.toggleFocus(peer)} />
{/if}
</div>

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

@ -1,20 +1,20 @@
<script lang="ts">
import {VideoPeer} from "../../WebRtc/VideoPeer";
import { VideoPeer } from "../../WebRtc/VideoPeer";
import VideoMediaBox from "./VideoMediaBox.svelte";
import ScreenSharingMediaBox from "./ScreenSharingMediaBox.svelte";
import {ScreenSharingPeer} from "../../WebRtc/ScreenSharingPeer";
import { ScreenSharingPeer } from "../../WebRtc/ScreenSharingPeer";
import LocalStreamMediaBox from "./LocalStreamMediaBox.svelte";
import type {Streamable} from "../../Stores/StreamableCollectionStore";
import type { Streamable } from "../../Stores/StreamableCollectionStore";
export let streamable: Streamable;
</script>
<div class="media-container">
{#if streamable instanceof VideoPeer}
<VideoMediaBox peer={streamable}/>
<VideoMediaBox peer={streamable} />
{:else if streamable instanceof ScreenSharingPeer}
<ScreenSharingMediaBox peer={streamable}/>
<ScreenSharingMediaBox peer={streamable} />
{:else}
<LocalStreamMediaBox peer={streamable} cssClass=""/>
<LocalStreamMediaBox peer={streamable} cssClass="" />
{/if}
</div>

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

@ -1,26 +1,26 @@
<script lang="ts">
import {streamableCollectionStore} from "../../Stores/StreamableCollectionStore";
import {videoFocusStore} from "../../Stores/VideoFocusStore";
import {afterUpdate} from "svelte";
import {biggestAvailableAreaStore} from "../../Stores/BiggestAvailableAreaStore";
import { streamableCollectionStore } from "../../Stores/StreamableCollectionStore";
import { videoFocusStore } from "../../Stores/VideoFocusStore";
import { afterUpdate } from "svelte";
import { biggestAvailableAreaStore } from "../../Stores/BiggestAvailableAreaStore";
import MediaBox from "./MediaBox.svelte";
afterUpdate(() => {
biggestAvailableAreaStore.recompute();
})
});
</script>
<div class="main-section">
{#if $videoFocusStore }
{#if $videoFocusStore}
{#key $videoFocusStore.uniqueId}
<MediaBox streamable={$videoFocusStore}></MediaBox>
<MediaBox streamable={$videoFocusStore} />
{/key}
{/if}
</div>
<aside class="sidebar">
{#each [...$streamableCollectionStore.values()] as peer (peer.uniqueId)}
{#if peer !== $videoFocusStore }
<MediaBox streamable={peer}></MediaBox>
{#if peer !== $videoFocusStore}
<MediaBox streamable={peer} />
{/if}
{/each}
</aside>

26
front/src/Components/Video/ScreenSharingMediaBox.svelte
View file

@ -1,33 +1,33 @@
<script lang="ts">
import type {ScreenSharingPeer} from "../../WebRtc/ScreenSharingPeer";
import {videoFocusStore} from "../../Stores/VideoFocusStore";
import {getColorByString, srcObject} from "./utils";
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;
</script>
<div class="video-container">
{#if $statusStore === 'connecting'}
<div class="connecting-spinner"></div>
{#if $statusStore === "connecting"}
<div class="connecting-spinner" />
{/if}
{#if $statusStore === 'error'}
<div class="rtc-error"></div>
{#if $statusStore === "error"}
<div class="rtc-error" />
{/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>
<!-- svelte-ignore a11y-media-has-caption -->
<video use:srcObject={$streamStore} autoplay playsinline on:click={() => videoFocusStore.toggleFocus(peer)} />
{/if}
</div>
<style lang="scss">
.video-container {
video {
width: 100%;
.video-container {
video {
width: 100%;
}
}
}
</style>

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

@ -8,7 +8,7 @@
import { showReportScreenStore } from "../../Stores/ShowReportScreenStore";
import { getColorByString, srcObject } from "./utils";
import Woka from '../Woka/Woka.svelte';
import Woka from "../Woka/Woka.svelte";
export let peer: VideoPeer;
let streamStore = peer.streamStore;
@ -30,7 +30,7 @@
{/if}
{#if !$constraintStore || $constraintStore.video === false}
<i style="background-color: {getColorByString(name)};">
<Woka userId={peer.userId} placeholderSrc={""}/>
<Woka userId={peer.userId} placeholderSrc={""} />
</i>
{/if}
{#if $constraintStore && $constraintStore.audio === false}
@ -40,9 +40,10 @@
<img alt="Report this user" src={reportImg} />
<span>Report/Block</span>
</button>
<!-- svelte-ignore a11y-media-has-caption -->
<video use:srcObject={$streamStore} autoplay playsinline on:click={() => videoFocusStore.toggleFocus(peer)} />
<img src={blockSignImg} class="block-logo" alt="Block" />
{#if $constraintStore && $constraintStore.audio !== false}
<SoundMeterWidget stream={$streamStore} />
{/if}
</div>
</div>

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

@ -1,23 +1,22 @@
<script lang="ts">
import {LayoutMode} from "../../WebRtc/LayoutManager";
import {layoutModeStore} from "../../Stores/StreamableCollectionStore";
import { LayoutMode } from "../../WebRtc/LayoutManager";
import { layoutModeStore } from "../../Stores/StreamableCollectionStore";
import PresentationLayout from "./PresentationLayout.svelte";
import ChatLayout from "./ChatLayout.svelte";
</script>
<div class="video-overlay">
{#if $layoutModeStore === LayoutMode.Presentation }
{#if $layoutModeStore === LayoutMode.Presentation}
<PresentationLayout />
{:else }
{:else}
<ChatLayout />
{/if}
</div>
<style lang="scss">
.video-overlay {
display: flex;
width: 100%;
height: 100%;
display: flex;
width: 100%;
height: 100%;
}
</style>