From c1538ab3674f174fbb59bcd7a1ac49ec73611015 Mon Sep 17 00:00:00 2001
From: hanyuxinting <hanyuxinting@sina.cn>
Date: Wed, 11 Dec 2024 13:43:12 +0800
Subject: [PATCH 1/4] =?UTF-8?q?feat(Video):=20web=20h5=20=E4=B8=8B?=
 =?UTF-8?q?=E6=94=AF=E6=8C=81=20ref=20=E8=B0=83=E7=94=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/packages/video/demo.tsx           |  6 +++---
 src/packages/video/demos/h5/demo2.tsx | 13 ++++++++++++-
 src/packages/video/doc.en-US.md       |  7 +++++++
 src/packages/video/doc.md             |  7 +++++++
 src/packages/video/doc.zh-TW.md       |  7 +++++++
 src/packages/video/video.tsx          | 26 ++++++++++++++++++++++----
 6 files changed, 58 insertions(+), 8 deletions(-)

diff --git a/src/packages/video/demo.tsx b/src/packages/video/demo.tsx
index f0efafb01e..7683c6d533 100644
--- a/src/packages/video/demo.tsx
+++ b/src/packages/video/demo.tsx
@@ -13,7 +13,7 @@ const VideoDemo = () => {
   const [translated] = useTranslate({
     'zh-CN': {
       basic: '基础用法',
-      autoPlay: '自动播放',
+      autoPlay: '自动播放，支持 Ref 暂停 和继续播放',
       muted: '初始化静音',
       cover: '视频封面海报设置',
       inline: '行内播放',
@@ -22,7 +22,7 @@ const VideoDemo = () => {
     },
     'zh-TW': {
       basic: '基礎用法',
-      autoPlay: '自動播放',
+      autoPlay: '自動播放，支持 Ref 暫停 和繼續播放',
       muted: '初始化靜音',
       cover: '視頻封面海報設置',
       inline: '行內播放',
@@ -31,7 +31,7 @@ const VideoDemo = () => {
     },
     'en-US': {
       basic: 'Basic Usage',
-      autoPlay: 'Auto play',
+      autoPlay: 'Auto play, Ref pause and play',
       muted: 'Initialize mute',
       cover: 'Video cover poster settings',
       inline: 'play inline',
diff --git a/src/packages/video/demos/h5/demo2.tsx b/src/packages/video/demos/h5/demo2.tsx
index b819a18bd6..7b8be0423f 100644
--- a/src/packages/video/demos/h5/demo2.tsx
+++ b/src/packages/video/demos/h5/demo2.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useState, useRef } from 'react'
 import { Cell, Video } from '@nutui/nutui-react'
 
 const Demo2 = () => {
@@ -14,10 +14,21 @@ const Demo2 = () => {
   const play = (elm: HTMLVideoElement) => console.log('play', elm)
   const pause = (elm: HTMLVideoElement) => console.log('pause', elm)
   const playend = (elm: HTMLVideoElement) => console.log('playend', elm)
+
+  const rootRef = useRef<HTMLVideoElement>(null)
+  setTimeout(() => {
+    rootRef?.current?.pause()
+  }, 2000)
+
+  setTimeout(() => {
+    rootRef?.current?.play()
+  }, 4000)
+
   return (
     <>
       <Cell style={{ padding: '0' }}>
         <Video
+          ref={rootRef}
           source={source}
           options={options}
           onPlay={play}
diff --git a/src/packages/video/doc.en-US.md b/src/packages/video/doc.en-US.md
index be4522f943..c7074ab176 100644
--- a/src/packages/video/doc.en-US.md
+++ b/src/packages/video/doc.en-US.md
@@ -95,3 +95,10 @@ Reset the video when the video address changes
 | onPlay | play event | `(element: HTMLVideoElement) => void` | `-` |
 | onPause | pause event | `(element: HTMLVideoElement) => void` | `-` |
 | onPlayEnd | Playback completion callback | `(element: HTMLVideoElement) => void` | `-` |
+
+### Ref
+
+| Name | Description | Arguments |
+| --- | --- | --- |
+| play | play | `-` |
+| pause | pause | `-` |
diff --git a/src/packages/video/doc.md b/src/packages/video/doc.md
index afaab2e27a..b44b6c6b86 100644
--- a/src/packages/video/doc.md
+++ b/src/packages/video/doc.md
@@ -95,3 +95,10 @@ playsinline 属性设置移动端视频行内播放，阻止新打开页面播
 | onPlay | 播放 | `(element: HTMLVideoElement) => void` | `-` |
 | onPause | 暂停 | `(element: HTMLVideoElement) => void` | `-` |
 | onPlayEnd | 播放完成回调 | `(element: HTMLVideoElement) => void` | `-` |
+
+### Ref
+
+| 方法名 | 说明 | 参数 |
+| --- | --- | --- |
+| play | 播放 | `-` |
+| pause | 暂停 | `-` |
diff --git a/src/packages/video/doc.zh-TW.md b/src/packages/video/doc.zh-TW.md
index 364f1a3335..cb1850f8bf 100644
--- a/src/packages/video/doc.zh-TW.md
+++ b/src/packages/video/doc.zh-TW.md
@@ -95,3 +95,10 @@ playsinline 屬性設置移動端視頻行內播放，阻止新打開頁面播
 | onPlay | 播放 | `(element: HTMLVideoElement) => void` | `-` |
 | onPause | 暫停 | `(element: HTMLVideoElement) => void` | `-` |
 | onPlayEnd | 播放完成回調 | `(element: HTMLVideoElement) => void` | `-` |
+
+### Ref
+
+| 方法名 | 說明 | 參數 |
+| --- | --- | --- |
+| play | 播放 | `-` |
+| pause | 暫停 | `-` |
diff --git a/src/packages/video/video.tsx b/src/packages/video/video.tsx
index 6c5dda0762..8446c260ac 100644
--- a/src/packages/video/video.tsx
+++ b/src/packages/video/video.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, FunctionComponent } from 'react'
+import React, { useEffect, useRef } from 'react'
 import classNames from 'classnames'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
 
@@ -36,11 +36,17 @@ const defaultProps = {
   },
 } as VideoProps
 
+export type VideoRef = {
+  pause: () => void
+  play: () => void
+}
+
 const classPrefix = `nut-video`
-export const Video: FunctionComponent<
+export const Video = React.forwardRef<
+  VideoRef,
   Partial<VideoProps> &
     Omit<React.HTMLAttributes<HTMLDivElement>, 'onPause' | 'onPlay'>
-> = (props) => {
+>((props, ref) => {
   const {
     children,
     source,
@@ -88,6 +94,18 @@ export const Video: FunctionComponent<
     }
   }
 
+  const pause = () => {
+    rootRef?.current?.pause()
+  }
+  const play = () => {
+    rootRef?.current?.play()
+  }
+
+  React.useImperativeHandle(ref, () => ({
+    pause,
+    play,
+  }))
+
   return (
     <div className={classes} {...restProps}>
       <video
@@ -105,6 +123,6 @@ export const Video: FunctionComponent<
       </video>
     </div>
   )
-}
+})
 
 Video.displayName = 'NutVideo'

From 5fed4669d197a1eaacbc198f384d1c730fb32536 Mon Sep 17 00:00:00 2001
From: hanyuxinting <hanyuxinting@sina.cn>
Date: Wed, 11 Dec 2024 15:27:20 +0800
Subject: [PATCH 2/4] =?UTF-8?q?test:=20=E5=A2=9E=E5=8A=A0=E5=8D=95?=
 =?UTF-8?q?=E6=B5=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/packages/video/__tests__/video.spec.tsx | 44 ++++++++++++++++++++-
 src/packages/video/demos/h5/demo2.tsx       |  2 +-
 2 files changed, 44 insertions(+), 2 deletions(-)

diff --git a/src/packages/video/__tests__/video.spec.tsx b/src/packages/video/__tests__/video.spec.tsx
index 4d1df68e9d..ad6c68b923 100644
--- a/src/packages/video/__tests__/video.spec.tsx
+++ b/src/packages/video/__tests__/video.spec.tsx
@@ -1,8 +1,9 @@
 import * as React from 'react'
-import { render } from '@testing-library/react'
+import { render, fireEvent } from '@testing-library/react'
 import '@testing-library/jest-dom'
 
 import { Video } from '../video'
+import Button from '@/packages/button'
 
 test('video base info', () => {
   const App = () => {
@@ -26,3 +27,44 @@ test('video base info', () => {
   expect(sourceDom?.getAttribute('src')).toBe('xxx.mp4')
   expect(container).toMatchSnapshot()
 })
+
+test('video props', () => {
+  const pause = vi.fn()
+  const App = () => {
+    const source = {
+      src: 'xxx.mp4',
+      type: 'video/mp4',
+    }
+    const itemRef = React.useRef<HTMLVideoElement>(null)
+    const options = {
+      controls: true,
+      autoplay: true,
+      playsinline: true,
+      loop: true,
+      poster:
+        'https://img12.360buyimg.com/ling/s345x208_jfs/t1/168105/33/8417/54825/603df06dEfcddc4cb/21f9f5d0a1b3dad4.jpg.webp',
+    }
+
+    return (
+      <>
+        <Video
+          ref={itemRef}
+          source={source}
+          options={options}
+          onPause={pause}
+        />
+        <Button
+          size="small"
+          data-testid="emit-click"
+          onClick={() => itemRef?.current?.pause()}
+        >
+          暂停一下
+        </Button>
+      </>
+    )
+  }
+
+  const { getByTestId } = render(<App />)
+  fireEvent.click(getByTestId('emit-click'))
+  expect(pause).toBeCalled()
+})
diff --git a/src/packages/video/demos/h5/demo2.tsx b/src/packages/video/demos/h5/demo2.tsx
index 7b8be0423f..054c7b8cf7 100644
--- a/src/packages/video/demos/h5/demo2.tsx
+++ b/src/packages/video/demos/h5/demo2.tsx
@@ -2,7 +2,7 @@ import React, { useState, useRef } from 'react'
 import { Cell, Video } from '@nutui/nutui-react'
 
 const Demo2 = () => {
-  const [source, setSource] = useState({
+  const [source] = useState({
     src: 'https://storage.360buyimg.com/nutui/video/video_NutUI.mp4',
     type: 'video/mp4',
   })

From aae7ae77fb9789ebec78a26877cf405c1ce018e5 Mon Sep 17 00:00:00 2001
From: hanyuxinting <hanyuxinting@sina.cn>
Date: Wed, 11 Dec 2024 15:34:45 +0800
Subject: [PATCH 3/4] =?UTF-8?q?test:=20=E5=A2=9E=E5=8A=A0=E5=8D=95?=
 =?UTF-8?q?=E6=B5=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/packages/video/__tests__/video.spec.tsx | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/packages/video/__tests__/video.spec.tsx b/src/packages/video/__tests__/video.spec.tsx
index ad6c68b923..e62a80d798 100644
--- a/src/packages/video/__tests__/video.spec.tsx
+++ b/src/packages/video/__tests__/video.spec.tsx
@@ -28,14 +28,18 @@ test('video base info', () => {
   expect(container).toMatchSnapshot()
 })
 
-test('video props', () => {
+test('video ref call', () => {
   const pause = vi.fn()
+  // 确保在每个测试后清理 mock
+  afterEach(() => {
+    pause.mockClear()
+  })
+  const itemRef = React.useRef<HTMLVideoElement>(null)
   const App = () => {
     const source = {
       src: 'xxx.mp4',
       type: 'video/mp4',
     }
-    const itemRef = React.useRef<HTMLVideoElement>(null)
     const options = {
       controls: true,
       autoplay: true,
@@ -65,6 +69,8 @@ test('video props', () => {
   }
 
   const { getByTestId } = render(<App />)
+  const videoEle = itemRef.current
+  expect(videoEle).not.toBeNull()
   fireEvent.click(getByTestId('emit-click'))
-  expect(pause).toBeCalled()
+  expect(pause).toHaveBeenCalledTimes(1)
 })

From b7c300d9876409f8f3dff2cfffbe981905951bef Mon Sep 17 00:00:00 2001
From: hanyuxinting <hanyuxinting@sina.cn>
Date: Wed, 11 Dec 2024 18:09:37 +0800
Subject: [PATCH 4/4] fix: test

---
 src/packages/empty/utils.ts                 | 8 ++++++++
 src/packages/video/__tests__/video.spec.tsx | 4 +---
 2 files changed, 9 insertions(+), 3 deletions(-)
 create mode 100644 src/packages/empty/utils.ts

diff --git a/src/packages/empty/utils.ts b/src/packages/empty/utils.ts
new file mode 100644
index 0000000000..5cf1c2079f
--- /dev/null
+++ b/src/packages/empty/utils.ts
@@ -0,0 +1,8 @@
+import { EmptyAction } from './types'
+
+export const getButtonType = (actions: Array<EmptyAction>, index: number) => {
+  const action = actions[index]
+  if (!actions || actions.length === 0) return 'default'
+  if (action.type) return action.type
+  actions.length > 1 && index === 0 ? 'default' : 'primary'
+}
diff --git a/src/packages/video/__tests__/video.spec.tsx b/src/packages/video/__tests__/video.spec.tsx
index e62a80d798..a75bd2a219 100644
--- a/src/packages/video/__tests__/video.spec.tsx
+++ b/src/packages/video/__tests__/video.spec.tsx
@@ -34,7 +34,6 @@ test('video ref call', () => {
   afterEach(() => {
     pause.mockClear()
   })
-  const itemRef = React.useRef<HTMLVideoElement>(null)
   const App = () => {
     const source = {
       src: 'xxx.mp4',
@@ -48,6 +47,7 @@ test('video ref call', () => {
       poster:
         'https://img12.360buyimg.com/ling/s345x208_jfs/t1/168105/33/8417/54825/603df06dEfcddc4cb/21f9f5d0a1b3dad4.jpg.webp',
     }
+    const itemRef = React.useRef<HTMLVideoElement>(null)
 
     return (
       <>
@@ -69,8 +69,6 @@ test('video ref call', () => {
   }
 
   const { getByTestId } = render(<App />)
-  const videoEle = itemRef.current
-  expect(videoEle).not.toBeNull()
   fireEvent.click(getByTestId('emit-click'))
   expect(pause).toHaveBeenCalledTimes(1)
 })