Player UI #9 - Track Control

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

@@ -1,6 +1,14 @@
 class HTMLMusicWrapper {
   #music;
 
+  get currentTimestamp() {
+    const position = this.#music.position;
+
+    const minutes = Math.floor(position / 60).toString().padStart(2, '0');
+    const seconds = Math.floor(position - (minutes * 60)).toString().padStart(2, '0');
+    return `${minutes}:${seconds}`;
+  }
+
   set apiError(error) {
     if (!error)
       return $('#musicAPIError').addClass('d-none');
@@ -11,13 +19,33 @@ class HTMLMusicWrapper {
 
   constructor(musicClient) {
     this.#music = musicClient;
+
+    setInterval(() => this.#updateSeeker(), 1000);
+  }
+
+  #updateSeeker() {
+    if (!this.#music.isPlaying || this.#music.isPaused) return;
+
+    this.#music.position++;
+
+    $('#seekTrack input').val(this.#music.position);
+    $('.current').text(this.currentTimestamp);
   }
 
   updateList() {
     $('.now-playing').html(this.#nowPlaying());
 
+    const track = (this.#music.isPlaying) ? this.#music.list[0] : null;
+    if (track) {
+      $('.current').text(this.currentTimestamp);
+      $('.duration').text(track.duration.timestamp);
+      $('#seekTrack input').attr('max', track.duration.seconds);
+    } else {
+      $('.current, .duration').text(`00:00`); 
+    }
+
     $('.track-list').html(
-      (this.#music.list.length <= 0)
+      (!this.#music.isPlaying)
         ? '<p>No tracks here.</p>'
         : this.#music.list
         .map(this.#htmlTrack)
@@ -30,8 +58,13 @@ class HTMLMusicWrapper {
     });
   }
 
+  toggle() {
+    $('#toggleTrack i').toggleClass('fa-pause');
+    $('#toggleTrack i').toggleClass('fa-play');
+  }
+
   #nowPlaying() {
-    if (this.#music.list.length <= 0) return ``;
+    if (!this.#music.isPlaying) return ``;
 
     const track = this.#music.list[0];
     return `

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

@@ -2,7 +2,13 @@ class MusicWrapper {
   #endpoint = `/api/guilds/${guildId}/music`;
   #html = new HTMLMusicWrapper(this);
 
+  isPaused = $('#toggleTrack i').hasClass('fa-play');
   list = [];
+  position = +$('#seekTrack input').val();
+
+  get isPlaying() {
+    return this.list.length > 0;
+  }
 
   async #fetch(action) {
     try {
@@ -32,10 +38,44 @@ class MusicWrapper {
     try {
       await this.#fetch(`stop`);
       this.#html.apiError = null;
+      this.position = 0;
     } catch {}
     await this.updateList();
   }
 
+  async toggle() {
+    try {
+      await this.#fetch(`toggle`);
+      this.#html.apiError = null;
+    } catch {}
+  }
+
+  async setVolume(value) {
+    try {
+      await this.#fetch(`volume?v=${value}`);
+      this.#html.apiError = null;
+    } catch {}
+  }
+
+  async seek(to) {
+    try {
+      await this.#fetch(`seek?to=${to}`);
+      this.position = to;
+
+      this.#html.apiError = null;
+    } catch {}
+  }
+
+  async toggle() {
+    try {
+      await this.#fetch(`toggle`);
+      this.isPaused = !this.isPaused;
+
+      this.#html.apiError = null;
+      this.#html.toggle();
+    } catch {}
+  }
+
   async remove(index) {
     try {
       const list = await this.#fetch(`remove?i=${index}`);

dashboard/assets/js/music/music.js

@@ -3,10 +3,20 @@ $(async () => {
   await music.updateList();
 
   $('#skipTrack').on('click', () => music.skip());
+  $('#toggleTrack').on('click', () => music.toggle());
   $('#shuffleList').on('click', () => music.shuffle());
   $('#stopTrack').on('click', () => music.stop());
   $('#trackSearch').on('click', async () => {
     const query = $('.q-control input').val();
     await music.play(query);
   });
+
+  $('#seekTrack input').on('input', async function() {
+    const to = +$(this).val();
+    await music.seek(to);
+  });
+  $('#volume input').on('input', async function() {
+    const value = +$(this).val();
+    await music.setVolume(value);
+  });
 });

dashboard/routes/music-routes.js

@@ -22,6 +22,39 @@ router.get('/stop', async (req, res) => {
   }
 });
 
+router.get('/toggle', async (req, res) => {
+  try {
+    const player = res.locals.player;
+    (player.isPaused)
+      ? await player.resume()
+      : await player.pause();
+
+    res.json({ message: 'Success' });
+  } catch (error) {
+    sendError(res, error);
+  }
+});
+
+router.get('/volume', async (req, res) => {
+  try {
+    await res.locals.player.setVolume(+req.query.v);
+
+    res.json({ message: 'Success' });
+  } catch (error) {
+    sendError(res, error);
+  }
+});
+
+router.get('/seek', async (req, res) => {
+  try {
+    await res.locals.player.seek(+req.query.to);
+
+    res.json({ message: 'Success' });
+  } catch (error) {
+    sendError(res, error);
+  }
+});
+
 router.get('/list', async (req, res) => {
   try {
     res.json(res.locals.player.q.items);

dashboard/views/dashboard/modules/music.pug

@@ -20,9 +20,9 @@ section#musicModule.module.container.px-5
             button#shuffleList.btn.text-gradient #[i.fas.fa-random]
           #volume.col-3
             i.fas.fa-volume-up.text-gradient
-            input.form-control(type='range', value='0')
+            input.form-control(type='range', value='0', max='1', step='0.1')
         #seekTrack
-          input.form-control(type='range', value=(player.position || 0) / 1000)
+          input.form-control(type='range', value=(Math.floor(player.position || 0) / 1000))
           .position
             span.current 00:00
             span.text-muted.px-1 /