Offline support, downloading, syncing progress

store/audiobooks.js

@@ -12,6 +12,9 @@ export const state = () => ({
 })
 
 export const getters = {
+  getAudiobook: state => id => {
+    return state.audiobooks.find(ab => ab.id === id)
+  },
   getFiltered: (state, getters, rootState) => () => {
     var filtered = state.audiobooks
     var settings = rootState.user.settings || {}
@@ -51,7 +54,7 @@ export const getters = {
 
 export const actions = {
   load({ commit }) {
-    this.$axios
+    return this.$axios
       .$get(`/api/audiobooks`)
       .then((data) => {
         console.log('Audiobooks request data', data)
@@ -59,12 +62,17 @@ export const actions = {
       })
       .catch((error) => {
         console.error('Failed', error)
-        commit('set', [])
       })
-  },
+  }
 }
 
 export const mutations = {
+  reset(state) {
+    state.audiobooks = []
+    state.genres = [...STANDARD_GENRES]
+    state.tags = []
+    state.series = []
+  },
   set(state, audiobooks) {
     // GENRES
     var genres = [...state.genres]
@@ -92,7 +100,15 @@ export const mutations = {
     state.series = series
     state.series.sort((a, b) => a.toLowerCase() < b.toLowerCase() ? -1 : 1)
 
-    state.audiobooks = audiobooks
+    audiobooks.forEach((ab) => {
+      var indexOf = state.audiobooks.findIndex(_ab => _ab.id === ab.id)
+      if (indexOf >= 0) {
+        state.audiobooks.splice(indexOf, 1, ab)
+      } else {
+        state.audiobooks.push(ab)
+      }
+    })
+    // state.audiobooks = audiobooks
     state.listeners.forEach((listener) => {
       listener.meth()
     })

store/downloads.js

@@ -0,0 +1,65 @@
+export const state = () => ({
+  downloads: [],
+  orphanDownloads: [],
+  showModal: false
+})
+
+export const getters = {
+  getDownload: (state) => id => {
+    return state.downloads.find(d => d.id === id)
+  },
+  getDownloadIfReady: (state) => id => {
+    var download = state.downloads.find(d => d.id === id)
+    return !!download && !download.isDownloading && !download.isPreparing ? download : null
+  }
+}
+
+export const actions = {
+  async loadFromStorage({ commit }) {
+    var downloads = await this.$sqlStore.getAllDownloads()
+
+    downloads.forEach(ab => {
+      if (ab.isDownloading || ab.isPreparing) {
+        ab.isIncomplete = true
+      }
+      ab.isDownloading = false
+      ab.isPreparing = false
+      commit('setDownload', ab)
+    })
+  }
+}
+
+export const mutations = {
+  setShowModal(state, val) {
+    state.showModal = val
+  },
+  setDownload(state, download) {
+    var index = state.downloads.findIndex(d => d.id === download.id)
+    if (index >= 0) {
+      state.downloads.splice(index, 1, download)
+    } else {
+      state.downloads.push(download)
+    }
+  },
+  addUpdateDownload(state, download) {
+    var key = download.isOrphan ? 'orphanDownloads' : 'downloads'
+    var index = state[key].findIndex(d => d.id === download.id)
+    if (index >= 0) {
+      state[key].splice(index, 1, download)
+    } else {
+      state[key].push(download)
+    }
+
+    if (key === 'downloads') {
+      this.$sqlStore.setDownload(download)
+    }
+  },
+  removeDownload(state, download) {
+    var key = download.isOrphan ? 'orphanDownloads' : 'downloads'
+    state[key] = state[key].filter(d => d.id !== download.id)
+
+    if (key === 'downloads') {
+      this.$sqlStore.removeDownload(download.id)
+    }
+  }
+}

store/index.js

@@ -1,12 +1,29 @@
+import Vue from 'vue'
 
 export const state = () => ({
   streamAudiobook: null,
+  playingDownload: null,
   playOnLoad: false,
   serverUrl: null,
-  user: null,
-  appUpdateInfo: null
+  appUpdateInfo: null,
+  socketConnected: false,
+  networkConnected: false,
+  networkConnectionType: 'unknown',
+  streamListener: null
 })
 
+export const getters = {
+  playerIsOpen: (state) => {
+    return state.streamAudiobook || state.playingDownload
+  },
+  isAudiobookStreaming: (state) => id => {
+    return (state.streamAudiobook && state.streamAudiobook.id === id)
+  },
+  isAudiobookPlaying: (state) => id => {
+    return (state.playingDownload && state.playingDownload.id === id) || (state.streamAudiobook && state.streamAudiobook.id === id)
+  }
+}
+
 export const actions = {}
 
 export const mutations = {
@@ -23,12 +40,37 @@ export const mutations = {
     state.playOnLoad = val
   },
   setStreamAudiobook(state, audiobook) {
-    state.streamAudiobook = audiobook
+    if (audiobook) {
+      state.playingDownload = null
+    }
+    Vue.set(state, 'streamAudiobook', audiobook)
+    if (state.streamListener) {
+      state.streamListener('stream', audiobook)
+    }
+  },
+  setPlayingDownload(state, download) {
+    if (download) {
+      state.streamAudiobook = null
+    }
+    Vue.set(state, 'playingDownload', download)
+    if (state.streamListener) {
+      state.streamListener('download', download)
+    }
   },
   setServerUrl(state, url) {
     state.serverUrl = url
   },
-  setUser(state, user) {
-    state.user = user
+  setSocketConnected(state, val) {
+    state.socketConnected = val
+  },
+  setNetworkStatus(state, val) {
+    state.networkConnected = val.connected
+    state.networkConnectionType = val.connectionType
+  },
+  setStreamListener(state, val) {
+    state.streamListener = val
+  },
+  removeStreamListener(state) {
+    state.streamListener = null
   }
 }

store/user.js

@@ -1,6 +1,9 @@
+import { Storage } from '@capacitor/storage'
+import Vue from 'vue'
 
 export const state = () => ({
   user: null,
+  localUserAudiobooks: {},
   settings: {
     orderBy: 'book.title',
     orderDesc: false,
@@ -28,33 +31,42 @@ export const getters = {
 }
 
 export const actions = {
-  updateUserSettings({ commit }, payload) {
-    var updatePayload = {
-      ...payload
-    }
-    return this.$axios.$patch('/api/user/settings', updatePayload).then((result) => {
-      if (result.success) {
-        commit('setSettings', result.settings)
-        console.log('Settings updated', result.settings)
-        return true
-      } else {
-        return false
+  async updateUserSettings({ commit }, payload) {
+
+    if (Vue.prototype.$server.connected) {
+      var updatePayload = {
+        ...payload
       }
-    }).catch((error) => {
-      console.error('Failed to update settings', error)
-      return false
-    })
+      return this.$axios.$patch('/api/user/settings', updatePayload).then((result) => {
+        if (result.success) {
+          commit('setSettings', result.settings)
+          console.log('Settings updated', result.settings)
+          return true
+        } else {
+          return false
+        }
+      }).catch((error) => {
+        console.error('Failed to update settings', error)
+        return false
+      })
+    } else {
+      console.log('Update settings without server')
+      commit('setSettings', payload)
+    }
   }
 }
 
 export const mutations = {
+  setLocalUserAudiobooks(state, userAudiobooks) {
+    state.localUserAudiobooks = userAudiobooks
+  },
   setUser(state, user) {
     state.user = user
     if (user) {
-      if (user.token) localStorage.setItem('token', user.token)
+      if (user.token) this.$localStore.setToken(user.token)
       console.log('setUser', user.username)
     } else {
-      localStorage.removeItem('token')
+      this.$localStore.setToken(null)
       console.warn('setUser cleared')
     }
   },
@@ -69,6 +81,9 @@ export const mutations = {
       }
     }
     if (hasChanges) {
+      console.log('Update settings in local storage')
+      this.$localStore.setUserSettings({ ...state.settings })
+
       state.settingsListeners.forEach((listener) => {
         listener.meth(state.settings)
       })