developOne / harmonyPool

Go to a project
Toggle navigation Toggle navigation pinning
chenjun1_wd
c2c59f4d 1 parent 4880d1a6

沉浸式频道（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、数字标签和图标位置关系不对
Inline Side-by-side
Showing 4 changed files with 105 additions and 78 deletions
... ... @@ -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)
... ...
... ... @@ -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)
}
... ...
... ... @@ -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()
... ...
... ... @@ -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
})
}
}
... ...