diff --git a/build-profile.json5 b/build-profile.json5 index d3c6c971b25fc7cec73a4d3802bbe1d178ac2d17..822b9737ebba8cbb0917779d8aee251ef502aad9 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", diff --git a/commons/base/Index.ets b/commons/base/Index.ets index 713b23a908d354e02917d79ca787a3ea029c565e..07abac6905bccb771f74e699693e36c9969f09d7 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 d66c4fd2c6974cb486795e728075276c8b7bb498..8e29116ccee0f65c4eb8688da37fb0c3b72b1dab 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 409f2a258a4ffb283f7e2364dbe7fa3a3611b020..27f9347280b528070eb47a9a99365ea1fa7509e7 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 2ac2e1aca49c90888864b3a12fbdb2ecc79a1d3d..6ceb4d36cb3f8abc17bf981768a05a6192e241e8 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 7c88f825535aed2c20ed6aaa2dc082be6021db52..775149c6220a6d5efde57f761c33738e4916b390 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 1d4de5f4c1fff2ea24425e8f3e7fece0a6714323..4b840f3c1ff0a9b91aa130c3bd3e1f6812310921 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 74ecb3a959291293f53cd4ff6d5905f56e536c33..72d55123c12d19d20d74b49090f2270d4c66886d 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 e29c1e836a0d0b804ee28219d1de868b7e82c007..430cf3c5777bd8d049f5ca2691c1d5d58d844512 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 c64030689f9d5f5207ec86ff762ad0ce17cc4486..83aa4737cf251b492a857c51995db68ae43d97f2 100644 --- a/features/home/src/main/ets/view/HomeContent.ets +++ b/features/home/src/main/ets/view/HomeContent.ets @@ -15,7 +15,7 @@ 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'; @@ -33,17 +33,11 @@ export struct HomeContent { 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(); + if (deviceInfo.deviceType !== CommonConstants.DEVICE_TYPE) { + this.windowUtil!.setFullScreen(); } } - - build() { Column() { BannerView() @@ -74,6 +68,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 fe929f4f876063b3af55742592b7384f4d79ec9d..a749b1fb00ba0e5b3c85ccab8c00b08365fa1f4e 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 110cb7bc733001e5ccfd91bff43d80f7210c0f50..e7ad7c7de4849ecda49ca2936d12228cd7f29dc4 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 02a15eca12d474bfda008a30ccbc643ea52894f0..4a21ce383a3510683938c814241ca3bb89b027ba 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 a0a34e813038349753448a1ba55655a964c81068..2f93b9d5e4cb67615a4d686e0ed73efba0ee28b3 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 d49403228b1682d3eb16ed46e7f25e708b34c1fb..30e7b95b35dc1e7ffbdc271f7ca34f9316686ad5 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 c4c5c200612a4f29a65d935393ab4bf61053b86b..2816c88d8885bfbc94cb1df183d71010ae8d76ec 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 6de709bd9ad3a887f6ddea6a4e1d2d45e64d2982..89dd5005d9cee2044fe63e19928ddfa2549eca17 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 63ea82459bcf4e7636b500a7e3a1d30146eac4da..531116d10911d096aac4664d967b879af33c166b 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 8bebf829a9531c439e9bc35d502acf986210969f..762078e3e0781817851e291176094e518b004983 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 298e5233ea9201bbbd52593c7406031f93f566ae..c30be49d8eba1ff9309a4eb0f012c9a5b2ed51a7 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 c26dd889db4cad7a88bfe58b0e7dd9de30cd3812..db96143bc6491d88f11156bf3458dc0d5fa77fb1 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 d32cce695110e82ce4948772837052d999bc6f4b..68823b17ba97d6498a3078f115b897a007ef971e 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 ed69bed2b3fa02386664ce491744530f89171946..754806555edadc8823597bf6ac30ffe5fc662210 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 d6e9e0ea2c64d2696113b5b22760505dfa54fe0a..dfe47e4da3896d0b5245798b5f8835b658895805 100644 --- a/features/videoDetail/src/main/ets/view/VideoDetail.ets +++ b/features/videoDetail/src/main/ets/view/VideoDetail.ets @@ -13,9 +13,10 @@ * limitations under the License. */ -import { Callback } from '@kit.BasicServicesKit'; +import { deviceInfo } 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 +25,100 @@ 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); } - this.isHalfFolded = false; - 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); + } + } + }; + 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); } - }; + if (deviceInfo.deviceType !== CommonConstants.DEVICE_TYPE) { + if (this.isFullScreen) { + this.windowUtil!.disableWindowSystemBar(); + } else { + this.windowUtil!.enableWindowSystemBar(); + } + } + } 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 +162,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 +177,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 +213,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 fc24a9ab12d02e02bd58f1145e75971a76c03afa..4115eca1bfd7e99866d4279513fa88670b451021 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 0000000000000000000000000000000000000000..d606aa38751c57cdefada28131413449b46ba680 --- /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 a50dc3bda5d72538d2c9916a62f0fa40cdad5808..ab978fc369b3773bbacdc41391fcaa76fadcdb01 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 37fb773d96ef004f3d887d301313a69631f0d1f6..70ccc262ea9edc7d10d76cf7cb7572b04c184bb8 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 cd5bc5070b83a843a7cff014d2a01b8e826523c6..4c8992be261acaf1a4746a9af908ade8dee5ddee 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 e4f56b0f8c9908980479ca928c968d1aa78d552e..c4bfaab927bcd453df30cbef888726e5c697d97e 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 cd5bc5070b83a843a7cff014d2a01b8e826523c6..9ad5b2e94dfbecd69aaaacb3646341132b5db4e5 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 fc4df002478ca6153389e8dadee4b3db4047fc81..0000000000000000000000000000000000000000 --- 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 3167e54d1ff3a0aaa0cdcf4319789de8e3f3c350..0000000000000000000000000000000000000000 --- 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 42187071482d292588ad40babeda74f7b8d97a23..0000000000000000000000000000000000000000 --- 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 56aa2ad862914a6254490c2548bc9832d26ed7a6..0000000000000000000000000000000000000000 --- 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 dd473cfcf547c6da2e53a259b3c068616fdbcda0..0000000000000000000000000000000000000000 --- 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 e663fced613867731b96b8a96ce9dd8384481478..0000000000000000000000000000000000000000 --- 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 452a7ce82ef4f933fc93bf4f32dd47b251b2a1de..0000000000000000000000000000000000000000 --- 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 5e0a4c48a1394c9561e99a676bd956b2eefc051e..0000000000000000000000000000000000000000 --- 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 e876602fc18312e4f8642f280b9ab143e6c0283c..0000000000000000000000000000000000000000 --- 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 5d8827cf7050dbb91a3f2fc6dae78538909975e8..0000000000000000000000000000000000000000 --- 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 0f00e3f55d20bf92ffb203ba13f29058e2d9396d..0000000000000000000000000000000000000000 --- 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 faa59170f9fee965598cea06d8ecc7ea2fa6b490..0000000000000000000000000000000000000000 --- 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 3806117e3b7874313c74cef279479c19d81694eb..0000000000000000000000000000000000000000 --- 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 bb69c549550b68bf66160aabd70e9ea66d3535fa..9981d612d2a68c1f4edd3375ccbae53f71bd7421 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 9e59bc806d96d210107be14298c624f7202edc1f..259b1e4173db2772e300466d108835f5f4bcbc29 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,23 +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.windowUtil!.updateWidthBp(); + this.windowUtil!.updateHeightBp(); AppStorage.setOrCreate('windowWidth', data.getWindowProperties().windowRect.width); - this.windowObj.on('windowSizeChange', (windowSize: window.Size) => { - this.updateWidthBp(); - this.updateHeightBp(); - AppStorage.setOrCreate('windowWidth', windowSize.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) ?? ''); @@ -79,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 a54c27b6903600e8364b67065b0d0e953e559609..4bf30d5a59b940b86c71f9acda2c74ee1afb5909 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() } }