Start on Vue 3 changes

src/services/analytics.service.js

@@ -2,8 +2,8 @@ import cleaninsights from './cleaninsights.service'
 import matomo from './matomo.service'
 
 export default {
-    install(Vue) {
-        const analyticsService = new Vue({
+    install(app) {
+        const analyticsService = ({
             data() {
                 return {
                     engines: [],
@@ -60,6 +60,8 @@ export default {
                 }
             }
         });
-        Vue.prototype.$analytics = analyticsService;
+
+        app.$analytics = analyticsService;
+        app.config.globalProperties.$analytics = analyticsService;
     }
 }

src/services/audio.service.js

@@ -9,7 +9,7 @@ import utils from "../plugins/utils";
  * an audio matrix event and a unique component id (for example the ._uid property).
  */
 export default {
-  install(Vue) {
+  install(app) {
     class SharedAudioPlayer {
       constructor() {
         this.player = new Audio();
@@ -34,12 +34,12 @@ export default {
             // Listeners is just a Set of component "uid" entries for now.
           entry = { url: null, listeners: new Set() };
           // Make these reactive, so AudioPlayer (and others) can listen to them
-          Vue.set(entry, "loading", false);
-          Vue.set(entry, "loadPercent", 0);
-          Vue.set(entry, "duration", 0);
-          Vue.set(entry, "currentTime", 0);
-          Vue.set(entry, "playPercent", 0);
-          Vue.set(entry, "playing", false);
+          entry["loading"] = false;
+          entry["loadPercent"] = 0;
+          entry["duration"] = 0;
+          entry["currentTime"] = 0;
+          entry["playPercent"] = 0;
+          entry["playing"] = false;
           this.infoMap.set(eventId, entry);
 
           // Get duration information
@@ -263,6 +263,8 @@ export default {
       }
     }
 
-    Vue.prototype.$audioPlayer = new SharedAudioPlayer();
+    const audioPlayer = new SharedAudioPlayer();
+    app.$audioPlayer = audioPlayer;
+    app.config.globalProperties.$audioPlayer = audioPlayer;
   },
 };

src/services/config.service.js

@@ -1,9 +1,9 @@
 import * as defaultConfig from "@/assets/config.json";
 
 export default {
-    install(Vue, defaultServerFromLocation, onloaded) {
-        var config = Vue.observable(defaultConfig.default);
-        Vue.set(config, "loaded", false);
+    install(app, defaultServerFromLocation, onloaded) {
+        var config = defaultConfig.default;
+        config["loaded"] = false;
         const getRuntimeConfig = () => {
             return fetch('./config.json?ms=' + Date.now()).then((res) => res.json()).catch(err => {
                 console.error("Failed to get config:", err);
@@ -14,25 +14,25 @@ export default {
         config.promise = getRuntimeConfig().then((json) => {
             // Reactively use all the config values
             for (const key of Object.keys(json)) {
-                Vue.set(config, key, json[key]);
+                config[key] = json[key];
             }
             // If default server is not set, default to current server address
             if (!json.defaultBaseUrl) {
                 if (json.defaultServer) {
                     // TODO - Only to migrate old values (defaultServer was renamed defaultBaseUrl), can be removed later...
-                    Vue.set(config, "defaultBaseUrl", defaultServerFromLocation);
+                    config["defaultBaseUrl"] = defaultServerFromLocation;
                 } else {
-                    Vue.set(config, "defaultBaseUrl", json.defaultServer);
+                    config["defaultBaseUrl"] = json.defaultServer;
                 }
             }
             if (json.useFullyQualifiedDMLinks == undefined) {
-                Vue.set(config, "useFullyQualifiedDMLinks", true); // Default to true
+                config["useFullyQualifiedDMLinks"] = true; // Default to true
             }
             if (json.disableMediaSharing == undefined) {
                 Vue.set(config, "disableMediaSharing", false);
             }
             if (!json.maxSizeAutoDownloads) {
-                Vue.set(config, "maxSizeAutoDownloads", 10 * 1024 * 1024);
+                config["maxSizeAutoDownloads"] = 10 * 1024 * 1024;
             }
             if (!json.roomTypes) {
                 let roomTypes = ["group_chat", "channel"];
@@ -40,9 +40,9 @@ export default {
                 if (fileDropEnabled) {
                     roomTypes.push("file_drop");
                 }
-                Vue.set(config, "roomTypes", roomTypes);
+                config["roomTypes"] = roomTypes;
             }
-            Vue.set(config, "loaded", true);
+            config["loaded"] = true;
 
             document.title = config.appName || "";
 
@@ -70,6 +70,7 @@ export default {
             return undefined;
         }
 
-        Vue.prototype.$config = config;
+        app.$config = config;
+        app.config.globalProperties.$config = config;
     }
 }

src/services/navigation.service.js

@@ -1,5 +1,5 @@
 export default {
-    install(Vue, router) {
+    install(app, router) {
         var routes = [];
         var nextRoutes = null;
         var zeroIndex = undefined;
@@ -75,6 +75,8 @@ export default {
                 router.go(-1);
             }
         }
-        Vue.prototype.$navigation = navigationService;
+
+        app.$navigation = navigationService;
+        app.config.globalProperties.$navigation = navigationService;
     }
 }