developOne / harmonyPool

Go to a project
Toggle navigation Toggle navigation pinning
zhenghy
cdd49ec7 1 parent 2d459510

评论修改

Inline Side-by-side
Showing 13 changed files with 199 additions and 103 deletions
@@ -11,7 +11,7 @@ export struct CommentTabComponent { @@ -11,7 +11,7 @@ export struct CommentTabComponent {
11 } 11 }
12 @ObjectLink publishCommentModel: publishCommentModel 12 @ObjectLink publishCommentModel: publishCommentModel
13 @Prop contentDetail: ContentDetailDTO 13 @Prop contentDetail: ContentDetailDTO
14 - @Prop pageComponentType: number = -1 //1:视频详情页 14 + @Prop pageComponentType: number = -1 //1:视频详情页 2:竖屏直播页
15 /*展示类型*/ 15 /*展示类型*/
16 @State type: number = 1 16 @State type: number = 1
17 @State placeHolder: string = '说两句...' 17 @State placeHolder: string = '说两句...'
@@ -67,7 +67,8 @@ export struct CommentTabComponent { @@ -67,7 +67,8 @@ export struct CommentTabComponent {
67 }) 67 })
68 .id("RowBg") 68 .id("RowBg")
69 } else { 69 } else {
70 - Image($r('app.media.comment_img_input_hui')) 70 + Image(this.pageComponentType === 2 ? $r('app.media.comment_img_input_black') :
  71 + $r('app.media.comment_img_input_hui'))
71 .objectFit(ImageFit.Fill) 72 .objectFit(ImageFit.Fill)
72 .resizable({ 73 .resizable({
73 slice: { 74 slice: {
@@ -16,6 +16,7 @@ interface ILikeStyleResp { @@ -16,6 +16,7 @@ interface ILikeStyleResp {
16 @Component 16 @Component
17 export struct LikeComponent { 17 export struct LikeComponent {
18 @Consume contentDetailData: ContentDetailDTO 18 @Consume contentDetailData: ContentDetailDTO
  19 + @Prop pageComponentType: number
19 @State likesStyle: number = this.contentDetailData.likesStyle // 赞样式 1红心(点赞) 2大拇指(祈福) 3蜡烛(默哀) 4置空 20 @State likesStyle: number = this.contentDetailData.likesStyle // 赞样式 1红心(点赞) 2大拇指(祈福) 3蜡烛(默哀) 4置空
20 @State likeStatus: boolean = false 21 @State likeStatus: boolean = false
21 viewModel: LikeViewModel = new LikeViewModel() 22 viewModel: LikeViewModel = new LikeViewModel()
@@ -70,7 +71,9 @@ export struct LikeComponent { @@ -70,7 +71,9 @@ export struct LikeComponent {
70 if (this.likesStyle === 1) { 71 if (this.likesStyle === 1) {
71 return { 72 return {
72 url: this.likeStatus ? $r(`app.media.ic_like_check`) : 73 url: this.likeStatus ? $r(`app.media.ic_like_check`) :
73 - this.styleType == 1 ? this.componentType == 3?$r(`app.media.CarderInteraction_like`):$r('app.media.icon_like_default') : $r(`app.media.ic_like_uncheck`), 74 + this.styleType == 1 ?
  75 + this.componentType == 3 ? $r(`app.media.CarderInteraction_like`) : $r('app.media.icon_like_default') :
  76 + $r(`app.media.ic_like_uncheck`),
74 name: '赞' 77 name: '赞'
75 } 78 }
76 } else if (this.likesStyle === 2) { 79 } else if (this.likesStyle === 2) {
@@ -136,8 +139,7 @@ export struct LikeComponent { @@ -136,8 +139,7 @@ export struct LikeComponent {
136 Image(this.transLikeStyle().url) 139 Image(this.transLikeStyle().url)
137 .width(18) 140 .width(18)
138 .height(18) 141 .height(18)
139 - Text(this.likeStatus ? '已赞' : '点赞')  
140 - // Text(this.likeCount > 0 ? this.likeCount.toString() : '点赞') 142 + Text(this.likeStatus ? '已赞' : '点赞')// Text(this.likeCount > 0 ? this.likeCount.toString() : '点赞')
141 .margin({ left: 4 }) 143 .margin({ left: 4 })
142 .fontSize(14) 144 .fontSize(14)
143 .fontColor(this.likeStatus ? '#ED2800' : '#666666') 145 .fontColor(this.likeStatus ? '#ED2800' : '#666666')
@@ -207,7 +209,7 @@ export struct LikeComponent { @@ -207,7 +209,7 @@ export struct LikeComponent {
207 .width(36) 209 .width(36)
208 .height(36) 210 .height(36)
209 .borderRadius(18) 211 .borderRadius(18)
210 - .backgroundColor('#FFF5F5F5') 212 + .backgroundColor(this.pageComponentType === 4 ? '#4D000000' : '#FFF5F5F5')
211 213
212 214
213 Row() { 215 Row() {
@@ -62,7 +62,7 @@ export struct OperRowListView { @@ -62,7 +62,7 @@ export struct OperRowListView {
62 * 7：图集详情页 62 * 7：图集详情页
63 */ 63 */
64 @Prop componentType: number = 1 //1: 底部栏目样式 2: 新闻页中间位置样式 3:动态Tab内容下的互动入口 64 @Prop componentType: number = 1 //1: 底部栏目样式 2: 新闻页中间位置样式 3:动态Tab内容下的互动入口
65 - @Prop pageComponentType: number = -1 //1:视频详情页 65 + @Prop pageComponentType?: number = -1 //1:视频详情页 2竖屏直播页
66 @State likesStyle: number = this.contentDetailData.likesStyle // 赞样式 1红心(点赞) 2大拇指(祈福) 3蜡烛(默哀) 4置空 66 @State likesStyle: number = this.contentDetailData.likesStyle // 赞样式 1红心(点赞) 2大拇指(祈福) 3蜡烛(默哀) 4置空
67 @Prop operationButtonList?: string[] = ['comment', 'collect', 'share'] // 组件展示条件 67 @Prop operationButtonList?: string[] = ['comment', 'collect', 'share'] // 组件展示条件
68 @State needLike: boolean = true 68 @State needLike: boolean = true
@@ -84,7 +84,7 @@ export struct OperRowListView { @@ -84,7 +84,7 @@ export struct OperRowListView {
84 console.info(TAG, '3333----', this.needLike) 84 console.info(TAG, '3333----', this.needLike)
85 this.handleStyle() 85 this.handleStyle()
86 EmitterUtils.receiveEvent(EmitterEventId.AUDIO_CHANGE_STATUS, (val: number | string | undefined) => { 86 EmitterUtils.receiveEvent(EmitterEventId.AUDIO_CHANGE_STATUS, (val: number | string | undefined) => {
87 - console.log(TAG,'this.currentStatus', val) 87 + console.log(TAG, 'this.currentStatus', val)
88 this.currentStatus = val 88 this.currentStatus = val
89 }) 89 })
90 this.onDetailUpdated() 90 this.onDetailUpdated()
@@ -223,7 +223,8 @@ export struct OperRowListView { @@ -223,7 +223,8 @@ export struct OperRowListView {
223 LikeComponent({ 223 LikeComponent({
224 data: this.likeBean, 224 data: this.likeBean,
225 styleType: this.styleType, 225 styleType: this.styleType,
226 - componentType: this.componentType 226 + componentType: this.componentType,
  227 + pageComponentType: this.pageComponentType
227 }) 228 })
228 // } 229 // }
229 } 230 }
@@ -236,8 +237,8 @@ export struct OperRowListView { @@ -236,8 +237,8 @@ export struct OperRowListView {
236 */ 237 */
237 @Builder 238 @Builder
238 builderCollect() { 239 builderCollect() {
239 - Column() {  
240 - Stack({ alignContent: Alignment.TopEnd }) { 240 +
  241 + Stack() {
241 Image(this.newsStatusOfUser?.collectStatus == 1 ? $r('app.media.ic_collect_check1') : 242 Image(this.newsStatusOfUser?.collectStatus == 1 ? $r('app.media.ic_collect_check1') :
242 this.styleType == 1 ? $r('app.media.iv_live_comment_collect_un') : 243 this.styleType == 1 ? $r('app.media.iv_live_comment_collect_un') :
243 $r('app.media.iv_live_comment_collect_un_white')) 244 $r('app.media.iv_live_comment_collect_un_white'))
@@ -254,11 +255,14 @@ export struct OperRowListView { @@ -254,11 +255,14 @@ export struct OperRowListView {
254 x: 12 255 x: 12
255 })*/ 256 })*/
256 } 257 }
  258 + .height(36)
  259 + .width(36)
  260 + .borderRadius(18)
  261 + .backgroundColor(this.pageComponentType === 2 ? '#4D000000' : Color.Transparent)
257 .onClick(() => { 262 .onClick(() => {
258 this.toggleCollectStatus() 263 this.toggleCollectStatus()
259 }) 264 })
260 - }  
261 - .width(42) 265 +
262 } 266 }
263 267
264 /** 268 /**
@@ -268,7 +272,8 @@ export struct OperRowListView { @@ -268,7 +272,8 @@ export struct OperRowListView {
268 @Builder 272 @Builder
269 builderListen() { 273 builderListen() {
270 Column() { 274 Column() {
271 - Image(this.currentStatus === PlayerConstants.STATUS_START ? $r("app.media.icon_audio_pause") : $r("app.media.icon_listen")) 275 + Image(this.currentStatus === PlayerConstants.STATUS_START ? $r("app.media.icon_audio_pause") :
  276 + $r("app.media.icon_listen"))
272 .width(24) 277 .width(24)
273 .height(24) 278 .height(24)
274 .aspectRatio(1) 279 .aspectRatio(1)
@@ -278,7 +283,9 @@ export struct OperRowListView { @@ -278,7 +283,9 @@ export struct OperRowListView {
278 // ToastUtils.showToast('音频为公共方法，待开发', 1000); 283 // ToastUtils.showToast('音频为公共方法，待开发', 1000);
279 }) 284 })
280 } 285 }
281 - .width(42) 286 + .height(36)
  287 + .width(36)
  288 + .justifyContent(FlexAlign.Center)
282 } 289 }
283 290
284 /** 291 /**
@@ -298,7 +305,11 @@ export struct OperRowListView { @@ -298,7 +305,11 @@ export struct OperRowListView {
298 this.share() 305 this.share()
299 }) 306 })
300 } 307 }
301 - .width(42) 308 + .justifyContent(FlexAlign.Center)
  309 + .height(36)
  310 + .width(36)
  311 + .borderRadius(18)
  312 + .backgroundColor(this.pageComponentType === 2 ? '#4D000000' : Color.Transparent)
302 } 313 }
303 314
304 handleStyle() { 315 handleStyle() {
@@ -352,8 +363,8 @@ export struct OperRowListView { @@ -352,8 +363,8 @@ export struct OperRowListView {
352 contentList: [{ 363 contentList: [{
353 contentId: this.contentDetailData?.newsId + '', 364 contentId: this.contentDetailData?.newsId + '',
354 contentType: this.contentDetailData?.newsType + '', 365 contentType: this.contentDetailData?.newsType + '',
355 - relType:this.contentDetailData?.reLInfo?.relType + '',  
356 - contentRelId:this.contentDetailData?.reLInfo?.relId + '', 366 + relType: this.contentDetailData?.reLInfo?.relType + '',
  367 + contentRelId: this.contentDetailData?.reLInfo?.relId + '',
357 }], 368 }],
358 369
359 } 370 }
@@ -116,6 +116,7 @@ export struct PlayerCommentComponent { @@ -116,6 +116,7 @@ export struct PlayerCommentComponent {
116 OperRowListView({ 116 OperRowListView({
117 styleType: 3, 117 styleType: 3,
118 componentType: 4, 118 componentType: 4,
  119 + pageComponentType: 2, // 竖屏直播页
119 operationButtonList: ['comment', 'collect', 'share', 'like'], 120 operationButtonList: ['comment', 'collect', 'share', 'like'],
120 contentDetailData: this.contentDetailData, 121 contentDetailData: this.contentDetailData,
121 publishCommentModel: this.publishCommentModel, 122 publishCommentModel: this.publishCommentModel,
@@ -7,11 +7,17 @@ import { @@ -7,11 +7,17 @@ import {
7 postBatchAttentionStatusParams, 7 postBatchAttentionStatusParams,
8 postInteractBrowsOperateParams 8 postInteractBrowsOperateParams
9 } from 'wdDetailPlayApi/src/main/ets/request/ContentDetailRequest'; 9 } from 'wdDetailPlayApi/src/main/ets/request/ContentDetailRequest';
  10 +import { OperRowListView } from '../../../../../wdComponent/src/main/ets/components/view/OperRowListView'
  11 +import {
  12 + publishCommentModel
  13 +} from '../../../../../wdComponent/src/main/ets/components/comment/model/PublishCommentModel'
10 import { HttpUtils } from 'wdNetwork/Index'; 14 import { HttpUtils } from 'wdNetwork/Index';
11 -import { DateTimeUtils } from 'wdKit/Index'; 15 +import { DateTimeUtils, WindowModel } from 'wdKit/Index';
12 import { PlayerBottomView } from '../view/PlayerBottomView'; 16 import { PlayerBottomView } from '../view/PlayerBottomView';
13 import { PlayerRightView } from '../view/PlayerRightView'; 17 import { PlayerRightView } from '../view/PlayerRightView';
14 -import { CommentComponentPage } from './CommentComponentPage'; 18 +import { CommentComponentPage } from '../view/CommentComponentPage';
  19 +import { window } from '@kit.ArkUI';
  20 +import { DisplayDirection } from 'wdConstant/Index';
15 21
16 const TAG = 'DetailPlayShortVideoPage'; 22 const TAG = 'DetailPlayShortVideoPage';
17 23
@@ -28,17 +34,21 @@ export struct DetailPlayShortVideoPage { @@ -28,17 +34,21 @@ export struct DetailPlayShortVideoPage {
28 @Provide interactData: InteractDataDTO = {} as InteractDataDTO 34 @Provide interactData: InteractDataDTO = {} as InteractDataDTO
29 @Provide isFullScreen: boolean = false; 35 @Provide isFullScreen: boolean = false;
30 @Provide progressVal: number = 0; 36 @Provide progressVal: number = 0;
31 - @Provide videoLandScape?: number = 1; // 视频朝向， 横屏视频：1;竖屏视频：2 37 + @Provide videoLandScape: number = 1; // 视频朝向， 横屏视频：1;竖屏视频：2
32 @Provide newsStatusOfUser: batchLikeAndCollectResult = {} as batchLikeAndCollectResult // 点赞、收藏状态 38 @Provide newsStatusOfUser: batchLikeAndCollectResult = {} as batchLikeAndCollectResult // 点赞、收藏状态
33 @Provide followStatus: string = '0' // 关注状态 39 @Provide followStatus: string = '0' // 关注状态
34 @Provide isOpenDetail: boolean = false // 查看详情按钮点击 40 @Provide isOpenDetail: boolean = false // 查看详情按钮点击
35 @Provide isDragging: boolean = false // 拖动时间进度条 41 @Provide isDragging: boolean = false // 拖动时间进度条
36 @Provide showCommentList: boolean = false 42 @Provide showCommentList: boolean = false
  43 + @Consume displayDirection: DisplayDirection
37 @Consume @Watch('videoStatusChange') switchVideoStatus: boolean 44 @Consume @Watch('videoStatusChange') switchVideoStatus: boolean
38 @Consume @Watch('pageShowChange') pageShow: number 45 @Consume @Watch('pageShowChange') pageShow: number
  46 + @Consume windowWidth: number
  47 + @Consume windowHeight: number
39 @Consume topSafeHeight: number 48 @Consume topSafeHeight: number
  49 + @Consume showComment: boolean // 是否显示底部评论，首页视频频道传false
40 @State imageVisible: boolean = true 50 @State imageVisible: boolean = true
41 - @Consume windowWidth: number 51 + @State publishCommentModel: publishCommentModel = new publishCommentModel()
42 52
43 /** 53 /**
44 * 页面显示重查用户关注、点赞等信息 54 * 页面显示重查用户关注、点赞等信息
@@ -151,6 +161,15 @@ export struct DetailPlayShortVideoPage { @@ -151,6 +161,15 @@ export struct DetailPlayShortVideoPage {
151 } 161 }
152 this.queryNewsInfoOfUser() 162 this.queryNewsInfoOfUser()
153 163
  164 + this.publishCommentModel.targetId = String(this.contentDetailData?.newsId || '')
  165 + this.publishCommentModel.targetRelId = String(this.contentDetailData?.reLInfo?.relId)
  166 + this.publishCommentModel.targetTitle = this.contentDetailData?.newsTitle
  167 + this.publishCommentModel.targetRelType = String(this.contentDetailData?.reLInfo?.relType)
  168 + this.publishCommentModel.targetRelObjectId = String(this.contentDetailData?.reLInfo?.relObjectId)
  169 + this.publishCommentModel.keyArticle = String(this.contentDetailData?.keyArticle)
  170 + this.publishCommentModel.targetType = String(this.contentDetailData?.newsType)
  171 + this.publishCommentModel.commentContent = ''
  172 +
154 } 173 }
155 174
156 async aboutToDisappear(): Promise<void> { 175 async aboutToDisappear(): Promise<void> {
@@ -160,23 +179,57 @@ export struct DetailPlayShortVideoPage { @@ -160,23 +179,57 @@ export struct DetailPlayShortVideoPage {
160 } 179 }
161 180
162 build() { 181 build() {
163 - Stack({ alignContent: Alignment.Top }) { 182 + Column() {
  183 + Stack() {
164 // this.playerCoverBuilder() 184 // this.playerCoverBuilder()
165 this.playerViewBuilder() 185 this.playerViewBuilder()
  186 +
166 PlayerBottomView({ 187 PlayerBottomView({
167 playerController: this.playerController 188 playerController: this.playerController
168 }) 189 })
  190 + .position({ x: 0, y: '100%' })
  191 + .markAnchor({ y: '100%' })
  192 + .visibility(this.displayDirection === DisplayDirection.VERTICAL ?
  193 + Visibility.Visible : Visibility.None)
169 194
170 PlayerRightView({ 195 PlayerRightView({
171 playerController: this.playerController 196 playerController: this.playerController
172 }) 197 })
173 198
  199 +
174 CommentComponentPage({}).visibility(this.showCommentList ? Visibility.Visible : Visibility.None) 200 CommentComponentPage({}).visibility(this.showCommentList ? Visibility.Visible : Visibility.None)
175 .position({ y: '100%' }) 201 .position({ y: '100%' })
176 .markAnchor({ y: '100%' }) 202 .markAnchor({ y: '100%' })
177 } 203 }
  204 + .width(this.displayDirection === DisplayDirection.VERTICAL ? '100%' : 'auto')
  205 + .height(this.displayDirection === DisplayDirection.VERTICAL ? 'auto' : '100%')
  206 + .layoutWeight(1)
  207 + .onClick(() => {
  208 + this.playerController?.switchPlayOrPause();
  209 + })
  210 +
  211 + // 显示评论且非全屏模式（视频频道无评论showComment=false）
  212 + if (this.showComment && this.displayDirection === DisplayDirection.VERTICAL && this.index === this.currentIndex) {
  213 + OperRowListView({
  214 + pageComponentType: 1,
  215 + styleType: 3,
  216 + componentType: 4,
  217 + operationButtonList: ['comment',],
  218 + contentDetailData: this.contentDetailData,
  219 + publishCommentModel: this.publishCommentModel,
  220 + showCommentIcon: false,
  221 + onBack: () => {
  222 + WindowModel.shared.setWindowLayoutFullScreen(false)
  223 + WindowModel.shared.setWindowSystemBarProperties({ statusBarContentColor: '#000000', })
  224 + }
  225 + })
  226 + }
  227 + }
178 .height('100%') 228 .height('100%')
179 .width('100%') 229 .width('100%')
  230 + .padding({
  231 + top: this.topSafeHeight + 'px'
  232 + })
180 } 233 }
181 234
182 /** 235 /**
@@ -199,7 +252,7 @@ export struct DetailPlayShortVideoPage { @@ -199,7 +252,7 @@ export struct DetailPlayShortVideoPage {
199 252
200 @Builder 253 @Builder
201 playerViewBuilder() { 254 playerViewBuilder() {
202 - 255 + Stack() {
203 WDPlayerRenderView({ 256 WDPlayerRenderView({
204 playerController: this.playerController, 257 playerController: this.playerController,
205 onLoad: async () => { 258 onLoad: async () => {
@@ -208,18 +261,55 @@ export struct DetailPlayShortVideoPage { @@ -208,18 +261,55 @@ export struct DetailPlayShortVideoPage {
208 } 261 }
209 } 262 }
210 }) 263 })
211 - .height(this.videoLandScape === 1 ? '100%' : 'auto') 264 + .height(this.videoLandScape === 1 ? 210 : 'auto')// .height(this.videoLandScape === 1 ? 210 : '100%')
212 .width('100%') 265 .width('100%')
213 - .padding({  
214 - bottom: this.videoLandScape === 1 ? 115 : 0,  
215 - }) 266 +
  267 + // 横屏-全屏观看
  268 + if (this.videoLandScape === 1) {
  269 + this.playerFullscreenBuilder()
  270 + }
  271 + }
  272 + .width(this.displayDirection === DisplayDirection.VIDEO_HORIZONTAL ? 'auto' : '100%')
  273 + .height(this.displayDirection === DisplayDirection.VIDEO_HORIZONTAL ? '100%' : 'auto')
  274 + .align(this.videoLandScape === 1 ? Alignment.Center : Alignment.Top)
  275 +
  276 + }
  277 +
  278 + @Builder
  279 + playerFullscreenBuilder() {
  280 + Row() {
  281 + Image($r('app.media.ic_switch_orientation'))
  282 + .width(16)
  283 + .aspectRatio(1)
  284 + .objectFit(ImageFit.Contain)
  285 + .margin({ left: 8, right: 4 })
  286 + Text("全屏观看")
  287 + .fontColor(Color.White)
  288 + .fontSize(12)
216 .layoutWeight(1) 289 .layoutWeight(1)
217 - .align(this.videoLandScape === 0 ? Alignment.Top : Alignment.Center) 290 + }
  291 + .width(84)
  292 + .height(28)
  293 + .backgroundColor('#0d0d0d')
  294 + .border({ width: 1, color: '#4DFFFFFF', radius: 2 })
  295 + .alignItems(VerticalAlign.Center)
  296 + .justifyContent(FlexAlign.Center)
  297 + .align(Alignment.Bottom)
  298 + .margin({ top: 230 })
218 .onClick(() => { 299 .onClick(() => {
219 - console.error('WDPlayerRenderView=== onClick')  
220 - this.playerController?.switchPlayOrPause();  
221 - }) 300 + this.displayDirection =
  301 + this.displayDirection === DisplayDirection.VERTICAL ? DisplayDirection.VIDEO_HORIZONTAL :
  302 + DisplayDirection.VERTICAL
  303 + WindowModel.shared.setPreferredOrientation(this.displayDirection == DisplayDirection.VERTICAL ?
  304 + window.Orientation.PORTRAIT :
  305 + window.Orientation.LANDSCAPE_INVERTED)
222 306
  307 + // this.playerController.xComponentController?.setXComponentSurfaceRect({
  308 + // surfaceWidth: px2vp(this.windowHeight),
  309 + // surfaceHeight: px2vp(this.playerController.videoWidth / this.playerController.videoHeight * this.windowHeight),
  310 + // })
  311 +
  312 + })
223 313
224 } 314 }
225 } 315 }
@@ -5,6 +5,8 @@ import { DetailPlayShortVideoPage } from './DetailPlayShortVideoPage' @@ -5,6 +5,8 @@ import { DetailPlayShortVideoPage } from './DetailPlayShortVideoPage'
5 import router from '@ohos.router'; 5 import router from '@ohos.router';
6 import { contentListParams } from 'wdDetailPlayApi/src/main/ets/request/ContentDetailRequest'; 6 import { contentListParams } from 'wdDetailPlayApi/src/main/ets/request/ContentDetailRequest';
7 import { WindowModel } from 'wdKit'; 7 import { WindowModel } from 'wdKit';
  8 +import { DisplayDirection } from 'wdConstant/Index';
  9 +import { window } from '@kit.ArkUI';
8 10
9 const storage = LocalStorage.getShared(); 11 const storage = LocalStorage.getShared();
10 const TAG = 'DetailVideoListPage' 12 const TAG = 'DetailVideoListPage'
@@ -19,10 +21,12 @@ export struct DetailVideoListPage { @@ -19,10 +21,12 @@ export struct DetailVideoListPage {
19 @Provide bottomSafeHeight: number = AppStorage.get<number>('bottomSafeHeight') || 0 21 @Provide bottomSafeHeight: number = AppStorage.get<number>('bottomSafeHeight') || 0
20 @Provide topSafeHeight: number = AppStorage.get<number>('topSafeHeight') || 0 22 @Provide topSafeHeight: number = AppStorage.get<number>('topSafeHeight') || 0
21 @Provide windowWidth: number = AppStorage.get<number>('windowWidth') || 0 23 @Provide windowWidth: number = AppStorage.get<number>('windowWidth') || 0
  24 + @Provide windowHeight: number = AppStorage.get<number>('windowHeight') || 0
22 @Provide showComment: boolean = true 25 @Provide showComment: boolean = true
23 @Provide pageShow: number = -1 26 @Provide pageShow: number = -1
24 @Provide pageHide: number = -1 27 @Provide pageHide: number = -1
25 @Provide switchVideoStatus: boolean = true 28 @Provide switchVideoStatus: boolean = true
  29 + @Provide displayDirection: DisplayDirection = DisplayDirection.VERTICAL
26 @State data: ContentDetailDTO[] = [] 30 @State data: ContentDetailDTO[] = []
27 @State currentIndex: number = 0 31 @State currentIndex: number = 0
28 @State interactDataList: InteractDataDTO[] = [] 32 @State interactDataList: InteractDataDTO[] = []
@@ -83,6 +87,15 @@ export struct DetailVideoListPage { @@ -83,6 +87,15 @@ export struct DetailVideoListPage {
83 // WindowModel.shared.setWindowSystemBarEnable(['status', 'navigation']) 87 // WindowModel.shared.setWindowSystemBarEnable(['status', 'navigation'])
84 } 88 }
85 89
  90 + onBackPress(): boolean | void {
  91 + if (this.displayDirection === DisplayDirection.VIDEO_HORIZONTAL) {
  92 + this.displayDirection = DisplayDirection.VERTICAL
  93 + WindowModel.shared.setPreferredOrientation(this.displayDirection == DisplayDirection.VERTICAL ?
  94 + window.Orientation.PORTRAIT :
  95 + window.Orientation.LANDSCAPE_INVERTED)
  96 + }
  97 + }
  98 +
86 async getContentDetail(contentId: string, relId: string, relType: string) { 99 async getContentDetail(contentId: string, relId: string, relType: string) {
87 await ContentDetailRequest.getContentDetail({ 100 await ContentDetailRequest.getContentDetail({
88 contentId: contentId, 101 contentId: contentId,
@@ -159,17 +172,14 @@ export struct DetailVideoListPage { @@ -159,17 +172,14 @@ export struct DetailVideoListPage {
159 index: index, 172 index: index,
160 interactData: this.interactDataList[index] 173 interactData: this.interactDataList[index]
161 }) 174 })
162 - .margin({  
163 - top: this.topSafeHeight + 'px'  
164 - })  
165 }, (item: ContentDetailDTO) => item.newsId + '') 175 }, (item: ContentDetailDTO) => item.newsId + '')
166 } 176 }
  177 + .disableSwipe(this.displayDirection === DisplayDirection.VERTICAL ? false : true)
167 .indicator(false) 178 .indicator(false)
168 .vertical(true) 179 .vertical(true)
169 .loop(false) 180 .loop(false)
170 .width('100%') 181 .width('100%')
171 .height('100%') 182 .height('100%')
172 - .cachedCount(3)  
173 .displayCount(1, true) 183 .displayCount(1, true)
174 .onChange((index: number) => { 184 .onChange((index: number) => {
175 this.currentIndex = index 185 this.currentIndex = index
@@ -183,8 +193,9 @@ export struct DetailVideoListPage { @@ -183,8 +193,9 @@ export struct DetailVideoListPage {
183 .height('100%') 193 .height('100%')
184 .backgroundColor(Color.Black) 194 .backgroundColor(Color.Black)
185 .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM]) 195 .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
186 - .padding({  
187 - bottom: this.bottomSafeHeight + 'px'  
188 - }) 196 +
  197 + // .padding({
  198 + // bottom: this.bottomSafeHeight + 'px'
  199 + // })
189 } 200 }
190 } 201 }
@@ -14,6 +14,8 @@ import { @@ -14,6 +14,8 @@ import {
14 } from 'wdDetailPlayApi/src/main/ets/request/ContentDetailRequest'; 14 } from 'wdDetailPlayApi/src/main/ets/request/ContentDetailRequest';
15 import { Logger, WindowModel } from 'wdKit/Index'; 15 import { Logger, WindowModel } from 'wdKit/Index';
16 import { PictureLoading } from './PictureLoading'; 16 import { PictureLoading } from './PictureLoading';
  17 +import { DisplayDirection } from 'wdConstant/Index';
  18 +import { window } from '@kit.ArkUI';
17 19
18 interface loadMoreData { 20 interface loadMoreData {
19 pageNum: number; 21 pageNum: number;
@@ -43,11 +45,13 @@ export struct VideoChannelDetail { @@ -43,11 +45,13 @@ export struct VideoChannelDetail {
43 @Consume barBackgroundColor: Color 45 @Consume barBackgroundColor: Color
44 private swiperController: SwiperController = new SwiperController() 46 private swiperController: SwiperController = new SwiperController()
45 @Provide showComment: boolean = false 47 @Provide showComment: boolean = false
46 - @Provide windowWidth: number = AppStorage.get<number>('windowWidth') || 0  
47 @Provide topSafeHeight: number = AppStorage.get<number>('topSafeHeight') || 0 48 @Provide topSafeHeight: number = AppStorage.get<number>('topSafeHeight') || 0
  49 + @Provide windowWidth: number = AppStorage.get<number>('windowWidth') || 0
  50 + @Provide windowHeight: number = AppStorage.get<number>('windowHeight') || 0
48 @Consume @Watch('pageShowChange') pageShow: number 51 @Consume @Watch('pageShowChange') pageShow: number
49 @Consume @Watch('pageHideChange') pageHide: number 52 @Consume @Watch('pageHideChange') pageHide: number
50 @Provide switchVideoStatus: boolean = true 53 @Provide switchVideoStatus: boolean = true
  54 + @Provide displayDirection: DisplayDirection = DisplayDirection.VERTICAL
51 @State data: ContentDetailDTO[] = [] 55 @State data: ContentDetailDTO[] = []
52 @State currentIndex: number = 0 56 @State currentIndex: number = 0
53 @State interactDataList: InteractDataDTO[] = [] 57 @State interactDataList: InteractDataDTO[] = []
@@ -140,6 +144,15 @@ export struct VideoChannelDetail { @@ -140,6 +144,15 @@ export struct VideoChannelDetail {
140 // WindowModel.shared.setWindowSystemBarEnable(['status', 'navigation']) 144 // WindowModel.shared.setWindowSystemBarEnable(['status', 'navigation'])
141 } 145 }
142 146
  147 + onBackPress(): boolean | void {
  148 + if (this.displayDirection === DisplayDirection.VIDEO_HORIZONTAL) {
  149 + this.displayDirection = DisplayDirection.VERTICAL
  150 + WindowModel.shared.setPreferredOrientation(this.displayDirection == DisplayDirection.VERTICAL ?
  151 + window.Orientation.PORTRAIT :
  152 + window.Orientation.LANDSCAPE_INVERTED)
  153 + }
  154 + }
  155 +
143 /** 156 /**
144 * 根据视频频道传参查询视频楼层信息 157 * 根据视频频道传参查询视频楼层信息
145 */ 158 */
@@ -255,8 +268,9 @@ export struct VideoChannelDetail { @@ -255,8 +268,9 @@ export struct VideoChannelDetail {
255 .height('100%') 268 .height('100%')
256 }, (item: ContentDetailDTO) => item.newsId + '') 269 }, (item: ContentDetailDTO) => item.newsId + '')
257 } 270 }
  271 + .displayCount(1, true)
  272 + .disableSwipe(this.displayDirection === DisplayDirection.VERTICAL ? false : true)
258 .visibility(this.isMouted ? Visibility.Visible : Visibility.None) 273 .visibility(this.isMouted ? Visibility.Visible : Visibility.None)
259 - // .cachedCount(1)  
260 .indicator(false) 274 .indicator(false)
261 .vertical(true) 275 .vertical(true)
262 .loop(false) 276 .loop(false)
1 import { WDPlayerController } from 'wdPlayer/Index'; 1 import { WDPlayerController } from 'wdPlayer/Index';
2 import { PlayerTitleView } from './PlayerTitleView' 2 import { PlayerTitleView } from './PlayerTitleView'
3 import { PlayerProgressView } from './PlayerProgressView' 3 import { PlayerProgressView } from './PlayerProgressView'
4 -import { PlayerCommentView } from './PlayerCommentView'  
5 -import { PlayerTimeSeekView } from './PlayerTimeSeekView'  
6 -import { OperRowListView } from '../../../../../wdComponent/src/main/ets/components/view/OperRowListView'  
7 -import {  
8 - publishCommentModel  
9 -} from '../../../../../wdComponent/src/main/ets/components/comment/model/PublishCommentModel'  
10 import { ContentDetailDTO } from 'wdBean/Index'; 4 import { ContentDetailDTO } from 'wdBean/Index';
11 -import { WindowModel } from 'wdKit/Index';  
12 5
13 @Component 6 @Component
14 export struct PlayerBottomView { 7 export struct PlayerBottomView {
@@ -18,44 +11,16 @@ export struct PlayerBottomView { @@ -18,44 +11,16 @@ export struct PlayerBottomView {
18 @Consume isOpenDetail?: boolean 11 @Consume isOpenDetail?: boolean
19 @Consume isDragging?: boolean 12 @Consume isDragging?: boolean
20 @Consume contentDetailData: ContentDetailDTO 13 @Consume contentDetailData: ContentDetailDTO
21 - @State publishCommentModel: publishCommentModel = new publishCommentModel()  
22 14
23 aboutToAppear(): void { 15 aboutToAppear(): void {
24 - this.publishCommentModel.targetId = String(this.contentDetailData?.newsId || '')  
25 - this.publishCommentModel.targetRelId = String(this.contentDetailData?.reLInfo?.relId)  
26 - this.publishCommentModel.targetTitle = this.contentDetailData?.newsTitle  
27 - this.publishCommentModel.targetRelType = String(this.contentDetailData?.reLInfo?.relType)  
28 - this.publishCommentModel.targetRelObjectId = String(this.contentDetailData?.reLInfo?.relObjectId)  
29 - this.publishCommentModel.keyArticle = String(this.contentDetailData?.keyArticle)  
30 - this.publishCommentModel.targetType = String(this.contentDetailData?.newsType)  
31 - this.publishCommentModel.commentContent = '' 16 +
32 } 17 }
33 18
34 build() { 19 build() {
35 Column() { 20 Column() {
36 PlayerTitleView() 21 PlayerTitleView()
37 PlayerProgressView({ playerController: this.playerController }) 22 PlayerProgressView({ playerController: this.playerController })
38 - if (this.showComment) {  
39 - // PlayerCommentView()  
40 - OperRowListView({  
41 - pageComponentType: 1,  
42 - styleType: 3,  
43 - componentType: 4,  
44 - operationButtonList: ['comment',],  
45 - contentDetailData: this.contentDetailData,  
46 - publishCommentModel: this.publishCommentModel,  
47 - showCommentIcon: false,  
48 - onBack: () => {  
49 - WindowModel.shared.setWindowLayoutFullScreen(false)  
50 - WindowModel.shared.setWindowSystemBarProperties({ statusBarContentColor: '#000000', })  
51 - }  
52 - })  
53 - .padding({  
54 - bottom: -this.bottomSafeHeight + 'px'  
55 - })  
56 - }  
57 } 23 }
58 - .alignItems(HorizontalAlign.Start)  
59 .position({ x: 0, y: '100%' }) 24 .position({ x: 0, y: '100%' })
60 .markAnchor({ y: '100%' }) 25 .markAnchor({ y: '100%' })
61 } 26 }
@@ -10,7 +10,7 @@ import { @@ -10,7 +10,7 @@ import {
10 import { SPHelper, ToastUtils, NumberFormatterUtils } from 'wdKit'; 10 import { SPHelper, ToastUtils, NumberFormatterUtils } from 'wdKit';
11 import { WDPlayerController } from 'wdPlayer/Index'; 11 import { WDPlayerController } from 'wdPlayer/Index';
12 import { WDRouterPage, WDRouterRule } from 'wdRouter/Index'; 12 import { WDRouterPage, WDRouterRule } from 'wdRouter/Index';
13 -import { SpConstants } from 'wdConstant/Index' 13 +import { DisplayDirection, SpConstants } from 'wdConstant/Index'
14 import { WDShare } from "wdShare" 14 import { WDShare } from "wdShare"
15 15
16 interface ILikeStyleResp { 16 interface ILikeStyleResp {
@@ -33,6 +33,7 @@ export struct PlayerRightView { @@ -33,6 +33,7 @@ export struct PlayerRightView {
33 @Consume isDragging: boolean 33 @Consume isDragging: boolean
34 @Consume showComment?: boolean 34 @Consume showComment?: boolean
35 @Consume showCommentList: boolean 35 @Consume showCommentList: boolean
  36 + @Consume displayDirection: DisplayDirection
36 @State likesStyle: number = this.contentDetailData.likesStyle // 赞样式 1红心(点赞) 2大拇指(祈福) 3蜡烛(默哀) 4置空 37 @State likesStyle: number = this.contentDetailData.likesStyle // 赞样式 1红心(点赞) 2大拇指(祈福) 3蜡烛(默哀) 4置空
37 38
38 aboutToAppear() { 39 aboutToAppear() {
@@ -164,7 +165,6 @@ export struct PlayerRightView { @@ -164,7 +165,6 @@ export struct PlayerRightView {
164 165
165 build() { 166 build() {
166 Column() { 167 Column() {
167 -  
168 this.userBuilderView() 168 this.userBuilderView()
169 this.likeBuilderView() 169 this.likeBuilderView()
170 this.collectBuilderView() 170 this.collectBuilderView()
@@ -172,15 +172,15 @@ export struct PlayerRightView { @@ -172,15 +172,15 @@ export struct PlayerRightView {
172 this.commentBuilderView() 172 this.commentBuilderView()
173 } 173 }
174 this.shareBuilderView() 174 this.shareBuilderView()
175 -  
176 } 175 }
177 // .backgroundColor(Color.Blue) 176 // .backgroundColor(Color.Blue)
178 // .height('100%') 177 // .height('100%')
179 .width(58) 178 .width(58)
180 .position({ x: '100%', y: '100%' }) 179 .position({ x: '100%', y: '100%' })
181 .markAnchor({ x: '100%', y: '100%' }) 180 .markAnchor({ x: '100%', y: '100%' })
182 - .padding({ bottom: this.showComment ? 60 : 10, right: 10 })  
183 - .visibility(this.isOpenDetail || this.isDragging ? Visibility.None : Visibility.Visible) 181 + .padding({ bottom: 10, right: 10 })
  182 + .visibility(this.isOpenDetail || this.isDragging || this.displayDirection === DisplayDirection.VIDEO_HORIZONTAL ?
  183 + Visibility.None : Visibility.Visible)
184 184
185 } 185 }
186 186
@@ -64,6 +64,7 @@ export struct PlayerTitleView { @@ -64,6 +64,7 @@ export struct PlayerTitleView {
64 .maxLines(1) 64 .maxLines(1)
65 .lineHeight(25) 65 .lineHeight(25)
66 .fontWeight(600) 66 .fontWeight(600)
  67 + .fontFamily('PingFang SC-Regular')
67 .textOverflow({ overflow: TextOverflow.Ellipsis }) 68 .textOverflow({ overflow: TextOverflow.Ellipsis })
68 69
69 if (this.getIcon()) { 70 if (this.getIcon()) {
@@ -79,6 +80,7 @@ export struct PlayerTitleView { @@ -79,6 +80,7 @@ export struct PlayerTitleView {
79 .maxLines(3) 80 .maxLines(3)
80 .lineHeight(20) 81 .lineHeight(20)
81 .fontWeight(400) 82 .fontWeight(400)
  83 + .fontFamily('PingFang SC-Regular')
82 .textOverflow({ overflow: TextOverflow.Ellipsis }) 84 .textOverflow({ overflow: TextOverflow.Ellipsis })
83 .margin({ bottom: 8 }) 85 .margin({ bottom: 8 })
84 86
@@ -95,6 +97,7 @@ export struct PlayerTitleView { @@ -95,6 +97,7 @@ export struct PlayerTitleView {
95 }) 97 })
96 .borderRadius(2) 98 .borderRadius(2)
97 .backgroundColor('#99636363') 99 .backgroundColor('#99636363')
  100 + .fontFamily('PingFang SC-Regular')
98 .fontColor(Color.White) 101 .fontColor(Color.White)
99 .fontSize(12) 102 .fontSize(12)
100 .lineHeight(14) 103 .lineHeight(14)
@@ -24,6 +24,9 @@ export class WDPlayerController { @@ -24,6 +24,9 @@ export class WDPlayerController {
24 public onCanplay?: () => void; 24 public onCanplay?: () => void;
25 public onStatusChange?: (status: number) => void; 25 public onStatusChange?: (status: number) => void;
26 public onSeekDone?: (time: number) => void; 26 public onSeekDone?: (time: number) => void;
  27 + public xComponentController?: XComponentController
  28 + public videoWidth: number = 0
  29 + public videoHeight: number = 0
27 30
28 constructor() { 31 constructor() {
29 Logger.error("初始化") 32 Logger.error("初始化")
@@ -131,11 +134,14 @@ export class WDPlayerController { @@ -131,11 +134,14 @@ export class WDPlayerController {
131 if (this.onVideoSizeChange) { 134 if (this.onVideoSizeChange) {
132 this.onVideoSizeChange(width, height); 135 this.onVideoSizeChange(width, height);
133 } 136 }
  137 + this.videoWidth = width
  138 + this.videoHeight = height
134 }) 139 })
135 } 140 }
136 141
137 public setXComponentController(controller: XComponentController) { 142 public setXComponentController(controller: XComponentController) {
138 this.surfaceId = controller.getXComponentSurfaceId() 143 this.surfaceId = controller.getXComponentSurfaceId()
  144 + this.xComponentController = controller
139 } 145 }
140 146
141 async firstPlay(url: string) { 147 async firstPlay(url: string) {
@@ -88,37 +88,29 @@ export struct WDPlayerRenderView { @@ -88,37 +88,29 @@ export struct WDPlayerRenderView {
88 this.onLoad(event) 88 this.onLoad(event)
89 } 89 }
90 }) 90 })
91 - .width('100%')// .width(this.selfSize.width)  
92 - // .height(this.selfSize.height)  
93 - .aspectRatio(this.videoWidth / this.videoHeight)  
94 - .renderFit(RenderFit.RESIZE_COVER) 91 + .width(this.selfSize.width)
  92 + .height(this.selfSize.height)
95 } 93 }
96 -  
97 .onAreaChange(() => { 94 .onAreaChange(() => {
98 this.updateLayout() 95 this.updateLayout()
99 }) 96 })
100 .backgroundColor("#000000") 97 .backgroundColor("#000000")
101 -  
102 - // .height('100%')  
103 - // .width('100%') 98 + .justifyContent(FlexAlign.Center)
  99 + .height('100%')
  100 + .width('100%')
  101 + .align(this.videoWidth > this.videoHeight ? Alignment.Top : Alignment.Center)
104 } 102 }
105 103
106 updateLayout() { 104 updateLayout() {
107 - // let info = componentUtils.getRectangleById(this.insId);  
108 - const windowRect = WindowModel.shared.getWindowProperties()?.windowRect  
109 - if (windowRect) {  
110 - const info = windowRect  
111 - if (info.width > 0 && info.height > 0 && this.videoHeight > 0 && this.videoWidth > 0) {  
112 - if (info.width / info.height > this.videoWidth / this.videoHeight) {  
113 - let scale = info.height / this.videoHeight;  
114 - this.selfSize = new Size((this.videoWidth * scale / info.width) * 100 + "%", '100%'); 105 + let info = componentUtils.getRectangleById(this.insId);
  106 + if (info.size.width > 0 && info.size.height > 0 && this.videoHeight > 0 && this.videoWidth > 0) {
  107 + if (info.size.width / info.size.height > this.videoWidth / this.videoHeight) {
  108 + let scale = info.size.height / this.videoHeight;
  109 + this.selfSize = new Size((this.videoWidth * scale / info.size.width) * 100 + "%", '100%');
115 } else { 110 } else {
116 - let scale = info.width / this.videoWidth;  
117 - this.selfSize = new Size('100%', (this.videoHeight * scale / info.height) * 100 + "%");  
118 - } 111 + let scale = info.size.width / this.videoWidth;
  112 + this.selfSize = new Size('100%', (this.videoHeight * scale / info.size.height) * 100 + "%");
119 } 113 }
120 } 114 }
121 -  
122 -  
123 } 115 }
124 } 116 }