Skip to content

GitLab

Verified Commit bb1de481 authored by Eliot Berriot's avatar Eliot Berriot
Browse files

Fix #598: Allow opus file upload

parent 2739a5fb
Hide whitespace changes
Inline Side-by-side
changes/changelog.d/598.bugfix 0 → 100644
View file @ bb1de481
Allow opus file upload (#598)
front/src/components/library/FileUpload.vue
View file @ bb1de481
......@@ -66,18 +66,19 @@
:multiple="true"
:data="uploadData"
:drop="true"
accept="audio/*"
:extensions="supportedExtensions"
v-model="files"
name="audio_file"
:thread="1"
@input-filter="inputFilter"
@input-file="inputFile"
ref="upload">
<i class="upload icon"></i>
<i class="upload icon"></i>&nbsp;
<translate>Click to select files to upload or drag and drop files or directories</translate>
<br />
<br />
<i><translate :translate-params="{extensions: supportedExtensions.join(', ')}"> Supported extensions: %{ extensions }</translate></i>
</file-upload-widget>
</div>
<table v-if="files.length > 0" class="ui single line table">
<thead>
<tr>
......@@ -122,184 +123,213 @@
</template>
<script>
import $ from 'jquery'
import axios from 'axios'
import logger from '@/logging'
import FileUploadWidget from './FileUploadWidget'
import LibraryFilesTable from '@/views/content/libraries/FilesTable'
import moment from 'moment'
import $ from "jquery";
import axios from "axios";
import logger from "@/logging";
import FileUploadWidget from "./FileUploadWidget";
import LibraryFilesTable from "@/views/content/libraries/FilesTable";
import moment from "moment";
export default {
props: ['library', 'defaultImportReference'],
props: ["library", "defaultImportReference"],
components: {
FileUploadWidget,
LibraryFilesTable
},
data () {
let importReference = this.defaultImportReference || moment().format()
this.$router.replace({query: {import: importReference}})
data() {
let importReference = this.defaultImportReference || moment().format();
this.$router.replace({ query: { import: importReference } });
return {
files: [],
currentTab: 'summary',
uploadUrl: '/api/v1/uploads/',
currentTab: "summary",
uploadUrl: "/api/v1/uploads/",
importReference,
supportedExtensions: ["flac", "ogg", "mp3", "opus"],
uploads: {
pending: 0,
finished: 0,
skipped: 0,
errored: 0,
objects: {},
objects: {}
},
processTimestamp: new Date()
}
};
},
created () {
this.fetchStatus()
this.$store.commit('ui/addWebsocketEventHandler', {
eventName: 'import.status_updated',
id: 'fileUpload',
created() {
this.fetchStatus();
this.$store.commit("ui/addWebsocketEventHandler", {
eventName: "import.status_updated",
id: "fileUpload",
handler: this.handleImportEvent
})
});
},
destroyed () {
this.$store.commit('ui/removeWebsocketEventHandler', {
eventName: 'import.status_updated',
id: 'fileUpload',
})
destroyed() {
this.$store.commit("ui/removeWebsocketEventHandler", {
eventName: "import.status_updated",
id: "fileUpload"
});
},
methods: {
inputFilter (newFile, oldFile, prevent) {
if (newFile && !oldFile) {
let extension = newFile.name.split('.').pop()
if (['ogg', 'mp3', 'flac'].indexOf(extension) < 0) {
prevent()
}
}
},
inputFile (newFile, oldFile) {
this.$refs.upload.active = true
inputFile(newFile, oldFile) {
this.$refs.upload.active = true;
},
fetchStatus () {
let self = this
let statuses = ['pending', 'errored', 'skipped', 'finished']
statuses.forEach((status) => {
axios.get('uploads/', {params: {import_reference: self.importReference, import_status: status, page_size: 1}}).then((response) => {
self.uploads[status] = response.data.count
})
})
fetchStatus() {
let self = this;
let statuses = ["pending", "errored", "skipped", "finished"];
statuses.forEach(status => {
axios
.get("uploads/", {
params: {
import_reference: self.importReference,
import_status: status,
page_size: 1
}
})
.then(response => {
self.uploads[status] = response.data.count;
});
});
},
updateProgressBar () {
$(this.$el).find('.progress').progress({
total: this.uploads.length * 2,
value: this.uploadedFilesCount + this.finishedJobs
})
updateProgressBar() {
$(this.$el)
.find(".progress")
.progress({
total: this.uploads.length * 2,
value: this.uploadedFilesCount + this.finishedJobs
});
},
disconnect () {
disconnect() {
if (!this.bridge) {
return
return;
}
this.bridge.socket.close(1000, 'goodbye', {keepClosed: true})
this.bridge.socket.close(1000, "goodbye", { keepClosed: true });
},
openWebsocket () {
this.disconnect()
let self = this
let token = this.$store.state.auth.token
const bridge = new WebSocketBridge()
this.bridge = bridge
let url = this.$store.getters['instance/absoluteUrl'](`api/v1/activity?token=${token}`)
url = url.replace('http://', 'ws://')
url = url.replace('https://', 'wss://')
bridge.connect(url)
bridge.listen(function (event) {
self.handleEvent(event)
})
bridge.socket.addEventListener('open', function () {
console.log('Connected to WebSocket')
})
openWebsocket() {
this.disconnect();
let self = this;
let token = this.$store.state.auth.token;
const bridge = new WebSocketBridge();
this.bridge = bridge;
let url = this.$store.getters["instance/absoluteUrl"](
`api/v1/activity?token=${token}`
);
url = url.replace("http://", "ws://");
url = url.replace("https://", "wss://");
bridge.connect(url);
bridge.listen(function(event) {
self.handleEvent(event);
});
bridge.socket.addEventListener("open", function() {
console.log("Connected to WebSocket");
});
},
handleImportEvent (event) {
let self = this
handleImportEvent(event) {
let self = this;
if (event.upload.import_reference != self.importReference) {
return
return;
}
this.$nextTick(() => {
self.uploads[event.old_status] -= 1
self.uploads[event.new_status] += 1
self.uploads.objects[event.track_file.uuid] = event.track_file
self.triggerReload()
})
self.uploads[event.old_status] -= 1;
self.uploads[event.new_status] += 1;
self.uploads.objects[event.upload.uuid] = event.track_file;
self.triggerReload();
});
},
triggerReload: _.throttle(function () {
this.processTimestamp = new Date()
}, 10000, {'leading': true})
triggerReload: _.throttle(
function() {
this.processTimestamp = new Date();
},
10000,
{ leading: true }
)
},
computed: {
labels () {
let denied = this.$gettext('Upload refused, ensure the file is not too big and you have not reached your quota')
let server = this.$gettext('Impossible to upload this file, ensure it is not too big')
let network = this.$gettext('A network error occured while uploading this file')
let timeout = this.$gettext('Upload timeout, please try again')
labels() {
let denied = this.$gettext(
"Upload refused, ensure the file is not too big and you have not reached your quota"
);
let server = this.$gettext(
"Impossible to upload this file, ensure it is not too big"
);
let network = this.$gettext(
"A network error occured while uploading this file"
);
let timeout = this.$gettext("Upload timeout, please try again");
let extension = this.$gettext(
"Invalid file type, ensure you are uploading an audio file. Supported file extensions are %{ extensions }"
);
return {
tooltips: {
denied,
server,
network,
timeout
timeout,
extension: this.$gettextInterpolate(extension, {
extensions: this.supportedExtensions.join(", ")
})
}
}
};
},
uploadedFilesCount () {
return this.files.filter((f) => {
return f.success
}).length
uploadedFilesCount() {
return this.files.filter(f => {
return f.success;
}).length;
},
uploadingFilesCount () {
return this.files.filter((f) => {
return !f.success && !f.error
}).length
uploadingFilesCount() {
return this.files.filter(f => {
return !f.success && !f.error;
}).length;
},
erroredFilesCount () {
return this.files.filter((f) => {
return f.error
}).length
erroredFilesCount() {
return this.files.filter(f => {
return f.error;
}).length;
},
processableFiles () {
return this.uploads.pending + this.uploads.skipped + this.uploads.errored + this.uploads.finished + this.uploadedFilesCount
processableFiles() {
return (
this.uploads.pending +
this.uploads.skipped +
this.uploads.errored +
this.uploads.finished +
this.uploadedFilesCount
);
},
processedFilesCount () {
return this.uploads.skipped + this.uploads.errored + this.uploads.finished
processedFilesCount() {
return (
this.uploads.skipped + this.uploads.errored + this.uploads.finished
);
},
uploadData: function () {
uploadData: function() {
return {
'library': this.library.uuid,
'import_reference': this.importReference,
}
library: this.library.uuid,
import_reference: this.importReference
};
},
sortedFiles () {
sortedFiles() {
// return errored files on top
return this.files.sort((f) => {
return this.files.sort(f => {
if (f.errored) {
return -5
return -5;
}
if (f.success) {
return 5
return 5;
}
return 0
})
return 0;
});
}
},
watch: {
uploadedFilesCount () {
this.updateProgressBar()
uploadedFilesCount() {
this.updateProgressBar();
},
finishedJobs () {
this.updateProgressBar()
finishedJobs() {
this.updateProgressBar();
},
importReference: _.debounce(function () {
this.$router.replace({query: {import: this.importReference}})
importReference: _.debounce(function() {
this.$router.replace({ query: { import: this.importReference } });
}, 500)
}
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment