SoundMeterWidget no longer instantiate new SoundMeter
This commit is contained in:
Hanusiak Piotr
parent
40aae25e11
commit
a4cd626c41
@ -5,6 +5,7 @@
|
||||
audioConstraintStore,
|
||||
cameraListStore,
|
||||
localStreamStore,
|
||||
localVolumeStore,
|
||||
microphoneListStore,
|
||||
videoConstraintStore,
|
||||
} from "../../Stores/MediaStore";
|
||||
@ -18,6 +19,7 @@
|
||||
export let game: Game;
|
||||
let selectedCamera: string | undefined = undefined;
|
||||
let selectedMicrophone: string | undefined = undefined;
|
||||
let volume = 0;
|
||||
|
||||
const enableCameraScene = game.scene.getScene(EnableCameraSceneName) as EnableCameraScene;
|
||||
|
||||
@ -38,7 +40,7 @@
|
||||
|
||||
let stream: MediaStream | null;
|
||||
|
||||
const unsubscribe = localStreamStore.subscribe((value) => {
|
||||
const unsubscribeLocalStreamStore = localStreamStore.subscribe((value) => {
|
||||
if (value.type === "success") {
|
||||
stream = value.stream;
|
||||
|
||||
@ -59,7 +61,14 @@
|
||||
}
|
||||
});
|
||||
|
||||
onDestroy(unsubscribe);
|
||||
const unsubscribeLocalVolumeStore = localVolumeStore.subscribe((value) => {
|
||||
volume = value ?? 0;
|
||||
});
|
||||
|
||||
onDestroy(() => {
|
||||
unsubscribeLocalVolumeStore();
|
||||
unsubscribeLocalStreamStore();
|
||||
});
|
||||
|
||||
function normalizeDeviceName(label: string): string {
|
||||
// remove IDs (that can appear in Chrome, like: "HD Pro Webcam (4df7:4eda)"
|
||||
@ -86,7 +95,7 @@
|
||||
<img class="background-img" src={cinemaCloseImg} alt="" />
|
||||
</div>
|
||||
{/if}
|
||||
<HorizontalSoundMeterWidget {stream} />
|
||||
<HorizontalSoundMeterWidget {volume} />
|
||||
|
||||
<section class="selectWebcamForm">
|
||||
{#if $cameraListStore.length > 1}
|
||||
|
||||
@ -1,50 +1,9 @@
|
||||
<script lang="typescript">
|
||||
import { AudioContext } from "standardized-audio-context";
|
||||
import { SoundMeter } from "../../Phaser/Components/SoundMeter";
|
||||
import { onDestroy } from "svelte";
|
||||
|
||||
export let stream: MediaStream | null;
|
||||
let volume = 0;
|
||||
export let volume = 0;
|
||||
|
||||
const NB_BARS = 20;
|
||||
|
||||
let timeout: ReturnType<typeof setTimeout>;
|
||||
const soundMeter = new SoundMeter();
|
||||
let display = false;
|
||||
let error = false;
|
||||
|
||||
$: {
|
||||
if (stream && stream.getAudioTracks().length > 0) {
|
||||
display = true;
|
||||
soundMeter.connectToSource(stream, new AudioContext());
|
||||
|
||||
if (timeout) {
|
||||
clearInterval(timeout);
|
||||
error = false;
|
||||
}
|
||||
|
||||
timeout = setInterval(() => {
|
||||
try {
|
||||
volume = parseInt(((soundMeter.getVolume() / 100) * NB_BARS).toFixed(0));
|
||||
} catch (err) {
|
||||
if (!error) {
|
||||
console.error(err);
|
||||
error = true;
|
||||
}
|
||||
}
|
||||
}, 100);
|
||||
} else {
|
||||
display = false;
|
||||
}
|
||||
}
|
||||
|
||||
onDestroy(() => {
|
||||
soundMeter.stop();
|
||||
if (timeout) {
|
||||
clearInterval(timeout);
|
||||
}
|
||||
});
|
||||
|
||||
function color(i: number, volume: number) {
|
||||
const red = (255 * i) / NB_BARS;
|
||||
const green = 255 * (1 - i / NB_BARS);
|
||||
@ -58,7 +17,7 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="horizontal-sound-meter" class:active={display}>
|
||||
<div class="horizontal-sound-meter" class:active={volume !== undefined}>
|
||||
{#each [...Array(NB_BARS).keys()] as i (i)}
|
||||
<div style={color(i, volume)} />
|
||||
{/each}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<script lang="typescript">
|
||||
import { obtainedMediaConstraintStore } from "../Stores/MediaStore";
|
||||
import { localVolumeStore, obtainedMediaConstraintStore } from "../Stores/MediaStore";
|
||||
import { localStreamStore, isSilentStore } from "../Stores/MediaStore";
|
||||
import SoundMeterWidget from "./SoundMeterWidget.svelte";
|
||||
import { onDestroy, onMount } from "svelte";
|
||||
@ -7,8 +7,9 @@
|
||||
import LL from "../i18n/i18n-svelte";
|
||||
|
||||
let stream: MediaStream | null;
|
||||
let volume = 0;
|
||||
|
||||
const unsubscribe = localStreamStore.subscribe((value) => {
|
||||
const unsubscribeLocalStreamStore = localStreamStore.subscribe((value) => {
|
||||
if (value.type === "success") {
|
||||
stream = value.stream;
|
||||
} else {
|
||||
@ -16,7 +17,14 @@
|
||||
}
|
||||
});
|
||||
|
||||
onDestroy(unsubscribe);
|
||||
const unsubscribeLocalVolumeStore = localVolumeStore.subscribe((value) => {
|
||||
volume = value ?? 0;
|
||||
});
|
||||
|
||||
onDestroy(() => {
|
||||
unsubscribeLocalStreamStore();
|
||||
unsubscribeLocalVolumeStore();
|
||||
});
|
||||
|
||||
let isSilent: boolean;
|
||||
const unsubscribeIsSilent = isSilentStore.subscribe((value) => {
|
||||
@ -51,7 +59,7 @@
|
||||
<div class="is-silent">{$LL.camera.my.silentZone()}</div>
|
||||
{:else if $localStreamStore.type === "success" && $localStreamStore.stream}
|
||||
<video class="my-cam-video" use:srcObject={stream} autoplay muted playsinline />
|
||||
<SoundMeterWidget {stream} />
|
||||
<SoundMeterWidget {volume} />
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
|
||||
@ -1,47 +1,6 @@
|
||||
<script lang="typescript">
|
||||
import { AudioContext } from "standardized-audio-context";
|
||||
import { SoundMeter } from "../Phaser/Components/SoundMeter";
|
||||
import { onDestroy } from "svelte";
|
||||
|
||||
export let stream: MediaStream | null;
|
||||
let volume = 0;
|
||||
|
||||
let timeout: ReturnType<typeof setTimeout>;
|
||||
const soundMeter = new SoundMeter();
|
||||
let display = false;
|
||||
let error = false;
|
||||
|
||||
$: {
|
||||
if (stream && stream.getAudioTracks().length > 0) {
|
||||
display = true;
|
||||
soundMeter.connectToSource(stream, new AudioContext());
|
||||
|
||||
if (timeout) {
|
||||
clearInterval(timeout);
|
||||
error = false;
|
||||
}
|
||||
|
||||
timeout = setInterval(() => {
|
||||
try {
|
||||
volume = soundMeter.getVolume();
|
||||
} catch (err) {
|
||||
if (!error) {
|
||||
console.error(err);
|
||||
error = true;
|
||||
}
|
||||
}
|
||||
}, 100);
|
||||
} else {
|
||||
display = false;
|
||||
}
|
||||
}
|
||||
|
||||
onDestroy(() => {
|
||||
soundMeter.stop();
|
||||
if (timeout) {
|
||||
clearInterval(timeout);
|
||||
}
|
||||
});
|
||||
export let volume = 0;
|
||||
let display = true;
|
||||
</script>
|
||||
|
||||
<div class="sound-progress" class:active={display}>
|
||||
|
||||
@ -11,13 +11,14 @@
|
||||
import type { Streamable } from "../../Stores/StreamableCollectionStore";
|
||||
|
||||
import Woka from "../Woka/Woka.svelte";
|
||||
import { onMount } from "svelte";
|
||||
import { onDestroy, onMount } from "svelte";
|
||||
import { isMediaBreakpointOnly } from "../../Utils/BreakpointsUtils";
|
||||
|
||||
export let clickable = false;
|
||||
|
||||
export let peer: VideoPeer;
|
||||
let streamStore = peer.streamStore;
|
||||
let volumeStore = peer.volumeStore;
|
||||
let name = peer.userName;
|
||||
let statusStore = peer.statusStore;
|
||||
let constraintStore = peer.constraintsStore;
|
||||
@ -29,6 +30,11 @@
|
||||
let embedScreen: EmbedScreen;
|
||||
let videoContainer: HTMLDivElement;
|
||||
let minimized = isMediaBreakpointOnly("md");
|
||||
let volume = 0;
|
||||
|
||||
const unsubscribe = volumeStore.subscribe((value) => {
|
||||
volume = value ?? 0;
|
||||
});
|
||||
|
||||
if (peer) {
|
||||
embedScreen = {
|
||||
@ -48,6 +54,10 @@
|
||||
onMount(() => {
|
||||
resizeObserver.observe(videoContainer);
|
||||
});
|
||||
|
||||
onDestroy(() => {
|
||||
unsubscribe();
|
||||
});
|
||||
</script>
|
||||
|
||||
<div
|
||||
@ -93,7 +103,7 @@
|
||||
/>
|
||||
<img src={blockSignImg} draggable="false" on:dragstart|preventDefault={noDrag} class="block-logo" alt="Block" />
|
||||
{#if $constraintStore && $constraintStore.audio !== false}
|
||||
<SoundMeterWidget stream={$streamStore} />
|
||||
<SoundMeterWidget {volume} />
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user