zhenghy

播放器详情页查看视频简介弹窗

1 -// import router from '@ohos.router';  
2 -import mediaquery from '@ohos.mediaquery';  
3 -import window from '@ohos.window';  
4 -import { ContentDetailDTO, InteractDataDTO, RmhInfoDTO, UserInfoDTO } from 'wdBean';  
5 -import { Logger, SPHelper, WindowModel } from 'wdKit';  
6 -import { PlayerConstants, WDPlayerController, WDPlayerRenderView } from 'wdPlayer';  
7 -import { ContentDetailRequest, devicePLSensorManager } from 'wdDetailPlayApi';  
8 -import { PlayControlViewContainer } from '../view/PlayControlViewContainer';  
9 -import { PlayerDetailContainer } from '../view/PlayerDetailContainer';  
10 -// import { PlayViewModel } from '../viewmodel/PlayViewModel';  
11 -import { DetailContainer } from '../view/DetailContainer';  
12 -import {  
13 - batchLikeAndCollectParams,  
14 - batchLikeAndCollectResult,  
15 - postBatchAttentionStatusParams  
16 -} from 'wdDetailPlayApi/src/main/ets/request/ContentDetailRequest';  
17 -import { HttpUrlUtils } from 'wdNetwork/Index';  
18 -  
19 -const TAG = 'DetailPlayShortVideoPage';  
20 -  
21 -/**  
22 - * 详情&短视频播放页面  
23 - */  
24 -  
25 -@Component  
26 -export struct DetailPlayShortVideoPage {  
27 - // private contentId?: string = undefined  
28 - // private relId?: string = undefined  
29 - // private relType?: string = undefined  
30 - @Provide contentDetailData: ContentDetailDTO | undefined = undefined  
31 - @Provide interactData: InteractDataDTO | undefined = undefined  
32 - @Prop @Watch('currentIndexChange') currentIndex: number = 0  
33 - private index: number = 0  
34 - private playerController: WDPlayerController = new WDPlayerController();  
35 - // @Watch("urlChanged") @State url?: string = undefined  
36 - // @Watch('changeContinue') @Provide nextContId?: string = '';  
37 - // @Watch('getPlayHistory') @Provide curContId?: string = undefined;  
38 - // @Watch("playVMChanged") @Provide playVM: PlayViewModel = new PlayViewModel();  
39 - @Provide isFullScreen: boolean = false;  
40 - // @Provide canStart?: boolean = false;  
41 - // @Provide status: number = PlayerConstants.STATUS_START;  
42 - // @Provide userId: string = '';  
43 - // @Provide newsSourceName?: string = ''  
44 - // @Provide newsTitle?: string = ''  
45 - // @Provide editorName?: string = ''  
46 - // @Provide rmhInfo?: RmhInfoDTO | null = null  
47 - // @Provide userInfo?: UserInfoDTO | null = null  
48 - // @Provide message?: string = ''  
49 - // @Provide newsSummary?: string = ''  
50 - @Provide progressVal: number = 0;  
51 - @Provide videoLandScape?: number = 1; // 视频朝向, 横屏视频:1;竖屏视频:2  
52 - @Provide newsStatusOfUser: batchLikeAndCollectResult | undefined = undefined // 点赞、收藏状态  
53 - @Provide followStatus: string = '0' // 关注状态  
54 -  
55 - // playVMChanged() {  
56 - // this.url = this.playVM.url  
57 - // this.newsSourceName = this.playVM.newsSourceName  
58 - // this.newsTitle = this.playVM.newsTitle  
59 - // this.editorName = this.playVM.editorName  
60 - // this.newsSummary = this.playVM.newsSummary  
61 - // this.videoLandScape = this.playVM.videoLandScape ?? 1  
62 - // this.curContId = this.playVM.contentId  
63 - // this.nextContId = this.playVM.nextContId  
64 - // this.canStart = this.playVM.canStart;  
65 - // this.message = this.playVM.message  
66 - // this.rmhInfo = this.playVM.rmhInfo  
67 - // this.userInfo = this.playVM.userInfo  
68 - // console.error('rmhInfo', this.rmhInfo)  
69 - // console.error('userInfo', this.userInfo)  
70 - // }  
71 -  
72 - currentIndexChange() {  
73 - if (this.currentIndex != this.index) {  
74 - this.playerController.pause()  
75 -  
76 - if (this.index < this.currentIndex - 5 && this.playerController.getPlayer()) {  
77 - this.playerController.release()  
78 - }  
79 -  
80 - } else {  
81 - console.log('currentIndexChange====1', this.currentIndex)  
82 - this.playerController.play()  
83 - this.queryNewsInfoOfUser()  
84 -  
85 - }  
86 - }  
87 -  
88 - /**  
89 - * 查询用户点赞、收藏、关注等状态  
90 - */  
91 - queryNewsInfoOfUser() {  
92 - if (HttpUrlUtils.getUserId()) {  
93 - const params: batchLikeAndCollectParams = {  
94 - contentList: [  
95 - {  
96 - contentId: this.contentDetailData?.newsId + '',  
97 - contentType: this.contentDetailData?.newsType + '',  
98 - }  
99 - ]  
100 - }  
101 - // 已登录->查询用户对作品点赞、收藏状态  
102 - ContentDetailRequest.postBatchLikeAndCollectStatus(params).then(res => {  
103 - console.log('查询点赞、收藏状态==', JSON.stringify(res.data))  
104 - if (res.data) {  
105 - this.newsStatusOfUser = res.data[0]  
106 - }  
107 - })  
108 -  
109 - const params1: postBatchAttentionStatusParams = {  
110 - creatorIds: [{ creatorId: this.contentDetailData?.rmhInfo?.rmhId ?? '' }]  
111 - }  
112 - // 已登录->批量查作品是否被号主关注  
113 - ContentDetailRequest.postBatchAttentionStatus(params1).then(res => {  
114 - console.log('批量查号主是否为用户关注==', JSON.stringify(res.data))  
115 - if (res.data) {  
116 - this.followStatus = res.data[0]?.status  
117 - }  
118 - })  
119 - }  
120 - }  
121 -  
122 - aboutToAppear() {  
123 - console.log('开始设置setContentDetailData', JSON.stringify(this.contentDetailData))  
124 -  
125 - // this.playVM.setContentDetailData(this.contentDetailData)  
126 -  
127 - // this.playVMChanged()  
128 - this.queryNewsInfoOfUser()  
129 - this.playerController.onCanplay = () => {  
130 - if (this.index == 0 || this.currentIndex === this.index) {  
131 - this.videoLandScape = this.contentDetailData?.videoInfo[0]?.videoLandScape  
132 - this.playerController.firstPlay(this.contentDetailData?.videoInfo[0]?.videoUrl);  
133 - this.playerController.play()  
134 - }  
135 - }  
136 -  
137 - // 设置播放地址  
138 - // this.url = 'https://media.w3.org/2010/05/sintel/trailer.mp4'  
139 - let listener = mediaquery.matchMediaSync('(orientation: landscape)');  
140 - listener.on("change", (mediaQueryResult) => {  
141 - if (mediaQueryResult.matches) {  
142 - console.log("横屏 yes")  
143 - this.isFullScreen = true  
144 - } else {  
145 - this.isFullScreen = false  
146 - console.log("横屏 no")  
147 - }  
148 - // WindowModel.shared.setMainWindowFullScreen(this.isFullScreen)  
149 - })  
150 -  
151 - }  
152 -  
153 - onPageShow() {  
154 - // WindowModel.shared.setPreferredOrientation(window.Orientation.AUTO_ROTATION_RESTRICTED);  
155 - }  
156 -  
157 - aboutToDisappear(): void {  
158 - this.playerController?.pause();  
159 - }  
160 -  
161 - onPageHide() {  
162 - // WindowModel.shared.setPreferredOrientation(window.Orientation.PORTRAIT);  
163 - devicePLSensorManager.devicePLSensorOff();  
164 - // this.status = PlayerConstants.STATUS_PAUSE;  
165 - this.playerController?.pause();  
166 - }  
167 -  
168 - @Builder  
169 - playerViewContainerBuilder() {  
170 - // 播放窗口  
171 - WDPlayerRenderView({  
172 - playerController: this.playerController,  
173 - onLoad: async () => {  
174 - console.log('onload==', this.contentId, this.relId, this.relType)  
175 -  
176 - }  
177 - })  
178 - .height('100%')  
179 - .width('100%')  
180 - .onClick(() => {  
181 - console.error('WDPlayerRenderView=== onClick')  
182 - this.playerController?.switchPlayOrPause();  
183 - })  
184 - }  
185 -  
186 - @Builder  
187 - playControlViewContainerBuilder() {  
188 - // 播放窗口控制bar  
189 - PlayControlViewContainer({  
190 - playerController: this.playerController  
191 - })  
192 - }  
193 -  
194 - @Builder  
195 - detailContainerBuilder() {  
196 - // DetailTabBarPageComponent({ pageId: this.pageId }).backgroundColor(Color.Black)  
197 - DetailContainer({  
198 - playerController: this.playerController  
199 - })  
200 - }  
201 -  
202 - build() {  
203 - Row() {  
204 - PlayerDetailContainer({  
205 - playerView: () => {  
206 - this.playerViewContainerBuilder()  
207 - }, playControlView: () => {  
208 - // this.playControlViewContainerBuilder()  
209 - }, detailView: () => {  
210 - this.detailContainerBuilder()  
211 - }  
212 - })  
213 - .height('100%')  
214 - .width('100%')  
215 - .onClick(() => {  
216 - console.error('PlayerDetailContainer=== onClick')  
217 - this.playerController?.switchPlayOrPause();  
218 - })  
219 - }  
220 - .height('100%')  
221 - .width('100%')  
222 -  
223 - .backgroundColor(Color.Black)  
224 - }  
225 -  
226 - // 续播判断  
227 - // changeContinue() {  
228 - // if (this.nextContId) {  
229 - // this.playerController.continue = () => {  
230 - // this.playerController?.stop();  
231 - // // this.playVM.playWithContentId(this.nextContId ?? '');  
232 - // }  
233 - // return;  
234 - // }  
235 - // this.playerController.continue = undefined;  
236 - // }  
237 -  
238 - // urlChanged() {  
239 - // console.error('urlChanged===')  
240 - // if (this.url) {  
241 - // this.status = PlayerConstants.STATUS_START;  
242 - // this.playerController.firstPlay(this.url);  
243 - // }  
244 - // }  
245 -  
246 - // getPlayHistory() {  
247 - // SPHelper.default.get('playHistory', '').then((str) => {  
248 - // let result = str.toString();  
249 - // let time = 0;  
250 - // if (result != null && result != "") {  
251 - // let playHistory: Record<string, Record<string, number>> = JSON.parse(result);  
252 - // let userData: Record<string, number> = {};  
253 - // if (this.userId) {  
254 - // userData = playHistory[this.userId] ?? {};  
255 - // }  
256 - // if (this.curContId) {  
257 - // time = userData?.[this.curContId] ?? 0;  
258 - // }  
259 - // }  
260 - // this.playerController?.setStartTime(time);  
261 - // }).catch((err: Error) => {  
262 - // // Error: Inner error. Error code 15500000  
263 - // Logger.error(TAG, 'catch err:' + JSON.stringify(err));  
264 - // this.playerController?.setStartTime(0);  
265 - // });  
266 - // }  
267 -}  
  1 +@CustomDialog
  2 +export struct DetailDialog {
  3 + controller: CustomDialogController
  4 + @Prop name: string
  5 + @Prop title: string
  6 + @Prop summary: string
  7 + @Link isOpen: boolean
  8 +
  9 + build() {
  10 + Column() {
  11 + if (this.name + '1222222') {
  12 + Text(`@${this.name}` + '1222222')
  13 + .fontColor(Color.White)
  14 + .fontSize(14)
  15 + .fontWeight(600)
  16 + .lineHeight(17)
  17 + }
  18 +
  19 + if (this.title) {
  20 + Text(this.title)
  21 + .fontColor(Color.White)
  22 + .fontSize(16)
  23 + .fontWeight(600)
  24 + .margin({ top: 8 })
  25 + .lineHeight(24)
  26 + }
  27 +
  28 + Text(this.summary)
  29 + .fontColor(Color.White)
  30 + .fontSize(14)
  31 + .fontWeight(400)
  32 + .margin({ top: 8 })
  33 + .lineHeight(21)
  34 +
  35 + Row() {
  36 + Image($r('app.media.ic_close'))
  37 + .height(24).margin({ top: 20 }).onClick(() => {
  38 + this.controller.close()
  39 + if (this.isOpen) {
  40 + this.isOpen = !this.isOpen
  41 + }
  42 + })
  43 + }.width('100%').justifyContent(FlexAlign.Center)
  44 +
  45 + }
  46 + .width('100%')
  47 + .alignItems(HorizontalAlign.Start)
  48 + .backgroundColor(Color.Gray)
  49 + // .linearGradient({
  50 + // direction: GradientDirection.Top, // 渐变方向
  51 + // repeating: false, // 渐变颜色是否重复
  52 + // colors: [['rgba(0, 0, 0, 0.1)', 0.0], ['rgba(0, 0, 0, 0)', 1.0]] // 数组末尾元素占比小于1时满足重复着色效果
  53 + // })
  54 + .padding({ top: 20, bottom: 30, left: 16, right: 16 })
  55 + }
  56 +}
