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

add player

Browse Source
This commit is contained in:
Jonathan Baecker 2020-04-16 18:30:17 +02:00
parent 5f949ea4c6
commit 47ff11e9f8
1 changed files with 103 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

114
ffplayout/frontend/pages/control.vue
View File

@ -5,7 +5,7 @@
<b-row>
<b-col cols="3">
<b-aspect class="player-col" aspect="16:9">
Player
<video-player v-if="videoOptions.sources" reference="videoPlayer" :options="videoOptions" />
</b-aspect>
</b-col>
<b-col cols="9" class="control-col">
@ -19,6 +19,14 @@
</b-row>
<splitpanes class="default-theme pane-row">
<pane min-size="20" size="24">
<loading
:active.sync="isLoading"
:can-cancel="false"
:is-full-page="false"
background-color="#485159"
color="#ff9c36"
/>
<div v-if="folderTree.tree" class="browser-div">
<div>
<b-breadcrumb>
@ -26,7 +34,7 @@
v-for="(crumb, index) in crumbs"
:key="crumb.key"
:active="index === crumbs.length - 1"
@click="getPath(crumb.path)"
@click="getPath(extensions, crumb.path)"
>
{{ crumb.text }}
</b-breadcrumb-item>
@ -41,7 +49,7 @@
:key="folder.key"
class="browser-item"
>
<b-link @click="getPath(`${folderTree.tree[0]}/${folder}`)">
<b-link @click="getPath(extensions, `${folderTree.tree[0]}/${folder}`)">
<b-icon-folder-fill class="browser-icons" /> {{ folder }}
</b-link>
</b-list-group-item>
@ -51,8 +59,17 @@
class="browser-item"
>
<b-link>
<b-icon-film class="browser-icons" /> {{ file.file }}
<span class="duration">{{ file.duration | toMin }}</span>
<b-row>
<b-col cols="1" class="browser-icons-col">
<b-icon-film class="browser-icons" />
</b-col>
<b-col class="browser-item-text">
{{ file.file }}
</b-col>
<b-col cols="1" class="browser-dur-col">
<span class="duration">{{ file.duration | toMin }}</span>
</b-col>
</b-row>
</b-link>
</b-list-group-item>
</b-list-group>
@ -99,7 +116,9 @@
{{ item.source | filename }}
</b-col>
<b-col cols="1" class="text-center">
<b-icon-play-fill />
<b-link @click="showModal(item.source)">
<b-icon-play-fill />
</b-link>
</b-col>
<b-col cols="1" text>
{{ item.duration | secondsToTime }}
@ -121,6 +140,16 @@
</pane>
</splitpanes>
</b-container>
<b-modal
id="preview-modal"
ref="prev-modal"
size="xl"
centered
title="Preview"
hide-footer
>
<video-player v-if="previewOptions" reference="previewPlayer" :options="previewOptions" />
</b-modal>
</div>
</template>
@ -147,12 +176,18 @@ export default {
data () {
return {
today: this.$dayjs().format('YYYY-MM-DD')
isLoading: false,
today: this.$dayjs().format('YYYY-MM-DD'),
extensions: '',
videoOptions: {},
previewOptions: {},
previewComp: null,
previewSource: ''
}
},
computed: {
...mapState('config', ['configPlayout']),
...mapState('config', ['configGui', 'configPlayout']),
...mapState('media', ['crumbs', 'folderTree']),
...mapState('playlist', ['playlist'])
},
@ -164,22 +199,59 @@ export default {
},
async created () {
await this.getPath('')
await this.getConfig()
await this.getPlaylist()
this.extensions = this.configPlayout.storage.extensions.join(' ')
await this.getPath(this.extensions, '')
this.videoOptions = {
liveui: true,
controls: true,
suppressNotSupportedError: true,
autoplay: false,
preload: 'auto',
sources: [
{
type: 'application/x-mpegURL',
src: this.configGui.player_url
}
]
}
},
methods: {
async getConfig () {
await this.$store.dispatch('auth/inspectToken')
await this.$store.dispatch('config/getGuiConfig')
await this.$store.dispatch('config/getPlayoutConfig')
},
async getPath (path) {
async getPath (extensions, path) {
this.isLoading = true
await this.$store.dispatch('auth/inspectToken')
await this.$store.dispatch('media/getTree', path)
await this.$store.dispatch('media/getTree', { extensions, path })
this.isLoading = false
},
async getPlaylist () {
await this.$store.dispatch('auth/inspectToken')
await this.$store.dispatch('playlist/getPlaylist', { dayStart: this.configPlayout.playlist.day_start, date: this.today })
},
showModal (src) {
this.previewOptions = {
liveui: false,
controls: true,
suppressNotSupportedError: true,
autoplay: false,
preload: 'auto',
sources: [
{
type: 'video/mp4',
src: encodeURIComponent(src)
}
]
}
this.$root.$emit('bv::show::modal', 'preview-modal')
}
}
}
@ -213,6 +285,14 @@ export default {
width: 100%;
}
.browser-icons-col {
max-width: 10px;
}
.browser-dur-col {
min-width: 110px;
}
.browser-div .ps, .playlist-container .ps {
height: 600px;
}
@ -222,6 +302,18 @@ export default {
overflow-y: scroll;
}
.browser-item-text {
display: inline-block;
max-width: 95%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.ps__thumb-x {
display: none;
}
.splitpanes__pane {
width: 30%;
}