PlayerTitleComponent.ets 2.11 KB
import { LiveDetailsBean, LiveRoomDataBean } from 'wdBean/Index'
import { NumberFormatterUtils } from 'wdKit/Index'

@Preview
@Component
export struct PlayerTitleComponent {
  @Consume liveDetailsBean: LiveDetailsBean
  @Consume liveRoomDataBean: LiveRoomDataBean
  @Consume liveState: string

  build() {
    Column() {
      Row() {
        Text(this.liveDetailsBean.newsTitle || '')
          .maxLines(2)
          .fontSize(16)
          .fontWeight(500)
          .fontColor(Color.White)
      }.margin({ bottom: 10 })

      Row() {
        this.getLiveStatusView()
      }

    }
    .width('100%')
    .alignItems(HorizontalAlign.Start)
    .padding({
      top: 12,
      left: 16
    })

  }

  @Builder
  getLiveStatusView() {
    if (this.liveDetailsBean.rmhInfo?.rmhName) {
      Row() {
        Image(this.liveDetailsBean.rmhInfo?.rmhHeadUrl || '')
          .width(24)
          .aspectRatio(1)
          .borderRadius(12)
          .fillColor(Color.Transparent)

        Text(this.liveDetailsBean.rmhInfo?.rmhName || '')
          .fontSize(12)
          .fontWeight(500)
          .fontColor(Color.White)
          .padding({
            top: 2,
            right: 8,
            left: 4,
            bottom: 2
          })
      }
      .backgroundColor('#4D000000')
      .borderRadius(2)
      .borderRadius({ topLeft: 12, bottomLeft: 12 })
      .margin({ right: 8 })
    }


    Row() {
      if (this.liveState == 'running') {
        Image($r('app.media.icon_live_status_running'))
          .width(22)
          .height(18)
          .margin({ right: 1 })
      }

      Text(this.liveState == 'running' ? '直播中' : '回看')
        .fontSize(11)
        .fontWeight(400)
        .fontColor(Color.White)
      Image($r('app.media.icon_live_player_status_end'))
        .width(12)
        .height(12)
      Text(`${NumberFormatterUtils.formatNumberWithWan(this.liveRoomDataBean.pv)}人参与`)
        .fontSize('11fp')
        .fontWeight(400)
        .fontColor(Color.White)
    }
    .backgroundColor('#4D000000')
    .borderRadius(2)
    .padding(this.liveState == 'running' ? { left: 0, right: 4, top: 0, bottom: 0 } : 4)
  }
}