Add:Delete playback session button and api route

client/components/modals/ListeningSessionModal.vue

@@ -1,5 +1,5 @@
 <template>
-  <modals-modal v-model="show" name="listening-session-modal" :width="700" :height="'unset'">
+  <modals-modal v-model="show" name="listening-session-modal" :processing="processing" :width="700" :height="'unset'">
     <template #outer>
       <div class="absolute top-0 left-0 p-5 w-2/3 overflow-hidden">
         <p class="font-book text-3xl text-white truncate">Session {{ _session.id }}</p>
@@ -96,6 +96,10 @@
           <p v-if="deviceInfo.deviceType" class="mb-1">Type: {{ deviceInfo.deviceType }}</p>
         </div>
       </div>
+
+      <div class="flex items-center">
+        <ui-btn small color="error" @click.stop="deleteSessionClick">Delete</ui-btn>
+      </div>
     </div>
   </modals-modal>
 </template>
@@ -110,7 +114,9 @@ export default {
     }
   },
   data() {
-    return {}
+    return {
+      processing: false
+    }
   },
   computed: {
     show: {
@@ -147,7 +153,37 @@ export default {
       return 'Unknown'
     }
   },
-  methods: {},
+  methods: {
+    deleteSessionClick() {
+      const payload = {
+        message: `Are you sure you want to delete this session?`,
+        callback: (confirmed) => {
+          if (confirmed) {
+            this.deleteSession()
+          }
+        },
+        type: 'yesNo'
+      }
+      this.$store.commit('globals/setConfirmPrompt', payload)
+    },
+    deleteSession() {
+      this.processing = true
+      this.$axios
+        .$delete(`/api/sessions/${this._session.id}`)
+        .then(() => {
+          this.processing = false
+          this.$toast.success('Session deleted successfully')
+          this.$emit('removedSession')
+          this.show = false
+        })
+        .catch((error) => {
+          this.processing = false
+          console.error('Failed to delete session', error)
+          var errMsg = error.response ? error.response.data || '' : ''
+          this.$toast.error(errMsg || 'Failed to delete session')
+        })
+    }
+  },
   mounted() {}
 }
 </script>

client/pages/config/sessions.vue

@@ -58,7 +58,7 @@
       <p v-else class="text-white text-opacity-50">No sessions yet...</p>
     </div>
 
-    <modals-listening-session-modal v-model="showSessionModal" :session="selectedSession" />
+    <modals-listening-session-modal v-model="showSessionModal" :session="selectedSession" @removedSession="removedSession" />
   </div>
 </template>
 
