From 3b4d3f08f6c42018b1d6333a75217b10780e20a9 Mon Sep 17 00:00:00 2001 From: N-Pex Date: Tue, 6 May 2025 11:34:53 +0200 Subject: [PATCH] Replace deprecated $on and $off with tiny-emitter --- package-lock.json | 4 +++- package.json | 1 + src/components/AudioLayout.vue | 17 +++++++++-------- src/components/Chat.vue | 6 +++--- src/main.js | 2 -- src/services/audio.service.js | 9 +++++---- 6 files changed, 21 insertions(+), 18 deletions(-) diff --git a/package-lock.json b/package-lock.json index e8821d8..6e500f6 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 73f97d7..d676ae8 100644 --- a/package.json +++ b/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", diff --git a/src/components/AudioLayout.vue b/src/components/AudioLayout.vue index 6cc4617..a643b39 100644 --- a/src/components/AudioLayout.vue +++ b/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); - this.$root.$on('audio-playback-paused', this.audioPlaybackPaused); - this.$root.$on('audio-playback-ended', this.audioPlaybackEnded); - this.$root.$on('audio-playback-reaction', this.audioPlaybackReaction); + emitter.on('audio-playback-started', this.audioPlaybackStarted); + emitter.on('audio-playback-paused', this.audioPlaybackPaused); + emitter.on('audio-playback-ended', this.audioPlaybackEnded); + 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); - this.$root.$off('audio-playback-paused', this.audioPlaybackPaused); - this.$root.$off('audio-playback-ended', this.audioPlaybackEnded); - this.$root.$off('audio-playback-reaction', this.audioPlaybackReaction); + emitter.off('audio-playback-started', this.audioPlaybackStarted); + emitter.off('audio-playback-paused', this.audioPlaybackPaused); + emitter.off('audio-playback-ended', this.audioPlaybackEnded); + emitter.off('audio-playback-reaction', this.audioPlaybackReaction); document.body.classList.remove("dark"); this.$audioPlayer.removeListener(this._uid); this.currentAudioEvent = null; diff --git a/src/components/Chat.vue b/src/components/Chat.vue index 3a1e295..e5443f0 100644 --- a/src/components/Chat.vue +++ b/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) { diff --git a/src/main.js b/src/main.js index 8bb9e8c..a724952 100644 --- a/src/main.js +++ b/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); diff --git a/src/services/audio.service.js b/src/services/audio.service.js index 348cf25..e9cc3ed 100644 --- a/src/services/audio.service.js +++ b/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); } }); }