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

Changing the way we focus a video element.

Browse source 
Now, only one video element can be important.
This commit is contained in:
David Négrier 2021-06-15 14:45:01 +02:00
parent ac7fa164b6
commit 5cf5e0ce2b
12 changed files with 164 additions and 158 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,5 +1,6 @@
<script lang="typescript">
import {ScreenSharingLocalMedia} from "../../Stores/ScreenSharingStore";
import {videoFocusStore} from "../../Stores/VideoFocusStore";
function srcObject(node, stream) {
node.srcObject = stream;
@ -18,6 +19,6 @@
</script>
<div class="video-container {cssClass}" class:hide={!stream}>
<video class="myCamVideo" use:srcObject={stream} autoplay muted playsinline on:click={() => peer.importanceStore.toggle()}></video>
<div class="video-container {cssClass ? cssClass : ''}" class:hide={!stream}>
<video use:srcObject={stream} autoplay muted playsinline on:click={() => videoFocusStore.toggleFocus(peer)}></video>
</div>

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

@ -1,5 +1,6 @@
<script lang="ts">
import {ScreenSharingPeer} from "../../WebRtc/ScreenSharingPeer";
import {videoFocusStore} from "../../Stores/VideoFocusStore";
export let peer: ScreenSharingPeer;
let streamStore = peer.streamStore;
@ -45,7 +46,7 @@
{#if $streamStore === null}
<i style="background-color: {getColorByString(name)};">{name}</i>
{/if}
<video use:srcObject={$streamStore} autoplay playsinline on:click={() => peer.importanceStore.toggle()}></video>
<video use:srcObject={$streamStore} autoplay playsinline on:click={() => videoFocusStore.toggleFocus(peer)}></video>
</div>
<style lang="scss">

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

@ -5,13 +5,13 @@
import reportImg from "./images/report.svg";
import blockSignImg from "./images/blockSign.svg";
import {DivImportance} from "../../WebRtc/LayoutManager";
import {videoFocusStore} from "../../Stores/VideoFocusStore";
export let peer: VideoPeer;
let streamStore = peer.streamStore;
let name = peer.userName;
let statusStore = peer.statusStore;
let constraintStore = peer.constraintsStore;
let importanceStore = peer.importanceStore;
constraintStore.subscribe((vl) => console.log('CONS', vl));
@ -62,17 +62,10 @@
<img alt="Report this user" src={reportImg}>
<span>Report/Block</span>
</button>
<video use:srcObject={$streamStore} autoplay playsinline on:click={() => peer.importanceStore.toggle()}></video>
<video use:srcObject={$streamStore} autoplay playsinline on:click={() => videoFocusStore.toggleFocus(peer)}></video>
<img src={blockSignImg} class="block-logo" alt="Block">
{#if $constraintStore && $constraintStore.audio !== false}
<SoundMeterWidget stream={$streamStore}></SoundMeterWidget>
{/if}
</div>
<style lang="scss">
.video-container {
video {
width: 100%;
}
}
</style>

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

@ -3,18 +3,23 @@
import {DivImportance} from "../../WebRtc/LayoutManager";
import Peer from "./Peer.svelte";
import {layoutStore} from "../../Stores/LayoutStore";
import {videoFocusStore} from "../../Stores/VideoFocusStore";
</script>
<div class="video-overlay">
<div class="main-section">
{#each [...$layoutStore.get(DivImportance.Important).values()] as peer (peer.uniqueId)}
<Peer peer={peer}></Peer>
{#each [...$layoutStore.values()] as peer (peer.uniqueId)}
{#if $videoFocusStore && peer === $videoFocusStore }
<Peer peer={peer}></Peer>
{/if}
{/each}
</div>
<aside class="sidebar">
{#each [...$layoutStore.get(DivImportance.Normal).values()] as peer (peer.uniqueId)}
<Peer peer={peer}></Peer>
{#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;">