From 631c066415454a3bf2330a8664f78fe1c871b0d7 Mon Sep 17 00:00:00 2001 From: Jonathan Baecker Date: Mon, 20 Apr 2020 18:07:12 +0200 Subject: [PATCH] upload file, work on delete file --- ffplayout/frontend/pages/media.vue | 422 +++++++++++++++++++++++------ ffplayout/frontend/store/media.js | 48 ++-- 2 files changed, 369 insertions(+), 101 deletions(-) diff --git a/ffplayout/frontend/pages/media.vue b/ffplayout/frontend/pages/media.vue index e311c788..9eb24e88 100644 --- a/ffplayout/frontend/pages/media.vue +++ b/ffplayout/frontend/pages/media.vue @@ -2,15 +2,8 @@
-
-
+
- - + +
- - - - {{ folder }} - - - + + + + + + + + + + {{ folder }} + + + + + + + + + + +
- - + + +
- - - - {{ file.file }} - {{ file.duration | toMin }} - - - + + + + + + + + + {{ file.file }} + + + + + + + + {{ file.duration | toMin }} + + + + + + + + + + +
+ + + + File Upload + +
+ + + + + + + + + + + + + + Overall: + + + + +
+ + Current: + + + + +
+ + Uploading: + + + {{ uploadTask }} + + + + +
+ + Upload + + + Cancel +
+ + + +

+ Are you sure that you want to delete:
+ {{ previewName }} +

