fix: 视频播放添加　图片od

2024-04-23 18:10:03 +08:00 · 2024-04-23 18:10:03 +08:00 · 8d1d7bfa1c
commit 8d1d7bfa1c
parent b14cb22285
5 changed files with 83 additions and 20 deletions
--- a/packages/biz/src/RealTimeMonitor/components/WindowToggle/WindowToggle.tsx
+++ b/packages/biz/src/RealTimeMonitor/components/WindowToggle/WindowToggle.tsx
@ -52,14 +52,16 @@ export const WindowToggle: React.FC<WindowToggleProps> = (props) => {
      <div className='body'>
        {
          dataSource?.map((item, index) => {
+            
            if (size === "large" && index > 0) return
            return (
              <VideoPlayerCard
                key={item.windowKey}
                selectedWindowKey={selectedWindowKey}
-                size={size} {...item}
+                size={size} 
                handleWindowClick={handleWindowClick}
                handleCloseButtonClick={handleCloseButtonClick}
+                {...item}
              />)
          })
        }
--- a/packages/biz/src/RealTimeMonitor/demo/base.tsx
+++ b/packages/biz/src/RealTimeMonitor/demo/base.tsx
@ -48,15 +48,15 @@ export default () => {
    })
  }

-  const handleDownloadImg = (imageKey?: string) => {
-    console.log(imageKey)
+  const handleDownloadImg = (imgSrc?: string) => {
+    console.log(imgSrc)
    // 可以调用 下面 方法关闭弹窗
    // viewLargerImageModalRef.current?.handleCancel()
  }

  const onRecordClick = (record?: IRecord) => {
    // 点击的时候把数据 拿过来处理一下传给大图弹框
-    const { imageKey, warningType, boxId, position, cabietId, warningTime, warningTimestamp, warningTimeFormat = 'YYYY-MM-DD HH:mm:ss' } = record || {}
+    const { imgSrc, warningType, boxId, position, cabietId, warningTime, warningTimestamp, warningTimeFormat = 'YYYY-MM-DD HH:mm:ss',odRect= [] } = record || {}
    const formattedDate = warningTimestamp ? dayjs(warningTimestamp).format(warningTimeFormat) : '';
    const warningTimeShow = warningTime ? warningTime : formattedDate
    //用于渲染右侧的 信息
@ -68,7 +68,7 @@ export default () => {
      { label: '柜子ID', value: cabietId },
    ]
    // 调用这个方法打开弹框
-    viewLargerImageModalRef?.current?.show({ imageKey: imageKey, warningData: warningData })
+    viewLargerImageModalRef?.current?.show({ imgSrc: imgSrc, warningData: warningData ,odRect:odRect})

    setSelectedRecordId(record?.id)
  }
@ -89,7 +89,8 @@ export default () => {
    // 模拟 视频数据请求
    setTimeout(() => {
      // 对后端返回数据进行处理  组装一套符合属性的 数据 
-      const newVideoData: VideoPlayerCardProps = { imageKey: videoData.imageKey, title: videoData.title, }
+      debugger
+      const newVideoData: VideoPlayerCardProps = { imgSrc: videoData.imgSrc, title: videoData.title, odRect: videoData.odRect }
      setVideoDataSource((pre) => {
        const newVideoDataSource: VideoPlayerCardProps[] = pre.map((item) => {
          // 传给 选中的视频窗口
@ -121,7 +122,7 @@ export default () => {
    setTimeout(() => {
      const newWarningDataSource: IRecord[] = warningData.map(o => {
        return {
-          imageKey: o.imageKey,
+          imgSrc: o.imgSrc,
          id: o.id,
          warningType: o.warningType,
          boxId: o.boxId,
@ -131,6 +132,7 @@ export default () => {
          warningInfo: [`盒子${o.boxId}`, `位置${o.position}`, `柜子ID${o.cabietId}`],
          // cabietText: `柜子ID: ${o.cabietId}`,
          warningTimestamp: o.warningTimestamp,
+          odRect: o.odRect
        }
      })
      setWarningDataSource(newWarningDataSource)
--- a/packages/biz/src/RealTimeMonitor/demo/mock.tsx
+++ b/packages/biz/src/RealTimeMonitor/demo/mock.tsx
@ -1,7 +1,14 @@
 export const videoData = {
  imgSrc: 'https://i.yourimageshare.com/lRHiD2UnAT.png',
  // videoSrc: 'ws://10.0.0.7:9033/flv/File/test/test_h264_1.mp4.flv?ip=127.0.0.1',
-  title: `盒子1 点位1`
+  title: `盒子1 点位1`,
+  odRect: [{
+    // "id": "456",
+    "x": 0.1519352,
+    "y": 0.2965385,
+    "w": 0.05185461,
+    "h": 0.24698898,
+  }]
 }

 export const warningData = [
@ -15,6 +22,13 @@ export const warningData = [
    // warningTime: "2023-03-01 ",
    warningTimestamp: Date.now(),
    // warningTimeFormat:"YYYY-MM-DD"
+    odRect: [{
+      // "id": "456",
+      "x": 0.1519352,
+      "y": 0.2965385,
+      "w": 0.05185461,
+      "h": 0.24698898,
+    }]
  },
  {
    imgSrc: 'https://i.yourimageshare.com/lRHiD2UnAT.png',
@ -26,6 +40,13 @@ export const warningData = [
    // warningTime: "2023-03-01 ",
    warningTimestamp: Date.now(),
    // warningTimeFormat:"YYYY-MM-DD"
+    odRect: [{
+      // "id": "456",
+      "x": 0.1519352,
+      "y": 0.2965385,
+      "w": 0.05185461,
+      "h": 0.24698898,
+    }]
  },
  {
    imgSrc: 'https://i.yourimageshare.com/lRHiD2UnAT.png',
@ -37,6 +58,13 @@ export const warningData = [
    // warningTime: "2023-03-01 ",
    warningTimestamp: Date.now(),
    // warningTimeFormat:"YYYY-MM-DD"
+    odRect: [{
+      // "id": "456",
+      "x": 0.1519352,
+      "y": 0.2965385,
+      "w": 0.05185461,
+      "h": 0.24698898,
+    }]
  },
  {
    imgSrc: 'https://i.yourimageshare.com/lRHiD2UnAT.png',
@ -48,6 +76,13 @@ export const warningData = [
    // warningTime: "2023-03-01 ",
    warningTimestamp: Date.now(),
    // warningTimeFormat:"YYYY-MM-DD"
+    odRect: [{
+      // "id": "456",
+      "x": 0.1519352,
+      "y": 0.2965385,
+      "w": 0.05185461,
+      "h": 0.24698898,
+    }]
  },
  {
    imgSrc: 'https://i.yourimageshare.com/lRHiD2UnAT.png',
@ -59,6 +94,13 @@ export const warningData = [
    // warningTime: "2023-03-01 ",
    warningTimestamp: Date.now(),
    // warningTimeFormat:"YYYY-MM-DD"
+    odRect: [{
+      // "id": "456",
+      "x": 0.1519352,
+      "y": 0.2965385,
+      "w": 0.05185461,
+      "h": 0.24698898,
+    }]
  }
 ]

--- a/packages/biz/src/VideoPlayerCard/VideoPlayerCard.tsx
+++ b/packages/biz/src/VideoPlayerCard/VideoPlayerCard.tsx
@ -1,6 +1,7 @@
 import { Card, Space, CardProps, Spin, Button } from 'antd';
 import { theme } from 'antd/lib';
-import { ConfigProvider, VideoPlayer, type VideoViewRef, } from '@zhst/meta';
+import { ConfigProvider, VideoPlayer, CropperImage, type VideoViewRef, } from '@zhst/meta';
+
 import React, { useState, useEffect, ReactNode, useRef, useContext } from 'react';
 import { CloseOutlined, LoadingOutlined } from '@ant-design/icons';
 import './index.less'
@ -18,6 +19,14 @@ export interface VideoPlayerCardProps {
  title?: string | ReactNode
  handleCloseButtonClick?: (key?: string) => void;
  handleWindowClick?: (key?: string) => void;
+  odRect?: {
+    id?: string;
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+    selectAble?: boolean;
+  }[]
 }

 export const VideoPlayerCard: React.FC<VideoPlayerCardProps> = (props) => {
@ -25,12 +34,16 @@ export const VideoPlayerCard: React.FC<VideoPlayerCardProps> = (props) => {

  const { ConfigContext } = ConfigProvider;
  const { getPrefixCls } = useContext(ConfigContext);
-  const { prefixCls: customizePrefixCls, showType, imgSrc, videoSrc, cardProps, isWindowLoading, errorReasonText, size, title, handleCloseButtonClick, handleWindowClick, windowKey, selectedWindowKey = '' } = props;
+  const { prefixCls: customizePrefixCls, showType, imgSrc, videoSrc, cardProps, isWindowLoading, errorReasonText, size, title, handleCloseButtonClick, handleWindowClick, windowKey, selectedWindowKey = '',odRect = [] } = props;
  const componentName = getPrefixCls('biz-video-player-card', customizePrefixCls);
  const [cardContent, setCardContent] = useState<JSX.Element | null>(null);
  const { useToken } = theme
  const { token } = useToken()
  const videoRef = useRef<VideoViewRef>(null)
+  const odRectDefault = odRect?.map(rect => ({
+    ...rect,
+    selectAble: rect.hasOwnProperty('selectAble') ? rect.selectAble : false
+  }));
  const selectedBorderStyle = {
    border: `2px solid ${token.colorPrimary}`, boxShadow: " 0px 2px 9px 0px rgba(0,0,0,0.16)"
  }
@ -51,11 +64,15 @@ export const VideoPlayerCard: React.FC<VideoPlayerCardProps> = (props) => {

      } else if (imgSrc) {
        contentElement = (
-          <img
-            alt="首帧图"
-            src={imgSrc}
-            style={{ width: "100%", height: "100%", display: 'block' }}
+
+          <div style={{ width: "100%", height: "100%", display: 'block' }}>
+          <CropperImage
+            // editAble={true}
+            odList={odRectDefault}
+            url={imgSrc}
          />
+        </div>
+        
        );
      }
      setCardContent(contentElement);
--- a/packages/biz/src/ViewLargerImageModal/ViewLargerImageModal.tsx
+++ b/packages/biz/src/ViewLargerImageModal/ViewLargerImageModal.tsx
@ -7,7 +7,7 @@ import { ConfigProvider,CropperImage} from '@zhst/meta';
 import './index.less'

 type ViewLargerImageModalParams = {
-  imageKey?: string;
+  imgSrc?: string;
  warningData?: {
    label?: string;
    value?: string;
@ -30,7 +30,7 @@ export interface ViewLargerImageModalRef {
 export interface ViewLargerImageModalProps {
  prefixCls?: string
  imgStyle?: React.CSSProperties;
-  downloadImg?: (imageKey?: string) => void;
+  downloadImg?: (imgSrc?: string) => void;
  title?: string;
  downloadText?: string;
  modalProps?: ModalProps
@ -49,7 +49,7 @@ export const ViewLargerImageModal = forwardRef<ViewLargerImageModalRef, ViewLarg
    const { useToken } = theme
    const { token } = useToken()
    const [open, setOpen] = useState<boolean>(false);
-    const [imageKey, setimageKey] = useState<string>();
+    const [imgSrc, setimgSrc] = useState<string>();
    const [odRect, setOdRect] = useState<ViewLargerImageModalParams['odRect']>();
    const [warningData, setWarningData] = useState<ViewLargerImageModalParams['warningData']>();
    const odRectDefault = odRect?.map(rect => ({
@ -65,7 +65,7 @@ export const ViewLargerImageModal = forwardRef<ViewLargerImageModalRef, ViewLarg
      return {
        show: (_params) => {
          setOpen(true);
-          setimageKey(_params?.imageKey)
+          setimgSrc(_params?.imgSrc)
          setWarningData(_params?.warningData)
          setOdRect(_params?.odRect)
        },
@ -90,7 +90,7 @@ export const ViewLargerImageModal = forwardRef<ViewLargerImageModalRef, ViewLarg
              <CropperImage
                // editAble={true}
                odList={odRectDefault}
-                url={imageKey}
+                url={imgSrc}
              />
            </div>
          </div>
@ -101,7 +101,7 @@ export const ViewLargerImageModal = forwardRef<ViewLargerImageModalRef, ViewLarg
                {value}
              </div>
            ))}
-            {imageKey && downloadImg && <div className='img-download' style={{ color: token.colorPrimary }} onClick={() => downloadImg?.(imageKey)} ><DownloadOutlined /><span style={{ paddingLeft: 3 }}>{downloadText}</span></div>}
+            {imgSrc && downloadImg && <div className='img-download' style={{ color: token.colorPrimary }} onClick={() => downloadImg?.(imgSrc)} ><DownloadOutlined /><span style={{ paddingLeft: 3 }}>{downloadText}</span></div>}
          </div>
        </Space>
      </Modal>