@tarojs/plugin-platform-harmony-ets 4.0.0-beta.35 → 4.0.0-beta.37

package/dist/components-harmony-ets/style.ets

@@ -1,9 +1,55 @@
-import type { TaroAny, HarmonyStyle, TaroElement, TaroStyleType } from '@tarojs/runtime'
+import type { TaroAny, HarmonyStyle, TaroElement, TaroStyleType, TaroTextElement }  from '@tarojs/runtime'
 import { isUndefined } from '@tarojs/shared'
 import { computeBackgroundPosition } from './utils'
 import { getNormalAttributes } from './utils/helper'
 import { isMaxWidthView } from './utils/styles'
 
+class TextStyleModify implements AttributeModifier<TextAttribute> {
+  initStyle?: TaroStyleType
+  node: TaroTextElement | null = null
+  style: HarmonyStyle | null = null
+  overwriteStyle: Record<string, TaroAny> = {}
+  withNormal = false
+
+  withNormalStyle () {
+    this.withNormal = true
+    return this
+  }
+
+  setAnimationStyle (overwriteStyle: Record<string, TaroAny>) {
+    this.overwriteStyle = overwriteStyle
+
+    return this
+  }
+
+  setNode (node: TaroTextElement, initStyle?: HarmonyStyle) {
+    this.node = node
+    this.style = getNormalAttributes(this.node)
+    this.initStyle = initStyle
+    // 覆盖初始化样式
+    if (initStyle) {
+      Object.keys(initStyle).forEach(key => {
+        if (this.style && !this.style[key]) {
+          this.style[key] = initStyle[key]
+        }
+      })
+    }
+    return this
+  }
+
+  applyNormalAttribute(instance: TextAttribute): void {
+    if (this.node && this.style) {
+      if (this.withNormal) {
+        setNormalAttributeIntoInstance(instance, this.style, this.node)
+      }
+      setNormalTextAttributeIntoInstance(instance, this.style, this.node)
+      setSpecialTextAttributeIntoInstance(instance, this.style, this.node)
+    }
+
+    setAnimationAttributeIntoInstance(instance, this.overwriteStyle, this.style || {})
+  }
+}
+
 class CommonStyleModify implements AttributeModifier<CommonAttribute> {
   initStyle?: TaroStyleType
   node: TaroElement | null = null
@@ -55,7 +101,6 @@ class PseudoStyleModify implements AttributeModifier<CommonAttribute> {
   }
 }
 
