developOne / harmonyPool

Go to a project
Toggle navigation Toggle navigation pinning
douaojie
1d4d5441 2 parents 9307a2ea 4e8d6f0e

Merge remote-tracking branch 'origin/main'

Inline Side-by-side
Showing 10 changed files with 338 additions and 133 deletions
... ... @@ -30,7 +30,8 @@ export struct DetailPlayShortVideoPage {
@Provide videoLandScape?: number = 1; // 视频朝向， 横屏视频：1;竖屏视频：2
@Provide newsStatusOfUser: batchLikeAndCollectResult | undefined = undefined // 点赞、收藏状态
@Provide followStatus: string = '0' // 关注状态
@Provide isOpenDetail: boolean = false
@Provide isOpenDetail: boolean = false // 查看详情按钮点击
@Provide isDragging: boolean = false // 拖动时间进度条
@Consume @Watch('pageShowChange') pageShow: number
@Consume @Watch('pageHideChange') pageHide: number
... ... @@ -138,9 +139,13 @@ export struct DetailPlayShortVideoPage {
build() {
Stack({ alignContent: Alignment.Top }) {
this.playerViewBuilder()
PlayerBottomView()
PlayerRightView()
PlayerBottomView({
playerController: this.playerController
})
PlayerRightView({
playerController: this.playerController
})
}
.height('100%')
.width('100%')
... ...
export class PlayerConstants {
static readonly STATUS_IDLE: number = 0;
static readonly STATUS_START: number = 1;
static readonly STATUS_PAUSE: number = 2;
static readonly STATUS_STOP: number = 3;
}
@Preview
@Component
export struct Test {
build() {
Stack({ alignContent: Alignment.Top }) {
@State progressVal: number = 10;
@State status: number = PlayerConstants.STATUS_PAUSE;
Text('视频').width('100%').height('50%').backgroundColor('#000').fontColor(Color.White)
padding1(num: string) {
let length = 2;
for (let len = (num.toString()).length; len < length; len = num.length) {
num = `${'0'}${num}`;
}
return num;
}
Row() {
Text('title')
Text('contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent')
secondToTime(seconds: number) {
let time = '00:00'
let hourUnit = 60 * 60;
let hour = Math.floor(seconds / hourUnit);
let minute = Math.floor((seconds - hour * hourUnit) / 60);
let second = seconds - hour * hourUnit - minute * 60;
if (hour > 0) {
return `${this.padding1(hour.toString())}${':'}${this.padding1(minute.toString())}${':'}${this.padding1(second.toString())}`;
}
if (minute > 0) {
return `${this.padding1(minute.toString())}${':'}${this.padding1(second.toString())}`;
} else {
return `${'00'}${':'}${this.padding1(second.toString())}`;
}
}
build() {
Column() {
Text() {
Span(this.secondToTime(6))
Span(' / ')
Span('00:06')
}
.backgroundColor('#ff0000')
.align(Alignment.BottomStart)
.position({ y: '100%' })
.markAnchor({ y: '100%' })
.fontSize(24)
.fontColor(Color.White)
.fontWeight(600)
.margin({ bottom: 30 })
// .visibility(Visibility.None)
Slider({
value: this.progressVal,
step: 0.01,
// style: SliderStyle.OutSet
})
.blockColor(this.status === PlayerConstants.STATUS_START ? Color.Transparent : $r('app.color.play_block_color'))
.trackColor(this.status === PlayerConstants.STATUS_START ? $r('app.color.play_track_color') : $r('app.color.pause_track_color'))
.selectedColor(this.status === PlayerConstants.STATUS_START ? $r('app.color.play_selected_color') : $r('app.color.pause_selected_color'))
.trackThickness(this.status === PlayerConstants.STATUS_START ? 1 : 4)
.blockStyle({
type: this.status === PlayerConstants.STATUS_START ? SliderBlockType.DEFAULT : SliderBlockType.IMAGE,
image: $r('app.media.ic_player_block')
})
.blockSize({ width: 18, height: 12 })
.width('100%')// .height(19)
.onChange((value: number, mode: SliderChangeMode) => {
// this.playerController?.setSeekTime(Math.floor(value), mode);
})
}
.width(300)
.height(600)
.backgroundColor('#cccccc')
.backgroundColor(Color.Blue)
.height('100%')
}
}
\ No newline at end of file
... ...
... ... @@ -26,7 +26,7 @@ const TAG = 'VideoChannelDetail'
let timer: number = -1
const storage = LocalStorage.getShared();
@Entry(storage)
@Component
export struct VideoChannelDetail {
... ...
... ... @@ -2,20 +2,21 @@ import { WDPlayerController } from 'wdPlayer/Index';
import { PlayerTitleView } from './PlayerTitleView'
import { PlayerProgressView } from './PlayerProgressView'
import { PlayerCommentView } from './PlayerCommentView'
import { PlayerTimeSeekView } from './PlayerTimeSeekView'
@Component
export struct PlayerBottomView {
private playerController?: WDPlayerController;
@Consume showComment?: boolean
@Consume isOpenDetail?: boolean
private playerController?: WDPlayerController;
@Consume isDragging?: boolean
build() {
Column() {
PlayerTitleView()
PlayerProgressView({ playerController: this.playerController })
.visibility(this.isOpenDetail ? Visibility.None : Visibility.Visible)
if (this.showComment) {
PlayerCommentView().visibility(this.isOpenDetail ? Visibility.None : Visibility.Visible)
PlayerCommentView()
}
}
.alignItems(HorizontalAlign.Start)
... ...
... ... @@ -3,6 +3,7 @@ import router from '@ohos.router';
@Component
export struct PlayerCommentView {
@Consume showComment?: boolean
@Consume isOpenDetail?: boolean
@State comment: string = '';
build() {
... ... @@ -30,5 +31,6 @@ export struct PlayerCommentView {
.backgroundColor(Color.Black)
.alignItems(VerticalAlign.Center)
.padding({ left: 16, right: 16, top: 11, bottom: 11 })
.visibility(this.isOpenDetail ? Visibility.None : Visibility.Visible)
}
}
\ No newline at end of file
... ...
import { ContentDetailDTO } from 'wdBean/Index';
import { DateTimeUtils } from 'wdKit/Index';
import { PlayerConstants, WDPlayerController } from 'wdPlayer/Index';
@Component
export struct PlayerProgressView {
private playerController?: WDPlayerController;
@Consume contentDetailData: ContentDetailDTO
@Consume progressVal: number;
@Consume isOpenDetail: boolean
@Consume isDragging: boolean
@State status: number = PlayerConstants.STATUS_START;
aboutToAppear() {
if (this.playerController) {
this.playerController.onStatusChange = (status: number) => {
this.status = status
console.log('=============', this.status)
}
}
}
build() {
Slider({
value: this.progressVal,
step: 0.01,
// style: SliderStyle.OutSet
})
.blockColor(this.status === PlayerConstants.STATUS_START ? Color.Transparent : $r('app.color.play_block_color'))
.trackColor(this.status === PlayerConstants.STATUS_START ? $r('app.color.play_track_color') : $r('app.color.pause_track_color'))
.selectedColor(this.status === PlayerConstants.STATUS_START ? $r('app.color.play_selected_color') : $r('app.color.pause_selected_color'))
.trackThickness(this.status === PlayerConstants.STATUS_START ? 1 : 4)
.blockStyle({
type: this.status === PlayerConstants.STATUS_START ? SliderBlockType.DEFAULT : SliderBlockType.IMAGE,
image: $r('app.media.ic_player_block')
})
.blockSize({ width: 18, height: 12 })
.width('100%')
.height(19)
.onChange((value: number, mode: SliderChangeMode) => {
this.playerController?.setSeekTime(Math.floor(value), mode);
Column() {
Text() {
Span(DateTimeUtils.secondToTime(Math.floor(this.progressVal / 100 * this.contentDetailData.videoInfo[0].videoDuration)))
Span(' / ')
Span(DateTimeUtils.secondToTime(this.contentDetailData.videoInfo[0].videoDuration || 0))
}
.fontSize(24)
.fontColor(Color.White)
.fontWeight(600)
.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')
})
.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)
})
}.visibility(this.isOpenDetail ? Visibility.None : Visibility.Visible)
}
}
\ No newline at end of file
... ...
... ... @@ -33,6 +33,7 @@ export struct PlayerRightView {
@Consume newsStatusOfUser: batchLikeAndCollectResult
@Consume followStatus: string
@Consume isOpenDetail: boolean
@Consume isDragging: boolean
@State operationList: OperationItem[] = [
{
icon: $r('app.media.ic_like_uncheck'),
... ... @@ -309,6 +310,6 @@ export struct PlayerRightView {
.position({ x: '100%', y: '100%' })
.markAnchor({ x: '100%', y: '100%' })
.padding({ bottom: 72 })
.visibility(this.isOpenDetail ? Visibility.None : Visibility.Visible)
.visibility(this.isOpenDetail || this.isDragging ? Visibility.None : Visibility.Visible)
}
}
\ No newline at end of file
... ...
@Preview
@Component
export struct PlayerTimeSeekView {
build() {
Row() {
Text() {
Span('00:06')
Span('/')
Span('00:06')
}
.fontSize(24)
.fontColor(Color.White)
.fontWeight(600)
}
}
}
\ No newline at end of file
... ...
... ... @@ -9,6 +9,7 @@ export struct PlayerTitleView {
@Consume contentDetailData: ContentDetailDTO
@Consume windowWidth: number
@Consume isOpenDetail: boolean
@Consume isDragging: boolean
@State titleHeight: number = 0
dialogController: CustomDialogController = new CustomDialogController({
builder: DetailDialog({
... ... @@ -104,6 +105,6 @@ export struct PlayerTitleView {
.width(this.windowWidth - 100 + 'px')
.padding({ left: 16, right: 22 })
.alignItems(HorizontalAlign.Start)
.visibility(this.isOpenDetail ? Visibility.None : Visibility.Visible)
.visibility(this.isOpenDetail || this.isDragging ? Visibility.None : Visibility.Visible)
}
}
\ No newline at end of file
... ...
... ... @@ -55,6 +55,7 @@ struct LoginPage {
alignment:DialogAlignment.Center
})
loginViewModel = new LoginViewModel()
@State isProtocol:boolean=false
onCodeSend() {
Logger.debug(TAG, "isCodeSend:" + this.isCodeSend + "")
... ... @@ -72,108 +73,119 @@ struct LoginPage {
}
build() {
RelativeContainer() {
//注册内容
Column() {
Image($r("app.media.login_logo"))
.width(120)
.height(66)
.margin({ top: 78 })
.align(Alignment.Center)
if (this.checkCodePage) {
LoginInputComponent({
phoneContent: $phoneContent,
codeContent: $codeContent,
isSubmit: $isSubmit,
isCodeSend: $isCodeSend
})
} else {
this.addPassword()
}
Stack() {
RelativeContainer() {
Row() {
Image(this.protocolState ? $r('app.media.login_checkbox_select') : $r('app.media.login_checkbox_unselected'))
.width(15)
.height(15)
.onClick(() => {
this.protocolState = !this.protocolState
//注册内容
Column() {
Image($r("app.media.login_logo"))
.width(120)
.height(66)
.margin({ top: 78 })
.align(Alignment.Center)
if (this.checkCodePage) {
LoginInputComponent({
phoneContent: $phoneContent,
codeContent: $codeContent,
isSubmit: $isSubmit,
isCodeSend: $isCodeSend
})
} else {
this.addPassword()
}
Text() {
Span("我已阅读并同意").fontColor("#999999").fontSize(12)
Span("《用户协议》").fontColor("#ED2800").fontSize(12).onClick(() => {
let bean={contentID:"1",pageID:""} as Params
WDRouterRule.jumpWithPage(WDRouterPage.loginProtocolPage,bean)
})
Span("及").fontColor("#999999").fontSize(12)
Span("《隐私政策》").fontColor("#ED2800").fontSize(12).onClick(() => {
let bean={contentID:"2",pageID:""} as Params
WDRouterRule.jumpWithPage(WDRouterPage.loginProtocolPage,bean)
})
Row() {
Image(this.protocolState ? $r('app.media.login_checkbox_select') : $r('app.media.login_checkbox_unselected'))
.width(15)
.height(15)
.onClick(() => {
this.protocolState = !this.protocolState
})
Text() {
Span("我已阅读并同意").fontColor("#999999").fontSize(12)
Span("《用户协议》").fontColor("#ED2800").fontSize(12).onClick(() => {
let bean = { contentID: "1", pageID: "" } as Params
WDRouterRule.jumpWithPage(WDRouterPage.loginProtocolPage, bean)
})
Span("及").fontColor("#999999").fontSize(12)
Span("《隐私政策》").fontColor("#ED2800").fontSize(12).onClick(() => {
let bean = { contentID: "2", pageID: "" } as Params
WDRouterRule.jumpWithPage(WDRouterPage.loginProtocolPage, bean)
})
}
}.margin({ top: 48 }).alignItems(VerticalAlign.Center)
Row() {
Text("登录")
.borderRadius(4)
.fontColor(this.isSubmit ? "#FFFFFFFF" : "#66FFFFFF")
.fontSize(18)
.fontWeight(FontWeight.Medium)
.margin({ top: 20 })
.height(44)
.textAlign(TextAlign.Center)
.width("100%")
.backgroundColor(this.isSubmit ? "#FFED2800" : "#99ED2800")
.onClick(() => {
if (!this.isSubmit) {
return
}
this.loginSubmit()
})
}.padding({ left: 25, right: 25 }).width('100%')
if (!this.checkCodePage) {
Text('忘记密码').fontColor('#666666').fontSize(14).margin({ top: 16 })
.onClick(() => {
// router.pushUrl({ url: 'pages/login/ForgetPasswordPage' })
let pageType = { 'pageType': 0 } as Record<string, number>;
WDRouterRule.jumpWithPage(WDRouterPage.forgetPasswordPage, pageType)
})
}
}.margin({ top: 48 }).alignItems(VerticalAlign.Center)
Row() {
Text("登录")
.borderRadius(4)
.fontColor(this.isSubmit ?"#FFFFFFFF":"#66FFFFFF")
.fontSize(18)
.fontWeight(FontWeight.Medium)
.margin({ top: 20 })
.height(44)
.textAlign(TextAlign.Center)
.width("100%")
.backgroundColor(this.isSubmit?"#FFED2800":"#99ED2800")
.onClick(() => {
if(!this.isSubmit){
return
}
this.loginSubmit()
}.width("100%")
.alignRules({
top: { anchor: "__container__", align: VerticalAlign.Top },
}).id("register")
})
}.padding({ left: 25, right: 25 }).width('100%')
//其他登录方式
Column() {
this.addOtherLogin()
}.width('100%')
.alignRules({
bottom: { anchor: "__container__", align: VerticalAlign.Bottom },
}).id("other")
//关闭按钮
Image($r('app.media.login_closed'))
.width(24)
.height(24)
.margin({ top: 10, right: 15 })
.alignRules({
top: { anchor: "__container__", align: VerticalAlign.Top },
right: { anchor: "__container__", align: HorizontalAlign.End }
})
.onClick(() => {
router.back()
})
.id('id_close')
if (!this.checkCodePage) {
Text('忘记密码').fontColor('#666666').fontSize(14).margin({ top: 16 })
.onClick(() => {
// router.pushUrl({ url: 'pages/login/ForgetPasswordPage' })
let pageType = {'pageType': 0} as Record<string, number>;
WDRouterRule.jumpWithPage(WDRouterPage.forgetPasswordPage, pageType)
})
}
}.width('100%').height('100%')
}.width("100%")
.alignRules({
top: { anchor: "__container__", align: VerticalAlign.Top },
}).id("register")
ProtocolComponent({
cancelMethod: (): void => this.cancelProtocol(),
agreeMethod: (): void => this.agreeProtocol()
})
.visibility(this.isProtocol ? Visibility.Visible : Visibility.None)
//其他登录方式
Column() {
this.addOtherLogin()
}.width('100%')
.alignRules({
bottom: { anchor: "__container__", align: VerticalAlign.Bottom },
}).id("other")
//关闭按钮
Image($r('app.media.login_closed'))
.width(24)
.height(24)
.margin({ top: 10, right: 15 })
.alignRules({
top: { anchor: "__container__", align: VerticalAlign.Top },
right: { anchor: "__container__", align: HorizontalAlign.End }
})
.onClick(() => {
router.back()
})
.id('id_close')
}.width('100%')
.height('100%')
}.width('100%').height('100%')
}
@Builder
... ... @@ -366,8 +378,92 @@ struct LoginPage {
if (this.protocolState) {
this.requestLogin()
} else {
this.dialogController.open()
// this.dialogController.open()
this.isProtocol=true
}
}
agreeProtocol(): void {
this.isProtocol = false
this.protocolState = true
this.requestLogin()
}
cancelProtocol(): void {
this.isProtocol = false
}
}
@Component
struct ProtocolComponent {
cancelMethod?: () => void
agreeMethod?: () => void
build() {
Stack() {
Column() {
Text("温馨提示")
.fontColor("#222222")
.fontSize(18)
.width("100%")
.fontWeight(FontWeight.Bold)
.textAlign(TextAlign.Center)
.margin({ top: 20 })
Text() {
Span("为保障您的合法权益，请阅读并同意").fontSize(14).fontColor("#666666")
Span("《用户协议》").fontSize(14).fontColor("#ED2800").onClick(() => {
let bean = { contentID: "1", pageID: "" } as Params
WDRouterRule.jumpWithPage(WDRouterPage.loginProtocolPage, bean)
})
Span("及").fontSize(14).fontColor("#666666")
Span("《隐私政策》").fontSize(14).fontColor("#ED2800").onClick(() => {
let bean = { contentID: "2", pageID: "" } as Params
WDRouterRule.jumpWithPage(WDRouterPage.loginProtocolPage, bean)
})
Span("后进行登录").fontSize(14).fontColor("#666666")
}.margin({ top: 12, left: 16, right: 16 })
Divider().color("#999999").width("100%").margin({ top: 14 }).height('1vp')
Row() {
Text('放弃登录')
.fontSize(16)
.fontColor("#999999")
.layoutWeight(1)
.fontWeight(FontWeight.Medium)
.textAlign(TextAlign.Center)
.onClick(() => {
if (this.cancelMethod) {
this.cancelMethod()
}
})
.height('100%')
// Divider().color("#999999").height('100%').width('0.5vp')
Text('同意并登录')
.fontSize(16)
.fontColor("#ED2800")
.layoutWeight(1)
.fontWeight(FontWeight.Medium)
.textAlign(TextAlign.Center)
.border({
width: { left: 1 },
color: "#999999",
style: { left: BorderStyle.Solid }
})
.onClick(() => {
if (this.agreeMethod) {
this.agreeMethod()
}
})
.height('100%')
}.layoutWeight(1).justifyContent(FlexAlign.Center)
}.height(161).backgroundColor(Color.White).borderRadius(6).width('74%')
}.width('100%')
.height('100%')
.backgroundColor('#66000000')
}
}
\ No newline at end of file
... ...