Merge branch 'feature/improve-queueable' into 'marietje-zuid'

Improvement to the visibility of already queued songs

See merge request technicie/MarietjeDjango!96

marietje/marietje/static/marietje/css/custom.css

@@ -105,6 +105,10 @@ footer {
     transition: 1s transform ease-in-out;
 }
 
+.btn-link {
+    text-decoration: none;
+}
+
 .navbar-text {
     color: var(--text-color);
 }
@@ -113,6 +117,11 @@ footer {
     color: red !important;
 }
 
+.disabled {
+    pointer-events: none;
+    opacity: 0.5;
+}
+
 /* 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;

marietje/queues/templates/queues/queue.html

@@ -85,8 +85,8 @@
                             </td>
                             <td class="col-md-1">
                                 <span class="control-icons">Control</span>
-                                <span v-if="playsIn" class="btn btn-link p-0 d-sm-none" v-on:click="toggle_details(song)">(Plays in)</span>
+                                <span v-if="playsIn" class="btn btn-link p-0 d-sm-none" v-on:click="playsIn = false" >(Plays In)</span>
-                                <span v-else class="btn btn-link p-0 d-sm-none" v-on:click="toggle_details(song)">(Plays At)</span>
+                                <span v-else class="btn btn-link p-0 d-sm-none" v-on:click="playsIn = true">(Plays At)</span>
                             </td>
                         </tr>
                         </thead>
@@ -221,12 +221,12 @@
                         </tfoot>
                         <tbody>
                         <template v-for="(song, index) in songs">
-                            <tr>
+                            <tr v-bind:class="{disabled: is_in_queue(song)}">
                                 <td>
                                     ${ song.artist }$
                                 </td>
                                 <td>
-                                    <button v-on:click="request_song(song.id);" class="btn btn-link p-0 text-decoration-none" style="text-align: left">${ song.title }$</button>
+                                    <button v-on:click="request_song(song.id);" class="btn btn-link p-0" style="text-align: left">${ song.title }$</button>
                                 </td>
                                 <td>
                                     <template v-if="song.user === null">
@@ -240,7 +240,7 @@
                                     ${ song.duration.secondsToMMSS() }$
                                 </td>
                                 <td>
-                                    <button v-on:click="report_song(song.id);" class="btn btn-link p-0 text-decoration-none">
+                                    <button v-on:click="report_song(song.id);" class="btn btn-link p-0" style="pointer-events: auto">
                                         ⚑
                                     </button>
                                 </td>
@@ -585,6 +585,10 @@
                         }
                     });
                 },
+                is_in_queue(song) {
+                    return queue_vue.queue.filter(queuesong => Boolean(queuesong.user)
+                            ).map((queuesong) => queuesong.song.hash).includes(song.hash);
+                },
 
                 request_song(song_id) {
                     fetch('/api/v1/queues/current/request/', {

marietje/songs/templates/songs/upload.html

@@ -179,13 +179,14 @@
                         }).catch(e => {
                             console.log(e);
                             if (e instanceof Response) {
-                                try {
+                                // Intercept an HTTP 413 error (entity too large), as this might
-                                    e.json().then(data => {
+                                // be thrown by a (reverse) proxy server and its payload is not
-                                        this.fileObjects[i].error_message = data.errorMessage;
+                                // nicely formatted as the code below expects.
-                                        this.fileObjects[i].success = false;
+                                if (e.status === 413) {
-                                    });
+                                    this.fileObjects[i].error_message = "The song you tried to upload is too large in size. (HTTP 413 error)";
-                                } catch {
+                                    this.fileObjects[i].success = false;
-                                    this.fileObjects[i].error_message = "An exception occurred while uploading this file, please try again.";
+                                } else {
+                                    this.fileObjects[i].error_message = `${e.statusText} (${e.status})`;
                                     this.fileObjects[i].success = false;
                                 }
                             } else {