ShortVideoApp视频播放模块三

一、实现视频信息展示区

• 基于线性布局实现主体代码布局
• 实现用户信息展示
• 实现视频信息展示
• 在视频播放界面添加视频信息展示

import { VideoInfo } from '../model/VideoInfo';

//视频信息展示区
@Component
export struct VideoInfoDisplay {
  @State videoInfo: VideoInfo = new VideoInfo();

  build() {
    //视频信息展示区
    Column() {
      //用户信息
      Row(){
        //头像
        Image($rawfile(this.videoInfo.portraitPath))
          .width(60)
          .height(60)
          .borderRadius(30)//圆形
        //账号
        Text(this.videoInfo.author)
          .margin({left:6})
          .fontSize(25)
          .fontColor(Color.White)
        //关注按钮
        Text(this.videoInfo.isFollow?'取关':'关注')
          .margin({left:6})
          .textAlign(TextAlign.Center)
          .fontSize(16)
          .fontColor('#fefefe')
          .backgroundColor(this.videoInfo.isFollow?Color.Gray:Color.Red)
          .borderRadius(5)
          .width(35)
          .height(20)
          .onClick(()=>{
            //todo
          })
      }
      .width('100%')
      .height(70)
      //视频信息
      Row(){
        Text(this.videoInfo.content)
          .fontSize(16)
          .height(40)
          .fontColor('#fefefe')
          .maxLines(2)
          .textOverflow({overflow:TextOverflow.Ellipsis})// 设置文本超长时的显示方式。Ellipsis显示不下的用省略号代替
      }
      .width('100%')
      .height(40)
    }
    .width('100%')
    .height(118)
    .padding({left:4,right:4,top:4,bottom:4})
  }
}

二、基于Image和Text实现侧边操作栏

• 实现侧边操作栏
• 在视频播放界面添加侧边操作栏

import { FavoriteDataSource } from '../datasource/FavoriteDataSource';
import { ThumbsUpDataSource } from '../datasource/ThumbsUpDataSource';
import { VideoInfoDataSource } from '../datasource/VideoInfoDataSource';
import { VideoInfo } from '../model/VideoInfo';

/**
 * 侧边操作栏
 **/

@Component
export struct VideoSideOperationBar {
  @State videoInfo: VideoInfo = new VideoInfo();
  // 点赞信息数据源
  @Consume thumbsUpDataSource: ThumbsUpDataSource;
  // 视频数据源
  @Consume videoInfoDataSource: VideoInfoDataSource;
  // 收藏信息数据源
  @Consume favoriteDataSource: FavoriteDataSource;

  aboutToAppear(): void {
    if (this.videoInfo.videoId != undefined) {
      this.videoInfo.isThumbsUp = this.thumbsUpDataSource.isExist(this.videoInfo.videoId);
      this.videoInfo.isFavorite = this.favoriteDataSource.isExist(this.videoInfo.videoId);
    }
  }

  build() {
    // 侧边操作栏
    Column() {
      //点赞
      //点赞按钮
      Image(this.videoInfo.isThumbsUp
        ? $r('app.media.ic_like_red') : $r('app.media.ic_like'))
        .width(40)
        .height(40)
        .onClick(() => {
          // 点赞及取消点赞
          if (this.videoInfo.videoId != undefined && this.videoInfo.thumbsUpCount != undefined) {
            if (this.videoInfo.isThumbsUp) {
              // 当前已经点赞了，则取消点赞
              this.videoInfo.isThumbsUp = false;
              this.videoInfo.thumbsUpCount = this.videoInfo.thumbsUpCount - 1; //递减
              // 从数据源中删除点赞信息
              this.thumbsUpDataSource.deleteDataById(this.videoInfo.videoId);
            } else {
              // 当前没有点赞，则启用点赞
              this.videoInfo.isThumbsUp = true;
              this.videoInfo.thumbsUpCount = this.videoInfo.thumbsUpCount + 1; // 递增
              // 将点赞信息添加到数据源
              this.thumbsUpDataSource.pushData(this.videoInfo);
            }
            // 把点赞信息更新到视频数据源
            this.videoInfoDataSource.changeDataById(this.videoInfo.videoId, this.videoInfo);
          }
        })
      //点赞量
      Text(this.videoInfo.thumbsUpCount + '')
        .margin({ top: 12 })
        .fontSize(12)
        .width(40)
        .fontColor(Color.White)
        .textAlign(TextAlign.Center)
      //评论
      //评论按钮
      Image($r('app.media.ic_comment'))
        .width(40)
        .height(40)
      //评论量
      Text(this.videoInfo.commentCount + '')
        .margin({ top: 12 })
        .fontSize(12)
        .width(40)
        .fontColor(Color.White)
        .textAlign(TextAlign.Center)
      //收藏
      //收藏按钮
      Image(this.videoInfo.isFavorite
        ? $r('app.media.ic_star_red') : $r('app.media.ic_star'))
        .height(40)
        .width(40)
        .onClick(() => {
          // 收藏与取消收藏
          if (this.videoInfo.videoId != undefined && this.videoInfo.favoriteCount != undefined) {
            if (this.videoInfo.isFavorite) {
              // 已经收藏，则取消收藏
              this.videoInfo.isFavorite = false;
              // 收藏量递减
              this.videoInfo.favoriteCount = this.videoInfo.favoriteCount - 1;
              // 从收藏数据源中删除收藏数据
              this.favoriteDataSource.deleteDataById(this.videoInfo.videoId);
            } else {
              // 未收藏，则收藏
              this.videoInfo.isFavorite = true;
              //收藏量递增
              this.videoInfo.favoriteCount = this.videoInfo.favoriteCount + 1;
              // 将收藏数据添加到收藏数据源
              this.favoriteDataSource.pushData(this.videoInfo);
            }
            // 收藏数据更新到视频数据源
            this.videoInfoDataSource.changeDataById(this.videoInfo.videoId, this.videoInfo);
          }
        })
      //收藏量
      Text(this.videoInfo.favoriteCount + '')
        .margin({ top: 12 })
        .fontSize(12)
        .width(40)
        .fontColor(Color.White)
        .textAlign(TextAlign.Center)
      // 分享
      // 分享按钮
      Image($r('app.media.ic_share'))
        .width(40)
        .height(40)

      // 分享量
      Text(this.videoInfo.shareCount + '')
        .margin({ top: 12 })
        .fontSize(12)
        .width(40)
        .fontColor(Color.White)
        .textAlign(TextAlign.Center)
    }
    .width(40)
    .height(262)
  }
}