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

New song library

Browse Source
This commit is contained in:
Lars van Rhijn
2023-10-12 17:25:26 +02:00
parent e280fd567d
commit d79e3425f4
1 changed files with 40 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
marietje/songs/templates/songs/upload.html
View File

@ -36,21 +36,30 @@
</div> </div>
<div class="card-body"> <div class="card-body">
<div class="form-group mb-3"> <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> <div v-if="fileObject.artist === '' || fileObject.artist === null"
<input v-if="upload_in_progress || uploaded" type="text" name="artist[]" class="form-control input-sm artist" disabled 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"/> 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"/> placeholder="Artist" v-model="fileObject.artist"/>
</div> </div>
<div class="form-group mb-3"> <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> <div v-if="fileObject.title === '' || fileObject.title === null"
<input v-if="upload_in_progress || uploaded" type="text" name="title[]" class="form-control input-sm title" disabled 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"/> placeholder="Title" v-model="fileObject.title"/>
<input v-else type="text" name="title[]" class="form-control input-sm title" <input v-else type="text" name="title[]" class="form-control input-sm title"
placeholder="Title" v-model="fileObject.title"/> placeholder="Title" v-model="fileObject.title"/>
</div> </div>
<template v-if="fileObject.upload_finished === true"> <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> <div v-else class="alert alert-danger">${ fileObject.error_message }$</div>
</template> </template>
</div> </div>
@ -59,14 +68,20 @@
</div> </div>
<div class="card-footer"> <div class="card-footer">
<div class="progress mt-2 mb-3"> <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> </div>
<template v-if="upload_in_progress || uploaded"> <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> <button v-else class="btn btn-primary btn-block w-100 disabled">Clear</button>
</template> </template>
<template v-else> <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> <button v-else class="btn btn-primary btn-block w-100 disabled">Upload</button>
</template> </template>
</div> </div>
@ -76,7 +91,7 @@
</div> </div>
</div> </div>
<link rel="stylesheet" href="{% static 'songs/css/upload.css' %}"/> <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> <script>
let upload_vue = createApp({ let upload_vue = createApp({
delimiters: ['${', '}$'], delimiters: ['${', '}$'],
@ -223,20 +238,20 @@
this.files_loading = false; this.files_loading = false;
}, },
async parseSong(file) { async parseSong(file) {
const buffer = await new Promise((resolve) => { let jsMediaTags = window.jsmediatags;
let fileReader = new FileReader();
fileReader.onload = (e) => resolve(fileReader.result); const tags = await new Promise((resolve, reject) => {
fileReader.readAsArrayBuffer(file); jsMediaTags.read(file, {
onSuccess: function (tag) {
resolve(tag);
},
onError: function (error) {
reject(error);
}
});
}); });
const mp3tag = new MP3Tag(buffer); return tags.tags;
mp3tag.read()
if (mp3tag.error !== '') {
throw new Error(mp3tag.error);
} else {
return mp3tag.tags;
}
} }
} }
}).mount('#uploadform'); }).mount('#uploadform');