Merge pull request #13295 from AdvancedCat/feat/channel-video

feat(weapp): 新增对 ChannelVideo 组件的支持

packages/taro-components-react/src/components/channel-live/index.tsx

@@ -0,0 +1,3 @@
+import './loader'
+
+export { ChannelLive as default } from '@tarojs/components/lib/react'

packages/taro-components-react/src/components/channel-live/loader.ts

@@ -0,0 +1,3 @@
+import { defineCustomElement } from '@tarojs/components/dist/components/taro-channel-live-core'
+
+defineCustomElement()

packages/taro-components-react/src/components/channel-video/index.tsx

@@ -0,0 +1,3 @@
+import './loader'
+
+export { ChannelVideo as default } from '@tarojs/components/lib/react'

packages/taro-components-react/src/components/channel-video/loader.ts

@@ -0,0 +1,3 @@
+import { defineCustomElement } from '@tarojs/components/dist/components/taro-channel-video-core'
+
+defineCustomElement()

packages/taro-components-react/src/index.ts

@@ -9,6 +9,8 @@ export { default as Block } from './components/block'
 export { default as Button } from './components/button'
 export { default as Camera } from './components/camera'
 export { default as Canvas } from './components/canvas'
+export { default as ChannelLive } from './components/channel-live'
+export { default as ChannelVideo } from './components/channel-video'
 export { Checkbox, CheckboxGroup } from './components/checkbox'
 export { CommentDetail, CommentList } from './components/comment'
 export { default as ContactButton } from './components/contact-button'

packages/taro-components/__tests__/channel-live.spec.tsx

@@ -0,0 +1,25 @@
+import { h } from '@stencil/core'
+import { newSpecPage, SpecPage } from '@stencil/core/testing'
+
+import { ChannelLive } from '../src/components/channel-live/channel-live'
+import { printUnimplementedWarning } from './utils'
+
+const logError = jest.fn()
+console.error = logError
+
+describe('ChannelLive', () => {
+  let page: SpecPage
+
+  it('unimplemented', async () => {
+    page = await newSpecPage({
+      components: [ChannelLive],
+      template: () => (<taro-channel-live-core />),
+    })
+    await page.waitForChanges()
+
+    expect(page.root).toEqualHtml(`
+      <taro-channel-live-core></taro-channel-live-core>
+    `)
+    expect(logError).toHaveBeenCalledWith(printUnimplementedWarning(page.root))
+  })
+})

packages/taro-components/__tests__/channel-video.spec.tsx

@@ -0,0 +1,25 @@
+import { h } from '@stencil/core'
+import { newSpecPage, SpecPage } from '@stencil/core/testing'
+
+import { ChannelVideo } from '../src/components/channel-video/channel-video'
+import { printUnimplementedWarning } from './utils'
+
+const logError = jest.fn()
+console.error = logError
+
+describe('ChannelVideo', () => {
+  let page: SpecPage
+
+  it('unimplemented', async () => {
+    page = await newSpecPage({
+      components: [ChannelVideo],
+      template: () => (<taro-channel-video-core />),
+    })
+    await page.waitForChanges()
+
+    expect(page.root).toEqualHtml(`
+      <taro-channel-video-core></taro-channel-video-core>
+    `)
+    expect(logError).toHaveBeenCalledWith(printUnimplementedWarning(page.root))
+  })
+})

packages/taro-components/__tests__/follow-swan.spec.tsx

@@ -7,7 +7,7 @@ import { printUnimplementedWarning } from './utils'
 const logError = jest.fn()
 console.error = logError
 
