Showing
5 changed files
with
80 additions
and
2 deletions
| @@ -38,6 +38,7 @@ export struct DetailPlayLivePage { | @@ -38,6 +38,7 @@ export struct DetailPlayLivePage { | ||
| 38 | 38 | ||
| 39 | aboutToAppear(): void { | 39 | aboutToAppear(): void { |
| 40 | Logger.info(TAG, `wyj-aboutToAppear`) | 40 | Logger.info(TAG, `wyj-aboutToAppear`) |
| 41 | + | ||
| 41 | this.listener?.on("change", (mediaQueryResult) => { | 42 | this.listener?.on("change", (mediaQueryResult) => { |
| 42 | Logger.info(TAG, `change;${mediaQueryResult.matches}`) | 43 | Logger.info(TAG, `change;${mediaQueryResult.matches}`) |
| 43 | if (mediaQueryResult?.matches) { | 44 | if (mediaQueryResult?.matches) { |
| @@ -85,6 +86,7 @@ export struct DetailPlayLivePage { | @@ -85,6 +86,7 @@ export struct DetailPlayLivePage { | ||
| 85 | } | 86 | } |
| 86 | .height('100%') | 87 | .height('100%') |
| 87 | .width('100%') | 88 | .width('100%') |
| 89 | + | ||
| 88 | // 设置底部绘制延伸到导航条 | 90 | // 设置底部绘制延伸到导航条 |
| 89 | } | 91 | } |
| 90 | 92 |
| @@ -21,6 +21,8 @@ export struct PlayUIComponent { | @@ -21,6 +21,8 @@ export struct PlayUIComponent { | ||
| 21 | @State isPlayStatus: boolean = true | 21 | @State isPlayStatus: boolean = true |
| 22 | @Consume displayDirection: DisplayDirection | 22 | @Consume displayDirection: DisplayDirection |
| 23 | 23 | ||
| 24 | + @Prop isShowBottom: boolean | ||
| 25 | + | ||
| 24 | onChangeMenuVisible() { | 26 | onChangeMenuVisible() { |
| 25 | if (!this.liveDetailsBean || !this.liveDetailsBean.liveInfo || | 27 | if (!this.liveDetailsBean || !this.liveDetailsBean.liveInfo || |
| 26 | this.liveDetailsBean?.liveInfo?.liveState === 'wait') { | 28 | this.liveDetailsBean?.liveInfo?.liveState === 'wait') { |
| @@ -59,8 +61,11 @@ export struct PlayUIComponent { | @@ -59,8 +61,11 @@ export struct PlayUIComponent { | ||
| 59 | if (this.liveDetailsBean && this.liveDetailsBean.liveInfo) { | 61 | if (this.liveDetailsBean && this.liveDetailsBean.liveInfo) { |
| 60 | this.getTopUIComponent() | 62 | this.getTopUIComponent() |
| 61 | this.getMiddleUIComponent() | 63 | this.getMiddleUIComponent() |
| 64 | + if(this.isShowBottom){ | ||
| 62 | this.getBottomUIComponent() | 65 | this.getBottomUIComponent() |
| 63 | } | 66 | } |
| 67 | + | ||
| 68 | + } | ||
| 64 | } | 69 | } |
| 65 | .width('100%') | 70 | .width('100%') |
| 66 | .height('100%') | 71 | .height('100%') |
| 1 | import { LiveDetailsBean } from 'wdBean/Index'; | 1 | import { LiveDetailsBean } from 'wdBean/Index'; |
| 2 | import { StringUtils } from 'wdKit/Index'; | 2 | import { StringUtils } from 'wdKit/Index'; |
| 3 | -import { WDAliPlayerController, WDPlayerController, WDPlayerRenderLiveView } from 'wdPlayer/Index'; | 3 | +import { PlayerConstants, WDAliPlayerController, WDPlayerController, WDPlayerRenderLiveView } from 'wdPlayer/Index'; |
| 4 | import { PlayUIComponent } from './PlayUIComponent'; | 4 | import { PlayUIComponent } from './PlayUIComponent'; |
| 5 | import { Logger } from 'wdKit/Index'; | 5 | import { Logger } from 'wdKit/Index'; |
| 6 | +import { PictureLoading } from '../../vertical/PictureLoading'; | ||
| 6 | 7 | ||
| 7 | const TAG: string = 'TopPlayComponent' | 8 | const TAG: string = 'TopPlayComponent' |
| 8 | 9 | ||
| @@ -16,13 +17,37 @@ export struct TopPlayComponent { | @@ -16,13 +17,37 @@ export struct TopPlayComponent { | ||
| 16 | @State isWait: boolean = false | 17 | @State isWait: boolean = false |
| 17 | //已结束直播 | 18 | //已结束直播 |
| 18 | @State isEnd: boolean = false | 19 | @State isEnd: boolean = false |
| 20 | + //播放错误 | ||
| 21 | + @State isError: boolean = false | ||
| 22 | + // loading 控制字段 | ||
| 23 | + @State isLoading: boolean = false | ||
| 24 | + // 获取播放资源能播放了 | ||
| 25 | + @State isCanPlay: boolean = false | ||
| 19 | private playUrl: string = "" | 26 | private playUrl: string = "" |
| 20 | private xComponentIsLoaded: boolean = false | 27 | private xComponentIsLoaded: boolean = false |
| 21 | 28 | ||
| 22 | aboutToAppear(): void { | 29 | aboutToAppear(): void { |
| 23 | if (this.playerController) { | 30 | if (this.playerController) { |
| 24 | this.playerController.onCanplay = () => { | 31 | this.playerController.onCanplay = () => { |
| 32 | + | ||
| 33 | + this.isCanPlay = true | ||
| 34 | + this.isLoading = true | ||
| 25 | this.playerController?.play() | 35 | this.playerController?.play() |
| 36 | + | ||
| 37 | + } | ||
| 38 | + | ||
| 39 | + this.playerController.onStatusChange = (status: number) => { | ||
| 40 | + | ||
| 41 | + if (status === PlayerConstants.STATUS_ERROR) { | ||
| 42 | + this.isError = true | ||
| 43 | + this.isLoading = true | ||
| 44 | + | ||
| 45 | + this.isCanPlay = false | ||
| 46 | + } else { | ||
| 47 | + this.isError = false | ||
| 48 | + } | ||
| 49 | + | ||
| 50 | + | ||
| 26 | } | 51 | } |
| 27 | } | 52 | } |
| 28 | this.updateData() | 53 | this.updateData() |
| @@ -74,6 +99,8 @@ export struct TopPlayComponent { | @@ -74,6 +99,8 @@ export struct TopPlayComponent { | ||
| 74 | WDPlayerRenderLiveView({ | 99 | WDPlayerRenderLiveView({ |
| 75 | playerController: this.playerController, | 100 | playerController: this.playerController, |
| 76 | onLoad: async () => { | 101 | onLoad: async () => { |
| 102 | + this.isLoading = false | ||
| 103 | + this.isError = false | ||
| 77 | this.xComponentIsLoaded = true | 104 | this.xComponentIsLoaded = true |
| 78 | this.tryToPlay() | 105 | this.tryToPlay() |
| 79 | } | 106 | } |
| @@ -81,18 +108,56 @@ export struct TopPlayComponent { | @@ -81,18 +108,56 @@ export struct TopPlayComponent { | ||
| 81 | .height('100%') | 108 | .height('100%') |
| 82 | .width('100%') | 109 | .width('100%') |
| 83 | .visibility(this.isWait ? Visibility.None : Visibility.Visible) | 110 | .visibility(this.isWait ? Visibility.None : Visibility.Visible) |
| 111 | + | ||
| 84 | Image(this.imgUrl) | 112 | Image(this.imgUrl) |
| 85 | .objectFit(ImageFit.Cover) | 113 | .objectFit(ImageFit.Cover) |
| 86 | .visibility(this.isWait || this.isEnd ? Visibility.Visible : Visibility.None) | 114 | .visibility(this.isWait || this.isEnd ? Visibility.Visible : Visibility.None) |
| 87 | .contrast(this.isEnd ? 0.2 : 1) | 115 | .contrast(this.isEnd ? 0.2 : 1) |
| 88 | .width('100%') | 116 | .width('100%') |
| 89 | - PlayUIComponent({ playerController: this.playerController }) | 117 | + |
| 118 | + PictureLoading().visibility(this.isLoading ? Visibility.None : Visibility.Visible) | ||
| 119 | + | ||
| 120 | + // 视频播放器上的控制面板和信息 | ||
| 121 | + PlayUIComponent({ playerController: this.playerController, isShowBottom: this.isCanPlay }) | ||
| 122 | + | ||
| 90 | Text('直播已结束') | 123 | Text('直播已结束') |
| 91 | .fontSize('20fp') | 124 | .fontSize('20fp') |
| 92 | .fontWeight(500) | 125 | .fontWeight(500) |
| 93 | .fontColor(Color.White) | 126 | .fontColor(Color.White) |
| 94 | .visibility(this.isEnd ? Visibility.Visible : | 127 | .visibility(this.isEnd ? Visibility.Visible : |
| 95 | Visibility.None) | 128 | Visibility.None) |
| 129 | + | ||
| 130 | + | ||
| 131 | + Column() { | ||
| 132 | + | ||
| 133 | + Text('直播加载中,请稍候重试') | ||
| 134 | + .fontSize('20fp') | ||
| 135 | + .fontWeight(500) | ||
| 136 | + .margin({ top: 16 }) | ||
| 137 | + .fontColor(Color.White) | ||
| 138 | + | ||
| 139 | + Button('点击重试') | ||
| 140 | + .type(ButtonType.Normal) | ||
| 141 | + .width(80) | ||
| 142 | + .height(28) | ||
| 143 | + .backgroundColor(Color.Transparent) | ||
| 144 | + .fontColor('#ffcccccc') | ||
| 145 | + .border({ width: 1 }) | ||
| 146 | + .borderColor('#4dffffff') | ||
| 147 | + .borderRadius(4) | ||
| 148 | + .fontSize($r('app.float.font_size_12')) | ||
| 149 | + .margin({ top: 16 }) | ||
| 150 | + .padding(0) | ||
| 151 | + .onClick(() => { | ||
| 152 | + this.isLoading = false | ||
| 153 | + this.isError = false | ||
| 154 | + this.xComponentIsLoaded = true | ||
| 155 | + this.tryToPlay() | ||
| 156 | + | ||
| 157 | + }) | ||
| 158 | + }.width('100%').visibility(this.isError ? Visibility.Visible : | ||
| 159 | + Visibility.None) | ||
| 160 | + | ||
| 96 | } | 161 | } |
| 97 | .width('100%') | 162 | .width('100%') |
| 98 | .alignSelf(ItemAlign.Center) | 163 | .alignSelf(ItemAlign.Center) |
| @@ -13,6 +13,11 @@ export struct PictureLoading { | @@ -13,6 +13,11 @@ export struct PictureLoading { | ||
| 13 | Logger.info(TAG, 'pictures preview') | 13 | Logger.info(TAG, 'pictures preview') |
| 14 | } | 14 | } |
| 15 | 15 | ||
| 16 | + aboutToDisappear(): void { | ||
| 17 | + Logger.info(TAG, 'aboutToDisappear') | ||
| 18 | + } | ||
| 19 | + | ||
| 20 | + | ||
| 16 | build() { | 21 | build() { |
| 17 | Row() { | 22 | Row() { |
| 18 | Image(this.imagePath) | 23 | Image(this.imagePath) |
| @@ -79,6 +79,7 @@ export struct PlayerComponent { | @@ -79,6 +79,7 @@ export struct PlayerComponent { | ||
| 79 | playerController: this.playerController, | 79 | playerController: this.playerController, |
| 80 | onLoad: () => { | 80 | onLoad: () => { |
| 81 | this.isCanplay = true | 81 | this.isCanplay = true |
| 82 | + console.error('WDAliPlayerController','------1------------') | ||
| 82 | this.playerController?.firstPlay(this.playUrl); | 83 | this.playerController?.firstPlay(this.playUrl); |
| 83 | } | 84 | } |
| 84 | }).margin({ top: 195 }).height(211) | 85 | }).margin({ top: 195 }).height(211) |
-
Please register or login to post a comment