CardMediaInfo.ets 2.91 KB
import { ContentDTO } from 'wdBean/Index'
import { DateTimeUtils } from 'wdKit/Index'

/**
 * 这里是样式卡中,右下角显示的音视频信息
 * 目前已知:
 * 音频: 音频图标+时长
 * 视频:点播图标+时长;直播图标+'直播中'
 */
@Component
export struct CardMediaInfo {
  @State contentDTO: ContentDTO = {} as ContentDTO // 如果有duraion,代表点播,显示时长;如果不传或者传0,显示直播中
  // objectType 0:不跳转 1:点播,2:直播,3:活动,4:广告,5:专题,6:链接,7:榜单,8:图文,9:组图,10:H5新闻,11:频道,12:组件,13:音频,
  // 14动态图文,15动态视频16问政;100人民号,101标签

  build() {
    Row() {
      if(this.contentDTO.objectType === '1' || this.contentDTO.objectType === '15' ) {
        // 点播、动态视频
        Row(){
          Image($r('app.media.videoTypeIcon'))
            .mediaLogo()
          Text(DateTimeUtils.getFormattedDuration(this.contentDTO.videoInfo.videoDuration * 1000))
            .mediaText()
        }
        .backgroundColor('#4d000000')
        .borderRadius($r('app.float.button_border_radius'))
      } else if(this.contentDTO.objectType === '2') {
        // liveInfo.liveState 直播新闻-直播状态 wait待开播running直播中end已结束cancel已取消paused暂停
        // 显示直播信息
        Row(){
          if(this.contentDTO.liveInfo.liveState === 'running') {
            Image($r('app.media.icon_live'))
              .mediaLogo()
            Text('直播中')
              .mediaText()
          } else if(this.contentDTO.liveInfo.liveState === 'end'){
            Image($r('app.media.videoTypeIcon'))
              .mediaLogo()
            Text('回看')
              .mediaText()
          }
        }
        .backgroundColor('#4d000000')
        .borderRadius($r('app.float.button_border_radius'))
      } else if(this.contentDTO.objectType === '9') {
        // 显示组图;图片数量
        Row(){
          Image($r('app.media.album_card_shape'))
            .mediaLogo()
          Text(`${this.contentDTO.photoNum}`)
            .mediaText()
            .width(20)
        }
        .backgroundColor('#4d000000')
        .borderRadius($r('app.float.button_border_radius'))
      } else if(this.contentDTO.objectType === '13') {
        // 显示音频信息
        Row(){
          Image($r('app.media.broadcast_listen'))
            .height(14)
            .borderRadius($r('app.float.button_border_radius'))
          Text(DateTimeUtils.getFormattedDuration(this.contentDTO.voiceInfo.voiceDuration * 1000))
            .mediaText()
        }
      }
    }
    .margin(6)
  }

  @Styles mediaLogo() {
    .width(22)
    .height(18)
    .borderRadius($r('app.float.button_border_radius'))
  }
}

@Extend(Text) function mediaText() {
  .fontColor($r('app.color.color_fff'))
  .fontSize($r('app.float.font_size_12'))
  .width(40)
  .height(18)
  .textAlign(TextAlign.Center)
  .margin({ left: -3 })
}