developOne / harmonyPool

Go to a project
Toggle navigation Toggle navigation pinning
zhenghy
495817fc 1 parent ed6469fd

播放器修改

Inline Side-by-side
Showing 11 changed files with 235 additions and 111 deletions
/**
* https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-window-0000001820880785#ZH-CN_TOPIC_0000001811317218__systembarproperties
* 状态栏、导航栏的属性。
*/
/**
* 状态栏背景颜色 statusBarColor
* 导航栏背景颜色 navigationBarColor
*/
export const enum SysStatusBarColor {
WHITE = '#ffffff',
BLACK = '#000000',
DEFAULT = '#0x66000000'
}
/**
* 状态栏文字颜色 statusBarContentColor8
* 导航栏文字颜色 navigationBarContentColor8
*/
export const enum SysBarContentColor {
WHITE = '#ffffff',
BLACK = '#000000',
DEFAULT = '0xE5FFFFFF'
}
... ...
import { Logger, DateTimeUtils, CollectionUtils } from 'wdKit';
import { CommonConstants, CompStyle, ViewType } from 'wdConstant';
import PageViewModel from '../../viewmodel/PageViewModel';
... ... @@ -14,7 +13,7 @@ import CustomRefreshLoadLayout from './CustomRefreshLoadLayout';
import { CompParser } from '../CompParser';
import { GroupInfoDTO } from 'wdBean/src/main/ets/bean/navigation/PageInfoDTO';
import { VideoChannelDetail } from 'wdDetailPlayShortVideo/Index';
import { CompDTO, LiveReviewDTO, PageDTO ,PageInfoDTO} from 'wdBean';
import { CompDTO, LiveReviewDTO, PageDTO, PageInfoDTO } from 'wdBean';
const TAG = 'PageComponent';
... ... @@ -72,6 +71,7 @@ export struct PageComponent {
@Builder
ListLayout() {
List() {
if (this.name !== '视频') {
// 下拉刷新
ListItem() {
RefreshLayout({
... ... @@ -79,22 +79,25 @@ export struct PageComponent {
this.pageModel.pullDownRefreshText, this.pageModel.pullDownRefreshHeight)
})
}
}
LazyForEach(this.pageModel.compList, (compDTO: CompDTO, compIndex: number) => {
ListItem() {
Column() {
if (this.name == '视频') {
VideoChannelDetail()
} else {
LazyForEach(this.pageModel.compList, (compDTO: CompDTO, compIndex: number) => {
ListItem() {
Column() {
CompParser({ compDTO: compDTO, compIndex: compIndex });
}
}
}
},
(compDTO: CompDTO, compIndex: number) => compDTO.id + compIndex.toString() + this.pageModel.timestamp
)
}
if (this.name !== '视频') {
// 加载更多
ListItem() {
if (this.pageModel.hasMore) {
... ... @@ -107,6 +110,7 @@ export struct PageComponent {
}
}
}
}
.scrollBar(BarState.Off)
.cachedCount(8)
.height(CommonConstants.FULL_PARENT)
... ...
... ... @@ -43,13 +43,9 @@ export struct DetailPlayShortVideoPage {
} else {
this.queryNewsInfoOfUser()
console.log('currentIndex==== ', this.currentIndex)
if (!this.playerController.getPlayer()) {
console.error('state91111111===', this.contentDetailData?.videoInfo[0]?.videoUrl || '')
this.playerController.firstPlay(this.contentDetailData?.videoInfo[0]?.videoUrl || '');
console.error('state91111111===', this.playerController?.getPlayer()?.state)
} else {
console.error('state9===', this.playerController?.getPlayer()?.state)
this.playerController.play()
}
... ... @@ -135,6 +131,7 @@ export struct DetailPlayShortVideoPage {
}
onPageShow() {
// this.playerController?.play();
// WindowModel.shared.setPreferredOrientation(window.Orientation.AUTO_ROTATION_RESTRICTED);
}
... ... @@ -147,7 +144,7 @@ export struct DetailPlayShortVideoPage {
onPageHide() {
// WindowModel.shared.setPreferredOrientation(window.Orientation.PORTRAIT);
devicePLSensorManager.devicePLSensorOff();
// devicePLSensorManager.devicePLSensorOff();
// this.status = PlayerConstants.STATUS_PAUSE;
this.playerController?.pause();
}
... ...
... ... @@ -12,6 +12,7 @@ const storage = LocalStorage.getShared();
@Entry(storage)
@Component
export struct DetailVideoListPage {
@Provide showComment: boolean = true
@State bottomSafeHeight: number = AppStorage.get<number>('bottomSafeHeight') || 0
@State topSafeHeight: number = AppStorage.get<number>('topSafeHeight') || 0
private contentId: string = ''
... ... @@ -22,14 +23,20 @@ export struct DetailVideoListPage {
@State testData: string[] = ['111', '222', '333']
@State currentIndex: number = 0
@State interactDataList: InteractDataDTO[] = []
@State isFullScreen: boolean = false
async aboutToAppear(): Promise<void> {
/**
* 开启沉浸式并设置状态栏颜色
*/
const windowStage = WindowModel.shared.getWindowStage() as window.WindowStage
const windowClass: window.Window = windowStage.getMainWindowSync(); // 获取应用主窗口
const windowClass: window.Window = windowStage.getMainWindowSync();
windowClass.setWindowLayoutFullScreen(true)
windowClass.setWindowSystemBarProperties({ statusBarColor: '#fff' })
this.isFullScreen = true
windowClass.setWindowSystemBarProperties({
statusBarContentColor: '#ffffff',
})
let data: ContentDetailDTO[] = []
... ... @@ -99,7 +106,32 @@ export struct DetailVideoListPage {
const windowStage = WindowModel.shared.getWindowStage() as window.WindowStage
const windowClass: window.Window = windowStage.getMainWindowSync(); // 获取应用主窗口
windowClass.setWindowLayoutFullScreen(false)
windowClass.setWindowSystemBarProperties({ statusBarColor: '#000' })
this.isFullScreen = false
windowClass.setWindowSystemBarProperties({ statusBarContentColor: '#000000' })
}
onPageShow(): void {
if (!this.isFullScreen) {
const windowStage = WindowModel.shared.getWindowStage() as window.WindowStage
const windowClass: window.Window = windowStage.getMainWindowSync();
windowClass.setWindowLayoutFullScreen(true)
this.isFullScreen = true
windowClass.setWindowSystemBarProperties({
statusBarContentColor: '#ffffff',
})
}
}
onPageHide(): void {
if (this.isFullScreen) {
const windowStage = WindowModel.shared.getWindowStage() as window.WindowStage
const windowClass: window.Window = windowStage.getMainWindowSync(); // 获取应用主窗口
windowClass.setWindowLayoutFullScreen(false)
this.isFullScreen = false
windowClass.setWindowSystemBarProperties({ statusBarContentColor: '#000000' })
}
}
... ...
... ... @@ -14,8 +14,8 @@ export struct VideoChannelDetail {
private relId: string = ''
private relType: string = ''
private swiperController: SwiperController = new SwiperController()
@Provide showComment: boolean = false
@State data: ContentDetailDTO[] = []
@State testData: string[] = ['111', '222', '333']
@State currentIndex: number = 0
@State interactDataList: InteractDataDTO[] = []
... ... @@ -93,7 +93,7 @@ export struct VideoChannelDetail {
if (res.data) {
this.data = this.data.concat(res.data)
}
// console.log('queryVideoList===', JSON.stringify(this.data))
console.log('queryVideoList===', JSON.stringify(this.data))
})
}
... ...
... ... @@ -10,6 +10,7 @@ import {
} from 'wdDetailPlayApi/src/main/ets/request/ContentDetailRequest';
import { ToastUtils } from 'wdKit';
import { HttpUrlUtils } from 'wdNetwork/Index';
import { WDPlayerController } from 'wdPlayer/Index';
import { WDRouterPage, WDRouterRule } from 'wdRouter/Index';
export interface OperationItem {
... ... @@ -28,6 +29,7 @@ const TAG = 'OperationListView';
@Preview
@Component
export struct OperationListView {
private playerController?: WDPlayerController;
@Consume interactData: InteractDataDTO
@Consume contentDetailData: ContentDetailDTO
@Consume newsStatusOfUser: batchLikeAndCollectResult
... ... @@ -65,6 +67,7 @@ export struct OperationListView {
toggleLikeStatus() {
// 未登录，跳转登录
if (!HttpUrlUtils.getUserId()) {
this.playerController?.pause()
WDRouterRule.jumpWithPage(WDRouterPage.loginPage)
return
}
... ...
... ... @@ -2,7 +2,7 @@ import router from '@ohos.router';
import window from '@ohos.window';
import deviceInfo from '@ohos.deviceInfo';
import { WindowModel } from 'wdKit';
import { WDPlayerController } from 'wdPlayer';
import { PlayerConstants, WDPlayerController } from 'wdPlayer';
import { devicePLSensorManager } from 'wdDetailPlayApi';
import { OperationListView } from './OperationListView';
import { ContentDetailDTO, RmhInfoDTO, UserInfoDTO } from 'wdBean/Index';
... ... @@ -17,7 +17,9 @@ export struct PlayerTitleComment {
@Consume isFullScreen: boolean;
@Consume progressVal: number;
@Consume videoLandScape?: number
@Consume showComment?: boolean
@State isOpen: boolean = false
@State status: number = PlayerConstants.STATUS_START;
dialogController: CustomDialogController = new CustomDialogController({
builder: DetailDialog({
name: this.getName(),
... ... @@ -32,6 +34,12 @@ export struct PlayerTitleComment {
})
aboutToAppear() {
if (this.playerController) {
this.playerController.onStatusChange = (status: number) => {
this.status = status
}
}
}
... ... @@ -54,35 +62,36 @@ export struct PlayerTitleComment {
build() {
Column() {
if (this.contentDetailData?.videoInfo[0]?.videoLandScape === 1) {
Column() {
Row() {
Image($r('app.media.ic_switch_orientation'))
.width(34)
.aspectRatio(1)
.objectFit(ImageFit.Contain)
.padding({ left: 10, right: 5 })
Text("全屏观看")
.fontColor(Color.White)
.fontSize('14fp')
.maxLines(2)
.layoutWeight(1)
}
.width(100)
.backgroundColor(Color.Gray)
.borderRadius(10)
.alignItems(VerticalAlign.Center)
.visibility(this.videoLandScape == 2 ? Visibility.Hidden : Visibility.Visible)
.onClick(() => {
this.isFullScreen = !this.isFullScreen;
WindowModel.shared.setPreferredOrientation(window.Orientation.LANDSCAPE);
devicePLSensorManager.devicePLSensorOn(window.Orientation.LANDSCAPE);
})
}
.width('100%')
// .margin({ bottom: 120 })
.alignItems(HorizontalAlign.Center)
}
// if (this.contentDetailData?.videoInfo[0]?.videoLandScape === 1) {
// Column() {
// Row() {
// Image($r('app.media.ic_switch_orientation'))
// .width(16)
// .aspectRatio(1)
// .objectFit(ImageFit.Contain)
// .padding({ left: 8, right: 4 })
// Text("全屏观看")
// .fontColor(Color.White)
// .fontSize(12)
// .layoutWeight(1)
// }
// .width(84)
// .height(28)
// .backgroundColor('#0d0d0d')
// .border({ width: 1, color: '#4DFFFFFF', radius: 2 })
// .alignItems(VerticalAlign.Center)
// .justifyContent(FlexAlign.Center)
// .visibility(this.videoLandScape == 2 ? Visibility.Hidden : Visibility.Visible)
// .onClick(() => {
// // this.isFullScreen = !this.isFullScreen;
// // WindowModel.shared.setPreferredOrientation(window.Orientation.LANDSCAPE);
// // devicePLSensorManager.devicePLSensorOn(window.Orientation.LANDSCAPE);
// })
// }
// .width('100%')
// .margin({ top: 452 })
//
// }
Row() {
... ... @@ -103,7 +112,7 @@ export struct PlayerTitleComment {
}
if (this.contentDetailData?.newsSummary) {
if (this.contentDetailData?.newsSummary && this.showComment) {
Text('查看详情 > ')
.margin({ top: 8 })
.padding(6)
... ... @@ -123,7 +132,9 @@ export struct PlayerTitleComment {
.alignItems(HorizontalAlign.Start)
.margin({ left: 16 })
OperationListView()
OperationListView({
playerController: this.playerController
})
.width(48)
}
.width('100%')
... ... @@ -134,17 +145,24 @@ export struct PlayerTitleComment {
Slider({
value: this.progressVal,
step: 1,
style: SliderStyle.OutSet
// 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')
})
.blockColor(Color.White)
.trackColor($r('app.color.track_color'))
.selectedColor($r('app.color.index_tab_selected_font_color'))
.trackThickness(1)
.blockSize({ width: 18, height: 12 })
.width('100%')
.height(19)
.onChange((value: number, mode: SliderChangeMode) => {
this.playerController?.setSeekTime(value, mode);
})
if (this.showComment) {
Row() {
Image($r('app.media.ic_back'))
.width(24)
... ... @@ -163,11 +181,14 @@ export struct PlayerTitleComment {
.layoutWeight(1)
.backgroundColor('#1a1a1a')
.borderRadius(2)
.height(30)
.margin({ left: 12 })
}
.alignItems(VerticalAlign.Center)
.padding({ left: 16, right: 16, top: 11, bottom: 11 })
}
}
}.backgroundColor(Color.Black)
}
... ...
{
"color": [
{
"name": "play_block_color",
"value": "#FFFFFF"
},
{
"name": "play_track_color",
"value": "#1AFFFFFF"
},
{
"name": "play_selected_color",
"value": "#4DFFFFFF"
},
{
"name": "pause_block_color",
"value": "#FFFFFF"
},
{
"name": "pause_track_color",
"value": "#1AFFFFFF"
},
{
"name": "pause_selected_color",
"value": "#FFED2800"
},
{
"name": "index_tab_selected_font_color",
"value": "#007DFF"
"value": "#4DFFFFFF"
},
{
"name": "divider_color",
... ... @@ -10,7 +34,7 @@
},
{
"name": "track_color",
"value": "#888888"
"value": "#1AFFFFFF"
},
{
"name": "speed_text_color",
... ...
... ... @@ -22,6 +22,7 @@ export class WDPlayerController {
public onVolumeUpdate?: (volume: number) => void;
public continue?: () => void;
public onCanplay?: () => void;
public onStatusChange?: (status: number) => void;
constructor() {
Logger.error("初始化")
... ... @@ -163,92 +164,92 @@ export class WDPlayerController {
}
async pause() {
if (this.avPlayer == null) {
await this.initPromise;
}
if (this.avPlayer == null) {
return
}
this.avPlayer.pause();
// if (this.avPlayer == null) {
// await this.initPromise;
// }
// if (this.avPlayer == null) {
// return
// }
this.avPlayer?.pause();
}
async play() {
if (this.avPlayer == null) {
await this.initPromise;
}
if (this.avPlayer == null) {
return
}
this.avPlayer.play();
// if (this.avPlayer == null) {
// await this.initPromise;
// }
// if (this.avPlayer == null) {
// return
// }
this.avPlayer?.play();
}
async stop() {
if (this.avPlayer == null) {
await this.initPromise;
}
if (this.avPlayer == null) {
return
}
this.avPlayer.stop();
// if (this.avPlayer == null) {
// await this.initPromise;
// }
// if (this.avPlayer == null) {
// return
// }
this.avPlayer?.stop();
}
async setLoop() {
if (this.avPlayer == null) {
await this.initPromise;
}
if (this.avPlayer == null) {
return
}
// if (this.avPlayer == null) {
// await this.initPromise;
// }
// if (this.avPlayer == null) {
// return
// }
this.loop = !this.loop;
}
async setSpeed(playSpeed: number) {
if (this.avPlayer == null) {
await this.initPromise;
}
if (this.avPlayer == null) {
return
}
if (PlayerConstants.OPERATE_STATE.indexOf(this.avPlayer.state) === -1) {
// if (this.avPlayer == null) {
// await this.initPromise;
// }
// if (this.avPlayer == null) {
// return
// }
if (this.avPlayer && PlayerConstants.OPERATE_STATE.indexOf(this.avPlayer?.state) === -1) {
return;
}
this.playSpeed = playSpeed;
this.avPlayer.setSpeed(this.playSpeed);
this.avPlayer?.setSpeed(this.playSpeed);
}
async switchPlayOrPause() {
if (this.avPlayer == null) {
await this.initPromise;
}
if (this.avPlayer == null) {
return
}
// if (this.avPlayer == null) {
// await this.initPromise;
// }
// if (this.avPlayer == null) {
// return
// }
if (this.status === PlayerConstants.STATUS_START) {
this.avPlayer.pause();
this.avPlayer?.pause();
} else {
this.avPlayer.play();
this.avPlayer?.play();
}
}
async setSeekTime(value: number, mode: SliderChangeMode) {
if (this.avPlayer == null) {
await this.initPromise;
}
if (this.avPlayer == null) {
return
}
if (mode == SliderChangeMode.Begin) {
this.seekTime = value * 1000;
this.avPlayer.seek(this.seekTime, media.SeekMode.SEEK_PREV_SYNC);
}
// if (this.avPlayer == null) {
// await this.initPromise;
// }
// if (this.avPlayer == null) {
// return
// }
// if (mode == SliderChangeMode.Begin) {
// this.seekTime = value * 1000;
// this.avPlayer?.seek(this.seekTime, media.SeekMode.SEEK_PREV_SYNC);
// }
if (mode === SliderChangeMode.Moving) {
// this.progressThis.progressVal = value;
// this.progressThis.currentTime = DateFormatUtil.secondToTime(Math.floor(value * this.duration /
// 100 / 1000));
}
if (mode === SliderChangeMode.End) {
this.seekTime = value * this.duration / 100;
this.avPlayer.seek(this.seekTime, media.SeekMode.SEEK_PREV_SYNC);
this.seekTime = value * this.duration;
this.avPlayer?.seek(this.seekTime, media.SeekMode.SEEK_PREV_SYNC);
}
}
... ... @@ -333,6 +334,10 @@ export class WDPlayerController {
}
watchStatus() {
console.log('watchStatus', this.status)
if (this.onStatusChange) {
this.onStatusChange(this.status)
}
// if (this.status === PlayConstants.STATUS_START) {
// globalThis.windowClass.setWindowKeepScreenOn(true);
// } else {
... ...
... ... @@ -94,17 +94,27 @@ export struct WDPlayerRenderView {
})
.width(this.selfSize.width)
.height(this.selfSize.height)
.margin({ top: this.getPlayerMarginTop() })
}
.id(this.insId)
.onAreaChange(() => {
// this.updateLayout()
})
.backgroundColor("#000000")
.alignItems(VerticalAlign.Center)
.justifyContent(FlexAlign.Center)
.alignItems(this.selfSize.width === '100%' ? VerticalAlign.Top : VerticalAlign.Center)
.height('100%')
.width('100%')
}
/**
* 横屏播放器非居中展示
*/
getPlayerMarginTop() {
return this.selfSize.width === '100%' && this.videoWidth > this.videoHeight ? 218 : 0
}
updateLayout() {
let info = componentUtils.getRectangleById(this.insId);
if (info.size.width > 0 && info.size.height > 0 && this.videoHeight > 0 && this.videoWidth > 0) {
... ...