_Bastler/partey_workadventure
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Allow audio (#1991)

Browse Source 
* Removing old unused images

Just a bit of cleanup!

* Allow audio feature

* Pretty

* Ignored screenshot folder

* Added manual test

* Simplified test map

Co-authored-by: Valdo Romao <v.romao@thecodingmachine.com>
This commit is contained in:
Valdo 2022-03-21 15:22:51 +00:00 committed by GitHub
parent 705c75e3c7
commit 6d9a3f45dc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 341 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

118
front/src/Components/AudioManager/AudioManager.svelte
View File

@ -13,20 +13,20 @@
let unsubscriberFileStore: Unsubscriber | null = null;
let unsubscriberVolumeStore: Unsubscriber | null = null;
let decreaseWhileTalking: boolean = true;
let isAudioAllowed: boolean = true;
onMount(() => {
let volume = Math.min(localUserStore.getAudioPlayerVolume(), get(audioManagerVolumeStore).volume);
audioManagerVolumeStore.setVolume(volume);
audioManagerVolumeStore.setMuted(localUserStore.getAudioPlayerMuted());
unsubscriberFileStore = audioManagerFileStore.subscribe((src) => {
unsubscriberFileStore = audioManagerFileStore.subscribe((src: string) => {
HTMLAudioPlayer.pause();
HTMLAudioPlayer.src = src;
HTMLAudioPlayer.loop = get(audioManagerVolumeStore).loop;
HTMLAudioPlayer.volume = get(audioManagerVolumeStore).volume;
HTMLAudioPlayer.muted = get(audioManagerVolumeStore).muted;
void HTMLAudioPlayer.play();
tryPlay();
});
unsubscriberVolumeStore = audioManagerVolumeStore.subscribe((audioManager: audioManagerVolume) => {
const reduceVolume = audioManager.talking && audioManager.decreaseWhileTalking;
@ -52,6 +52,16 @@
}
});
function tryPlay() {
void HTMLAudioPlayer.play()
.then(() => {
isAudioAllowed = true;
})
.catch(() => {
isAudioAllowed = false;
});
}
function updateVolumeUI() {
if (get(audioManagerVolumeStore).muted) {
audioPlayerVolumeIcon.classList.add("muted");
@ -90,73 +100,67 @@
audioPlayerVol.blur();
return false;
}
function setDecrease() {
audioManagerVolumeStore.setDecreaseWhileTalking(decreaseWhileTalking);
}
</script>
<div class="main-audio-manager nes-container is-rounded">
<div class="audio-manager-player-volume">
<span
id="audioplayer_volume_icon_playing"
alt="player volume"
bind:this={audioPlayerVolumeIcon}
on:click={onMute}
>
<svg
width="2em"
height="2em"
viewBox="0 0 16 16"
class="bi bi-volume-up"
fill="white"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M6.717 3.55A.5.5 0 0 1 7 4v8a.5.5 0 0 1-.812.39L3.825 10.5H1.5A.5.5 0 0 1 1 10V6a.5.5 0 0 1 .5-.5h2.325l2.363-1.89a.5.5 0 0 1 .529-.06zM6 5.04L4.312 6.39A.5.5 0 0 1 4 6.5H2v3h2a.5.5 0 0 1 .312.11L6 10.96V5.04z"
/>
<g id="audioplayer_volume_icon_playing_high">
<div class:hidden={!isAudioAllowed}>
<div class="audio-manager-player-volume">
<span id="audioplayer_volume_icon_playing" bind:this={audioPlayerVolumeIcon} on:click={onMute}>
<svg
width="2em"
height="2em"
viewBox="0 0 16 16"
class="bi bi-volume-up"
fill="white"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.536 14.01A8.473 8.473 0 0 0 14.026 8a8.473 8.473 0 0 0-2.49-6.01l-.708.707A7.476 7.476 0 0 1 13.025 8c0 2.071-.84 3.946-2.197 5.303l.708.707z"
fill-rule="evenodd"
d="M6.717 3.55A.5.5 0 0 1 7 4v8a.5.5 0 0 1-.812.39L3.825 10.5H1.5A.5.5 0 0 1 1 10V6a.5.5 0 0 1 .5-.5h2.325l2.363-1.89a.5.5 0 0 1 .529-.06zM6 5.04L4.312 6.39A.5.5 0 0 1 4 6.5H2v3h2a.5.5 0 0 1 .312.11L6 10.96V5.04z"
/>
</g>
<g id="audioplayer_volume_icon_playing_mid">
<path
d="M10.121 12.596A6.48 6.48 0 0 0 12.025 8a6.48 6.48 0 0 0-1.904-4.596l-.707.707A5.483 5.483 0 0 1 11.025 8a5.483 5.483 0 0 1-1.61 3.89l.706.706z"
/>
</g>
<g id="audioplayer_volume_icon_playing_low">
<path
d="M8.707 11.182A4.486 4.486 0 0 0 10.025 8a4.486 4.486 0 0 0-1.318-3.182L8 5.525A3.489 3.489 0 0 1 9.025 8 3.49 3.49 0 0 1 8 10.475l.707.707z"
/>
</g>
</svg>
</span>
<input
type="range"
min="0"
max="1"
step="0.025"
bind:this={audioPlayerVol}
on:change={setVolume}
on:keydown={disallowKeys}
/>
</div>
<div class="audio-manager-reduce-conversation">
<label>
{$LL.audio.manager.reduce()}
<input type="checkbox" bind:checked={decreaseWhileTalking} on:change={setDecrease} />
</label>
<g id="audioplayer_volume_icon_playing_high">
<path
d="M11.536 14.01A8.473 8.473 0 0 0 14.026 8a8.473 8.473 0 0 0-2.49-6.01l-.708.707A7.476 7.476 0 0 1 13.025 8c0 2.071-.84 3.946-2.197 5.303l.708.707z"
/>
</g>
<g id="audioplayer_volume_icon_playing_mid">
<path
d="M10.121 12.596A6.48 6.48 0 0 0 12.025 8a6.48 6.48 0 0 0-1.904-4.596l-.707.707A5.483 5.483 0 0 1 11.025 8a5.483 5.483 0 0 1-1.61 3.89l.706.706z"
/>
</g>
<g id="audioplayer_volume_icon_playing_low">
<path
d="M8.707 11.182A4.486 4.486 0 0 0 10.025 8a4.486 4.486 0 0 0-1.318-3.182L8 5.525A3.489 3.489 0 0 1 9.025 8 3.49 3.49 0 0 1 8 10.475l.707.707z"
/>
</g>
</svg>
</span>
<input
type="range"
min="0"
max="1"
step="0.025"
bind:this={audioPlayerVol}
on:change={setVolume}
on:keydown={disallowKeys}
/>
</div>
<section class="audio-manager-file">
<!-- svelte-ignore a11y-media-has-caption -->
<audio class="audio-manager-audioplayer" bind:this={HTMLAudioPlayer} />
</section>
</div>
<div class:hidden={isAudioAllowed}>
<button type="button" class="nes-btn" on:click={tryPlay}>{$LL.audio.manager.allow()}</button>
</div>
</div>
<style lang="scss">
div.main-audio-manager.nes-container.is-rounded {
.hidden {
display: none;
}
div.main-audio-manager {
position: absolute;
top: 1%;
max-height: clamp(150px, 10vh, 15vh); //replace @media for small screen

17
front/src/Components/Menu/SettingsSubMenu.svelte
View File

@ -7,11 +7,13 @@
import type { Locales } from "../../i18n/i18n-types";
import { displayableLocales, setCurrentLocale } from "../../i18n/locales";
import { isMediaBreakpointUp } from "../../Utils/BreakpointsUtils";
import { audioManagerVolumeStore } from "../../Stores/AudioManagerStore";
let fullscreen: boolean = localUserStore.getFullscreen();
let notification: boolean = localUserStore.getNotification() === "granted";
let forceCowebsiteTrigger: boolean = localUserStore.getForceCowebsiteTrigger();
let ignoreFollowRequests: boolean = localUserStore.getIgnoreFollowRequests();
let decreaseAudioPlayerVolumeWhileTalking: boolean = localUserStore.getDecreaseAudioPlayerVolumeWhileTalking();
let valueGame: number = localUserStore.getGameQualityValue();
let valueVideo: number = localUserStore.getVideoQualityValue();
let valueLocale: string = $locale;
@ -38,6 +40,8 @@
change = true;
}
audioManagerVolumeStore.setDecreaseWhileTalking(decreaseAudioPlayerVolumeWhileTalking);
if (change) {
window.location.reload();
}
@ -82,6 +86,10 @@
localUserStore.setIgnoreFollowRequests(ignoreFollowRequests);
}
function changeDecreaseAudioPlayerVolumeWhileTalking() {
localUserStore.setDecreaseAudioPlayerVolumeWhileTalking(decreaseAudioPlayerVolumeWhileTalking);
}
function closeMenu() {
menuVisiblilityStore.set(false);
}
@ -197,6 +205,15 @@
/>
<span>{$LL.menu.settings.ignoreFollowRequest()}</span>
</label>
<label>
<input
type="checkbox"
class="nes-checkbox is-dark"
bind:checked={decreaseAudioPlayerVolumeWhileTalking}
on:change={changeDecreaseAudioPlayerVolumeWhileTalking}
/>
<span>{$LL.audio.manager.reduce()}</span>
</label>
</section>
</div>

7
front/src/Connexion/LocalUserStore.ts
View File

@ -15,6 +15,7 @@ const helpCameraSettingsShown = "helpCameraSettingsShown";
const fullscreenKey = "fullscreen";
const forceCowebsiteTriggerKey = "forceCowebsiteTrigger";
const ignoreFollowRequests = "ignoreFollowRequests";
const decreaseAudioPlayerVolumeWhileTalking = "decreaseAudioPlayerVolumeWhileTalking";
const lastRoomUrl = "lastRoomUrl";
const authToken = "authToken";
const state = "state";
@ -135,6 +136,12 @@ class LocalUserStore {
getIgnoreFollowRequests(): boolean {
return localStorage.getItem(ignoreFollowRequests) === "true";
}
setDecreaseAudioPlayerVolumeWhileTalking(value: boolean): void {
localStorage.setItem(decreaseAudioPlayerVolumeWhileTalking, value.toString());
}
getDecreaseAudioPlayerVolumeWhileTalking(): boolean {
return localStorage.getItem(decreaseAudioPlayerVolumeWhileTalking) === "true";
}
async setLastRoomUrl(roomUrl: string): Promise<void> {
localStorage.setItem(lastRoomUrl, roomUrl.toString());

3
front/src/i18n/de-DE/audio.ts
View File

@ -2,7 +2,8 @@ import type { Translation } from "../i18n-types";
const audio: NonNullable<Translation["audio"]> = {
manager: {
reduce: "Während Unterhaltungen verringern",
reduce: "Verringern Sie die Lautstärke des Audioplayers während des Sprechens",
allow: "Ton zulassen",
},
message: "Sprachnachricht",
};

3
front/src/i18n/en-US/audio.ts
View File

@ -2,7 +2,8 @@ import type { BaseTranslation } from "../i18n-types";
const audio: BaseTranslation = {
manager: {
reduce: "reduce in conversations",
reduce: "Decrease audio player volume while speaking",
allow: "Allow audio",
},
message: "Audio message",
};

3
front/src/i18n/fr-FR/audio.ts
View File

@ -2,7 +2,8 @@ import type { Translation } from "../i18n-types";
const audio: NonNullable<Translation["audio"]> = {
manager: {
reduce: "réduit dans les conversations",
reduce: "Diminuer le volume du lecteur audio dans les conversations",
allow: "Autoriser l'audio",
},
message: "Message audio",
};

BIN
maps/assets/audio/campfire.ogg Executable file
View File

Binary file not shown.

241
maps/tests/AllowAudio/map.json Normal file
View File

@ -0,0 +1,241 @@
{ "compressionlevel":-1,
"height":10,
"infinite":false,
"layers":[
{
"data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 444, 444, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
"height":10,
"id":6,
"name":"start",
"opacity":1,
"type":"tilelayer",
"visible":true,
"width":10,
"x":0,
"y":0
},
{
"data":[0, 0, 0, 0, 444, 444, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
"height":10,
"id":40,
"name":"no-audio",
"opacity":1,
"properties":[
{
"name":"startLayer",
"type":"bool",
"value":true
}],
"type":"tilelayer",
"visible":true,
"width":10,
"x":0,
"y":0
},
{
"data":[201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201],
"height":10,
"id":4,
"name":"floor",
"opacity":1,
"type":"tilelayer",
"visible":true,
"width":10,
"x":0,
"y":0
},
{
"data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 449, 449, 449, 449, 449, 449, 449, 449, 449, 449, 449, 449, 449, 449, 449, 449, 449, 449, 449, 449],
"height":10,
"id":39,
"name":"audio",
"opacity":1,
"properties":[
{
"name":"audioLoop",
"type":"bool",
"value":true
},
{
"name":"playAudio",
"type":"string",
"value":"..\/..\/assets\/audio\/campfire.ogg"
}],
"type":"tilelayer",
"visible":true,
"width":10,
"x":0,
"y":0
},
{
"draworder":"topdown",
"id":2,
"name":"floorLayer",
"objects":[
{
"height":227.294588060257,
"id":9,
"name":"",
"rotation":0,
"text":
{
"fontfamily":"Sans Serif",
"pixelsize":13,
"text":"\"Allow audio\" button test case:\n\n1. Reload the page (to trigger the audio without a user gesture)\n2. You should see the \"Allow audio\" button\n3. Click on that button to allow the audio to be played\n\n(in some situations a user gesture is mandatory to play audio: like on mobile or on desktop without a user gesture in the same domain during the same session)\n\n(use #no-audio start layer to spawn outside the audio zone)",
"wrap":true
},
"type":"",
"visible":true,
"width":317.982661490298,
"x":1.53139349868751,
"y":29.8384428152397
}],
"opacity":1,
"type":"objectgroup",
"visible":true,
"x":0,
"y":0
}],
"nextlayerid":41,
"nextobjectid":10,
"orientation":"orthogonal",
"properties":[
{
"name":"mapCopyright",
"type":"string",
"value":"Credits: Valdo Romao https:\/\/www.linkedin.com\/in\/valdo-romao\/ \nLicense: CC-BY-SA 3.0 (http:\/\/creativecommons.org\/licenses\/by-sa\/3.0\/)"
},
{
"name":"mapDescription",
"type":"string",
"value":"A perfect virtual office to get started with WorkAdventure!"
},
{
"name":"mapImage",
"type":"string",
"value":"map.png"
},
{
"name":"mapLink",
"type":"string",
"value":"https:\/\/thecodingmachine.github.io\/workadventure-map-starter-kit\/map.json"
},
{
"name":"mapName",
"type":"string",
"value":"Allow audio test"
}],
"renderorder":"right-down",
"tiledversion":"1.8.2",
"tileheight":32,
"tilesets":[
{
"columns":10,
"firstgid":1,
"image":"..\/..\/assets\/tileset5_export.png",
"imageheight":320,
"imagewidth":320,
"margin":0,
"name":"tileset5_export",
"properties":[
{
"name":"tilesetCopyright",
"type":"string",
"value":"\u00a9 2021 WorkAdventure <https:\/\/workadventu.re\/> \nLicence: WORKADVENTURE SPECIFIC RESOURCES LICENSE (see LICENSE.assets file)"
}],
"spacing":0,
"tilecount":100,
"tileheight":32,
"tilewidth":32
},
{
"columns":10,
"firstgid":101,
"image":"..\/..\/assets\/tileset6_export.png",
"imageheight":320,
"imagewidth":320,
"margin":0,
"name":"tileset6_export",
"properties":[
{
"name":"tilesetCopyright",
"type":"string",
"value":"\u00a9 2021 WorkAdventure <https:\/\/workadventu.re\/> \nLicence: WORKADVENTURE SPECIFIC RESOURCES LICENSE (see LICENSE.assets file)"
}],
"spacing":0,
"tilecount":100,
"tileheight":32,
"tilewidth":32
},
{
"columns":11,
"firstgid":201,
"image":"..\/..\/assets\/tileset1.png",
"imageheight":352,
"imagewidth":352,
"margin":0,
"name":"tileset1",
"properties":[
{
"name":"tilesetCopyright",
"type":"string",
"value":"\u00a9 2021 WorkAdventure <https:\/\/workadventu.re\/> \nLicence: WORKADVENTURE SPECIFIC RESOURCES LICENSE (see LICENSE.assets file)"
}],
"spacing":0,
"tilecount":121,
"tileheight":32,
"tilewidth":32
},
{
"columns":11,
"firstgid":322,
"image":"..\/..\/assets\/tileset1-repositioning.png",
"imageheight":352,
"imagewidth":352,
"margin":0,
"name":"tileset1-repositioning",
"properties":[
{
"name":"tilesetCopyright",
"type":"string",
"value":"\u00a9 2021 WorkAdventure <https:\/\/workadventu.re\/> \nLicence: WORKADVENTURE SPECIFIC RESOURCES LICENSE (see LICENSE.assets file)"
}],
"spacing":0,
"tilecount":121,
"tileheight":32,
"tilewidth":32
},
{
"columns":6,
"firstgid":443,
"image":"..\/..\/assets\/Special_Zones.png",
"imageheight":64,
"imagewidth":192,
"margin":0,
"name":"Special_Zones",
"properties":[
{
"name":"tilesetCopyright",
"type":"string",
"value":"\u00a9 2021 WorkAdventure <https:\/\/workadventu.re\/> \nLicence: WORKADVENTURE SPECIFIC RESOURCES LICENSE (see LICENSE.assets file)"
}],
"spacing":0,
"tilecount":12,
"tileheight":32,
"tiles":[
{
"id":0,
"properties":[
{
"name":"collides",
"type":"bool",
"value":true
}]
}],
"tilewidth":32
}],
"tilewidth":32,
"type":"map",
"version":"1.8",
"width":10
}

8
maps/tests/index.html
View File

@ -128,6 +128,14 @@
<a href="#" class="testLink" data-testmap="audio.json" target="_blank">Testing audio layer</a>
</td>
</tr>
<tr>
<td>
<input type="radio" name="test-allow-audio"> Success <input type="radio" name="test-allow-audio"> Failure <input type="radio" name="test-allow-audio" checked> Pending
</td>
<td>
<a href="#" class="testLink" data-testmap="AllowAudio/map.json" target="_blank">Test audio on start zone and mobile</a>
</td>
</tr>
<tr>
<td>
<input type="radio" name="test-jitsi-silent"> Success <input type="radio" name="test-jitsi-silent"> Failure <input type="radio" name="test-jitsi-silent" checked> Pending

1
tests/.gitignore vendored
View File

@ -1,3 +1,4 @@
/node_modules
test-results/
playwright-report/
/screenshots