diff --git a/entry/src/main/ets/pages/VideoPlay.ets b/entry/src/main/ets/pages/VideoPlay.ets index d301e776b43e0476d4ec1403b62e12af0b863dec..ccfc43598ae22d48385b5658966f8ebc89c37c51 100644 --- a/entry/src/main/ets/pages/VideoPlay.ets +++ b/entry/src/main/ets/pages/VideoPlay.ets @@ -75,8 +75,6 @@ export struct PlayVideo { private pipController: PiPWindow.PiPController | undefined = undefined; private eventHub = getContext().eventHub; private scrollerForScroll: Scroller = new Scroller(); - private defaultListData: Array = [1, 2, 3, 4, 5, 6]; - private pathStack: NavPathStack = new NavPathStack(); aboutToAppear(): void { this.eventHub.on('onStateChange', (fg: boolean) => { @@ -93,14 +91,9 @@ export struct PlayVideo { this.player = undefined; } this.eventHub?.off('onStateChange'); - this.pipController?.off('stateChange'); - this.pipController?.off('controlPanelActionEvent'); } async startPip(): Promise { - if (!this.pipController) { - await this.createPipController(); - } if (!this.pipController) { Logger.info(`[${TAG}] pipController create error`); return; @@ -116,6 +109,16 @@ export struct PlayVideo { await this.pipController.stopPiP(); } + async createPip(): Promise { + if (this.pipController) { + this.pipController.off('stateChange'); + this.pipController.off('controlPanelActionEvent'); + await this.pipController.stopPiP(); + } + await this.createPipController(); + await this.startPip(); + } + async createPipController(): Promise { this.pipController = await PiPWindow.create({ context: getContext(this), @@ -195,15 +198,13 @@ export struct PlayVideo { } showToast() { - if (this.curBp === 'xl') { - try { - promptAction.showToast(({ - message: $r('app.string.notsupport'), - duration: 2000 - })); - } catch (error) { - Logger.error(`showToast args error code is ${error.code}, message is ${error.message}}`); - } + try { + promptAction.showToast(({ + message: $r('app.string.notsupport'), + duration: 2000 + })); + } catch (error) { + Logger.error(`showToast args error code is ${error.code}, message is ${error.message}}`); } } @@ -218,13 +219,18 @@ export struct PlayVideo { .height($r('app.integer.auto_button_height')) .selectedColor($r('sys.color.brand')) .onChange(async (isOn: boolean) => { - this.showToast(); this.isAutoPull = isOn; - if (!this.pipController) { - await this.createPipController(); + if (isOn) { + if (this.curBp === 'xl') { + this.showToast(); + return; + } + if (!this.pipController) { + await this.createPipController(); + } + this.pipController?.setAutoStartEnabled(this.isAutoPull); + this.hintMsgVisibility = true; } - this.pipController?.setAutoStartEnabled(this.isAutoPull); - this.hintMsgVisibility = true; }) } .width(Constants.FULL_PERCENT) @@ -318,180 +324,105 @@ export struct PlayVideo { } } - @Builder - defaultListPage() { - Row() { - } - .backgroundColor($r('sys.color.comp_background_primary')) - .height(60) - .width(Constants.FULL_PERCENT) - .borderRadius($r('sys.float.corner_radius_level6')) - .margin({ - top: $r('sys.float.padding_level8'), - right: $r('sys.float.padding_level8'), - left: $r('sys.float.padding_level8') - }) - } - build() { - Column() { - NavDestination() { - SideBarContainer(SideBarContainerType.Embed) { - Column() { - ForEach(this.defaultListData, () => { - this.defaultListPage() - }, (item: number, index: number) => (item + index).toString()) - } - .backgroundColor($r('sys.color.background_secondary')) - .padding({ - top: $r('sys.float.padding_level16') - }) - .margin({ - right: $r('sys.float.padding_level8'), - left: $r('sys.float.padding_level8') - }) - - Column({ space: Constants.SPACE }) { - Stack() { - RelativeContainer() { - XComponent({ - id: 'video', - type: XComponentType.SURFACE, - controller: this.mXComponentController - }) - .onLoad(() => { - Logger.info(`[${TAG}] XComponent onLoad`); - this.surfaceId = this.mXComponentController.getXComponentSurfaceId(); - this.player = new AVPlayer(this.surfaceId, Constants.AVPLAYER_TYPE); - this.player.avPlayerFdSrc(); - }) - .onDestroy(() => { - this.player?.stopAvPlayer(); - Logger.info(`[${TAG}] XComponent onDestroy`); - }) - .size({ - width: Constants.X_COMPONENT_WIDTH, - height: '100%' - }) - .backgroundColor($r('app.color.video_background_dark')) - .align(Alignment.Bottom) - .id('x_component') - - Row() { - SymbolGlyph($r('sys.symbol.chevron_left')) - .fontColor([$r('sys.color.icon_on_primary')]) - .fontSize($r('sys.float.Title_M')) - } - .justifyContent(FlexAlign.Center) - .alignItems(VerticalAlign.Center) - .backgroundColor($r('app.color.icon_background_dark')) - .height(40) - .aspectRatio(1) - .alignRules({ - top: { anchor: '__container__', align: VerticalAlign.Top }, - left: { anchor: '__container__', align: HorizontalAlign.Start } - }) - .borderRadius($r('sys.float.corner_radius_level12')) - .margin({ - top: $r('sys.float.padding_level16'), - left: this.curBp === 'sm' ? $r('sys.float.padding_level6') : $r('sys.float.padding_level12') - }) - .onClick(() => { - this.pathStack.pop(); - }) + NavDestination() { + Column({ space: Constants.SPACE }) { + Stack() { + RelativeContainer() { + XComponent({ + id: 'video', + type: XComponentType.SURFACE, + controller: this.mXComponentController + }) + .onLoad(() => { + Logger.info(`[${TAG}] XComponent onLoad`); + this.surfaceId = this.mXComponentController.getXComponentSurfaceId(); + this.player = new AVPlayer(this.surfaceId, Constants.AVPLAYER_TYPE); + this.player.avPlayerFdSrc(); + }) + .onDestroy(() => { + this.player?.stopAvPlayer(); + Logger.info(`[${TAG}] XComponent onDestroy`); + }) + .size({ + width: Constants.X_COMPONENT_WIDTH, + height: '100%' + }) + .backgroundColor($r('app.color.video_background_dark')) + .align(Alignment.Bottom) + .id('x_component') - Row() { - SymbolGlyph(this.curState === 'STOPPED' ? $r('sys.symbol.enlarge_window') : - $r('sys.symbol.smal_window_playback')) - .fontColor([$r('sys.color.icon_on_primary')]) - .fontSize($r('sys.float.Title_M')) - } - .justifyContent(FlexAlign.Center) - .alignItems(VerticalAlign.Center) - .backgroundColor($r('app.color.icon_background_dark')) - .height(40) - .aspectRatio(1) - .alignRules({ - top: { anchor: '__container__', align: VerticalAlign.Top }, - right: { anchor: '__container__', align: HorizontalAlign.End } - }) - .borderRadius($r('sys.float.corner_radius_level12')) - .margin({ - top: $r('sys.float.padding_level16'), - right: this.curBp === 'sm' ? $r('sys.float.padding_level6') : $r('sys.float.padding_level12') - }) - .onClick(() => { - if (this.curState === 'STARTED') { - this.stopPip(); - this.hintMsgVisibility = false; - } else if (this.curState === 'STOPPED') { - this.startPip(); - this.hintMsgVisibility = true; - } else { - this.startPip(); - this.hintMsgVisibility = true; - } - this.showToast(); - }) - } + Row() { + SymbolGlyph(this.curState === 'STOPPED' ? $r('sys.symbol.enlarge_window') : + $r('sys.symbol.smal_window_playback')) + .fontColor([$r('sys.color.icon_on_primary')]) + .fontSize($r('sys.float.Title_M')) } - .backgroundColor($r('sys.color.background_primary')) - .size({ - width: Constants.X_COMPONENT_WIDTH, - height: this.curBp === 'sm' ? '30%' : this.curBp === 'md' ? '45%' : '40%' + .justifyContent(FlexAlign.Center) + .alignItems(VerticalAlign.Center) + .backgroundColor($r('app.color.icon_background_dark')) + .height(40) + .aspectRatio(1) + .alignRules({ + top: { anchor: '__container__', align: VerticalAlign.Top }, + right: { anchor: '__container__', align: HorizontalAlign.End } }) - - Scroll(this.scrollerForScroll) { - Column({ space: Constants.SPACE }) { - this.AutoPip() - this.CallbackMessage() + .borderRadius($r('sys.float.corner_radius_level12')) + .margin({ + top: $r('sys.float.padding_level16'), + right: this.curBp === 'sm' ? $r('sys.float.padding_level6') : $r('sys.float.padding_level12') + }) + .onClick(() => { + if (this.curBp === 'xl') { + this.showToast(); + return; + } + if (this.curState === 'STARTED') { + this.stopPip(); + this.hintMsgVisibility = false; + } else if (this.curState === 'STOPPED') { + this.startPip(); + this.hintMsgVisibility = true; + } else { + this.createPip(); + this.hintMsgVisibility = true; } - .height(Constants.FULL_PERCENT) - .justifyContent(FlexAlign.Start) - .width(Constants.NAV_DESTINATION_WIDTH) - } - .layoutWeight(Constants.SCROLL_LAY_OUT_WEIGHT) - .scrollable(ScrollDirection.Vertical) - .scrollBar(BarState.Off) - .edgeEffect(EdgeEffect.Spring) - .padding({ - right: $r('sys.float.corner_radius_level6'), - left: $r('sys.float.corner_radius_level6') }) } - .width(Constants.NAV_DESTINATION_WIDTH) - .height(Constants.NAV_DESTINATION_HEIGHT) } - .divider({ - strokeWidth: 0.3, - color: $r('sys.color.icon_fourth') + .backgroundColor($r('sys.color.background_primary')) + .size({ + width: Constants.X_COMPONENT_WIDTH, + height: this.curBp === 'sm' ? '30%' : this.curBp === 'md' ? '45%' : '40%' }) - .showSideBar(false) - .sideBarPosition(SideBarPosition.End) - .sideBarWidth(320) - .minSideBarWidth(320) - .maxSideBarWidth(400) - .showControlButton(false) - .autoHide(false) - .onChange((value: boolean) => { - Logger.info('status:' + value); + + Scroll(this.scrollerForScroll) { + Column({ space: Constants.SPACE }) { + this.AutoPip() + this.CallbackMessage() + } + .height(Constants.FULL_PERCENT) + .justifyContent(FlexAlign.Start) + .width(Constants.NAV_DESTINATION_WIDTH) + } + .layoutWeight(Constants.SCROLL_LAY_OUT_WEIGHT) + .scrollable(ScrollDirection.Vertical) + .scrollBar(BarState.Off) + .edgeEffect(EdgeEffect.Spring) + .padding({ + right: $r('sys.float.corner_radius_level6'), + left: $r('sys.float.corner_radius_level6') }) } - .width(Constants.FULL_PERCENT) - .height(Constants.FULL_PERCENT) - .hideTitleBar(true) - .backgroundColor($r('sys.color.background_secondary')) - .onBackPressed(() => { - // Go back to the previous page and pass the result into push's onPop callback. - this.pathStack.pop(); - return true; - }) - .onReady((context: NavDestinationContext) => { - this.pathStack = context.pathStack; - }) + .width(Constants.NAV_DESTINATION_WIDTH) + .height(Constants.NAV_DESTINATION_HEIGHT) } .width(Constants.FULL_PERCENT) .height(Constants.FULL_PERCENT) + .hideTitleBar(true) .backgroundColor($r('sys.color.background_secondary')) + .onBackPressed(() => { + return true; + }) } } \ No newline at end of file diff --git a/entry/src/main/ets/pages/WindowPip.ets b/entry/src/main/ets/pages/WindowPip.ets index c9861944e29c0c1fcb8be9d008e1486cb124c7c9..a76157230203822f2d8b13f78a2e7bba196026e0 100644 --- a/entry/src/main/ets/pages/WindowPip.ets +++ b/entry/src/main/ets/pages/WindowPip.ets @@ -78,6 +78,11 @@ struct WindowPip { } } + aboutToAppear(): void { + getContext().eventHub.emit('onStateChange', true); + this.pageInfos?.pushPath({ name: Constants.NAV_DESTINATION_NAME }, { launchMode: 3, animated: false }); + } + build() { Navigation(this.pageInfos) { Column() { @@ -106,7 +111,7 @@ struct WindowPip { }, (item: Resource) => item.id.toString()) } .width(Constants.FULL_PERCENT) - .height(Constants.FULL_PERCENT) + .layoutWeight(1) .columnsTemplate(this.curBp === 'sm' ? Constants.COLUMNS_TEMPLATE_SM : this.curBp === 'md' ? Constants.COLUMNS_TEMPLATE_MD : Constants.COLUMNS_TEMPLATE_LG) .columnsGap(this.curBp === 'lg' ? $r('sys.float.padding_level8') : $r('sys.float.padding_level6'))