fix(h5 video): create video context (#7605)

* fix: allow single test * fix: createVideoContext * docs: type comments * fix: bugs * fix(component): video component upload with test * fix: debounce on fullscreen events * fix: compatible for video api Co-authored-by: ZakaryCode <[email protected]>
NervJS · Oct 17, 2020 · 39e36fa · 39e36fa
1 parent bdd3312
commit 39e36fa
Show file tree

Hide file tree

Showing 26 changed files with 2,314 additions and 2,055 deletions.
diff --git a/packages/babel-preset-taro/yarn.lock b/packages/babel-preset-taro/yarn.lock
diff --git a/packages/eslint-config-taro/yarn.lock b/packages/eslint-config-taro/yarn.lock
@@ -9,12 +9,12 @@
   dependencies:
     "@babel/highlight" "^7.10.4"
 
-"@babel/generator@^7.11.5":
-  version "7.11.6"
-  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.11.6.tgz#b868900f81b163b4d464ea24545c61cbac4dc620"
-  integrity sha512-DWtQ1PV3r+cLbySoHrwn9RWEgKMBLLma4OBQloPRyDYvc5msJM9kvTLo1YnlJd1P/ZuKbdli3ijr5q3FvAF3uA==
+"@babel/generator@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.12.1.tgz#0d70be32bdaa03d7c51c8597dda76e0df1f15468"
+  integrity sha512-DB+6rafIdc9o72Yc3/Ph5h+6hUjeOp66pF0naQBgUFFuPqzQwIlPTm3xZR7YNvduIMtkDIj2t21LSQwnbCrXvg==
   dependencies:
-    "@babel/types" "^7.11.5"
+    "@babel/types" "^7.12.1"
     jsesc "^2.5.1"
     source-map "^0.5.0"
 
@@ -55,10 +55,10 @@
     chalk "^2.0.0"
     js-tokens "^4.0.0"
 
-"@babel/parser@^7.10.4", "@babel/parser@^7.11.5", "@babel/parser@^7.7.0":
-  version "7.11.5"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.11.5.tgz#c7ff6303df71080ec7a4f5b8c003c58f1cf51037"
-  integrity sha512-X9rD8qqm695vgmeaQ4fvz/o3+Wk4ZzQvSHkDBgpYKxpD4qTAUm88ZKtHkVqIOsYFFbIQ6wQYhC6q7pjqVK0E0Q==
+"@babel/parser@^7.10.4", "@babel/parser@^7.12.1", "@babel/parser@^7.7.0":
+  version "7.12.2"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.12.2.tgz#9d2fcf24cafe85333ab0aff9f26b81bba356004d"
+  integrity sha512-LMN+SqTiZEonUw4hQA0A3zG8DnN0E1F4K107LbDDUnC+0chML1rvWgsHloC9weB4RmZweE0uhFq0eGX7Nr/PBQ==
 
 "@babel/template@^7.10.4":
   version "7.10.4"
@@ -70,24 +70,24 @@
     "@babel/types" "^7.10.4"
 
 "@babel/traverse@^7.7.0":
-  version "7.11.5"
-  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.11.5.tgz#be777b93b518eb6d76ee2e1ea1d143daa11e61c3"
-  integrity sha512-EjiPXt+r7LiCZXEfRpSJd+jUMnBd4/9OUv7Nx3+0u9+eimMwJmG0Q98lw4/289JCoxSE8OolDMNZaaF/JZ69WQ==
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.12.1.tgz#941395e0c5cc86d5d3e75caa095d3924526f0c1e"
+  integrity sha512-MA3WPoRt1ZHo2ZmoGKNqi20YnPt0B1S0GTZEPhhd+hw2KGUzBlHuVunj6K4sNuK+reEvyiPwtp0cpaqLzJDmAw==
   dependencies:
     "@babel/code-frame" "^7.10.4"
-    "@babel/generator" "^7.11.5"
+    "@babel/generator" "^7.12.1"
     "@babel/helper-function-name" "^7.10.4"
     "@babel/helper-split-export-declaration" "^7.11.0"
-    "@babel/parser" "^7.11.5"
-    "@babel/types" "^7.11.5"
+    "@babel/parser" "^7.12.1"
+    "@babel/types" "^7.12.1"
     debug "^4.1.0"
     globals "^11.1.0"
     lodash "^4.17.19"
 
-"@babel/types@^7.10.4", "@babel/types@^7.11.0", "@babel/types@^7.11.5", "@babel/types@^7.7.0":
-  version "7.11.5"
-  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.11.5.tgz#d9de577d01252d77c6800cee039ee64faf75662d"
-  integrity sha512-bvM7Qz6eKnJVFIn+1LPtjlBFPVN5jNDc1XmN15vWe7Q3DPBufWWsLiIvUu7xW87uTG6QoggpIDnUgLQvPheU+Q==
+"@babel/types@^7.10.4", "@babel/types@^7.11.0", "@babel/types@^7.12.1", "@babel/types@^7.7.0":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.12.1.tgz#e109d9ab99a8de735be287ee3d6a9947a190c4ae"
+  integrity sha512-BzSY3NJBKM4kyatSOWh3D/JJ2O3CVzBybHWxtgxnggaxEuaSTTDqeiSb/xk9lrkw2Tbqyivw5ZU4rT+EfznQsA==
   dependencies:
     "@babel/helper-validator-identifier" "^7.10.4"
     lodash "^4.17.19"
@@ -369,9 +369,9 @@ to-fast-properties@^2.0.0:
   integrity sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=
 
 tslib@^1.8.1:
-  version "1.13.0"
-  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.13.0.tgz#c881e13cc7015894ed914862d276436fa9a47043"
-  integrity sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q==
+  version "1.14.1"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
+  integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
 tsutils@^3.17.1:
   version "3.17.1"

diff --git a/packages/taro-cli/yarn.lock b/packages/taro-cli/yarn.lock
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 = 20000
-
-// 此文件只要 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'
@@ -106,7 +107,9 @@ 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)

