feat(Video): web h5 下支持 ref 调用

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'
+}

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,48 @@ test('video base info', () => {
   expect(sourceDom?.getAttribute('src')).toBe('xxx.mp4')
   expect(container).toMatchSnapshot()
 })
+
+test('video ref call', () => {
+  const pause = vi.fn()
+  // 确保在每个测试后清理 mock
+  afterEach(() => {
+    pause.mockClear()
+  })
+  const App = () => {
+    const source = {
+      src: 'xxx.mp4',
+      type: 'video/mp4',
+    }
+    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',
+    }
+    const itemRef = React.useRef<HTMLVideoElement>(null)
+
+    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).toHaveBeenCalledTimes(1)
+})

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',

src/packages/video/demos/h5/demo2.tsx

@@ -1,8 +1,8 @@
-import React, { useState } from 'react'
+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',
   })
@@ -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}

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 | `-` |

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 | 暂停 | `-` |

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 | 暫停 | `-` |

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'