fix(h5): 修复 video methods

packages/taro-components/__tests__/test-tools.js

@@ -21,6 +21,14 @@ export async function mount (node, wrapper) {
       async componentDidMount () {
         const ref = this.ref.current
         const dom = ref instanceof HTMLElement ? ref : ReactDOM.findDOMNode(ref)
+        const { ref: forwardRef } = node
+        if (typeof forwardRef === 'function') {
+          forwardRef(ref)
+        } else if (forwardRef && typeof forwardRef === 'object' && forwardRef.hasOwnProperty('current')) {
+          forwardRef.current = ref
+        } else if (typeof forwardRef === 'string') {
+          console.warn('内置组件不支持字符串 ref')
+        }
 
         await waitForChange(dom)
 

packages/taro-components/__tests__/video.spec.js

@@ -106,40 +106,98 @@ describe('Video', () => {
     )
     const wrapper = await mount(app, scratch)
     const { node } = wrapper
-    const box = document.querySelector('.taro-video')
     const video = wrapper.find('video.taro-video-video')
     const fullscreenBtn = wrapper.find('.taro-video-fullscreen')
     video.requestFullscreen = sinon.fake()
 
-    assert(box.children.length === 1)
-    assert(node.parentElement === box)
     assert(fullscreenBtn.classList.contains('taro-nodevideo-type-fullscreen') === false)
-
     fullscreenBtn.click()
     await waitForChange(node)
 
-    assert(box.children.length === 0)
-    assert(node.parentElement === document.body)
     assert(fullscreenBtn.classList.contains('taro-video-type-fullscreen') === true)
     assert(onFullScreenChange.calledOnceWith({
       fullScreen: true,
       direction: 'vertical'
     }))
+    assert(video.requestFullscreen.calledOnceWith({
+      navigationUI: 'show'
+    }))
 
     fullscreenBtn.click()
     await waitForChange(node)
 
-    assert(box.children.length === 1)
-    assert(node.parentElement === box)
     assert(fullscreenBtn.classList.contains('taro-video-type-fullscreen') === false)
     assert(onFullScreenChange.callCount === 2)
     assert(onFullScreenChange.calledWith({
       fullScreen: false,
       direction: 'vertical'
     }))
+    assert(video.requestFullscreen.callCount === 1)
+  })
+
+  it('should play', async () => {
+    const ref = React.createRef()
+    const app = (
+      <Video
+        ref={ref}
+        src='http://storage.jd.com/cjj-pub-images/bear.mp4'
+        onError={ev => ev.stopPropagation()}
+      />
+    )
+    const wrapper = await mount(app, scratch)
+    const video = wrapper.find('video.taro-video-video')
+    video.play = sinon.fake()
+    ref.current.play()
+    const { node } = wrapper
+    await waitForChange(node)
+
+    assert(video.play.callCount === 1)
   })
 
-  it('controls bar', async () => {
+  it('should pause', async () => {
+    const ref = React.createRef()
+    const app = (
+      <Video
+        ref={ref}
+        src='http://storage.jd.com/cjj-pub-images/bear.mp4'
+        onError={ev => ev.stopPropagation()}
+      />
+    )
+    const wrapper = await mount(app, scratch)
+    const video = wrapper.find('video.taro-video-video')
+    video.pause = sinon.fake()
+    ref.current.pause()
+    const { node } = wrapper
+    await waitForChange(node)
+
+    assert(video.pause.callCount === 1)
+  })
+
+  it('should seek and stop', async () => {
+    const ref = React.createRef()
+    const app = (
+      <Video
+        ref={ref}
+        src='http://storage.jd.com/cjj-pub-images/bear.mp4'
+        onError={ev => ev.stopPropagation()}
+      />
+    )
+    const wrapper = await mount(app, scratch)
+    const video = wrapper.find('video.taro-video-video')
+    ref.current.seek(233)
+    const { node } = wrapper
+    await waitForChange(node)
+
+    assert(video.currentTime === 233)
+    video.pause = sinon.fake()
+    ref.current.stop()
+    await waitForChange(node)
+
+    assert(video.currentTime === 0)
+    assert(video.pause.callCount === 1)
+  })
+
+  it('should be controlled by bar', async () => {
     const app = (
       <Video
         src='http://storage.jd.com/cjj-pub-images/bear.mp4'
@@ -151,7 +209,7 @@ describe('Video', () => {
     let currentTime = wrapper.find('.taro-video-current-time')
     let progress = wrapper.find('.taro-video-progress-container')
     let duration = wrapper.find('.taro-video-duration')
-    let playBtn = wrapper.find('.taro-video-control-button')
+    let playBtn = wrapper.find('.taro-video-control-button-play')
     let muteBtn = wrapper.find('.taro-video-mute')
     let danmuBtn = wrapper.find('.taro-video-danmu-button')
     let fullscreenBtn = wrapper.find('.taro-video-fullscreen')
@@ -164,6 +222,13 @@ describe('Video', () => {
     assert(muteBtn === null)
     assert(danmuBtn === null)
 
+    const video = wrapper.find('video.taro-video-video')
+    video.play = sinon.fake()
+    const { node } = wrapper
+    playBtn.click()
+    await waitForChange(node)
+    assert(video.play.callCount === 1)
+
     await wrapper.setProps({
       showProgress: false,
       showFullscreenBtn: false,
@@ -176,7 +241,7 @@ describe('Video', () => {
     currentTime = wrapper.find('.taro-video-current-time')
     progress = wrapper.find('.taro-video-progress-container')
     duration = wrapper.find('.taro-video-duration')
-    playBtn = wrapper.find('.taro-video-control-button')
+    playBtn = wrapper.find('.taro-video-control-button-play')
     muteBtn = wrapper.find('.taro-video-mute')
     danmuBtn = wrapper.find('.taro-video-danmu-button')
     fullscreenBtn = wrapper.find('.taro-video-fullscreen')

packages/taro-components/src/components/video/utils.js

@@ -46,7 +46,6 @@ export const screenFn = (function () {
       'webkitFullscreenEnabled',
       'webkitfullscreenchange',
       'webkitfullscreenerror'
-
     ],
     // Old WebKit
     [
@@ -88,7 +87,7 @@ export const screenFn = (function () {
       return ret
     }
   }
-  // If it doesn't find any of them, this whole function returns false
+  // If it doesn't find any of them, this whole function returns {}
   // and the fn variable is set to this returned value.
   return ret
 })()

packages/taro-components/src/components/video/video.tsx

@@ -30,7 +30,6 @@ export class Video implements ComponentInterface {
   private lastPercentage
   private nextPercentage
   private gestureType = 'none'
-  private wrapperElement: HTMLElement
 
   @Element() el: HTMLTaroVideoCoreElement
 
@@ -189,30 +188,18 @@ export class Video implements ComponentInterface {
     }
     // 目前只支持 danmuList 初始化弹幕列表，还未支持更新弹幕列表
     this.danmuRef.sendDanmu(this.danmuList)
+
+    if (document.addEventListener) {
+      document.addEventListener(screenFn.fullscreenchange, this.handleFullScreenChange)
+    }
   }
 
   componentDidRender () {
-    const parentElement = this.el.parentElement as HTMLElement
-    const parentTagName = parentElement.tagName
-    if (this.isFullScreen) {
-      if (parentTagName !== 'BODY') {
-        parentElement.removeChild(this.el)
-        document.body.appendChild(this.el)
-      }
-    } else {
-      if (parentTagName !== 'DIV' || !parentElement.className.includes('taro-video')) {
-        if (!this.wrapperElement) {
-          const container = document.createElement('div')
-          container.className = 'taro-video'
-          parentElement.removeChild(this.el)
-          container.appendChild(this.el)
-          parentElement.appendChild(container)
-          this.wrapperElement = container
-        } else {
-          parentElement.removeChild(this.el)
-          this.wrapperElement.appendChild(this.el)
-        }
-      }
+  }
+
+  disconnectedCallback () {
+    if (document.removeEventListener) {
+      document.removeEventListener(screenFn.fullscreenchange, this.handleFullScreenChange)
     }
   }
 
@@ -387,22 +374,34 @@ export class Video implements ComponentInterface {
 
   /** 播放视频 */
   @Method() async play () {
-    this.videoRef.play()
+    this._play()
   }
 
+  _play = () => this.videoRef.play()
+
   /** 暂停视频 */
   @Method() async pause () {
-    this.videoRef.pause()
+    this._pause()
   }
 
+  _pause = () => this.videoRef.pause()
+
   /** 停止视频 */
   @Method() async stop () {
+    this._stop()
+  }
+
+  _stop = () => {
     this.videoRef.pause()
-    this.seek(0)
+    this._seek(0)
   }
 
   /** 跳转到指定位置 */
   @Method() async seek (position: number) {
+    this._seek(position)
+  }
+
+  _seek = (position: number) => {
     this.videoRef.currentTime = position
   }
 
@@ -438,8 +437,8 @@ export class Video implements ComponentInterface {
     this.toggleFullScreen()
   }
 
-  // 全屏后，"点击按钮退出"走的是浏览器事件，在此同步状态
-  @Listen('fullscreenchange') onNativeFullScreenExit (e) {
+  handleFullScreenChange = e => {
+    // 全屏后，"退出"走的是浏览器事件，在此同步状态
     const timestamp = new Date().getTime()
     if (!e.detail && this.isFullScreen && !document[screenFn.fullscreenElement] && timestamp - this.fullScreenTimestamp > 100) {
       this.toggleFullScreen(false)
@@ -556,9 +555,9 @@ export class Video implements ComponentInterface {
           currentTime={this.currentTime}
           duration={this.duration || this._duration || undefined}
           isPlaying={this.isPlaying}
-          pauseFunc={this.pause}
-          playFunc={this.play}
-          seekFunc={this.seek}
+          pauseFunc={this._pause}
+          playFunc={this._play}
+          seekFunc={this._seek}
           showPlayBtn={this.showPlayBtn}
           showProgress={this.showProgress}
         >