developOne / harmonyPool

Go to a project
Toggle navigation Toggle navigation pinning
wangyujian_wd
2b258d81 1 parent 1d4d5441

feat：1）直播详情页面直播间【音视频图文类型UI】重构；2）直播间跳转视频详情页面添加

Inline Side-by-side
Showing 14 changed files with 374 additions and 101 deletions
@@ -65,6 +65,8 @@ export function registerRouter() { @@ -65,6 +65,8 @@ export function registerRouter() {
65 return WDRouterPage.audioDetail 65 return WDRouterPage.audioDetail
66 } else if (action.params?.detailPageType == 18) { 66 } else if (action.params?.detailPageType == 18) {
67 return WDRouterPage.multiPictureListPage 67 return WDRouterPage.multiPictureListPage
  68 + } else if (action.params?.detailPageType == 19) {
  69 + return WDRouterPage.videoPlayPage
68 }else if (action.params?.detailPageType == 30) { 70 }else if (action.params?.detailPageType == 30) {
69 return WDRouterPage.themeListPage 71 return WDRouterPage.themeListPage
70 } 72 }
@@ -59,6 +59,8 @@ export class WDRouterPage { @@ -59,6 +59,8 @@ export class WDRouterPage {
59 static multiPictureDetailPage = new WDRouterPage("phone", "ets/pages/detail/MultiPictureDetailPage"); 59 static multiPictureDetailPage = new WDRouterPage("phone", "ets/pages/detail/MultiPictureDetailPage");
60 //大图列表页 60 //大图列表页
61 static multiPictureListPage = new WDRouterPage("wdComponent", "ets/pages/MultiPictureListPage"); 61 static multiPictureListPage = new WDRouterPage("wdComponent", "ets/pages/MultiPictureListPage");
  62 + //单个视频播放页
  63 + static videoPlayPage = new WDRouterPage("wdComponent", "ets/pages/VideoPlayPage");
62 // 音乐详情页 64 // 音乐详情页
63 static audioDetail = new WDRouterPage("phone", "ets/pages/detail/AudioDetail"); 65 static audioDetail = new WDRouterPage("phone", "ets/pages/detail/AudioDetail");
64 // 动态详情页 66 // 动态详情页
@@ -19,7 +19,10 @@ export interface Params { @@ -19,7 +19,10 @@ export interface Params {
19 // 13.音频详情页 19 // 13.音频详情页
20 // 17.多图（图集）详情页 20 // 17.多图（图集）详情页
21 // 18.大图列表页 21 // 18.大图列表页
  22 + // 19.单个视频播放页
22 detailPageType?: number; // 详情页类型 23 detailPageType?: number; // 详情页类型
23 liveStyle?: number; // 直播类型：0横屏，1竖屏 24 liveStyle?: number; // 直播类型：0横屏，1竖屏
24 creatorId?: string; //号主id 25 creatorId?: string; //号主id
  26 + videoUrl?: string;
  27 + videoCoverUrl?: string;
25 } 28 }
@@ -16,4 +16,11 @@ export interface LiveRoomItemBean { @@ -16,4 +16,11 @@ export interface LiveRoomItemBean {
16 //是否置顶 1置顶0不置顶 16 //是否置顶 1置顶0不置顶
17 isTop: number 17 isTop: number
18 role: string 18 role: string
  19 + //ZH_TEXT_AND_IMAGE_MSG ：图文，ZH_TEXT_MSG：文本，ZH_VIDEO_MSG：视频，ZH_AUDIO_MSG：音频
  20 + dataType: string
  21 + transcodeImageUrl: string
  22 + videoUrl: string
  23 + pictureResolutions: string[]
  24 + //音视频长度
  25 + duration: number
19 } 26 }
  1 +import { DateFormatUtil, WDPlayerController, WDPlayerRenderLiveView } from 'wdPlayer/Index';
  2 +import router from '@ohos.router';
  3 +import { StringUtils } from 'wdKit/Index';
  4 +import { Action } from 'wdBean';
  5 +
  6 +const TAG = 'VideoPlayPage';
  7 +
  8 +@Entry
  9 +@Component
  10 +export struct VideoPlayPage {
  11 + //是否处于播放状态中
  12 + @State isPlayStatus: boolean = true
  13 + playerController: WDPlayerController = new WDPlayerController();
  14 + //视频地址
  15 + @State videoUrl: string = ''
  16 + //封面图
  17 + @State videoCoverUrl: string = ''
  18 + @State currentTime: string = ''
  19 + @State totalTime: string = ''
  20 + @State progressVal: number = 0;
  21 +
  22 + aboutToAppear(): void {
  23 + let par: Action = router.getParams() as Action
  24 + let params = par?.params
  25 + this.videoUrl = params?.videoUrl ? params?.videoUrl : ''
  26 + this.videoCoverUrl = params?.videoCoverUrl ? params?.videoCoverUrl : ''
  27 + //播放进度监听
  28 + this.playerController.onTimeUpdate = (position: number, duration: number) => {
  29 + this.currentTime = DateFormatUtil.secondToTime(Math.floor(position / 1000));
  30 + this.totalTime = DateFormatUtil.secondToTime(Math.floor(duration / 1000));
  31 + this.progressVal = Math.floor(position * 100 / duration);
  32 + }
  33 + this.playerController.onCanplay = () => {
  34 + this.playerController.play()
  35 + }
  36 + }
  37 +
  38 + build() {
  39 + Stack() {
  40 + WDPlayerRenderLiveView({
  41 + playerController: this.playerController,
  42 + onLoad: async () => {
  43 + this.playerController.firstPlay(this.videoUrl)
  44 + }
  45 + })
  46 + .height('100%')
  47 + .width('100%')
  48 + .visibility(StringUtils.isEmpty(this.videoUrl) ? Visibility.None : Visibility.Visible)
  49 + Image(this.videoCoverUrl)
  50 + .objectFit(ImageFit.Contain)
  51 + .visibility(StringUtils.isEmpty(this.videoUrl) ? Visibility.Visible : Visibility.None)
  52 + Column() {
  53 + this.getTopUIComponent()
  54 + Stack()
  55 + .layoutWeight(1)
  56 + this.getBottomUIComponent()
  57 + }
  58 + }
  59 + .width('100%')
  60 + }
  61 +
  62 + @Builder
  63 + getTopUIComponent() {
  64 + Column() {
  65 + Row() {
  66 + Image($r('app.media.icon_arrow_left_white'))
  67 + .width(24)
  68 + .aspectRatio(1)
  69 + .margin({
  70 + right: 10
  71 + })
  72 + .onClick(() => {
  73 + router.back()
  74 + })
  75 + }
  76 + .width('100%')
  77 + .alignItems(VerticalAlign.Center)
  78 + .margin({
  79 + bottom: 10
  80 + })
  81 + }.width('100%')
  82 + .padding({
  83 + top: 20,
  84 + bottom: 6,
  85 + left: 10,
  86 + right: 10
  87 + })
  88 + .alignItems(HorizontalAlign.Start)
  89 + }
  90 +
  91 + @Builder
  92 + getBottomUIComponent() {
  93 + Row() {
  94 + this.playOrPauseBtn()
  95 + Text(this.currentTime)
  96 + .fontColor(Color.White)
  97 + .fontWeight(600)
  98 + .fontSize('12fp')
  99 + .margin({
  100 + left: 16
  101 + })
  102 + this.playProgressView()
  103 + Text(this.totalTime)
  104 + .fontColor(Color.White)
  105 + .fontWeight(600)
  106 + .fontSize('12fp')
  107 + .margin({
  108 + right: 16
  109 + })
  110 + }
  111 + .alignItems(VerticalAlign.Center)
  112 + .width('100%')
  113 + .padding({
  114 + left: 10,
  115 + right: 10,
  116 + top: 15,
  117 + bottom: 15
  118 + })
  119 + }
  120 +
  121 + @Builder
  122 + playOrPauseBtn() {
  123 + //暂停、播放
  124 + Image(this.isPlayStatus ? $r('app.media.icon_live_player_pause') : $r('app.media.player_play_ic'))
  125 + .width(24)
  126 + .height(24)
  127 + .onClick(() => {
  128 + if (this.isPlayStatus) {
  129 + this.isPlayStatus = false
  130 + this.playerController.pause()
  131 + } else {
  132 + this.isPlayStatus = true
  133 + this.playerController.play()
  134 + }
  135 + })
  136 + }
  137 +
  138 + @Builder
  139 + playProgressView() {
  140 + Slider({
  141 + value: this.progressVal,
  142 + step: 1,
  143 + style: SliderStyle.OutSet
  144 + })
  145 + .blockSize({
  146 + width: 18,
  147 + height: 12
  148 + })
  149 + .blockStyle({
  150 + type: SliderBlockType.IMAGE,
  151 + image: $r('app.media.ic_player_block')
  152 + })
  153 + .blockColor(Color.White)
  154 + .trackColor('#4DFFFFFF')
  155 + .selectedColor('#FFED2800')
  156 + .height(14)
  157 + .trackThickness(1)
  158 + .layoutWeight(1)
  159 + .margin({
  160 + left: 8,
  161 + right: 8
  162 + })
  163 + .onChange((value: number, mode: SliderChangeMode) => {
  164 + this.playerController?.setSeekTime(value, mode);
  165 + })
  166 + }
  167 +
  168 + onPageHide(): void {
  169 + this.playerController?.pause()
  170 + this.playerController?.stop()
  171 + }
  172 +}
@@ -20,6 +20,7 @@ @@ -20,6 +20,7 @@
20 "pages/MultiPictureListPage", 20 "pages/MultiPictureListPage",
21 "components/page/LiveMorePage", 21 "components/page/LiveMorePage",
22 "components/page/ReserveMorePage", 22 "components/page/ReserveMorePage",
  23 + "pages/VideoPlayPage",
23 "components/page/ThemeListPage" 24 "components/page/ThemeListPage"
24 ] 25 ]
25 } 26 }
1 import { LiveDetailsBean, LiveRoomItemBean } from 'wdBean/Index' 1 import { LiveDetailsBean, LiveRoomItemBean } from 'wdBean/Index'
2 -import { EmptyComponent, ErrorComponent, ListHasNoMoreDataUI, WDViewDefaultType } from 'wdComponent/Index' 2 +import { EmptyComponent, ErrorComponent, WDViewDefaultType } from 'wdComponent/Index'
3 import CustomRefreshLoadLayout from 'wdComponent/src/main/ets/components/page/CustomRefreshLoadLayout' 3 import CustomRefreshLoadLayout from 'wdComponent/src/main/ets/components/page/CustomRefreshLoadLayout'
4 -import LoadMoreLayout from 'wdComponent/src/main/ets/components/page/LoadMoreLayout'  
5 import RefreshLayout from 'wdComponent/src/main/ets/components/page/RefreshLayout' 4 import RefreshLayout from 'wdComponent/src/main/ets/components/page/RefreshLayout'
6 import { RefreshLayoutBean } from 'wdComponent/src/main/ets/components/page/RefreshLayoutBean' 5 import { RefreshLayoutBean } from 'wdComponent/src/main/ets/components/page/RefreshLayoutBean'
7 import PageModel from 'wdComponent/src/main/ets/viewmodel/PageModel' 6 import PageModel from 'wdComponent/src/main/ets/viewmodel/PageModel'
8 import { ViewType } from 'wdConstant/Index' 7 import { ViewType } from 'wdConstant/Index'
9 -import { Logger } from 'wdKit/Index'  
10 import { LiveViewModel } from '../../viewModel/LiveViewModel' 8 import { LiveViewModel } from '../../viewModel/LiveViewModel'
11 import { TabChatItemComponent } from './TabChatItemComponent' 9 import { TabChatItemComponent } from './TabChatItemComponent'
12 10
1 import { LiveDetailsBean, LiveRoomItemBean } from 'wdBean/Index' 1 import { LiveDetailsBean, LiveRoomItemBean } from 'wdBean/Index'
2 -import { EmptyComponent, ErrorComponent, ListHasNoMoreDataUI, WDViewDefaultType } from 'wdComponent/Index'  
3 -import { LiveViewModel } from '../../viewModel/LiveViewModel' 2 +import { EmptyComponent, ErrorComponent, ListHasNoMoreDataUI,
  3 + WDViewDefaultType } from 'wdComponent/Index'
