From 730716d2c30606df9bd0132e87c390f450ba0231 Mon Sep 17 00:00:00 2001 From: wangjiahao <1522128093@qq.com> Date: Thu, 31 Mar 2022 21:54:41 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BB=AA=E8=A1=A8=E6=9D=BF=E5=A2=9E?= =?UTF-8?q?=E5=8A=A0flv=E6=B5=81=E5=AA=92=E4=BD=93=E6=92=AD=E6=94=BE?= =?UTF-8?q?=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/package.json | 1 + .../components/Editor/StreamMediaLinks.vue | 151 ++++++++++++++++++ .../components/canvas/components/TextAttr.vue | 14 +- .../canvas/custom-component/DeStreamMedia.vue | 120 ++++++++++++++ .../canvas/custom-component/component-list.js | 40 +++++ .../canvas/custom-component/index.js | 2 + frontend/src/lang/en.js | 5 + frontend/src/lang/tw.js | 5 + frontend/src/lang/zh.js | 5 + frontend/src/styles/deicon/demo_index.html | 29 +++- frontend/src/styles/deicon/iconfont.css | 10 +- frontend/src/styles/deicon/iconfont.js | 2 +- frontend/src/styles/deicon/iconfont.json | 7 + frontend/src/styles/deicon/iconfont.ttf | Bin 22220 -> 22436 bytes frontend/src/styles/deicon/iconfont.woff | Bin 13760 -> 13932 bytes frontend/src/styles/deicon/iconfont.woff2 | Bin 11704 -> 11872 bytes frontend/src/views/panel/edit/index.vue | 1 + 17 files changed, 383 insertions(+), 9 deletions(-) create mode 100644 frontend/src/components/canvas/components/Editor/StreamMediaLinks.vue create mode 100644 frontend/src/components/canvas/custom-component/DeStreamMedia.vue diff --git a/frontend/package.json b/frontend/package.json index e0c6fa78f8..a1d0d4da34 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -27,6 +27,7 @@ "file-save": "^0.2.0", "file-saver": "^2.0.5", "fit2cloud-ui": "1.5.4", + "flv.js": "^1.6.2", "html2canvasde": "^v1.1.4-de", "jquery": "^3.1.1", "js-base64": "^3.7.2", diff --git a/frontend/src/components/canvas/components/Editor/StreamMediaLinks.vue b/frontend/src/components/canvas/components/Editor/StreamMediaLinks.vue new file mode 100644 index 0000000000..d06d19b54c --- /dev/null +++ b/frontend/src/components/canvas/components/Editor/StreamMediaLinks.vue @@ -0,0 +1,151 @@ + + + + + diff --git a/frontend/src/components/canvas/components/TextAttr.vue b/frontend/src/components/canvas/components/TextAttr.vue index 3f89341cc8..ec18af4c13 100644 --- a/frontend/src/components/canvas/components/TextAttr.vue +++ b/frontend/src/components/canvas/components/TextAttr.vue @@ -134,6 +134,12 @@ +
+ + + +
+
@@ -159,12 +165,13 @@ import { mapState } from 'vuex' import Hyperlinks from '@/components/canvas/components/Editor/Hyperlinks' import VideoLinks from '@/components/canvas/components/Editor/VideoLinks' +import StreamMediaLinks from '@/components/canvas/components/Editor/StreamMediaLinks' import DateFormat from '@/components/canvas/components/Editor/DateFormat' import { COLOR_PANEL } from '@/views/chart/chart/chart' import FrameLinks from '@/components/canvas/components/Editor/FrameLinks' export default { - components: { FrameLinks, Hyperlinks, DateFormat, VideoLinks }, + components: { FrameLinks, Hyperlinks, DateFormat, VideoLinks, StreamMediaLinks }, props: { scrollLeft: { type: Number, @@ -294,11 +301,14 @@ export default { 'backgroundColor', 'hyperlinks' ], - // 文本组件显示的属性 'de-video': [ 'opacity', 'videoLinks' ], + 'de-stream-media': [ + 'opacity', + 'streamMediaLinks' + ], 'de-frame': [ 'opacity', 'frameLinks' diff --git a/frontend/src/components/canvas/custom-component/DeStreamMedia.vue b/frontend/src/components/canvas/custom-component/DeStreamMedia.vue new file mode 100644 index 0000000000..c1920f07db --- /dev/null +++ b/frontend/src/components/canvas/custom-component/DeStreamMedia.vue @@ -0,0 +1,120 @@ + + + + + diff --git a/frontend/src/components/canvas/custom-component/component-list.js b/frontend/src/components/canvas/custom-component/component-list.js index 78dfb8cd48..397f696cbf 100644 --- a/frontend/src/components/canvas/custom-component/component-list.js +++ b/frontend/src/components/canvas/custom-component/component-list.js @@ -96,7 +96,18 @@ export const VIDEOLINKS = { } } } +} +// 流媒体视频信息配置 +export const STREAMMEDIALINKS = { + videoType: 'flv', + flv: { + type: 'flv', + isLive: false, + cors: true, // 允许跨域 + loop: true + // url: null // 网络动画视频 + } } // 嵌套页面信息 @@ -148,6 +159,14 @@ export const pictureList = [ label: '视频', icon: 'iconfont icon-video', defaultClass: 'text-filter' + }, + { + id: '20003', + component: 'stream-media', + type: 'stream-media', + label: '流媒体', + icon: 'iconfont icon-a-liumeitimeitiliebiao', + defaultClass: 'text-filter' } ] @@ -441,6 +460,27 @@ const list = [ sizey: 5, miniSizex: 1, miniSizey: 1 + }, + { + id: '20003', + component: 'de-stream-media', + type: 'de-stream-media', + label: '', + icon: 'iconfont icon-picture', + defaultClass: 'text-filter', + mobileStyle: BASE_MOBILE_STYLE, + style: { + width: 400, + height: 200, + borderRadius: '' + }, + streamMediaLinks: STREAMMEDIALINKS, + x: 1, + y: 1, + sizex: 10, + sizey: 5, + miniSizex: 1, + miniSizey: 1 } ] diff --git a/frontend/src/components/canvas/custom-component/index.js b/frontend/src/components/canvas/custom-component/index.js index 6316c79087..6d9145a740 100644 --- a/frontend/src/components/canvas/custom-component/index.js +++ b/frontend/src/components/canvas/custom-component/index.js @@ -8,7 +8,9 @@ import RectShape from '@/components/canvas/custom-component/RectShape' import UserView from '@/components/canvas/custom-component/UserView' import DeVideo from '@/components/canvas/custom-component/DeVideo' import DeFrame from '@/components/canvas/custom-component/DeFrame' +import DeStreamMedia from '@/components/canvas/custom-component/DeStreamMedia' +Vue.component('DeStreamMedia', DeStreamMedia) Vue.component('Picture', Picture) Vue.component('VText', VText) Vue.component('VButton', VButton) diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js index 82636e1774..9758b4c53b 100644 --- a/frontend/src/lang/en.js +++ b/frontend/src/lang/en.js @@ -1392,6 +1392,11 @@ export default { sure_bt: 'Confirm' }, panel: { + is_live: 'Is Live', + yes: 'Yes', + no: 'No', + live_tips: 'User Https First', + stream_media_add_tips: 'Please Add Stream Media Info...', json_params_error: 'Third Party Parameters Parsing Failed. Please Check Whether The Parameters Format Is Correct', inner_padding: 'Inner Padding', board_radio: 'Board Radio', diff --git a/frontend/src/lang/tw.js b/frontend/src/lang/tw.js index 45d46c9c11..8a8bfa1c4b 100644 --- a/frontend/src/lang/tw.js +++ b/frontend/src/lang/tw.js @@ -1393,6 +1393,11 @@ export default { sure_bt: '確定' }, panel: { + is_live: '是否直播', + yes: '是', + no: '否', + live_tips: '优先HTTPS链接', + stream_media_add_tips: '请点击添加配置流媒体信息...', json_params_error: '第三方参数解析失败,请检查参数格式是否正确', inner_padding: '内边距', board_radio: '边框半径', diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js index e20dc71f45..f29106533f 100644 --- a/frontend/src/lang/zh.js +++ b/frontend/src/lang/zh.js @@ -1401,6 +1401,11 @@ export default { sure_bt: '确定' }, panel: { + is_live: '是否直播', + yes: '是', + no: '否', + live_tips: '优先HTTPS链接', + stream_media_add_tips: '请点击添加配置流媒体信息...', json_params_error: '第三方参数解析失败,请检查参数格式是否正确', inner_padding: '内边距', board_radio: '边框半径', diff --git a/frontend/src/styles/deicon/demo_index.html b/frontend/src/styles/deicon/demo_index.html index e4e8b61d73..5b5669ac90 100644 --- a/frontend/src/styles/deicon/demo_index.html +++ b/frontend/src/styles/deicon/demo_index.html @@ -54,6 +54,12 @@