-describe('Ad', () => {
+describe('FollowSwan', () => {
   let page: SpecPage
 
   it('unimplemented', async () => {

packages/taro-components/src/components/channel-live/channel-live.tsx

@@ -0,0 +1,18 @@
+import { Component, ComponentInterface, h, Host } from '@stencil/core'
+
+import { notSupport } from '../../utils'
+
+@Component({
+  tag: 'taro-channel-live-core'
+})
+export class ChannelLive implements ComponentInterface {
+  componentDidLoad () {
+    notSupport('ChannelLive', this)
+  }
+
+  render () {
+    return (
+      <Host />
+    )
+  }
+}

packages/taro-components/src/components/channel-live/readme.md

@@ -0,0 +1,10 @@
+# taro-channel-live-core
+
+
+
+<!-- Auto Generated Below -->
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

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

@@ -0,0 +1,18 @@
+import { Component, ComponentInterface, h, Host } from '@stencil/core'
+
+import { notSupport } from '../../utils'
+
+@Component({
+  tag: 'taro-channel-video-core'
+})
+export class ChannelVideo implements ComponentInterface {
+  componentDidLoad () {
+    notSupport('ChannelVideo', this)
+  }
+
+  render () {
+    return (
+      <Host />
+    )
+  }
+}

packages/taro-components/src/components/channel-video/readme.md

@@ -0,0 +1,10 @@
+# taro-channel-video-core
+
+
+
+<!-- Auto Generated Below -->
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

packages/taro-components/types/ChannelVideo.d.ts

@@ -0,0 +1,50 @@
+import { ComponentType } from 'react'
+import { StandardProps, CommonEventFunction } from './common'
+interface ChannelVideoProps extends StandardProps {
+  /** 视频 feedId
+   * @supported weapp
+   */
+  feedId: string
+
+  /** 视频号 id，以“sph”开头的id，可在视频号助手获取。视频号必须与当前小程序相同主体。
+   * @supported weapp
+   */
+  finderUserName: string
+  /** 是否循环播放
+   * @supported weapp
+   * @default false
+   */
+  loop?: boolean
+
+  /** 是否静音播放
+   * @supported weapp
+   * @default false
+   */
+  muted?: boolean
+
+  /** 当视频大小与 video 容器大小不一致时，视频的表现形式
+   * @supported weapp
+   * @default "contain"
+   */
+  objectFit?: 'fill' | 'contain' | 'cover'
+
+  /** 是否自动播放
+   * @supported weapp
+   * @default false
+   */
+  autoplay?: boolean
+
+  /** 视频播放出错时触发
+   * @supported weapp
+   */
+  onError?: CommonEventFunction
+}
+
+/**
+ * 小程序内嵌视频号视频组件，支持在小程序中播放视频号视频，并无弹窗跳转至视频号。注意：使用该组件打开的视频号视频需要与小程序相同主体或关联主体。
+ * @classification media
+ * @supported weapp
+ * @see https://developers.weixin.qq.com/miniprogram/dev/component/channel-video.html
+ */
+declare const ChannelVideo: ComponentType<ChannelVideoProps>
+export { ChannelVideo, ChannelVideoProps }

packages/taro-components/types/index.d.ts

@@ -52,6 +52,7 @@ export { NavigationBar } from './NavigationBar'
 export { Audio } from './Audio'
 export { Camera } from './Camera'
 export { ChannelLive } from './ChannelLive'
+export { ChannelVideo } from './ChannelVideo'
 export { Image } from './Image'
 export { LivePlayer } from './LivePlayer'
 export { LivePusher } from './LivePusher'
@@ -76,3 +77,4 @@ export { PageMeta } from './PageMeta'
 
 export { CustomWrapper } from './CustomWrapper'
 export { Slot } from './Slot'
+export { NativeSlot } from './NativeSlot'

packages/taro-components/types/index.vue3.d.ts

@@ -13,36 +13,30 @@
 import * as CSS from 'csstype'
 import { DefineComponent, VNodeRef } from 'vue'
 
-/** 开放能力 */
 import { AdProps } from './Ad'
 import { AdCustomProps } from './AdCustom'
-/** 媒体组件 */
 import { AudioProps } from './Audio'
-/** 表单组件 */
 import { ButtonProps } from './Button'
 import { CameraProps } from './Camera'
-/** 画布 */
+import { ChannelLiveProps } from './ChannelLive'
+import { ChannelVideoProps } from './ChannelVideo'
 import { CanvasProps } from './Canvas'
 import { CheckboxProps } from './Checkbox'
 import { CheckboxGroupProps } from './CheckboxGroup'
 import { StandardProps } from './common'
-/** 视图容器 */
 import { CoverImageProps } from './CoverImage'
 import { CoverViewProps } from './CoverView'
 import { CustomWrapperProps } from './CustomWrapper'
 import { EditorProps } from './Editor'
 import { FormProps } from './Form'
-/** 导航 */
 import { FunctionalPageNavigatorProps } from './FunctionalPageNavigator'
-/** 基础内容 */
 import { IconProps } from './Icon'
 import { ImageProps } from './Image'
 import { InputProps } from './Input'
 import { KeyboardAccessoryProps } from './KeyboardAccessory'
 import { LabelProps } from './Label'
 import { LivePlayerProps } from './LivePlayer'
 import { LivePusherProps } from './LivePusher'
-/** 地图 */
 import { MapProps } from './Map'
 import { MatchMediaProps } from './MatchMedia'
 import { MovableAreaProps } from './MovableArea'
@@ -52,9 +46,11 @@ import { NavigatorProps } from './Navigator'
 import { OfficialAccountProps } from './OfficialAccount'
 import { OpenDataProps } from './OpenData'
 import { PageContainerProps } from './PageContainer'
-/** 配置节点 */
 import { PageMetaProps } from './PageMeta'
-import { PickerDateProps, PickerMultiSelectorProps,PickerRegionProps, PickerSelectorProps, PickerTimeProps } from './Picker'
+import {
+  PickerDateProps, PickerMultiSelectorProps,
+  PickerRegionProps, PickerSelectorProps, PickerTimeProps
+} from './Picker'
 import { PickerViewProps } from './PickerView'
 import { ProgressProps } from './Progress'
 import { RadioProps } from './Radio'
@@ -73,6 +69,9 @@ import { VideoProps } from './Video'
 import { ViewProps } from './View'
 import { VoipRoomProps } from './VoipRoom'
 import { WebViewProps } from './WebView'
+import { RootPortalProps } from './RootPortal'
+import { PickerViewColumnProps } from './PickerViewColumn'
+import { NativeSlotProps } from './NativeSlot'
 
 /** 联合类型不能用omit（比如picker） */
 type DistributiveOmit<T, K extends keyof T> = T extends unknown ? Omit<T, K> : never
@@ -100,7 +99,7 @@ export declare const MatchMedia: VueComponentType<MatchMediaProps>
 export declare const MovableArea: VueComponentType<MovableAreaProps>
 export declare const MovableView: VueComponentType<MovableViewProps>
 export declare const PageContainer: VueComponentType<PageContainerProps>
-export declare const RootPortal: VueComponentType
+export declare const RootPortal: VueComponentType<RootPortalProps>
 export declare const ScrollView: VueComponentType<ScrollViewProps>
 export declare const ShareElement: VueComponentType<ShareElementProps>
 export declare const Swiper: VueComponentType<SwiperProps>
@@ -122,7 +121,7 @@ export declare const KeyboardAccessory: VueComponentType<KeyboardAccessoryProps>
 export declare const Label: VueComponentType<LabelProps>
 export declare const Picker: VueComponentType<PickerMultiSelectorProps | PickerTimeProps | PickerDateProps | PickerRegionProps | PickerSelectorProps>
 export declare const PickerView: VueComponentType<PickerViewProps>
-export declare const PickerViewColumn: VueComponentType
+export declare const PickerViewColumn: VueComponentType<PickerViewColumnProps>
 export declare const Radio: VueComponentType<RadioProps>
 export declare const RadioGroup: VueComponentType<RadioGroupProps>
 export declare const Slider: VueComponentType<SliderProps>
@@ -135,6 +134,8 @@ export declare const NavigationBar: VueComponentType<NavigationBarProps>
 /** 媒体组件 */
 export declare const Audio: VueComponentType<AudioProps>
 export declare const Camera: VueComponentType<CameraProps>
+export declare const ChannelLive: VueComponentType<ChannelLiveProps>
+export declare const ChannelVideo: VueComponentType<ChannelVideoProps>
 export declare const Image: VueComponentType<ImageProps>
 export declare const LivePlayer: VueComponentType<LivePlayerProps>
 export declare const LivePusher: VueComponentType<LivePusherProps>
@@ -155,6 +156,7 @@ export declare const PageMeta: VueComponentType<PageMetaProps>
 
 export declare const CustomWrapper: VueComponentType<CustomWrapperProps>
 export declare const Slot: VueComponentType<SlotProps>
+export declare const NativeSlot: VueComponentType<NativeSlotProps>
 
 export type ReservedProps = {
   key?: string | number | symbol
@@ -183,8 +185,8 @@ declare global {
       'taro-movable-view-core': ElementAttrs<TransformReact2VueType<MovableViewProps>>
       'page-container': ElementAttrs<TransformReact2VueType<PageContainerProps>>
       'taro-page-container-core': ElementAttrs<TransformReact2VueType<PageContainerProps>>
-      'root-portal': ElementAttrs<TransformReact2VueType>
-      'taro-root-portal-core': ElementAttrs<TransformReact2VueType>
+      'root-portal': ElementAttrs<TransformReact2VueType<RootPortalProps>>
+      'taro-root-portal-core': ElementAttrs<TransformReact2VueType<RootPortalProps>>
       'scroll-view': ElementAttrs<TransformReact2VueType<ScrollViewProps>>
       'taro-scroll-view-core': ElementAttrs<TransformReact2VueType<ScrollViewProps>>
       'share-element': ElementAttrs<TransformReact2VueType<ShareElementProps>>
@@ -225,8 +227,8 @@ declare global {
       'taro-picker-core': ElementAttrs<TransformReact2VueType<PickerMultiSelectorProps | PickerTimeProps | PickerDateProps | PickerRegionProps | PickerSelectorProps>>
       'picker-view': ElementAttrs<TransformReact2VueType<PickerViewProps>>
       'taro-picker-view-core': ElementAttrs<TransformReact2VueType<PickerViewProps>>
-      'picker-view-column': ElementAttrs<TransformReact2VueType>
-      'taro-picker-view-column-core': ElementAttrs<TransformReact2VueType>
+      'picker-view-column': ElementAttrs<TransformReact2VueType<PickerViewColumnProps>>
+      'taro-picker-view-column-core': ElementAttrs<TransformReact2VueType<PickerViewColumnProps>>
       radio: ElementAttrs<TransformReact2VueType<RadioProps>>
       'taro-radio-core': ElementAttrs<TransformReact2VueType<RadioProps>>
       'radio-group': ElementAttrs<TransformReact2VueType<RadioGroupProps>>
@@ -249,6 +251,10 @@ declare global {
       'taro-audio-core': ElementAttrs<TransformReact2VueType<AudioProps>>
       camera: ElementAttrs<TransformReact2VueType<CameraProps>>
       'taro-camera-core': ElementAttrs<TransformReact2VueType<CameraProps>>
+      'channel-live': ElementAttrs<TransformReact2VueType<ChannelLiveProps>>
+      'taro-channel-live-core': ElementAttrs<TransformReact2VueType<ChannelLiveProps>>
+      'channel-video': ElementAttrs<TransformReact2VueType<ChannelVideoProps>>
+      'taro-channel-video-core': ElementAttrs<TransformReact2VueType<ChannelVideoProps>>
       image: ElementAttrs<TransformReact2VueType<ImageProps>>
       'taro-image-core': ElementAttrs<TransformReact2VueType<ImageProps>>
       'live-player': ElementAttrs<TransformReact2VueType<LivePlayerProps>>
@@ -285,6 +291,8 @@ declare global {
       /** 为了不与vue3模板默认的slot冲突，增加 Record<string, any> */
       'slot': ElementAttrs<TransformReact2VueType<SlotProps>> & Record<string, any>
       'taro-slot-core': ElementAttrs<TransformReact2VueType<SlotProps>>
+      'native-slot': ElementAttrs<TransformReact2VueType<NativeSlotProps>>
+      'taro-native-slot-core': ElementAttrs<TransformReact2VueType<NativeSlotProps>>
     }
   }
 }

packages/taro-mini-runner/src/__tests__/__snapshots__/babel.spec.ts.snap

@@ -423,6 +423,15 @@ require(\\"./taro\\");
             ChannelLive: {
                 feedId: _empty,
                 finderUserName: _empty
+            },
+            ChannelVideo: {
+                feedId: _empty,
+                finderUserName: _empty,
+                autoPlay: _false,
+                loop: _false,
+                muted: _false,
+                objectFit: \\"'contain'\\",
+                bindError: _empty
             }
         };
         var hostConfig = {

packages/taro-mini-runner/src/__tests__/__snapshots__/common-style.spec.ts.snap

@@ -423,6 +423,15 @@ require(\\"./taro\\");
             ChannelLive: {
                 feedId: _empty,
                 finderUserName: _empty
+            },
+            ChannelVideo: {
+                feedId: _empty,
+                finderUserName: _empty,
+                autoPlay: _false,
+                loop: _false,
+                muted: _false,
+                objectFit: \\"'contain'\\",
+                bindError: _empty
             }
         };
         var hostConfig = {

packages/taro-mini-runner/src/__tests__/__snapshots__/compiler-macros.spec.ts.snap

@@ -422,6 +422,15 @@ require(\\"./taro\\");
             ChannelLive: {
                 feedId: _empty,
                 finderUserName: _empty
+            },
+            ChannelVideo: {
+                feedId: _empty,
+                finderUserName: _empty,
+                autoPlay: _false,
+                loop: _false,
+                muted: _false,
+                objectFit: \\"'contain'\\",
+                bindError: _empty
             }
         };
         var hostConfig = {