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

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

@@ -221,7 +221,7 @@
                         </tfoot>
                         <tbody>
                         <template v-for="(song, index) in songs">
-                            <tr>
+                            <tr v-bind:class="{disabled: is_in_queue(song)}">
                                 <td>
                                     ${ song.artist }$
                                 </td>
@@ -240,7 +240,7 @@
                                     ${ song.duration.secondsToMMSS() }$
                                 </td>
                                 <td>
-                                    <button v-on:click="report_song(song.id);" class="btn btn-link p-0">
+                                    <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 {
-                                    e.json().then(data => {
-                                        this.fileObjects[i].error_message = data.errorMessage;
-                                        this.fileObjects[i].success = false;
-                                    });
-                                } catch {
-                                    this.fileObjects[i].error_message = "An exception occurred while uploading this file, please try again.";
+                                // Intercept an HTTP 413 error (entity too large), as this might
+                                // be thrown by a (reverse) proxy server and its payload is not
+                                // nicely formatted as the code below expects.
+                                if (e.status === 413) {
+                                    this.fileObjects[i].error_message = "The song you tried to upload is too large in size. (HTTP 413 error)";
+                                    this.fileObjects[i].success = false;
+                                } else {
+                                    this.fileObjects[i].error_message = `${e.statusText} (${e.status})`;
                                     this.fileObjects[i].success = false;
                                 }
                             } else {