From 7f996a4c9559fc61e6a01317338eca715d69a1ab Mon Sep 17 00:00:00 2001 From: lon9 <815882449@qq.com> Date: Mon, 11 Nov 2024 17:58:36 +0800 Subject: [PATCH 1/3] =?UTF-8?q?=E4=B8=80=E5=A4=9A=E9=95=BF=E8=A7=86?= =?UTF-8?q?=E9=A2=91=E8=AF=A6=E6=83=85=E5=8F=8A=E5=85=A8=E5=B1=8F=E6=92=AD?= =?UTF-8?q?=E6=94=BE=E9=A1=B5=E9=87=8D=E6=9E=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- commons/base/Index.ets | 1 + .../main/ets/constants/CommonConstants.ets | 17 +- .../base/src/main/ets/utils/AvPlayerUtil.ets | 21 +- .../src/main/ets/utils/VideoNavPathStack.ets | 38 +-- .../base/src/main/ets/utils/WindowUtil.ets | 93 +++--- .../home/src/main/ets/view/CommonView.ets | 2 +- .../home/src/main/ets/view/DailyVideo.ets | 9 +- features/home/src/main/ets/view/Home.ets | 4 +- .../home/src/main/ets/view/HomeContent.ets | 43 +-- .../home/src/main/ets/view/HomeHeader.ets | 8 +- .../home/src/main/ets/view/PreviousVideo.ets | 7 +- .../src/main/ets/view/RecommendedVideo.ets | 23 +- .../home/src/main/ets/view/VideoDialog.ets | 49 +-- .../main/resources/base/element/float.json | 2 +- .../search/src/main/ets/view/SearchHeader.ets | 4 +- .../search/src/main/ets/view/SearchResult.ets | 7 +- .../main/ets/constants/DetailConstants.ets | 22 +- .../src/main/ets/view/AllComments.ets | 2 +- .../src/main/ets/view/FooterEpisodes.ets | 31 +- .../src/main/ets/view/RelatedList.ets | 5 +- .../src/main/ets/view/SelfComment.ets | 4 +- .../src/main/ets/view/SideEpisodes.ets | 20 +- .../src/main/ets/view/VideoDetail.ets | 135 ++++---- .../src/main/ets/view/VideoDetailView.ets | 125 +++----- .../src/main/ets/view/VideoPlayer.ets | 278 ++++++++++++++++ .../main/resources/base/element/color.json | 12 + .../main/resources/base/element/float.json | 212 +++++++++++++ .../main/resources/base/element/string.json | 22 +- .../resources/base/media/ic_public_pause.svg | 0 .../resources/base/media/ic_public_play.svg | 0 .../base/media/ic_public_play_next.svg | 0 .../base/media/ic_public_view_list_white.svg | 0 .../main/resources/en_US/element/string.json | 22 +- .../main/resources/zh_CN/element/string.json | 22 +- features/videoPlayer/Index.ets | 1 - features/videoPlayer/build-profile.json5 | 10 - features/videoPlayer/hvigorfile.ts | 6 - features/videoPlayer/oh-package.json5 | 14 - .../src/main/ets/view/VideoPlayer.ets | 300 ------------------ features/videoPlayer/src/main/module.json5 | 11 - .../main/resources/base/element/color.json | 16 - .../main/resources/base/element/float.json | 240 -------------- .../main/resources/base/element/string.json | 20 -- .../resources/base/media/ic_public_back.svg | 18 -- .../resources/base/media/video_playing.svg | 13 - .../main/resources/en_US/element/string.json | 20 -- .../main/resources/zh_CN/element/string.json | 20 -- products/phone/oh-package.json5 | 3 +- .../main/ets/entryability/EntryAbility.ets | 76 +---- products/phone/src/main/ets/pages/Index.ets | 14 +- 50 files changed, 869 insertions(+), 1153 deletions(-) rename features/videoPlayer/src/main/ets/constants/PlayerConstants.ets => commons/base/src/main/ets/utils/VideoNavPathStack.ets (41%) rename features/{videoPlayer => videoDetail}/src/main/ets/view/FooterEpisodes.ets (79%) rename features/{videoPlayer => videoDetail}/src/main/ets/view/SideEpisodes.ets (83%) create mode 100644 features/videoDetail/src/main/ets/view/VideoPlayer.ets rename features/{videoPlayer => videoDetail}/src/main/resources/base/media/ic_public_pause.svg (100%) rename features/{videoPlayer => videoDetail}/src/main/resources/base/media/ic_public_play.svg (100%) rename features/{videoPlayer => videoDetail}/src/main/resources/base/media/ic_public_play_next.svg (100%) rename features/{videoPlayer => videoDetail}/src/main/resources/base/media/ic_public_view_list_white.svg (100%) delete mode 100644 features/videoPlayer/Index.ets delete mode 100644 features/videoPlayer/build-profile.json5 delete mode 100644 features/videoPlayer/hvigorfile.ts delete mode 100644 features/videoPlayer/oh-package.json5 delete mode 100644 features/videoPlayer/src/main/ets/view/VideoPlayer.ets delete mode 100644 features/videoPlayer/src/main/module.json5 delete mode 100644 features/videoPlayer/src/main/resources/base/element/color.json delete mode 100644 features/videoPlayer/src/main/resources/base/element/float.json delete mode 100644 features/videoPlayer/src/main/resources/base/element/string.json delete mode 100644 features/videoPlayer/src/main/resources/base/media/ic_public_back.svg delete mode 100644 features/videoPlayer/src/main/resources/base/media/video_playing.svg delete mode 100644 features/videoPlayer/src/main/resources/en_US/element/string.json delete mode 100644 features/videoPlayer/src/main/resources/zh_CN/element/string.json diff --git a/commons/base/Index.ets b/commons/base/Index.ets index 713b23a..07abac6 100644 --- a/commons/base/Index.ets +++ b/commons/base/Index.ets @@ -5,4 +5,5 @@ export { WindowUtil } from './src/main/ets/utils/WindowUtil'; export { AvPlayerUtil } from './src/main/ets/utils/AvPlayerUtil'; export { DisplayUtil } from './src/main/ets/utils/DisplayUtil'; export { DeviceScreen } from './src/main/ets/utils/DeviceScreen'; +export { VideoNavPathStack } from './src/main/ets/utils/VideoNavPathStack'; export { default as Logger } from './src//main/ets/utils/Logger'; \ No newline at end of file diff --git a/commons/base/src/main/ets/constants/CommonConstants.ets b/commons/base/src/main/ets/constants/CommonConstants.ets index d66c4fd..8e29116 100644 --- a/commons/base/src/main/ets/constants/CommonConstants.ets +++ b/commons/base/src/main/ets/constants/CommonConstants.ets @@ -62,11 +62,6 @@ export class CommonConstants { */ static readonly AV_PLAYER_ERROR_STATE: string = 'error'; - /** - * Video detail hsp name. - */ - static readonly VIDEO_DETAIL_HSP_NAME: string = 'videoDetail'; - /** * Product video name. */ @@ -231,7 +226,15 @@ export class CommonConstants { /** * Device types. */ - static readonly DEVICE_TYPES: string[] = ['2in1', 'tablet', 'phone']; -} + static readonly DEVICE_TYPE: string = '2in1'; + /** + * Margin of window floating. + */ + static readonly WINDOW_FLOATING_MARGIN: number = 5.2; + /** + * Page names. + */ + static readonly PAGE_NAMES: string[] = ['home', 'videoDetail']; +} \ No newline at end of file diff --git a/commons/base/src/main/ets/utils/AvPlayerUtil.ets b/commons/base/src/main/ets/utils/AvPlayerUtil.ets index 409f2a2..27f9347 100644 --- a/commons/base/src/main/ets/utils/AvPlayerUtil.ets +++ b/commons/base/src/main/ets/utils/AvPlayerUtil.ets @@ -30,13 +30,13 @@ export class AvPlayerUtil { private onError: (err: BusinessError) => void = (err: BusinessError) => { Logger.error(`Invoke avPlayer failed, code is ${err.code}, message is ${err.message}`); this.avPlayer?.reset(); - } + }; private onTimeUpdateFunction: (updateTime: number) => void = (updateTime: number) => { AppStorage.setOrCreate(CommonConstants.AV_PLAYER_CURRENT_TIME, this.formatTime(updateTime)); AppStorage.setOrCreate(CommonConstants.AV_PLAYER_UPDATE_TIME, updateTime); AppStorage.setOrCreate(CommonConstants.AV_PLAYER_PROGRESS, updateTime / this.avPlayer!.duration * CommonConstants.PROGRESS_HUNDRED); - } + }; private onStateChange: (state: media.AVPlayerState) => void = async (state: media.AVPlayerState) => { if (this.avPlayer === undefined) { Logger.error(`AvPlayer is undefined`); @@ -55,11 +55,7 @@ export class AvPlayerUtil { Logger.info('AVPlayer prepare succeeded.'); }, (err: BusinessError) => { Logger.error(`Invoke prepare failed, code is ${err.code}, message is ${err.message}`); - if (this.avPlayer === undefined) { - Logger.error(`AvPlayer is undefined`); - return; - } - this.avPlayer.reset(); + this.avPlayer!.reset(); }); break; case CommonConstants.AV_PLAYER_PREPARED_STATE: @@ -94,7 +90,7 @@ export class AvPlayerUtil { Logger.info('AVPlayer state unknown called.'); break; } - } + }; static getInstance(): AvPlayerUtil | undefined { if (!AppStorage.get('avPlayerUtil')) { @@ -105,13 +101,8 @@ export class AvPlayerUtil { return AppStorage.get('avPlayerUtil'); } - setSurfaceId(surfaceId: string | undefined) { - this.surfaceId = surfaceId!; - this.avPlayer!.surfaceId = surfaceId; - } - async createAvPlayer(surfaceId: string): Promise { - if (this.avPlayer === undefined || this.avPlayer.state === CommonConstants.AV_PLAYER_RELEASE_STATE) { + if (!this.avPlayer || this.avPlayer.state === CommonConstants.AV_PLAYER_RELEASE_STATE) { this.avPlayer = await media.createAVPlayer(); this.surfaceId = surfaceId; Logger.info('Created AvPlayer successfully.'); @@ -147,7 +138,7 @@ export class AvPlayerUtil { } release(): void { - if (this.avPlayer !== undefined && this.avPlayer.state !== CommonConstants.AV_PLAYER_RELEASE_STATE) { + if (this.avPlayer && this.avPlayer.state !== CommonConstants.AV_PLAYER_RELEASE_STATE) { try { this.avPlayer.off('error'); this.avPlayer.off('stateChange'); diff --git a/features/videoPlayer/src/main/ets/constants/PlayerConstants.ets b/commons/base/src/main/ets/utils/VideoNavPathStack.ets similarity index 41% rename from features/videoPlayer/src/main/ets/constants/PlayerConstants.ets rename to commons/base/src/main/ets/utils/VideoNavPathStack.ets index 2ac2e1a..6ceb4d3 100644 --- a/features/videoPlayer/src/main/ets/constants/PlayerConstants.ets +++ b/commons/base/src/main/ets/utils/VideoNavPathStack.ets @@ -12,36 +12,16 @@ * See the License for the specific language governing permissions and * limitations under the License. */ +import { CommonConstants } from '../constants/CommonConstants'; -export class PlayerConstants { - /** - * Episodes. - */ - static readonly PLAYER_EPISODE: string[] = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', - '15', '16', '17', '18', '19', '20', '21', '22', '23', '24']; +export class VideoNavPathStack extends NavPathStack { + private pageName: string = CommonConstants.PAGE_NAMES[0]; - /** - * Video detail url. - */ - static readonly VIDEO_DETAIL_URL: string = '@bundle:com.huawei.videoapplication/videoDetail/ets/pages/Index'; + setPageName(name: string): void { + this.pageName = name; + } - /** - * Player text list. - */ - static readonly PLAYER_TEXT_LIST: ResourceStr[] = [$r('app.string.selections'), $r('app.string.just'), $r('app.string.super'), $r('app.string.speed')]; - - /** - * X component id. - */ - static readonly X_COMPONENT_ID: string = 'videoPlayer'; - - /** - * Screen width 600. - */ - static readonly SCREEN_WIDTH_600: number = 600; - - /** - * Episode list lanes list. - */ - static readonly EPISODE_LIST_LANES: number[] = [8, 4]; + getPageName(): string { + return this.pageName; + } } \ No newline at end of file diff --git a/commons/base/src/main/ets/utils/WindowUtil.ets b/commons/base/src/main/ets/utils/WindowUtil.ets index 7c88f82..775149c 100644 --- a/commons/base/src/main/ets/utils/WindowUtil.ets +++ b/commons/base/src/main/ets/utils/WindowUtil.ets @@ -14,7 +14,7 @@ */ import { deviceInfo } from '@kit.BasicServicesKit'; -import { window } from '@kit.ArkUI'; +import { display, window } from '@kit.ArkUI'; import { CommonConstants } from '../constants/CommonConstants'; import Logger from './Logger'; @@ -34,67 +34,32 @@ export class WindowUtil { setWindowStage(windowStage: window.WindowStage): void { this.windowStage = windowStage; - } - - setMainWindowPortrait(): void { - if (this.windowStage === undefined) { - Logger.error(`WindowStage is undefined`); - return; - } - // Obtain the main window of the application. this.windowStage.getMainWindow((err, windowClass: window.Window) => { this.mainWindowClass = windowClass; if (err.code) { Logger.error(`Failed to obtain the main window. Code:${err.code}, message:${err.message}`); return; } - if (deviceInfo.deviceType !== CommonConstants.DEVICE_TYPES[0] && deviceInfo.deviceType !== - CommonConstants.DEVICE_TYPES[1]) { - // Set portrait display. - this.mainWindowClass.setPreferredOrientation(window.Orientation.PORTRAIT); - } }); } setMainWindowOrientation(orientation: window.Orientation): void { - if (this.mainWindowClass === undefined) { - Logger.error(`MainWindowClass is undefined`); - return; - } // Setting orientation. - this.mainWindowClass.setPreferredOrientation(orientation); + this.mainWindowClass!.setPreferredOrientation(orientation); } disableWindowSystemBar(): void { - if (this.mainWindowClass === undefined) { - Logger.error(`MainWindowClass is undefined`); - return; - } // Set the status bar and navigation bar to be invisible in full-screen mode. - this.mainWindowClass.setWindowSystemBarEnable([]); + this.mainWindowClass!.setWindowSystemBarEnable([]); } enableWindowSystemBar(): void { - if (this.mainWindowClass === undefined) { - Logger.error(`MainWindowClass is undefined`); - return; - } - this.mainWindowClass.setWindowSystemBarEnable(['status', 'navigation']); + this.mainWindowClass!.setWindowSystemBarEnable(['status', 'navigation']); } setFullScreen(): void { - if (this.mainWindowClass === undefined) { - Logger.error(`MainWindowClass is undefined`); - return; - } // Set full-screen display. - this.mainWindowClass.setWindowLayoutFullScreen(true, (err) => { - if (err.code) { - Logger.error('Failed to set the window layout to full-screen mode. Cause:' + JSON.stringify(err)); - return; - } - Logger.info('Succeeded in setting the window layout to full-screen mode.'); - }); + this.mainWindowClass!.setWindowLayoutFullScreen(true); } getMainWindow(): window.Window | undefined { @@ -102,10 +67,50 @@ export class WindowUtil { } offWindowSizeChange(): void { - if (this.mainWindowClass === undefined) { - Logger.error(`MainWindowClass is undefined`); - return; + this.mainWindowClass!.off('windowSizeChange'); + } + + updateWidthBp(): void { + let mainWindow: window.WindowProperties = this.mainWindowClass!.getWindowProperties(); + let windowWidth: number = mainWindow.windowRect.width; + let windowWidthVp = windowWidth / display.getDefaultDisplaySync().densityPixels; + if (deviceInfo.deviceType === CommonConstants.DEVICE_TYPE) { + windowWidthVp -= 2 * CommonConstants.WINDOW_FLOATING_MARGIN; + } + let widthBp: string = ''; + let videoGridColumn: string = CommonConstants.VIDEO_GRID_COLUMNS[0]; + if (windowWidthVp < 320) { + widthBp = 'xs'; + videoGridColumn = CommonConstants.VIDEO_GRID_COLUMNS[0]; + } else if (windowWidthVp >= 320 && windowWidthVp < 600) { + widthBp = 'sm'; + videoGridColumn = CommonConstants.VIDEO_GRID_COLUMNS[0]; + } else if (windowWidthVp >= 600 && windowWidthVp < 840) { + widthBp = 'md'; + videoGridColumn = CommonConstants.VIDEO_GRID_COLUMNS[1]; + } else { + widthBp = 'lg'; + videoGridColumn = CommonConstants.VIDEO_GRID_COLUMNS[2]; + } + AppStorage.setOrCreate('currentWidthBreakpoint', widthBp); + AppStorage.setOrCreate('videoGridColumn', videoGridColumn); + } + + updateHeightBp(): void { + let mainWindow: window.WindowProperties = this.mainWindowClass!.getWindowProperties(); + let windowHeight: number = mainWindow.windowRect.height; + let windowWidth: number = mainWindow.windowRect.width; + let windowWidthVp = windowWidth / display.getDefaultDisplaySync().densityPixels; + let windowHeightVp = windowHeight / display.getDefaultDisplaySync().densityPixels; + let heightBp: string = ''; + let aspectRatio: number = windowHeightVp / windowWidthVp; + if (aspectRatio < 0.8) { + heightBp = 'sm'; + } else if (aspectRatio >= 0.8 && aspectRatio < 1.2) { + heightBp = 'md'; + } else { + heightBp = 'lg'; } - this.mainWindowClass?.off('windowSizeChange'); + AppStorage.setOrCreate('currentHeightBreakpoint', heightBp); } } \ No newline at end of file diff --git a/features/home/src/main/ets/view/CommonView.ets b/features/home/src/main/ets/view/CommonView.ets index 1d4de5f..4b840f3 100644 --- a/features/home/src/main/ets/view/CommonView.ets +++ b/features/home/src/main/ets/view/CommonView.ets @@ -121,7 +121,7 @@ export struct VideoImgComponent { } build() { - Image(this.imgSrc !== undefined ? this.imgSrc : '') + Image(this.imgSrc ? this.imgSrc : '') .focusable(true) .objectFit(ImageFit.Fill) .width(CommonConstants.FULL_PERCENT) diff --git a/features/home/src/main/ets/view/DailyVideo.ets b/features/home/src/main/ets/view/DailyVideo.ets index 74ecb3a..72d5512 100644 --- a/features/home/src/main/ets/view/DailyVideo.ets +++ b/features/home/src/main/ets/view/DailyVideo.ets @@ -18,6 +18,7 @@ import { BreakpointType } from '@ohos/commons'; import { HomeConstants } from '../constants/HomeConstants'; import { VideoImage, VideoImgViewModel } from '../viewmodel/VideoImgViewModel'; import { getTabIndex, SubtitleComponent, VideoImgComponent, VideoImgPlay, VideoImgRating } from './CommonView'; +import { display } from '@kit.ArkUI'; @Component export struct DailyVideo { @@ -59,7 +60,11 @@ export struct DailyVideo { md: BreakpointConstants.GRID_ROW_COLUMNS[0], lg: BreakpointConstants.GRID_ROW_COLUMNS[0] }, - gutter: $r('app.float.grid_row_gutter') + gutter: $r('app.float.grid_row_gutter'), + breakpoints: { + value: ['320vp', '600vp', '840vp'], + reference: BreakpointsReference.WindowSize + } }) { // Main video section. GridCol({ @@ -71,7 +76,7 @@ export struct DailyVideo { }) { Column() { Stack({ alignContent: Alignment.Bottom }) { - Image(this.mainDailyVideoImg.getImgSrc() !== undefined ? this.mainDailyVideoImg.getImgSrc() : '') + Image(this.mainDailyVideoImg.getImgSrc() ? this.mainDailyVideoImg.getImgSrc() : '') .focusable(true) .objectFit(ImageFit.Fill) .width(CommonConstants.FULL_PERCENT) diff --git a/features/home/src/main/ets/view/Home.ets b/features/home/src/main/ets/view/Home.ets index e29c1e8..430cf3c 100644 --- a/features/home/src/main/ets/view/Home.ets +++ b/features/home/src/main/ets/view/Home.ets @@ -47,7 +47,7 @@ export struct Home { .opacity(index === this.currentBottomIndex ? CommonConstants.TEXT_OPACITY[3] : CommonConstants.TEXT_OPACITY[0]) } .padding({ bottom: this.currentWidthBreakpoint !== BreakpointConstants.BREAKPOINT_LG && deviceInfo.deviceType !== - CommonConstants.DEVICE_TYPES[0] ? $r('app.float.bottom_navigation') : 0 }) + CommonConstants.DEVICE_TYPE ? $r('app.float.bottom_navigation') : 0 }) .height(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? $r('app.float.tab_height_lg') : CommonConstants.FULL_PERCENT) .width(CommonConstants.FULL_PERCENT) @@ -129,7 +129,7 @@ export struct Home { .barWidth(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? $r('app.float.bottom_tab_bar_width_lg') : CommonConstants.FULL_PERCENT) .barHeight(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? CommonConstants.FULL_PERCENT : - (deviceInfo.deviceType === CommonConstants.DEVICE_TYPES[0] ? $r('app.float.tab_size_lg') : + (deviceInfo.deviceType === CommonConstants.DEVICE_TYPE ? $r('app.float.tab_size_lg') : $r('app.float.tab_size'))) .barMode(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? BarMode.Scrollable : BarMode.Fixed, { nonScrollableLayoutStyle: LayoutStyle.ALWAYS_CENTER }) diff --git a/features/home/src/main/ets/view/HomeContent.ets b/features/home/src/main/ets/view/HomeContent.ets index aacd955..4788d1e 100644 --- a/features/home/src/main/ets/view/HomeContent.ets +++ b/features/home/src/main/ets/view/HomeContent.ets @@ -13,10 +13,10 @@ * limitations under the License. */ -import { window } from '@kit.ArkUI'; + import { deviceInfo } from '@kit.BasicServicesKit'; import { BreakpointConstants, BreakpointType, CommonConstants } from '@ohos/commons'; -import { Logger, WindowUtil } from '@ohos/commons'; +import { WindowUtil } from '@ohos/commons'; import { BannerView } from './BannerView'; import { IconView } from './IconView'; import { RecommendedVideo} from './RecommendedVideo'; @@ -28,46 +28,14 @@ import { PreviousVideo } from './PreviousVideo'; export struct HomeContent { @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string = BreakpointConstants.BREAKPOINT_LG; @StorageLink('currentTopIndex') currentTopIndex: number = 0; - @StorageLink('windowWidth') windowWidth: number = 0; @State gridStatus: number = 1; private windowUtil?: WindowUtil; - private mainWindow?: window.Window; private isSearching: boolean = false; - private onWindowSizeChange: (data: window.Size) => void = (data: window.Size) => { - this.windowWidth = data.width; - } aboutToAppear(): void { this.windowUtil = WindowUtil.getInstance(); - if (this.windowUtil === undefined) { - Logger.error(`WindwoUtil is undefined`); - return; - } - if (deviceInfo.deviceType !== CommonConstants.DEVICE_TYPES[0]) { - this.windowUtil.setFullScreen(); - } - this.mainWindow = this.windowUtil.getMainWindow(); - if (this.mainWindow === undefined) { - Logger.error(`MainWindow is undefined`); - return; - } - this.windowWidth = this.mainWindow.getWindowProperties().windowRect.width; - this.mainWindow.on('windowSizeChange', this.onWindowSizeChange); - } - - aboutToDisappear(): void { - this.windowUtil = WindowUtil.getInstance(); - if (this.windowUtil === undefined) { - return; - } - this.mainWindow = this.windowUtil.getMainWindow(); - if (this.mainWindow === undefined) { - return; - } - try { - this.mainWindow.off('windowSizeChange'); - } catch (exception) { - Logger.error('Failed to unregister the window callback. Code: ' + JSON.stringify(exception)); + if (deviceInfo.deviceType !== CommonConstants.DEVICE_TYPE) { + this.windowUtil!.setFullScreen(); } } @@ -101,6 +69,7 @@ export struct HomeContent { .backgroundColor(this.currentTopIndex === 2 && !this.isSearching ? (this.currentWidthBreakpoint !== BreakpointConstants.BREAKPOINT_MD ? $r('app.color.home_content_background') : $r('app.color.home_content_background_md')) : Color.White) .width(CommonConstants.FULL_PERCENT) - .padding({ bottom: deviceInfo.deviceType === CommonConstants.DEVICE_TYPES[1] ? $r('app.float.bottom_navigation') : 0 }) + .padding({ bottom: deviceInfo.deviceType !== CommonConstants.DEVICE_TYPE && this.currentWidthBreakpoint === + BreakpointConstants.BREAKPOINT_LG ? $r('app.float.bottom_navigation') : 0 }) } } \ No newline at end of file diff --git a/features/home/src/main/ets/view/HomeHeader.ets b/features/home/src/main/ets/view/HomeHeader.ets index fe6170e..b90f40f 100644 --- a/features/home/src/main/ets/view/HomeHeader.ets +++ b/features/home/src/main/ets/view/HomeHeader.ets @@ -75,9 +75,9 @@ export struct HomeHeader { }) { this.TopTabBar() } - .padding({ top: deviceInfo.deviceType === CommonConstants.DEVICE_TYPES[0] ? 0 : + .padding({ top: deviceInfo.deviceType === CommonConstants.DEVICE_TYPE ? 0 : $r('app.float.search_top_padding_top') }) - .height(deviceInfo.deviceType === CommonConstants.DEVICE_TYPES[0] ? $r('app.float.search_top_height') : + .height(deviceInfo.deviceType === CommonConstants.DEVICE_TYPE ? $r('app.float.search_top_height') : $r('app.float.search_top_height_more')) GridCol({ @@ -90,9 +90,9 @@ export struct HomeHeader { this.searchBar() } .padding({ top: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM || deviceInfo.deviceType === - CommonConstants.DEVICE_TYPES[0] ? 0 : $r('app.float.search_top_padding_top') }) + CommonConstants.DEVICE_TYPE ? 0 : $r('app.float.search_top_padding_top') }) .height(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM || deviceInfo.deviceType === - CommonConstants.DEVICE_TYPES[0] ? $r('app.float.search_top_height') : $r('app.float.search_top_height_more')) + CommonConstants.DEVICE_TYPE ? $r('app.float.search_top_height') : $r('app.float.search_top_height_more')) } // The background color of the top tab bar is changed during the slide-down process. .backgroundColor(this.scrollHeight >= new BreakpointType(HomeConstants.BACKGROUND_CHANGE_HEIGHT[0], diff --git a/features/home/src/main/ets/view/PreviousVideo.ets b/features/home/src/main/ets/view/PreviousVideo.ets index 110cb7b..e7ad7c7 100644 --- a/features/home/src/main/ets/view/PreviousVideo.ets +++ b/features/home/src/main/ets/view/PreviousVideo.ets @@ -13,7 +13,7 @@ * limitations under the License. */ -import { BreakpointConstants, CommonConstants } from '@ohos/commons'; +import { BreakpointConstants, CommonConstants, VideoNavPathStack } from '@ohos/commons'; import { BreakpointType } from '@ohos/commons'; import { HomeConstants } from '../constants/HomeConstants'; import { VideoImage, VideoImgViewModel } from '../viewmodel/VideoImgViewModel'; @@ -25,7 +25,7 @@ export struct PreviousVideo { @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string = BreakpointConstants.BREAKPOINT_LG; @StorageLink('currentTopIndex') currentTopIndex: number = 0; @State previousVideoImgListTwo: VideoImage[] = new VideoImgViewModel().getPreviousVideoTwo(this.currentWidthBreakpoint); - @Consume('pageInfo') pageInfo: NavPathStack; + @Consume('pageInfo') pageInfo: VideoNavPathStack; private previousVideoImgListOne: VideoImage[] = new VideoImgViewModel().getPreviousVideoOne(); @Styles focusedStyles(): void { @@ -116,7 +116,8 @@ export struct PreviousVideo { .layoutWeight(1) .groupDefaultFocus(index === 0 ? true : false) .onClick(() => { - this.pageInfo.pushPath({ name: 'VideoDetail' }); + this.pageInfo.setPageName(CommonConstants.PAGE_NAMES[1]); + this.pageInfo.pushPath({ name: CommonConstants.PAGE_NAMES[1] }); }) Blank() diff --git a/features/home/src/main/ets/view/RecommendedVideo.ets b/features/home/src/main/ets/view/RecommendedVideo.ets index 02a15ec..4a21ce3 100644 --- a/features/home/src/main/ets/view/RecommendedVideo.ets +++ b/features/home/src/main/ets/view/RecommendedVideo.ets @@ -13,6 +13,7 @@ * limitations under the License. */ +import { componentUtils } from '@kit.ArkUI'; import { deviceInfo } from '@kit.BasicServicesKit'; import { BreakpointConstants, CommonConstants } from '@ohos/commons'; import { BreakpointType, Logger, WindowUtil } from '@ohos/commons'; @@ -20,7 +21,6 @@ import { HomeConstants } from '../constants/HomeConstants'; import { VideoImage, VideoImgViewModel } from '../viewmodel/VideoImgViewModel'; import { getTabIndex, VideoContent, VideoImgRating, VideoTitle } from './CommonView'; import { RightClickMenu, VideoDialog } from './VideoDialog'; -import { componentUtils } from '@kit.ArkUI'; @Component export struct RecommendedVideo { @@ -124,18 +124,10 @@ export struct RecommendedVideo { } this.windowUtil = WindowUtil.getInstance(); let isLayoutFullScreen: boolean = true; - if (this.windowUtil === undefined) { - Logger.error(`WindowUtil is undefined`); - return; - } - let mainWindow = this.windowUtil.getMainWindow(); - if (mainWindow === undefined) { - Logger.error(`MainWindow is undefined`); - return; - } - isLayoutFullScreen = mainWindow.getWindowProperties().isLayoutFullScreen; + let mainWindow = this.windowUtil!.getMainWindow(); + isLayoutFullScreen = mainWindow!.getWindowProperties().isLayoutFullScreen; // Subtract the width and height of the window in the 2in1 device. - if (deviceInfo.deviceType === CommonConstants.DEVICE_TYPES[0] && !isLayoutFullScreen) { + if (deviceInfo.deviceType === CommonConstants.DEVICE_TYPE && !isLayoutFullScreen) { dialogYOffset -= HomeConstants.WINDOW_UNDEFINED_TOP; rectLeft -= HomeConstants.WINDOW_UNDEFINED_LEFT; } else { @@ -241,9 +233,4 @@ export struct RecommendedVideo { return result / HomeConstants.VIDEO_DIALOG_ASPECT_RATIO * HomeConstants.TWO + HomeConstants.VIDEO_GRID_DESCRIPTION_HEIGHT + HomeConstants.HEIGHT_UNIT; } -} - - -function getRectangleById(arg0: string): string { - throw new Error('Function not implemented.'); -} +} \ No newline at end of file diff --git a/features/home/src/main/ets/view/VideoDialog.ets b/features/home/src/main/ets/view/VideoDialog.ets index a0a34e8..2f93b9d 100644 --- a/features/home/src/main/ets/view/VideoDialog.ets +++ b/features/home/src/main/ets/view/VideoDialog.ets @@ -17,7 +17,7 @@ import { resourceManager } from '@kit.LocalizationKit'; import { common } from '@kit.AbilityKit'; import { media } from '@kit.MediaKit'; import { BusinessError } from '@kit.BasicServicesKit'; -import { AvPlayerUtil, BreakpointConstants, CommonConstants } from '@ohos/commons'; +import { BreakpointConstants, CommonConstants } from '@ohos/commons'; import { BreakpointType, Logger } from '@ohos/commons'; import { HomeConstants } from '../constants/HomeConstants'; @@ -56,7 +56,6 @@ export struct VideoDialog { @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string = BreakpointConstants.BREAKPOINT_LG; private xComponentController: XComponentController = new XComponentController(); private surfaceId: string = ''; - private avPlayerUtil: AvPlayerUtil = new AvPlayerUtil(); private avPlayer?: media.AVPlayer; private context: common.UIAbilityContext = getContext(this) as common.UIAbilityContext; private url?: resourceManager.RawFileDescriptor; @@ -64,11 +63,7 @@ export struct VideoDialog { private controller?: CustomDialogController; private onError: (err: BusinessError) => void = (err: BusinessError) => { Logger.error(`Invoke avPlayer failed, code is ${err.code}, message is ${err.message}`); - if (this.avPlayer === undefined) { - Logger.error(`AvPlayer is undefined`); - return; - } - this.avPlayer.reset(); + this.avPlayer!.reset(); } private onStateChange: (state: media.AVPlayerState) => void = async (state: media.AVPlayerState) => { if (this.avPlayer === undefined) { @@ -77,8 +72,7 @@ export struct VideoDialog { } switch (state) { case CommonConstants.AV_PLAYER_IDLE_STATE: - this.url = await this.context.createModuleContext(CommonConstants.VIDEO_DETAIL_HSP_NAME).resourceManager - .getRawFd(CommonConstants.PRODUCT_VIDEO_NAME); + this.url = await this.context.resourceManager.getRawFd(CommonConstants.PRODUCT_VIDEO_NAME); this.avPlayer.fdSrc = this.url; Logger.info('AVPlayer state idle called.'); break; @@ -90,11 +84,7 @@ export struct VideoDialog { Logger.info('AVPlayer prepare succeeded.'); }, (err: BusinessError) => { Logger.error(`Invoke prepare failed, code is ${err.code}, message is ${err.message}`); - if (this.avPlayer === undefined) { - Logger.error(`AvPlayer is undefined`); - return; - } - this.avPlayer.reset(); + this.avPlayer!.reset(); }); break; case CommonConstants.AV_PLAYER_PREPARED_STATE: @@ -139,17 +129,13 @@ export struct VideoDialog { } aboutToDisappear() { - if (this.avPlayer === undefined) { - Logger.error(`AvPlayer is undefined`); - return; - } try { - this.avPlayer.off('error'); - this.avPlayer.off('stateChange'); + this.avPlayer!.off('error'); + this.avPlayer!.off('stateChange'); } catch (exception) { Logger.error('Failed to unregister callback. Code: ' + JSON.stringify(exception)); } - this.avPlayer.release(); + this.avPlayer!.release(); } build() { @@ -176,18 +162,14 @@ export struct VideoDialog { $r('app.float.dialog_col_width_lg')).getValue(this.currentWidthBreakpoint)) .aspectRatio(HomeConstants.VIDEO_DIALOG_ASPECT_RATIO) .onClick(() => { - if (this.avPlayer === undefined) { - Logger.error(`AvPlayer is undefined`); - return; - } - if (this.avPlayer.state === CommonConstants.AV_PLAYER_STOPPED_STATE) { - this.avPlayer.prepare(); + if (this.avPlayer!.state === CommonConstants.AV_PLAYER_STOPPED_STATE) { + this.avPlayer!.prepare(); return; } if (!this.playState) { - this.avPlayer.play(); + this.avPlayer!.play(); } else { - this.avPlayer.pause(); + this.avPlayer!.pause(); } }) @@ -210,13 +192,8 @@ export struct VideoDialog { // Registering the avplayer callback function. setAVPlayerCallback(): void { - if (this.avPlayer === undefined) { - Logger.error(`AvPlayer is undefined`); - return; - } - this.avPlayer.on('error', this.onError); - + this.avPlayer!.on('error', this.onError); // Callback function for state machine changes. - this.avPlayer.on('stateChange', this.onStateChange); + this.avPlayer!.on('stateChange', this.onStateChange); } } \ No newline at end of file diff --git a/features/home/src/main/resources/base/element/float.json b/features/home/src/main/resources/base/element/float.json index d494032..30e7b95 100644 --- a/features/home/src/main/resources/base/element/float.json +++ b/features/home/src/main/resources/base/element/float.json @@ -646,7 +646,7 @@ }, { "name": "bottom_navigation", - "value": "28vp" + "value": "24vp" }, { "name": "tab_size_lg", diff --git a/features/search/src/main/ets/view/SearchHeader.ets b/features/search/src/main/ets/view/SearchHeader.ets index c4c5c20..2816c88 100644 --- a/features/search/src/main/ets/view/SearchHeader.ets +++ b/features/search/src/main/ets/view/SearchHeader.ets @@ -62,9 +62,9 @@ export struct SearchHeader { .alignSelf(ItemAlign.Center) .layoutWeight(1) } - .padding({ top: deviceInfo.deviceType === CommonConstants.DEVICE_TYPES[0] ? 0 : + .padding({ top: deviceInfo.deviceType === CommonConstants.DEVICE_TYPE ? 0 : $r('app.float.search_header_row_padding') }) - .height(deviceInfo.deviceType === CommonConstants.DEVICE_TYPES[0] ? $r('app.float.search_header_row_height') : + .height(deviceInfo.deviceType === CommonConstants.DEVICE_TYPE ? $r('app.float.search_header_row_height') : $r('app.float.search_header_row_height_more')) .width(CommonConstants.FULL_PERCENT) } diff --git a/features/search/src/main/ets/view/SearchResult.ets b/features/search/src/main/ets/view/SearchResult.ets index 6de709b..89dd500 100644 --- a/features/search/src/main/ets/view/SearchResult.ets +++ b/features/search/src/main/ets/view/SearchResult.ets @@ -13,7 +13,7 @@ * limitations under the License. */ -import { BreakpointConstants, CommonConstants } from '@ohos/commons'; +import { BreakpointConstants, CommonConstants, VideoNavPathStack } from '@ohos/commons'; import { BreakpointType } from '@ohos/commons'; import { SearchConstants } from '../constants/SearchConstants'; import { SearchVideoImg, SearchVideoImgModel } from '../viewmodel/SearchVideoImgViewModel'; @@ -22,7 +22,7 @@ import { SearchVideoImg, SearchVideoImgModel } from '../viewmodel/SearchVideoImg export struct SearchResult { @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string = BreakpointConstants.BREAKPOINT_LG; @State resultTabIndex: number = 0; - @Consume('pageInfo') pageInfo: NavPathStack; + @Consume('pageInfo') pageInfo: VideoNavPathStack; build() { Scroll() { @@ -163,7 +163,8 @@ export struct SearchResult { .fontColor(Color.White) .layoutWeight(1) .onClick(() => { - this.pageInfo.pushPath({ name: 'VideoDetail' }); + this.pageInfo.setPageName(CommonConstants.PAGE_NAMES[1]); + this.pageInfo.pushPath({ name: CommonConstants.PAGE_NAMES[1] }); }) Blank() diff --git a/features/videoDetail/src/main/ets/constants/DetailConstants.ets b/features/videoDetail/src/main/ets/constants/DetailConstants.ets index 63ea824..531116d 100644 --- a/features/videoDetail/src/main/ets/constants/DetailConstants.ets +++ b/features/videoDetail/src/main/ets/constants/DetailConstants.ets @@ -122,7 +122,9 @@ export class DetailConstants { */ static readonly USER_INFO_COMMENTS: ResourceStr[] = [ $r('app.string.feel'), - $r('app.string.love')]; + $r('app.string.love'), + $r('app.string.design') + ]; /** * User info date. */ @@ -147,10 +149,6 @@ export class DetailConstants { * Related list height. */ static readonly RELATED_LIST_HEIGHT: number = 169; - /** - * Video detail. - */ - static readonly VIDEO_DETAIL: string = 'videoDetail'; /** * Full-screen page url. */ @@ -159,4 +157,18 @@ export class DetailConstants { * Comments area percent. */ static readonly COMMENTS_AREA_PERCENT: number = 0.4; + /** + * Player text list. + */ + static readonly PLAYER_TEXT_LIST: ResourceStr[] = [$r('app.string.selections'), $r('app.string.just'), + $r('app.string.super'), $r('app.string.speed')]; + /** + * Episode list lanes list. + */ + static readonly EPISODE_LIST_LANES: number[] = [8, 4]; + /** + * Episodes. + */ + static readonly PLAYER_EPISODE: string[] = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', + '15', '16', '17', '18', '19', '20', '21', '22', '23', '24']; } \ No newline at end of file diff --git a/features/videoDetail/src/main/ets/view/AllComments.ets b/features/videoDetail/src/main/ets/view/AllComments.ets index 8bebf82..762078e 100644 --- a/features/videoDetail/src/main/ets/view/AllComments.ets +++ b/features/videoDetail/src/main/ets/view/AllComments.ets @@ -77,7 +77,7 @@ export struct AllComments { .margin({ top: $r('app.float.all_comments_img_row_margin') }) .width(CommonConstants.FULL_PERCENT) .justifyContent(FlexAlign.Start) - .visibility(item.getCommentImageSrc() === undefined ? Visibility.None : Visibility.Visible) + .visibility(!item.getCommentImageSrc() ? Visibility.None : Visibility.Visible) Row() { Text(item.getTime()) diff --git a/features/videoPlayer/src/main/ets/view/FooterEpisodes.ets b/features/videoDetail/src/main/ets/view/FooterEpisodes.ets similarity index 79% rename from features/videoPlayer/src/main/ets/view/FooterEpisodes.ets rename to features/videoDetail/src/main/ets/view/FooterEpisodes.ets index 298e523..c30be49 100644 --- a/features/videoPlayer/src/main/ets/view/FooterEpisodes.ets +++ b/features/videoDetail/src/main/ets/view/FooterEpisodes.ets @@ -13,14 +13,16 @@ * limitations under the License. */ -import { BreakpointConstants, CommonConstants } from '@ohos/commons'; import { display } from '@kit.ArkUI'; import { deviceInfo } from '@kit.BasicServicesKit'; -import { PlayerConstants } from '../constants/PlayerConstants'; +import { BreakpointConstants, CommonConstants } from '@ohos/commons'; +import { DetailConstants } from '../constants/DetailConstants'; @Component export struct FooterEpisodes { @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string = BreakpointConstants.BREAKPOINT_LG; + @StorageLink('currentHeightBreakpoint') currentHeightBreakpoint: string = BreakpointConstants.BREAKPOINT_LG; + @StorageLink('isFullScreen') isFullScreen: boolean = false; @Link isShowingSideBar: boolean; @Link foldStatus: display.FoldStatus; @@ -28,14 +30,14 @@ export struct FooterEpisodes { Column() { // Selection bottom bar. Row() { - Text(PlayerConstants.PLAYER_TEXT_LIST[0]) + Text(DetailConstants.PLAYER_TEXT_LIST[0]) .fontSize($r('app.float.title_selected_font')) .fontColor(Color.White) .fontWeight(CommonConstants.FONT_WEIGHT_500) .lineHeight($r('app.float.title_selected_line')) .width($r('app.float.title_selected_width')) .margin({ right: $r('app.float.title_selected_margin') }) - Text(PlayerConstants.PLAYER_TEXT_LIST[1]) + Text(DetailConstants.PLAYER_TEXT_LIST[1]) .fontSize($r('app.float.title_font')) .fontColor(Color.White) .fontWeight(FontWeight.Normal) @@ -51,7 +53,7 @@ export struct FooterEpisodes { .height($r('app.float.title_row_height')) List({ space: CommonConstants.LIST_SPACE }) { - ForEach(PlayerConstants.PLAYER_EPISODE, (item: string, index: number) => { + ForEach(DetailConstants.PLAYER_EPISODE, (item: string, index: number) => { ListItem() { Row() { Text(item) @@ -81,8 +83,8 @@ export struct FooterEpisodes { .width(CommonConstants.FULL_PERCENT) .layoutWeight(1) .padding({ bottom: $r('app.float.episode_list_bottom') }) - .lanes(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_MD ? PlayerConstants.EPISODE_LIST_LANES[0] : - PlayerConstants.EPISODE_LIST_LANES[1], $r('app.float.episode_list_lanes_space')) + .lanes(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_MD ? DetailConstants.EPISODE_LIST_LANES[0] : + DetailConstants.EPISODE_LIST_LANES[1], $r('app.float.episode_list_lanes_space')) } .layoutWeight(1) .width(CommonConstants.FULL_PERCENT) @@ -95,15 +97,16 @@ export struct FooterEpisodes { } isShowingFooter(): Visibility { - if (this.isShowingSideBar) { - if (deviceInfo.deviceType === CommonConstants.DEVICE_TYPES[2]) { - return (display.isFoldable() && this.foldStatus !== display.FoldStatus.FOLD_STATUS_FOLDED) ? - Visibility.Visible : Visibility.None; - } else if (deviceInfo.deviceType === CommonConstants.DEVICE_TYPES[0]) { - return this.currentWidthBreakpoint !== BreakpointConstants.BREAKPOINT_LG ? Visibility.Visible : Visibility.None; - } + if (!this.isShowingSideBar || !this.isFullScreen) { return Visibility.None; } + if (deviceInfo.deviceType === CommonConstants.DEVICE_TYPE) { + return this.currentWidthBreakpoint !== BreakpointConstants.BREAKPOINT_LG ? Visibility.Visible : Visibility.None; + } + if (this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_MD && this.currentHeightBreakpoint !== + BreakpointConstants.BREAKPOINT_SM) { + return Visibility.Visible; + } return Visibility.None; } } \ No newline at end of file diff --git a/features/videoDetail/src/main/ets/view/RelatedList.ets b/features/videoDetail/src/main/ets/view/RelatedList.ets index c26dd88..db96143 100644 --- a/features/videoDetail/src/main/ets/view/RelatedList.ets +++ b/features/videoDetail/src/main/ets/view/RelatedList.ets @@ -22,6 +22,7 @@ import { AllComments } from './AllComments'; @Component export struct RelatedList { @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string = BreakpointConstants.BREAKPOINT_LG; + @StorageLink('isFullScreen') isFullScreen: boolean = false; @State commentImgHeight: string = DetailConstants.INITIAL_COMMENT_IMAGE_HEIGHT; @State commentImgWidth: string = DetailConstants.INITIAL_COMMENT_IMAGE_WIDTH; @Link relatedVideoHeight: number; @@ -39,15 +40,17 @@ export struct RelatedList { Column() { this.RelatedVideoComponent() this.VideoIntroduction() - AllComments({commentImgHeight: $commentImgHeight, commentImgWidth: $commentImgWidth}) + AllComments({commentImgHeight: this.commentImgHeight, commentImgWidth: this.commentImgWidth}) .visibility(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? Visibility.None : Visibility.Visible) } .width(CommonConstants.FULL_PERCENT) .alignItems(HorizontalAlign.Start) + .padding({ bottom: $r('app.float.video_col_padding') }) } .layoutWeight(1) .scrollBar(BarState.Off) + .visibility(!this.isFullScreen ? Visibility.Visible : Visibility.None) .onScrollFrameBegin((offset: number) => { if (this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG) { if ((offset > 0) && (this.videoHeight > DetailConstants.MIN_VIDEO_PERCENT)) { diff --git a/features/videoDetail/src/main/ets/view/SelfComment.ets b/features/videoDetail/src/main/ets/view/SelfComment.ets index d32cce6..68823b1 100644 --- a/features/videoDetail/src/main/ets/view/SelfComment.ets +++ b/features/videoDetail/src/main/ets/view/SelfComment.ets @@ -78,14 +78,14 @@ export struct SelfComment { color: $r('app.color.shadow_color'), offsetY: DetailConstants.SHADOW_OFFSET_Y }) - .height(deviceInfo.deviceType === CommonConstants.DEVICE_TYPES[0] ? $r('app.float.self_comment_row_height') : + .height(deviceInfo.deviceType === CommonConstants.DEVICE_TYPE ? $r('app.float.self_comment_row_height') : $r('app.float.self_comment_row_height_more')) .width(CommonConstants.FULL_PERCENT) .alignItems(VerticalAlign.Center) .backgroundColor(Color.White) .padding({ right: $r('app.float.self_comment_row_padding_right'), - bottom: deviceInfo.deviceType === CommonConstants.DEVICE_TYPES[0] ? 0 : + bottom: deviceInfo.deviceType === CommonConstants.DEVICE_TYPE ? 0 : $r('app.float.self_comment_row_padding_bottom') }) } diff --git a/features/videoPlayer/src/main/ets/view/SideEpisodes.ets b/features/videoDetail/src/main/ets/view/SideEpisodes.ets similarity index 83% rename from features/videoPlayer/src/main/ets/view/SideEpisodes.ets rename to features/videoDetail/src/main/ets/view/SideEpisodes.ets index ed69bed..7548065 100644 --- a/features/videoPlayer/src/main/ets/view/SideEpisodes.ets +++ b/features/videoDetail/src/main/ets/view/SideEpisodes.ets @@ -14,13 +14,14 @@ */ import { display } from '@kit.ArkUI'; -import { deviceInfo } from '@kit.BasicServicesKit'; import { BreakpointConstants, CommonConstants } from '@ohos/commons'; -import { PlayerConstants } from '../constants/PlayerConstants'; +import { DetailConstants } from '../constants/DetailConstants'; @Component export struct SideEpisodes { @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string = BreakpointConstants.BREAKPOINT_LG; + @StorageLink('currentHeightBreakpoint') currentHeightBreakpoint: string = BreakpointConstants.BREAKPOINT_LG; + @StorageLink('isFullScreen') isFullScreen: boolean = false; @Link isShowingSideBar: boolean; @Link foldStatus: display.FoldStatus; @@ -29,10 +30,10 @@ export struct SideEpisodes { // Episodes sidebar. Row() { Blank() - SideTitleText({ content: PlayerConstants.PLAYER_TEXT_LIST[0] }) + SideTitleText({ content: DetailConstants.PLAYER_TEXT_LIST[0] }) .width($r('app.float.side_title_width_1')) .margin({ right: $r('app.float.side_title_margin') }) - SideTitleText({ content: PlayerConstants.PLAYER_TEXT_LIST[1] }) + SideTitleText({ content: DetailConstants.PLAYER_TEXT_LIST[1] }) .width($r('app.float.side_title_width_2')) .opacity(CommonConstants.TEXT_OPACITY[2]) Blank() @@ -42,7 +43,7 @@ export struct SideEpisodes { $r('app.float.side_row_margin_sm') : $r('app.float.side_row_margin') }) List({ space: CommonConstants.LIST_SPACE }) { - ForEach(PlayerConstants.PLAYER_EPISODE, (item: string, index: number) => { + ForEach(DetailConstants.PLAYER_EPISODE, (item: string, index: number) => { ListItem() { Row() { Text(item) @@ -75,7 +76,7 @@ export struct SideEpisodes { .width(CommonConstants.FULL_PERCENT) .edgeEffect(EdgeEffect.None) .scrollBar(BarState.Off) - .lanes(PlayerConstants.EPISODE_LIST_LANES[1], $r('app.float.lanes_item_space')) + .lanes(DetailConstants.EPISODE_LIST_LANES[1], $r('app.float.lanes_item_space')) .padding({ left: $r('app.float.episodes_sidebar_padding_left_right'), right: $r('app.float.episodes_sidebar_padding_left_right'), @@ -87,10 +88,9 @@ export struct SideEpisodes { .layoutWeight(this.currentWidthBreakpoint !== BreakpointConstants.BREAKPOINT_LG ? 2 : 0) .height(CommonConstants.FULL_PERCENT) .width(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? $r('app.float.side_col_width') : 0) - .visibility((this.isShowingSideBar && (this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG || - this.foldStatus === display.FoldStatus.FOLD_STATUS_FOLDED || - (deviceInfo.deviceType === CommonConstants.DEVICE_TYPES[2] && !display.getFoldStatus()))) ? - Visibility.Visible : Visibility.None) + .visibility((this.isShowingSideBar && this.isFullScreen && (this.currentWidthBreakpoint === + BreakpointConstants.BREAKPOINT_LG || (this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_MD && + this.currentHeightBreakpoint === BreakpointConstants.BREAKPOINT_SM))) ? Visibility.Visible : Visibility.None) } } diff --git a/features/videoDetail/src/main/ets/view/VideoDetail.ets b/features/videoDetail/src/main/ets/view/VideoDetail.ets index d6e9e0e..2e79fd1 100644 --- a/features/videoDetail/src/main/ets/view/VideoDetail.ets +++ b/features/videoDetail/src/main/ets/view/VideoDetail.ets @@ -13,9 +13,9 @@ * limitations under the License. */ -import { Callback } from '@kit.BasicServicesKit'; import { display, window } from '@kit.ArkUI'; -import { AvPlayerUtil, DeviceScreen, Logger, WindowUtil, BreakpointConstants, CommonConstants, DisplayUtil } from '@ohos/commons'; +import { AvPlayerUtil, DeviceScreen, Logger, WindowUtil, BreakpointConstants, CommonConstants, DisplayUtil, + VideoNavPathStack } from '@ohos/commons'; import { SelfComment } from './SelfComment'; import { AllComments } from './AllComments'; import { VideoDetailView } from './VideoDetailView'; @@ -24,65 +24,93 @@ import { DetailConstants } from '../constants/DetailConstants'; @Component export struct VideoDetail { @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string = BreakpointConstants.BREAKPOINT_LG; + @StorageLink('currentHeightBreakpoint') currentHeightBreakpoint: string = BreakpointConstants.BREAKPOINT_LG; @StorageLink('windowWidth') windowWidth: number = 0; - @StorageLink('isHalfFolded') isHalfFolded: boolean = false; + @StorageLink('isHalfFolded') @Watch('onHalfFoldedChange') isHalfFolded: boolean = false; @StorageLink('avplayerState') avplayerState: string = ''; - @Consume('pageInfo') pageInfo: NavPathStack; + @StorageLink('isFullScreen') @Watch('onFullScreenChange') isFullScreen: boolean = false; + @Consume('pageInfo') pageInfo: VideoNavPathStack; @State commentImgHeight: string = DetailConstants.INITIAL_COMMENT_IMAGE_HEIGHT; @State commentImgWidth: string = DetailConstants.INITIAL_COMMENT_IMAGE_WIDTH; @State relatedVideoHeight: number = DetailConstants.INITIAL_RELATED_VIDEO_HEIGHT; @State videoHeight: number = DetailConstants.INITIAL_VIDEO_HEIGHT; - @State screenWidth: number = DeviceScreen.getDeviceWidth(); - private avPlayerUtil?: AvPlayerUtil; + private avPlayerUtil?: AvPlayerUtil = AvPlayerUtil.getInstance(); private screenHeight: number = 0; - private windowUtil?: WindowUtil; - private onDetailFoldStatusChange: Callback = (data: display.FoldStatus) => { - if (data === display.FoldStatus.FOLD_STATUS_FOLDED) { - if (this.windowUtil === undefined) { - return; + private windowUtil?: WindowUtil = WindowUtil.getInstance(); + private mainWindow?: window.Window; + private onWindowSizeChange: (windowSize: window.Size) => void = (windowSize: window.Size) => { + if (this.pageInfo.getPageName() !== CommonConstants.PAGE_NAMES[1]) { + return; + } + if (((this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_MD && this.currentHeightBreakpoint !== + BreakpointConstants.BREAKPOINT_SM) || this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG) && + !this.isHalfFolded) { + this.windowUtil?.setMainWindowOrientation(window.Orientation.AUTO_ROTATION_RESTRICTED); + } + else if (this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_MD && this.currentHeightBreakpoint === + BreakpointConstants.BREAKPOINT_SM) { + if (this.isFullScreen) { + this.windowUtil?.setMainWindowOrientation(window.Orientation.AUTO_ROTATION_LANDSCAPE_RESTRICTED); + } else { + this.windowUtil?.setMainWindowOrientation(window.Orientation.PORTRAIT); + } + } + else if (this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM && this.currentHeightBreakpoint === + BreakpointConstants.BREAKPOINT_LG) { + if (this.isFullScreen) { + this.windowUtil?.setMainWindowOrientation(window.Orientation.AUTO_ROTATION_LANDSCAPE_RESTRICTED); + } else { + this.windowUtil?.setMainWindowOrientation(window.Orientation.PORTRAIT); } - this.isHalfFolded = false; - this.windowUtil.setMainWindowOrientation(window.Orientation.PORTRAIT); + } + }; + private onHalfFoldedChange(): void { + if (this.isHalfFolded) { + this.windowUtil?.setMainWindowOrientation(window.Orientation.AUTO_ROTATION_LANDSCAPE_RESTRICTED); } else { - if (this.windowUtil === undefined) { - return; + if (this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_MD && this.currentHeightBreakpoint === + BreakpointConstants.BREAKPOINT_MD) { + this.windowUtil?.setMainWindowOrientation(window.Orientation.AUTO_ROTATION_RESTRICTED); } - this.windowUtil.setMainWindowOrientation(window.Orientation.AUTO_ROTATION_RESTRICTED); - if (data === display.FoldStatus.FOLD_STATUS_HALF_FOLDED) { - this.isHalfFolded = true; - let orientation: display.Orientation = display.getDefaultDisplaySync().orientation; - if (orientation === display.Orientation.LANDSCAPE || orientation === display.Orientation.LANDSCAPE_INVERTED) { - // Full-screen playback. - this.pageInfo.pushPath({ name: 'VideoPlayer' }); - } + } + } + private onFullScreenChange(): void { + if (((this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_MD && this.currentHeightBreakpoint !== + BreakpointConstants.BREAKPOINT_SM) || this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG) && + !this.isHalfFolded) { + this.windowUtil?.setMainWindowOrientation(window.Orientation.AUTO_ROTATION_RESTRICTED); + } else if (this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM && this.currentHeightBreakpoint === + BreakpointConstants.BREAKPOINT_LG) { + if (this.isFullScreen) { + this.windowUtil?.setMainWindowOrientation(window.Orientation.AUTO_ROTATION_LANDSCAPE_RESTRICTED); } else { - this.isHalfFolded = false; + this.windowUtil?.setMainWindowOrientation(window.Orientation.PORTRAIT); } + } else if (this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_MD && this.currentHeightBreakpoint === + BreakpointConstants.BREAKPOINT_SM && !this.isFullScreen) { + this.windowUtil?.setMainWindowOrientation(window.Orientation.PORTRAIT); } - }; + } aboutToAppear() { - this.avPlayerUtil = AvPlayerUtil.getInstance(); DisplayUtil.getFoldCreaseRegion(); this.screenHeight = DeviceScreen.getDeviceHeight(); - this.windowUtil = WindowUtil.getInstance(); - - if (this.windowUtil === undefined) { - return; - } - if (this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_MD && display.isFoldable()) { - this.windowUtil.setMainWindowOrientation(window.Orientation.AUTO_ROTATION_RESTRICTED); + this.mainWindow = this.windowUtil!.getMainWindow(); + this.mainWindow?.on('windowSizeChange', this.onWindowSizeChange); + if (this.currentWidthBreakpoint !== BreakpointConstants.BREAKPOINT_SM) { + this.windowUtil!.setMainWindowOrientation(window.Orientation.AUTO_ROTATION_RESTRICTED); } } async aboutToDisappear() { + this.isFullScreen = false; this.avPlayerUtil?.offTimeUpdate(); await this.avPlayerUtil?.release(); - if (this.windowUtil === undefined) { - return; - } - if (this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_MD && display.isFoldable()) { - this.windowUtil.setMainWindowOrientation(window.Orientation.PORTRAIT); + + if (this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG) { + this.windowUtil!.setMainWindowOrientation(window.Orientation.LANDSCAPE); + } else { + this.windowUtil!.setMainWindowOrientation(window.Orientation.PORTRAIT); } } @@ -126,11 +154,11 @@ export struct VideoDetail { .onAreaChange((newValue: Area) => { if (newValue.width !== 0) { let height: number = DetailConstants.COMMENT_IMAGE_MIN_HEIGHT_NUMBER + (Number(newValue.width) - - DetailConstants.SIDE_BAR_MIN_WIDTH_NUMBER) / (this.windowWidth * DetailConstants.COMMENTS_AREA_PERCENT - + DetailConstants.SIDE_BAR_MIN_WIDTH_NUMBER) / (px2vp(this.windowWidth) * DetailConstants.COMMENTS_AREA_PERCENT - DetailConstants.SIDE_BAR_MIN_WIDTH_NUMBER) * (DetailConstants.COMMENT_IMAGE_MAX_HEIGHT_NUMBER - DetailConstants.COMMENT_IMAGE_MIN_HEIGHT_NUMBER); let width: number = DetailConstants.COMMENT_IMAGE_MIN_WIDTH_NUMBER + (Number(newValue.width) - - DetailConstants.SIDE_BAR_MIN_WIDTH_NUMBER) / (this.windowWidth * DetailConstants.COMMENTS_AREA_PERCENT - + DetailConstants.SIDE_BAR_MIN_WIDTH_NUMBER) / (px2vp(this.windowWidth) * DetailConstants.COMMENTS_AREA_PERCENT - DetailConstants.SIDE_BAR_MIN_WIDTH_NUMBER) * (DetailConstants.COMMENT_IMAGE_MAX_WIDTH_NUMBER - DetailConstants.COMMENT_IMAGE_MIN_WIDTH_NUMBER); this.commentImgHeight = JSON.stringify(height); @@ -141,18 +169,18 @@ export struct VideoDetail { Column() { VideoDetailView({ screenHeight: this.screenHeight, - relatedVideoHeight: $relatedVideoHeight, - videoHeight: $videoHeight + relatedVideoHeight: this.relatedVideoHeight, + videoHeight: this.videoHeight }) .layoutWeight(1) SelfComment() - .visibility(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? Visibility.None : - Visibility.Visible) + .visibility(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG || this.isFullScreen ? + Visibility.None : Visibility.Visible) } .height(CommonConstants.FULL_PERCENT) .width(CommonConstants.FULL_PERCENT) } - .showSideBar(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? true : false) + .showSideBar(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG && !this.isFullScreen ? true : false) .showControlButton(false) .autoHide(false) .sideBarPosition(SideBarPosition.End) @@ -177,27 +205,12 @@ export struct VideoDetail { } .hideTitleBar(true) .onShown(() => { - try { - display.on('foldStatusChange', this.onDetailFoldStatusChange); - } catch (exception) { - Logger.error('Failed to register callback. Code: ' + JSON.stringify(exception)); - } if (this.avplayerState !== CommonConstants.AV_PLAYER_PLAYING_STATE) { - this.avPlayerUtil?.playerStateControl(); - } - if (this.windowUtil === undefined) { - return; + this.avPlayerUtil!.playerStateControl(); } if (this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_MD && display.isFoldable()) { this.isHalfFolded = false; } }) - .onHidden(() => { - try { - display.off('foldStatusChange'); - } catch (exception) { - Logger.error('Failed to unregister callback. Code: ' + JSON.stringify(exception)); - } - }) } } \ No newline at end of file diff --git a/features/videoDetail/src/main/ets/view/VideoDetailView.ets b/features/videoDetail/src/main/ets/view/VideoDetailView.ets index fc24a9a..4115eca 100644 --- a/features/videoDetail/src/main/ets/view/VideoDetailView.ets +++ b/features/videoDetail/src/main/ets/view/VideoDetailView.ets @@ -13,119 +13,79 @@ * limitations under the License. */ +import { display } from '@kit.ArkUI'; import { BreakpointConstants, CommonConstants } from '@ohos/commons'; -import { AvPlayerUtil, Logger } from '@ohos/commons'; +import { Logger } from '@ohos/commons'; import { RelatedList } from './RelatedList'; import { CurrentOffsetUtil } from '../utils/CurrentOffsetUtil'; import { DetailConstants } from '../constants/DetailConstants'; +import { VideoPlayer } from './VideoPlayer'; +import { FooterEpisodes } from './FooterEpisodes'; +import { SideEpisodes } from './SideEpisodes'; @Component export struct VideoDetailView { - @StorageLink('currentTime') currentTime: string = CommonConstants.INITIAL_TIME; - @StorageLink('totalTime') totalTime: string = CommonConstants.INITIAL_TIME; - @StorageLink('progress') progress: number = 0; @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string = BreakpointConstants.BREAKPOINT_LG; + @StorageLink('creaseRegion') creaseRegion: number[] = []; @StorageLink('isHalfFolded') isHalfFolded: boolean = false; - @Consume('pageInfo') pageInfo: NavPathStack; + @StorageLink('isFullScreen') isFullScreen: boolean = false; @Link relatedVideoHeight: number; @Link videoHeight: number; - private avPlayerUtil?: AvPlayerUtil; + @State isShowingSideBar: boolean = false; + @State foldStatus: display.FoldStatus = display.getFoldStatus(); private screenHeight: number = 0; private scroller: Scroller = new Scroller(); - private xComponentController: XComponentController = new XComponentController(); - - aboutToAppear(): void { - this.avPlayerUtil = AvPlayerUtil.getInstance(); - } build() { Scroll(this.scroller) { Column() { - Stack({ alignContent: Alignment.Bottom }) { - XComponent({ - id: DetailConstants.VIDEO_DETAIL, - type: XComponentType.SURFACE, - controller: this.xComponentController - }) - .onLoad(() => { - this.avPlayerUtil?.createAvPlayer(this.xComponentController.getXComponentSurfaceId()); - AppStorage.setOrCreate('detailSurfaceId', this.xComponentController.getXComponentSurfaceId()); + Row() { + Column() { + VideoPlayer({ + videoHeight: this.videoHeight, + isShowingSideBar: this.isShowingSideBar, + foldStatus: this.foldStatus }) - .width(this.videoHeight + DetailConstants.PERCENT_SIGN) - .height(CommonConstants.FULL_PERCENT) - .aspectRatio(CommonConstants.VIDEO_ASPECT_RATIO) - Row() { - TimeText({ time: $currentTime }) - .margin({ - left: $r('app.float.current_time_text_left'), - right: $r('app.float.current_time_text_right') - }) + Blank() + .height(this.creaseRegion[1]) + .width(CommonConstants.FULL_PERCENT) + .visibility(this.isHalfFolded && this.isShowingSideBar && this.isFullScreen ? Visibility.Visible : + Visibility.None) - Slider({ - min: 0, - max: CommonConstants.PROGRESS_HUNDRED, - step: 1, - value: this.progress + FooterEpisodes({ + isShowingSideBar: this.isShowingSideBar, + foldStatus: this.foldStatus }) - .onChange((value: number, mode: SliderChangeMode) => { - this.avPlayerUtil?.sliderChange(value, mode); - }) - .layoutWeight(1) - .selectedColor($r('app.color.episodes_font')) - - TimeText({ time: $totalTime }) - .margin({ - left: $r('app.float.total_time_text_left'), - right: $r('app.float.total_time_text_right') - }) - - Image($r('app.media.ic_public_enlarge')) - .height($r('app.float.enlarge_size')) - .width($r('app.float.enlarge_size')) - .margin({ right: $r('app.float.enlarge_margin') }) - .fillColor(Color.White) - .onClick(() => { - // Full-screen playback. - this.pageInfo.pushPath({ name: 'VideoPlayer' }); - }) } - .width(CommonConstants.FULL_PERCENT) - .height($r('app.float.time_row_height')) - .alignItems(VerticalAlign.Center) + .layoutWeight(3) - Image($r('app.media.ic_public_back')) - .height($r('app.float.back_size')) - .width($r('app.float.back_size')) - .position({ - x: $r('app.float.back_position_x'), - y: $r('app.float.back_position_y') - }) - .fillColor(Color.White) - .onClick(() => { - this.pageInfo.pop(); - }) + SideEpisodes({ + isShowingSideBar: this.isShowingSideBar, + foldStatus: this.foldStatus + }) } - .width(CommonConstants.FULL_PERCENT) + .justifyContent(FlexAlign.Start) .backgroundColor(Color.Black) - .onClick(() => { - this.avPlayerUtil?.playerStateControl(); - }) + .height(this.isFullScreen ? CommonConstants.FULL_PERCENT : 'auto') + .width(CommonConstants.FULL_PERCENT) RelatedList({ - relatedVideoHeight: $relatedVideoHeight, - videoHeight: $videoHeight, + relatedVideoHeight: this.relatedVideoHeight, + videoHeight: this.videoHeight, screenHeight: this.screenHeight }) } .width(CommonConstants.FULL_PERCENT) .justifyContent(FlexAlign.Start) - .padding({ bottom: $r('app.float.video_col_padding') }) } .scrollable(ScrollDirection.Vertical) .scrollBar(BarState.Off) .height(CommonConstants.FULL_PERCENT) .onScrollFrameBegin((offset: number) => { + if (this.isFullScreen) { + return { offsetRemain: offset }; + } if (this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG) { if ((offset > 0) && (this.videoHeight > DetailConstants.MIN_VIDEO_PERCENT)) { // Video zoom-out logic. @@ -184,17 +144,4 @@ export struct VideoDetailView { return { offsetRemain: 0 }; }) } -} - -@Component -struct TimeText { - @Link time: string; - - build() { - Text(this.time) - .fontSize($r('app.float.time_font')) - .fontColor(Color.White) - .lineHeight($r('app.float.time_text_line')) - .width($r('app.float.time_text_width')) - } } \ No newline at end of file diff --git a/features/videoDetail/src/main/ets/view/VideoPlayer.ets b/features/videoDetail/src/main/ets/view/VideoPlayer.ets new file mode 100644 index 0000000..d606aa3 --- /dev/null +++ b/features/videoDetail/src/main/ets/view/VideoPlayer.ets @@ -0,0 +1,278 @@ +/* + * Copyright (c) 2023 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { display } from '@kit.ArkUI'; +import { deviceInfo } from '@kit.BasicServicesKit'; +import { AvPlayerUtil, BreakpointConstants, CommonConstants, VideoNavPathStack, WindowUtil } from '@ohos/commons'; +import { DetailConstants } from '../constants/DetailConstants'; + +@Component +export struct VideoPlayer { + @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string = BreakpointConstants.BREAKPOINT_LG; + @StorageLink('currentHeightBreakpoint') currentHeightBreakpoint: string = BreakpointConstants.BREAKPOINT_LG; + @StorageLink('currentTime') currentTime: string = CommonConstants.INITIAL_TIME; + @StorageLink('totalTime') totalTime: string = CommonConstants.INITIAL_TIME; + @StorageLink('isHalfFolded') isHalfFolded: boolean = false; + @StorageLink('creaseRegion') creaseRegion: number[] = []; + @StorageLink('progress') progress: number = 0; + @StorageLink('avplayerState') avplayerState: string = ''; + @StorageLink('isFullScreen') isFullScreen: boolean = false; + @Link videoHeight: number; + @Link isShowingSideBar: boolean; + @Link foldStatus: display.FoldStatus; + @Consume('pageInfo') pageInfo: VideoNavPathStack; + private windowUtil?: WindowUtil = WindowUtil.getInstance(); + private avPlayerUtil?: AvPlayerUtil; + private xComponentController: XComponentController = new XComponentController(); + private onFoldStatusChange: Callback = (data: display.FoldStatus) => { + this.foldStatus = data; + if (data === display.FoldStatus.FOLD_STATUS_HALF_FOLDED) { + let orientation: display.Orientation = display.getDefaultDisplaySync().orientation; + if (orientation === display.Orientation.LANDSCAPE || orientation === display.Orientation.LANDSCAPE_INVERTED) { + this.isHalfFolded = true; + // Full-screen playback. + if (!this.isFullScreen) { + this.isFullScreen = true; + } + } + } else { + this.isHalfFolded = false; + } + }; + + aboutToAppear(): void { + this.avPlayerUtil = AvPlayerUtil.getInstance(); + display.on('foldStatusChange', this.onFoldStatusChange); + } + + aboutToDisappear(): void { + display.off('foldStatusChange'); + } + + build() { + Stack({ alignContent: this.isFullScreen ? Alignment.Center : Alignment.Bottom }) { + Flex({ + direction: FlexDirection.Column, + justifyContent: this.isHalfFolded ? FlexAlign.Start : FlexAlign.Center, + alignItems: ItemAlign.Start + }) { + Column() { + XComponent({ + id: CommonConstants.PAGE_NAMES[1], + type: XComponentType.SURFACE, + controller: this.xComponentController + }) + .onLoad(() => { + this.avPlayerUtil?.createAvPlayer(this.xComponentController.getXComponentSurfaceId()); + AppStorage.setOrCreate('detailSurfaceId', this.xComponentController.getXComponentSurfaceId()); + }) + .width(this.isFullScreen ? -1 : this.videoHeight + DetailConstants.PERCENT_SIGN) + .aspectRatio(CommonConstants.VIDEO_ASPECT_RATIO) + } + .justifyContent(FlexAlign.Center) + .height(this.isHalfFolded ? this.creaseRegion[0] : (this.isFullScreen ? CommonConstants.FULL_PERCENT : 'auto')) + .width(CommonConstants.FULL_PERCENT) + } + .width(CommonConstants.FULL_PERCENT) + .onClick(() => { + if (this.isShowingSideBar) { + this.isShowingSideBar = false; + } else { + this.avPlayerUtil?.playerStateControl(); + } + }) + + Column() { + Row() { + TimeText({ time: this.currentTime }) + .margin({ + left: $r('app.float.current_time_left'), + right: $r('app.float.current_time_right') + }) + + Slider({ + min: 0, + max: CommonConstants.PROGRESS_HUNDRED, + step: 1, + value: this.progress + }) + .onChange((value: number, mode: SliderChangeMode) => { + this.avPlayerUtil?.sliderChange(value, mode); + }) + .layoutWeight(1) + .selectedColor($r('app.color.selected_color')) + + TimeText({ time: this.totalTime }) + .margin({ + left: $r('app.float.total_time_left'), + right: $r('app.float.total_time_right') + }) + } + .width(CommonConstants.FULL_PERCENT) + .height($r('app.float.time_row_height')) + .alignItems(VerticalAlign.Center) + .visibility(this.isFullScreen ? Visibility.Visible : Visibility.None) + + Row() { + Row() { + Image(this.avplayerState === CommonConstants.AV_PLAYER_PLAYING_STATE ? $r('app.media.ic_public_pause') + : $r('app.media.ic_public_play')) + .height($r('app.float.icon_size')) + .width($r('app.float.icon_size')) + .margin({ left: $r('app.float.icon_margin') }) + .onClick(() => { + this.avPlayerUtil?.playerStateControl(); + }) + ImgIcon({ img: $r('app.media.ic_public_play_next') }) + ImgIcon({ img: $r('app.media.ic_public_view_list_white') }) + } + .margin({ + top: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM ? '0' : $r('app.float.icon_row_top'), + bottom: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM ? + $r('app.float.icon_row_bottom_sm') : $r('app.float.icon_row_bottom') + }) + + Blank() + + Row() { + TextButton({ content: DetailConstants.PLAYER_TEXT_LIST[0] }) + .onClick(() => { + this.isShowingSideBar = !this.isShowingSideBar; + }) + TextButton({ content: DetailConstants.PLAYER_TEXT_LIST[2] }) + TextButton({ content: DetailConstants.PLAYER_TEXT_LIST[3] }) + } + .margin({ + top: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM ? $r('app.float.button_row_top_sm') : + $r('app.float.button_row_top'), + bottom: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM ? + $r('app.float.button_row_bottom_sm') : $r('app.float.button_row_bottom') + }) + } + .height($r('app.float.icon_button_row_height')) + .width(CommonConstants.FULL_PERCENT) + .visibility(this.isFullScreen ? Visibility.Visible : Visibility.None) + } + .height(this.isFullScreen ? CommonConstants.FULL_PERCENT : 'auto') + .width(CommonConstants.FULL_PERCENT) + .justifyContent(FlexAlign.End) + .visibility(this.isFullScreen && !this.isShowingSideBar ? Visibility.Visible : Visibility.None) + + Row() { + TimeText({ time: this.currentTime }) + .margin({ + left: $r('app.float.current_time_text_left'), + right: $r('app.float.current_time_text_right') + }) + + Slider({ + min: 0, + max: CommonConstants.PROGRESS_HUNDRED, + step: 1, + value: this.progress + }) + .onChange((value: number, mode: SliderChangeMode) => { + this.avPlayerUtil?.sliderChange(value, mode); + }) + .layoutWeight(1) + .selectedColor($r('app.color.episodes_font')) + + TimeText({ time: this.totalTime }) + .margin({ + left: $r('app.float.total_time_text_left'), + right: $r('app.float.total_time_text_right') + }) + + Image($r('app.media.ic_public_enlarge')) + .height($r('app.float.enlarge_size')) + .width($r('app.float.enlarge_size')) + .margin({ right: $r('app.float.enlarge_margin') }) + .fillColor(Color.White) + .onClick(() => { + this.isFullScreen = true; + if (deviceInfo.deviceType !== CommonConstants.DEVICE_TYPE) { + this.windowUtil!.disableWindowSystemBar(); + } + }) + } + .width(CommonConstants.FULL_PERCENT) + .height($r('app.float.time_row_height')) + .alignItems(VerticalAlign.Center) + .visibility(!this.isFullScreen ? Visibility.Visible : Visibility.None) + + Image($r('app.media.ic_public_back')) + .height($r('app.float.back_size')) + .width($r('app.float.back_size')) + .position({ + x: $r('app.float.back_position_x'), + y: $r('app.float.back_position_y') + }) + .fillColor(Color.White) + .onClick(() => { + if (this.isHalfFolded) { + this.isHalfFolded = false; + } + if (this.isFullScreen) { + this.isFullScreen = false; + } else { + this.pageInfo.setPageName('home'); + this.pageInfo.pop(); + } + }) + } + .height('auto') + .layoutWeight(this.isFullScreen ? 1 : 0) + .width(CommonConstants.FULL_PERCENT) + .backgroundColor(Color.Black) + } +} + +@Component +struct ImgIcon { + private img?: Resource; + + build() { + Image(this.img ? this.img : '') + .height($r('app.float.icon_size')) + .width($r('app.float.icon_size')) + .margin({ left: $r('app.float.icon_margin') }) + } +} + +@Component +struct TextButton { + private content: ResourceStr = ''; + + build() { + Text(this.content) + .fontSize($r('app.float.button_text_font')) + .fontWeight(FontWeight.Normal) + .fontColor(Color.White) + .margin({ right: $r('app.float.button_text_margin') }) + } +} + +@Component +struct TimeText { + @Link time: string; + + build() { + Text(this.time) + .fontSize($r('app.float.time_font')) + .fontColor(Color.White) + .lineHeight($r('app.float.time_text_line')) + .width($r('app.float.time_text_width')) + } +} \ No newline at end of file diff --git a/features/videoDetail/src/main/resources/base/element/color.json b/features/videoDetail/src/main/resources/base/element/color.json index a50dc3b..ab978fc 100644 --- a/features/videoDetail/src/main/resources/base/element/color.json +++ b/features/videoDetail/src/main/resources/base/element/color.json @@ -11,6 +11,18 @@ { "name": "shadow_color", "value": "#2600001E" + }, + { + "name": "selected_color", + "value": "#ED6F21" + }, + { + "name": "episode_row_background", + "value": "#33FFFFFF" + }, + { + "name": "font_selected", + "value": "#ED6F21" } ] } \ No newline at end of file diff --git a/features/videoDetail/src/main/resources/base/element/float.json b/features/videoDetail/src/main/resources/base/element/float.json index 37fb773..70ccc26 100644 --- a/features/videoDetail/src/main/resources/base/element/float.json +++ b/features/videoDetail/src/main/resources/base/element/float.json @@ -383,6 +383,218 @@ { "name": "video_col_padding", "value": "10vp" + }, + { + "name": "current_time_left", + "value": "36vp" + }, + { + "name": "current_time_right", + "value": "2vp" + }, + { + "name": "total_time_left", + "value": "2vp" + }, + { + "name": "total_time_right", + "value": "36vp" + }, + { + "name": "icon_size", + "value": "24vp" + }, + { + "name": "icon_margin", + "value": "24vp" + }, + { + "name": "icon_row_top", + "value": "14vp" + }, + { + "name": "icon_row_bottom_sm", + "value": "15vp" + }, + { + "name": "icon_row_bottom", + "value": "24vp" + }, + { + "name": "button_text_font", + "value": "12fp" + }, + { + "name": "button_text_margin", + "value": "24vp" + }, + { + "name": "button_row_top_sm", + "value": "4vp" + }, + { + "name": "button_row_top", + "value": "16vp" + }, + { + "name": "button_row_bottom_sm", + "value": "19vp" + }, + { + "name": "button_row_bottom", + "value": "28vp" + }, + { + "name": "icon_button_row_height", + "value": "60vp" + }, + { + "name": "title_selected_font", + "value": "24fp" + }, + { + "name": "title_selected_line", + "value": "33vp" + }, + { + "name": "title_selected_width", + "value": "48vp" + }, + { + "name": "title_selected_margin", + "value": "24vp" + }, + { + "name": "title_font", + "value": "18fp" + }, + { + "name": "title_line", + "value": "25vp" + }, + { + "name": "title_width", + "value": "58vp" + }, + { + "name": "title_row_top", + "value": "25vp" + }, + { + "name": "title_row_bottom", + "value": "12vp" + }, + { + "name": "title_row_height", + "value": "56vp" + }, + { + "name": "playing_size", + "value": "10vp" + }, + { + "name": "playing_position_x", + "value": "8vp" + }, + { + "name": "playing_position_y", + "value": "36vp" + }, + { + "name": "episode_row_radius", + "value": "8vp" + }, + { + "name": "episode_row_height", + "value": "54vp" + }, + { + "name": "episode_list_bottom", + "value": "12vp" + }, + { + "name": "episode_list_lanes_space", + "value": "12vp" + }, + { + "name": "episode_col_padding", + "value": "24vp" + }, + { + "name": "side_title_width_1", + "value": "65vp" + }, + { + "name": "side_title_margin", + "value": "36vp" + }, + { + "name": "side_title_width_2", + "value": "56vp" + }, + { + "name": "side_row_margin_sm", + "value": "8vp" + }, + { + "name": "side_row_margin", + "value": "12vp" + }, + { + "name": "playing_position_x_side_lg", + "value": "8vp" + }, + { + "name": "playing_position_x_side", + "value": "6vp" + }, + { + "name": "playing_position_y_side_lg", + "value": "36vp" + }, + { + "name": "playing_position_y_side", + "value": "28vp" + }, + { + "name": "episode_row_width_lg", + "value": "69vp" + }, + { + "name": "episode_row_width_other", + "value": "55vp" + }, + { + "name": "episode_row_height_lg", + "value": "54vp" + }, + { + "name": "episode_row_height_other", + "value": "44vp" + }, + { + "name": "lanes_item_space", + "value": "12vp" + }, + { + "name": "episodes_sidebar_padding_bottom", + "value": "12vp" + }, + { + "name": "episodes_sidebar_padding_left_right", + "value": "24vp" + }, + { + "name": "side_col_width", + "value": "360vp" + }, + { + "name": "side_text_font", + "value": "16fp" + }, + { + "name": "side_text_line", + "value": "32vp" } ] } \ No newline at end of file diff --git a/features/videoDetail/src/main/resources/base/element/string.json b/features/videoDetail/src/main/resources/base/element/string.json index cd5bc50..4c8992b 100644 --- a/features/videoDetail/src/main/resources/base/element/string.json +++ b/features/videoDetail/src/main/resources/base/element/string.json @@ -46,7 +46,11 @@ }, { "name": "love", - "value": "好喜欢这张图,很惊艳!!!竟然是手机拍出来的,太给力了!', '这个背面真的很有设计感,珠光贝母,种草了种草了" + "value": "好喜欢这张图,很惊艳!!!竟然是手机拍出来的,太给力了!" + }, + { + "name": "design", + "value": "这个背面真的很有设计感,珠光贝母,种草了种草了" }, { "name": "July", @@ -55,6 +59,22 @@ { "name": "comment", "value": "评论..." + }, + { + "name": "selections", + "value": "选集" + }, + { + "name": "just", + "value": "只看TA" + }, + { + "name": "super", + "value": "超清" + }, + { + "name": "speed", + "value": "超清" } ] } \ No newline at end of file diff --git a/features/videoPlayer/src/main/resources/base/media/ic_public_pause.svg b/features/videoDetail/src/main/resources/base/media/ic_public_pause.svg similarity index 100% rename from features/videoPlayer/src/main/resources/base/media/ic_public_pause.svg rename to features/videoDetail/src/main/resources/base/media/ic_public_pause.svg diff --git a/features/videoPlayer/src/main/resources/base/media/ic_public_play.svg b/features/videoDetail/src/main/resources/base/media/ic_public_play.svg similarity index 100% rename from features/videoPlayer/src/main/resources/base/media/ic_public_play.svg rename to features/videoDetail/src/main/resources/base/media/ic_public_play.svg diff --git a/features/videoPlayer/src/main/resources/base/media/ic_public_play_next.svg b/features/videoDetail/src/main/resources/base/media/ic_public_play_next.svg similarity index 100% rename from features/videoPlayer/src/main/resources/base/media/ic_public_play_next.svg rename to features/videoDetail/src/main/resources/base/media/ic_public_play_next.svg diff --git a/features/videoPlayer/src/main/resources/base/media/ic_public_view_list_white.svg b/features/videoDetail/src/main/resources/base/media/ic_public_view_list_white.svg similarity index 100% rename from features/videoPlayer/src/main/resources/base/media/ic_public_view_list_white.svg rename to features/videoDetail/src/main/resources/base/media/ic_public_view_list_white.svg diff --git a/features/videoDetail/src/main/resources/en_US/element/string.json b/features/videoDetail/src/main/resources/en_US/element/string.json index e4f56b0..c4bfaab 100644 --- a/features/videoDetail/src/main/resources/en_US/element/string.json +++ b/features/videoDetail/src/main/resources/en_US/element/string.json @@ -46,7 +46,11 @@ }, { "name": "love", - "value": "Love this picture, it's amazing!! It was taken by a mobile phone. Great! 'This back is really designed, pearl fritillary, planted grass." + "value": "Love this picture, it's amazing!! It was taken by a mobile phone. Great!" + }, + { + "name": "design", + "value": "This back is really designed, pearl fritillary, planted grass." }, { "name": "July", @@ -55,6 +59,22 @@ { "name": "comment", "value": "comment..." + }, + { + "name": "selections", + "value": "select" + }, + { + "name": "just", + "value": "look it" + }, + { + "name": "super", + "value": "super" + }, + { + "name": "speed", + "value": "speed" } ] } \ No newline at end of file diff --git a/features/videoDetail/src/main/resources/zh_CN/element/string.json b/features/videoDetail/src/main/resources/zh_CN/element/string.json index cd5bc50..9ad5b2e 100644 --- a/features/videoDetail/src/main/resources/zh_CN/element/string.json +++ b/features/videoDetail/src/main/resources/zh_CN/element/string.json @@ -46,7 +46,11 @@ }, { "name": "love", - "value": "好喜欢这张图,很惊艳!!!竟然是手机拍出来的,太给力了!', '这个背面真的很有设计感,珠光贝母,种草了种草了" + "value": "好喜欢这张图,很惊艳!!!竟然是手机拍出来的,太给力了!" + }, + { + "name": "design", + "value": "这个背面真的很有设计感,珠光贝母,种草了种草了" }, { "name": "July", @@ -55,6 +59,22 @@ { "name": "comment", "value": "评论..." + }, + { + "name": "selections", + "value": "选集" + }, + { + "name": "just", + "value": "只看TA" + }, + { + "name": "super", + "value": "超清" + }, + { + "name": "speed", + "value": "倍速" } ] } \ No newline at end of file diff --git a/features/videoPlayer/Index.ets b/features/videoPlayer/Index.ets deleted file mode 100644 index fc4df00..0000000 --- a/features/videoPlayer/Index.ets +++ /dev/null @@ -1 +0,0 @@ -export { VideoPlayer } from './src/main/ets/view/VideoPlayer'; \ No newline at end of file diff --git a/features/videoPlayer/build-profile.json5 b/features/videoPlayer/build-profile.json5 deleted file mode 100644 index 3167e54..0000000 --- a/features/videoPlayer/build-profile.json5 +++ /dev/null @@ -1,10 +0,0 @@ -{ - "apiType": "stageMode", - "buildOption": { - }, - "targets": [ - { - "name": "default" - } - ] -} \ No newline at end of file diff --git a/features/videoPlayer/hvigorfile.ts b/features/videoPlayer/hvigorfile.ts deleted file mode 100644 index 4218707..0000000 --- a/features/videoPlayer/hvigorfile.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { harTasks } from '@ohos/hvigor-ohos-plugin'; - -export default { - system: harTasks, /* Built-in plugin of Hvigor. It cannot be modified. */ - plugins:[] /* Custom plugin to extend the functionality of Hvigor. */ -} diff --git a/features/videoPlayer/oh-package.json5 b/features/videoPlayer/oh-package.json5 deleted file mode 100644 index 56aa2ad..0000000 --- a/features/videoPlayer/oh-package.json5 +++ /dev/null @@ -1,14 +0,0 @@ -{ - "license": "Apache-2.0", - "devDependencies": {}, - "author": "", - "name": "videoplayer", - "description": "Please describe the basic information.", - "main": "Index.ets", - "version": "1.0.0", - "dynamicDependencies": {}, - "dependencies": { - "@ohos/commons": "file:../../commons/base", - "@ohos/detail": "file:../videoDetail" - } -} \ No newline at end of file diff --git a/features/videoPlayer/src/main/ets/view/VideoPlayer.ets b/features/videoPlayer/src/main/ets/view/VideoPlayer.ets deleted file mode 100644 index dd473cf..0000000 --- a/features/videoPlayer/src/main/ets/view/VideoPlayer.ets +++ /dev/null @@ -1,300 +0,0 @@ -/* - * Copyright (c) 2023 Huawei Device Co., Ltd. - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { display, window } from '@kit.ArkUI'; -import { Callback, deviceInfo } from '@kit.BasicServicesKit'; -import { BreakpointConstants, CommonConstants } from '@ohos/commons/'; -import { AvPlayerUtil, Logger, WindowUtil } from '@ohos/commons/'; -import { PlayerConstants } from '../constants/PlayerConstants'; -import { FooterEpisodes } from './FooterEpisodes'; -import { SideEpisodes } from './SideEpisodes'; - -@Component -export struct VideoPlayer { - @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string = BreakpointConstants.BREAKPOINT_LG; - @StorageLink('currentHeightBreakpoint') currentHeightBreakpoint: string = BreakpointConstants.BREAKPOINT_LG; - @StorageLink('creaseRegion') creaseRegion: number[] = []; - @StorageLink('currentTime') currentTime: string = CommonConstants.INITIAL_TIME; - @StorageLink('totalTime') totalTime: string = CommonConstants.INITIAL_TIME; - @StorageLink('progress') progress: number = 0; - @StorageLink('avplayerState') avplayerState: string = ''; - @StorageLink('isHalfFolded') isHalfFolded: boolean = false; - @State isShowingSideBar: boolean = false; - @State foldStatus: display.FoldStatus = display.getFoldStatus(); - @Consume('pageInfo') pageInfo: NavPathStack; - private windowUtil?: WindowUtil; - private avPlayerUtil?: AvPlayerUtil; - private xComponentController: XComponentController = new XComponentController(); - private onFoldStatusChange: Callback = (data: display.FoldStatus) => { - this.foldStatus = data; - if (data === display.FoldStatus.FOLD_STATUS_EXPANDED) { - if (this.windowUtil === undefined) { - return; - } - this.isHalfFolded = false; - this.windowUtil.setMainWindowOrientation(window.Orientation.AUTO_ROTATION_RESTRICTED); - } else { - if (this.windowUtil === undefined) { - return; - } - if (data === display.FoldStatus.FOLD_STATUS_HALF_FOLDED) { - this.isHalfFolded = true; - } else { - this.isHalfFolded = false; - } - this.windowUtil.setMainWindowOrientation(window.Orientation.AUTO_ROTATION_LANDSCAPE); - } - }; - - aboutToAppear() { - this.avPlayerUtil = AvPlayerUtil.getInstance(); - this.windowUtil = WindowUtil.getInstance(); - if (this.windowUtil !== undefined) { - /** - * In any windowSize of 2ini, the systemBar doesn't need to hide. - * So this logic can't decide by portraitBreakpoint and currentWidthBreakpoint. - */ - if (deviceInfo.deviceType !== CommonConstants.DEVICE_TYPES[0]) { - this.windowUtil.disableWindowSystemBar(); - } - - /** - * The landscape bp "sm" and portrait bp "lg" will show in phone and fold device. - */ - if (this.currentHeightBreakpoint === 'lg' && this.currentWidthBreakpoint === 'sm') { - this.windowUtil.setMainWindowOrientation(window.Orientation.AUTO_ROTATION_LANDSCAPE); - } - - /** - * The landscape bp "md" and portrait bp "md" will show in fold device. - */ - if (this.currentHeightBreakpoint === 'md' && this.currentWidthBreakpoint === 'md' && this.isHalfFolded) { - this.windowUtil.setMainWindowOrientation(window.Orientation.AUTO_ROTATION_LANDSCAPE); - } - } else { - Logger.info(`Full-screen display in portrait mode`); - } - } - - async aboutToDisappear() { - this.avPlayerUtil?.setSurfaceId(AppStorage.get('detailSurfaceId')); - if (this.windowUtil !== undefined) { - /** - * When step out the fullScreen VideoPlay, any device need to show systemBar except 2ini. - */ - if (deviceInfo.deviceType !== CommonConstants.DEVICE_TYPES[0]) { - this.windowUtil.enableWindowSystemBar(); - } - if (this.currentHeightBreakpoint === 'sm' && this.currentWidthBreakpoint === 'md') { - this.windowUtil.setMainWindowOrientation(window.Orientation.PORTRAIT); - } else if (this.currentHeightBreakpoint === 'sm' && this.currentWidthBreakpoint === 'lg') { - this.windowUtil.setMainWindowOrientation(window.Orientation.AUTO_ROTATION_LANDSCAPE); - } else { - this.windowUtil.setMainWindowOrientation(window.Orientation.AUTO_ROTATION_RESTRICTED); - } - } else { - Logger.info(`Normal return in portrait mode`); - } - } - - build() { - NavDestination() { - Row() { - Column() { - Stack({ alignContent: Alignment.Center }) { - Flex({ - direction: FlexDirection.Column, - justifyContent: this.isHalfFolded ? FlexAlign.Start : FlexAlign.Center, - alignItems: ItemAlign.Start - }) { - Column() { - XComponent({ - id: PlayerConstants.X_COMPONENT_ID, - type: XComponentType.SURFACE, - controller: this.xComponentController - }) - .onLoad(() => { - this.avPlayerUtil?.setSurfaceId(this.xComponentController.getXComponentSurfaceId()); - }) - .aspectRatio(CommonConstants.VIDEO_ASPECT_RATIO) - } - .justifyContent(FlexAlign.Center) - .height(this.isHalfFolded ? this.creaseRegion[0] : CommonConstants.FULL_PERCENT) - .width(CommonConstants.FULL_PERCENT) - } - .width(CommonConstants.FULL_PERCENT) - .height(CommonConstants.FULL_PERCENT) - .onClick(() => { - if (this.isShowingSideBar) { - this.isShowingSideBar = false; - } - }) - - Column() { - Row() { - TimeText({ time: $currentTime }) - .margin({ - left: $r('app.float.current_time_left'), - right: $r('app.float.current_time_right') - }) - - Slider({ min: 0, max: CommonConstants.PROGRESS_HUNDRED, step: 1, value: this.progress }) - .onChange((value: number, mode: SliderChangeMode) => { - this.avPlayerUtil?.sliderChange(value, mode); - }) - .layoutWeight(1) - .selectedColor($r('app.color.selected_color')) - - TimeText({ time: $totalTime }) - .margin({ - left: $r('app.float.total_time_left'), - right: $r('app.float.total_time_right') - }) - } - .width(CommonConstants.FULL_PERCENT) - .height($r('app.float.time_row_height')) - .alignItems(VerticalAlign.Center) - - Row() { - Row() { - Image(this.avplayerState === CommonConstants.AV_PLAYER_PLAYING_STATE ? $r('app.media.ic_public_pause') - : $r('app.media.ic_public_play')) - .height($r('app.float.icon_size')) - .width($r('app.float.icon_size')) - .margin({ left: $r('app.float.icon_margin') }) - .onClick(() => { - this.avPlayerUtil?.playerStateControl(); - }) - ImgIcon({ img: $r('app.media.ic_public_play_next') }) - ImgIcon({ img: $r('app.media.ic_public_view_list_white') }) - } - .margin({ - top: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM ? '0' : $r('app.float.icon_row_top'), - bottom: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM ? - $r('app.float.icon_row_bottom_sm') : $r('app.float.icon_row_bottom') - }) - - Blank() - - Row() { - TextButton({ content: PlayerConstants.PLAYER_TEXT_LIST[0] }) - .onClick(() => { - this.isShowingSideBar = !this.isShowingSideBar; - }) - TextButton({ content: PlayerConstants.PLAYER_TEXT_LIST[2] }) - TextButton({ content: PlayerConstants.PLAYER_TEXT_LIST[3] }) - } - .margin({ - top: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM ? $r('app.float.button_row_top_sm') : - $r('app.float.button_row_top'), - bottom: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM ? - $r('app.float.button_row_bottom_sm') : $r('app.float.button_row_bottom') - }) - } - .height($r('app.float.icon_button_row_height')) - .width(CommonConstants.FULL_PERCENT) - } - .height(CommonConstants.FULL_PERCENT) - .width(CommonConstants.FULL_PERCENT) - .justifyContent(FlexAlign.End) - .visibility(this.isShowingSideBar ? Visibility.None : Visibility.Visible) - - Image($r('app.media.ic_public_back')) - .height($r('app.float.icon_size')) - .width($r('app.float.icon_size')) - .position({ - x: $r('app.float.back_position_x'), - y: this.isHalfFolded ? this.creaseRegion[0] + this.creaseRegion[1] : $r('app.float.back_position_y') - }) - .fillColor(Color.White) - .onClick(() => { - this.pageInfo.pop(); - }) - .visibility(!this.isShowingSideBar? Visibility.Visible : Visibility.None) - } - .width(CommonConstants.FULL_PERCENT) - .height(this.isShowingSideBar ? this.creaseRegion[0] : CommonConstants.FULL_PERCENT) - .layoutWeight(this.isHalfFolded? 0 : 1) - - Blank() - .height(this.creaseRegion[1]) - .width(CommonConstants.FULL_PERCENT) - .visibility(this.isHalfFolded && this.isShowingSideBar ? Visibility.Visible : Visibility.None) - - FooterEpisodes({ isShowingSideBar: $isShowingSideBar, foldStatus: this.foldStatus }) - } - .layoutWeight(3) - - SideEpisodes({ isShowingSideBar: $isShowingSideBar, foldStatus: this.foldStatus }) - } - .justifyContent(FlexAlign.Start) - .backgroundColor(Color.Black) - .height(CommonConstants.FULL_PERCENT) - .width(CommonConstants.FULL_PERCENT) - } - .hideTitleBar(true) - .onShown(() => { - if (this.avplayerState !== CommonConstants.AV_PLAYER_PLAYING_STATE) { - this.avPlayerUtil?.playerStateControl(); - } - try { - display.on('foldStatusChange', this.onFoldStatusChange); - } catch (exception) { - Logger.error('Failed to register callback. Code: ' + JSON.stringify(exception)); - } - }) - .onHidden(() => { - display.off('foldStatusChange'); - }) - } -} - -@Component -struct ImgIcon { - private img?: Resource; - - build() { - Image(this.img !== undefined ? this.img : '') - .height($r('app.float.icon_size')) - .width($r('app.float.icon_size')) - .margin({ left: $r('app.float.icon_margin') }) - } -} - -@Component -struct TextButton { - private content: ResourceStr = ''; - - build() { - Text(this.content) - .fontSize($r('app.float.button_text_font')) - .fontWeight(FontWeight.Normal) - .fontColor(Color.White) - .margin({ right: $r('app.float.button_text_margin') }) - } -} - -@Component -struct TimeText { - @Link time: string; - - build() { - Text(this.time) - .fontSize($r('app.float.time_font')) - .fontColor(Color.White) - .lineHeight($r('app.float.time_text_line')) - .width($r('app.float.time_text_width')) - } -} \ No newline at end of file diff --git a/features/videoPlayer/src/main/module.json5 b/features/videoPlayer/src/main/module.json5 deleted file mode 100644 index e663fce..0000000 --- a/features/videoPlayer/src/main/module.json5 +++ /dev/null @@ -1,11 +0,0 @@ -{ - "module": { - "name": "videoPlayer", - "type": "har", - "deviceTypes": [ - "phone", - "tablet", - "2in1" - ] - } -} \ No newline at end of file diff --git a/features/videoPlayer/src/main/resources/base/element/color.json b/features/videoPlayer/src/main/resources/base/element/color.json deleted file mode 100644 index 452a7ce..0000000 --- a/features/videoPlayer/src/main/resources/base/element/color.json +++ /dev/null @@ -1,16 +0,0 @@ -{ - "color": [ - { - "name": "font_selected", - "value": "#ED6F21" - }, - { - "name": "episode_row_background", - "value": "#33FFFFFF" - }, - { - "name": "selected_color", - "value": "#ED6F21" - } - ] -} \ No newline at end of file diff --git a/features/videoPlayer/src/main/resources/base/element/float.json b/features/videoPlayer/src/main/resources/base/element/float.json deleted file mode 100644 index 5e0a4c4..0000000 --- a/features/videoPlayer/src/main/resources/base/element/float.json +++ /dev/null @@ -1,240 +0,0 @@ -{ - "float": [ - { - "name": "time_font", - "value": "9fp" - }, - { - "name": "time_text_line", - "value": "12vp" - }, - { - "name": "time_text_width", - "value": "38vp" - }, - { - "name": "current_time_left", - "value": "36vp" - }, - { - "name": "current_time_right", - "value": "2vp" - }, - { - "name": "total_time_left", - "value": "2vp" - }, - { - "name": "total_time_right", - "value": "36vp" - }, - { - "name": "time_row_height", - "value": "40vp" - }, - { - "name": "icon_size", - "value": "24vp" - }, - { - "name": "icon_margin", - "value": "24vp" - }, - { - "name": "icon_row_top", - "value": "14vp" - }, - { - "name": "icon_row_bottom_sm", - "value": "15vp" - }, - { - "name": "icon_row_bottom", - "value": "24vp" - }, - { - "name": "button_row_top_sm", - "value": "4vp" - }, - { - "name": "button_row_top", - "value": "16vp" - }, - { - "name": "button_row_bottom_sm", - "value": "19vp" - }, - { - "name": "button_row_bottom", - "value": "28vp" - }, - { - "name": "icon_button_row_height", - "value": "60vp" - }, - { - "name": "back_position_x", - "value": "36vp" - }, - { - "name": "back_position_y", - "value": "36vp" - }, - { - "name": "title_selected_font", - "value": "24fp" - }, - { - "name": "title_selected_line", - "value": "33vp" - }, - { - "name": "title_selected_width", - "value": "48vp" - }, - { - "name": "title_selected_margin", - "value": "24vp" - }, - { - "name": "title_font", - "value": "18fp" - }, - { - "name": "title_line", - "value": "25vp" - }, - { - "name": "title_width", - "value": "58vp" - }, - { - "name": "title_row_top", - "value": "25vp" - }, - { - "name": "title_row_bottom", - "value": "12vp" - }, - { - "name": "title_row_height", - "value": "56vp" - }, - { - "name": "playing_size", - "value": "10vp" - }, - { - "name": "playing_position_x", - "value": "8vp" - }, - { - "name": "playing_position_y", - "value": "36vp" - }, - { - "name": "episode_row_radius", - "value": "8vp" - }, - { - "name": "episode_row_height", - "value": "54vp" - }, - { - "name": "episode_list_bottom", - "value": "12vp" - }, - { - "name": "episode_list_lanes_space", - "value": "12vp" - }, - { - "name": "episode_col_padding", - "value": "24vp" - }, - { - "name": "playing_position_x_side_lg", - "value": "8vp" - }, - { - "name": "playing_position_x_side", - "value": "6vp" - }, - { - "name": "playing_position_y_side_lg", - "value": "36vp" - }, - { - "name": "playing_position_y_side", - "value": "28vp" - }, - { - "name": "episode_row_width_lg", - "value": "69vp" - }, - { - "name": "episode_row_width_other", - "value": "55vp" - }, - { - "name": "episode_row_height_lg", - "value": "54vp" - }, - { - "name": "episode_row_height_other", - "value": "44vp" - }, - { - "name": "side_text_font", - "value": "16fp" - }, - { - "name": "side_text_line", - "value": "32vp" - }, - { - "name": "button_text_font", - "value": "12fp" - }, - { - "name": "button_text_margin", - "value": "24vp" - }, - { - "name": "side_title_width_1", - "value": "65vp" - }, - { - "name": "side_title_margin", - "value": "36vp" - }, - { - "name": "side_title_width_2", - "value": "56vp" - }, - { - "name": "side_row_margin_sm", - "value": "8vp" - }, - { - "name": "side_row_margin", - "value": "12vp" - }, - { - "name": "side_col_width", - "value": "360vp" - }, - { - "name": "lanes_item_space", - "value": "12vp" - }, - { - "name": "episodes_sidebar_padding_bottom", - "value": "12vp" - }, - { - "name": "episodes_sidebar_padding_left_right", - "value": "24vp" - } - ] -} \ No newline at end of file diff --git a/features/videoPlayer/src/main/resources/base/element/string.json b/features/videoPlayer/src/main/resources/base/element/string.json deleted file mode 100644 index e876602..0000000 --- a/features/videoPlayer/src/main/resources/base/element/string.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "string": [ - { - "name": "selections", - "value": "选集" - }, - { - "name": "just", - "value": "只看TA" - }, - { - "name": "super", - "value": "超清" - }, - { - "name": "speed", - "value": "超清" - } - ] -} \ No newline at end of file diff --git a/features/videoPlayer/src/main/resources/base/media/ic_public_back.svg b/features/videoPlayer/src/main/resources/base/media/ic_public_back.svg deleted file mode 100644 index 5d8827c..0000000 --- a/features/videoPlayer/src/main/resources/base/media/ic_public_back.svg +++ /dev/null @@ -1,18 +0,0 @@ - - - Public/ic_public_back - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/features/videoPlayer/src/main/resources/base/media/video_playing.svg b/features/videoPlayer/src/main/resources/base/media/video_playing.svg deleted file mode 100644 index 0f00e3f..0000000 --- a/features/videoPlayer/src/main/resources/base/media/video_playing.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - 形状结合 - - - - - - - - - - \ No newline at end of file diff --git a/features/videoPlayer/src/main/resources/en_US/element/string.json b/features/videoPlayer/src/main/resources/en_US/element/string.json deleted file mode 100644 index faa5917..0000000 --- a/features/videoPlayer/src/main/resources/en_US/element/string.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "string": [ - { - "name": "selections", - "value": "select" - }, - { - "name": "just", - "value": "look it" - }, - { - "name": "super", - "value": "super" - }, - { - "name": "speed", - "value": "speed" - } - ] -} \ No newline at end of file diff --git a/features/videoPlayer/src/main/resources/zh_CN/element/string.json b/features/videoPlayer/src/main/resources/zh_CN/element/string.json deleted file mode 100644 index 3806117..0000000 --- a/features/videoPlayer/src/main/resources/zh_CN/element/string.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "string": [ - { - "name": "selections", - "value": "选集" - }, - { - "name": "just", - "value": "只看TA" - }, - { - "name": "super", - "value": "超清" - }, - { - "name": "speed", - "value": "倍速" - } - ] -} \ No newline at end of file diff --git a/products/phone/oh-package.json5 b/products/phone/oh-package.json5 index bb69c54..9981d61 100644 --- a/products/phone/oh-package.json5 +++ b/products/phone/oh-package.json5 @@ -10,7 +10,6 @@ "dependencies": { "@ohos/commons": "file:../../commons/base", "@ohos/videoDetail": "file:../../features/videoDetail", - "@ohos/home": "file:../../features/home", - "@ohos/videoPlayer": "file:../../features/videoPlayer" + "@ohos/home": "file:../../features/home" } } \ No newline at end of file diff --git a/products/phone/src/main/ets/entryability/EntryAbility.ets b/products/phone/src/main/ets/entryability/EntryAbility.ets index 14a280f..259b1e4 100644 --- a/products/phone/src/main/ets/entryability/EntryAbility.ets +++ b/products/phone/src/main/ets/entryability/EntryAbility.ets @@ -14,32 +14,18 @@ */ import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit'; -import { display, window } from '@kit.ArkUI'; +import { window } from '@kit.ArkUI'; import { hilog } from '@kit.PerformanceAnalysisKit'; -import { BreakpointConstants, CommonConstants, WindowUtil } from '@ohos/commons'; +import { WindowUtil } from '@ohos/commons'; export default class EntryAbility extends UIAbility { private windowObj?: window.Window; - private updateHeightBp(): void { - if (this.windowObj === undefined) { - return; - } - let mainWindow: window.WindowProperties = this.windowObj.getWindowProperties(); - let windowHeight: number = mainWindow.windowRect.height; - let windowWidth: number = mainWindow.windowRect.width; - let windowWidthVp = windowWidth / display.getDefaultDisplaySync().densityPixels; - let windowHeightVp = windowHeight / display.getDefaultDisplaySync().densityPixels; - let heightBp: string = ''; - let aspectRatio: number = windowHeightVp / windowWidthVp; - if (aspectRatio < 0.8) { - heightBp = 'sm'; - } else if (aspectRatio >= 0.8 && aspectRatio < 1.2) { - heightBp = 'md'; - } else { - heightBp = 'lg'; - } - AppStorage.setOrCreate('currentHeightBreakpoint', heightBp); - } + private windowUtil?: WindowUtil = WindowUtil.getInstance(); + private onWindowSizeChange: (windowSize: window.Size) => void = (windowSize: window.Size) => { + this.windowUtil!.updateHeightBp(); + this.windowUtil!.updateWidthBp(); + AppStorage.setOrCreate('windowWidth', windowSize.width); + }; onCreate(want: Want, launchParam: AbilityConstant.LaunchParam) { hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate'); @@ -53,21 +39,16 @@ export default class EntryAbility extends UIAbility { // Main window is created, set main page for this ability hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate'); + this.windowUtil!.setWindowStage(windowStage); + // this.windowUtil!.setMainWindowPortrait(); windowStage.getMainWindow().then((data: window.Window) => { this.windowObj = data; - this.updateWidthBp(); - this.updateHeightBp(); - this.windowObj.on('windowSizeChange', (windowSize: window.Size) => { - this.updateWidthBp(); - this.updateHeightBp(); - }) + this.windowUtil!.updateWidthBp(); + this.windowUtil!.updateHeightBp(); + AppStorage.setOrCreate('windowWidth', data.getWindowProperties().windowRect.width); + this.windowObj.on('windowSizeChange', this.onWindowSizeChange); }) - let windowUtil: WindowUtil | undefined = WindowUtil.getInstance(); - if (windowUtil !== undefined) { - windowUtil.setWindowStage(windowStage); - windowUtil.setMainWindowPortrait(); - } windowStage.loadContent('pages/Index', (err, data) => { if (err.code) { hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? ''); @@ -77,35 +58,6 @@ export default class EntryAbility extends UIAbility { }); } - private updateWidthBp(): void { - if (this.windowObj === undefined) { - return; - } - let mainWindow: window.WindowProperties = this.windowObj.getWindowProperties(); - let windowWidth: number = mainWindow.windowRect.width; - let windowWidthVp = windowWidth / display.getDefaultDisplaySync().densityPixels; - let widthBp: string = ''; - let videoGridColumn: string = CommonConstants.VIDEO_GRID_COLUMNS[0]; - if (windowWidthVp < 320) { - widthBp = 'xs'; - videoGridColumn = CommonConstants.VIDEO_GRID_COLUMNS[0]; - } else if (windowWidthVp >= 320 && windowWidthVp < 600) { - widthBp = 'sm'; - videoGridColumn = CommonConstants.VIDEO_GRID_COLUMNS[0]; - } else if (windowWidthVp >= 600 && windowWidthVp < 840) { - widthBp = 'md'; - videoGridColumn = CommonConstants.VIDEO_GRID_COLUMNS[1]; - } else if (windowWidthVp >= 840 && windowWidthVp < 1440) { - widthBp = 'lg'; - videoGridColumn = CommonConstants.VIDEO_GRID_COLUMNS[2]; - } else { - widthBp = 'xl'; - videoGridColumn = CommonConstants.VIDEO_GRID_COLUMNS[2]; - } - AppStorage.setOrCreate('currentWidthBreakpoint', widthBp); - AppStorage.setOrCreate('videoGridColumn', videoGridColumn); - } - onWindowStageDestroy() { // Main window is destroyed, release UI related resources hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageDestroy'); diff --git a/products/phone/src/main/ets/pages/Index.ets b/products/phone/src/main/ets/pages/Index.ets index a54c27b..4bf30d5 100644 --- a/products/phone/src/main/ets/pages/Index.ets +++ b/products/phone/src/main/ets/pages/Index.ets @@ -14,29 +14,23 @@ */ import { Home } from '@ohos/home'; -import { CommonConstants, WindowUtil } from '@ohos/commons'; +import { CommonConstants, VideoNavPathStack, WindowUtil } from '@ohos/commons'; import { VideoDetail } from '@ohos/videoDetail/src/main/ets/view/VideoDetail'; -import { VideoPlayer } from '@ohos/videoPlayer/Index'; @Entry @Component struct Index { - @Provide('pageInfo') pageInfo: NavPathStack = new NavPathStack(); + @Provide('pageInfo') pageInfo: VideoNavPathStack = new VideoNavPathStack(); aboutToDisappear(): void { let windowUtil: WindowUtil | undefined = WindowUtil.getInstance(); - if (windowUtil === undefined) { - return; - } - windowUtil.offWindowSizeChange(); + windowUtil!.offWindowSizeChange(); } @Builder PageMap(name: string) { - if (name === 'VideoDetail') { + if (name === CommonConstants.PAGE_NAMES[1]) { VideoDetail() - } else if (name === 'VideoPlayer') { - VideoPlayer() } } -- Gitee From 4b435cf14daa9c51c441fc908c6994a2050d4bff Mon Sep 17 00:00:00 2001 From: lon9 <815882449@qq.com> Date: Wed, 13 Nov 2024 11:56:20 +0800 Subject: [PATCH 2/3] =?UTF-8?q?=E4=B8=80=E5=A4=9A=E9=95=BF=E8=A7=86?= =?UTF-8?q?=E9=A2=91=E9=85=8D=E7=BD=AE=E5=88=A0=E9=99=A4=E5=85=A8=E5=B1=8F?= =?UTF-8?q?=E6=92=AD=E6=94=BE=E9=A1=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- build-profile.json5 | 12 ------------ 1 file changed, 12 deletions(-) diff --git a/build-profile.json5 b/build-profile.json5 index d3c6c97..822b973 100644 --- a/build-profile.json5 +++ b/build-profile.json5 @@ -67,18 +67,6 @@ } ] }, - { - "name": "videoPlayer", - "srcPath": "./features/videoPlayer", - "targets": [ - { - "name": "default", - "applyToProducts": [ - "default" - ] - } - ] - }, { "name": "base", "srcPath": "./commons/base", -- Gitee From 645f2e285fef88afc89250ff407902ee1734cf98 Mon Sep 17 00:00:00 2001 From: lon9 <815882449@qq.com> Date: Wed, 13 Nov 2024 14:19:04 +0800 Subject: [PATCH 3/3] =?UTF-8?q?=E4=B8=80=E5=A4=9A=E9=95=BF=E8=A7=86?= =?UTF-8?q?=E9=A2=91=E4=BF=AE=E5=A4=8D=E7=8A=B6=E6=80=81=E6=A0=8F=E9=9A=90?= =?UTF-8?q?=E8=97=8Fbug?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- features/videoDetail/src/main/ets/view/VideoDetail.ets | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/features/videoDetail/src/main/ets/view/VideoDetail.ets b/features/videoDetail/src/main/ets/view/VideoDetail.ets index 2e79fd1..dfe47e4 100644 --- a/features/videoDetail/src/main/ets/view/VideoDetail.ets +++ b/features/videoDetail/src/main/ets/view/VideoDetail.ets @@ -13,6 +13,7 @@ * limitations under the License. */ +import { deviceInfo } from '@kit.BasicServicesKit'; import { display, window } from '@kit.ArkUI'; import { AvPlayerUtil, DeviceScreen, Logger, WindowUtil, BreakpointConstants, CommonConstants, DisplayUtil, VideoNavPathStack } from '@ohos/commons'; @@ -90,6 +91,13 @@ export struct VideoDetail { BreakpointConstants.BREAKPOINT_SM && !this.isFullScreen) { this.windowUtil?.setMainWindowOrientation(window.Orientation.PORTRAIT); } + if (deviceInfo.deviceType !== CommonConstants.DEVICE_TYPE) { + if (this.isFullScreen) { + this.windowUtil!.disableWindowSystemBar(); + } else { + this.windowUtil!.enableWindowSystemBar(); + } + } } aboutToAppear() { -- Gitee