4 import { TabLiveItemComponent } from './TabLiveItemComponent' 4 import { TabLiveItemComponent } from './TabLiveItemComponent'
5 import CustomRefreshLoadLayout from 'wdComponent/src/main/ets/components/page/CustomRefreshLoadLayout' 5 import CustomRefreshLoadLayout from 'wdComponent/src/main/ets/components/page/CustomRefreshLoadLayout'
6 import { RefreshLayoutBean } from 'wdComponent/src/main/ets/components/page/RefreshLayoutBean' 6 import { RefreshLayoutBean } from 'wdComponent/src/main/ets/components/page/RefreshLayoutBean'
@@ -9,6 +9,7 @@ import { ViewType } from 'wdConstant/Index' @@ -9,6 +9,7 @@ import { ViewType } from 'wdConstant/Index'
9 import LoadMoreLayout from 'wdComponent/src/main/ets/components/page/LoadMoreLayout' 9 import LoadMoreLayout from 'wdComponent/src/main/ets/components/page/LoadMoreLayout'
10 import RefreshLayout from 'wdComponent/src/main/ets/components/page/RefreshLayout' 10 import RefreshLayout from 'wdComponent/src/main/ets/components/page/RefreshLayout'
11 import { StringUtils } from 'wdKit/Index' 11 import { StringUtils } from 'wdKit/Index'
  12 +import { LiveViewModel } from '../../viewModel/LiveViewModel'