@@ -111,6 +111,9 @@ export default {
     }
   },
   methods: {
+    removedSession() {
+      this.loadSessions(this.currentPage)
+    },
     async clickCurrentTime(session) {
       if (this.processingGoToTimestamp) return
       this.processingGoToTimestamp = true

client/pages/config/users/_id/sessions.vue

@@ -62,7 +62,7 @@
       </div>
     </div>
 
-    <modals-listening-session-modal v-model="showSessionModal" :session="selectedSession" />
+    <modals-listening-session-modal v-model="showSessionModal" :session="selectedSession" @removedSession="removedSession" />
   </div>
 </template>
 
@@ -98,6 +98,9 @@ export default {
     }
   },
   methods: {
+    removedSession() {
+      this.loadSessions(this.currentPage)
+    },
     async clickCurrentTime(session) {
       if (this.processingGoToTimestamp) return
       this.processingGoToTimestamp = true

server/Db.js

@@ -183,17 +183,6 @@ class Db {
   getLibraryItemsInLibrary(libraryId) {
     return this.libraryItems.filter(li => li.libraryId === libraryId)
   }
-  getPlaybackSession(id) {
-    return this.sessionsDb.select((pb) => pb.id == id).then((results) => {
-      if (results.data.length) {
-        return new PlaybackSession(results.data[0])
-      }
-      return null
-    }).catch((error) => {
-      Logger.error('Failed to get session', error)
-      return null
-    })
-  }
 
   async updateLibraryItem(libraryItem) {
     return this.updateLibraryItems([libraryItem])
@@ -452,6 +441,18 @@ class Db {
     })
   }
 
+  getPlaybackSession(id) {
+    return this.sessionsDb.select((pb) => pb.id == id).then((results) => {
+      if (results.data.length) {
+        return new PlaybackSession(results.data[0])
+      }
+      return null
+    }).catch((error) => {
+      Logger.error('Failed to get session', error)
+      return null
+    })
+  }
+
   selectUserSessions(userId) {
     return this.sessionsDb.select((session) => session.userId === userId).then((results) => {
       return results.data || []

server/controllers/SessionController.js

@@ -42,7 +42,7 @@ class SessionController {
     res.json(payload)
   }
 
-  getSession(req, res) {
+  getOpenSession(req, res) {
     var libraryItem = this.db.getLibraryItem(req.session.libraryItemId)
     var sessionForClient = req.session.toJSONForClient(libraryItem)
     res.json(sessionForClient)
@@ -58,12 +58,24 @@ class SessionController {
     this.playbackSessionManager.closeSessionRequest(req.user, req.session, req.body, res)
   }
 
+  // DELETE: api/session/:id
+  async delete(req, res) {
+    // if session is open then remove it
+    const openSession = this.playbackSessionManager.getSession(req.session.id)
+    if (openSession) {
+      await this.playbackSessionManager.removeSession(req.session.id)
+    }
+
+    await this.db.removeEntity('session', req.session.id)
+    res.sendStatus(200)
+  }
+
   // POST: api/session/local
   syncLocal(req, res) {
     this.playbackSessionManager.syncLocalSessionRequest(req.user, req.body, res)
   }
 
-  middleware(req, res, next) {
+  openSessionMiddleware(req, res, next) {
     var playbackSession = this.playbackSessionManager.getSession(req.params.id)
     if (!playbackSession) return res.sendStatus(404)
 
@@ -75,5 +87,21 @@ class SessionController {
     req.session = playbackSession
     next()
   }
+
+  async middleware(req, res, next) {
+    var playbackSession = await this.db.getPlaybackSession(req.params.id)
+    if (!playbackSession) return res.sendStatus(404)
+
+    if (req.method == 'DELETE' && !req.user.canDelete) {
+      Logger.warn(`[SessionController] User attempted to delete without permission`, req.user)
+      return res.sendStatus(403)
+    } else if ((req.method == 'PATCH' || req.method == 'POST') && !req.user.canUpdate) {
+      Logger.warn('[SessionController] User attempted to update without permission', req.user.username)
+      return res.sendStatus(403)
+    }
+
+    req.session = playbackSession
+    next()
+  }
 }
 module.exports = new SessionController()

server/routers/ApiRouter.js

@@ -175,9 +175,11 @@ class ApiRouter {
     // Playback Session Routes
     //
     this.router.get('/sessions', SessionController.getAllWithUserData.bind(this))
-    this.router.get('/session/:id', SessionController.middleware.bind(this), SessionController.getSession.bind(this))
+    this.router.delete('/sessions/:id', SessionController.middleware.bind(this), SessionController.delete.bind(this))
-    this.router.post('/session/:id/sync', SessionController.middleware.bind(this), SessionController.sync.bind(this))
+    // TODO: Update these endpoints because they are only for open playback sessions
-    this.router.post('/session/:id/close', SessionController.middleware.bind(this), SessionController.close.bind(this))
+    this.router.get('/session/:id', SessionController.openSessionMiddleware.bind(this), SessionController.getOpenSession.bind(this))
+    this.router.post('/session/:id/sync', SessionController.openSessionMiddleware.bind(this), SessionController.sync.bind(this))
+    this.router.post('/session/:id/close', SessionController.openSessionMiddleware.bind(this), SessionController.close.bind(this))
     this.router.post('/session/local', SessionController.syncLocal.bind(this))
 
     //