From 682a3a897720d653539f0036dc9c641739f3d1d8 Mon Sep 17 00:00:00 2001
From: Joe <joe_96@163.com>
Date: Fri, 21 Feb 2025 17:30:51 +0800
Subject: [PATCH] up

---
 package.json                           |   1 +
 src/components/AliPlayer/index.tsx     | 123 ++++---------------------
 src/global.tsx                         |  12 +++
 src/pages/RequirementAudits/detail.tsx |  10 +-
 src/pages/RequirementAudits/index.tsx  |   3 +-
 src/typings.d.ts                       |   1 +
 6 files changed, 43 insertions(+), 107 deletions(-)

diff --git a/package.json b/package.json
index 0b5400b..d463192 100644
--- a/package.json
+++ b/package.json
@@ -54,6 +54,7 @@
     "@dnd-kit/sortable": "^8.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@umijs/route-utils": "^2.2.2",
+    "aliyun-aliplayer": "^2.29.1",
     "antd": "^5.2.2",
     "antd-img-crop": "^4.23.0",
     "braft-editor": "^2.3.9",
diff --git a/src/components/AliPlayer/index.tsx b/src/components/AliPlayer/index.tsx
index 5362d1a..ed0b47b 100644
--- a/src/components/AliPlayer/index.tsx
+++ b/src/components/AliPlayer/index.tsx
@@ -1,6 +1,7 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { Button, Slider, Select, Space, Card } from 'antd';
-import { PauseCircleOutlined, PlayCircleOutlined, ExpandOutlined } from '@ant-design/icons';
+import React, { useEffect, useState } from 'react';
+import { Card } from 'antd';
+import Aliplayer from 'aliyun-aliplayer';
+import 'aliyun-aliplayer/build/skins/default/aliplayer-min.css';
 
 interface AliPlayerProps {
   vid: string;
@@ -15,115 +16,31 @@ const AliPlayer: React.FC<AliPlayerProps> = ({
   width = '100%',
   height = 500
 }) => {
-  const playerRef = useRef<any>(null);
-  const containerRef = useRef<HTMLDivElement>(null);
-  const [playing, setPlaying] = useState(false);
-  const [currentTime, setCurrentTime] = useState(0);
-  const [duration, setDuration] = useState(0);
-  const [playbackRate, setPlaybackRate] = useState(1);
+  const [player, setPlayer] = useState<typeof Aliplayer>(null); // 播放器实例
 
   // 初始化播放器
   useEffect(() => {
-    const link = document.createElement('link');
-    const script = document.createElement('script');
-    link.rel = "stylesheet"
-    link.href = 'https://g.alicdn.com/apsara-media-box/imp-web-player/2.29.1/skins/default/aliplayer-min.css'
-    script.src = 'https://g.alicdn.com/apsara-media-box/imp-web-player/2.29.1/aliplayer-min.js';
-    script.onload = () => {
-      if (containerRef.current) {
-        playerRef.current = new (window as any).Aliplayer({
-          id: containerRef.current,
-          vid: vid,
-          playauth: playAuth,
-          width: width,
-          height: height,
-          autoplay: false,
-          encryptType: 1,
-        }, () => {
-          // 播放器准备就绪
-          setDuration(playerRef.current.getDuration());
-          
-          // 绑定事件
-          playerRef.current.on('play', () => setPlaying(true));
-          playerRef.current.on('pause', () => setPlaying(false));
-          playerRef.current.on('ended', () => setPlaying(false));
-          playerRef.current.on('timeupdate', (currentTime: number) => {
-            setCurrentTime(currentTime);
-          });
-        });
+    if (player) {
+      player.dispose();
+    }
+    // 更多使用方法请参考接入文档：https://help.aliyun.com/zh/vod/developer-reference/integration
+    const playerInstance = new Aliplayer(
+      {
+        id: "container",
+        width: width,
+        height: height,
+        vid,
+        playauth: playAuth,
+        disableSeek: true,
       }
-    };
-    document.head.appendChild(link);
-    document.head.appendChild(script);
+    );
 
-    return () => {
-      if (playerRef.current) {
-        playerRef.current.dispose();
-      }
-      document.head.removeChild(link);
-      document.head.removeChild(script);
-    };
+    setPlayer(playerInstance);
   }, [vid, playAuth]);
 
-  // 播放/暂停控制
-  const togglePlay = () => {
-    if (playing) {
-      playerRef.current.pause();
-    } else {
-      playerRef.current.play();
-    }
-  };
-
-  // 进度条跳转
-  const handleSeek = (value: number) => {
-    playerRef.current.seek(value);
-  };
-
-  // 倍速播放
-  const handleSpeedChange = (value: number) => {
-    playerRef.current.setPlaybackRate(value);
-    setPlaybackRate(value);
-  };
-
-  // 全屏
-  const handleFullscreen = () => {
-    playerRef.current.requestFullscreen();
-  };
-
   return (
     <Card>
-      <div ref={containerRef} style={{ width, height }} />
-      
-      <Space style={{ marginTop: 16 }}>
-        <Button 
-          icon={playing ? <PauseCircleOutlined /> : <PlayCircleOutlined />}
-          onClick={togglePlay}
-        />
-        
-        <Slider
-          min={0}
-          max={duration}
-          value={currentTime}
-          onChange={handleSeek}
-          style={{ width: 300 }}
-        />
-        
-        <Select
-          value={playbackRate}
-          onChange={handleSpeedChange}
-          options={[
-            { value: 0.5, label: '0.5x' },
-            { value: 1, label: '1.0x' },
-            { value: 1.5, label: '1.5x' },
-            { value: 2, label: '2.0x' },
-          ]}
-        />
-        
-        <Button 
-          icon={<ExpandOutlined />}
-          onClick={handleFullscreen}
-        />
-      </Space>
+      <div id="container" style={{ width, height }} />
     </Card>
   );
 };
diff --git a/src/global.tsx b/src/global.tsx
index db2c296..3ae4f91 100644
--- a/src/global.tsx
+++ b/src/global.tsx
@@ -17,6 +17,18 @@ const clearCache = () => {
   }
 };
 
+export {};
+class StartADComponent {}
+class MemoryPlayComponent {}
+declare global {
+  interface Window {
+    AliPlayerComponent: {
+      StartADComponent: StartADComponent;
+      MemoryPlayComponent: MemoryPlayComponent;
+    };
+  }
+}
+
 // if pwa is true
 if (pwa) {
   // Notify user if offline now
diff --git a/src/pages/RequirementAudits/detail.tsx b/src/pages/RequirementAudits/detail.tsx
index c2b6316..61fe337 100644
--- a/src/pages/RequirementAudits/detail.tsx
+++ b/src/pages/RequirementAudits/detail.tsx
@@ -2,7 +2,7 @@ import { approvalRequirementForAdminUsingGet, requirementDetailForAdminUsingGet
 import { ProCard } from '@ant-design/pro-components';
 import { PageContainer } from '@ant-design/pro-layout';
 import { Access, useAccess, useParams } from '@umijs/max';
-import { Button, Descriptions, Image, message } from 'antd';
+import { Button, Descriptions, Image, message, Space } from 'antd';
 import React, { useEffect, useState } from 'react';
 
 const Detail: React.FC<any> = () => {
@@ -98,9 +98,13 @@ const Detail: React.FC<any> = () => {
           <Descriptions.Item label="需求标题" span={2}>{info.pbcTitle}</Descriptions.Item>
           <Descriptions.Item label="需求预算" span={2}>{info.pbcBudget}</Descriptions.Item>
           <Descriptions.Item label="需求描述" span={3}>{info.pbcDescription}</Descriptions.Item>
-          <Descriptions.Item label="需求图片" span={3}>{info.pbcImages?.split(',').map(e => <Image key={e} width={200} src={e} />)}</Descriptions.Item>
+          <Descriptions.Item label="需求图片" span={3}>
+            <Space>
+              {info.pbcImages?.split(',').map(e => <Image key={e} width={200} height={200} style={{ objectFit: 'contain' }} src={e} />)}
+            </Space>
+          </Descriptions.Item>
           <Descriptions.Item label="发布时间" span={3}>{info.pbcCreateAt}</Descriptions.Item>
-          <Descriptions.Item label="联系人" span={3}>{info.pbcCreateByUserName}</Descriptions.Item>
+          <Descriptions.Item label="联系人" span={3}>{info.pbcUsers?.pbcUserNickName}</Descriptions.Item>
           <Descriptions.Item label="联系电话" span={3}>{info.pbcUsers?.pbcUserMobile}</Descriptions.Item>
         </Descriptions>
       </ProCard>
diff --git a/src/pages/RequirementAudits/index.tsx b/src/pages/RequirementAudits/index.tsx
index d0ea8c2..e5d7104 100644
--- a/src/pages/RequirementAudits/index.tsx
+++ b/src/pages/RequirementAudits/index.tsx
@@ -35,7 +35,8 @@ const TableList: React.FC<{}> = () => {
     },
     {
       title: '联系人',
-      dataIndex: 'pbcCreateByUserName'
+      dataIndex: 'pbcCreateByUserName',
+      render: (_, record) => record.pbcUsers?.pbcUserNickName
     },
     {
       title: '联系电话',
diff --git a/src/typings.d.ts b/src/typings.d.ts
index 742f70c..8fcc99d 100644
--- a/src/typings.d.ts
+++ b/src/typings.d.ts
@@ -16,5 +16,6 @@ declare module '@antv/data-set';
 declare module 'mockjs';
 declare module 'react-fittext';
 declare module 'bizcharts-plugin-slider';
+declare module 'aliyun-aliplayer';
 
 declare const REACT_APP_ENV: 'test' | 'dev' | 'pre' | false;