12 13
13 @Component 14 @Component
14 export struct TabLiveComponent { 15 export struct TabLiveComponent {
@@ -110,6 +111,7 @@ export struct TabLiveComponent { @@ -110,6 +111,7 @@ export struct TabLiveComponent {
110 liveRoomItemBeanTemp.senderUserName = '人民日报主持人' 111 liveRoomItemBeanTemp.senderUserName = '人民日报主持人'
111 liveRoomItemBeanTemp.pictureUrls=[] 112 liveRoomItemBeanTemp.pictureUrls=[]
112 liveRoomItemBeanTemp.pictureUrls.push(this.liveDetailsBean?.fullColumnImgUrls[0]?.url) 113 liveRoomItemBeanTemp.pictureUrls.push(this.liveDetailsBean?.fullColumnImgUrls[0]?.url)
  114 + liveRoomItemBeanTemp.dataType='ZH_TEXT_AND_IMAGE_MSG'
113 this.liveList.push(liveRoomItemBeanTemp) 115 this.liveList.push(liveRoomItemBeanTemp)
114 } 116 }
115 } 117 }
1 -import { LiveRoomItemBean, PhotoListBean, } from 'wdBean/Index';  
2 -import { DateTimeUtils, StringUtils } from 'wdKit/Index';  
3 -import { Action, Params } from 'wdBean';  
4 -import { ExtraDTO } from 'wdBean/src/main/ets/bean/component/extra/ExtraDTO';  
5 -import { WDRouterRule } from 'wdRouter/Index'; 1 +import { Action, LiveRoomItemBean, Params, PhotoListBean } from 'wdBean/Index'
  2 +import { ExtraDTO } from 'wdBean/src/main/ets/bean/component/extra/ExtraDTO'
  3 +import { DateTimeUtils, StringUtils } from 'wdKit/Index'
  4 +import { WDRouterRule } from 'wdRouter/Index'
