From 4399b87e075f0c43cb3b09fae380bfaddab39feb Mon Sep 17 00:00:00 2001 From: allenou Date: Fri, 11 Dec 2020 08:27:42 +0800 Subject: [PATCH 01/79] =?UTF-8?q?docs:=20=E4=BF=AE=E5=A4=8D=20readme=20?= =?UTF-8?q?=E7=89=B9=E5=88=AB=E9=B8=A3=E8=B0=A2=E4=B8=AD=E5=A4=B4=E5=83=8F?= =?UTF-8?q?=E8=B6=85=E9=93=BE=E4=B8=8E=E6=9C=AC=E4=BA=BA=E4=B8=8D=E4=B8=80?= =?UTF-8?q?=E8=87=B4=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 2da142420318..3a3416ac3997 100644 --- a/README.md +++ b/README.md @@ -130,7 +130,7 @@ Taro 非常欢迎社区开发者为 Taro 贡献代码，在贡献之前请先阅 ## 特别鸣谢 -[![nanjingboy](https://avatars1.githubusercontent.com/u/1390888?s=100&v=4)](https://github.com/nanjingboy/) | [![jsNewbee](https://avatars3.githubusercontent.com/u/20449400?s=100&v=4)](https://github.com/js-newbee/) | [![Qiyu8](https://avatars2.githubusercontent.com/u/15245051?s=100&v=4)](https://github.com/Qiyu8/) | [![Garfield550](https://avatars2.githubusercontent.com/u/3471836?s=100&v=4)](https://github.com/Qiyu8/) +[![nanjingboy](https://avatars1.githubusercontent.com/u/1390888?s=100&v=4)](https://github.com/nanjingboy/) | [![jsNewbee](https://avatars3.githubusercontent.com/u/20449400?s=100&v=4)](https://github.com/js-newbee/) | [![Qiyu8](https://avatars2.githubusercontent.com/u/15245051?s=100&v=4)](https://github.com/Qiyu8/) | [![Garfield550](https://avatars2.githubusercontent.com/u/3471836?s=100&v=4)](https://github.com/Garfield550/) :---:|:---:|:---:|:---: [nanjingboy](https://github.com/nanjingboy/) | [jsNewbee](https://github.com/js-newbee/) | [Qiyu8](https://github.com/Qiyu8/) | [Garfield Lee](https://github.com/Garfield550/) From ac7266d98eab6173b55588d156674c21be3afa7d Mon Sep 17 00:00:00 2001 From: luckyadam Date: Wed, 9 Dec 2020 16:10:40 +0800 Subject: [PATCH 02/79] =?UTF-8?q?chore(cli):=20=E8=B0=83=E6=95=B4=20taro?= =?UTF-8?q?=20=E6=94=AF=E6=8C=81=E7=9A=84=20node=20=E6=9C=80=E4=BD=8E?= =?UTF-8?q?=E7=89=88=E6=9C=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/taro-cli/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/taro-cli/package.json b/packages/taro-cli/package.json index 1a09c10b77df..293ab1a50e48 100644 --- a/packages/taro-cli/package.json +++ b/packages/taro-cli/package.json @@ -38,7 +38,7 @@ "weapp" ], "engines": { - "node": ">=8" + "node": ">=12" }, "author": "O2Team", "license": "MIT", From 6f3456c6c8e2603d773f988df5291a0d29bb3f9c Mon Sep 17 00:00:00 2001 From: atzcl Date: Fri, 11 Dec 2020 21:21:33 +0800 Subject: [PATCH 03/79] feat(taro-runtime): consistent window object (#8105) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat(taro-runtime): consistent window object * fix(taro-runtime): 避免错误的覆盖 * refactor(taro-runtime): replace Reflect.ownKeys Co-authored-by: chenjiajian <798095202@qq.com> --- packages/taro-runtime/src/bom/window.ts | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/packages/taro-runtime/src/bom/window.ts b/packages/taro-runtime/src/bom/window.ts index 71a493e47c6c..a8ebf2908c0b 100644 --- a/packages/taro-runtime/src/bom/window.ts +++ b/packages/taro-runtime/src/bom/window.ts @@ -9,10 +9,21 @@ export const window = isBrowser ? win : { document } +if (!isBrowser) { + const globalProperties = [ + ...Object.getOwnPropertyNames(global || win), + ...Object.getOwnPropertySymbols(global || win) + ] + + globalProperties.forEach(property => { + if (!Object.prototype.hasOwnProperty.call(window, property)) { + window[property] = global[property] + } + }) +} + if (process.env.TARO_ENV !== 'h5') { (window as any).requestAnimationFrame = raf; (window as any).cancelAnimationFrame = caf; - (window as any).Date = Date; - (window as any).setTimeout = setTimeout; (window as any).getComputedStyle = getComputedStyle } From e07b9ff5412a00d0a52057cb99a571eb554c8237 Mon Sep 17 00:00:00 2001 From: zhaogw Date: Tue, 17 Nov 2020 09:45:03 +0800 Subject: [PATCH 04/79] =?UTF-8?q?fix(h5):=20=E4=BF=AE=E5=A4=8Dh5=E4=B8=8B?= =?UTF-8?q?=E7=9A=84pageScrollTo=E5=87=BD=E6=95=B0=E7=9A=84selector?= =?UTF-8?q?=E5=8F=82=E6=95=B0=E6=94=AF=E6=8C=81=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/taro-h5/src/api/scroll/index.js | 22 +++++++++++++++++----- 1 file changed, 17 insertions(+), 5 deletions(-) diff --git a/packages/taro-h5/src/api/scroll/index.js b/packages/taro-h5/src/api/scroll/index.js index 85e2a41e86d4..b41eb2872e0b 100644 --- a/packages/taro-h5/src/api/scroll/index.js +++ b/packages/taro-h5/src/api/scroll/index.js @@ -3,6 +3,7 @@ import { getTimingFunc, easeInOut } from '../utils/index' /** * @typedef {object} PageScrollToParam pageScrollTo参数 * @property {number} scrollTop 滚动到页面的目标位置，单位 px + * @property {string} selector 选择器, css selector * @property {number} [duration=300] 滚动动画的时长，单位 ms * @property {function} [success] 接口调用成功的回调函数 * @property {function} [fail] 接口调用失败的回调函数 @@ -17,13 +18,21 @@ const FRAME_DURATION = 17 * 将页面滚动到目标位置 * @param {PageScrollToParam} object 参数 */ -export const pageScrollTo = ({ scrollTop, duration = 300, success, fail, complete }) => { +export const pageScrollTo = ({ scrollTop, selector, duration = 300, success, fail, complete }) => { return new Promise((resolve, reject) => { try { - if (scrollTop === undefined) { - throw Error('"scrollTop" is required') + if (!scrollTop && !selector) { + throw Error('"scrollTop" 或 "selector" 需要其之一') + } + + let el + if (document.querySelector('.taro-tabbar__tabbar') === null) { + // 没设置tabbar + el = window + } else { + // 有设置tabbar + el = document.querySelector('.taro-tabbar__panel') } - const el = document.querySelector('.taro-tabbar__panel') || window if (!scrollFunc) { if (el === window) { @@ -45,8 +54,11 @@ export const pageScrollTo = ({ scrollTop, duration = 300, success, fail, complet } } + if (scrollTop && selector) { + console.warn('"scrollTop" 或 "selector" 建议只设一个值，全部设置会忽略selector') + } const from = scrollFunc() - const to = scrollTop + const to = scrollTop || document.querySelector(selector).offsetTop const delta = to - from const frameCnt = duration / FRAME_DURATION From ed0f9d915d46eb3e65f866612b9ce51de72255f5 Mon Sep 17 00:00:00 2001 From: ZakaryCode Date: Sat, 12 Dec 2020 15:30:27 +0800 Subject: [PATCH 05/79] fix(components): pull to refresh api error --- .../pull-down-refresh/pull-to-refresh.tsx | 10 +++++- packages/taro-h5/src/api/scroll/index.js | 2 +- packages/taro-h5/src/api/utils/index.js | 32 ------------------- 3 files changed, 10 insertions(+), 34 deletions(-) diff --git a/packages/taro-components/src/components/pull-down-refresh/pull-to-refresh.tsx b/packages/taro-components/src/components/pull-down-refresh/pull-to-refresh.tsx index 17d999171da7..40b9ac78eeef 100644 --- a/packages/taro-components/src/components/pull-down-refresh/pull-to-refresh.tsx +++ b/packages/taro-components/src/components/pull-down-refresh/pull-to-refresh.tsx @@ -56,7 +56,15 @@ export class PullToRefresh implements ComponentInterface { private _isMounted = false; - private scrollContainer = document.querySelector('.taro-tabbar__panel') || document.body + private get scrollContainer () { + if (document.querySelector('.taro-tabbar__tabbar') === null) { + // 没设置tabbar + return window + } else { + // 有设置tabbar + return document.querySelector('.taro-tabbar__panel') || window + } + } @Watch('currSt') statusChange () { diff --git a/packages/taro-h5/src/api/scroll/index.js b/packages/taro-h5/src/api/scroll/index.js index b41eb2872e0b..bb2b13ae5795 100644 --- a/packages/taro-h5/src/api/scroll/index.js +++ b/packages/taro-h5/src/api/scroll/index.js @@ -31,7 +31,7 @@ export const pageScrollTo = ({ scrollTop, selector, duration = 300, success, fai el = window } else { // 有设置tabbar - el = document.querySelector('.taro-tabbar__panel') + el = document.querySelector('.taro-tabbar__panel') || window } if (!scrollFunc) { diff --git a/packages/taro-h5/src/api/utils/index.js b/packages/taro-h5/src/api/utils/index.js index 0288b0492a54..d2d082389680 100644 --- a/packages/taro-h5/src/api/utils/index.js +++ b/packages/taro-h5/src/api/utils/index.js @@ -185,37 +185,6 @@ const createCallbackManager = () => { } } -const createScroller = () => { - const el = document.querySelector('.taro-tabbar__panel') || window - - const getScrollHeight = el === window - ? () => document.documentElement.scrollHeight - : () => el.scrollHeight - - const getPos = el === window - ? () => window.pageYOffset - : () => el.scrollTop - - const getClientHeight = el === window - ? () => window.screen.height - : () => el.clientHeight - - const listen = callback => { - el.addEventListener('scroll', callback) - document.body.addEventListener('touchmove', callback) - } - const unlisten = callback => { - el.removeEventListener('scroll', callback) - document.body.removeEventListener('touchmove', callback) - } - - const isReachBottom = (distance = 0) => { - return getScrollHeight() - getPos() - getClientHeight() < distance - } - - return { listen, unlisten, getPos, isReachBottom } -} - function processOpenapi (apiName, defaultOptions, formatResult = res => res, formatParams = options => options) { if (!window.wx) { return weixinCorpSupport(apiName) @@ -268,7 +237,6 @@ export { isValidColor, isFunction, createCallbackManager, - createScroller, processOpenapi, easeInOut, getTimingFunc From 54172bbbf793fc51783bda2675590c83c721d5df Mon Sep 17 00:00:00 2001 From: ZakaryCode Date: Sat, 12 Dec 2020 16:17:25 +0800 Subject: [PATCH 06/79] fix(h5): fix h5 api about get canvas --- packages/taro-h5/src/api/canvas/canvasGetImageData.js | 4 ++-- packages/taro-h5/src/api/canvas/canvasPutImageData.js | 4 ++-- packages/taro-h5/src/api/canvas/canvasToTempFilePath.js | 2 +- packages/taro-h5/src/api/canvas/createCanvasContext.js | 2 +- 4 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/taro-h5/src/api/canvas/canvasGetImageData.js b/packages/taro-h5/src/api/canvas/canvasGetImageData.js index dd02cf7c847e..6614e2a81cdf 100644 --- a/packages/taro-h5/src/api/canvas/canvasGetImageData.js +++ b/packages/taro-h5/src/api/canvas/canvasGetImageData.js @@ -16,9 +16,9 @@ import { findDOM } from '../utils/index' * 获取 canvas 区域隐含的像素数据。 * @param {Param} object 参数 */ -const canvasGetImageData = ({ canvasId, success, fail, complete, x, y, width, height }, inst) => { +const canvasGetImageData = ({ canvasId, success, fail, complete, x, y, width, height }, inst) => { /** @type {HTMLCanvasElement} */ - const canvas = findDOM(inst).querySelector(`[canvasId=${canvasId}]`) + const canvas = findDOM(inst).querySelector(`canvas[canvas-id="${canvasId}"]`) try { const ctx = canvas.getContext('2d') diff --git a/packages/taro-h5/src/api/canvas/canvasPutImageData.js b/packages/taro-h5/src/api/canvas/canvasPutImageData.js index daf419d3d5e6..68f3940349af 100644 --- a/packages/taro-h5/src/api/canvas/canvasPutImageData.js +++ b/packages/taro-h5/src/api/canvas/canvasPutImageData.js @@ -18,9 +18,9 @@ import { findDOM } from '../utils/index' * @param {Param} object 参数 * @todo 暂未支持尺寸相关功能 */ -const canvasPutImageData = ({ canvasId, data, x, y, success, fail, complete }, inst) => { +const canvasPutImageData = ({ canvasId, data, x, y, success, fail, complete }, inst) => { /** @type {HTMLCanvasElement} */ - const canvas = findDOM(inst).querySelector(`[canvasId=${canvasId}]`) + const canvas = findDOM(inst).querySelector(`canvas[canvas-id="${canvasId}"]`) try { const ctx = canvas.getContext('2d') diff --git a/packages/taro-h5/src/api/canvas/canvasToTempFilePath.js b/packages/taro-h5/src/api/canvas/canvasToTempFilePath.js index b24d2f19ff4e..fa2d6c9e21fc 100644 --- a/packages/taro-h5/src/api/canvas/canvasToTempFilePath.js +++ b/packages/taro-h5/src/api/canvas/canvasToTempFilePath.js @@ -23,7 +23,7 @@ import { findDOM } from '../utils/index' */ const canvasToTempFilePath = ({ canvasId, fileType, quality, success, fail, complete }) => { /** @type {HTMLCanvasElement} */ - const canvas = findDOM().querySelector(`[canvasId=${canvasId}]`) + const canvas = findDOM().querySelector(`canvas[canvas-id="${canvasId}"]`) try { // /** @type {CanvasRenderingContext2D} */ diff --git a/packages/taro-h5/src/api/canvas/createCanvasContext.js b/packages/taro-h5/src/api/canvas/createCanvasContext.js index cf5ac6036e5e..38580d38a920 100644 --- a/packages/taro-h5/src/api/canvas/createCanvasContext.js +++ b/packages/taro-h5/src/api/canvas/createCanvasContext.js @@ -6,7 +6,7 @@ import { findDOM } from '../utils/index' */ const createCanvasContext = (canvasId, inst) => { /** @type {HTMLCanvasElement} */ - const canvas = findDOM(inst).querySelector(`canvas[canvas-id=${canvasId}]`) + const canvas = findDOM(inst).querySelector(`canvas[canvas-id="${canvasId}"]`) /** @type {CanvasRenderingContext2D} */ const ctx = canvas.getContext('2d') From 0abf111331acdfe3e58d87706012ec90c4cf3476 Mon Sep 17 00:00:00 2001 From: ZeroToOne Date: Tue, 24 Nov 2020 10:10:51 +0800 Subject: [PATCH 07/79] fix(taro-components): fix radio component disabled property doesn't work in h5 environment (#8017) --- packages/taro-components/src/components.d.ts | 2 ++ packages/taro-components/src/components/radio/radio.tsx | 5 ++++- packages/taro-components/types/components.d.ts | 2 ++ 3 files changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/taro-components/src/components.d.ts b/packages/taro-components/src/components.d.ts index 2125c19e443d..1f5c04f29225 100644 --- a/packages/taro-components/src/components.d.ts +++ b/packages/taro-components/src/components.d.ts @@ -139,6 +139,7 @@ export namespace Components { } interface TaroRadioCore { 'checked': boolean; + 'disabled': boolean; 'id': string; 'name': string; 'value': string; @@ -816,6 +817,7 @@ declare namespace LocalJSX { interface TaroRadioCore { 'checked'?: boolean; 'id'?: string; + 'disabled'?: boolean; 'name'?: string; 'onRadiochange'?: (event: CustomEvent) => void; 'value'?: string; diff --git a/packages/taro-components/src/components/radio/radio.tsx b/packages/taro-components/src/components/radio/radio.tsx index 68b03c323bb6..0aea54a91b15 100644 --- a/packages/taro-components/src/components/radio/radio.tsx +++ b/packages/taro-components/src/components/radio/radio.tsx @@ -10,6 +10,7 @@ export class Radio implements ComponentInterface { @Prop() value = '' @Prop({ mutable: true }) id: string @Prop({ mutable: true }) checked = false + @Prop() disabled: boolean = false @Element() el: HTMLElement @@ -33,11 +34,12 @@ export class Radio implements ComponentInterface { } handleClick = () => { + if (this.disabled) return if (!this.checked) this.checked = true } render () { - const { checked, name, value } = this + const { checked, name, value, disabled } = this return ( e.stopPropagation()} /> diff --git a/packages/taro-components/types/components.d.ts b/packages/taro-components/types/components.d.ts index 72e676827bdb..752f66791069 100644 --- a/packages/taro-components/types/components.d.ts +++ b/packages/taro-components/types/components.d.ts @@ -139,6 +139,7 @@ export namespace Components { } interface TaroRadioCore { 'checked': boolean; + 'disabled': boolean; 'id': string; 'name': string; 'value': string; @@ -815,6 +816,7 @@ declare namespace LocalJSX { } interface TaroRadioCore { 'checked'?: boolean; + 'disabled'?: boolean; 'id'?: string; 'name'?: string; 'onRadiochange'?: (event: CustomEvent) => void; From 5cba119ae45d7a2082cb6f090dd70b9a07d439f8 Mon Sep 17 00:00:00 2001 From: ininit Date: Tue, 27 Oct 2020 10:14:08 +0800 Subject: [PATCH 08/79] =?UTF-8?q?fix(h5-canvas):=20=E4=BF=AE=E5=A4=8Dcanva?= =?UTF-8?q?sToTempFilePath=20=E8=8E=B7=E5=8F=96=E8=8A=82=E7=82=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/taro-h5/src/api/canvas/canvasToTempFilePath.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/taro-h5/src/api/canvas/canvasToTempFilePath.js b/packages/taro-h5/src/api/canvas/canvasToTempFilePath.js index b24d2f19ff4e..07398ce8024a 100644 --- a/packages/taro-h5/src/api/canvas/canvasToTempFilePath.js +++ b/packages/taro-h5/src/api/canvas/canvasToTempFilePath.js @@ -23,7 +23,7 @@ import { findDOM } from '../utils/index' */ const canvasToTempFilePath = ({ canvasId, fileType, quality, success, fail, complete }) => { /** @type {HTMLCanvasElement} */ - const canvas = findDOM().querySelector(`[canvasId=${canvasId}]`) + const canvas = findDOM().querySelector(`[canvas-id=${canvasId}]`) try { // /** @type {CanvasRenderingContext2D} */ From 12fb4c9e7b22c8a3043c94a9f7b8da6594c8d773 Mon Sep 17 00:00:00 2001 From: ininit Date: Tue, 27 Oct 2020 10:16:48 +0800 Subject: [PATCH 09/79] =?UTF-8?q?fix(h5-canvas):=20=E4=BF=AE=E5=A4=8D=20Ca?= =?UTF-8?q?nvas=20=E5=90=8C=E6=AD=A5=E6=96=B9=E6=B3=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/taro-h5/src/api/canvas/createCanvasContext.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/taro-h5/src/api/canvas/createCanvasContext.js b/packages/taro-h5/src/api/canvas/createCanvasContext.js index cf5ac6036e5e..b001aaebe0f2 100644 --- a/packages/taro-h5/src/api/canvas/createCanvasContext.js +++ b/packages/taro-h5/src/api/canvas/createCanvasContext.js @@ -165,9 +165,9 @@ const createCanvasContext = (canvasId, inst) => { ['clearRect'], ['clip'], ['closePath'], - ['createCircularGradient'], - ['createLinearGradient'], - ['createPattern'], + ['createCircularGradient', true], + ['createLinearGradient', true], + ['createPattern', true], ['drawImage'], ['fill'], ['fillRect'], From 2cab0134b9313b38fcaf62386510694bae0f2129 Mon Sep 17 00:00:00 2001 From: ininit Date: Mon, 2 Nov 2020 21:18:17 +0800 Subject: [PATCH 10/79] =?UTF-8?q?fix(h5-canvas):=20=E5=AE=8C=E5=96=84canva?= =?UTF-8?q?sToTempFilePath?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/taro-h5/src/api/canvas/canvasToTempFilePath.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/taro-h5/src/api/canvas/canvasToTempFilePath.js b/packages/taro-h5/src/api/canvas/canvasToTempFilePath.js index 07398ce8024a..c6a2a7ad83e1 100644 --- a/packages/taro-h5/src/api/canvas/canvasToTempFilePath.js +++ b/packages/taro-h5/src/api/canvas/canvasToTempFilePath.js @@ -21,9 +21,9 @@ import { findDOM } from '../utils/index' * @param {Param} object 参数 * @todo 暂未支持尺寸相关功能 */ -const canvasToTempFilePath = ({ canvasId, fileType, quality, success, fail, complete }) => { +const canvasToTempFilePath = ({ canvasId, fileType, quality, success, fail, complete }, inst) => { /** @type {HTMLCanvasElement} */ - const canvas = findDOM().querySelector(`[canvas-id=${canvasId}]`) + const canvas = findDOM(inst).querySelector(`[canvas-id=${canvasId}]`) try { // /** @type {CanvasRenderingContext2D} */ From 06ebb90215d479725153565834e44d72df505813 Mon Sep 17 00:00:00 2001 From: helsonxiao Date: Wed, 21 Oct 2020 20:16:22 +0800 Subject: [PATCH 11/79] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=20video=20metho?= =?UTF-8?q?ds?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../taro-components/__tests__/video.spec.js | 12 ++---- .../src/components/video/utils.js | 3 +- .../src/components/video/video.tsx | 41 ++++++------------- 3 files changed, 18 insertions(+), 38 deletions(-) diff --git a/packages/taro-components/__tests__/video.spec.js b/packages/taro-components/__tests__/video.spec.js index f59a741fa40b..41f73b28a6fc 100644 --- a/packages/taro-components/__tests__/video.spec.js +++ b/packages/taro-components/__tests__/video.spec.js @@ -106,37 +106,33 @@ 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('controls bar', async () => { diff --git a/packages/taro-components/src/components/video/utils.js b/packages/taro-components/src/components/video/utils.js index 49f05be3a043..acf4146e9412 100644 --- a/packages/taro-components/src/components/video/utils.js +++ b/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 })() diff --git a/packages/taro-components/src/components/video/video.tsx b/packages/taro-components/src/components/video/video.tsx index a89423011261..cb2136a31d06 100644 --- a/packages/taro-components/src/components/video/video.tsx +++ b/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 @@ -192,28 +191,6 @@ export class Video implements ComponentInterface { } 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) - } - } - } } @Watch('enableDanmu') @@ -438,14 +415,22 @@ 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) } } + // 全屏后，"点击按钮退出"走的是浏览器事件，在此同步状态 + @Listen('fullscreenchange') onNativeFullScreenExit (e) { + this.handleFullScreenChange(e) + } + + @Listen('webkitfullscreenchange') onWebkitFullScreenChange (e) { + this.handleFullScreenChange(e) + } + toggleFullScreen = (isFullScreen = !this.isFullScreen) => { this.isFullScreen = isFullScreen this.controlsRef.toggleVisibility(true) @@ -556,9 +541,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={p => this.seek(p)} showPlayBtn={this.showPlayBtn} showProgress={this.showProgress} > From 1010689bb70357bcef752709ff35c1edd8ab8d47 Mon Sep 17 00:00:00 2001 From: helsonxiao Date: Thu, 22 Oct 2020 09:44:47 +0800 Subject: [PATCH 12/79] fix: add more fullscreenchange --- .../taro-components/src/components/video/video.tsx | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/packages/taro-components/src/components/video/video.tsx b/packages/taro-components/src/components/video/video.tsx index cb2136a31d06..2f10d68f713e 100644 --- a/packages/taro-components/src/components/video/video.tsx +++ b/packages/taro-components/src/components/video/video.tsx @@ -416,14 +416,14 @@ export class Video implements ComponentInterface { } handleFullScreenChange = e => { + // 全屏后，"退出"走的是浏览器事件，在此同步状态 const timestamp = new Date().getTime() if (!e.detail && this.isFullScreen && !document[screenFn.fullscreenElement] && timestamp - this.fullScreenTimestamp > 100) { this.toggleFullScreen(false) } } - // 全屏后，"点击按钮退出"走的是浏览器事件，在此同步状态 - @Listen('fullscreenchange') onNativeFullScreenExit (e) { + @Listen('fullscreenchange') onNativeFullScreenChange (e) { this.handleFullScreenChange(e) } @@ -431,6 +431,14 @@ export class Video implements ComponentInterface { this.handleFullScreenChange(e) } + @Listen('mozfullscreenchange') onMozFullScreenChange (e) { + this.handleFullScreenChange(e) + } + + @Listen('MSFullscreenChange') onMSFullScreenChange (e) { + this.handleFullScreenChange(e) + } + toggleFullScreen = (isFullScreen = !this.isFullScreen) => { this.isFullScreen = isFullScreen this.controlsRef.toggleVisibility(true) From b67807464029c49f1f5ffabc76570b1122c843eb Mon Sep 17 00:00:00 2001 From: helsonxiao Date: Sat, 28 Nov 2020 00:54:38 +0800 Subject: [PATCH 13/79] =?UTF-8?q?test:=20=E5=A2=9E=E5=8A=A0=20control=20ba?= =?UTF-8?q?r=20test=20=E5=92=8C=20method=20test?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../taro-components/__tests__/test-tools.js | 8 ++ .../taro-components/__tests__/video.spec.js | 75 ++++++++++++++++++- .../src/components/video/video.tsx | 24 ++++-- 3 files changed, 98 insertions(+), 9 deletions(-) diff --git a/packages/taro-components/__tests__/test-tools.js b/packages/taro-components/__tests__/test-tools.js index f98c10fe31b8..abd7482f7d75 100644 --- a/packages/taro-components/__tests__/test-tools.js +++ b/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) diff --git a/packages/taro-components/__tests__/video.spec.js b/packages/taro-components/__tests__/video.spec.js index 41f73b28a6fc..9e755247daf0 100644 --- a/packages/taro-components/__tests__/video.spec.js +++ b/packages/taro-components/__tests__/video.spec.js @@ -135,7 +135,69 @@ describe('Video', () => { assert(video.requestFullscreen.callCount === 1) }) - it('controls bar', async () => { + it('should play', async () => { + const ref = React.createRef() + const app = ( +