+
+ + Ok + + + Cancel +
- - +
@@ -92,7 +194,19 @@ export default { return { isLoading: false, extensions: '', - inputFile: null + inputFiles: null, + previewOptions: {}, + previewComp: null, + previewName: '', + previewSource: '', + deleteType: 'File', + deleteSource: '', + isImage: false, + uploadTask: '', + overallProgress: 0, + currentProgress: 0, + cancelTokenSource: this.$axios.CancelToken.source(), + lastPath: '' } }, @@ -112,31 +226,142 @@ export default { methods: { async getPath (extensions, path) { + this.lastPath = path this.isLoading = true await this.$store.dispatch('auth/inspectToken') await this.$store.dispatch('media/getTree', { extensions, path }) this.isLoading = false }, - async onSubmit (evt) { + showUploadModal () { + this.uploadTask = '' + this.currentProgress = 0 + this.overallProgress = 0 + this.$root.$emit('bv::show::modal', 'upload-modal') + }, + + formatNames (files) { + if (files.length === 1) { + return files[0].name + } else { + return `${files.length} files selected` + } + }, + + async onSubmitUpload (evt) { evt.preventDefault() await this.$store.dispatch('auth/inspectToken') - const config = { - onUploadProgress: (progressEvent) => { - const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total) - console.log(percentCompleted) - }, - headers: { Authorization: 'Bearer ' + this.$store.state.auth.jwtToken } + const uploadProgress = fileName => (progressEvent) => { + const progress = Math.round((progressEvent.loaded * 100) / progressEvent.total) + this.currentProgress = progress } - this.$axios.put( - `/upload/${encodeURIComponent(this.inputFile.name)}?path=${encodeURIComponent(this.crumbs.map(e => e.text).join('/'))}`, - this.inputFile, - config + for (const [i, file] of this.inputFiles.entries()) { + this.uploadTask = file.name + + const config = { + onUploadProgress: uploadProgress(file.name), + cancelToken: this.cancelTokenSource.token, + headers: { Authorization: 'Bearer ' + this.$store.state.auth.jwtToken } + } + + await this.$axios.put( + `/upload/${encodeURIComponent(file.name)}?path=${encodeURIComponent(this.crumbs.map(e => e.text).join('/'))}`, + file, + config + ) + .then( + this.overallProgress = (i + 1) * 100 / this.inputFiles.length, + this.currentProgress = 0, + await this.$store.dispatch('auth/inspectToken') + ) + .catch(err => console.log(err)) + } + + this.uploadTask = 'Done...' + this.getPath(this.extensions, this.lastPath) + }, + + onResetUpload (evt) { + evt.preventDefault() + this.inputFiles = null + this.overallProgress = 0 + this.currentProgress = 0 + this.uploadTask = '' + + this.cancelTokenSource.cancel('Upload cancelled') + this.getPath(this.extensions, this.lastPath) + + this.$root.$emit('bv::hide::modal', 'upload-modal') + }, + + showPreviewModal (src) { + this.previewSource = src + this.previewName = src.split('/').slice(-1)[0] + const ext = this.previewName.split('.').slice(-1)[0] + + if (this.configPlayout.storage.extensions.includes(`.${ext}`)) { + this.isImage = false + this.previewOptions = { + liveui: false, + controls: true, + suppressNotSupportedError: true, + autoplay: false, + preload: 'auto', + sources: [ + { + type: `video/${ext}`, + src: encodeURIComponent(src) + } + ] + } + } else { + this.isImage = true + } + this.$root.$emit('bv::show::modal', 'preview-modal') + }, + + showDeleteModal (type, src) { + this.deleteSource = src + + if (type === 'File') { + this.previewName = src.split('/').slice(-1)[0] + } else { + this.previewName = src + } + + this.deleteType = type + this.$root.$emit('bv::show::modal', 'delete-modal') + }, + + async deleteFileOrFolder () { + await this.$store.dispatch('auth/inspectToken') + let file + + if (this.deleteType === 'File') { + file = this.deleteSource.split('/').slice(-1)[0] + } else { + file = null + } + + const pathName = this.deleteSource.substring(0, this.deleteSource.lastIndexOf('/') + 1) + + await this.$axios.delete( + `/delete/?file=${encodeURIComponent(file)}&path=${encodeURIComponent(pathName)}`, + { headers: { Authorization: 'Bearer ' + this.$store.state.auth.jwtToken } } ) - .then(res => console.log(res)) + .then(response => console.log(response)) .catch(err => console.log(err)) + + this.$root.$emit('bv::hide::modal', 'delete-modal') + + this.getPath(this.extensions, this.lastPath) + }, + + cancelDelete () { + this.deleteSource = '' + this.$root.$emit('bv::hide::modal', 'delete-modal') } } } @@ -146,19 +371,11 @@ export default { .browser { width: 100%; max-width: 100%; + height: calc(100% - 40px); } -.folder-col { - min-width: 320px; - max-width: 460px; -} - -.folder { - padding: .3em; -} - -.files-col { - min-width: 320px; +.bread-div { + height: 50px; } .browser-div { @@ -167,4 +384,57 @@ export default { border: 1px solid #000; border-radius: 5px; } + +.browser-row { + height: calc(100% - 90px); + min-height: 50px; +} + +.folder-col { + min-width: 320px; + max-width: 460px; + height: 100%; +} + +.folder:hover > div > .folder-delete { + display: inline; +} + +.folder-list { + height: 100%; + padding: .5em; +} + +.folder-delete { + margin-right: .5em; + display: none; +} + +.files-col { + min-width: 320px; + height: 100%; +} + +.files-list { + width: 99.5%; + height: 100%; + padding: .5em; +} + +.upload-button { + float: right; + margin-top: 1em; +} + +.progress-row { + margin-top: 1em; +} + +.progress-row .col-1 { + min-width: 60px +} + +.progress-row .col-10 { + margin: auto 0 auto 0 +} diff --git a/ffplayout/frontend/store/media.js b/ffplayout/frontend/store/media.js index 9329f981..4e1ccc63 100644 --- a/ffplayout/frontend/store/media.js +++ b/ffplayout/frontend/store/media.js @@ -18,34 +18,32 @@ export const mutations = { export const actions = { async getTree ({ commit, dispatch, state, rootState }, { extensions, path }) { - if ((path !== state.currentPath || !state.folderTree)) { - const crumbs = [] - let root = '/' - const response = await this.$axios.get(`api/media/?extensions=${extensions}&path=${path}`, { headers: { Authorization: 'Bearer ' + rootState.auth.jwtToken } }) + const crumbs = [] + let root = '/' + const response = await this.$axios.get(`api/media/?extensions=${extensions}&path=${path}`, { headers: { Authorization: 'Bearer ' + rootState.auth.jwtToken } }) - if (response.data.tree) { - const pathArr = response.data.tree[0].split('/') + if (response.data.tree) { + const pathArr = response.data.tree[0].split('/') - if (response.data.tree[1].length === 0) { - response.data.tree[1].push(pathArr[pathArr.length - 1]) - } - - if (path) { - for (const crumb of pathArr) { - if (crumb) { - root += crumb + '/' - crumbs.push({ text: crumb, path: root }) - } - } - } else { - crumbs.push({ text: pathArr[pathArr.length - 1], path: '' }) - } - - // console.log(crumbs) - commit('UPDATE_CURRENT_PATH', path) - commit('UPDATE_CRUMBS', crumbs) - commit('UPDATE_FOLDER_TREE', response.data) + if (response.data.tree[1].length === 0) { + response.data.tree[1].push(pathArr[pathArr.length - 1]) } + + if (path) { + for (const crumb of pathArr) { + if (crumb) { + root += crumb + '/' + crumbs.push({ text: crumb, path: root }) + } + } + } else { + crumbs.push({ text: pathArr[pathArr.length - 1], path: '' }) + } + + // console.log(crumbs) + commit('UPDATE_CURRENT_PATH', path) + commit('UPDATE_CRUMBS', crumbs) + commit('UPDATE_FOLDER_TREE', response.data) } } }