6 5
7 @Component 6 @Component
8 export struct TabLiveItemComponent { 7 export struct TabLiveItemComponent {
@@ -14,108 +13,190 @@ export struct TabLiveItemComponent { @@ -14,108 +13,190 @@ export struct TabLiveItemComponent {
14 } 13 }
15 14
16 build() { 15 build() {
17 - Column() {  
18 - Row() {  
19 - Image(StringUtils.isEmpty(this.item.senderUserAvatarUrl) ? $r('app.media.default_head') : this.item.senderUserAvatarUrl)  
20 - .borderRadius(90)  
21 - .width(24)  
22 - .height(24)  
23 - Text(this.item.senderUserName)  
24 - .maxLines(1)  
25 - .textOverflow({ overflow: TextOverflow.Ellipsis }) 16 + Row() {
  17 + Image(StringUtils.isEmpty(this.item.senderUserAvatarUrl) ? $r('app.media.default_head') : this.item.senderUserAvatarUrl)
  18 + .borderRadius(90)
  19 + .width(24)
  20 + .height(24)
  21 +
  22 + Column() {
  23 + Row() {
  24 + Text(this.item.senderUserName)
  25 + .maxLines(1)
  26 + .textOverflow({ overflow: TextOverflow.Ellipsis })
  27 + .fontSize('14fp')
  28 + .fontWeight(400)
  29 + .fontColor('#222222')
  30 + Text('主持人')
  31 + .maxLines(1)
  32 + .textOverflow({ overflow: TextOverflow.Ellipsis })
  33 + .fontSize('11fp')
  34 + .fontWeight(400)
  35 + .fontColor('#968562')
  36 + .backgroundColor('#F1EFEB')
  37 + .padding({
  38 + left: 4,
  39 + top: 1,
  40 + right: 4,
  41 + bottom: 1
  42 + })
  43 + .borderRadius(2)
  44 + .margin({ left: 8 })
  45 + .visibility('host' == this.item.role ? Visibility.Visible : Visibility.None)
  46 + Text(DateTimeUtils.getCommentTime(new Date(this.item.time).getTime()))
  47 + .maxLines(1)
  48 + .textOverflow({ overflow: TextOverflow.Ellipsis })
  49 + .fontSize('12fp')
  50 + .fontWeight(400)
  51 + .fontColor('#999999')
  52 + .margin({ left: 8 })
  53 + .visibility(StringUtils.isNotEmpty(this.item.time) ? Visibility.Visible : Visibility.None)
  54 +
  55 + Text('置顶')
  56 + .fontSize('11fp')
  57 + .fontWeight(400)
  58 + .fontColor('#ED2800')
  59 + .backgroundColor('#F1EFEB')
  60 + .padding({
  61 + left: 4,
  62 + top: 1,
  63 + right: 4,
  64 + bottom: 1
  65 + })
  66 + .borderRadius(2)
  67 + .margin({ left: 8 })
  68 + .width(100)
  69 + .visibility(1 == this.item.isTop ? Visibility.Visible : Visibility.None)
  70 + }
  71 +
  72 + Text(this.item.text)
26 .fontSize('14fp') 73 .fontSize('14fp')
27 .fontWeight(400) 74 .fontWeight(400)
28 .fontColor('#222222') 75 .fontColor('#222222')
29 - .margin({ left: 8 })  
30 - Text('主持人')  
31 - .maxLines(1)  
32 - .textOverflow({ overflow: TextOverflow.Ellipsis })  
33 - .fontSize('11fp')  
34 - .fontWeight(400)  
35 - .fontColor('#968562')  
36 - .backgroundColor('#F1EFEB')  
37 - .padding({  
38 - left: 4,  
39 - top: 1,  
40 - right: 4,  
41 - bottom: 1 76 + .margin({
  77 + top: 6
42 }) 78 })
43 - .borderRadius(2)  
44 - .margin({ left: 8 })  
45 - .visibility('host' == this.item.role ? Visibility.Visible : Visibility.None)  
46 - Text(DateTimeUtils.getCommentTime(new Date(this.item.time).getTime()))  
47 - .maxLines(1)  
48 - .textOverflow({ overflow: TextOverflow.Ellipsis })  
49 - .fontSize('12fp')  
50 - .fontWeight(400)  
51 - .fontColor('#999999')  
52 - .margin({ left: 8 })  
53 - .visibility(StringUtils.isNotEmpty(this.item.time) ? Visibility.Visible : Visibility.None)  
54 - Blank()  
55 - Text('置顶')  
56 - .maxLines(1)  
57 - .textOverflow({ overflow: TextOverflow.Ellipsis })  
58 - .fontSize('11fp')  
59 - .fontWeight(400)  
60 - .fontColor('#ED2800')  
61 - .backgroundColor('#F1EFEB')  
62 - .padding({  
63 - left: 4,  
64 - top: 1,  
65 - right: 4,  
66 - bottom: 1 79 + .width('100%')
  80 + .textAlign(TextAlign.Start)
  81 + //ZH_TEXT_AND_IMAGE_MSG ：图文，ZH_TEXT_MSG：文本，ZH_VIDEO_MSG：视频，ZH_AUDIO_MSG：音频
  82 + //图文
  83 + if (this.item.dataType === 'ZH_TEXT_AND_IMAGE_MSG') {
  84 + List({ space: this.item.pictureUrls.length == 1 ? 0 : 5 }) {
  85 + ForEach(this.item.pictureUrls, (item: string, index: number) => {
  86 + ListItem() {
  87 + Image(item)
  88 + .width(`${100 / this.item.pictureUrls.length}%`)
  89 + .height(this.item.pictureUrls.length > 1 ? 70 : 174)
  90 + .objectFit(ImageFit.Auto)
  91 + .borderRadius(4)
  92 + }.onClick(() => {
  93 + this.photoList = []
  94 + for (let item of this.item.pictureUrls) {
  95 + this.photoList.push({
  96 + width: 0,
  97 + height: 0,
  98 + picPath: item,
  99 + picDesc: ''
  100 + })
  101 + }
  102 + this.gotoMultipleListImagePage()
  103 + })
  104 + })
  105 + }
  106 + .listDirection(Axis.Horizontal)
  107 + .margin({
  108 + top: 8,
  109 + right: 16
67 }) 110 })
68 - .borderRadius(2)  
69 - .margin({ left: 8 })  
70 - .visibility(1 == this.item.isTop ? Visibility.Visible : Visibility.None)  
71 - }  
72 - .width('100%')  
73 -  
74 - Text(this.item.text)  
75 - .fontSize('14fp')  
76 - .fontWeight(400)  
77 - .fontColor('#222222')  
78 - .margin({  
79 - left: 32,  
80 - top: 6  
81 - })  
82 - .width('100%')  
83 - .textAlign(TextAlign.Start)  
84 - List() {  
85 - ForEach(this.item.pictureUrls, (item: string, index: number) => {  
86 - ListItem() {  
87 - Image(item)  
88 - .height(174)  
89 - .width(310)  
90 - .aspectRatio(310 / 174)  
91 - .objectFit(ImageFit.Auto)  
92 - .borderRadius(4)  
93 - }.onClick(() => {  
94 - this.photoList=[]  
95 - for (let item of this.item.pictureUrls) {  
96 - this.photoList.push({  
97 - width: 0,  
98 - height: 0,  
99 - picPath: item,  
100 - picDesc: '' 111 + }
  112 + //音频
  113 + else if (this.item.dataType === 'ZH_AUDIO_MSG') {
  114 + Row() {
  115 + Image($r('app.media.icon_voice'))
  116 + .width(20)
  117 + .aspectRatio(1)
  118 + .margin({
  119 + left: 8,
  120 + right: 6
101 }) 121 })
  122 + Text(DateTimeUtils.getFormattedDuration(this.item.duration))
  123 + .fontColor('#666666')
  124 + .fontWeight(400)
  125 + .fontSize('14fp')
  126 + }
  127 + .backgroundColor(Color.White)
  128 + .height(36)
  129 + .borderRadius(4)
  130 + .margin({ top: 8, right: 16 })
  131 + .width('100%')
  132 + }
  133 + //视频
  134 + else if (this.item.dataType === 'ZH_VIDEO_MSG') {
  135 + RelativeContainer() {
  136 + Image(this.item.transcodeImageUrl)
  137 + .width('100%')
  138 + .objectFit(ImageFit.Cover)
  139 + .borderRadius(4)
  140 + .id('iv_id')
  141 + Stack() {
  142 + Row()
  143 + .borderRadius(90)
  144 + .width(32)
  145 + .height(32)
  146 + .backgroundColor('#000000')
  147 + Image($r('app.media.player_play_ic'))
  148 + .height(16)
  149 + .aspectRatio(1)
102 } 150 }
103 - this.gotoMultipleListImagePage() 151 + .alignRules({
  152 + left: { anchor: "iv_id", align: HorizontalAlign.Start },
  153 + bottom: { anchor: "iv_id", align: VerticalAlign.Bottom }
  154 + })
  155 + .margin({
  156 + left: 12,
  157 + bottom: 12
  158 + })
  159 + .id('play_id')
  160 + }
  161 + .margin({
  162 + top: 8,
  163 + right: 16
  164 + })
  165 + .aspectRatio(Number.parseFloat(this.item.pictureResolutions[0]?.split('*')[0]) / Number.parseFloat(this.item.pictureResolutions[0]?.split('*')[1]))
  166 + .onClick(() => {
  167 + this.gotoVideoPlayPage()
104 }) 168 })
105 - })  
106 - }.margin({  
107 - left: 32,  
108 - top: 8 169 + }
  170 +
  171 + }
  172 + .margin({
  173 + left: 8,
  174 + right: 16
109 }) 175 })
110 - }.margin({  
111 - left: 15,  
112 - top: 15,  
113 - right: 15 176 + .layoutWeight(1)
  177 + .alignItems(HorizontalAlign.Start)
  178 + }
  179 + .alignItems(VerticalAlign.Top)
  180 + .padding({
  181 + left: 17,
  182 + top: 8,
  183 + bottom: 8,
114 }) 184 })
115 } 185 }
116 186
117 - aboutToDisappear(): void {  
118 - 187 + /**
  188 + * @param content
  189 + * */
  190 + gotoVideoPlayPage() {
  191 + let taskAction: Action = {
  192 + type: 'JUMP_DETAIL_PAGE',
  193 + params: {
  194 + detailPageType: 19,
  195 + videoUrl: this.item.videoUrl,
  196 + videoCoverUrl: this.item.transcodeImageUrl
  197 + } as Params,
  198 + };
  199 + WDRouterRule.jumpWithAction(taskAction)
119 } 200 }
120 201
121 /** 202 /**
@@ -134,4 +215,8 @@ export struct TabLiveItemComponent { @@ -134,4 +215,8 @@ export struct TabLiveItemComponent {
134 }; 215 };
135 WDRouterRule.jumpWithAction(taskAction) 216 WDRouterRule.jumpWithAction(taskAction)
136 } 217 }
  218 +
  219 + aboutToDisappear(): void {
  220 +
  221 + }
137 } 222 }
@@ -269,7 +269,8 @@ export struct PlayUIComponent { @@ -269,7 +269,8 @@ export struct PlayUIComponent {
269 .blockSize({ 269 .blockSize({
270 width: 18, 270 width: 18,
271 height: 12 271 height: 12
272 - })// .blockStyle({ 272 + })
  273 + // .blockStyle({
273 // type: SliderBlockType.IMAGE, 274 // type: SliderBlockType.IMAGE,
274 // image: $r('app.media.ic_player_block') 275 // image: $r('app.media.ic_player_block')
275 // }) 276 // })