@@ -198,7 +198,7 @@ export struct OperationListView { @@ -198,7 +198,7 @@ export struct OperationListView {
198 198
199 }.height(60) 199 }.height(60)
200 } 200 }
201 - }.margin({ bottom: 30 }) 201 + }.margin({ bottom: 18 })
202 } 202 }
203 203
204 @Builder 204 @Builder
@@ -6,6 +6,7 @@ import { WDPlayerController } from 'wdPlayer'; @@ -6,6 +6,7 @@ import { WDPlayerController } from 'wdPlayer';
6 import { devicePLSensorManager } from 'wdDetailPlayApi'; 6 import { devicePLSensorManager } from 'wdDetailPlayApi';
7 import { OperationListView } from './OperationListView'; 7 import { OperationListView } from './OperationListView';
8 import { ContentDetailDTO, RmhInfoDTO, UserInfoDTO } from 'wdBean/Index'; 8 import { ContentDetailDTO, RmhInfoDTO, UserInfoDTO } from 'wdBean/Index';
  9 +import { DetailDialog } from './DetailDialog';
9 10
10 @Component 11 @Component
11 export struct PlayerTitleComment { 12 export struct PlayerTitleComment {
@@ -16,8 +17,22 @@ export struct PlayerTitleComment { @@ -16,8 +17,22 @@ export struct PlayerTitleComment {
16 @Consume isFullScreen: boolean; 17 @Consume isFullScreen: boolean;
17 @Consume progressVal: number; 18 @Consume progressVal: number;
18 @Consume videoLandScape?: number 19 @Consume videoLandScape?: number
  20 + @State isOpen: boolean = false
  21 + dialogController: CustomDialogController = new CustomDialogController({
  22 + builder: DetailDialog({
  23 + name: this.getName(),
  24 + title: this.getTitle(),
  25 + summary: this.getSummary(),
  26 + isOpen: this.isOpen
  27 +
  28 + }),
  29 + autoCancel: false,
  30 + customStyle: true,
  31 + alignment: DialogAlignment.Bottom
  32 + })
19 33
20 aboutToAppear() { 34 aboutToAppear() {
  35 +
21 } 36 }
22 37
23 watchSpeed() { 38 watchSpeed() {
@@ -25,42 +40,50 @@ export struct PlayerTitleComment { @@ -25,42 +40,50 @@ export struct PlayerTitleComment {
25 } 40 }
26 41
27 getName() { 42 getName() {
28 - return this.contentDetailData?.newsSourceName || this.contentDetailData?.editorName 43 + return this.contentDetailData?.newsSourceName || this.contentDetailData?.editorName || ''
29 } 44 }
30 45
31 getTitle() { 46 getTitle() {
32 - return this.contentDetailData?.newsTitle || this.contentDetailData?.newsSummary 47 + return this.contentDetailData?.newsTitle || this.contentDetailData?.newsSummary || ''
  48 + }
  49 +
  50 + getSummary() {
  51 + return this.contentDetailData?.newsSummary || ''
33 } 52 }
34 53
35 build() { 54 build() {
36 Column() { 55 Column() {
37 - // Column() {  
38 - // Row() {  
39 - // Image($r('app.media.ic_switch_orientation'))  
40 - // .width(34)  
41 - // .aspectRatio(1)  
42 - // .objectFit(ImageFit.Contain)  
43 - // .padding({ left: 10, right: 5 })  
44 - // Text("全屏观看")  
45 - // .fontColor(Color.White)  
46 - // .fontSize('14fp')  
47 - // .maxLines(2)  
48 - // .layoutWeight(1)  
49 - // }  
50 - // .width(100)  
51 - // .backgroundColor(Color.Gray)  
52 - // .borderRadius(10)  
53 - // .alignItems(VerticalAlign.Center)  
54 - // .visibility(this.videoLandScape == 2 ? Visibility.Hidden : Visibility.Visible)  
55 - // .onClick(() => {  
56 - // this.isFullScreen = !this.isFullScreen;  
57 - // WindowModel.shared.setPreferredOrientation(window.Orientation.LANDSCAPE);  
58 - // devicePLSensorManager.devicePLSensorOn(window.Orientation.LANDSCAPE);  
59 - // })  
60 - // }  
61 - // .width('100%')  
62 - // // .margin({ bottom: 120 })  
63 - // .alignItems(HorizontalAlign.Center) 56 +
  57 + if (this.contentDetailData?.videoInfo[0]?.videoLandScape === 1) {
  58 + Column() {
  59 + Row() {
  60 + Image($r('app.media.ic_switch_orientation'))
  61 + .width(34)
  62 + .aspectRatio(1)
  63 + .objectFit(ImageFit.Contain)
  64 + .padding({ left: 10, right: 5 })
  65 + Text("全屏观看")
  66 + .fontColor(Color.White)
  67 + .fontSize('14fp')
  68 + .maxLines(2)
  69 + .layoutWeight(1)
  70 + }
  71 + .width(100)
  72 + .backgroundColor(Color.Gray)
  73 + .borderRadius(10)
  74 + .alignItems(VerticalAlign.Center)
  75 + .visibility(this.videoLandScape == 2 ? Visibility.Hidden : Visibility.Visible)
  76 + .onClick(() => {
  77 + this.isFullScreen = !this.isFullScreen;
  78 + WindowModel.shared.setPreferredOrientation(window.Orientation.LANDSCAPE);
  79 + devicePLSensorManager.devicePLSensorOn(window.Orientation.LANDSCAPE);
  80 + })
  81 + }
  82 + .width('100%')
  83 + // .margin({ bottom: 120 })
  84 + .alignItems(HorizontalAlign.Center)
  85 + }
  86 +
64 87
65 Row() { 88 Row() {
66 Column() { 89 Column() {
@@ -79,11 +102,22 @@ export struct PlayerTitleComment { @@ -79,11 +102,22 @@ export struct PlayerTitleComment {
79 .textOverflow({ overflow: TextOverflow.Ellipsis }) 102 .textOverflow({ overflow: TextOverflow.Ellipsis })
80 } 103 }
81 104
  105 +
  106 + if (this.contentDetailData?.newsSummary) {
82 Text('查看详情 > ') 107 Text('查看详情 > ')
83 - .margin({ top: 5 }) 108 + .margin({ top: 8 })
  109 + .padding(6)
  110 + .borderRadius(2)
  111 + .backgroundColor('#636363')
84 .fontColor(Color.White) 112 .fontColor(Color.White)
85 .fontSize(12) 113 .fontSize(12)
86 - .maxLines(2) 114 + .onClick(() => {
  115 + console.log('click===', this.dialogController?.open)
  116 + this.isOpen = true
  117 + this.dialogController?.open()
  118 + })
  119 + }
  120 +
87 } 121 }
88 .layoutWeight(1) 122 .layoutWeight(1)
89 .alignItems(HorizontalAlign.Start) 123 .alignItems(HorizontalAlign.Start)
@@ -117,25 +151,7 @@ export struct PlayerTitleComment { @@ -117,25 +151,7 @@ export struct PlayerTitleComment {
117 .height(24) 151 .height(24)
118 .aspectRatio(1) 152 .aspectRatio(1)
119 .onClick(() => { 153 .onClick(() => {
120 - if (this.isFullScreen) {  
121 - if (deviceInfo.deviceType != "phone") {  
122 - WindowModel.shared.getWindowSize().then((size) => {  
123 - if (size.width > size.height) {  
124 router.back(); 154 router.back();
125 - } else {  
126 - this.isFullScreen = !this.isFullScreen;  
127 - WindowModel.shared.setPreferredOrientation(window.Orientation.PORTRAIT);  
128 - devicePLSensorManager.devicePLSensorOn(window.Orientation.PORTRAIT);  
129 - }  
130 - })  
131 - } else {  
132 - this.isFullScreen = !this.isFullScreen;  
133 - WindowModel.shared.setPreferredOrientation(window.Orientation.PORTRAIT);  
134 - devicePLSensorManager.devicePLSensorOn(window.Orientation.PORTRAIT);  
135 - }  
136 - } else {  
137 - router.back();  
138 - }  
139 }) 155 })
140 156
141 TextInput({ placeholder: '说两句...', text: this.comment }) 157 TextInput({ placeholder: '说两句...', text: this.comment })
@@ -158,5 +174,8 @@ export struct PlayerTitleComment { @@ -158,5 +174,8 @@ export struct PlayerTitleComment {
158 .width('100%') 174 .width('100%')
159 // .height('40%') 175 // .height('40%')
160 .alignItems(HorizontalAlign.Start) 176 .alignItems(HorizontalAlign.Start)
  177 + .opacity(this.isOpen ? 0 : 1)
  178 + .animation({ duration: 200 })
161 } 179 }
162 } 180 }
  181 +