implement #19

CREDITS

@@ -0,0 +1,11 @@
+audon-fe/src/assets/boop.oga
+
+    Copyright: Lucas McCallister
+    URL: http://www.freesound.org/samplesViewSingle.php?id=67091
+    License: CC-BY-SA (relicensed with permission from author)
+
+audon-fe/src/assets/message.oga
+
+    Copyright: Ivica Bukvic
+    URL: http://gnome-look.org/content/show.php/%22Borealis%22+sound+theme?content=12584
+    License: CC-BY-SA

audon-fe/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "audon-fe",
-  "version": "0.1.0-alpha",
+  "version": "0.1.0-alpha2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "audon-fe",
-      "version": "0.1.0-alpha",
+      "version": "0.1.0-alpha2",
       "dependencies": {
         "@intlify/unplugin-vue-i18n": "^0.8.1",
         "@picmo/popup-picker": "^5.7.2",
@@ -15,6 +15,7 @@
         "@vuelidate/validators": "^2.0.0",
         "@vueuse/core": "^9.6.0",
         "axios": "^1.2.0",
+        "howler": "^2.2.3",
         "livekit-client": "^1.5.0",
         "lodash-es": "^4.17.21",
         "luxon": "^3.1.1",
@@ -1999,6 +2000,11 @@
         "tslib": "^2.0.3"
       }
     },
+    "node_modules/howler": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/howler/-/howler-2.2.3.tgz",
+      "integrity": "sha512-QM0FFkw0LRX1PR8pNzJVAY25JhIWvbKMBFM4gqk+QdV+kPXOhleWGCB6AiAF/goGjIHK2e/nIElplvjQwhr0jg=="
+    },
     "node_modules/ignore": {
       "version": "5.2.4",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz",

audon-fe/package.json

@@ -16,6 +16,7 @@
     "@vuelidate/validators": "^2.0.0",
     "@vueuse/core": "^9.6.0",
     "axios": "^1.2.0",
+    "howler": "^2.2.3",
     "livekit-client": "^1.5.0",
     "lodash-es": "^4.17.21",
     "luxon": "^3.1.1",

audon-fe/src/locales/en.yaml

@@ -63,7 +63,7 @@ speakRequest:
   norequest: "No request"
   sent: "Request sent!"
   receive: "New speaker request received!"
-microphoneBlocked: "Your browser has blocked access to the microphone."
+microphoneBlocked: "Your browser has blocked access to the microphone. Check permission settings of your device and browser."
 closeRoomConfirm: "Are you sure you want to close this room?"
 roomEvent:
   closedByHost: "Host has closed this room."

audon-fe/src/locales/fr.yaml

@@ -63,7 +63,7 @@ speakRequest:
   norequest: "Pas de demande"
   sent: "Demande envoyée!"
   receive: "Nouvelle demande de parole reçue !"
-microphoneBlocked: "Votre navigateur a bloqué l'accès au microphone."
+microphoneBlocked: "Votre navigateur a bloqué l'accès au microphone. Vérifiez les paramètres d'autorisation de votre appareil et de votre navigateur."
 closeRoomConfirm: "Vous êtes sûr de vouloir fermer cette salle ?"
 roomEvent:
   closedByHost: "L'hôte a fermé cette salle."

audon-fe/src/locales/ja.yaml

@@ -62,7 +62,7 @@ speakRequest:
   norequest: "リクエストはありません"
   sent: "発言リクエストを送信しました"
   receive: "新しい発言リクエストがあります"
-microphoneBlocked: "ブラウザがマイクの使用を許可していません。"
+microphoneBlocked: "マイクが禁止されています。ブラウザやデバイスの設定からマイクの使用を許可してください。"
 closeRoomConfirm: "この部屋を閉じますか？"
 roomEvent:
   closedByHost: "ホストにより部屋が閉じられました。"

audon-fe/src/views/CreateView.vue

@@ -100,6 +100,7 @@ export default {
       ];
       if (this.description)
         texts.push(truncate("\n" + this.description, { length: 200 }));
+      texts.push("\n#Audon");
       return encodeURI(`${url.origin}/share?text=${texts.join("\n")}`);
     },
   },

audon-fe/src/views/RoomView.vue

@@ -5,6 +5,7 @@ import { useMastodonStore } from "../stores/mastodon";
 import { map, some, omit, filter, trim, clone } from "lodash-es";
 import { darkTheme } from "picmo";
 import { createPopup } from "@picmo/popup-picker";
+import { Howl } from "howler";
 import Participant from "../components/Participant.vue";
 import {
   mdiMicrophone,
@@ -32,6 +33,8 @@ import { useVuelidate } from "@vuelidate/core";
 import { helpers, maxLength, required } from "@vuelidate/validators";
 import NoSleep from "@uriopass/nosleep.js";
 import { DateTime } from "luxon";
+import boopSound from "../assets/boop.oga";
+import messageSound from "../assets/message.oga";
 
 const publishOpts = {
   audioBitrate: AudioPresets.music,
@@ -77,6 +80,16 @@ export default {
       encoder: new TextEncoder(),
       roomClient: new Room(),
       emojiPicker: null,
+      sounds: {
+        boop: new Howl({
+          src: [boopSound],
+          volume: 0.4,
+        }),
+        message: new Howl({
+          src: [messageSound],
+          volume: 0.15,
+        }),
+      },
     };
   },
   components: {
@@ -278,6 +291,7 @@ export default {
             self.activeSpeakerIDs = new Set(map(speakers, (p) => p.identity));
           })
           .on(RoomEvent.ParticipantConnected, (participant) => {
+            if (self.iamHost || self.iamCohost) self.sounds.boop.play();
             const metadata = self.addParticipant(participant);
             if (metadata !== null) {
               self.fetchMastoData(participant.identity, metadata);
@@ -541,6 +555,8 @@ export default {
     },
     addEmojiReaction(identity, emoji) {
       const self = this;
+      if (self.iamHost || self.iamCohost || self.iamSpeaker)
+        self.sounds.message.play();
       if (self.emojiReactions[identity]) {
         clearTimeout(self.emojiReactions[identity].timeoutID);
       }

audon-fe/vite.config.js

@@ -15,6 +15,7 @@ export default defineConfig({
       include: "./src/locales/*.yaml",
     }),
   ],
+  assetsInclude: ["**/*.oga"],
   resolve: {
     alias: {
       "@": fileURLToPath(new URL("./src", import.meta.url)),