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

working woka picture if no camera view is provided

Browse source
This commit is contained in:
Hanusiak Piotr 2021-11-26 23:30:21 +01:00
parent f4ce82481e
commit 7b94ac644d
2 changed files with 41 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,12 +1,14 @@
<script lang="ts"> <script lang="ts">
import type {VideoPeer} from "../../WebRtc/VideoPeer"; import type { VideoPeer } from "../../WebRtc/VideoPeer";
import SoundMeterWidget from "../SoundMeterWidget.svelte"; import SoundMeterWidget from "../SoundMeterWidget.svelte";
import microphoneCloseImg from "../images/microphone-close.svg"; import microphoneCloseImg from "../images/microphone-close.svg";
import reportImg from "./images/report.svg"; import reportImg from "./images/report.svg";
import blockSignImg from "./images/blockSign.svg"; import blockSignImg from "./images/blockSign.svg";
import {videoFocusStore} from "../../Stores/VideoFocusStore"; import { videoFocusStore } from "../../Stores/VideoFocusStore";
import {showReportScreenStore} from "../../Stores/ShowReportScreenStore"; import { showReportScreenStore } from "../../Stores/ShowReportScreenStore";
import {getColorByString, srcObject} from "./utils"; import { userWokaPictureStore } from "../../Stores/UserWokaPictureStore";
import { getColorByString, srcObject } from "./utils";
import { onDestroy } from "svelte";
export let peer: VideoPeer; export let peer: VideoPeer;
let streamStore = peer.streamStore; let streamStore = peer.streamStore;
@ -14,33 +16,56 @@
let statusStore = peer.statusStore; let statusStore = peer.statusStore;
let constraintStore = peer.constraintsStore; let constraintStore = peer.constraintsStore;
let userWokaPictureSrc: string | undefined = undefined;
const unsubscribeFromUserWokaPictureStore = userWokaPictureStore.subscribe((playersAvatars) => {
userWokaPictureSrc = playersAvatars.get(peer.userId);
console.log(userWokaPictureSrc);
});
function openReport(peer: VideoPeer): void { function openReport(peer: VideoPeer): void {
showReportScreenStore.set({ userId:peer.userId, userName: peer.userName }); showReportScreenStore.set({ userId: peer.userId, userName: peer.userName });
} }
onDestroy(unsubscribeFromUserWokaPictureStore);
</script> </script>
<div class="video-container"> <div class="video-container">
{#if $statusStore === 'connecting'} {#if $statusStore === "connecting"}
<div class="connecting-spinner"></div> <div class="connecting-spinner" />
{/if} {/if}
{#if $statusStore === 'error'} {#if $statusStore === "error"}
<div class="rtc-error"></div> <div class="rtc-error" />
{/if} {/if}
{#if !$constraintStore || $constraintStore.video === false} {#if !$constraintStore || $constraintStore.video === false}
<i style="background-color: {getColorByString(name)};">{name}</i> <i style="background-color: {getColorByString(name)};">
{#if !userWokaPictureSrc}
{name}
{:else}
<img src={userWokaPictureSrc} class="user-woka-picture" alt="player avatar" />
{/if}
</i>
{/if} {/if}
{#if $constraintStore && $constraintStore.audio === false} {#if $constraintStore && $constraintStore.audio === false}
<img src={microphoneCloseImg} class="active" alt="Muted"> <img src={microphoneCloseImg} class="active" alt="Muted" />
{/if} {/if}
<button class="report" on:click={() => openReport(peer)}> <button class="report" on:click={() => openReport(peer)}>
<img alt="Report this user" src={reportImg}> <img alt="Report this user" src={reportImg} />
<span>Report/Block</span> <span>Report/Block</span>
</button> </button>
<video use:srcObject={$streamStore} autoplay playsinline on:click={() => videoFocusStore.toggleFocus(peer)}></video> <video use:srcObject={$streamStore} autoplay playsinline on:click={() => videoFocusStore.toggleFocus(peer)} />
<img src={blockSignImg} class="block-logo" alt="Block" /> <img src={blockSignImg} class="block-logo" alt="Block" />
{#if $constraintStore && $constraintStore.audio !== false} {#if $constraintStore && $constraintStore.audio !== false}
<SoundMeterWidget stream={$streamStore}></SoundMeterWidget> <SoundMeterWidget stream={$streamStore} />
{/if} {/if}
</div> </div>
<style lang="scss">
.user-woka-picture {
display: block;
left: calc(50% - 45px);
top: calc(50% - 45px);
width: 90px;
height: 90px;
}
</style>

3
front/src/Stores/UserWokaPictureStore.ts
View file

@ -5,12 +5,13 @@ import type { RoomConnection } from "../Connexion/RoomConnection";
* A store that contains the players avatars pictures * A store that contains the players avatars pictures
*/ */
function createUserWokaPictureStore() { function createUserWokaPictureStore() {
let players = new Map<number, string>(); const players = new Map<number, string>();
const { subscribe, update } = writable(players); const { subscribe, update } = writable(players);
return { return {
subscribe, subscribe,
// P.H. NOTE: Not clearing the store after reconnecting to the room - is this a problem?
connectToRoomConnection: (roomConnection: RoomConnection) => { connectToRoomConnection: (roomConnection: RoomConnection) => {
roomConnection.onUserLeft((userId) => { roomConnection.onUserLeft((userId) => {
update((users) => { update((users) => {