developOne / harmonyPool

Go to a project
Toggle navigation Toggle navigation pinning
zhenghy
21dba92d 1 parent 7de093d9

竖屏直播

Inline Side-by-side
Showing 9 changed files with 124 additions and 158 deletions
... ... @@ -5,6 +5,7 @@ import { WindowModel } from 'wdKit/Index';
import { PlayerComponent } from '../widgets/vertical/PlayerComponent';
import { PlayerInfoComponent } from '../widgets/vertical/PlayerInfoComponent';
import { WDPlayerController } from 'wdPlayer/Index';
import { DisplayDirection } from 'wdConstant/Index';
const storage = LocalStorage.getShared();
... ... @@ -21,6 +22,7 @@ export struct DetailPlayVLivePage {
@Provide liveRoomDataBean: LiveRoomDataBean = {} as LiveRoomDataBean
@Provide isShowControl: boolean = false
@Provide liveState: string = ''
@Provide displayDirection: DisplayDirection = DisplayDirection.VERTICAL //横竖屏,默认竖屏
@State relId: string = ''
@State contentId: string = ''
@State relType: string = ''
... ... @@ -43,7 +45,6 @@ export struct DetailPlayVLivePage {
aboutToDisappear(): void {
WindowModel.shared.setWindowLayoutFullScreen(false)
WindowModel.shared.setWindowSystemBarProperties({ statusBarContentColor: '#000000', })
}
build() {
... ... @@ -52,9 +53,6 @@ export struct DetailPlayVLivePage {
PlayerComponent({
playerController: this.playerController
})
.onClick(() => {
this.isShowControl = !this.isShowControl
})
PlayerInfoComponent({
playerController: this.playerController,
... ... @@ -67,7 +65,8 @@ export struct DetailPlayVLivePage {
.aspectRatio(1)
.visibility(this.swiperIndex === 0 ? Visibility.Visible : Visibility.Hidden)
.animation({ duration: 500 })
.position({ x: '90%', y: '90%' })
.position({ x: '100%', y: '100%' })
.markAnchor({ x: 56, y: 56 })
.onClick(() => {
this.swiperController.showNext()
})
... ...
import { LiveDetailsBean } from 'wdBean/Index';
import { WDPlayerController, WDPlayerRenderView } from 'wdPlayer/Index';
import { PlayUIComponent } from './PlayUIComponent';
@Component
export struct TopPlayVComponent {
@Consume @Watch('updateData') liveDetailsBean: LiveDetailsBean
playerController: WDPlayerController = new WDPlayerController();
aboutToAppear(): void {
this.playerController.onCanplay = () => {
this.playerController.play()
}
}
updateData() {
//直播新闻-直播状态 wait待开播running直播中end已结束cancel已取消paused暂停
if (this.liveDetailsBean.liveInfo && this.liveDetailsBean.liveInfo.vlive.length > 0) {
let playUrl = ''
if (this.liveDetailsBean.liveInfo.liveState == 'running') {
playUrl = this.liveDetailsBean.liveInfo.vlive[0].liveUrl
} else if (this.liveDetailsBean.liveInfo.liveState == 'end') {
playUrl = this.liveDetailsBean.liveInfo.vlive[0].replayUri
}
this.playerController.firstPlay(playUrl);
}
}
build() {
Stack() {
// https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-image-effect-0000001862607345
Image(this.liveDetailsBean.fullColumnImgUrls[0].url)
.height('100%')
.width('100%')
.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
.blur(100)
WDPlayerRenderView({
playerController: this.playerController,
onLoad: async () => {
}
})// .height('100%')
.width('100%')// 扩展至所有非安全区域
.onClick(() => {
this.playerController.play()
})
// PlayUIComponent({ playerController: this.playerController })
}
// .height('100%')
.width('100%')
// 扩展至所有非安全区域
.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
}
aboutToDisappear(): void {
this.playerController.pause()
}
}
\ No newline at end of file
import { LiveDetailsBean } from 'wdBean/Index'
@Component
export struct ChartItemCompereComponent {
@Consume liveDetailsBean: LiveDetailsBean
aboutToAppear(): void {
}
build() {
ListItem() {
Column() {
Row() {
Image($r('app.media.icon_live_status_running'))
.borderRadius(10)
.width(20)
.height(20)
.margin({ right: 8 })
Text('人民日报')
.fontSize(14)
.fontColor('#FFFFFFFF')
.margin({ right: 8 })
Text(' 主持人 ')
.fontSize(11)
.backgroundColor('808562')
.fontColor('#FFFFFFFF')
.padding({ top: 2, bottom: 2, left: 4, right: 4 })
.borderRadius(4)
}.margin({ bottom: 8 })
Text(this.liveDetailsBean.newIntroduction).lineHeight(22)
}
.backgroundColor('#4D000000')
.borderRadius(3)
.padding({
top: 6,
bottom: 6,
left: 8,
right: 8
})
.margin({ left: 16, bottom: 4 })
}
}
}
\ No newline at end of file
... ...
... ... @@ -9,31 +9,35 @@ export struct ChatItemComponent {
build() {
Row() {
Image(this.item.senderUserAvatarUrl)
.borderRadius(90)
.width(24)
.height(24)
Text() {
if (this.item.senderUserName) {
Span(' 主持人 ')
.fontSize(11)
.lineHeight(20)
.textBackgroundStyle({ color: '#808562', radius: 2 })
Span(' ')
}
Span(this.item.senderUserName + ': ')
.fontColor('#666666')
.fontColor('#FFFFC63F')
.padding({ right: 118 })
//
Span(this.item.text)
.fontColor('#222222')
}
.margin({ left: 8 })
.lineHeight(20)
.layoutWeight(1)
.fontSize('14fp')
.fontWeight(400)
.fontSize(14)
.fontColor('#FFFFFFFF')
.lineHeight(22)
.textShadow({ offsetX: 1, offsetY: 1, color: '#4D000000', radius: 1 })
}
.alignItems(VerticalAlign.Top)
.backgroundColor('#4D000000')
.borderRadius(3)
.padding({
left: 15,
top: 15,
right: 15
top: 6,
bottom: 6,
left: 8,
right: 8
})
}
aboutToDisappear(): void {
.margin({ left: 16, bottom: 4 })
}
}
\ No newline at end of file
... ...
import { LiveDetailsBean, LiveRoomItemBean } from 'wdBean/Index'
import { EmptyComponent, ErrorComponent, ListHasNoMoreDataUI } from 'wdComponent/Index'
import CustomRefreshLoadLayout from 'wdComponent/src/main/ets/components/page/CustomRefreshLoadLayout'
import LoadMoreLayout from 'wdComponent/src/main/ets/components/page/LoadMoreLayout'
import RefreshLayout from 'wdComponent/src/main/ets/components/page/RefreshLayout'
import { RefreshLayoutBean } from 'wdComponent/src/main/ets/components/page/RefreshLayoutBean'
import { LiveDetailsBean, LiveRoomDataBean, LiveRoomItemBean } from 'wdBean/Index'
import { LiveCommentComponent } from 'wdComponent/Index'
import PageModel from 'wdComponent/src/main/ets/viewmodel/PageModel'
import { ViewType } from 'wdConstant/Index'
import { DisplayDirection, ViewType } from 'wdConstant/Index'
import { LiveViewModel } from '../../viewModel/LiveViewModel'
import { TabChatItemComponent } from '../details/TabChatItemComponent'
import { ChartItemCompereComponent } from './ChartItemCompereComponent'
import { ChatItemComponent } from './ChartItemComponent'
@Component
export struct PlayerCommentComponent {
liveViewModel: LiveViewModel = new LiveViewModel()
@Consume liveDetailsBean: LiveDetailsBean
@Consume @Watch('liveDetailsBeanChange') liveDetailsBean: LiveDetailsBean
@Consume liveRoomDataBean: LiveRoomDataBean
@Consume displayDirection: DisplayDirection
@State private pageModel: PageModel = new PageModel()
@State liveChatList: Array<LiveRoomItemBean> = []
... ... @@ -21,6 +20,10 @@ export struct PlayerCommentComponent {
this.getLiveChatList()
}
liveDetailsBeanChange() {
this.getLiveChatList()
}
getLiveChatList() {
this.pageModel.currentPage = 1
this.liveViewModel.getLiveChatList(
... ... @@ -31,8 +34,10 @@ export struct PlayerCommentComponent {
.then(
(data) => {
if (data.barrageResponses && data.barrageResponses.length > 0) {
this.pageModel.viewType = ViewType.LOADED;
this.liveChatList.push(...data.barrageResponses)
console.log('liveChatList===', this.liveChatList)
if (data.barrageResponses.length === this.pageModel.pageSize) {
this.pageModel.currentPage++;
this.pageModel.hasMore = true;
... ... @@ -49,58 +54,27 @@ export struct PlayerCommentComponent {
}
build() {
Stack() {
if (this.pageModel.viewType == ViewType.LOADING) {
this.LoadingLayout()
} else if (this.pageModel.viewType == ViewType.ERROR) {
ErrorComponent()
} else if (this.pageModel.viewType == ViewType.EMPTY) {
EmptyComponent()
} else {
this.ListLayout()
}
}
.align(Alignment.Top)
// .backgroundColor('#F5F5F5')
.height('100%')
.width('100%')
}
@Builder
LoadingLayout() {
CustomRefreshLoadLayout({
refreshBean: new RefreshLayoutBean(true,
$r('app.media.ic_pull_up_load'), $r('app.string.pull_up_load_text'), this.pageModel.pullDownRefreshHeight)
})
}
@Builder
ListLayout() {
Column() {
List() {
ListItem() {
// 下拉刷新
RefreshLayout({
refreshBean: new RefreshLayoutBean(this.pageModel.isVisiblePullDown, this.pageModel.pullDownRefreshImage,
this.pageModel.pullDownRefreshText, this.pageModel.pullDownRefreshHeight)
})
// 主持人
if (this.liveDetailsBean.oldNewsId) {
ChartItemCompereComponent()
}
ForEach(this.liveChatList, (item: LiveRoomItemBean) => {
ListItem() {
TabChatItemComponent({ item: item })
ChatItemComponent({ item: item })
}
})
// 加载更多
ListItem() {
if (this.pageModel.hasMore) {
LoadMoreLayout({
refreshBean: new RefreshLayoutBean(this.pageModel.isVisiblePullUpLoad, this.pageModel.pullUpLoadImage,
this.pageModel.pullUpLoadText, this.pageModel.pullUpLoadHeight)
})
} else {
ListHasNoMoreDataUI()
}
}
}
.height(280)
.width('80%')
.scrollBar(BarState.Off)
.margin({ bottom: 20 })
LiveCommentComponent({ heartNum: this.liveRoomDataBean.likeNum })
.visibility(this.displayDirection == DisplayDirection.VERTICAL ? Visibility.Visible : Visibility.None)
.backgroundColor(Color.Transparent)
}.alignItems(HorizontalAlign.Start)
}
}
\ No newline at end of file
... ...
... ... @@ -80,7 +80,7 @@ export struct PlayerComponent {
onLoad: () => {
this.playerController?.firstPlay(this.playUrl);
}
}).padding({ top: 195 })
}).margin({ top: 195 }).height(211)
}
}
.height('100%')
... ...
... ... @@ -7,6 +7,8 @@ export struct PlayerInfoComponent {
private playerController?: WDPlayerController
@Consume bottomSafeHeight: number
@Consume topSafeHeight: number
@Consume liveState: string
@Consume isShowControl: boolean
@Link swiperIndex: number
build() {
... ... @@ -17,7 +19,6 @@ export struct PlayerInfoComponent {
bottom: this.bottomSafeHeight + 'px',
top: this.topSafeHeight + 'px'
})
}
.cachedCount(2)
.indicator(false)
... ... @@ -25,6 +26,11 @@ export struct PlayerInfoComponent {
.width('100%')
.height('100%')
.index(this.swiperIndex)
.onClick(() => {
if (this.liveState === 'end') {
this.isShowControl = !this.isShowControl
}
})
.onChange((index) => {
this.swiperIndex = index
})
... ...
... ... @@ -6,20 +6,27 @@ import { PlayerVideoControlComponent } from './PlayerVideoControlComponent';
@Component
export struct PlayerUIComponent {
private playerController?: WDPlayerController
@Consume liveState: string
@Consume isShowControl: boolean
build() {
Column() {
Stack() {
PlayerTitleComponent()
Blank()
// PlayerCommentComponent().layoutWeight(1)
if (this.liveState === 'end') {
// Row() {
// // 全屏按钮
// }.layoutWeight(1)
Row() {
PlayerCommentComponent()
PlayerVideoControlComponent({ playerController: this.playerController })
.visibility(this.isShowControl ? Visibility.Visible : Visibility.Hidden)
.animation({ duration: 500 })
}
.position({ y: '100%' })
.markAnchor({ y: '100%' })
}
.height('100%')
.width('100%')
.alignContent(Alignment.TopStart)
}
}
\ No newline at end of file
... ...
... ... @@ -11,9 +11,6 @@ export struct PlayerVideoControlComponent {
private playerController?: WDPlayerController
@Consume liveDetailsBean: LiveDetailsBean
@Consume liveRoomDataBean: LiveRoomDataBean
//菜单键是否可见
@State isMenuVisible: boolean = true
@State isFullScreen: boolean = false
@State currentTime: string = ''
@State totalTime: string = ''
@State progressVal: number = 0;
... ... @@ -24,7 +21,6 @@ export struct PlayerVideoControlComponent {
if (this.playerController) {
//播放进度监听
this.playerController.onTimeUpdate = (position: number, duration: number) => {
console.log('onTimeUpdate===', position, duration)
this.currentTime = DateFormatUtil.secondToTime(Math.floor(position / 1000));
this.totalTime = DateFormatUtil.secondToTime(Math.floor(duration / 1000));
this.progressVal = Math.floor(position * 100 / duration);
... ... @@ -61,14 +57,6 @@ export struct PlayerVideoControlComponent {
right: 16
})
// Image($r('app.media.icon_live_player_full_screen'))
// .width(24)
// .height(24)
// .onClick(() => {
// this.isFullScreen = !this.isFullScreen
// WindowModel.shared.setPreferredOrientation(this.isFullScreen ? window.Orientation.LANDSCAPE : window.Orientation.PORTRAIT);
// devicePLSensorManager.devicePLSensorOn(this.isFullScreen ? window.Orientation.LANDSCAPE : window.Orientation.PORTRAIT);
// })
}
.alignItems(VerticalAlign.Center)
// .linearGradient({ angle: 0, colors: [['#99000000', 0], ['#00000000', 1]] })
... ... @@ -79,7 +67,6 @@ export struct PlayerVideoControlComponent {
top: 15,
bottom: 15
})
.visibility(this.isMenuVisible ? Visibility.Visible : Visibility.None)
}
@Builder
... ...