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

Merge main

Browse Source
This commit is contained in:
Lars van Rhijn
2023-10-14 09:37:37 +02:00
parent d79e3425f4 4f134ab62a
commit 0e6eaa6076
11 changed files with 142 additions and 71 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;

2
marietje/marietje/wsgi.py
View File

@ -11,6 +11,6 @@ import os
from django.core.wsgi import get_wsgi_application
os.environ.setdefault("DJANGO_SETTINGS_MODULE", "marietje.settings.settings")
os.environ.setdefault("DJANGO_SETTINGS_MODULE", "marietje.settings.production")
application = get_wsgi_application()

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

@ -38,16 +38,29 @@
{% 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>
</li>
<li class="nav-item me-3">
<p class="navbar-text mb-0 end-queue"></p>
</li>
<li class="nav-item">
<p class="navbar-text mb-0 duration-queue"></p>
</li>
<ul id="personal-queue-container" class="navbar-nav navbar-right hidden-xs">
<template v-if="infobar !== null && 'start_personal_queue' in infobar && infobar.start_personal_queue !== null">
<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 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" v-bind:class="{danger: infobar.length_personal_queue > infobar.max_length * 60}">(${infobar.length_personal_queue.secondsToMMSS() }$)</p>
</li>
</template>
</ul>
</div>
</nav>
@ -214,6 +227,14 @@
const CAN_MOVE = {{ perms.queues.can_move|yesno:"1,0" }};
</script>
<script>
const personal_queue_vue = createApp({
delimiters: ['${', '}$'],
data() {
return {
infobar: null,
}
},
}).mount('#personal-queue-container');
const queue_vue = createApp({
delimiters: ['${', '}$'],
data() {
@ -228,6 +249,13 @@
playsIn: true,
}
},
watch: {
playsIn: {
handler(val, oldVal) {
this.update_infobar();
}
},
},
mounted() {
this.clockInterval = setInterval(this.update_song_times, 1000);
},
@ -253,27 +281,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;
@ -301,6 +308,40 @@
}
}
}
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,
}
infoBar.now_in_seconds = Math.round((new Date()).getTime() / 1000);
// 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;
}
}
}
personal_queue_vue.infobar = infoBar;
},
refresh() {
if (!this.refreshing) {
@ -384,9 +425,9 @@
}).finally(() => {
this.refresh();
});
}
},
}
}).mount('#queue-container');
}).mount("#queue-container");
</script>
<script>
const request_vue = createApp({

4
marietje/songs/api/v1/views.py
View File

@ -1,3 +1,4 @@
from django_filters.rest_framework import DjangoFilterBackend
from rest_framework.generics import ListAPIView, RetrieveAPIView, CreateAPIView
from rest_framework import filters
from rest_framework.views import APIView
@ -16,7 +17,8 @@ class SongsListAPIView(ListAPIView):
queryset = Song.objects.all()
permission_classes = [IsAuthenticatedOrTokenHasScopeForMethod]
required_scopes_for_method = {"GET": ["read"]}
filter_backends = (filters.SearchFilter, filters.OrderingFilter)
filter_backends = (filters.SearchFilter, filters.OrderingFilter, DjangoFilterBackend)
filterset_fields = ["user__username", "artist"]
search_fields = ["artist", "title", "user__name", "user__username"]
ordering_fields = [
"artist",

41
marietje/songs/templates/songs/manage.html
View File

@ -64,17 +64,17 @@
</div>
</div>
<script>
let manage_vue = createApp({
let manage_vue = new Vue({
el: '#request-table',
delimiters: ['${', '}$'],
data() {
return {
songs: [],
total_songs: 0,
search_input: "",
typing_timer: null,
page_size: 10,
page_number: 1,
}
data: {
songs: [],
total_songs: 0,
search_input: "",
typing_timer: null,
page_size: 10,
page_number: 1,
user_data: null,
},
watch: {
search_input: {
@ -113,25 +113,18 @@
}
},
created() {
fetch(
`/api/v1/songs/?ordering=artist,title&limit=${this.page_size}&offset=${this.page_size * (this.page_number - 1)}`
).then(response => {
fetch('/api/v1/users/me/').then(response => {
if (response.status === 200) {
return response.json();
} else {
throw response;
}
}).then(data => {
this.songs = data.results;
this.total_songs = data.count;
}).catch((e) => {
if (e instanceof Response) {
e.json().then(data => {
tata.error("", data.errorMessage);
});
} else {
tata.error("", "An unknown error occurred, please try again.")
}
this.user_data = data;
}).then(() => {
this.refresh();
}).catch(() => {
tata.error('', 'User details failed to fetch, please reload this page to try again.');
});
const stored_page_size = parseInt(getCookie("MANAGE_PAGE_SIZE"));
if (stored_page_size !== Number.NaN && stored_page_size > 0) {
@ -145,7 +138,7 @@
},
refresh() {
fetch(
`/api/v1/songs/?ordering=artist,title&limit=${this.page_size}&offset=${this.page_size * (this.page_number - 1)}&search=${this.search_input}`,
`/api/v1/songs/?ordering=artist,title&user__username=${this.user_data.username}&limit=${this.page_size}&offset=${this.page_size * (this.page_number - 1)}&search=${this.search_input}`,
{
headers: {
"X-CSRFToken": CSRF_TOKEN,

10
marietje/stats/templates/stats/stats.html
View File

@ -134,7 +134,7 @@
<th>#</th>
<th>Artist</th>
<th>Title</th>
<th># Requests</th>
<th style="white-space: nowrap; text-align: right;"># Requests</th>
</tr>
</thead>
<tbody>
@ -143,7 +143,7 @@
<th>{{ forloop.counter }}</th>
<td>{{ stat.song__artist }}</td>
<td>{{ stat.song__title }}</td>
<td>{{ stat.total }}</td>
<td style="text-align: right;">{{ stat.total }}</td>
</tr>
{% endfor %}
</tbody>
@ -151,7 +151,7 @@
</div>
</div>
<div class="col-md-6">
<h2>Most played Artists</h2>
<h2>Most played artists</h2>
<p>These are the {{ stats.stats_top_count }} most played artists ever.</p>
<div class="table-responsive">
<table class="table table-striped">
@ -210,7 +210,7 @@
<th>#</th>
<th>Artist</th>
<th>Title</th>
<th># Requests</th>
<th style="white-space: nowrap; text-align: right;"># Requests</th>
</tr>
</thead>
<tbody>
@ -219,7 +219,7 @@
<th>{{ forloop.counter }}</th>
<td>{{ stat.song__artist }}</td>
<td>{{ stat.song__title }}</td>
<td>{{ stat.total }}</td>
<td style="text-align: right;">{{ stat.total }}</td>
</tr>
{% endfor %}
</tbody>

6
marietje/stats/templates/stats/user.html
View File

@ -32,7 +32,7 @@
<th>#</th>
<th>Artist</th>
<th>Title</th>
<th># Requests</th>
<th style="white-space: nowrap; text-align: right;"># Requests</th>
</tr>
</thead>
<tbody>
@ -41,7 +41,7 @@
<th>{{ forloop.counter }}</th>
<td>{{ stat.song__artist }}</td>
<td>{{ stat.song__title }}</td>
<td style="text-align: middle;">{{ stat.total }}</td>
<td style="text-align: right;">{{ stat.total }}</td>
</tr>
{% endfor %}
</tbody>
@ -49,7 +49,7 @@
</div>
</div>
<div class="col-md-6">
<h2>Most played Artists</h2>
<h2>Most played artists</h2>
<h4>Top {{ stats.stats_top_count }}:</h4>
<div class="table-responsive">
<table class="table table-striped">