Skip to content

W
wisdom-components
Commit c1290bb8 authored by 刘梦焕's avatar 刘梦焕
Browse files
Options

feat: 新增视频轮组组件

parent 705d4b9d
Show whitespace changes
Inline Side-by-side
Showing with 286 additions and 0 deletions
config/config.js
View file @ c1290bb8
...@@ -108,6 +108,7 @@ export default { ...@@ -108,6 +108,7 @@ export default {
'DataCarousel', 'DataCarousel',
'VmsVideo', 'VmsVideo',
'VideoPopUp', 'VideoPopUp',
'VideoSliderModal',
], ],
}, },
{ {
......
packages/base-components/VideoSliderModal/README.md 0 → 100644
View file @ c1290bb8
# `@wisdom-components/VideoSliderModal`
> TODO: description
## Usage
```
const videoslidermodal = require('@wisdom-components/VideoSliderModal');
// TODO: DEMONSTRATE API
```
packages/base-components/VideoSliderModal/package.json 0 → 100644
View file @ c1290bb8
{
"name": "@wisdom-components/videoslidermodal",
"version": "1.0.0",
"description": "> TODO: description",
"author": "Liumh <liumh564@163.com>",
"homepage": "",
"license": "ISC",
"module": "es/index.js",
"main": "lib/index.js",
"sideEffects": [
"*.less"
],
"directories": {
"lib": "lib",
"test": "__tests__"
},
"files": [
"lib",
"es",
"dist"
],
"publishConfig": {
"registry": "https://g.civnet.cn:4873/"
},
"repository": {
"type": "git",
"url": "https://g.civnet.cn:8443/ReactWeb5/wisdom-components.git"
},
"scripts": {
"test": "node ./__tests__/@wisdom-components/VideoSliderModal.test.js"
},
"dependencies": {
"@babel/runtime": "^7.17.9",
"@wisdom-components/VmsVideo": "1.1.13",
"swiper": "^6.8.1"
}
}
packages/base-components/VideoSliderModal/src/JessibucaVideo/decoder.js 0 → 100644
View file @ c1290bb8
This source diff could not be displayed because it is too large. You can view the blob instead.
packages/base-components/VideoSliderModal/src/JessibucaVideo/jessibuca.js 0 → 100644
View file @ c1290bb8
This source diff could not be displayed because it is too large. You can view the blob instead.
packages/base-components/VideoSliderModal/src/VideoSliderModal.md 0 → 100644
View file @ c1290bb8
---
title: VideoSliderModal - 视频弹窗组件
nav:
title: 基础组件
path: /components
group:
path: /
---
# VmsVideo 视频弹窗组件
## 组件使用
<code src="./demos/demo.tsx">
## API
### Column 新增参数
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| ModalInfo | api 参考 Antd Modal 组件 https://ant.design/components/modal-cn#api | | |
| VideoInfo | api 参考视频组件 VmsVideo 的 VideoParam | | - |
| JessibucaObj | api 参考视频组件 VmsVideo 的 JessibucaObj | | - |
packages/base-components/VideoSliderModal/src/demos/demo.tsx 0 → 100644
View file @ c1290bb8
/*
* @Author: 634665781 634665781@qq.com
* @Date: 2023-04-11 13:40:18
* @LastEditors: 634665781 634665781@qq.com
* @LastEditTime: 2023-04-17 11:05:27
* @FilePath: \wisdom-components\packages\base-components\TestVideo\src\demos\dmeo1.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
// @ts-ignore
import React, { useRef, useEffect, useState } from 'react';
import { Button } from 'antd';
import VideoSliderModal from '../index';
const Demo = () => {
const [showModal, setShowModal] = useState(false);
const closeModal = () => {
setShowModal(false);
};
const modalInfo = {
title: '视频预览',
open: showModal,
onCancel: closeModal,
};
const videos = [
{
id: '11F102BC-CE03-4E32-AE60-F297934DFE3F', // 398993BB-A795-4237-BE75-B6A7EC9D675
name: '琼海电信小区', // 设备名称
protocol: '萤石云HTTP-FLV', // 萤石EZOPE 萤石HTTP-FLV RTSP GB28181
username: '6c44c8e92d1c4d75a9818756025df550',
password: '78b7dc88f9f4bf19c2b1aabfdd995244',
dataRate: 'Sub', // Main 主码流 Sub 子码流
pandavmsHost: `ws://192.168.8.27:9876/`, // pandavms后端主机地址 eg: ws://172.16.19.19:8080/
address: '236644034',
},
{
id: '11F102BC-CE03-4E32-AE60-F297934DFE3F', // 398993BB-A795-4237-BE75-B6A7EC9D675
name: '琼海电信小区', // 设备名称
protocol: '萤石云HTTP-FLV', // 萤石EZOPE 萤石HTTP-FLV RTSP GB28181
username: '6c44c8e92d1c4d75a9818756025df550',
password: '78b7dc88f9f4bf19c2b1aabfdd995244',
dataRate: 'Sub', // Main 主码流 Sub 子码流
pandavmsHost: `ws://192.168.8.27:9876/`, // pandavms后端主机地址 eg: ws://172.16.19.19:8080/
address: '236644034',
},
{
id: '11F102BC-CE03-4E32-AE60-F297934DFE3F', // 398993BB-A795-4237-BE75-B6A7EC9D675
name: '琼海电信小区', // 设备名称
protocol: '萤石云HTTP-FLV', // 萤石EZOPE 萤石HTTP-FLV RTSP GB28181
username: '6c44c8e92d1c4d75a9818756025df550',
password: '78b7dc88f9f4bf19c2b1aabfdd995244',
dataRate: 'Sub', // Main 主码流 Sub 子码流
pandavmsHost: `ws://192.168.8.27:9876/`, // pandavms后端主机地址 eg: ws://172.16.19.19:8080/
address: '236644034',
},
];
const JessibucaObj = {};
return (
<>
<Button onClick={() => setShowModal(true)}>打开弹窗</Button>
<VideoSliderModal modalInfo={modalInfo} videoInfos={videos} JessibucaObj={JessibucaObj} />
</>
);
};
export default Demo;
packages/base-components/VideoSliderModal/src/index.js 0 → 100644
View file @ c1290bb8
import VmsVideo from '@wisdom-components/VmsVideo';
import { Button, Modal } from 'antd';
import classNames from 'classnames';
import React, { useState } from 'react';
import SwiperCore, { Autoplay, Lazy, Navigation, Pagination, Virtual } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/swiper.min.css';
import styles from './index.less';
SwiperCore.use([Virtual, Navigation, Lazy, Autoplay, Pagination]);
const VideoSliderModal = (props) => {
const { modalInfo, videoInfos, JessibucaObj } = props;
const [swiper, setSwiper] = useState(null);
const handleSwiperRef = (node) => {
if (node) {
setSwiper(node.swiper);
}
};
const handleNavigation = (direction) => {
if (swiper) {
if (direction === 'prev') {
swiper.slidePrev();
} else if (direction === 'next') {
swiper.slideNext();
}
}
};
const handlePaginationClick = (index) => {
if (swiper) {
swiper.slideTo(index);
}
};
const _JessibucaObj = {
operateBtns: {
screenshot: false,
},
loadingText: '演示视频加载中',
decoder: '/JessibucaVideo/decoder.js',
...JessibucaObj,
};
return (
<Modal
footer={null}
width={800}
{...modalInfo}
wrapClassName={styles['video-carousel-modal']}
bodyStyle={{ padding: 0 }}
>
<Swiper onSwiper={handleSwiperRef} navigation pagination={{ clickable: true }}>
{videoInfos.map((videoInfo, index) => (
<SwiperSlide key={index}>
<VmsVideo VideoInfo={videoInfo} JessibucaObj={_JessibucaObj} />
</SwiperSlide>
))}
</Swiper>
{/* <div>
<button onClick={() => handleNavigation('prev')}>Previous</button>
<button onClick={() => handleNavigation('next')}>Next</button>
</div>
<div>
{videoInfos.map((video, index) => (
<button key={index} onClick={() => handlePaginationClick(index)}>
{index + 1}
</button>
))}
</div> */}
</Modal>
);
};
export default VideoSliderModal;
packages/base-components/VideoSliderModal/src/index.less 0 → 100644
View file @ c1290bb8
@root-entry-name: 'default';
@import '~antd/es/style/themes/index.less';
.swiper-container {
height: 100%;
overflow: hidden;
.swiper-button-prev,
.swiper-button-next {
position: absolute;
top: 50%;
width: 50px;
height: 50px;
background-repeat: no-repeat;
background-size: 50% 50%;
transform: translateY(-50%);
cursor: pointer;
&:hover {
background-size: 60% 60%;
}
}
}
.video-carousel-modal {
.@{ant-prefix}-modal-body {
height: 500px;
padding: 0;
}
}
.video-slider-modal-nav {
display: flex;
align-items: center;
justify-content: center;
margin-top: 10px;
:global {
.@{ant-prefix}-btn:empty {
visibility: visible;
}
}
.video-slider-modal-nav-button {
margin-right: 10px;
color: #1890ff;
font-size: 16px;
background-color: transparent;
border: none;
cursor: pointer;
}
.video-slider-modal-nav-dots {
display: flex;
align-items: center;
}
.video-slider-modal-nav-dot {
width: 8px;
height: 8px;
margin-right: 10px;
background-color: transparent;
border: 2px solid #ddd;
border-radius: 50%;
cursor: pointer;
}
.video-slider-modal-nav-dot.active {
background-color: #1890ff;
border-color: #1890ff;
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment