technicie/MarietjeDjango
1
0
Fork 0
mirror of https://gitlab.science.ru.nl/technicie/MarietjeDjango.git synced 2025-12-09 17:52:21 +01:00
Code Issues Packages Projects Releases Wiki Activity

Reimplement personal queue length overview

Browse Source 
Closes #52

The functionality was partially removed in !62.
This commit is contained in:
Kees van Kempen
2023-10-12 15:38:56 +02:00
committed by Kees van Kempen
parent 3786368810
commit 0672555d75
3 changed files with 72 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
marietje/marietje/settings/development.py
View File

@ -4,7 +4,7 @@ from .base import *
SECRET_KEY = 'sae2hahHao1soo0Ocoz5Ieh1Ushae6feJe4mooliooj0Ula8'
DEBUG = False
DEBUG = True
ALLOWED_HOSTS = ['*']

9
marietje/marietje/static/marietje/css/custom.css
View File

@ -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;

90
marietje/queues/templates/queues/queue.html
View File

@ -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>