diff --git a/packages/taro-components/src/components.d.ts b/packages/taro-components/src/components.d.ts
@@ -299,6 +299,10 @@ export namespace Components {
     */
     'enableProgressGesture': boolean;
     /**
+    * 退出全屏
+    */
+    'exitFullScreen': () => Promise<void>;
+    /**
     * 指定视频初始播放位置
     */
     'initialTime': number;
@@ -315,10 +319,26 @@ export namespace Components {
     */
     'objectFit': 'contain' | 'fill' | 'cover';
     /**
+    * 暂停视频
+    */
+    'pause': () => Promise<void>;
+    /**
+    * 播放视频
+    */
+    'play': () => Promise<void>;
+    /**
     * 视频封面的图片网络资源地址或云文件ID（2.3.0）。若 controls 属性值为 false 则设置 poster 无效
     */
     'poster': string;
     /**
+    * 进入全屏。若有自定义内容需在全屏时展示，需将内容节点放置到 video 节点内。
+    */
+    'requestFullScreen': () => Promise<void>;
+    /**
+    * 跳转到指定位置
+    */
+    'seek': (position: number) => Promise<void>;
+    /**
     * 是否显示视频中间的播放按钮
     */
     'showCenterPlayBtn': boolean;
@@ -334,12 +354,19 @@ export namespace Components {
     * 是否显示视频底部控制栏的播放按钮
     */
     'showPlayBtn': boolean;
+    /**
+    * 若不设置，宽度大于 240 时才会显示
+    */
     'showProgress': boolean;
     /**
     * 要播放视频的资源地址
     */
     'src': string;
     /**
+    * 停止视频
+    */
+    'stop': () => Promise<void>;
+    /**
     * 在非全屏模式下，是否开启亮度与音量调节手势
     */
     'vslideGesture': boolean;
@@ -1002,6 +1029,9 @@ declare namespace LocalJSX {
     * 是否显示视频底部控制栏的播放按钮
     */
     'showPlayBtn'?: boolean;
+    /**
+    * 若不设置，宽度大于 240 时才会显示
+    */
     'showProgress'?: boolean;
     /**
     * 要播放视频的资源地址

diff --git a/packages/taro-components/src/components/video/style/index.scss b/packages/taro-components/src/components/video/style/index.scss
@@ -23,7 +23,7 @@
   top: 0;
   left: 0;
   overflow: hidden;
-  object-position: inherit
+  object-position: inherit;
 }
 
 .taro-video-container.taro-video-type-fullscreen {
@@ -104,7 +104,7 @@
   -webkit-align-items: center;
   align-items: center;
   padding: 0 10px;
-  z-index: 0
+  z-index: 1;
 }
 
 .taro-video-bar.taro-video-bar-full {

diff --git a/packages/taro-components/src/components/video/utils.js b/packages/taro-components/src/components/video/utils.js
@@ -23,3 +23,72 @@ export const throttle = (fn, threshhold) => {
     }
   }
 }
+
+/**
+ * @returns: {requestFullscreen: 'requestFullscreen', exitFullscreen: 'exitFullscreen', ...}
+ */
+export const screenFn = (function () {
+  let val
+  const fnMap = [
+    [
+      'requestFullscreen',
+      'exitFullscreen',
+      'fullscreenElement',
+      'fullscreenEnabled',
+      'fullscreenchange',
+      'fullscreenerror'
+    ],
+    // New WebKit
+    [
+      'webkitRequestFullscreen',
+      'webkitExitFullscreen',
+      'webkitFullscreenElement',
+      'webkitFullscreenEnabled',
+      'webkitfullscreenchange',
+      'webkitfullscreenerror'
+
+    ],
+    // Old WebKit
+    [
+      'webkitRequestFullScreen',
+      'webkitCancelFullScreen',
+      'webkitCurrentFullScreenElement',
+      'webkitCancelFullScreen',
+      'webkitfullscreenchange',
+      'webkitfullscreenerror'
+    ],
+    [
+      'mozRequestFullScreen',
+      'mozCancelFullScreen',
+      'mozFullScreenElement',
+      'mozFullScreenEnabled',
+      'mozfullscreenchange',
+      'mozfullscreenerror'
+    ],
+    [
+      'msRequestFullscreen',
+      'msExitFullscreen',
+      'msFullscreenElement',
+      'msFullscreenEnabled',
+      'MSFullscreenChange',
+      'MSFullscreenError'
+    ]
+  ]
+
+  let i = 0
+  const l = fnMap.length
+  const ret = {}
+  // This for loop essentially checks the current document object for the property/methods above.
+  for (; i < l; i++) {
+    val = fnMap[i]
+    if (val && val[1] in document) {
+      for (i = 0; i < val.length; i++) {
+        ret[fnMap[0][i]] = val[i]
+      }
+      return ret
+    }
+  }
+  // If it doesn't find any of them, this whole function returns false
+  // and the fn variable is set to this returned value.
+  return ret
+})()