From 0672555d750e850b5fa195bcf503c56bc4351f7d Mon Sep 17 00:00:00 2001
From: Kees van Kempen <k.vankempen@student.science.ru.nl>
Date: Thu, 12 Oct 2023 15:38:56 +0200
Subject: [PATCH] Reimplement personal queue length overview

Closes #52

The functionality was partially removed in !62.
---
 marietje/marietje/settings/development.py     |  2 +-
 .../marietje/static/marietje/css/custom.css   |  9 +-
 marietje/queues/templates/queues/queue.html   | 90 +++++++++++++------
 3 files changed, 72 insertions(+), 29 deletions(-)

diff --git a/marietje/marietje/settings/development.py b/marietje/marietje/settings/development.py
index c31ae2e..b4e06e2 100644
--- a/marietje/marietje/settings/development.py
+++ b/marietje/marietje/settings/development.py
@@ -4,7 +4,7 @@ from .base import *
 
 SECRET_KEY = 'sae2hahHao1soo0Ocoz5Ieh1Ushae6feJe4mooliooj0Ula8'
 
-DEBUG = False
+DEBUG = True
 
 ALLOWED_HOSTS = ['*']
 
diff --git a/marietje/marietje/static/marietje/css/custom.css b/marietje/marietje/static/marietje/css/custom.css
index a417f69..f229400 100644
--- a/marietje/marietje/static/marietje/css/custom.css
+++ b/marietje/marietje/static/marietje/css/custom.css
@@ -100,10 +100,17 @@ footer {
     transition: 1s transform ease-in-out;
 }
 
-.currentsong{
+.currentsong {
         border-bottom: 1px solid #DDDDDD;
 }
 
+.navbar-text {
+    color: var(--text-color);
+}
+.danger {
+    color: red !important;
+}
+
 /* Bootstrap 3 doesn't support equal height columns, hack via <https://medium.com/wdstack/bootstrap-equal-height-columns-d07bc934eb27#892f> */
 .row.display-flex {
   display: flex;
diff --git a/marietje/queues/templates/queues/queue.html b/marietje/queues/templates/queues/queue.html
index 0cfc1da..8b7a0c4 100644
--- a/marietje/queues/templates/queues/queue.html
+++ b/marietje/queues/templates/queues/queue.html
@@ -38,15 +38,26 @@
                     {% endif %}
                 </li>
             </ul>
-            <ul class="navbar-nav navbar-right hidden-xs">
-                <li class="nav-item me-3">
-                    <p class="navbar-text mb-0 start-queue hidden-sm hidden-xs"></p>
+
+            <ul v-if="'start_personal_queue' in infobar && infobar.start_personal_queue !== null" id="personal-queue-container" class="navbar-nav navbar-right hidden-xs">
+                <li v-if="infobar.start_personal_queue != 0" class="nav-item me-3">
+                    <p v-if="infobar.plays_in" class="navbar-text mb-0 start-queue hidden-sm hidden-xs">
+                        First song starts in <% infobar.start_personal_queue.secondsToMMSS() %>
+                    </p>
+                    <p v-else class="navbar-text mb-0 start-queue hidden-sm hidden-xs">
+                        First song starts at <% (infobar.now_in_seconds + infobar.start_personal_queue).timestampToHHMMSS() %>
+                    </p>
                 </li>
                 <li class="nav-item me-3">
-                    <p class="navbar-text mb-0 end-queue"></p>
+                    <p v-if="infobar.plays_in" class="navbar-text mb-0 start-queue hidden-sm hidden-xs">
+                        Last song ends in <% infobar.end_personal_queue.secondsToMMSS() %>
+                    </p>
+                    <p v-else class="navbar-text mb-0 start-queue hidden-sm hidden-xs">
+                        Last song ends at <% (infobar.now_in_seconds + infobar.end_personal_queue).timestampToHHMMSS() %>
+                    </p>
                 </li>
                 <li class="nav-item">
-                    <p class="navbar-text mb-0 duration-queue"></p>
+                    <p class="navbar-text mb-0 duration-queue" v-bind:class="{danger: infobar.length_personal_queue > infobar.max_length * 60}">(<% infobar.length_personal_queue.secondsToMMSS() %>)</p>
                 </li>
             </ul>
         </div>
@@ -252,27 +263,6 @@
                 });
             },
             computed: {
-                infoBar() {
-                    let infoBar = {
-                        start_personal_queue: 0,
-                        length_personal_queue: 0,
-                        length_total_queue: 0,
-                        end_personal_queue: 0,
-                        max_length: 45,
-                    }
-                    for (let i = 0; i < this.queue.length; i++) {
-                        const current_song = this.queue[i];
-                        infoBar['length_total_queue'] = infoBar['length_total_queue'] + current_song.song.duration;
-                        if (current_song.user !== null && current_song.user.id === this.user_data.id) {
-                            infoBar['length_personal_queue'] = infoBar['length_personal_queue'] + current_song.song.duration;
-                            infoBar['end_personal_queue'] = infoBar['length_total_queue'];
-                            if (infoBar['start_personal_queue'] === 0) {
-                                infoBar['start_personal_queue'] = infoBar['length_total_queue'] - current_song.song.duration;
-                            }
-                        }
-                    }
-                    return infoBar;
-                },
                 play_next_song_at() {
                     if (this.started_at !== null && this.current_song !== null) {
                         return this.started_at + this.current_song.song.duration;
@@ -300,6 +290,42 @@
                             }
                         }
                     }
