djsundog/ffplayout
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

change api routes and functions to support new API

Browse Source
This commit is contained in:
jb-alvarado 2022-07-04 18:00:56 +02:00
parent 1be302c295
commit 8511c4cdff
7 changed files with 66 additions and 122 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
.eslintrc.js
View File

@ -8,7 +8,7 @@ module.exports = {
parser: '@babel/eslint-parser', parser: '@babel/eslint-parser',
requireConfigFile: false, requireConfigFile: false,
babelOptions: { babelOptions: {
presets: ["@babel/preset-react"] presets: ['@babel/preset-react']
} }
}, },
extends: [ extends: [
@ -19,9 +19,9 @@ module.exports = {
rules: { rules: {
'vue/html-indent': ['error', 4], 'vue/html-indent': ['error', 4],
'vue/html-closing-bracket-newline': 'off', 'vue/html-closing-bracket-newline': 'off',
'indent': [2, 4], indent: [2, 4],
'no-tabs': 'off', 'no-tabs': 'off',
"no-console": 0, 'no-console': 0,
"camelcase": ["error", {properties: "never"}] camelcase: ['error', { properties: 'never' }]
} }
} }

2
pages/logging.vue
View File

@ -88,7 +88,7 @@ export default {
} }
const response = await this.$axios.get( const response = await this.$axios.get(
`api/log/${this.$store.state.config.configGui[this.$store.state.config.configID].id}/${date}`) `api/log/${this.$store.state.config.configGui[this.$store.state.config.configID].id}?date=${date}`)
if (response.data) { if (response.data) {
this.currentLog = response.data this.currentLog = response.data

39
pages/media.vue
View File

@ -71,7 +71,7 @@
<b-list-group class="files-list"> <b-list-group class="files-list">
<b-list-group-item <b-list-group-item
v-for="file in folderTree.files" v-for="file in folderTree.files"
:key="file" :key="file.name"
class="browser-item" class="browser-item"
> >
<b-row> <b-row>
@ -79,10 +79,10 @@
<b-icon-film class="browser-icons" /> <b-icon-film class="browser-icons" />
</b-col> </b-col>
<b-col class="browser-item-text"> <b-col class="browser-item-text">
{{ file }} {{ file.name }}
</b-col> </b-col>
<b-col cols="1" class="browser-play-col"> <b-col cols="1" class="browser-play-col">
<b-link title="Preview" @click="showPreviewModal(`/${folderTree.parent}/${folderTree.source}/${file}`)"> <b-link title="Preview" @click="showPreviewModal(`/${folderTree.parent}/${folderTree.source}/${file.name}`)">
<b-icon-play-fill /> <b-icon-play-fill />
</b-link> </b-link>
</b-col> </b-col>
@ -90,12 +90,12 @@
<span class="duration">{{ file.duration | toMin }}</span> <span class="duration">{{ file.duration | toMin }}</span>
</b-col> </b-col>
<b-col cols="1" class="small-col"> <b-col cols="1" class="small-col">
<b-link title="Rename File" @click="showRenameModal(file)"> <b-link title="Rename File" @click="showRenameModal(file.name)">
<b-icon-pencil-square /> <b-icon-pencil-square />
</b-link> </b-link>
</b-col> </b-col>
<b-col cols="1" class="small-col"> <b-col cols="1" class="small-col">
<b-link title="Delete File" @click="showDeleteModal('File', `/${folderTree.parent}/${folderTree.source}/${file}`)"> <b-link title="Delete File" @click="showDeleteModal('File', `/${folderTree.parent}/${folderTree.source}/${file.name}`)">
<b-icon-x-circle-fill /> <b-icon-x-circle-fill />
</b-link> </b-link>
</b-col> </b-col>
@ -309,7 +309,11 @@ export default {
}, },
mounted () { mounted () {
this.extensions = [...this.configPlayout.storage.extensions, ...this.configGui[this.configID].extra_extensions].join(',') const exts = [...this.configPlayout.storage.extensions, ...this.configGui[this.configID].extra_extensions].map((ext) => {
return `.${ext}`
})
this.extensions = exts.join(',')
this.getPath(this.extensions, '') this.getPath(this.extensions, '')
}, },
@ -358,7 +362,7 @@ export default {
async onSubmitCreateFolder (evt) { async onSubmitCreateFolder (evt) {
evt.preventDefault() evt.preventDefault()
const path = this.crumbs.map(e => e.text).join('/') + '/' + this.folderName const path = (this.crumbs[this.crumbs.length - 1].path + '/' + this.folderName).replace(/\/[/]+/, '/')
await this.$axios.post( await this.$axios.post(
`api/file/${this.configGui[this.configID].id}/create-folder/`, { source: path } `api/file/${this.configGui[this.configID].id}/create-folder/`, { source: path }
@ -396,12 +400,13 @@ export default {
this.currentProgress = progress this.currentProgress = progress
} }
const channel = this.configGui[this.configID].id
for (const [i, file] of this.inputFiles.entries()) { for (const [i, file] of this.inputFiles.entries()) {
this.uploadTask = file.name this.uploadTask = file.name
this.currentNumber = i + 1 this.currentNumber = i + 1
const formData = new FormData()
formData.append(file.name, file)
const config = { const config = {
onUploadProgress: uploadProgress(file.name), onUploadProgress: uploadProgress(file.name),
cancelToken: this.cancelTokenSource.token, cancelToken: this.cancelTokenSource.token,
@ -409,8 +414,8 @@ export default {
} }
await this.$axios.put( await this.$axios.put(
`api/player/media/upload/${encodeURIComponent(file.name)}?path=${encodeURIComponent(this.crumbs.map(e => e.text).join('/'))}&channel=${channel}`, `api/file/${this.configGui[this.configID].id}/upload/?path=${encodeURIComponent(this.crumbs[this.crumbs.length - 1].path)}`,
file, formData,
config config
) )
.then((res) => { .then((res) => {
@ -503,9 +508,9 @@ export default {
this.deleteSource = src this.deleteSource = src
if (type === 'File') { if (type === 'File') {
this.previewName = src.split('/').slice(-1)[0] this.previewName = src.split('/').slice(-1)[0].replace('//', '/')
} else { } else {
this.previewName = src this.previewName = src.replace('//', '/')
} }
this.deleteType = type this.deleteType = type
@ -520,12 +525,14 @@ export default {
file = this.deleteSource.split('/').slice(-1)[0] file = this.deleteSource.split('/').slice(-1)[0]
pathName = this.deleteSource.substring(0, this.deleteSource.lastIndexOf('/') + 1) pathName = this.deleteSource.substring(0, this.deleteSource.lastIndexOf('/') + 1)
} else { } else {
file = null file = ''
pathName = this.deleteSource pathName = this.deleteSource
} }
await this.$axios.delete( const source = `${pathName}/${file}`.replace('//', '/')
`api/player/media/op/?file=${encodeURIComponent(file)}&path=${encodeURIComponent(pathName)}&channel=${this.configGui[this.configID].id}`)
await this.$axios.post(
`api/file/${this.configGui[this.configID].id}/remove/`, { source })
.catch(err => console.log(err)) .catch(err => console.log(err))
this.$root.$emit('bv::hide::modal', 'delete-modal') this.$root.$emit('bv::hide::modal', 'delete-modal')

30
pages/player.vue
View File

@ -6,7 +6,7 @@
<b-col cols="3" class="player-col"> <b-col cols="3" class="player-col">
<b-aspect aspect="16:9"> <b-aspect aspect="16:9">
<video <video
v-if="configGui[configID].player_url.split('.').pop() === 'flv'" v-if="configGui[configID].preview_url.split('.').pop() === 'flv'"
id="httpStream" id="httpStream"
ref="httpStream" ref="httpStream"
width="100%" width="100%"
@ -109,7 +109,7 @@
color="#ff9c36" color="#ff9c36"
/> />
<div v-if="folderTree.tree" class="browser-div"> <div v-if="folderTree.parent" class="browser-div">
<div> <div>
<b-breadcrumb> <b-breadcrumb>
<b-breadcrumb-item <b-breadcrumb-item
@ -126,23 +126,23 @@
<perfect-scrollbar :options="scrollOP" class="player-browser-scroll"> <perfect-scrollbar :options="scrollOP" class="player-browser-scroll">
<b-list-group> <b-list-group>
<b-list-group-item <b-list-group-item
v-for="folder in folderTree.tree[1]" v-for="folder in folderTree.folders"
:key="folder.key" :key="folder.key"
class="browser-item" class="browser-item"
> >
<b-link @click="getPath(extensions, `/${folderTree.tree[0]}/${folder}`)"> <b-link @click="getPath(extensions, `/${folderTree.source}/${folder}`)">
<b-icon-folder-fill class="browser-icons" /> {{ folder }} <b-icon-folder-fill class="browser-icons" /> {{ folder }}
</b-link> </b-link>
</b-list-group-item> </b-list-group-item>
<draggable <draggable
:list="folderTree.tree[2]" :list="folderTree.files"
:clone="cloneClip" :clone="cloneClip"
:group="{ name: 'playlist', pull: 'clone', put: false }" :group="{ name: 'playlist', pull: 'clone', put: false }"
:sort="false" :sort="false"
> >
<b-list-group-item <b-list-group-item
v-for="file in folderTree.tree[2]" v-for="file in folderTree.files"
:key="file.key" :key="file.name"
class="browser-item" class="browser-item"
> >
<b-row> <b-row>
@ -150,10 +150,10 @@
<b-icon-film class="browser-icons" /> <b-icon-film class="browser-icons" />
</b-col> </b-col>
<b-col class="browser-item-text grabbing"> <b-col class="browser-item-text grabbing">
{{ file.file }} {{ file.name }}
</b-col> </b-col>
<b-col cols="1" class="browser-play-col"> <b-col cols="1" class="browser-play-col">
<b-link @click="showPreviewModal(`/${folderTree.tree[0]}/${file.file}`)"> <b-link @click="showPreviewModal(`/${folderTree.parent}/${folderTree.source}/${file.name}`)">
<b-icon-play-fill /> <b-icon-play-fill />
</b-link> </b-link>
</b-col> </b-col>
@ -407,7 +407,7 @@ export default {
this.videoOptions.sources = [ this.videoOptions.sources = [
{ {
type: 'application/x-mpegURL', type: 'application/x-mpegURL',
src: this.configGui[id].player_url src: this.configGui[id].preview_url
} }
] ]
@ -421,7 +421,7 @@ export default {
this.videoOptions.sources = [ this.videoOptions.sources = [
{ {
type: 'application/x-mpegURL', type: 'application/x-mpegURL',
src: this.configGui[this.configID].player_url src: this.configGui[this.configID].preview_url
} }
] ]
@ -449,11 +449,11 @@ export default {
this.$store.dispatch('playlist/animClock') this.$store.dispatch('playlist/animClock')
} }
const streamExtension = this.configGui[this.configID].player_url.split('.').pop() const streamExtension = this.configGui[this.configID].preview_url.split('.').pop()
let player let player
if (streamExtension === 'flv') { if (streamExtension === 'flv') {
this.httpFlvSource.url = this.configGui[this.configID].player_url this.httpFlvSource.url = this.configGui[this.configID].preview_url
const element = this.$refs.httpStream const element = this.$refs.httpStream
if (typeof player !== 'undefined') { if (typeof player !== 'undefined') {
@ -486,7 +486,7 @@ export default {
async getStatus () { async getStatus () {
const channel = this.configGui[this.configID].id const channel = this.configGui[this.configID].id
const status = await this.$axios.post('api/player/system/', { run: 'status', channel }) const status = await this.$axios.post(`api/control/${channel}/process/`, { command: 'status' })
if (status.data.data && (status.data.data === 'RUNNING' || status.data.data === 'active')) { if (status.data.data && (status.data.data === 'RUNNING' || status.data.data === 'active')) {
this.isPlaying = 'is-playing' this.isPlaying = 'is-playing'
@ -497,7 +497,7 @@ export default {
async playoutControl (state) { async playoutControl (state) {
const channel = this.configGui[this.configID].id const channel = this.configGui[this.configID].id
await this.$axios.post('api/player/system/', { run: state, channel }) await this.$axios.post(`api/control/${channel}/process/`, { run: state })
setTimeout(() => { this.getStatus() }, 1000) setTimeout(() => { this.getStatus() }, 1000)
}, },

4
store/config.js
View File

@ -90,9 +90,9 @@ export const actions = {
let response let response
if (state.configGuiRaw.some(e => e.id === stringObj.id)) { if (state.configGuiRaw.some(e => e.id === stringObj.id)) {
response = await this.$axios.put(`api/player/guisettings/${obj.id}/`, stringObj) response = await this.$axios.patch(`api/settings/${obj.id}`, stringObj)
} else { } else {
response = await this.$axios.post('api/player/guisettings/', stringObj) response = await this.$axios.post('api/settings/', stringObj)
const guiConfigs = [] const guiConfigs = []
for (const obj of state.configGui) { for (const obj of state.configGui) {

2
store/playlist.js
View File

@ -60,7 +60,7 @@ export const actions = {
dateToday = this.$dayjs(dateToday).tz(rootState.config.timezone).subtract(1, 'day').format('YYYY-MM-DD') dateToday = this.$dayjs(dateToday).tz(rootState.config.timezone).subtract(1, 'day').format('YYYY-MM-DD')
} }
const response = await this.$axios.get(`api/player/playlist/?date=${date}&channel=${channel}`) const response = await this.$axios.get(`api/playlist/${channel}?date=${date}`)
if (response.data && response.data.program) { if (response.data && response.data.program) {
commit('UPDATE_PLAYLIST', this.$processPlaylist(rootState.config.startInSec, response.data.program)) commit('UPDATE_PLAYLIST', this.$processPlaylist(rootState.config.startInSec, response.data.program))

63
test.html
View File

@ -1,63 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>videojs</title>
<link href="https://unpkg.com/video.js@7.7.5/dist/video-js.min.css" rel="stylesheet" />
</head>
<body>
<video-js id="my-video" class="video-js" autoplay muted preload="auto" data-setup="">
</video-js>
<script src="https://unpkg.com/video.js@7.7.5/dist/video.min.js"></script>
<script src="https://unpkg.com/flv.js@1.5.0/dist/flv.min.js"></script>
<script src="https://unpkg.com/videojs-flvjs@0.2.0/dist/videojs-flvjs.min.js"></script>
<script>
var player = videojs(
"my-video",
{
controls: false,
bigPlayButton: false,
autoplay: 'muted',
preload: 'auto',
width: 800,
height: 640,
flvjs: {
mediaDataSource: {
isLive: true,
withCredentials: false,
hasAudio: false,
hasVideo: true,
type: 'flv'
},
config: {
enableStashBuffer: true,
enableWorker: false,
lazyLoad: false,
seekType: 'range'
}
},
},
function onPlayerReady() {
videojs.log("Your player is ready!");
console.log(this
.tech({ IWillNotUseThisInPlugins: true }))
this
.tech({ IWillNotUseThisInPlugins: true })
.flvPlayer.on(flvjs.Events.STATISTICS_INFO, (metadata) =>
console.log(metadata)
);
}
);
player.src({
fluid: true,
src: 'http://ffplayout.local/preview/stream.flv',
type: 'video/x-flv'
})
</script>
</body>
</html>