add import playlist from text file

This commit is contained in:
jb-alvarado 2022-10-02 21:41:15 +02:00
parent 51719eb9c0
commit 0060d40b59
3 changed files with 130 additions and 42 deletions

88
package-lock.json generated
View File

@ -1,12 +1,12 @@
{ {
"name": "ffplayout-frontend", "name": "ffplayout-frontend",
"version": "5.2.4", "version": "5.3.0",
"lockfileVersion": 2, "lockfileVersion": 2,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "ffplayout-frontend", "name": "ffplayout-frontend",
"version": "5.2.4", "version": "5.3.0",
"dependencies": { "dependencies": {
"@nuxtjs/axios": "^5.13.6", "@nuxtjs/axios": "^5.13.6",
"@nuxtjs/dayjs": "^1.4.1", "@nuxtjs/dayjs": "^1.4.1",
@ -19,19 +19,19 @@
"mpegts.js": "^1.6.10", "mpegts.js": "^1.6.10",
"nuxt": "^2.15.8", "nuxt": "^2.15.8",
"splitpanes": "^2.4.1", "splitpanes": "^2.4.1",
"video.js": "^7.20.2", "video.js": "^7.20.3",
"vue-loading-overlay": "^3.4.2", "vue-loading-overlay": "^3.4.2",
"vuedraggable": "^2.24.3" "vuedraggable": "^2.24.3"
}, },
"devDependencies": { "devDependencies": {
"@babel/eslint-parser": "^7.18.9", "@babel/eslint-parser": "^7.19.1",
"@babel/preset-react": "^7.18.6", "@babel/preset-react": "^7.18.6",
"@nuxtjs/eslint-config": "^5.0.0", "@nuxtjs/eslint-config": "^5.0.0",
"@nuxtjs/eslint-module": "^3.1.0", "@nuxtjs/eslint-module": "^3.1.0",
"@nuxtjs/style-resources": "^1.2.1", "@nuxtjs/style-resources": "^1.2.1",
"eslint": "^7.32.0", "eslint": "^7.32.0",
"eslint-plugin-nuxt": "3.2.0", "eslint-plugin-nuxt": "3.2.0",
"sass": "^1.54.5", "sass": "^1.55.0",
"sass-loader": "^10.3.1" "sass-loader": "^10.3.1"
} }
}, },
@ -96,12 +96,12 @@
} }
}, },
"node_modules/@babel/eslint-parser": { "node_modules/@babel/eslint-parser": {
"version": "7.18.9", "version": "7.19.1",
"resolved": "https://registry.npmjs.org/@babel/eslint-parser/-/eslint-parser-7.18.9.tgz", "resolved": "https://registry.npmjs.org/@babel/eslint-parser/-/eslint-parser-7.19.1.tgz",
"integrity": "sha512-KzSGpMBggz4fKbRbWLNyPVTuQr6cmCcBhOyXTw/fieOVaw5oYAwcAj4a7UKcDYCPxQq+CG1NCDZH9e2JTXquiQ==", "integrity": "sha512-AqNf2QWt1rtu2/1rLswy6CDP7H9Oh3mMhk177Y67Rg8d7RD9WfOLLv8CGn6tisFvS2htm86yIe1yLF6I1UDaGQ==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"eslint-scope": "^5.1.1", "@nicolo-ribaudo/eslint-scope-5-internals": "5.1.1-v1",
"eslint-visitor-keys": "^2.1.0", "eslint-visitor-keys": "^2.1.0",
"semver": "^6.3.0" "semver": "^6.3.0"
}, },
@ -1831,6 +1831,15 @@
"@jridgewell/sourcemap-codec": "^1.4.10" "@jridgewell/sourcemap-codec": "^1.4.10"
} }
}, },
"node_modules/@nicolo-ribaudo/eslint-scope-5-internals": {
"version": "5.1.1-v1",
"resolved": "https://registry.npmjs.org/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz",
"integrity": "sha512-54/JRvkLIzzDWshCWfuhadfrfZVPiElY8Fcgmg1HroEly/EDSszzhBAsarCux+D/kOslTRquNzuyGSmUSTTHGg==",
"dev": true,
"dependencies": {
"eslint-scope": "5.1.1"
}
},
"node_modules/@nodelib/fs.scandir": { "node_modules/@nodelib/fs.scandir": {
"version": "2.1.5", "version": "2.1.5",
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@ -3239,9 +3248,9 @@
} }
}, },
"node_modules/@videojs/http-streaming": { "node_modules/@videojs/http-streaming": {
"version": "2.14.2", "version": "2.14.3",
"resolved": "https://registry.npmjs.org/@videojs/http-streaming/-/http-streaming-2.14.2.tgz", "resolved": "https://registry.npmjs.org/@videojs/http-streaming/-/http-streaming-2.14.3.tgz",
"integrity": "sha512-K1raSfO/pq5r8iUas3OSYni0kXOj91n8ealIpV02khghzGv9LQ6O3YUqYd/eAhJ1HIrmZWOnrYpK/P+mhUExXQ==", "integrity": "sha512-2tFwxCaNbcEZzQugWf8EERwNMyNtspfHnvxRGRABQs09W/5SqmkWFuGWfUAm4wQKlXGfdPyAJ1338ASl459xAA==",
"dependencies": { "dependencies": {
"@babel/runtime": "^7.12.5", "@babel/runtime": "^7.12.5",
"@videojs/vhs-utils": "3.0.5", "@videojs/vhs-utils": "3.0.5",
@ -12883,9 +12892,9 @@
"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==" "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
}, },
"node_modules/sass": { "node_modules/sass": {
"version": "1.54.8", "version": "1.55.0",
"resolved": "https://registry.npmjs.org/sass/-/sass-1.54.8.tgz", "resolved": "https://registry.npmjs.org/sass/-/sass-1.55.0.tgz",
"integrity": "sha512-ib4JhLRRgbg6QVy6bsv5uJxnJMTS2soVcCp9Y88Extyy13A8vV0G1fAwujOzmNkFQbR3LvedudAMbtuNRPbQww==", "integrity": "sha512-Pk+PMy7OGLs9WaxZGJMn7S96dvlyVBwwtToX895WmCpAOr5YiJYEUJfiJidMuKb613z2xNWcXCHEuOvjZbqC6A==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"chokidar": ">=3.0.0 <4.0.0", "chokidar": ">=3.0.0 <4.0.0",
@ -14925,12 +14934,12 @@
} }
}, },
"node_modules/video.js": { "node_modules/video.js": {
"version": "7.20.2", "version": "7.20.3",
"resolved": "https://registry.npmjs.org/video.js/-/video.js-7.20.2.tgz", "resolved": "https://registry.npmjs.org/video.js/-/video.js-7.20.3.tgz",
"integrity": "sha512-hdvAHKAyaL6bCDkeu0pPtFYKi1EDaOUovm7FN1xqBDolUxgH8FKy1WIgTS+Ouuaw7R54SCTcSeXjZEizhy9ouQ==", "integrity": "sha512-JMspxaK74LdfWcv69XWhX4rILywz/eInOVPdKefpQiZJSMD5O8xXYueqACP2Q5yqKstycgmmEKlJzZ+kVmDciw==",
"dependencies": { "dependencies": {
"@babel/runtime": "^7.12.5", "@babel/runtime": "^7.12.5",
"@videojs/http-streaming": "2.14.2", "@videojs/http-streaming": "2.14.3",
"@videojs/vhs-utils": "^3.0.4", "@videojs/vhs-utils": "^3.0.4",
"@videojs/xhr": "2.6.0", "@videojs/xhr": "2.6.0",
"aes-decrypter": "3.1.3", "aes-decrypter": "3.1.3",
@ -14941,7 +14950,7 @@
"mux.js": "6.0.1", "mux.js": "6.0.1",
"safe-json-parse": "4.0.0", "safe-json-parse": "4.0.0",
"videojs-font": "3.2.0", "videojs-font": "3.2.0",
"videojs-vtt.js": "^0.15.3" "videojs-vtt.js": "^0.15.4"
} }
}, },
"node_modules/videojs-font": { "node_modules/videojs-font": {
@ -16729,12 +16738,12 @@
} }
}, },
"@babel/eslint-parser": { "@babel/eslint-parser": {
"version": "7.18.9", "version": "7.19.1",
"resolved": "https://registry.npmjs.org/@babel/eslint-parser/-/eslint-parser-7.18.9.tgz", "resolved": "https://registry.npmjs.org/@babel/eslint-parser/-/eslint-parser-7.19.1.tgz",
"integrity": "sha512-KzSGpMBggz4fKbRbWLNyPVTuQr6cmCcBhOyXTw/fieOVaw5oYAwcAj4a7UKcDYCPxQq+CG1NCDZH9e2JTXquiQ==", "integrity": "sha512-AqNf2QWt1rtu2/1rLswy6CDP7H9Oh3mMhk177Y67Rg8d7RD9WfOLLv8CGn6tisFvS2htm86yIe1yLF6I1UDaGQ==",
"dev": true, "dev": true,
"requires": { "requires": {
"eslint-scope": "^5.1.1", "@nicolo-ribaudo/eslint-scope-5-internals": "5.1.1-v1",
"eslint-visitor-keys": "^2.1.0", "eslint-visitor-keys": "^2.1.0",
"semver": "^6.3.0" "semver": "^6.3.0"
} }
@ -17908,6 +17917,15 @@
"@jridgewell/sourcemap-codec": "^1.4.10" "@jridgewell/sourcemap-codec": "^1.4.10"
} }
}, },
"@nicolo-ribaudo/eslint-scope-5-internals": {
"version": "5.1.1-v1",
"resolved": "https://registry.npmjs.org/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz",
"integrity": "sha512-54/JRvkLIzzDWshCWfuhadfrfZVPiElY8Fcgmg1HroEly/EDSszzhBAsarCux+D/kOslTRquNzuyGSmUSTTHGg==",
"dev": true,
"requires": {
"eslint-scope": "5.1.1"
}
},
"@nodelib/fs.scandir": { "@nodelib/fs.scandir": {
"version": "2.1.5", "version": "2.1.5",
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@ -19046,9 +19064,9 @@
} }
}, },
"@videojs/http-streaming": { "@videojs/http-streaming": {
"version": "2.14.2", "version": "2.14.3",
"resolved": "https://registry.npmjs.org/@videojs/http-streaming/-/http-streaming-2.14.2.tgz", "resolved": "https://registry.npmjs.org/@videojs/http-streaming/-/http-streaming-2.14.3.tgz",
"integrity": "sha512-K1raSfO/pq5r8iUas3OSYni0kXOj91n8ealIpV02khghzGv9LQ6O3YUqYd/eAhJ1HIrmZWOnrYpK/P+mhUExXQ==", "integrity": "sha512-2tFwxCaNbcEZzQugWf8EERwNMyNtspfHnvxRGRABQs09W/5SqmkWFuGWfUAm4wQKlXGfdPyAJ1338ASl459xAA==",
"requires": { "requires": {
"@babel/runtime": "^7.12.5", "@babel/runtime": "^7.12.5",
"@videojs/vhs-utils": "3.0.5", "@videojs/vhs-utils": "3.0.5",
@ -26527,9 +26545,9 @@
"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==" "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
}, },
"sass": { "sass": {
"version": "1.54.8", "version": "1.55.0",
"resolved": "https://registry.npmjs.org/sass/-/sass-1.54.8.tgz", "resolved": "https://registry.npmjs.org/sass/-/sass-1.55.0.tgz",
"integrity": "sha512-ib4JhLRRgbg6QVy6bsv5uJxnJMTS2soVcCp9Y88Extyy13A8vV0G1fAwujOzmNkFQbR3LvedudAMbtuNRPbQww==", "integrity": "sha512-Pk+PMy7OGLs9WaxZGJMn7S96dvlyVBwwtToX895WmCpAOr5YiJYEUJfiJidMuKb613z2xNWcXCHEuOvjZbqC6A==",
"dev": true, "dev": true,
"requires": { "requires": {
"chokidar": ">=3.0.0 <4.0.0", "chokidar": ">=3.0.0 <4.0.0",
@ -28100,12 +28118,12 @@
"integrity": "sha512-/juG65kTL4Cy2su4P8HjtkTxk6VmJDiOPBufWniqQ6wknac6jNiXS9vU+hO3wgusiyqWlzTbVHi0dyJqRONg3w==" "integrity": "sha512-/juG65kTL4Cy2su4P8HjtkTxk6VmJDiOPBufWniqQ6wknac6jNiXS9vU+hO3wgusiyqWlzTbVHi0dyJqRONg3w=="
}, },
"video.js": { "video.js": {
"version": "7.20.2", "version": "7.20.3",
"resolved": "https://registry.npmjs.org/video.js/-/video.js-7.20.2.tgz", "resolved": "https://registry.npmjs.org/video.js/-/video.js-7.20.3.tgz",
"integrity": "sha512-hdvAHKAyaL6bCDkeu0pPtFYKi1EDaOUovm7FN1xqBDolUxgH8FKy1WIgTS+Ouuaw7R54SCTcSeXjZEizhy9ouQ==", "integrity": "sha512-JMspxaK74LdfWcv69XWhX4rILywz/eInOVPdKefpQiZJSMD5O8xXYueqACP2Q5yqKstycgmmEKlJzZ+kVmDciw==",
"requires": { "requires": {
"@babel/runtime": "^7.12.5", "@babel/runtime": "^7.12.5",
"@videojs/http-streaming": "2.14.2", "@videojs/http-streaming": "2.14.3",
"@videojs/vhs-utils": "^3.0.4", "@videojs/vhs-utils": "^3.0.4",
"@videojs/xhr": "2.6.0", "@videojs/xhr": "2.6.0",
"aes-decrypter": "3.1.3", "aes-decrypter": "3.1.3",
@ -28116,7 +28134,7 @@
"mux.js": "6.0.1", "mux.js": "6.0.1",
"safe-json-parse": "4.0.0", "safe-json-parse": "4.0.0",
"videojs-font": "3.2.0", "videojs-font": "3.2.0",
"videojs-vtt.js": "^0.15.3" "videojs-vtt.js": "^0.15.4"
} }
}, },
"videojs-font": { "videojs-font": {

View File

@ -1,6 +1,6 @@
{ {
"name": "ffplayout-frontend", "name": "ffplayout-frontend",
"version": "5.2.4", "version": "5.3.0",
"description": "Web GUI for ffplayout", "description": "Web GUI for ffplayout",
"author": "Jonathan Baecker", "author": "Jonathan Baecker",
"private": true, "private": true,
@ -23,19 +23,19 @@
"mpegts.js": "^1.6.10", "mpegts.js": "^1.6.10",
"nuxt": "^2.15.8", "nuxt": "^2.15.8",
"splitpanes": "^2.4.1", "splitpanes": "^2.4.1",
"video.js": "^7.20.2", "video.js": "^7.20.3",
"vue-loading-overlay": "^3.4.2", "vue-loading-overlay": "^3.4.2",
"vuedraggable": "^2.24.3" "vuedraggable": "^2.24.3"
}, },
"devDependencies": { "devDependencies": {
"@babel/eslint-parser": "^7.18.9", "@babel/eslint-parser": "^7.19.1",
"@babel/preset-react": "^7.18.6", "@babel/preset-react": "^7.18.6",
"@nuxtjs/eslint-config": "^5.0.0", "@nuxtjs/eslint-config": "^5.0.0",
"@nuxtjs/eslint-module": "^3.1.0", "@nuxtjs/eslint-module": "^3.1.0",
"@nuxtjs/style-resources": "^1.2.1", "@nuxtjs/style-resources": "^1.2.1",
"eslint": "^7.32.0", "eslint": "^7.32.0",
"eslint-plugin-nuxt": "3.2.0", "eslint-plugin-nuxt": "3.2.0",
"sass": "^1.54.5", "sass": "^1.55.0",
"sass-loader": "^10.3.1" "sass-loader": "^10.3.1"
} }
} }

View File

@ -308,9 +308,6 @@
</pane> </pane>
</splitpanes> </splitpanes>
<b-button-group class="media-button"> <b-button-group class="media-button">
<b-button v-b-tooltip.hover title="Reset Playlist" variant="primary" @click="resetPlaylist()">
<b-icon-arrow-counterclockwise />
</b-button>
<b-button v-b-tooltip.hover title="Copy Playlist" variant="primary" @click="showCopyModal()"> <b-button v-b-tooltip.hover title="Copy Playlist" variant="primary" @click="showCopyModal()">
<b-icon-files /> <b-icon-files />
</b-button> </b-button>
@ -320,9 +317,15 @@
<b-button v-b-tooltip.hover title="Add (remote) Source to Playlist" variant="primary" @click="showAddSource()"> <b-button v-b-tooltip.hover title="Add (remote) Source to Playlist" variant="primary" @click="showAddSource()">
<b-icon-file-earmark-plus /> <b-icon-file-earmark-plus />
</b-button> </b-button>
<b-button v-b-tooltip.hover title="Import text/m3u file" variant="primary" @click="showImport()">
<b-icon-file-text />
</b-button>
<b-button v-b-tooltip.hover title="Generate a randomized Playlist" variant="primary" @click="generatePlaylist(listDate)"> <b-button v-b-tooltip.hover title="Generate a randomized Playlist" variant="primary" @click="generatePlaylist(listDate)">
<b-icon-sort-down-alt /> <b-icon-sort-down-alt />
</b-button> </b-button>
<b-button v-b-tooltip.hover title="Reset Playlist" variant="primary" @click="resetPlaylist()">
<b-icon-arrow-counterclockwise />
</b-button>
<b-button v-b-tooltip.hover title="Save Playlist" variant="primary" @click="savePlaylist(listDate)"> <b-button v-b-tooltip.hover title="Save Playlist" variant="primary" @click="savePlaylist(listDate)">
<b-icon-download /> <b-icon-download />
</b-button> </b-button>
@ -341,6 +344,32 @@
> >
<video-player v-if="previewOptions" reference="previewPlayer" :options="previewOptions" /> <video-player v-if="previewOptions" reference="previewPlayer" :options="previewOptions" />
</b-modal> </b-modal>
<b-modal
id="import-modal"
ref="import-modal"
centered
title="Import Playlist"
hide-footer
no-close-on-backdrop
>
<b-form @submit="onSubmitImport" @reset="onResetImport">
<b-form-file
v-model="textFile"
:state="Boolean(textFile)"
placeholder="Choose a file or drop it here..."
drop-placeholder="Drop file here..."
@reset="onResetImport"
/>
<div class="media-button">
<b-button type="submit" variant="primary">
Import
</b-button>
<b-button type="reset" variant="primary">
Cancel
</b-button>
</div>
</b-form>
</b-modal>
<b-modal <b-modal
id="copy-modal" id="copy-modal"
ref="copy-modal" ref="copy-modal"
@ -466,6 +495,7 @@ export default {
previewComp: null, previewComp: null,
previewSource: '', previewSource: '',
editId: undefined, editId: undefined,
textFile: null,
newSource: { newSource: {
begin: 0, begin: 0,
in: 0, in: 0,
@ -681,6 +711,46 @@ export default {
await this.$store.dispatch('playlist/getPlaylist', { date: this.listDate }) await this.$store.dispatch('playlist/getPlaylist', { date: this.listDate })
}, },
showImport () {
this.$root.$emit('bv::show::modal', 'import-modal')
},
onResetImport (evt) {
evt.preventDefault()
this.textFile = null
this.inputPlaceholder = 'Choose files or drop them here...'
this.$root.$emit('bv::hide::modal', 'import-modal')
},
async onSubmitImport (evt) {
evt.preventDefault()
if (this.textFile === null) {
this.$root.$emit('bv::hide::modal', 'import-modal')
return
}
const formData = new FormData()
formData.append(this.textFile.name, this.textFile)
const config = {
headers: { Authorization: 'Bearer ' + this.$store.state.auth.jwtToken }
}
await this.$axios.put(
`api/file/${this.configGui[this.configID].id}/import/?file=${this.textFile.name}&date=${this.listDate}`,
formData,
config
)
.catch(err => console.log(err))
this.$root.$emit('bv::hide::modal', 'import-modal')
this.textFile = null
await this.getPlaylist()
},
loopClips () { loopClips () {
const tempList = [] const tempList = []
let count = 0 let count = 0