diff --git a/core/core-frontend/package.json b/core/core-frontend/package.json index 1a441e3112..85bec973ac 100644 --- a/core/core-frontend/package.json +++ b/core/core-frontend/package.json @@ -50,8 +50,8 @@ "vue-router": "4.1.3", "vue-types": "^5.0.2", "vue-uuid": "^3.0.0", - "vue-video-player": "^6.0.0", "vue3-ace-editor": "^2.2.2", + "vue3-video-play": "^1.3.2", "vuedraggable": "^4.1.0", "web-storage-cache": "^1.1.1", "xss": "^1.0.14" diff --git a/core/core-frontend/src/assets/svg/icon-video.svg b/core/core-frontend/src/assets/svg/icon-video.svg index 55a5e6c90d..1d7e84e93f 100644 --- a/core/core-frontend/src/assets/svg/icon-video.svg +++ b/core/core-frontend/src/assets/svg/icon-video.svg @@ -1 +1 @@ - \ No newline at end of file + diff --git a/core/core-frontend/src/components/dashboard/DbToolbar.vue b/core/core-frontend/src/components/dashboard/DbToolbar.vue index f6514f0df0..17df09763c 100644 --- a/core/core-frontend/src/components/dashboard/DbToolbar.vue +++ b/core/core-frontend/src/components/dashboard/DbToolbar.vue @@ -444,7 +444,7 @@ const initOpenHandler = newWindow => { diff --git a/core/core-frontend/src/components/data-visualization/DvToolbar.vue b/core/core-frontend/src/components/data-visualization/DvToolbar.vue index bb4273695b..0561404ca2 100644 --- a/core/core-frontend/src/components/data-visualization/DvToolbar.vue +++ b/core/core-frontend/src/components/data-visualization/DvToolbar.vue @@ -230,7 +230,7 @@ eventBus.on('clearCanvas', clearCanvas) - + diff --git a/core/core-frontend/src/custom-component/component-group/DragComponent.vue b/core/core-frontend/src/custom-component/component-group/DragComponent.vue index 1bdb631538..c5830720a6 100644 --- a/core/core-frontend/src/custom-component/component-group/DragComponent.vue +++ b/core/core-frontend/src/custom-component/component-group/DragComponent.vue @@ -54,6 +54,7 @@ const { icon, name, label, dragInfo, themes } = toRefs(props) .drag-component { border-radius: 4px; width: 88px !important; + margin-right: 12px; .icon-content { width: 88px !important; height: 64px !important; diff --git a/core/core-frontend/src/custom-component/component-group/MediaGroup.vue b/core/core-frontend/src/custom-component/component-group/MediaGroup.vue index cb69eb8cc4..041af0f59d 100644 --- a/core/core-frontend/src/custom-component/component-group/MediaGroup.vue +++ b/core/core-frontend/src/custom-component/component-group/MediaGroup.vue @@ -50,11 +50,19 @@ const handleDragEnd = e => { drag-info="Picture&Picture" v-on:click="newComponent('Picture')" > + diff --git a/core/core-frontend/src/custom-component/component-list.ts b/core/core-frontend/src/custom-component/component-list.ts index b68aa2ec0c..d975fc8db6 100644 --- a/core/core-frontend/src/custom-component/component-list.ts +++ b/core/core-frontend/src/custom-component/component-list.ts @@ -8,6 +8,82 @@ export const commonStyle = { opacity: 1 } +// 视频信息配置 +export const VIDEO_LINKS_DE2 = { + videoType: 'web', + poster: null, + web: { + width: '100%', //播放器宽度 + height: '100%', //播放器高度 + color: '#409eff', //主题色 + title: '', //视频名称 + src: null, //视频源 + muted: false, //静音 + webFullScreen: false, + speedRate: ['0.75', '1.0', '1.25', '1.5', '2.0'], //播放倍速 + autoPlay: true, //自动播放 + loop: false, //循环播放 + mirror: false, //镜像画面 + lightOff: false, //关灯模式 + volume: 0.3, //默认音量大小 + control: true, //是否显示控制 + controlBtns: ['audioTrack', 'quality', 'volume', 'fullScreen'] //显示所有按钮, + }, + rtmp: { + sources: [ + { + type: 'rtmp/mp4' + } + ], + height: 300, + techOrder: ['flash'], + autoplay: false, + controls: true, + flash: { + hls: { + withCredentials: false + } + } + } +} + +// 视频信息配置 +export const VIDEO_LINKS = { + videoType: 'web', + web: { + autoplay: true, + height: 300, + muted: true, + loop: true, + controlBar: { + timeDivider: false, + durationDisplay: false, + remainingTimeDisplay: false, + currentTimeDisplay: false, // 当前时间 + volumeControl: false, // 声音控制键 + fullscreenToggle: false, + pause: false + }, + sources: [{}] + }, + rtmp: { + sources: [ + { + type: 'rtmp/mp4' + } + ], + height: 300, + techOrder: ['flash'], + autoplay: false, + controls: true, + flash: { + hls: { + withCredentials: false + } + } + } +} + // 超链接配置 export const HYPERLINKS = { openMode: '_blank', @@ -77,7 +153,7 @@ export const commonAttr = { maintainRadio: false, // 布局时保持宽高比例 aspectRatio: 1, // 锁定时的宽高比例 isShow: true, // 是否显示组件 - collapseName: ['position', 'background', 'style', 'picture', 'frameLinks'], // 编辑组件时记录当前使用的是哪个折叠面板，再次回来时恢复上次打开的折叠面板，优化用户体验 + collapseName: ['position', 'background', 'style', 'picture', 'frameLinks', 'videoLinks'], // 编辑组件时记录当前使用的是哪个折叠面板，再次回来时恢复上次打开的折叠面板，优化用户体验 linkage: { duration: 0, // 过渡持续时间 data: [ @@ -169,6 +245,7 @@ const list = [ width: 600, height: 300 }, + videoLinks: VIDEO_LINKS_DE2, matrixStyle: {} }, { diff --git a/core/core-frontend/src/custom-component/de-video/Attr.vue b/core/core-frontend/src/custom-component/de-video/Attr.vue index 50031ca63e..8b63899378 100644 --- a/core/core-frontend/src/custom-component/de-video/Attr.vue +++ b/core/core-frontend/src/custom-component/de-video/Attr.vue @@ -1,6 +1,15 @@ @@ -8,6 +17,15 @@ import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain' import CommonAttr from '@/custom-component/common/CommonAttr.vue' import { storeToRefs } from 'pinia' +import VideoLinks from '@/custom-component/de-video/VideoLinks.vue' const dvMainStore = dvMainStoreWithOut() const { curComponent } = storeToRefs(dvMainStore) +withDefaults( + defineProps<{ + themes?: EditorTheme + }>(), + { + themes: 'dark' + } +) diff --git a/core/core-frontend/src/custom-component/de-video/Component.vue b/core/core-frontend/src/custom-component/de-video/Component.vue index 78ae9225f9..a15ad9aa8c 100644 --- a/core/core-frontend/src/custom-component/de-video/Component.vue +++ b/core/core-frontend/src/custom-component/de-video/Component.vue @@ -1,26 +1,21 @@ + + diff --git a/core/core-frontend/src/locales/zh-CN.ts b/core/core-frontend/src/locales/zh-CN.ts index 43178989a6..68e7b0ad82 100644 --- a/core/core-frontend/src/locales/zh-CN.ts +++ b/core/core-frontend/src/locales/zh-CN.ts @@ -2126,7 +2126,7 @@ export default { play_circle: '循环播放', video_links: '视频链接', web_url: '网页地址', - video_add_tips: '添加视频信息...', + video_add_tips: '请在右侧添加视频信息...', link_add_tips_pre: '请在右侧配置网页信息..', web_add_tips_suf: '添加网页信息...', panel_view_result_show: '图表结果',