diff --git a/README.md b/README.md
index aebae022..7acd9ee2 100644
--- a/README.md
+++ b/README.md
@@ -15,25 +15,22 @@ After installations you have to setup ssl for your **https** connections.
## Some Impressions:
#### Login
-
-
-#### Landing Page
-
+
#### Control Page
-
+
#### Media Page
-
+
#### Media Page / Upload
-
+
#### Message Page
-
+
#### Logging Page
-
+
#### Configuration Page / GUI
-
+
diff --git a/docs/assets/config-gui.png b/docs/assets/config-gui.png
deleted file mode 100644
index ad8d501a..00000000
Binary files a/docs/assets/config-gui.png and /dev/null differ
diff --git a/docs/assets/control.png b/docs/assets/control.png
deleted file mode 100644
index 054029b9..00000000
Binary files a/docs/assets/control.png and /dev/null differ
diff --git a/docs/assets/landing-page.png b/docs/assets/landing-page.png
deleted file mode 100644
index 922118cf..00000000
Binary files a/docs/assets/landing-page.png and /dev/null differ
diff --git a/docs/assets/logging.png b/docs/assets/logging.png
deleted file mode 100644
index ff202fb2..00000000
Binary files a/docs/assets/logging.png and /dev/null differ
diff --git a/docs/assets/login.png b/docs/assets/login.png
deleted file mode 100644
index 7518d92e..00000000
Binary files a/docs/assets/login.png and /dev/null differ
diff --git a/docs/assets/media-upload.png b/docs/assets/media-upload.png
deleted file mode 100644
index b7bd37b5..00000000
Binary files a/docs/assets/media-upload.png and /dev/null differ
diff --git a/docs/assets/media.png b/docs/assets/media.png
deleted file mode 100644
index a0c994d3..00000000
Binary files a/docs/assets/media.png and /dev/null differ
diff --git a/docs/assets/message.png b/docs/assets/message.png
deleted file mode 100644
index 3b96e71a..00000000
Binary files a/docs/assets/message.png and /dev/null differ
diff --git a/docs/images/config-gui.png b/docs/images/config-gui.png
new file mode 100644
index 00000000..a8653bf5
Binary files /dev/null and b/docs/images/config-gui.png differ
diff --git a/docs/images/control.png b/docs/images/control.png
new file mode 100644
index 00000000..0bc1def3
Binary files /dev/null and b/docs/images/control.png differ
diff --git a/docs/images/logging.png b/docs/images/logging.png
new file mode 100644
index 00000000..0f9c27d2
Binary files /dev/null and b/docs/images/logging.png differ
diff --git a/docs/images/login.png b/docs/images/login.png
new file mode 100644
index 00000000..6b1d844d
Binary files /dev/null and b/docs/images/login.png differ
diff --git a/docs/images/media-upload.png b/docs/images/media-upload.png
new file mode 100644
index 00000000..9f421798
Binary files /dev/null and b/docs/images/media-upload.png differ
diff --git a/docs/images/media.png b/docs/images/media.png
new file mode 100644
index 00000000..76af99f0
Binary files /dev/null and b/docs/images/media.png differ
diff --git a/docs/images/message.png b/docs/images/message.png
new file mode 100644
index 00000000..d6a85db6
Binary files /dev/null and b/docs/images/message.png differ
diff --git a/package.json b/package.json
index 592d47ac..17a196e7 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
{
- "name": "ffplayout",
+ "name": "ffplayout-frontend",
"version": "5.0.0",
- "description": "web GUI for ffplayout engine",
+ "description": "Web GUI for ffplayout",
"author": "Jonathan Baecker",
"private": true,
"scripts": {
diff --git a/pages/media.vue b/pages/media.vue
index ce017bef..93a426a7 100644
--- a/pages/media.vue
+++ b/pages/media.vue
@@ -21,7 +21,7 @@
v-for="(crumb, index) in crumbs"
:key="crumb.key"
:active="index === crumbs.length - 1"
- @click="getPath(extensions, crumb.path)"
+ @click="getPath(crumb.path)"
>
{{ crumb.text }}
@@ -43,7 +43,7 @@
-
+
{{ folder }}
@@ -304,7 +304,7 @@ export default {
watch: {
configID () {
- this.getPath(this.extensions, '')
+ this.getPath('')
}
},
@@ -314,14 +314,14 @@ export default {
})
this.extensions = exts.join(',')
- this.getPath(this.extensions, '')
+ this.getPath('')
},
methods: {
- async getPath (extensions, path) {
+ async getPath (path) {
this.lastPath = path
this.isLoading = true
- await this.$store.dispatch('media/getTree', { extensions, path })
+ await this.$store.dispatch('media/getTree', { path })
this.isLoading = false
},
@@ -369,7 +369,7 @@ export default {
)
this.$root.$emit('bv::hide::modal', 'folder-modal')
- this.getPath(this.extensions, this.lastPath)
+ this.getPath(this.lastPath)
},
onCancelCreateFolder (evt) {
@@ -429,7 +429,7 @@ export default {
this.currentNumber = 0
this.inputPlaceholder = 'Choose files or drop them here...'
this.inputFiles = []
- this.getPath(this.extensions, this.lastPath)
+ this.getPath(this.lastPath)
this.$root.$emit('bv::hide::modal', 'upload-modal')
},
@@ -442,7 +442,7 @@ export default {
this.inputPlaceholder = 'Choose files or drop them here...'
this.cancelTokenSource.cancel('Upload cancelled')
- this.getPath(this.extensions, this.lastPath)
+ this.getPath(this.lastPath)
this.$root.$emit('bv::hide::modal', 'upload-modal')
},
@@ -489,7 +489,7 @@ export default {
}
)
- this.getPath(this.extensions, this.lastPath)
+ this.getPath(this.lastPath)
this.renamePath = ''
this.renameOldName = ''
@@ -537,7 +537,7 @@ export default {
this.$root.$emit('bv::hide::modal', 'delete-modal')
- this.getPath(this.extensions, this.lastPath)
+ this.getPath(this.lastPath)
},
cancelDelete () {
diff --git a/pages/message.vue b/pages/message.vue
index 557fe340..c6742021 100644
--- a/pages/message.vue
+++ b/pages/message.vue
@@ -266,13 +266,13 @@ export default {
},
watch: {
- selected (id) {
- this.getPreset(id)
+ selected (index) {
+ this.getPreset(index)
}
},
created () {
- this.getPreset('')
+ this.getPreset(null)
},
methods: {
@@ -284,34 +284,34 @@ export default {
return (parseFloat(parseInt(num, 16)) / 255).toFixed(2)
},
- async getPreset (id) {
+ async getPreset (index) {
const response = await this.$axios.get(`api/presets/${this.configGui[this.configID].id}`)
- if (response.data && !id) {
+ if (response.data && index === null) {
this.presets = []
- for (const item of response.data) {
- this.presets.push({ value: item.id, text: item.name })
+ for (let index = 0; index < response.data.length; index++) {
+ const elem = response.data[index]
+ this.presets.push({ value: index, text: elem.name })
}
} else if (response.data) {
- id -= 1
- const fColor = response.data[id].fontcolor.split('@')
- const bColor = response.data[id].boxcolor.split('@')
+ const fColor = response.data[index].fontcolor.split('@')
+ const bColor = response.data[index].boxcolor.split('@')
this.form = {
- id: response.data[id].id,
- name: response.data[id].name,
- text: response.data[id].text,
- x: response.data[id].x,
- y: response.data[id].y,
- fontSize: response.data[id].fontsize,
- fontSpacing: response.data[id].line_spacing,
+ id: response.data[index].id,
+ name: response.data[index].name,
+ text: response.data[index].text,
+ x: response.data[index].x,
+ y: response.data[index].y,
+ fontSize: response.data[index].fontsize,
+ fontSpacing: response.data[index].line_spacing,
fontColor: fColor[0],
fontAlpha: (fColor[1]) ? this.hexToDec(fColor[1]) : 1.0,
- showBox: response.data[id].box,
+ showBox: response.data[index].box,
boxColor: bColor[0],
boxAlpha: (bColor[1]) ? this.hexToDec(bColor[1]) : 1.0,
- border: response.data[id].boxborderw,
- overallAlpha: response.data[id].alpha
+ border: response.data[index].boxborderw,
+ overallAlpha: response.data[index].alpha
}
}
},
@@ -344,7 +344,7 @@ export default {
if (response.status === 200) {
this.success = true
- this.getPreset('')
+ this.getPreset(null)
} else {
this.failed = true
}
@@ -394,7 +394,7 @@ export default {
}
this.$bvModal.hide('delete-modal')
- this.getPreset('')
+ this.getPreset(null)
},
async submitMessage () {
diff --git a/pages/player.vue b/pages/player.vue
index dcf7733f..4e50c0d0 100644
--- a/pages/player.vue
+++ b/pages/player.vue
@@ -152,7 +152,7 @@
v-for="(crumb, index) in crumbs"
:key="crumb.key"
:active="index === crumbs.length - 1"
- @click="getPath(extensions, crumb.path)"
+ @click="getPath(crumb.path)"
>
{{ crumb.text }}
@@ -166,7 +166,7 @@
:key="folder.key"
class="browser-item"
>
-
+
{{ folder }}
@@ -310,6 +310,9 @@
+
+
+
@@ -351,6 +354,35 @@
>
Delete program from {{ listDate }}
+
+
+
@@ -398,7 +430,6 @@ export default {
listDate: this.$dayjs().tz(this.timezone).format('YYYY-MM-DD'),
targetDate: this.$dayjs().tz(this.timezone).format('YYYY-MM-DD'),
interval: null,
- extensions: '',
videoOptions: {
liveui: true,
controls: true,
@@ -424,6 +455,14 @@ export default {
scrollOP: {
suppressScrollX: true,
minScrollbarLength: 30
+ },
+ newSource: {
+ begin: 0,
+ in: 0,
+ out: 0,
+ duration: 0,
+ category: '',
+ source: ''
}
}
},
@@ -460,7 +499,7 @@ export default {
}
]
- this.getPath(this.extensions, '')
+ this.getPath('')
this.getPlaylist()
setTimeout(() => { scrollTo(this) }, 3000)
}
@@ -475,8 +514,7 @@ export default {
]
this.getStatus()
- this.extensions = this.configPlayout.storage.extensions.join(',')
- await this.getPath(this.extensions, '')
+ await this.getPath('')
const timeInSec = this.$timeToSeconds(this.$dayjs().tz(this.timezone).format('HH:mm:ss'))
const listStartSec = this.$timeToSeconds(this.configPlayout.playlist.day_start)
@@ -489,20 +527,15 @@ export default {
},
mounted () {
- // if (process.env.NODE_ENV === 'production') {
- // this.interval = setInterval(() => {
- // this.$store.dispatch('playlist/animClock')
- // this.getStatus()
- // }, 5000)
- // } else {
- // this.$store.dispatch('playlist/animClock')
- // }
-
- this.interval = setInterval(() => {
+ if (process.env.NODE_ENV === 'production') {
+ this.interval = setInterval(() => {
+ this.$store.dispatch('playlist/playoutStat')
+ this.getStatus()
+ }, 5000)
this.$store.dispatch('playlist/playoutStat')
- this.getStatus()
- }, 5000)
- this.$store.dispatch('playlist/playoutStat')
+ } else {
+ this.$store.dispatch('playlist/playoutStat')
+ }
const streamExtension = this.configGui[this.configID].preview_url.split('.').pop()
let player
@@ -533,9 +566,9 @@ export default {
},
methods: {
- async getPath (extensions, path) {
+ async getPath (path) {
this.browserIsLoading = true
- await this.$store.dispatch('media/getTree', { extensions, path })
+ await this.$store.dispatch('media/getTree', { path })
this.browserIsLoading = false
},
@@ -591,14 +624,12 @@ export default {
this.$root.$emit('bv::show::modal', 'preview-modal')
},
- cloneClip ({ file, duration }) {
+ cloneClip ({ name, duration }) {
const storagePath = this.configPlayout.storage.path
- const storagePathArr = storagePath.split('/')
- const storageRoot = storagePathArr.pop()
- const sourcePath = `${storagePathArr.join('/')}/${this.folderTree.tree[0].substring(this.folderTree.tree[0].indexOf(storageRoot))}`
+ const sourcePath = `${storagePath}/${this.folderTree.source}/${name}`.replace('//', '/')
return {
- source: `${sourcePath}/${file}`,
+ source: sourcePath,
in: 0,
out: duration,
duration
@@ -709,6 +740,36 @@ export default {
showDeleteModal () {
this.$root.$emit('bv::show::modal', 'delete-modal')
+ },
+
+ showAddSource () {
+ this.$bvModal.show('add-source-modal')
+ },
+
+ handleSource (bvModalEvt) {
+ // Prevent modal from closing
+ bvModalEvt.preventDefault()
+ // Trigger submit handler
+ this.addSource()
+ },
+
+ addSource () {
+ const list = this.playlist
+ list.push(this.newSource)
+ this.$store.commit('playlist/UPDATE_PLAYLIST', this.$processPlaylist(this.startInSec, list))
+
+ this.newSource = {
+ begin: 0,
+ in: 0,
+ out: 0,
+ duration: 0,
+ category: '',
+ source: ''
+ }
+
+ this.$nextTick(() => {
+ this.$bvModal.hide('add-source-modal')
+ })
}
}
}
diff --git a/store/media.js b/store/media.js
index a05b1ea0..b91ac1e4 100644
--- a/store/media.js
+++ b/store/media.js
@@ -17,7 +17,7 @@ export const mutations = {
}
export const actions = {
- async getTree ({ commit, dispatch, state, rootState }, { extensions, path }) {
+ async getTree ({ commit, dispatch, state, rootState }, { path }) {
const crumbs = []
let root = '/'
const channel = rootState.config.configGui[rootState.config.configID].id