Replace deprecated $on and $off with tiny-emitter

package-lock.json

@@ -38,6 +38,7 @@
         "raw-loader": "^4.0.2",
         "roboto-fontface": "*",
         "stream-browserify": "^3.0.0",
+        "tiny-emitter": "^2.1.0",
         "util": "^0.12.5",
         "vue": "^3.5.13",
         "vue-3-sanitize": "^0.1.4",
@@ -6996,7 +6997,8 @@
     "node_modules/tiny-emitter": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
-      "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q=="
+      "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==",
+      "license": "MIT"
     },
     "node_modules/tinyglobby": {
       "version": "0.2.12",

package.json

@@ -39,6 +39,7 @@
     "raw-loader": "^4.0.2",
     "roboto-fontface": "*",
     "stream-browserify": "^3.0.0",
+    "tiny-emitter": "^2.1.0",
     "util": "^0.12.5",
     "vue": "^3.5.13",
     "vue-3-sanitize": "^0.1.4",

src/components/AudioLayout.vue

@@ -87,6 +87,7 @@ import messageMixin from "./messages/messageMixin";
 import util from "../plugins/utils";
 import AuthedImage from "./AuthedImage.vue";
 import clapping from "@/assets/sounds/clapping.mp3";
+import emitter from 'tiny-emitter/instance';
 
 export default {
   mixins: [messageMixin],
@@ -131,18 +132,18 @@ export default {
     };
   },
   mounted() {
-    this.$root.$on('audio-playback-started', this.audioPlaybackStarted);
+    emitter.on('audio-playback-started', this.audioPlaybackStarted);
-    this.$root.$on('audio-playback-paused', this.audioPlaybackPaused);
+    emitter.on('audio-playback-paused', this.audioPlaybackPaused);
-    this.$root.$on('audio-playback-ended', this.audioPlaybackEnded);
+    emitter.on('audio-playback-ended', this.audioPlaybackEnded);
-    this.$root.$on('audio-playback-reaction', this.audioPlaybackReaction);
+    emitter.on('audio-playback-reaction', this.audioPlaybackReaction);
     document.body.classList.add("dark");
     this.$audioPlayer.setAutoplay(false);
   },
   beforeDestroy() {
-    this.$root.$off('audio-playback-started', this.audioPlaybackStarted);
+    emitter.off('audio-playback-started', this.audioPlaybackStarted);
-    this.$root.$off('audio-playback-paused', this.audioPlaybackPaused);
+    emitter.off('audio-playback-paused', this.audioPlaybackPaused);
-    this.$root.$off('audio-playback-ended', this.audioPlaybackEnded);
+    emitter.off('audio-playback-ended', this.audioPlaybackEnded);
-    this.$root.$off('audio-playback-reaction', this.audioPlaybackReaction);
+    emitter.off('audio-playback-reaction', this.audioPlaybackReaction);
     document.body.classList.remove("dark");
     this.$audioPlayer.removeListener(this._uid);
     this.currentAudioEvent = null;

src/components/Chat.vue

@@ -397,7 +397,7 @@ import { imageSize } from "image-size";
 import prettyBytes from "pretty-bytes";
 import RoomExport from "./RoomExport.vue";
 import EmojiPicker from 'vue3-emoji-picker';
-
+import emitter from 'tiny-emitter/instance';
 
 const READ_RECEIPT_TIMEOUT = 5000; /* How long a message must have been visible before the read marker is updated */
 const WINDOW_BUFFER_SIZE = 0.3; /** Relative window height of when we start paginating. Always keep this much loaded before and after our scroll position!  */
@@ -562,7 +562,7 @@ export default {
   },
 
   mounted() {
-    this.$root.$on('audio-playback-ended', this.audioPlaybackEnded);
+    emitter.on('audio-playback-ended', this.audioPlaybackEnded);
     const container = this.chatContainer;
     if (container) {
       this.scrollPosition = new ScrollPosition(container);
@@ -573,7 +573,7 @@ export default {
   },
 
   beforeDestroy() {
-    this.$root.$off('audio-playback-ended', this.audioPlaybackEnded);
+    emitter.off('audio-playback-ended', this.audioPlaybackEnded);
     this.$audioPlayer.pause();
     this.stopRRTimer();
     if (this.retentionTimer) {

src/main.js

@@ -182,8 +182,6 @@ app.use(i18n);
 
 app.use(matrix, { store: store, i18n: i18n });
 
-app.config.globalProperties.$root = app;
-
 //app.use(matrix);
 //app.use(config);
 // app.use(analytics);

src/services/audio.service.js

@@ -1,4 +1,5 @@
 import utils from "../plugins/utils";
+import emitter from 'tiny-emitter/instance';
 
 /**
  * This plugin (available in all vue components as $audioPlayer) handles
@@ -189,14 +190,14 @@ export default {
         if (entry) {
           entry.playing = true;
         }
-        this.$root.$emit("audio-playback-started", this.currentEvent);
+        emitter.emit("audio-playback-started", this.currentEvent);
       }
       onPause() {
         var entry = this.infoMap.get(this.currentEvent);
         if (entry) {
           entry.playing = false;
         }
-        this.$root.$emit("audio-playback-paused", this.currentEvent);
+        emitter.emit("audio-playback-paused", this.currentEvent);
       }
       onEnded() {
         var entry = this.infoMap.get(this.currentEvent);
@@ -204,7 +205,7 @@ export default {
           entry.playing = false;
           entry.currentTime = entry.duration; // Next time restart
         }
-        this.$root.$emit("audio-playback-ended", this.currentEvent);
+        emitter.emit("audio-playback-ended", this.currentEvent);
       }
       onTimeUpdate() {
         var entry = this.infoMap.get(this.currentEvent);
@@ -257,7 +258,7 @@ export default {
       maybePlayClapEvent(previousTimeMs, timeNowMs) {
         (this.currentClapReactions || []).forEach(reaction => {
           if (previousTimeMs < reaction.timeOffset && timeNowMs >= reaction.timeOffset) {
-            this.$root.$emit("audio-playback-reaction", reaction);
+            emitter.emit("audio-playback-reaction", reaction);
           }
         });
       }