Add new connection page to support multiple server connection configs

plugins/axios.js

@@ -11,7 +11,7 @@ export default function ({ $axios, store }) {
       console.warn('[Axios] No Bearer Token for request')
     }
 
-    var serverUrl = store.state.serverUrl
+    var serverUrl = store.getters['user/getServerAddress']
     if (serverUrl) {
       config.url = `${serverUrl}${config.url}`
     }

plugins/db.js

@@ -1,11 +1,13 @@
-import { registerPlugin } from '@capacitor/core';
+import { registerPlugin, Capacitor } from '@capacitor/core';
 
-const DbManager = registerPlugin('DbManager');
+const isWeb = Capacitor.getPlatform() == 'web'
+const DbManager = registerPlugin('DbManager')
 
 class DbService {
   constructor() { }
 
   save(db, key, value) {
+    if (isWeb) return
     return DbManager.saveFromWebview({ db, key, value }).then(() => {
       console.log('Saved data', db, key, JSON.stringify(value))
     }).catch((error) => {
@@ -14,6 +16,7 @@ class DbService {
   }
 
   load(db, key) {
+    if (isWeb) return null
     return DbManager.loadFromWebview({ db, key }).then((data) => {
       console.log('Loaded data', db, key, JSON.stringify(data))
       return data
@@ -23,7 +26,37 @@ class DbService {
     })
   }
 
-  loadFolders() {
+  getDeviceData() {
+    if (isWeb) return {}
+    return DbManager.getDeviceData_WV().then((data) => {
+      console.log('Loaded device data', JSON.stringify(data))
+      return data
+    })
+  }
+
+  setServerConnectionConfig(serverConnectionConfig) {
+    if (isWeb) return null
+    return DbManager.setCurrentServerConnectionConfig_WV(serverConnectionConfig).then((data) => {
+      console.log('Set server connection config', JSON.stringify(data))
+      return data
+    })
+  }
+
+  removeServerConnectionConfig(serverConnectionConfigId) {
+    if (isWeb) return null
+    return DbManager.removeServerConnectionConfig_WV({ serverConnectionConfigId }).then((data) => {
+      console.log('Removed server connection config', serverConnectionConfigId)
+      return true
+    })
+  }
+
+  logout() {
+    if (isWeb) return null
+    return DbManager.logout_WV()
+  }
+
+  getLocalFolders() {
+    if (isWeb) return []
     return DbManager.getLocalFolders_WV().then((data) => {
       console.log('Loaded local folders', JSON.stringify(data))
       if (data.folders && typeof data.folders == 'string') {
@@ -37,6 +70,7 @@ class DbService {
   }
 
   getLocalFolder(folderId) {
+    if (isWeb) return null
     return DbManager.getLocalFolder_WV({ folderId }).then((data) => {
       console.log('Got local folder', JSON.stringify(data))
       return data
@@ -44,6 +78,7 @@ class DbService {
   }
 
   getLocalMediaItemsInFolder(folderId) {
+    if (isWeb) return []
     return DbManager.getLocalMediaItemsInFolder_WV({ folderId }).then((data) => {
       console.log('Loaded local media items in folder', JSON.stringify(data))
       if (data.localMediaItems && typeof data.localMediaItems == 'string') {

plugins/init.client.js

@@ -4,6 +4,8 @@ import { Dialog } from '@capacitor/dialog'
 import { StatusBar, Style } from '@capacitor/status-bar';
 import { formatDistance, format } from 'date-fns'
 
+Vue.prototype.$eventBus = new Vue()
+
 const setStatusBarStyleDark = async () => {
   await StatusBar.setStyle({ style: Style.Dark })
 }
@@ -22,9 +24,7 @@ App.addListener('backButton', async ({ canGoBack }) => {
   } else {
     window.history.back()
   }
-});
-
-Vue.prototype.$eventBus = new Vue()
+})
 
 Vue.prototype.$isDev = process.env.NODE_ENV !== 'production'
 

plugins/localStore.js

@@ -8,50 +8,6 @@ class LocalStorage {
     this.downloadFolder = null
   }
 
-  async setToken(token) {
-    try {
-      if (token) {
-        await Storage.set({ key: 'token', value: token })
-      } else {
-        await Storage.remove({ key: 'token' })
-      }
-    } catch (error) {
-      console.error('[LocalStorage] Failed to set token', error)
-    }
-  }
-
-  async getToken() {
-    try {
-      return (await Storage.get({ key: 'token' }) || {}).value || null
-    } catch (error) {
-      console.error('[LocalStorage] Failed to get token', error)
-      return null
-    }
-  }
-
-  async setCurrentLibrary(library) {
-    try {
-      if (library) {
-        await Storage.set({ key: 'library', value: JSON.stringify(library) })
-      } else {
-        await Storage.remove({ key: 'library' })
-      }
-    } catch (error) {
-      console.error('[LocalStorage] Failed to set library', error)
-    }
-  }
-
-  async getCurrentLibrary() {
-    try {
-      var _value = (await Storage.get({ key: 'library' }) || {}).value || null
-      if (!_value) return null
-      return JSON.parse(_value)
-    } catch (error) {
-      console.error('[LocalStorage] Failed to get current library', error)
-      return null
-    }
-  }
-
   async setDownloadFolder(folderObj) {
     try {
       if (folderObj) {
@@ -82,15 +38,6 @@ class LocalStorage {
     }
   }
 
-  async getServerUrl() {
-    try {
-      return (await Storage.get({ key: 'serverUrl' }) || {}).value || null
-    } catch (error) {
-      console.error('[LocalStorage] Failed to get serverUrl', error)
-      return null
-    }
-  }
-
   async setUserSettings(settings) {
     try {
       await Storage.set({ key: 'userSettings', value: JSON.stringify(settings) })

plugins/server.js

@@ -1,5 +1,73 @@
-import Server from '../Server'
+import Vue from 'vue'
+import { io } from 'socket.io-client'
+import EventEmitter from 'events'
 
-export default function ({ store, $axios }, inject) {
-  inject('server', new Server(store, $axios))
+class ServerSocket extends EventEmitter {
+  constructor(store) {
+    super()
+
+    this.$store = store
+    this.socket = null
+    this.connected = false
+    this.serverAddress = null
+    this.token = null
+  }
+
+  connect(serverAddress, token) {
+    this.serverAddress = serverAddress
+    this.token = token
+
+    console.log('[SOCKET] Connect Socket', this.serverAddress)
+
+    const socketOptions = {
+      transports: ['websocket'],
+      upgrade: false,
+      // reconnectionAttempts: 3
+    }
+    this.socket = io(this.serverAddress, socketOptions)
+    this.setSocketListeners()
+  }
+
+  logout() {
+    if (this.socket) this.socket.disconnect()
+  }
+
+  setSocketListeners() {
+    if (!this.socket) return
+    this.socket.on('connect', this.onConnect.bind(this))
+    this.socket.on('disconnect', this.onDisconnect.bind(this))
+    this.socket.on('init', this.onInit.bind(this))
+  }
+
+  onConnect() {
+    console.log('[SOCKET] Socket Connected ' + this.socket.id)
+    this.connected = true
+    this.$store.commit('setSocketConnected', true)
+    this.emit('connection-update', true)
+  }
+
+  onDisconnect(reason) {
+    console.log('[SOCKET] Socket Disconnected: ' + reason)
+    this.connected = false
+    this.$store.commit('setSocketConnected', false)
+    this.emit('connection-update', false)
+
+    this.socket.removeAllListeners()
+    if (this.socket.io && this.socket.io.removeAllListeners) {
+      this.socket.io.removeAllListeners()
+    }
+  }
+
+  onInit(data) {
+    console.log('[SOCKET] Initial socket data received', data)
+    if (data.serverSettings) {
+      this.$store.commit('setServerSettings', data.serverSettings)
+    }
+    this.emit('initialized', true)
+  }
+}
+
+export default ({ app, store }, inject) => {
+  console.log('Check event bus', this, Vue.prototype.$eventBus)
+  inject('socket', new ServerSocket(store))
 }