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">
import type {VideoPeer} from "../../WebRtc/VideoPeer";
import type { VideoPeer } from "../../WebRtc/VideoPeer";
import SoundMeterWidget from "../SoundMeterWidget.svelte";
import microphoneCloseImg from "../images/microphone-close.svg";
import reportImg from "./images/report.svg";
import blockSignImg from "./images/blockSign.svg";
import {videoFocusStore} from "../../Stores/VideoFocusStore";
import {showReportScreenStore} from "../../Stores/ShowReportScreenStore";
import {getColorByString, srcObject} from "./utils";
import { videoFocusStore } from "../../Stores/VideoFocusStore";
import { showReportScreenStore } from "../../Stores/ShowReportScreenStore";
import { userWokaPictureStore } from "../../Stores/UserWokaPictureStore";
import { getColorByString, srcObject } from "./utils";
import { onDestroy } from "svelte";
export let peer: VideoPeer;
let streamStore = peer.streamStore;
@ -14,33 +16,56 @@
let statusStore = peer.statusStore;
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 {
showReportScreenStore.set({ userId:peer.userId, userName: peer.userName });
showReportScreenStore.set({ userId: peer.userId, userName: peer.userName });
}
onDestroy(unsubscribeFromUserWokaPictureStore);
</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 !$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 $constraintStore && $constraintStore.audio === false}
<img src={microphoneCloseImg} class="active" alt="Muted">
<img src={microphoneCloseImg} class="active" alt="Muted" />
{/if}
<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>
</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" />
{#if $constraintStore && $constraintStore.audio !== false}
<SoundMeterWidget stream={$streamStore}></SoundMeterWidget>
<SoundMeterWidget stream={$streamStore} />
{/if}
</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
*/
function createUserWokaPictureStore() {
let players = new Map<number, string>();
const players = new Map<number, string>();
const { subscribe, update } = writable(players);
return {
subscribe,
// P.H. NOTE: Not clearing the store after reconnecting to the room - is this a problem?
connectToRoomConnection: (roomConnection: RoomConnection) => {
roomConnection.onUserLeft((userId) => {
update((users) => {