Player UI #8 - List Control

dashboard/assets/js/music/html-music-wrapper.js

@@ -23,6 +23,11 @@ class HTMLMusicWrapper {
         .map(this.#htmlTrack)
         .join()
     );
+
+    $('.track .remove').on('click', async () => {
+      const index = $('.track .remove').index('.remove');
+      await this.#music.remove(index);
+    });
   }
 
   #nowPlaying() {

dashboard/assets/js/music/music-wrapper.js

@@ -36,8 +36,35 @@ class MusicWrapper {
     await this.updateList();
   }
 
-  async updateList() {
-    this.list = await this.#fetch('list');
+  async remove(index) {
+    try {
+      const list = await this.#fetch(`remove?i=${index}`);
+
+      this.#html.apiError = null;
+      await this.updateList(list);
+    } catch {}
+  }
+
+  async shuffle() {
+    try {
+      const list = await this.#fetch(`shuffle`);
+
+      this.#html.apiError = null;
+      await this.updateList(list);
+    } catch {}
+  }
+
+  async skip() {
+    try {
+      const list = await this.#fetch(`skip`);
+
+      this.#html.apiError = null;
+      await this.updateList(list);
+    } catch {}
+  }
+
+  async updateList(list = null) {
+    this.list = list ?? await this.#fetch('list');
     this.#html.updateList();
   }
 }

dashboard/assets/js/music/music.js

@@ -2,6 +2,8 @@ $(async () => {
   const music = new MusicWrapper();
   await music.updateList();
 
+  $('#skipTrack').on('click', () => music.skip());
+  $('#shuffleList').on('click', () => music.shuffle());
   $('#stopTrack').on('click', () => music.stop());
   $('#trackSearch').on('click', async () => {
     const query = $('.q-control input').val();

dashboard/routes/music-routes.js

@@ -30,4 +30,35 @@ router.get('/list', async (req, res) => {
   }
 });
 
+router.get('/remove', async (req, res) => {
+  try {
+    const index = +req.query.i;
+    res.locals.player.q.items.splice(index, 1);
+
+    res.json(res.locals.player.q.items);
+  } catch (error) {
+    sendError(res, error);
+  }
+});
+
+router.get('/shuffle', async (req, res) => {
+  try {
+    res.locals.player.q.shuffle();
+
+    res.json(res.locals.player.q.items);
+  } catch (error) {
+    sendError(res, error);
+  }
+});
+
+router.get('/skip', async (req, res) => {
+  try {
+    await res.locals.player.skip();
+
+    res.json(res.locals.player.q.items);
+  } catch (error) {
+    sendError(res, error);
+  }
+});
+
 module.exports = router;