lbehm/workadventure
1
0
Fork 0
Code Issues Pull requests Releases Activity

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

17
front/src/Components/CameraControls.svelte
View file

@ -7,6 +7,9 @@
import cinemaCloseImg from "./images/cinema-close.svg";
import microphoneImg from "./images/microphone.svg";
import microphoneCloseImg from "./images/microphone-close.svg";
import {layoutModeStore} from "../Stores/LayoutStore";
import {LayoutMode} from "../WebRtc/LayoutManager";
import {peerStore} from "../Stores/PeerStore";
function screenSharingClick(): void {
if ($requestedScreenSharingState === true) {
@ -32,10 +35,24 @@
}
}
function switchLayoutMode() {
if ($layoutModeStore === LayoutMode.Presentation) {
$layoutModeStore = LayoutMode.VideoChat;
} else {
$layoutModeStore = LayoutMode.Presentation;
}
}
</script>
<div>
<div class="btn-cam-action">
<div class="btn-layout" on:click={switchLayoutMode} class:hide={$peerStore.size === 0}>
{#if $layoutModeStore === LayoutMode.Presentation }
<img src={monitorImg} alt="Switch to mosaic mode">
{:else}
<img src={monitorCloseImg} alt="Switch to presentation mode">
{/if}
</div>
<div class="btn-monitor" on:click={screenSharingClick} class:hide={!$screenSharingAvailableStore} class:enabled={$requestedScreenSharingState}>
{#if $requestedScreenSharingState}
<img src={monitorImg} alt="Start screen sharing">

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">

13
front/src/Stores/LayoutStore.ts
View file

@ -1,16 +1,17 @@
import {derived, get, writable} from "svelte/store";
import {derived, get, Readable, writable} from "svelte/store";
import {ScreenSharingLocalMedia, screenSharingLocalMedia} from "./ScreenSharingStore";
import { peerStore, screenSharingStreamStore} from "./PeerStore";
import type {RemotePeer} from "../WebRtc/SimplePeer";
import {LayoutMode} from "../WebRtc/LayoutManager";
export type DisplayableMedia = RemotePeer | ScreenSharingLocalMedia;
export const layoutModeStore = writable<LayoutMode>(LayoutMode.Presentation);
/**
* A store that contains the layout of the streams
*/
function createLayoutStore() {
let unsubscribes: (()=>void)[] = [];
function createLayoutStore(): Readable<Map<string, DisplayableMedia>> {
return derived([
screenSharingStreamStore,
@ -21,10 +22,6 @@ function createLayoutStore() {
$peerStore,
$screenSharingLocalMedia,
], set) => {
for (const unsubscribe of unsubscribes) {
unsubscribe();
}
unsubscribes = [];
const peers = new Map<string, DisplayableMedia>();

12
front/style/style.scss
View file

@ -211,7 +211,7 @@ video.myCamVideo{
display: inline-flex;
bottom: 10px;
right: 15px;
width: 180px;
width: 240px;
height: 40px;
text-align: center;
align-content: center;
@ -270,6 +270,16 @@ video.myCamVideo{
.btn-cam-action:hover .btn-monitor.hide{
transform: translateY(60px);
}
.btn-layout{
pointer-events: auto;
transition: all .15s;
}
.btn-layout.hide {
transform: translateY(60px);
}
.btn-cam-action:hover .btn-layout.hide{
transform: translateY(60px);
}
.btn-copy{
pointer-events: auto;
transition: all .3s;