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

View File

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

View File

@ -308,9 +308,6 @@
</pane>
</splitpanes>
<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-icon-files />
</b-button>
@ -320,9 +317,15 @@
<b-button v-b-tooltip.hover title="Add (remote) Source to Playlist" variant="primary" @click="showAddSource()">
<b-icon-file-earmark-plus />
</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-icon-sort-down-alt />
</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-icon-download />
</b-button>
@ -341,6 +344,32 @@
>
<video-player v-if="previewOptions" reference="previewPlayer" :options="previewOptions" />
</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
id="copy-modal"
ref="copy-modal"
@ -466,6 +495,7 @@ export default {
previewComp: null,
previewSource: '',
editId: undefined,
textFile: null,
newSource: {
begin: 0,
in: 0,
@ -681,6 +711,46 @@ export default {
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 () {
const tempList = []
let count = 0