沉浸式频道（P0）

1、全屏图标距离左侧间距偏小改为16 2、关注图标偏大改为24（已经是24了） 3、间距改为 8 4、标题字号改为16 行高 22 5、间距偏大改为 8 6、间距改为 8 7、滑块和进度条没有垂直居中 8、头部缺少背景蒙层（？） 9、底部缺少背景蒙层（？） 10、未选中文字颜色不对（？） 11、搜索图标颜色不对（？） 12、进度拖拽颜色不对（？） 13、全文按钮颜色不对，点击范围太小（？） 14、评论弹窗推起视频区域缩小动效有问题 15、评论弹窗去掉圆角（bindSheet导致） 16、缺省文案颜色不对改为#999999 17、数字标签和图标位置关系不对

沉浸式频道（P0）
1、全屏图标距离左侧间距偏小改为16 2、关注图标偏大改为24（已经是24了） 3、间距改为 8 4、标题字号改为16 行高 22 5、间距偏大改为 8 6、间距改为 8 7、滑块和进度条没有垂直居中 8、头部缺少背景蒙层（？） 9、底部缺少背景蒙层（？） 10、未选中文字颜色不对（？） 11、搜索图标颜色不对（？） 12、进度拖拽颜色不对（？） 13、全文按钮颜色不对，点击范围太小（？） 14、评论弹窗推起视频区域缩小动效有问题 15、评论弹窗去掉圆角（bindSheet导致） 16、缺省文案颜色不对改为#999999 17、数字标签和图标位置关系不对
chenjun1_wd
Commit c2c59f4db9ef2cc3db826523ac12d0c6e252063d c2c59f4d 1 parent 4880d1a6
Showing 4 changed files with 105 additions and 78 deletions
sight_harmony/features/wdDetailPlayShortVideo/src/main/ets/pages/DetailPlayShortVideoPage.ets
sight_harmony/features/wdDetailPlayShortVideo/src/main/ets/view/PlayerProgressView.ets
sight_harmony/features/wdDetailPlayShortVideo/src/main/ets/view/PlayerRightView.ets
sight_harmony/features/wdDetailPlayShortVideo/src/main/ets/view/PlayerTitleView.ets
--- a/sight_harmony/features/wdDetailPlayShortVideo/src/main/ets/pages/DetailPlayShortVideoPage.ets
View file @c2c59f4
+++ b/sight_harmony/features/wdDetailPlayShortVideo/src/main/ets/pages/DetailPlayShortVideoPage.ets
View file @c2c59f4
@@ -13,7 +13,7 @@ import { PlayerBottomView } from '../view/PlayerBottomView';
 import { PlayerRightView } from '../view/PlayerRightView';
 import { DisplayDirection } from 'wdConstant/Index';
 import { CommentDialogView } from '../view/CommentDialogView';
-import { componentUtils, window } from '@kit.ArkUI';
+import { window } from '@kit.ArkUI';
 import { PlayerFullScreenView } from '../view/PlayerFullScreenView';
 import { OperRowListView, publishCommentModel } from 'wdComponent/Index';
 import { ParamType, TrackConstants } from 'wdTracking/Index';
