center/dataease-dm
center/dataease-dm
13
0
Fork 0
forked from github/dataease
Code Pull Requests Activity

Merge branch 'dev' of github.com:dataease/dataease into dev

Browse Source
This commit is contained in:
taojinlong 2022-04-01 11:18:22 +08:00
commit d70badabb7
2 changed files with 51 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
frontend/src/components/canvas/components/Editor/StreamMediaLinks.vue
View File

@ -14,27 +14,29 @@
<!-- <el-radio :label="'rtmp'">{{$t('panel.streaming_media')}}</el-radio>-->
</el-radio-group>
</el-form-item>
<el-form-item :label="$t('panel.auto_play')">
<el-switch v-model="streamMediaInfoTemp[streamMediaInfoTemp.videoType].autoplay" size="mini" />
<span style="color: #909399; font-size: 8px;margin-left: 3px">
Tips:{{ $t('panel.live_tips') }}
</span>
</el-form-item>
<el-form-item v-if="streamMediaInfoTemp.videoType==='flv'" :label="$t('panel.play_frequency')">
<el-radio-group v-model="streamMediaInfoTemp[streamMediaInfoTemp.videoType].loop">
<el-radio :label="false">{{ $t('panel.play_once') }}</el-radio>
<el-radio :label="true">{{ $t('panel.play_circle') }}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item v-if="streamMediaInfoTemp.videoType==='flv'" :label="$t('panel.is_live')">
<el-radio-group v-model="streamMediaInfoTemp[streamMediaInfoTemp.videoType].isLive">
<el-radio :label="true">{{ $t('panel.yes') }}</el-radio>
<el-radio :label="false">{{ $t('panel.no') }}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item :label="$t('panel.video_links')">
<el-input v-model="streamMediaInfoTemp[streamMediaInfoTemp.videoType].url" />
</el-form-item>
<el-row v-if="streamMediaInfoTemp.videoType==='flv'">
<el-form-item :label="$t('panel.is_live')">
<el-radio-group v-model="streamMediaInfoTemp[streamMediaInfoTemp.videoType].isLive">
<el-radio :label="true">{{ $t('panel.yes') }}</el-radio>
<el-radio :label="false">{{ $t('panel.no') }}</el-radio>
</el-radio-group>
<span style="color: #909399; font-size: 8px;margin-left: 3px">
Tips:{{ $t('panel.live_tips') }}
</span>
</el-form-item>
<el-form-item v-if="!streamMediaInfoTemp[streamMediaInfoTemp.videoType].isLive" :label="$t('panel.auto_play')">
<el-switch v-model="streamMediaInfoTemp[streamMediaInfoTemp.videoType].autoplay" size="mini" />
</el-form-item>
<el-form-item v-if="!streamMediaInfoTemp[streamMediaInfoTemp.videoType].isLive" :label="$t('panel.play_frequency')">
<el-radio-group v-model="streamMediaInfoTemp[streamMediaInfoTemp.videoType].loop">
<el-radio :label="false">{{ $t('panel.play_once') }}</el-radio>
<el-radio :label="true">{{ $t('panel.play_circle') }}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item :label="$t('panel.video_links')">
<el-input v-model="streamMediaInfoTemp[streamMediaInfoTemp.videoType].url" />
</el-form-item>
</el-row>
<el-form-item>
<el-button type="primary" @click="onSubmit">{{ $t('panel.confirm') }}</el-button>
<el-button @click="onClose">{{ $t('panel.cancel') }}</el-button>
@ -48,6 +50,7 @@
<script>
import { mapState } from 'vuex'
import { deepCopy } from '@/components/canvas/utils/utils'
import bus from "@/utils/bus";
export default {
props: {
@ -92,6 +95,7 @@ export default {
onSubmit() {
this.curComponent.streamMediaLinks = this.streamMediaInfoTemp
this.$store.state.styleChangeTimes++
bus.$emit('streamMediaLinksChange')
this.popoverClose()
},
onClose() {

29
frontend/src/components/canvas/custom-component/DeStreamMedia.vue
View File

@ -1,10 +1,11 @@
<template>
<el-row ref="mainPlayer" style="width: 100%;height: 100%">
<div v-if="element.streamMediaLinks[element.streamMediaLinks.videoType].url" class="video-container">
<video ref="player" class="centered-video" name="centeredVideo" :controls="editMode!=='edit'" :loop="pOption.loop" muted />
<video ref="player" class="centered-video" name="centeredVideo" :loop="pOption.loop" controls muted />
<div v-if="editMode==='edit'" class="stream-mask" />
</div>
<div v-else class="info-stream-class">
{{ $t('panel.stream_media_add_tips') }}
{{ $t('panel.stream_media_add_tinitOptionips') }}
</div>
</el-row>
</template>
@ -12,6 +13,7 @@
import flvjs from 'flv.js'
import '@/custom-theme.css'
import bus from '@/utils/bus'
export default {
props: {
@ -67,6 +69,9 @@ export default {
},
mounted() {
this.initOption()
bus.$on('streamMediaLinksChange', () => {
this.initOption()
})
},
methods: {
initOption() {
@ -89,7 +94,7 @@ export default {
</script>
<style>
.info-stream-class{
.info-stream-class {
text-align: center;
height: 100%;
display: flex;
@ -99,16 +104,19 @@ export default {
font-size: 12px;
color: #000000;
}
.move-bg {
height: 100%;
width: 100%;
background-color: #000000;
}
.video-container {
width: 100%;
height: 100%;
background-color: #000000;
}
.centered-video {
width: 100%;
height: 100%;
@ -116,5 +124,20 @@ export default {
margin-right: auto;
margin-bottom: auto;
}
.stream-mask {
display: flex;
height: calc(100% - 60px) !important;
width: 100% !important;
background-color: #5c5e61;
opacity: 0;
position: absolute;
top: 0px;
left: 0px;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
}
</style>