From d79e3425f4983bf792bbe52bb50c2a65aa9fe9ef Mon Sep 17 00:00:00 2001
From: Lars van Rhijn <larsvanrhijn@gmail.com>
Date: Thu, 12 Oct 2023 17:25:26 +0200
Subject: [PATCH] New song library

---
 marietje/songs/templates/songs/upload.html | 65 +++++++++++++---------
 1 file changed, 40 insertions(+), 25 deletions(-)

diff --git a/marietje/songs/templates/songs/upload.html b/marietje/songs/templates/songs/upload.html
index 79b8c09..b28f8e7 100644
--- a/marietje/songs/templates/songs/upload.html
+++ b/marietje/songs/templates/songs/upload.html
@@ -36,21 +36,30 @@
                                     </div>
                                     <div class="card-body">
                                         <div class="form-group mb-3">
-                                            <div v-if="fileObject.artist === '' || fileObject.artist === null" class="alert alert-danger">Please enter an artist for this song.</div>
-                                            <input v-if="upload_in_progress || uploaded" type="text" name="artist[]" class="form-control input-sm artist" disabled
+                                            <div v-if="fileObject.artist === '' || fileObject.artist === null"
+                                                 class="alert alert-danger">Please enter an artist for this song.
+                                            </div>
+                                            <input v-if="upload_in_progress || uploaded" type="text" name="artist[]"
+                                                   class="form-control input-sm artist" disabled
                                                    placeholder="Artist" v-model="fileObject.artist"/>
-                                            <input v-else type="text" name="artist[]" class="form-control input-sm artist"
+                                            <input v-else type="text" name="artist[]"
+                                                   class="form-control input-sm artist"
                                                    placeholder="Artist" v-model="fileObject.artist"/>
                                         </div>
                                         <div class="form-group mb-3">
-                                            <div v-if="fileObject.title === '' || fileObject.title === null" class="alert alert-danger">Please enter a title for this song.</div>
-                                            <input v-if="upload_in_progress || uploaded" type="text" name="title[]" class="form-control input-sm title" disabled
+                                            <div v-if="fileObject.title === '' || fileObject.title === null"
+                                                 class="alert alert-danger">Please enter a title for this song.
+                                            </div>
+                                            <input v-if="upload_in_progress || uploaded" type="text" name="title[]"
+                                                   class="form-control input-sm title" disabled
                                                    placeholder="Title" v-model="fileObject.title"/>
                                             <input v-else type="text" name="title[]" class="form-control input-sm title"
                                                    placeholder="Title" v-model="fileObject.title"/>
                                         </div>
                                         <template v-if="fileObject.upload_finished === true">
-                                            <div v-if="fileObject.success === true" class="alert alert-success">Upload finished successfully.</div>
+                                            <div v-if="fileObject.success === true" class="alert alert-success">Upload
+                                                finished successfully.
+                                            </div>
                                             <div v-else class="alert alert-danger">${ fileObject.error_message }$</div>
                                         </template>
                                     </div>
@@ -59,14 +68,20 @@
                         </div>
                         <div class="card-footer">
                             <div class="progress mt-2 mb-3">
-                                <div :class="{ 'progress-bar-animated': (upload_in_progress), 'bg-success': (uploaded && everything_successfully_uploaded), 'bg-danger': (uploaded && !everything_successfully_uploaded) }" class="progress-bar progress-bar-striped" role="progressbar" :style="{ width: (progress_bar_width + '%') }" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
+                                <div :class="{ 'progress-bar-animated': (upload_in_progress), 'bg-success': (uploaded && everything_successfully_uploaded), 'bg-danger': (uploaded && !everything_successfully_uploaded) }"
+                                     class="progress-bar progress-bar-striped" role="progressbar"
+                                     :style="{ width: (progress_bar_width + '%') }" aria-valuenow="50" aria-valuemin="0"
+                                     aria-valuemax="100"></div>
                             </div>
                             <template v-if="upload_in_progress || uploaded">
-                                <button v-if="uploaded" class="btn btn-primary btn-block w-100" v-on:click="clear">Clear</button>
+                                <button v-if="uploaded" class="btn btn-primary btn-block w-100" v-on:click="clear">
+                                    Clear
+                                </button>
                                 <button v-else class="btn btn-primary btn-block w-100 disabled">Clear</button>
                             </template>
                             <template v-else>
-                                <input v-if="ready_for_upload" id="upload" class="btn btn-primary btn-block w-100" type="submit" value="Upload" v-on:click="upload"/>
+                                <input v-if="ready_for_upload" id="upload" class="btn btn-primary btn-block w-100"
+                                       type="submit" value="Upload" v-on:click="upload"/>
                                 <button v-else class="btn btn-primary btn-block w-100 disabled">Upload</button>
                             </template>
                         </div>
@@ -76,7 +91,7 @@
         </div>
     </div>
     <link rel="stylesheet" href="{% static 'songs/css/upload.css' %}"/>
-    <script src="https://cdn.jsdelivr.net/npm/mp3tag.js@latest/dist/mp3tag.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jsmediatags/3.9.5/jsmediatags.min.js"></script>
     <script>
         let upload_vue = createApp({
             delimiters: ['${', '}$'],
@@ -90,7 +105,7 @@
                 }
             },
             computed: {
-                ready_for_upload: function() {
+                ready_for_upload: function () {
                     if (this.uploaded !== false || this.upload_in_progress !== false || this.fileObjects.length === 0) {
                         return false;
                     } else {
@@ -102,14 +117,14 @@
                         return true;
                     }
                 },
-                everything_successfully_uploaded: function() {
+                everything_successfully_uploaded: function () {
                     return this.fileObjects.map((fileObject) => {
                         return fileObject.upload_finished === true && fileObject.success === true;
                     }).reduce((previousValue, currentValue) => {
                         return previousValue && currentValue;
                     }, true);
                 },
-                progress_bar_width: function() {
+                progress_bar_width: function () {
                     if (this.fileObjects.length === 0) {
                         return 0;
                     }
@@ -223,20 +238,20 @@
                     this.files_loading = false;
                 },
                 async parseSong(file) {
-                    const buffer = await new Promise((resolve) => {
-                        let fileReader = new FileReader();
-                        fileReader.onload = (e) => resolve(fileReader.result);
-                        fileReader.readAsArrayBuffer(file);
+                    let jsMediaTags = window.jsmediatags;
+
+                    const tags = await new Promise((resolve, reject) => {
+                        jsMediaTags.read(file, {
+                            onSuccess: function (tag) {
+                                resolve(tag);
+                            },
+                            onError: function (error) {
+                                reject(error);
+                            }
+                        });
                     });
 
-                    const mp3tag = new MP3Tag(buffer);
-                    mp3tag.read()
-
-                    if (mp3tag.error !== '') {
-                        throw new Error(mp3tag.error);
-                    } else {
-                        return mp3tag.tags;
-                    }
+                    return tags.tags;
                 }
             }
         }).mount('#uploadform');