-
 class RowStyleModify extends CommonStyleModify {
 
   applyNormalAttribute(instance: CommonAttribute): void {
@@ -89,7 +134,7 @@ class ColumnStyleModify extends CommonStyleModify {
   }
 }
 
-function setAnimationAttributeIntoInstance(instance: CommonAttribute, overwriteStyle: Record<string, TaroAny>, style: TaroStyleType) {
+export function setAnimationAttributeIntoInstance(instance: CommonAttribute, overwriteStyle: Record<string, TaroAny>, style: TaroStyleType) {
   // Animation 需要提前和 @State 变量绑定才能产生动画效果，因此不能做 if else 判断
   instance.translate({
     x: overwriteStyle.translate?.x || style.transform?.Translate?.x,
@@ -113,11 +158,64 @@ function setAnimationAttributeIntoInstance(instance: CommonAttribute, overwriteS
   })
 }
 
-function setNormalAttributeIntoInstance(instance: CommonAttribute, style: TaroStyleType, node?: TaroElement | null) {
+export function setNormalTextAttributeIntoInstance(instance: TextAttribute | SpanAttribute, style: HarmonyStyle, node?: TaroTextElement | null) {
+  if (!isUndefined(style.color)) {
+    instance.fontColor(style.color)
+  }
+  if (!isUndefined(style.fontSize)) {
+    instance.fontSize(style.fontSize)
+  }
+  if (!isUndefined(style.fontWeight)) {
+    instance.fontWeight(style.fontWeight)
+  }
+  if (!isUndefined(style.fontStyle)) {
+    instance.fontStyle(style.fontStyle)
+  }
+  if (!isUndefined(style.fontFamily)) {
+    instance.fontFamily(style.fontFamily)
+  }
+  if (!isUndefined(style.textDecoration)) {
+    instance.decoration({
+      type: style.textDecoration,
+      color: style.color
+    })
+  }
+}
+
+export function setSpecialTextAttributeIntoInstance(instance: TextAttribute, style: HarmonyStyle, node?: TaroTextElement | null) {
+  if (!isUndefined(style.textAlign)) {
+    instance.textAlign(style.textAlign)
+  }
+  if (!isUndefined(style.verticalAlign)) {
+    instance.align(style.verticalAlign)
+  }
+  if (!isUndefined(style.textOverflow)) {
+    instance.textOverflow(style.textOverflow)
+  }
+  if (!isUndefined(style.WebkitLineClamp)) {
+    instance.maxLines(style.WebkitLineClamp)
+  }
+  if (!isUndefined(style.letterSpacing)) {
+    instance.letterSpacing(style.letterSpacing)
+  }
+  if (!isUndefined(style.lineHeight)) {
+    instance.lineHeight(style.lineHeight)
+  }
+}
+
+export function setNormalAttributeIntoInstance(instance: CommonAttribute, style: TaroStyleType, node?: TaroElement | null) {
   if (!isUndefined(style.id)) {
     instance.id(style.id)
     instance.key(style.id)
   }
+  if (!isUndefined(style.display) || !isUndefined(style.visibility)) {
+    instance.visibility(style.display === 'none' 
+      ? Visibility.None : 
+      !isUndefined(style.visibility) 
+        ? (style.visibility === 'hidden' ? Visibility.Hidden :  Visibility.Visible)
+        : Visibility.Visible
+    )
+  }
   if (!isUndefined(style.flexGrow)) {
     instance.flexGrow(style.flexGrow)
   }
@@ -288,5 +386,6 @@ function setNormalAttributeIntoInstance(instance: CommonAttribute, style: TaroSt
 export const pseudoModify = new PseudoStyleModify()
 export const rowModify = new RowStyleModify()
 export const columnModify = new ColumnStyleModify()
+export const textModify = new TextStyleModify()
 
 export default new CommonStyleModify()

package/dist/components-harmony-ets/swiper.ets

@@ -53,25 +53,23 @@ export default struct TaroSwiper {
   }
 
   build () {
-    if (this.node.hmStyle?.display !== 'none') {
-      Swiper(this.node.controller) {
-        this.createLazyChildren(this.node)
-      }
-        .attributeModifier(commonStyleModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
-        .swiperAttr(getSwiperAttributes(this.node))
-        .indicatorStyle({
-          color: this.node.getAttribute('indicatorColor'),
-          selectedColor:  this.node.getAttribute('indicatorActiveColor')
-        })
-        .onChange((index: number) => {
-          const event: TaroEvent = createTaroEvent('change', { detail: { current: index } }, this.node)
-          eventHandler(event, 'change', this.node)
-        })
-        .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', this.node), this.node, ['click']))
-        .onAreaChange(getComponentEventCallback(this.node, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {
-          this.node._nodeInfo.areaInfo = res[1]
-        }))
-        .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
+    Swiper(this.node.controller) {
+      this.createLazyChildren(this.node)
     }
+      .attributeModifier(commonStyleModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
+      .swiperAttr(getSwiperAttributes(this.node))
+      .indicatorStyle({
+        color: this.node.getAttribute('indicatorColor'),
+        selectedColor:  this.node.getAttribute('indicatorActiveColor')
+      })
+      .onChange((index: number) => {
+        const event: TaroEvent = createTaroEvent('change', { detail: { current: index } }, this.node)
+        eventHandler(event, 'change', this.node)
+      })
+      .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', this.node), this.node, ['click']))
+      .onAreaChange(getComponentEventCallback(this.node, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {
+        this.node._nodeInfo.areaInfo = res[1]
+      }))
+      .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
   }
 }

package/dist/components-harmony-ets/switch.ets

@@ -42,33 +42,31 @@ export default struct TaroSwitch {
   }
 
   build () {
-    if (this.node && this.node.hmStyle?.display !== 'none') {
-      Toggle({
-        type: this.node._attrs.type !== 'checkbox' ? ToggleType.Switch : ToggleType.Checkbox,
-        isOn: this.node.checked,
-      })
-        .attributeModifier(commonStyleModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
-        .attrs(getAttributes(this.node))
-        .themeStyles(!!this.node._attrs.disabled)
-        .onChange((isOn: boolean) => {
-          if (this.node) {
-            if (!this.node?._attrs.disabled) {
-              const event: TaroEvent = createTaroEvent('change', { detail: { value: isOn } }, this.node)
+    Toggle({
+      type: this.node._attrs.type !== 'checkbox' ? ToggleType.Switch : ToggleType.Checkbox,
+      isOn: this.node.checked,
+    })
+      .attributeModifier(commonStyleModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
+      .attrs(getAttributes(this.node))
+      .themeStyles(!!this.node._attrs.disabled)
+      .onChange((isOn: boolean) => {
+        if (this.node) {
+          if (!this.node?._attrs.disabled) {
+            const event: TaroEvent = createTaroEvent('change', { detail: { value: isOn } }, this.node)
 
-              this.node.updateCheckedValue(isOn)
-              eventHandler(event, 'change', this.node)
-            } else {
-              this.node.updateComponent()
-            }
-          }
-        })
-        .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', this.node), this.node, ['click']))
-        .onAreaChange(getComponentEventCallback(this.node, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {
-          if (this.node) {
-            this.node._nodeInfo.areaInfo = res[1]
+            this.node.updateCheckedValue(isOn)
+            eventHandler(event, 'change', this.node)
+          } else {
+            this.node.updateComponent()
           }
-        }))
-        .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
-    }
+        }
+      })
+      .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', this.node), this.node, ['click']))
+      .onAreaChange(getComponentEventCallback(this.node, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {
+        if (this.node) {
+          this.node._nodeInfo.areaInfo = res[1]
+        }
+      }))
+      .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
   }
 }

package/dist/components-harmony-ets/text.ets

@@ -1,38 +1,13 @@
 import { isString } from '@tarojs/shared'
 import { eventHandler, convertNumber2VP, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBLE_CHANGE_EVENT_NAME, NodeType } from '@tarojs/runtime'
 
-import commonStyleModify from './style'
+import commonStyleModify, { textModify, setNormalTextAttributeIntoInstance } from './style'
 import { getButtonColor } from './button'
+import { getImageMode } from './image'
 import { BUTTON_THEME_COLOR } from './utils/constant/style'
-import { getNodeThresholds, getStyleAttr, getFontAttributes, shouldBindEvent, getNormalAttributes } from './utils/helper'
-
-import type { TaroButtonElement, TaroElement, TaroTextElement, TaroAny, TaroTextStyleType, TaroStyleType } from '@tarojs/runtime'
-
-@Extend(Text)
-function textNormalFontStyle (style: TaroStyleType) {
-  .id(style.id)
-  .key(style.id)
-  .opacity(style.opacity)
-  .fontColor(style.color)
-  .fontSize(style.fontSize)
-  .fontWeight(style.fontWeight)
-  .fontStyle(style.fontStyle)
-  .fontFamily(style.fontFamily)
-  .decoration({
-    type: style.textDecoration,
-    color: style.color
-  })
-}
+import { getNodeThresholds, getStyleAttr, shouldBindEvent, getNormalAttributes } from './utils/helper'
 
-@Extend(Text)
-function textSpecialFontStyle(attr: TaroTextStyleType) {
-  .textAlign(attr.textAlign)
-  .align(attr.verticalAlign)
-  .textOverflow(attr.textOverflow)
-  .maxLines(attr.WebkitLineClamp)
-  .letterSpacing(attr.letterSpacing)
-  .lineHeight(attr.lineHeight)
-}
+import type { TaroButtonElement, TaroElement, TaroTextElement, TaroAny, HarmonyStyle } from '@tarojs/runtime'
 
 function getButtonFontSize (node: TaroButtonElement): string | number {
   const isMini = node._attrs.size === 'mini'
@@ -51,6 +26,7 @@ function getTextInViewWidth (node: TaroElement | null): TaroAny {
   }
 }
 
+
 @Component
 export default struct TaroText {
   @Builder customBuilder() {}
@@ -69,30 +45,91 @@ export default struct TaroText {
       if (this.node.parentNode) {
         if ((this.node.parentNode as TaroElement).tagName === 'BUTTON') {
           Text(this.node.textContent)
-            .textNormalFontStyle(getNormalAttributes(this.node.parentElement!, {
+            .attributeModifier(textModify.setNode(this.node?.parentElement as TaroElement, {
               fontSize: getButtonFontSize(this.node.parentNode as TaroButtonElement),
               color: getButtonColor(this.node.parentNode as TaroButtonElement, BUTTON_THEME_COLOR.get((this.node.parentNode as TaroButtonElement)._attrs.type || '').text)
             }))
-            .textSpecialFontStyle(getFontAttributes(this.node.parentElement as TaroElement))
         } else {
           Text(this.node.textContent)
-            .textNormalFontStyle(getNormalAttributes(this.node.parentElement!))
-            .textSpecialFontStyle(getFontAttributes(this.node.parentElement as TaroElement))
+            .attributeModifier(textModify.setNode(this.node?.parentElement as TaroElement))
             .width(getTextInViewWidth(this.node.parentElement))
         }
       }
     } else {
-      if (this.node.hmStyle?.display !== 'none') {
-        Text(this.node.textContent)
-        .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', this.node), this.node, ['click']))
-        .attributeModifier(commonStyleModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
-        .textNormalFontStyle(getNormalAttributes(this.node))
-        .textSpecialFontStyle(getFontAttributes(this.node))
-        .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
-        .onAreaChange(getComponentEventCallback(this.node, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {
-          this.node._nodeInfo.areaInfo = res[1]
-        }))
+      Text(this.node.textContent) {
+        if (this.node.childNodes.length > 1) {
+          ForEach(this.node.childNodes, (item: TaroElement) => {
+            createTextChildNode(item, getSpanVerticalAlign(this.node.hmStyle?.verticalAlign))
+          }, (item: TaroElement) => item._nid)
+        }
       }
+      .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', this.node), this.node, ['click']))
+      .attributeModifier(textModify.setNode(this.node).withNormalStyle().setAnimationStyle(this.overwriteStyle))
+      .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
+      .onAreaChange(getComponentEventCallback(this.node, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {
+        this.node._nodeInfo.areaInfo = res[1]
+      }))
+    }
+  }
+}
+
+@Builder
+function createTextChildNode (item: TaroElement, align: ImageSpanAlignment) {
+  if (item.tagName === 'IMAGE') {
+    ImageSpan(item.getAttribute('src'))
+      .attributeModifier(commonStyleModify.setNode(item))
+      .objectFit(getImageMode(item.getAttribute('mode')))
+      .verticalAlign(align)
+      .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', item), item, ['click']))
+  } else if (item.nodeType === NodeType.TEXT_NODE) {
+    Span(item.textContent)
+  } else if (item.tagName === 'TEXT') {
+    Span(item.textContent)
+      .attributeModifier(spanModify.setNode(item))
+      .letterSpacing(item._st.hmStyle.letterSpacing)
+      .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', item), item, ['click']))
+  }
+}
+
+function getSpanVerticalAlign (verticalAlign?: Alignment) {
+  switch (verticalAlign) {
+    case Alignment.Start:
+    case Alignment.TopStart:
+    case Alignment.Top:
+    case Alignment.TopEnd: {
+      return ImageSpanAlignment.TOP
+    }
+    case Alignment.End:
+    case Alignment.BottomStart:
+    case Alignment.Bottom:
+    case Alignment.BottomEnd: {
+      return ImageSpanAlignment.BOTTOM
+    }
+    case Alignment.Center: {
+      return ImageSpanAlignment.CENTER
     }
   }
+  return ImageSpanAlignment.BASELINE
 }
+
+
+class SpanStyleModify implements AttributeModifier<SpanAttribute> {
+  node: TaroTextElement | null = null
+  style: HarmonyStyle | null = null
+  overwriteStyle: Record<string, TaroAny> = {}
+  withNormal = false
+
+  setNode (node: TaroTextElement) {
+    this.node = node
+    this.style = getNormalAttributes(this.node)
+    return this
+  }
+
+  applyNormalAttribute(instance: SpanAttribute): void {
+    if (this.node && this.style) {
+      setNormalTextAttributeIntoInstance(instance, this.style, this.node)
+    }
+  }
+}
+
+const spanModify = new SpanStyleModify()

package/dist/components-harmony-ets/textArea.ets

@@ -48,37 +48,35 @@ export default struct TaroTextArea {
   }
 
   build () {
-    if (this.node && this.node.hmStyle?.display !== 'none') {
-      TextArea({ text: this.value, placeholder: this.node._attrs?.placeholder || '', controller: this.node.controller })
-        .key(this.node._nid)
-        .maxLength(Number(this.node._attrs?.maxlength) || null)
-        .placeholderColor(getPlaceholderColor(this.node))
-        .attributeModifier(commonStyleModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
-        .textStyle(this.node?.hmStyle)
-        .textAttr(getFontAttributes(this.node))
-        .onChange((value: string) => {
-          const event: TaroEvent = createTaroEvent('input', { detail: { value } }, this.node)
+    TextArea({ text: this.value, placeholder: this.node._attrs?.placeholder || '', controller: this.node.controller })
+      .key(this.node._nid)
+      .maxLength(Number(this.node._attrs?.maxlength) || null)
+      .placeholderColor(getPlaceholderColor(this.node))
+      .attributeModifier(commonStyleModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
+      .textStyle(this.node?.hmStyle)
+      .textAttr(getFontAttributes(this.node))
+      .onChange((value: string) => {
+        const event: TaroEvent = createTaroEvent('input', { detail: { value } }, this.node)
 
-          this.value = value
-          this.node?.updateFormWidgetValue(value)
-          eventHandler(event, 'input', this.node)
-        })
-        .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', this.node), this.node, ['click']))
-        .onBlur(() => {
-          const event: TaroEvent = createTaroEvent('blur', { detail: { value: this.value } }, this.node)
-          eventHandler(event, 'blur', this.node)
-        })
-        .onFocus(() => {
-          const event: TaroEvent = createTaroEvent('focus', { detail: { value: this.value, height: this.node?._height } }, this.node)
+        this.value = value
+        this.node?.updateFormWidgetValue(value)
+        eventHandler(event, 'input', this.node)
+      })
+      .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', this.node), this.node, ['click']))
+      .onBlur(() => {
+        const event: TaroEvent = createTaroEvent('blur', { detail: { value: this.value } }, this.node)
+        eventHandler(event, 'blur', this.node)
+      })
+      .onFocus(() => {
+        const event: TaroEvent = createTaroEvent('focus', { detail: { value: this.value, height: this.node?._height } }, this.node)
 
-          eventHandler(event, 'focus', this.node)
-        })
-        .onAreaChange(getComponentEventCallback(this.node, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {
-          if (this.node) {
-            this.node._nodeInfo.areaInfo = res[1]
-          }
-        }))
-        .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
-    }
+        eventHandler(event, 'focus', this.node)
+      })
+      .onAreaChange(getComponentEventCallback(this.node, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {
+        if (this.node) {
+          this.node._nodeInfo.areaInfo = res[1]
+        }
+      }))
+      .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
   }
 }

package/dist/components-harmony-ets/video.ets

@@ -92,27 +92,25 @@ export default struct TaroVideo {
   }
 
   build () {
-    if (this.node.hmStyle?.display !== 'none') {
-      Video(getVideoData(this.node))
-      .attributeModifier(commonStyleModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
-      .props(getVideoProps(this.node))
-      .aspectRatio(4 / 3)
-      .onStart(shouldBindEvent(() => { emitEvent(this.node, 'play') }, this.node, ['play']))
-      .onPause(shouldBindEvent(() => { emitEvent(this.node, 'pause') }, this.node, ['pause']))
-      .onFinish(shouldBindEvent(() => { emitEvent(this.node, 'ended') }, this.node, ['ended']))
-      .onError(shouldBindEvent(() => { emitEvent(this.node, 'error') }, this.node, ['error']))
-      .onUpdate((e) => { handleUpdate(this.node, e) })
-      .onPrepared(shouldBindEvent((e: TaroAny) => { emitEvent(this.node, 'loadedMetaData', { duration: e.duration }) }, this.node, ['loadedmetadata']))
-      .onSeeking(shouldBindEvent((e: TaroAny) => { emitEvent(this.node, 'seeking', { duration: e.time }) }, this.node, ['seeking']))
-      .onSeeked(shouldBindEvent(() => { emitEvent(this.node, 'seeked') }, this.node, ['seeked']))
-      .onFullscreenChange(shouldBindEvent((e: TaroAny) => { emitEvent(this.node, 'fullScreenChange', { fullScreen: e.fullscreen}) }, this.node, ['fullscreenchange']))
-      .onClick((e: ClickEvent) => { eventHandler(e, 'click', this.node) })
-      .onTouch(shouldBindEvent((e: TouchEvent) => eventHandler(e, TOUCH_EVENT_MAP.get(e.type), this.node), this.node, TOUCH_EVENT_MAP.values()))
-      .onAreaChange(getComponentEventCallback(this.node, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {
-        this.node._nodeInfo.areaInfo = res[1]
-      }))
-      .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
-    }
+    Video(getVideoData(this.node))
+    .attributeModifier(commonStyleModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
+    .props(getVideoProps(this.node))
+    .aspectRatio(4 / 3)
+    .onStart(shouldBindEvent(() => { emitEvent(this.node, 'play') }, this.node, ['play']))
+    .onPause(shouldBindEvent(() => { emitEvent(this.node, 'pause') }, this.node, ['pause']))
+    .onFinish(shouldBindEvent(() => { emitEvent(this.node, 'ended') }, this.node, ['ended']))
+    .onError(shouldBindEvent(() => { emitEvent(this.node, 'error') }, this.node, ['error']))
+    .onUpdate((e) => { handleUpdate(this.node, e) })
+    .onPrepared(shouldBindEvent((e: TaroAny) => { emitEvent(this.node, 'loadedMetaData', { duration: e.duration }) }, this.node, ['loadedmetadata']))
+    .onSeeking(shouldBindEvent((e: TaroAny) => { emitEvent(this.node, 'seeking', { duration: e.time }) }, this.node, ['seeking']))
+    .onSeeked(shouldBindEvent(() => { emitEvent(this.node, 'seeked') }, this.node, ['seeked']))
+    .onFullscreenChange(shouldBindEvent((e: TaroAny) => { emitEvent(this.node, 'fullScreenChange', { fullScreen: e.fullscreen}) }, this.node, ['fullscreenchange']))
+    .onClick((e: ClickEvent) => { eventHandler(e, 'click', this.node) })
+    .onTouch(shouldBindEvent((e: TouchEvent) => eventHandler(e, TOUCH_EVENT_MAP.get(e.type), this.node), this.node, TOUCH_EVENT_MAP.values()))
+    .onAreaChange(getComponentEventCallback(this.node, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {
+      this.node._nodeInfo.areaInfo = res[1]
+    }))
+    .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
   }
 
 }

package/dist/components-harmony-ets/view.ets

@@ -22,42 +22,40 @@ export default struct TaroView {
   }
 
   build () {
-    if (this.node.hmStyle?.display !== 'none') {
-      if (FlexManager.isFlexNode(this.node) && FlexManager.flexOptions(this.node).direction !== FlexDirection.Column) {
-        Row() {
-          if (this.node._pseudo_before || this.node._pseudo_after) {
-            PseduoChildren({ node: this.node, createLazyChildren: this.createLazyChildren })
-          } else {
-            this.createLazyChildren(this.node)
-          }
+    if (FlexManager.isFlexNode(this.node) && FlexManager.flexOptions(this.node).direction !== FlexDirection.Column) {
+      Row() {
+        if (this.node._pseudo_before || this.node._pseudo_after) {
+          PseduoChildren({ node: this.node, createLazyChildren: this.createLazyChildren })
+        } else {
+          this.createLazyChildren(this.node)
         }
-        .attributeModifier(rowModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
-        .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', this.node), this.node, ['click']))
-        .onTouch(shouldBindEvent((e: TouchEvent) => eventHandler(e, TOUCH_EVENT_MAP.get(e.type), this.node), this.node, TOUCH_EVENT_MAP.values()))
-        .onAreaChange(getComponentEventCallback(this.node, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {
-          this.node._nodeInfo.areaInfo = res[1]
-        }))
-        .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
-        .alignItems(FlexManager.flexOptions(this.node).alignItems as VerticalAlign)
-        .justifyContent(FlexManager.flexOptions(this.node).justifyContent)
-      } else {
-        Column() {
-          if (this.node._pseudo_before || this.node._pseudo_after) {
-            PseduoChildren({ node: this.node, createLazyChildren: this.createLazyChildren })
-          } else {
-            this.createLazyChildren(this.node)
-          }
+      }
+      .attributeModifier(rowModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
+      .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', this.node), this.node, ['click']))
+      .onTouch(shouldBindEvent((e: TouchEvent) => eventHandler(e, TOUCH_EVENT_MAP.get(e.type), this.node), this.node, TOUCH_EVENT_MAP.values()))
+      .onAreaChange(getComponentEventCallback(this.node, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {
+        this.node._nodeInfo.areaInfo = res[1]
+      }))
+      .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
+      .alignItems(FlexManager.flexOptions(this.node).alignItems as VerticalAlign)
+      .justifyContent(FlexManager.flexOptions(this.node).justifyContent)
+    } else {
+      Column() {
+        if (this.node._pseudo_before || this.node._pseudo_after) {
+          PseduoChildren({ node: this.node, createLazyChildren: this.createLazyChildren })
+        } else {
+          this.createLazyChildren(this.node)
         }
-        .attributeModifier(columnModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
-        .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', this.node), this.node, ['click']))
-        .onTouch(shouldBindEvent((e: TouchEvent) => eventHandler(e, TOUCH_EVENT_MAP.get(e.type), this.node), this.node, TOUCH_EVENT_MAP.values()))
-        .onAreaChange(getComponentEventCallback(this.node, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {
-          this.node._nodeInfo.areaInfo = res[1]
-        }))
-        .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
-        .alignItems(FlexManager.flexOptions(this.node).alignItems as HorizontalAlign)
-        .justifyContent(FlexManager.flexOptions(this.node).justifyContent)
       }
+      .attributeModifier(columnModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
+      .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', this.node), this.node, ['click']))
+      .onTouch(shouldBindEvent((e: TouchEvent) => eventHandler(e, TOUCH_EVENT_MAP.get(e.type), this.node), this.node, TOUCH_EVENT_MAP.values()))
+      .onAreaChange(getComponentEventCallback(this.node, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {
+        this.node._nodeInfo.areaInfo = res[1]
+      }))
+      .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
+      .alignItems(FlexManager.flexOptions(this.node).alignItems as HorizontalAlign)
+      .justifyContent(FlexManager.flexOptions(this.node).justifyContent)
     }
   }
 }