fix: exitFullScreen method

NervJS · Sep 20, 2020 · 1e8b780 · 1e8b780
1 parent 84b05bd
commit 1e8b780
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 19 deletions.
diff --git a/packages/taro-components/__tests__/polyfill.js b/packages/taro-components/__tests__/polyfill.js
@@ -2,8 +2,11 @@ import { applyPolyfills, defineCustomElements } from '../loader/index.es2017.mjs
 import '../dist/taro-components/taro-components.css'
 
 jasmine.DEFAULT_TIMEOUT_INTERVAL = 10000
-
-// 此文件只要 import 一次即可
-applyPolyfills().then(() => {
-  defineCustomElements(window)
-})
+let applied = false
+if (!applied) {
+  // 此文件只要 import 一次即可
+  applyPolyfills().then(() => {
+    defineCustomElements(window)
+    applied = true
+  })
+}
diff --git a/packages/taro-components/__tests__/video.spec.js b/packages/taro-components/__tests__/video.spec.js
@@ -1,3 +1,4 @@
+import './polyfill'
 import React from 'react'
 import * as assert from 'assert'
 // import simulant from 'simulant'

diff --git a/packages/taro-components/src/components/video/video.tsx b/packages/taro-components/src/components/video/video.tsx
@@ -166,12 +166,6 @@ export class Video implements ComponentInterface {
     eventName: 'fullscreenchange'
   }) onFullScreenChange: EventEmitter
 
-  fullscreenchangeListener = () => {
-    if (this.isFullScreen) {
-      this.toggleFullScreen(false)
-    }
-  }
-
   @Event({
     eventName: 'progress'
   }) onProgress: EventEmitter
@@ -184,14 +178,6 @@ export class Video implements ComponentInterface {
     this._enableDanmu = this.enableDanmu
   }
 
-  connectedCallback () {
-    document.addEventListener('fullscreenchange', this.fullscreenchangeListener)
-  }
-
-  disconnectedCallback () {
-    document.removeEventListener('fullscreenchange', this.fullscreenchangeListener)
-  }
-
   componentDidLoad () {
     if (this.initialTime) {
       this.videoRef.currentTime = this.initialTime
@@ -423,6 +409,7 @@ export class Video implements ComponentInterface {
   @Method()
   async exitFullScreen () {
     this.toggleFullScreen(false)
+    document.exitFullscreen()
   }
 
   onTouchStartContainer = (e: TouchEvent) => {
@@ -447,6 +434,18 @@ export class Video implements ComponentInterface {
     this.toggleFullScreen()
   }
 
+  @Listen('fullscreenchange', {
+    target: 'document'
+  })
+  onNativeFullScreenChange (e: CustomEvent) {
+    // 捕获 native fullscreenchange event 然后同步状态
+    if (!e.detail) return
+    if (e.detail.fullScreen) return
+    if (this.isFullScreen) {
+      this.toggleFullScreen(false)
+    }
+  }
+
   toggleFullScreen = (nextFullScreenState?) => {
     const nextState = nextFullScreenState === undefined ? !this.isFullScreen : nextFullScreenState
     if (nextState) {