@@ -44,7 +44,7 @@ export struct DetailPlayShortVideoPage {
   @Consume @Watch("showCommentListChanged") showCommentList: boolean
   @Consume displayDirection: DisplayDirection
   @Consume @Watch('videoStatusChange') switchVideoStatus: boolean
-  @State  isPlay: boolean = true // 视频手动播放暂停
+  @State isPlay: boolean = true // 视频手动播放暂停
   @Consume @Watch('pageShowChange') pageShow: number
   @Consume windowWidth: number
   @Consume windowHeight: number
@@ -59,16 +59,14 @@ export struct DetailPlayShortVideoPage {
   @State toastText: ResourceStr = "正在使用非WI-FI网络，播放将产生流量费用"
   @Consume onlyWifiLoadVideo: boolean
   @Consume toastTextVisible: boolean
+  @StorageProp('currentBreakpoint') @Watch("currentChanged") currentBreakpoint: string = 'sm';
+  @State isPad: boolean = this.currentBreakpoint == "md" || this.currentBreakpoint == "lg" ? true : false
-
-  @StorageProp('currentBreakpoint') @Watch("currentChanged")currentBreakpoint: string = 'sm';
-  @State isPad:boolean = this.currentBreakpoint == "md" || this.currentBreakpoint == "lg"?true:false
-
-  currentChanged(){
-    if(this.currentBreakpoint == "md" || this.currentBreakpoint == "lg"){
+  currentChanged() {
+    if (this.currentBreakpoint == "md" || this.currentBreakpoint == "lg") {
       //大屏幕  折叠屏 或者ipad
       this.isPad = true
-    }else {
+    } else {
       this.isPad = false
     }
   }
@@ -199,8 +197,9 @@ export struct DetailPlayShortVideoPage {
     this.videoLandScape = this.contentDetailData.videoInfo[0]?.videoLandScape
     this.ratio = this.videoLandScape == 2 ? (this.contentDetailData.videoInfo[0]?.resolutionWidth || 9) /
-      (this.contentDetailData.videoInfo[0]?.resolutionHeight || 16):(this.contentDetailData.videoInfo[0]?.resolutionWidth || 16) /
-      (this.contentDetailData.videoInfo[0]?.resolutionHeight || 9)
+      (this.contentDetailData.videoInfo[0]?.resolutionHeight || 16) :
+      (this.contentDetailData.videoInfo[0]?.resolutionWidth || 16) /
+        (this.contentDetailData.videoInfo[0]?.resolutionHeight || 9)
     this.playerController.onCanplay = async () => {
       this.ratio = this.playerController.videoWidth / this.playerController.videoHeight
       if ((this.index == 0 || this.currentIndex === this.index) && this.switchVideoStatus) {
@@ -300,11 +299,13 @@ export struct DetailPlayShortVideoPage {
             onHeightDidChange: (height: number) => {
               this.playerWidth = px2vp(this.windowWidth)
               this.playerHeight = px2vp(this.windowHeight - height)
-              Logger.debug(TAG, "height: " + px2vp(height) + "  ===> 视频高度: " + this.playerHeight + " window height: " + px2vp(this.windowHeight))
+              Logger.debug(TAG,
+                "height: " + px2vp(height) + "  ===> 视频高度: " + this.playerHeight + " window height: " +
+                px2vp(this.windowHeight))
             }
           })
           this.playerViewBuilder()
-          if(this.index === this.currentIndex) {
+          if (this.index === this.currentIndex) {
             PlayerBottomView({
               playerController: this.playerController
             })
@@ -327,7 +328,7 @@ export struct DetailPlayShortVideoPage {
             this.status = status
             if (status === PlayerConstants.STATUS_PAUSE) {
               this.isPlay = false
-            } else if(status === PlayerConstants.STATUS_START) {
+            } else if (status === PlayerConstants.STATUS_START) {
               this.isPlay = true
             }
           }
@@ -364,8 +365,8 @@ export struct DetailPlayShortVideoPage {
   @Builder
   buildContent() {
     Row() {
-      Column(){
-        Column(){
+      Column() {
+        Column() {
           Text(this.toastText)
             .fontFamily('PingFang SC-Regular')
             .fontWeight(FontWeight.Regular)
@@ -374,6 +375,7 @@ export struct DetailPlayShortVideoPage {
             .lineHeight(20)
             .textAlign(TextAlign.Center)
         }
+
         Column() {
           Text("使用流量播放")
             .fontFamily('PingFang SC-Regular')
@@ -450,7 +452,8 @@ export struct DetailPlayShortVideoPage {
       // 横屏-全屏观看
       // 点击查看详情 不展示
-      if (this.videoLandScape === 1 && !this.isOpenDetail && this.displayDirection === DisplayDirection.VERTICAL && !this.showCommentList && !this.isPad) {
+      if (this.videoLandScape === 1 && !this.isOpenDetail && this.displayDirection === DisplayDirection.VERTICAL &&
+        !this.showCommentList && !this.isPad) {
         this.playerFullscreenBuilder()
       }
@@ -467,13 +470,14 @@ export struct DetailPlayShortVideoPage {
   }
   @Builder
+  //全屏按钮
   playerFullscreenBuilder() {
     Row() {
       Image($r('app.media.ic_switch_orientation'))
         .width(24)
         .aspectRatio(1)
         .objectFit(ImageFit.Contain)
-        .margin({ left: 8, right: 4 })
+        .margin({ left: 16, right: 4 })
       // Text("全屏观看")
       //   .fontColor(Color.White)
       //   .fontWeight(400)
--- a/sight_harmony/features/wdDetailPlayShortVideo/src/main/ets/view/PlayerProgressView.ets
View file @c2c59f4
+++ b/sight_harmony/features/wdDetailPlayShortVideo/src/main/ets/view/PlayerProgressView.ets
View file @c2c59f4
@@ -25,7 +25,7 @@ export struct PlayerProgressView {
       }
       this.playerController.onLoaded = (loaded: number) => {
-        if(loaded == 1) {
+        if (loaded == 1) {
           this.loadingWidth = '95%'
           if (this.onlyWifiLoadVideo) {
             this.showLoading = true
@@ -60,20 +60,26 @@ export struct PlayerProgressView {
         .backgroundColor(Color.Gray)
         .width(this.loadingWidth)
         .height(1)
-        .animation({ duration: 500, curve: Curve.Ease, iterations: -1, playMode: PlayMode.Normal })
+        .animation({
+          duration: 500,
+          curve: Curve.Ease,
+          iterations: -1,
+          playMode: PlayMode.Normal
+        })
     }
     .width('100%')
     .zIndex(2000)
     .height(10)
-    .visibility(this.showLoading ? Visibility.Visible: Visibility.Hidden)
+    .visibility(this.showLoading ? Visibility.Visible : Visibility.Hidden)
     .margin({ bottom: 10 })
+
     // .markAnchor({ x: 0, y: '100%' })
   }
   build() {
     Stack() {
       this.playerLoadingBuilder()
-      if(!this.showLoading) {
+      if (!this.showLoading) {
         Column() {
           Text() {
             Span(DateTimeUtils.secondToTime(Math.floor(this.progressVal / 100 * this.videoDuration)))
@@ -89,38 +95,45 @@ export struct PlayerProgressView {
           .margin({ bottom: 30 })
           .visibility(this.isDragging ? Visibility.Visible : Visibility.None)
-          Slider({
-            value: this.progressVal,
-            step: 0.01,
-            // style: SliderStyle.OutSet
-          })
-            .blockColor(this.status === PlayerConstants.STATUS_PAUSE || this.isDragging ? $r('app.color.play_block_color') :
-            Color.Transparent)
-            .trackColor(this.status === PlayerConstants.STATUS_PAUSE || this.isDragging ?
-            $r('app.color.pause_track_color') : $r('app.color.play_track_color'))
-            .selectedColor(this.status === PlayerConstants.STATUS_PAUSE || this.isDragging ?
-            $r('app.color.pause_selected_color') : $r('app.color.play_selected_color'))
-            .trackThickness(this.status === PlayerConstants.STATUS_PAUSE || this.isDragging ? 4 : 1)
-            .blockStyle({
-              type: this.status === PlayerConstants.STATUS_PAUSE || this.isDragging ? SliderBlockType.IMAGE :
-              SliderBlockType.DEFAULT,
-              image: $r('app.media.ic_player_block')
+          Row() {
+            Slider({
+              value: this.progressVal,
+              step: 0.01,
+              // style: SliderStyle.OutSet
             })
-            .blockSize({ width: 18, height: 12 })
-            .width('100%')
-            .height(19)
-            .onChange((value: number, mode: SliderChangeMode) => {
-              this.progressVal = value
-              if (mode === SliderChangeMode.Moving) {
-                this.isDragging = true
-              }
-              if (mode === SliderChangeMode.End) {
-                this.isDragging = false
-              }
-              this.playerController?.setSeekTime(value, mode);
-              console.log('slider onChange:', value, mode)
+              .blockColor(this.status === PlayerConstants.STATUS_PAUSE || this.isDragging ?
+              $r('app.color.play_block_color') :
+              Color.Transparent)
+              .trackColor(this.status === PlayerConstants.STATUS_PAUSE || this.isDragging ?
+              $r('app.color.pause_track_color') : $r('app.color.play_track_color'))
+              .selectedColor(this.status === PlayerConstants.STATUS_PAUSE || this.isDragging ?
+              $r('app.color.pause_selected_color') : $r('app.color.play_selected_color'))
+              .trackThickness(this.status === PlayerConstants.STATUS_PAUSE || this.isDragging ? 4 : 1)
+              .blockStyle({
+                type: this.status === PlayerConstants.STATUS_PAUSE || this.isDragging ? SliderBlockType.IMAGE :
+                SliderBlockType.DEFAULT,
+                image: $r('app.media.ic_player_block')
+              })
+              .blockSize({ width: 18, height: 12 })
+              .width('100%')
+              .height(24)
+              .onChange((value: number, mode: SliderChangeMode) => {
+                this.progressVal = value
+                if (mode === SliderChangeMode.Moving) {
+                  this.isDragging = true
+                }
+                if (mode === SliderChangeMode.End) {
+                  this.isDragging = false
+                }
+                this.playerController?.setSeekTime(value, mode);
+                console.log('slider onChange:', value, mode)
+
+              })
+          }
+          .width('100%')
+          .height(24)
+          .justifyContent(FlexAlign.Center)
-            })
         }
         .visibility(this.isOpenDetail ? Visibility.None : Visibility.Visible)
       }
--- a/sight_harmony/features/wdDetailPlayShortVideo/src/main/ets/view/PlayerRightView.ets
View file @c2c59f4
+++ b/sight_harmony/features/wdDetailPlayShortVideo/src/main/ets/view/PlayerRightView.ets
View file @c2c59f4
@@ -8,13 +8,13 @@ import {
   postInteractAccentionOperateParams
 } from 'wdDetailPlayApi/src/main/ets/request/ContentDetailRequest';
-import { SPHelper, ToastUtils, NumberFormatterUtils } from 'wdKit';
+import { NumberFormatterUtils, SPHelper, ToastUtils } from 'wdKit';
 import { WDPlayerController } from 'wdPlayer/Index';
 import { WDRouterPage, WDRouterRule } from 'wdRouter/Index';
-import { DisplayDirection, SpConstants } from 'wdConstant/Index'
-import { WDShare } from "wdShare"
+import { DisplayDirection, SpConstants } from 'wdConstant/Index';
+import { WDShare } from 'wdShare';
 import { publishCommentModel } from 'wdComponent/Index';
-import { ParamType, TrackConstants, TrackingButton, TrackingContent } from 'wdTracking/Index';
+import { ParamType, TrackingContent } from 'wdTracking/Index';
 interface ILikeStyleResp {
   url: Resource;
@@ -54,7 +54,8 @@ export struct PlayerRightView {
     // console.log(TAG, 'this.openLikes', this.openLikes)
     this.contentTrackingDict()
   }
-  contentTrackingDict(){
+
+  contentTrackingDict() {
     this.pageParam = {
       'contentType': `${this.contentDetailData.newsType}`,
       'contentId': `${this.contentDetailData.newsId}`,
@@ -63,6 +64,7 @@ export struct PlayerRightView {
     this.followUserId = this.contentDetailData?.rmhInfo?.rmhId || ''
     this.followUserName = this.contentDetailData?.rmhInfo?.rmhName || ''
   }
+
   /**
    * 点赞、取消点赞
    */
@@ -92,11 +94,11 @@ export struct PlayerRightView {
         this.newsStatusOfUser.likeStatus = this.newsStatusOfUser?.likeStatus == '1' ? '0' : '1'
         if (this.newsStatusOfUser.likeStatus == '1') {
           this.interactData.likeNum = Number(this.interactData.likeNum || 0) + 1
-          TrackingContent.like(true,this.pageId,this.pageName,this.pageParam)
+          TrackingContent.like(true, this.pageId, this.pageName, this.pageParam)
           console.log(TAG, '点赞')
         } else {
           this.interactData.likeNum = Math.max(0, Number(this.interactData.likeNum || 0) - 1)
-          TrackingContent.like(false,this.pageId,this.pageName,this.pageParam)
+          TrackingContent.like(false, this.pageId, this.pageName, this.pageParam)
           console.log(TAG, '取消点赞')
         }
         console.log(TAG, '点赞、取消点赞==', this.newsStatusOfUser?.likeStatus, this.interactData?.likeNum)
@@ -132,11 +134,11 @@ export struct PlayerRightView {
         // this.queryContentInteractCount()
         if (this.newsStatusOfUser.collectStatus === 1) {
           this.interactData.collectNum = Number(this.interactData.collectNum || 0) + 1
-          TrackingContent.collect(true,this.pageId,this.pageName,this.pageParam)
+          TrackingContent.collect(true, this.pageId, this.pageName, this.pageParam)
           console.log(TAG, '收藏')
         } else {
           this.interactData.collectNum = Math.max(0, Number(this.interactData.collectNum || 0) - 1)
-          TrackingContent.collect(false,this.pageId,this.pageName,this.pageParam)
+          TrackingContent.collect(false, this.pageId, this.pageName, this.pageParam)
           console.log(TAG, '取消收藏')
         }
         console.log(TAG, '收藏、取消收藏==', this.newsStatusOfUser?.collectStatus, this.interactData?.collectNum)
@@ -200,7 +202,7 @@ export struct PlayerRightView {
           }
         })
         console.log(TAG, '关注号主')
-        TrackingContent.follow(true,this.followUserId,this.followUserName,this.pageId,this.pageName,this.pageParam)
+        TrackingContent.follow(true, this.followUserId, this.followUserName, this.pageId, this.pageName, this.pageParam)
       }
     })
   }
@@ -215,7 +217,7 @@ export struct PlayerRightView {
       if (this.contentDetailData?.openComment == 1) {
         this.commentBuilderView()
       }
-      if(this.contentDetailData?.shareInfo?.shareOpen == 1) {
+      if (this.contentDetailData?.shareInfo?.shareOpen == 1) {
         this.shareBuilderView()
       }
     }
@@ -253,7 +255,7 @@ export struct PlayerRightView {
             ToastUtils.showToast("暂时无法查看该创作者主页", 2000);
           }
         })
-
+      //添加关注
       Image($r('app.media.ic_add'))
         .width(24)
         .borderRadius(12)
@@ -335,7 +337,8 @@ export struct PlayerRightView {
         .margin({ top: 2 })
     }
     .margin({ bottom: 20 })
-    .visibility(this.likesStyle == 4 || this.likesStyle == 'empty' || !this.openLikes ? Visibility.None : Visibility.Visible)
+    .visibility(this.likesStyle == 4 || this.likesStyle == 'empty' || !this.openLikes ? Visibility.None :
+    Visibility.Visible)
     .onClick(() => {
       // TODO:点赞动画
       this.toggleLikeStatus()
--- a/sight_harmony/features/wdDetailPlayShortVideo/src/main/ets/view/PlayerTitleView.ets
View file @c2c59f4
+++ b/sight_harmony/features/wdDetailPlayShortVideo/src/main/ets/view/PlayerTitleView.ets
View file @c2c59f4
@@ -49,6 +49,8 @@ export struct PlayerTitleView {
   }
   getTitle(): string {
+    //console.info(`cj2024 newsTitle = ${this.contentDetailData?.newsTitle}`)
+    //console.info(`cj2024 summary = ${this.summary}`)
     return this.contentDetailData?.newsTitle || ''
   }
@@ -97,10 +99,10 @@ export struct PlayerTitleView {
   }
   /**
-   * 截断文本
+   * 截断this.title文本
    * @param {string} str   要截断的文本   '啊啊啊啊啊'
    * @param {number} fontSize  字体大小(px)
-   * @param {number} maxLines  最大行数   3
+   * @param {number} maxLines  最大行数   4
    * @param {number} textWidth 文本宽度(px)  vp 需要转换vp2px()
    * @returns {string} clipStr  截断后的文本 '啊啊'
    */
@@ -111,7 +113,7 @@ export struct PlayerTitleView {
       textContent: truncateContent,
       fontSize: fontSize,
       fontWeight: 600,
-      lineHeight: 20,
+      lineHeight: 22,
       wordBreak: WordBreak.BREAK_ALL
     })
     let clipStr: string = ''
@@ -120,7 +122,7 @@ export struct PlayerTitleView {
         textContent: clipStr,
         fontSize: fontSize,
         fontWeight: 600,
-        lineHeight: 20,
+        lineHeight: 22,
         wordBreak: WordBreak.BREAK_ALL
       }) >= textWidth * maxLines - measureTruncateWidth) {
         this.isTitleOverLines = true
@@ -136,9 +138,9 @@ export struct PlayerTitleView {
     this.rmhPlatform = this.contentDetailData?.rmhPlatform || 0
     const info = measure.measureTextSize({
       textContent: this.getTitle(),
-      fontSize: 15,
+      fontSize: 16,
       fontWeight: 400,
-      lineHeight: 20,
+      lineHeight: 22,
       constraintWidth: this.windowWidth - 150 - 16 - 22 + 'px',
     })
@@ -150,7 +152,8 @@ export struct PlayerTitleView {
   private updateSummaryLines() {
     this.summaryLines = Math.max(1, 4 - this.titleLines)
-    // console.info(`cj2024 titleLines = ${this.titleLines}`)
+    //console.info(`cj2024 titleLines = ${this.titleLines}`)
+    //console.info(`cj2024 summaryLines = ${this.summaryLines}`)
     this.isOverLines = this.summary.length >
     this.clipText(this.summary, 14, this.summaryLines, this.windowWidth - 150 - vp2px(50)).length
   }
@@ -222,6 +225,10 @@ export struct PlayerTitleView {
             .lineHeight(21)
             .fontWeight(400)
             .fontFamily('PingFang SC-Regular')
+            .onClick(() => {
+              this.isOpenDetail = true
+              this.dialogController?.open()
+            })
           if (this.isOverLines) {
             Span('...    全文')
               .fontColor('#888888')
@@ -251,7 +258,7 @@ export struct PlayerTitleView {
           left: 0, //6
           right: 6,
           top: 0, //4
-          bottom: 4
+          bottom: 8
         })
       }
@@ -276,10 +283,10 @@ export struct PlayerTitleView {
   @Builder
   titleBuilder() {
     Text() {
-      Span(this.clipTitleText(this.getTitle(), 14, 4, this.windowWidth - 234 - vp2px(50)))
-        .fontSize(15)
+      Span(this.clipTitleText(this.getTitle(), 16, 4, this.windowWidth - 234 - vp2px(50)))
+        .fontSize(16)
         .fontColor(Color.White)
-        .lineHeight(20)
+        .lineHeight(22)
         .fontWeight(600)
         .fontFamily('PingFang SC-Regular')
       if (this.isTitleOverLines) {
@@ -309,7 +316,7 @@ export struct PlayerTitleView {
     }
     .onAreaChange((oldArea: Area, newArea: Area) => {
       //console.info(`cj2024 titleLines = ${newArea.height as number} line = ${(newArea.height as number) / 20}`)
-      this.titleLines = Math.floor((newArea.height as number) / 20) // 20是行高
+      this.titleLines = Math.floor((newArea.height as number) / 22) // 22是行高
       //console.info(`cj2024 titleLines = ${this.titleLines}`)
       this.updateSummaryLines()
     })
@@ -317,7 +324,7 @@ export struct PlayerTitleView {
       left: 0, //6
       right: 6,
       top: 0, //4
-      bottom: 4
+      bottom: 8
     })
   }
 }