Showing
7 changed files
with
76 additions
and
28 deletions
| @@ -50,6 +50,8 @@ export struct OperRowListView { | @@ -50,6 +50,8 @@ export struct OperRowListView { | ||
| 50 | } | 50 | } |
| 51 | private onCommentFocus: () => void = () => { | 51 | private onCommentFocus: () => void = () => { |
| 52 | } | 52 | } |
| 53 | + private onCommentIconClick: () => void = () => { | ||
| 54 | + } | ||
| 53 | @Prop @Watch('onDetailUpdated') contentDetailData: ContentDetailDTO // 稿件详情 | 55 | @Prop @Watch('onDetailUpdated') contentDetailData: ContentDetailDTO // 稿件详情 |
| 54 | /** | 56 | /** |
| 55 | * 组件样式类型,根据详情页类型传值,组件内部根据样式展现类型做判断 | 57 | * 组件样式类型,根据详情页类型传值,组件内部根据样式展现类型做判断 |
| @@ -205,6 +207,9 @@ export struct OperRowListView { | @@ -205,6 +207,9 @@ export struct OperRowListView { | ||
| 205 | Column() { | 207 | Column() { |
| 206 | if (this.publishCommentModel?.targetId) { | 208 | if (this.publishCommentModel?.targetId) { |
| 207 | CommentIconComponent({ publishCommentModel: this.publishCommentModel, styleType: this.styleType }) | 209 | CommentIconComponent({ publishCommentModel: this.publishCommentModel, styleType: this.styleType }) |
| 210 | + .onClick(() => { | ||
| 211 | + this.onCommentIconClick() | ||
| 212 | + }) | ||
| 208 | } | 213 | } |
| 209 | } | 214 | } |
| 210 | .width(46) | 215 | .width(46) |
| @@ -393,9 +398,9 @@ export struct OperRowListView { | @@ -393,9 +398,9 @@ export struct OperRowListView { | ||
| 393 | contentType: this.contentDetailData?.newsType, | 398 | contentType: this.contentDetailData?.newsType, |
| 394 | }] | 399 | }] |
| 395 | } | 400 | } |
| 396 | - console.log(TAG, '点赞点击', JSON.stringify(params)) | 401 | + console.log(TAG, '查询点赞、收藏数量', JSON.stringify(params)) |
| 397 | PageRepository.getContentInteract(params).then(res => { | 402 | PageRepository.getContentInteract(params).then(res => { |
| 398 | - console.log(TAG, '点赞点击 res', JSON.stringify(res)) | 403 | + console.log(TAG, '查询点赞、收藏数量 res', JSON.stringify(res)) |
| 399 | if (res.data) { | 404 | if (res.data) { |
| 400 | this.interactData.likeNum = NumberFormatterUtils.formatNumberWithWan(res.data[0]?.likeNum) | 405 | this.interactData.likeNum = NumberFormatterUtils.formatNumberWithWan(res.data[0]?.likeNum) |
| 401 | this.interactData.collectNum = NumberFormatterUtils.formatNumberWithWan(res.data[0]?.collectNum) | 406 | this.interactData.collectNum = NumberFormatterUtils.formatNumberWithWan(res.data[0]?.collectNum) |
| @@ -49,6 +49,7 @@ export struct DetailPlayShortVideoPage { | @@ -49,6 +49,7 @@ export struct DetailPlayShortVideoPage { | ||
| 49 | @Consume showComment: boolean // 是否显示底部评论,首页视频频道传false | 49 | @Consume showComment: boolean // 是否显示底部评论,首页视频频道传false |
| 50 | @State imageVisible: boolean = true | 50 | @State imageVisible: boolean = true |
| 51 | @State publishCommentModel: publishCommentModel = new publishCommentModel() | 51 | @State publishCommentModel: publishCommentModel = new publishCommentModel() |
| 52 | + @State ratio: number = 16 / 9 | ||
| 52 | 53 | ||
| 53 | /** | 54 | /** |
| 54 | * 页面显示重查用户关注、点赞等信息 | 55 | * 页面显示重查用户关注、点赞等信息 |
| @@ -149,8 +150,11 @@ export struct DetailPlayShortVideoPage { | @@ -149,8 +150,11 @@ export struct DetailPlayShortVideoPage { | ||
| 149 | } | 150 | } |
| 150 | 151 | ||
| 151 | aboutToAppear() { | 152 | aboutToAppear() { |
| 152 | - this.videoLandScape = this.contentDetailData?.videoInfo[0]?.videoLandScape | 153 | + this.videoLandScape = this.contentDetailData.videoInfo[0]?.videoLandScape |
| 154 | + this.ratio = this.contentDetailData.videoInfo[0].resolutionWidth / | ||
| 155 | + this.contentDetailData.videoInfo[0].resolutionHeight | ||
| 153 | this.playerController.onCanplay = () => { | 156 | this.playerController.onCanplay = () => { |
| 157 | + this.ratio = this.playerController.videoWidth / this.playerController.videoHeight | ||
| 154 | if ((this.index == 0 || this.currentIndex === this.index) && this.switchVideoStatus) { | 158 | if ((this.index == 0 || this.currentIndex === this.index) && this.switchVideoStatus) { |
| 155 | this.playerController.play() | 159 | this.playerController.play() |
| 156 | this.imageVisible = false | 160 | this.imageVisible = false |
| @@ -179,6 +183,7 @@ export struct DetailPlayShortVideoPage { | @@ -179,6 +183,7 @@ export struct DetailPlayShortVideoPage { | ||
| 179 | } | 183 | } |
| 180 | 184 | ||
| 181 | build() { | 185 | build() { |
| 186 | + Stack({ alignContent: Alignment.Top }) { | ||
| 182 | Column() { | 187 | Column() { |
| 183 | Stack() { | 188 | Stack() { |
| 184 | // this.playerCoverBuilder() | 189 | // this.playerCoverBuilder() |
| @@ -187,29 +192,19 @@ export struct DetailPlayShortVideoPage { | @@ -187,29 +192,19 @@ export struct DetailPlayShortVideoPage { | ||
| 187 | PlayerBottomView({ | 192 | PlayerBottomView({ |
| 188 | playerController: this.playerController | 193 | playerController: this.playerController |
| 189 | }) | 194 | }) |
| 190 | - .position({ x: 0, y: '100%' }) | ||
| 191 | - .markAnchor({ y: '100%' }) | ||
| 192 | - .visibility(this.displayDirection === DisplayDirection.VERTICAL ? | ||
| 193 | - Visibility.Visible : Visibility.None) | ||
| 194 | 195 | ||
| 195 | PlayerRightView({ | 196 | PlayerRightView({ |
| 196 | playerController: this.playerController | 197 | playerController: this.playerController |
| 197 | }) | 198 | }) |
| 198 | 199 | ||
| 199 | - | ||
| 200 | - CommentComponentPage({}).visibility(this.showCommentList ? Visibility.Visible : Visibility.None) | ||
| 201 | - .position({ y: '100%' }) | ||
| 202 | - .markAnchor({ y: '100%' }) | ||
| 203 | } | 200 | } |
| 204 | - .width(this.displayDirection === DisplayDirection.VERTICAL ? '100%' : 'auto') | ||
| 205 | - .height(this.displayDirection === DisplayDirection.VERTICAL ? 'auto' : '100%') | ||
| 206 | .layoutWeight(1) | 201 | .layoutWeight(1) |
| 207 | .onClick(() => { | 202 | .onClick(() => { |
| 208 | this.playerController?.switchPlayOrPause(); | 203 | this.playerController?.switchPlayOrPause(); |
| 209 | }) | 204 | }) |
| 210 | 205 | ||
| 211 | // 显示评论且非全屏模式(视频频道无评论showComment=false) | 206 | // 显示评论且非全屏模式(视频频道无评论showComment=false) |
| 212 | - if (this.showComment && this.displayDirection === DisplayDirection.VERTICAL && this.index === this.currentIndex) { | 207 | + if (this.showComment && this.displayDirection === DisplayDirection.VERTICAL) { |
| 213 | OperRowListView({ | 208 | OperRowListView({ |
| 214 | pageComponentType: 1, | 209 | pageComponentType: 1, |
| 215 | styleType: 3, | 210 | styleType: 3, |
| @@ -228,8 +223,18 @@ export struct DetailPlayShortVideoPage { | @@ -228,8 +223,18 @@ export struct DetailPlayShortVideoPage { | ||
| 228 | .height('100%') | 223 | .height('100%') |
| 229 | .width('100%') | 224 | .width('100%') |
| 230 | .padding({ | 225 | .padding({ |
| 231 | - top: this.topSafeHeight + 'px' | 226 | + top: this.displayDirection === DisplayDirection.VIDEO_HORIZONTAL ? 0 : this.topSafeHeight + 'px' |
| 232 | }) | 227 | }) |
| 228 | + | ||
| 229 | + if (this.showCommentList) { | ||
| 230 | + CommentComponentPage({}) | ||
| 231 | + .position({ y: '100%' }) | ||
| 232 | + .markAnchor({ y: '100%' }) | ||
| 233 | + } | ||
| 234 | + } | ||
| 235 | + .height('100%') | ||
| 236 | + .width('100%') | ||
| 237 | + | ||
| 233 | } | 238 | } |
| 234 | 239 | ||
| 235 | /** | 240 | /** |
| @@ -261,16 +266,26 @@ export struct DetailPlayShortVideoPage { | @@ -261,16 +266,26 @@ export struct DetailPlayShortVideoPage { | ||
| 261 | } | 266 | } |
| 262 | } | 267 | } |
| 263 | }) | 268 | }) |
| 264 | - .height(this.videoLandScape === 1 ? 210 : 'auto')// .height(this.videoLandScape === 1 ? 210 : '100%') | ||
| 265 | .width('100%') | 269 | .width('100%') |
| 270 | + .height(this.windowWidth / this.ratio + 'px') | ||
| 271 | + | ||
| 272 | + // .height(this.displayDirection === DisplayDirection.VIDEO_HORIZONTAL ? '100%' : | ||
| 273 | + // this.videoLandScape === 1 ? 210 : 'auto')// .height(this.videoLandScape === 1 ? 210 : '100%') | ||
| 274 | + // .width(this.videoLandScape === 1 ? | ||
| 275 | + // this.playerController.videoWidth / this.playerController.videoHeight * this.windowHeight + 'px' : '100%') | ||
| 276 | + // .height(this.videoLandScape === 1 ? 210 : | ||
| 277 | + // this.playerController.videoHeight / this.playerController.videoWidth * this.windowWidth + 'px') | ||
| 266 | 278 | ||
| 267 | // 横屏-全屏观看 | 279 | // 横屏-全屏观看 |
| 268 | if (this.videoLandScape === 1) { | 280 | if (this.videoLandScape === 1) { |
| 269 | this.playerFullscreenBuilder() | 281 | this.playerFullscreenBuilder() |
| 270 | } | 282 | } |
| 271 | } | 283 | } |
| 272 | - .width(this.displayDirection === DisplayDirection.VIDEO_HORIZONTAL ? 'auto' : '100%') | ||
| 273 | - .height(this.displayDirection === DisplayDirection.VIDEO_HORIZONTAL ? '100%' : 'auto') | 284 | + .width('100%') |
| 285 | + .height('100%') | ||
| 286 | + // .width(this.displayDirection === DisplayDirection.VIDEO_HORIZONTAL ? | ||
| 287 | + // this.playerController.videoWidth / this.playerController.videoHeight * this.windowHeight + 'px' : '100%') | ||
| 288 | + // .height(this.displayDirection === DisplayDirection.VIDEO_HORIZONTAL ? '100%' : 'auto') | ||
| 274 | .align(this.videoLandScape === 1 ? Alignment.Center : Alignment.Top) | 289 | .align(this.videoLandScape === 1 ? Alignment.Center : Alignment.Top) |
| 275 | 290 | ||
| 276 | } | 291 | } |
| @@ -295,14 +310,14 @@ export struct DetailPlayShortVideoPage { | @@ -295,14 +310,14 @@ export struct DetailPlayShortVideoPage { | ||
| 295 | .alignItems(VerticalAlign.Center) | 310 | .alignItems(VerticalAlign.Center) |
| 296 | .justifyContent(FlexAlign.Center) | 311 | .justifyContent(FlexAlign.Center) |
| 297 | .align(Alignment.Bottom) | 312 | .align(Alignment.Bottom) |
| 298 | - .margin({ top: 230 }) | 313 | + .margin({ top: 280 }) |
| 299 | .onClick(() => { | 314 | .onClick(() => { |
| 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) | 315 | + // this.displayDirection = |
| 316 | + // this.displayDirection === DisplayDirection.VERTICAL ? DisplayDirection.VIDEO_HORIZONTAL : | ||
| 317 | + // DisplayDirection.VERTICAL | ||
| 318 | + // WindowModel.shared.setPreferredOrientation(this.displayDirection == DisplayDirection.VERTICAL ? | ||
| 319 | + // window.Orientation.PORTRAIT : | ||
| 320 | + // window.Orientation.LANDSCAPE_INVERTED) | ||
| 306 | 321 | ||
| 307 | // this.playerController.xComponentController?.setXComponentSurfaceRect({ | 322 | // this.playerController.xComponentController?.setXComponentSurfaceRect({ |
| 308 | // surfaceWidth: px2vp(this.windowHeight), | 323 | // surfaceWidth: px2vp(this.windowHeight), |
| @@ -174,7 +174,7 @@ export struct DetailVideoListPage { | @@ -174,7 +174,7 @@ export struct DetailVideoListPage { | ||
| 174 | }) | 174 | }) |
| 175 | }, (item: ContentDetailDTO) => item.newsId + '') | 175 | }, (item: ContentDetailDTO) => item.newsId + '') |
| 176 | } | 176 | } |
| 177 | - .disableSwipe(this.displayDirection === DisplayDirection.VERTICAL ? false : true) | 177 | + .disableSwipe(this.displayDirection === DisplayDirection.VERTICAL || !this.showComment ? false : true) |
| 178 | .indicator(false) | 178 | .indicator(false) |
| 179 | .vertical(true) | 179 | .vertical(true) |
| 180 | .loop(false) | 180 | .loop(false) |
| @@ -269,7 +269,7 @@ export struct VideoChannelDetail { | @@ -269,7 +269,7 @@ export struct VideoChannelDetail { | ||
| 269 | }, (item: ContentDetailDTO) => item.newsId + '') | 269 | }, (item: ContentDetailDTO) => item.newsId + '') |
| 270 | } | 270 | } |
| 271 | .displayCount(1, true) | 271 | .displayCount(1, true) |
| 272 | - .disableSwipe(this.displayDirection === DisplayDirection.VERTICAL ? false : true) | 272 | + .disableSwipe(this.displayDirection === DisplayDirection.VERTICAL || !this.showComment ? false : true) |
| 273 | .visibility(this.isMouted ? Visibility.Visible : Visibility.None) | 273 | .visibility(this.isMouted ? Visibility.Visible : Visibility.None) |
| 274 | .indicator(false) | 274 | .indicator(false) |
| 275 | .vertical(true) | 275 | .vertical(true) |
| 1 | import { ContentDetailDTO } from 'wdBean/Index' | 1 | import { ContentDetailDTO } from 'wdBean/Index' |
| 2 | +import { WindowModel } from 'wdKit/Index' | ||
| 2 | import { | 3 | import { |
| 3 | publishCommentModel | 4 | publishCommentModel |
| 4 | } from '../../../../../wdComponent/src/main/ets/components/comment/model/PublishCommentModel' | 5 | } from '../../../../../wdComponent/src/main/ets/components/comment/model/PublishCommentModel' |
| 5 | import { CommentComponent } from '../../../../../wdComponent/src/main/ets/components/comment/view/CommentComponent' | 6 | import { CommentComponent } from '../../../../../wdComponent/src/main/ets/components/comment/view/CommentComponent' |
| 6 | 7 | ||
| 8 | +import { OperRowListView } from '../../../../../wdComponent/src/main/ets/components/view/OperRowListView' | ||
| 9 | + | ||
| 7 | @Component | 10 | @Component |
| 8 | export struct CommentComponentPage { | 11 | export struct CommentComponentPage { |
| 9 | scroller: Scroller = new Scroller() | 12 | scroller: Scroller = new Scroller() |
| @@ -20,9 +23,11 @@ export struct CommentComponentPage { | @@ -20,9 +23,11 @@ export struct CommentComponentPage { | ||
| 20 | this.publishCommentModel.targetRelObjectId = String(this.contentDetailData?.reLInfo?.relObjectId) | 23 | this.publishCommentModel.targetRelObjectId = String(this.contentDetailData?.reLInfo?.relObjectId) |
| 21 | this.publishCommentModel.keyArticle = String(this.contentDetailData?.keyArticle) | 24 | this.publishCommentModel.keyArticle = String(this.contentDetailData?.keyArticle) |
| 22 | this.publishCommentModel.targetType = String(this.contentDetailData?.newsType) | 25 | this.publishCommentModel.targetType = String(this.contentDetailData?.newsType) |
| 26 | + this.publishCommentModel.visitorComment = String(this.contentDetailData?.visitorComment) | ||
| 23 | } | 27 | } |
| 24 | 28 | ||
| 25 | build() { | 29 | build() { |
| 30 | + Column() { | ||
| 26 | Scroll(this.scroller) { | 31 | Scroll(this.scroller) { |
| 27 | Stack() { | 32 | Stack() { |
| 28 | CommentComponent({ | 33 | CommentComponent({ |
| @@ -34,14 +39,29 @@ export struct CommentComponentPage { | @@ -34,14 +39,29 @@ export struct CommentComponentPage { | ||
| 34 | .onClick(() => { | 39 | .onClick(() => { |
| 35 | this.showCommentList = false | 40 | this.showCommentList = false |
| 36 | }) | 41 | }) |
| 37 | - .margin({ top: 10, right: 20 }) | 42 | + .margin({ top: 10, right: 30 }) |
| 38 | .position({ x: '100%' }) | 43 | .position({ x: '100%' }) |
| 39 | .markAnchor({ x: '100%' }) | 44 | .markAnchor({ x: '100%' }) |
| 40 | 45 | ||
| 41 | } | 46 | } |
| 42 | } | 47 | } |
| 48 | + .layoutWeight(1) | ||
| 49 | + | ||
| 50 | + OperRowListView({ | ||
| 51 | + componentType: 1, | ||
| 52 | + operationButtonList: ['comment', 'like', 'collect', 'share'], | ||
| 53 | + contentDetailData: this.contentDetailData, | ||
| 54 | + publishCommentModel: this.publishCommentModel, | ||
| 55 | + showCommentIcon: true, | ||
| 56 | + onBack: () => { | ||
| 57 | + WindowModel.shared.setWindowLayoutFullScreen(false) | ||
| 58 | + WindowModel.shared.setWindowSystemBarProperties({ statusBarContentColor: '#000000', }) | ||
| 59 | + } | ||
| 60 | + }) | ||
| 61 | + } | ||
| 43 | .zIndex(1000) | 62 | .zIndex(1000) |
| 44 | .backgroundColor(Color.White) | 63 | .backgroundColor(Color.White) |
| 64 | + .height('60%') | ||
| 45 | 65 | ||
| 46 | } | 66 | } |
| 47 | } | 67 | } |
| @@ -2,6 +2,7 @@ import { WDPlayerController } from 'wdPlayer/Index'; | @@ -2,6 +2,7 @@ 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 { ContentDetailDTO } from 'wdBean/Index'; | 4 | import { ContentDetailDTO } from 'wdBean/Index'; |
| 5 | +import { DisplayDirection } from 'wdConstant/Index'; | ||
| 5 | 6 | ||
| 6 | @Component | 7 | @Component |
| 7 | export struct PlayerBottomView { | 8 | export struct PlayerBottomView { |
| @@ -11,6 +12,7 @@ export struct PlayerBottomView { | @@ -11,6 +12,7 @@ export struct PlayerBottomView { | ||
| 11 | @Consume isOpenDetail?: boolean | 12 | @Consume isOpenDetail?: boolean |
| 12 | @Consume isDragging?: boolean | 13 | @Consume isDragging?: boolean |
| 13 | @Consume contentDetailData: ContentDetailDTO | 14 | @Consume contentDetailData: ContentDetailDTO |
| 15 | + @Consume displayDirection: DisplayDirection | ||
| 14 | 16 | ||
| 15 | aboutToAppear(): void { | 17 | aboutToAppear(): void { |
| 16 | 18 | ||
| @@ -21,7 +23,11 @@ export struct PlayerBottomView { | @@ -21,7 +23,11 @@ export struct PlayerBottomView { | ||
| 21 | PlayerTitleView() | 23 | PlayerTitleView() |
| 22 | PlayerProgressView({ playerController: this.playerController }) | 24 | PlayerProgressView({ playerController: this.playerController }) |
| 23 | } | 25 | } |
| 26 | + .width('100%') | ||
| 27 | + .alignItems(HorizontalAlign.Start) | ||
| 24 | .position({ x: 0, y: '100%' }) | 28 | .position({ x: 0, y: '100%' }) |
| 25 | .markAnchor({ y: '100%' }) | 29 | .markAnchor({ y: '100%' }) |
| 30 | + .visibility(this.displayDirection === DisplayDirection.VERTICAL ? | ||
| 31 | + Visibility.Visible : Visibility.None) | ||
| 26 | } | 32 | } |
| 27 | } | 33 | } |
| @@ -45,6 +45,7 @@ export struct WDPlayerRenderView { | @@ -45,6 +45,7 @@ export struct WDPlayerRenderView { | ||
| 45 | onLoad?: ((event?: object) => void); | 45 | onLoad?: ((event?: object) => void); |
| 46 | @State videoWidth: number = 16 | 46 | @State videoWidth: number = 16 |
| 47 | @State videoHeight: number = 9 | 47 | @State videoHeight: number = 9 |
| 48 | + @State videoRatio: number = 16 / 9 | ||
| 48 | @State selfSize: Size = new Size('100%', '100%'); | 49 | @State selfSize: Size = new Size('100%', '100%'); |
| 49 | 50 | ||
| 50 | aboutToAppear() { | 51 | aboutToAppear() { |
| @@ -60,6 +61,7 @@ export struct WDPlayerRenderView { | @@ -60,6 +61,7 @@ export struct WDPlayerRenderView { | ||
| 60 | Logger.info(TAG, ` onVideoSizeChange width:${width} videoTop:${height}`) | 61 | Logger.info(TAG, ` onVideoSizeChange width:${width} videoTop:${height}`) |
| 61 | this.videoWidth = width; | 62 | this.videoWidth = width; |
| 62 | this.videoHeight = height; | 63 | this.videoHeight = height; |
| 64 | + this.videoRatio = width / height | ||
| 63 | this.updateLayout() | 65 | this.updateLayout() |
| 64 | } | 66 | } |
| 65 | } | 67 | } |
-
Please register or login to post a comment