+                    this.update_infobar();
+                },
+                update_infobar() {
+                    let infoBar = {
+                        start_personal_queue: null,
+                        length_personal_queue: 0,
+                        length_total_queue: 0,
+                        end_personal_queue: 0,
+                        max_length: 45,
+                        plays_in: this.playsIn,
+                        now_in_seconds: 0,
+                    }
+                    const now_in_seconds = Math.round((new Date()).getTime() / 1000);
+                    infoBar.now_in_seconds = now_in_seconds;
+                    let current_song_played = now_in_seconds - this.queue[0].started_at;
+                    // If the current song is the current user's, their queue has started.
+                    if (this.queue[0].user.id == this.user_data.id) {
+                        infoBar.start_personal_queue = 0;
+                    }
+                    for (let i = 0; i < this.queue.length; i++) {
+                        const current_song = this.queue[i];
+                        if (i == 0) {
+                            const current_song_remaining_seconds = current_song.song.duration - this.queue[1].time_until_song_seconds;
+                            infoBar['length_personal_queue'] -= current_song_remaining_seconds;
+                            infoBar['length_total_queue'] -= current_song_remaining_seconds;
+                        }
+                        infoBar['length_total_queue'] += current_song.song.duration;
+                        if (current_song.user !== null && current_song.user.id === this.user_data.id) {
+                            infoBar['length_personal_queue'] +=  current_song.song.duration;
+                            infoBar['end_personal_queue'] = infoBar['length_total_queue'];
+                            if (infoBar['start_personal_queue'] === null) {
+                                infoBar['start_personal_queue'] = infoBar['length_total_queue'] - current_song.song.duration - this.queue[1].time_until_song_seconds
+                            }
+                        }
+                    }
+                    this.$emit("infobar", infoBar);
                 },
                 refresh() {
                     if (!this.refreshing) {
@@ -383,7 +409,17 @@
                     }).finally(() => {
                         this.refresh();
                     });
-                }
+                },
+            }
+        });
+        const personal_queue_vue = new Vue({
+            el: '#personal-queue-container',
+            delimiters: ['<%', '%>'],
+            data: {
+                infobar: [],
+            },
+            mounted() {
+                queue_vue.$on("infobar", infoBar => this.infobar = infoBar);
             }
         });
     </script>