diff --git a/commons/base/src/main/ets/utils/BreakpointType.ets b/commons/base/src/main/ets/utils/BreakpointType.ets index 72ea97ff2748896538d443fb821a7d861087c660..c36c54dc9e526efdd8b7dade96c8b00769d7361b 100644 --- a/commons/base/src/main/ets/utils/BreakpointType.ets +++ b/commons/base/src/main/ets/utils/BreakpointType.ets @@ -19,7 +19,7 @@ import { BreakpointConstants } from '../constants/BreakpointConstants'; -// [Start breakpointtype] +// [Start break_point_type] export class BreakpointType { sm: T; md: T; @@ -42,4 +42,4 @@ export class BreakpointType { } } } -// [End breakpointtype] \ No newline at end of file +// [End break_point_type] \ No newline at end of file diff --git a/commons/base/src/main/ets/utils/DisplayUtil.ets b/commons/base/src/main/ets/utils/DisplayUtil.ets index f7085d1b86271f04392efce671af0a895831e22a..c87a3e83f4c479d23d43c98c7811726e15d59e58 100644 --- a/commons/base/src/main/ets/utils/DisplayUtil.ets +++ b/commons/base/src/main/ets/utils/DisplayUtil.ets @@ -15,6 +15,7 @@ import { display } from '@kit.ArkUI'; +// [Start display_util] const uiContext: UIContext | undefined = AppStorage.get('uiContext'); export class DisplayUtil { @@ -29,4 +30,5 @@ export class DisplayUtil { } } } -} \ No newline at end of file +} +// [End display_util] \ No newline at end of file diff --git a/features/home/src/main/ets/view/BannerView.ets b/features/home/src/main/ets/view/BannerView.ets index 2de8505081585953aa3753f7e32577d0e359b40e..f1ad4cd7b7273b03efa9359f42d5080496c9dab3 100644 --- a/features/home/src/main/ets/view/BannerView.ets +++ b/features/home/src/main/ets/view/BannerView.ets @@ -61,23 +61,19 @@ export struct BannerView { Column() { // Banner layout. Row() { - // [Start bannerView] // [Start swiper1] Swiper() { - // [StartExclude bannerView] LazyForEach(this.bannerDataSource, (item: Banner, index: number) => { - // [StartExclude swiper1] Stack() { - // [EndExclude swiper1] + // [StartExclude swiper1] Image(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM ? item.getBannerImg().getImgSrcSm() : item.getBannerImg().getImgSrc()) .objectFit(ImageFit.Fill) .borderRadius($r('app.float.banner_img_border_radius')) - .height(CommonConstants.FULL_PERCENT) - .width(CommonConstants.FULL_PERCENT) + .height('100%') + .width('100%') .focusable(true) .zIndex(1) - // [StartExclude swiper1] Column() { Text(item.getDescription().getIsLeftCenter().getValue(this.currentWidthBreakpoint) ? `${item.getDescription().getDescription()[0]}${item.getDescription().getDescription()[1]}` : @@ -86,7 +82,7 @@ export struct BannerView { .fontWeight(item.getDescription().getFontWeight()[0]) .lineHeight(item.getDescription().getLineHeight().getValue(this.currentWidthBreakpoint)[0]) .fontColor(Color.White) - .letterSpacing(HomeConstants.BANNER_TEXT_LETTER_SPACES[2]) + .letterSpacing('1vp') .maxLines(1) Text(item.getDescription().getDescription()[1]) @@ -94,7 +90,7 @@ export struct BannerView { .fontWeight(item.getDescription().getFontWeight()[0]) .lineHeight(item.getDescription().getLineHeight().getValue(this.currentWidthBreakpoint)[0]) .fontColor(Color.White) - .letterSpacing(HomeConstants.BANNER_TEXT_LETTER_SPACES[2]) + .letterSpacing('1vp') .maxLines(1) .visibility(item.getDescription().getIsLeftCenter().getValue(this.currentWidthBreakpoint) ? Visibility.None : Visibility.Visible) @@ -120,12 +116,13 @@ export struct BannerView { HorizontalAlign.Center : HorizontalAlign.Start) .justifyContent(!item.getDescription().getIsTopCenter().getValue(this.currentWidthBreakpoint) ? FlexAlign.Start : FlexAlign.Center) - .height(CommonConstants.FULL_PERCENT) - .width(CommonConstants.FULL_PERCENT) + .height('100%') + .width('100%') .zIndex(2) + // [EndExclude swiper1] } .height(item.getBannerImg().getHeight().getValue(this.currentWidthBreakpoint)) - .width(CommonConstants.FULL_PERCENT) + .width('100%') // The width and height vary with the container assembly and the aspect ratio remains unchanged. .aspectRatio(new BreakpointType(HomeConstants.BANNER_RATIOS[0], HomeConstants.BANNER_RATIOS[1], HomeConstants.BANNER_RATIOS[2]).getValue(this.currentWidthBreakpoint)) @@ -137,11 +134,8 @@ export struct BannerView { left: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM ? $r('app.float.banner_padding_sm') : 0, right: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM ? $r('app.float.banner_padding_sm') : 0 }) - // [EndExclude swiper1] }, (item: Banner, index: number) => index + JSON.stringify(item)) - // [EndExclude bannerView] } - // [End swiper1] .displayCount(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM ? 1 : HomeConstants.TWO) // Interval between banner images .itemSpace(HomeConstants.SWIPER_ITEM_SPACE) @@ -151,7 +145,7 @@ export struct BannerView { .nextMargin(new BreakpointType($r('app.float.swiper_prev_next_margin_sm'), $r('app.float.swiper_prev_next_margin_md'), $r('app.float.swiper_prev_next_margin_lg')) .getValue(this.currentWidthBreakpoint)) - // [End bannerView] + // [End swiper1] // Setting the navigation point Style of the swiper. .indicator(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM ? Indicator.dot() .itemWidth($r('app.float.swiper_item_size')) @@ -163,30 +157,30 @@ export struct BannerView { .selectedColor(Color.White) : false ) .loop(true) - .width(CommonConstants.FULL_PERCENT) + .width('100%') .visibility((this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG) && (this.currentTopIndex === 1) ? Visibility.None : Visibility.Visible) .effectMode(EdgeEffect.None) // The sizes of the front and rear banners on the MD and LG devices are different. .index(2) - // [Start swiper1] .tabIndex(getTabIndex(HomeConstants.DIRECTION_LIST[2])) - // [End swiper1] // Switch the tab to switch the banner display effect. - Row({ space: HomeConstants.BANNER_ROW_SPACE }) { + + // [Start home_constants] + Row({ space: '12vp' }) { BannerText({ banner: this.bannerImgList[2], index: 0 }) - .layoutWeight(CommonConstants.FOUR) - .height(CommonConstants.FULL_PERCENT) + .layoutWeight(4) + .height('100%') BannerText({ banner: this.bannerImgList[1], index: 1 }) - .layoutWeight(CommonConstants.FOUR) - .height(CommonConstants.FULL_PERCENT) + .layoutWeight(4) + .height('100%') Column() { BannerText({ @@ -203,18 +197,19 @@ export struct BannerView { .margin({ top: $r('app.float.new_banner_3_margin') }) .layoutWeight(1) } - .layoutWeight(CommonConstants.THREE) + .layoutWeight(3) } .height(this.getBannerNewHeight(this.windowWidth)) - .width(CommonConstants.FULL_PERCENT) - .visibility((this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG) && + .width('100%') + .visibility((this.currentWidthBreakpoint === 'lg') && (this.currentTopIndex === 1) ? Visibility.Visible : Visibility.None) .padding({ left: $r('app.float.banner_padding_sm'), right: $r('app.float.banner_padding_sm') }) + // [End home_constants] } - .width(CommonConstants.FULL_PERCENT) + .width('100%') .visibility(this.currentTopIndex === 2 ? Visibility.None : Visibility.Visible) Row() { @@ -231,7 +226,7 @@ export struct BannerView { $r('app.float.immersive_text_1_line_md'), $r('app.float.immersive_text_1_line_lg')) .getValue(this.currentWidthBreakpoint)) .fontColor(Color.White) - .letterSpacing(HomeConstants.BANNER_TEXT_LETTER_SPACES[2]) + .letterSpacing('1vp') .maxLines(1) Text(this.bannerImgList[2].getDescription().getDescription()[1]) @@ -243,7 +238,7 @@ export struct BannerView { $r('app.float.immersive_text_1_line_md'), $r('app.float.immersive_text_1_line_lg')) .getValue(this.currentWidthBreakpoint)) .fontColor(Color.White) - .letterSpacing(HomeConstants.BANNER_TEXT_LETTER_SPACES[2]) + .letterSpacing('1vp') .maxLines(1) .visibility(this.bannerImgList[2].getDescription().getIsLeftCenter().getValue(this.currentWidthBreakpoint) ? Visibility.None : Visibility.Visible) @@ -260,7 +255,7 @@ export struct BannerView { .margin({ top: this.bannerImgList[2].getDescription().getTopPosition().getValue(this.currentWidthBreakpoint)[1] }) - .letterSpacing(HomeConstants.BANNER_TEXT_LETTER_SPACES[1]) + .letterSpacing('3vp') .maxLines(1) } .padding({ @@ -271,8 +266,8 @@ export struct BannerView { $r('app.float.immersive_col_padding_top_md'), $r('app.float.immersive_col_padding_top_lg')) .getValue(this.currentWidthBreakpoint) }) - .height(CommonConstants.FULL_PERCENT) - .width(CommonConstants.FULL_PERCENT) + .height('100%') + .width('100%') .alignItems(new BreakpointType(true, false, false).getValue(this.currentWidthBreakpoint) ? HorizontalAlign.Center : HorizontalAlign.Start) .justifyContent(!this.bannerImgList[2].getDescription().getIsTopCenter().getValue(this.currentWidthBreakpoint) ? @@ -287,26 +282,26 @@ export struct BannerView { }) .height(new BreakpointType($r('app.float.immersive_banner_height_sm'), $r('app.float.immersive_banner_height_md'), $r('app.float.immersive_banner_height_lg')).getValue(this.currentWidthBreakpoint)) - .width(CommonConstants.FULL_PERCENT) + .width('100%') .visibility(this.currentTopIndex === 2 ? Visibility.Visible : Visibility.None) } - .width(CommonConstants.FULL_PERCENT) + .width('100%') .padding({ - left: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG && this.currentTopIndex === 2 ? + left: this.currentWidthBreakpoint === 'vp' && this.currentTopIndex === 2 ? $r('app.float.side_bar_width') : 0 }) } getBannerNewHeight(windowWidth: number): string { // Obtain the window width and subtract the blank parts on both sides. - let result: number = this.getUIContext().px2vp(windowWidth) - new BreakpointType(HomeConstants.VIDEO_GRID_MARGIN[0], - HomeConstants.VIDEO_GRID_MARGIN[1], HomeConstants.VIDEO_GRID_MARGIN[2]).getValue(this.currentWidthBreakpoint) - - HomeConstants.LG_SIDEBAR_WIDTH; + let result: number = px2vp(windowWidth) - new BreakpointType(32, + 48, 64).getValue(this.currentWidthBreakpoint) - + 96; // Calculate the width of a single image based on the percent. - result = (result - HomeConstants.VIDEO_GRID_ITEM_SPACE * HomeConstants.TWO) * CommonConstants.FOUR / - HomeConstants.ELEVEN; + result = (result - 12 * 2) * 4 / + 11; // Calculate the total height of the grid layout. - return result / HomeConstants.NEW_BANNER_ASPECT_RATIO + HomeConstants.HEIGHT_UNIT; + return result / 1.5 + 'vp'; } } @@ -318,14 +313,12 @@ struct BannerText { build() { Stack() { - // [Start fill] Image(((this.index === 0) || (this.index === 1)) ? this.banner.getBannerImg().getImgSrcSm() : this.banner.getBannerImg().getImgSrc()) - .width(CommonConstants.FULL_PERCENT) - .height(CommonConstants.FULL_PERCENT) + .width('100%') + .height('100%') .objectFit(ImageFit.Fill) .hoverEffect(HoverEffect.Scale) - // [Start fill] .borderRadius($r('app.float.banner_img_border_radius')) Column() { @@ -336,14 +329,14 @@ struct BannerText { .fontWeight(this.banner.getDescription().getFontWeight()[0]) .lineHeight(this.banner.getDescription().getLineHeight().getValue(this.currentWidthBreakpoint)[0]) .fontColor(Color.White) - .letterSpacing(HomeConstants.BANNER_TEXT_LETTER_SPACES[2]) + .letterSpacing('1vp') .maxLines(1) Text(this.banner.getDescription().getDescription()[1]) .fontSize(this.banner.getDescription().getFontSize().getValue(this.currentWidthBreakpoint)[0]) .fontWeight(this.banner.getDescription().getFontWeight()[0]) .lineHeight(this.banner.getDescription().getLineHeight().getValue(this.currentWidthBreakpoint)[0]) .fontColor(Color.White) - .letterSpacing(HomeConstants.BANNER_TEXT_LETTER_SPACES[2]) + .letterSpacing('1vp') .maxLines(1) .visibility(this.banner.getDescription().getIsLeftCenter().getValue(this.currentWidthBreakpoint) ? Visibility.None : Visibility.Visible) @@ -367,8 +360,8 @@ struct BannerText { HorizontalAlign.Center : HorizontalAlign.Start) .justifyContent(!this.banner.getDescription().getIsTopCenter().getValue(this.currentWidthBreakpoint) ? FlexAlign.Start : FlexAlign.Center) - .width(CommonConstants.FULL_PERCENT) - .height(CommonConstants.FULL_PERCENT) + .width('100%') + .height('100%') } } } \ No newline at end of file diff --git a/features/home/src/main/ets/view/DailyVideo.ets b/features/home/src/main/ets/view/DailyVideo.ets index 1cc3275835a58b4f649047a77a9fbce5fec4df5e..cd0cd8b68ed24f1093b4e3f8255d341476edf488 100644 --- a/features/home/src/main/ets/view/DailyVideo.ets +++ b/features/home/src/main/ets/view/DailyVideo.ets @@ -29,6 +29,7 @@ export struct DailyVideo { private mainDailyVideoImg: VideoImage = new VideoImgViewModel().getMainDailyVideoImg(); build() { + // [Start sub_title_component] Column() { SubtitleComponent({ title: HomeConstants.HOME_SUB_TITLES[1] }) @@ -49,6 +50,7 @@ export struct DailyVideo { } }) { Column() { + // [StartExclude sub_title_component] Stack({ alignContent: Alignment.Bottom }) { Image(this.mainDailyVideoImg.getImgSrc() ? this.mainDailyVideoImg.getImgSrc() : '') .focusable(true) @@ -103,6 +105,7 @@ export struct DailyVideo { .layoutWeight(5) Row() { + // [Start daily_small_video] Image($r('app.media.daily_small_video')) .height(new BreakpointType($r('app.float.small_daily_image_height_sm'), $r('app.float.small_daily_image_height_md'), $r('app.float.small_daily_image_height_lg')) @@ -111,6 +114,7 @@ export struct DailyVideo { $r('app.float.small_daily_image_width_md'), $r('app.float.small_daily_image_width_lg')) .getValue(this.currentWidthBreakpoint)) .borderRadius($r('app.float.daily_small_img_radius')) + // [End daily_small_video] Column() { Text(this.mainDailyVideoImg.getOtherInfo()) @@ -154,6 +158,7 @@ export struct DailyVideo { $r('app.float.small_daily_row_padding_lg') : $r('app.float.small_daily_row_padding') }) .layoutWeight(2) + // [EndExclude sub_title_component] } .tabIndex(getTabIndex(HomeConstants.DIRECTION_LIST[6])) .width(CommonConstants.FULL_PERCENT) @@ -192,7 +197,7 @@ export struct DailyVideo { .width(CommonConstants.FULL_PERCENT) // The width and height vary with the container assembly and the aspect ratio remains unchanged. .aspectRatio(HomeConstants.VIDEO_DIALOG_ASPECT_RATIO) - + // [StartExclude sub_title_component] Text(item.getTitle()) .fontSize(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? $r('app.float.daily_title_font_lg') : $r('app.float.daily_title_font')) @@ -211,6 +216,7 @@ export struct DailyVideo { .fontColor(this.currentTopIndex === 2 ? Color.White : $r('app.color.normal_font_color')) .visibility(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM ? Visibility.Visible : Visibility.None) + // [EndExclude sub_title_component] } .alignItems(HorizontalAlign.Start) } @@ -241,6 +247,7 @@ export struct DailyVideo { .padding({ left: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG && this.currentTopIndex === 2 ? $r('app.float.side_bar_width') : 0 }) .margin({ top: $r('app.float.main_daily_margin') }) + // [End sub_title_component] } getDailyVideoHeight(currentWidthBreakpoint: string, windowWidth: number, isMain: boolean): string { diff --git a/features/home/src/main/ets/view/Home.ets b/features/home/src/main/ets/view/Home.ets index a457b38f4adf6c56ecb0240da96f79e8b808351b..59e747081ec4a61db854fa13e76004d1d9d4a447 100644 --- a/features/home/src/main/ets/view/Home.ets +++ b/features/home/src/main/ets/view/Home.ets @@ -30,9 +30,7 @@ export struct Home { @State isSearching: boolean = false; @StorageLink('scrollHeight') scrollHeight: number = 0; @StorageLink('currentTopIndex') currentTopIndex: number = 0; - // [Start Home] @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string = BreakpointConstants.BREAKPOINT_LG; - // [StartExclude Home] private tabList: FooterTab[] = new FooterTabViewModel().getTabList(); private scroller: Scroller = new Scroller(); private sideScroller: Scroller = new Scroller(); @@ -59,12 +57,13 @@ export struct Home { .width(CommonConstants.FULL_PERCENT) .justifyContent(FlexAlign.Center) } - // [EndExclude Home] + build() { Tabs({ barPosition: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? BarPosition.Start : BarPosition.End }) { - // [StartExclude Home] + + // [Start tab_content] TabContent() { if (this.currentTopIndex === 2) { // The immersive design of the home page is displayed when the top tab is switched to 2. @@ -119,6 +118,7 @@ export struct Home { } } .tabBar(this.BottomTabBuilder(this.tabList[0], 0)) + // [End tab_content] TabContent() { Column() @@ -134,9 +134,7 @@ export struct Home { Column() } .tabBar(this.BottomTabBuilder(this.tabList[3], 3)) - // [EndExclude Home] } - // [StartExclude Home] // Change the position and size of the tab at the bottom. .barWidth(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? $r('app.float.bottom_tab_bar_width_lg') : CommonConstants.FULL_PERCENT) @@ -145,9 +143,7 @@ export struct Home { $r('app.float.tab_size'))) .barMode(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? BarMode.Scrollable : BarMode.Fixed, { nonScrollableLayoutStyle: LayoutStyle.ALWAYS_CENTER }) - // [EndExclude Home] .vertical(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG) - // [End Home] .barOverlap(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG && this.currentTopIndex === 2 ? true : false) .barBackgroundBlurStyle(BlurStyle.NONE) diff --git a/features/home/src/main/ets/view/HomeContent.ets b/features/home/src/main/ets/view/HomeContent.ets index 098ad1d7e2668eb5dfea99cec2226dd4017adcb2..eb1cef79a4d6ac459989cb0e232ffd510be4e77e 100644 --- a/features/home/src/main/ets/view/HomeContent.ets +++ b/features/home/src/main/ets/view/HomeContent.ets @@ -40,12 +40,14 @@ export struct HomeContent { build() { Column() { + // [Start banner_view] BannerView() IconView() RecommendedVideo() NewVideoRelease() DailyVideo() PreviousVideo() + // [End banner_view] } // Set the background image to cover the side and top tabs. .backgroundImage(this.currentTopIndex === 2 && !this.isSearching ? new BreakpointType( diff --git a/features/home/src/main/ets/view/HomeHeader.ets b/features/home/src/main/ets/view/HomeHeader.ets index 25874c8822b4e67889727608d37f5253df6d4be4..0a19c06446c29791f9cd3cc53c81519983d6dc04 100644 --- a/features/home/src/main/ets/view/HomeHeader.ets +++ b/features/home/src/main/ets/view/HomeHeader.ets @@ -28,74 +28,72 @@ export struct HomeHeader { @State isShowingBorder: boolean = false; @Link isSearching: boolean; @StorageLink('scrollHeight') scrollHeight: number = 0; - @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string = BreakpointConstants.BREAKPOINT_LG; + @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string = 'lg'; @StorageLink('currentTopIndex') currentTopIndex: number = 0; + // [Start Home_Header] build() { Column() { - // [Start HomeHeader] GridRow({ columns: { - sm: BreakpointConstants.GRID_ROW_COLUMNS[2], - md: BreakpointConstants.GRID_ROW_COLUMNS[0], - lg: BreakpointConstants.GRID_ROW_COLUMNS[0] + sm: 4, + md: 12, + lg: 12 } }) { GridCol({ span: { - sm: BreakpointConstants.GRID_COLUMN_SPANS[5], - md: BreakpointConstants.GRID_COLUMN_SPANS[2], - lg: BreakpointConstants.GRID_COLUMN_SPANS[2] + sm: 4, + md: 7, + lg: 7 } }) { this.TopTabBar() } - // [StartExclude HomeHeader] .padding({ - top: deviceInfo.deviceType === CommonConstants.DEVICE_TYPE ? 0 : $r('app.float.search_top_padding_top') + top: deviceInfo.deviceType === '2in1' ? 0 : $r('app.float.search_top_padding_top') }) - .height(deviceInfo.deviceType === CommonConstants.DEVICE_TYPE ? $r('app.float.search_top_height') : + .height(deviceInfo.deviceType === '2in1' ? $r('app.float.search_top_height') : $r('app.float.search_top_height_more')) - // [EndExclude HomeHeader] GridCol({ span: { - sm: BreakpointConstants.GRID_COLUMN_SPANS[5], - md: BreakpointConstants.GRID_COLUMN_SPANS[3], - lg: BreakpointConstants.GRID_COLUMN_SPANS[3] + sm: 4, + md: 5, + lg: 7 } }) { this.searchBar() } - // [StartExclude HomeHeader] - .padding({ top: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM || deviceInfo.deviceType === - CommonConstants.DEVICE_TYPE ? 0 : $r('app.float.search_top_padding_top') }) - .height(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM || deviceInfo.deviceType === - CommonConstants.DEVICE_TYPE ? $r('app.float.search_top_height') : $r('app.float.search_top_height_more')) - // [EndExclude HomeHeader] + .padding({ top: this.currentWidthBreakpoint === 'sm' || deviceInfo.deviceType === + '2in1' ? 0 : $r('app.float.search_top_padding_top') }) + .height(this.currentWidthBreakpoint === 'sm' || deviceInfo.deviceType === + '2in1' ? $r('app.float.search_top_height') : $r('app.float.search_top_height_more')) } - // [End HomeHeader] // 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], HomeConstants.BACKGROUND_CHANGE_HEIGHT[1], HomeConstants.BACKGROUND_CHANGE_HEIGHT[2]) .getValue(this.currentWidthBreakpoint) && this.currentTopIndex === 2 ? $r('app.color.home_content_background') : Color.Transparent) } - .width(CommonConstants.FULL_PERCENT) + .width('100%') } + // [End Home_Header] + // [Start top_tab_bar] @Builder TopTabBar() { Row() { Column() { List() { + // [StartExclude top_tab_bar] ForEach(HomeConstants.TOP_TOPIC_LIST, (item: string, index: number) => { ListItem() { Text(item) .fontSize(this.currentTopIndex === index ? $r('app.float.search_tab_font_selected') : $r('app.float.search_tab_font')) - .fontWeight(this.currentTopIndex === index ? CommonConstants.FONT_WEIGHT_700 : - CommonConstants.FONT_WEIGHT_500) + .fontWeight(this.currentTopIndex === index ? 700 : + 500) .width(this.currentTopIndex === index ? $r('app.float.top_text_width_selected') : $r('app.float.top_text_width')) .textAlign(TextAlign.Center) @@ -122,6 +120,7 @@ export struct HomeHeader { this.scrollHeight = 0; }) }, (item: number, index: number) => index + JSON.stringify(item)) + // [EndExclude top_tab_bar] } .tabIndex(getTabIndex(HomeConstants.DIRECTION_LIST[1])) .scrollBar(BarState.Off) @@ -130,7 +129,7 @@ export struct HomeHeader { } .alignItems(HorizontalAlign.Center) .layoutWeight(1) - + // [StartExclude top_tab_bar] Image($r('app.media.ic_public_more')) .width($r('app.float.top_tab_img_size')) .height($r('app.float.top_tab_img_size')) @@ -139,16 +138,20 @@ export struct HomeHeader { right: $r('app.float.top_tab_img_margin') }) .fillColor(this.currentTopIndex === 2 ? Color.White : Color.Black) - .visibility(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM ? Visibility.Visible : Visibility.None) + .visibility(this.currentWidthBreakpoint === 'sm' ? Visibility.Visible : Visibility.None) + // [StartExclude top_tab_bar] } .height($r('app.float.top_bar_height')) - .width(CommonConstants.FULL_PERCENT) + .width('100%') } + // [End top_tab_bar] + // [Start search_bar] @Builder searchBar() { Row() { Stack({ alignContent: Alignment.Start }) { + // [StartExclude search_bar] TextInput({ placeholder: HomeConstants.SEARCH_PLACEHOLDER }) .placeholderFont({ size: $r('app.float.search_input_font'), @@ -161,7 +164,7 @@ export struct HomeHeader { left: $r('app.float.search_input_left'), right: $r('app.float.search_input_right') }) - .width(CommonConstants.FULL_PERCENT) + .width('100%') .onClick(() => { this.isSearching = true; }) @@ -181,11 +184,12 @@ export struct HomeHeader { .width($r('app.float.search_img_size')) .height($r('app.float.search_img_size')) .margin({ left: $r('app.float.search_img_left') }) + // [EndExclude search_bar] } // .tabIndex(getTabIndex(HomeConstants.DIRECTION_LIST[1])) .alignSelf(ItemAlign.Center) .layoutWeight(1) - + // [StartExclude search_bar] // History image. Image(this.currentTopIndex === 2 ? $r('app.media.ic_public_history_white') : $r('app.media.ic_public_history')) .width($r('app.float.history_img_size')) @@ -196,14 +200,16 @@ export struct HomeHeader { .width($r('app.float.history_img_size')) .height($r('app.float.history_img_size')) .margin({ left: $r('app.float.history_img_left') }) - .visibility(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM ? Visibility.None : Visibility.Visible) + .visibility(this.currentWidthBreakpoint === 'sm' ? Visibility.None : Visibility.Visible) + // [EndExclude search_bar] } .padding({ left: $r('app.float.search_top_padding'), right: $r('app.float.search_top_padding') }) .justifyContent(FlexAlign.Center) - .width(CommonConstants.FULL_PERCENT) - .height(CommonConstants.FULL_PERCENT) + .width('100%') + .height('100%') } + // [End search_bar] } \ No newline at end of file diff --git a/features/home/src/main/ets/view/RecommendedVideo.ets b/features/home/src/main/ets/view/RecommendedVideo.ets index 584af3d482d8dd4235469f5181e8bfa558b60f1f..fbccb2e4dd92dc59ec9ad740e162a19fe30f90d7 100644 --- a/features/home/src/main/ets/view/RecommendedVideo.ets +++ b/features/home/src/main/ets/view/RecommendedVideo.ets @@ -38,43 +38,46 @@ export struct RecommendedVideo { private videoDialogController?: CustomDialogController; private windowUtil?: WindowUtil; + // [Start build_grid] build() { // Video grid layout. - // [Start RecommendedVideo] - // [Start grid1] + // [Start grid_foreach] Grid() { - // [StartExclude grid1] ForEach(this.videoImgList, (item: VideoImage, index: number) => { GridItem() { Column() { + // [Start aligncontent] Stack({ alignContent: Alignment.Center }) { - // [StartExclude RecommendedVideo] + // [StartExclude aligncontent] + // [StartExclude build_grid] Image(item.getImgSrc()) .focusable(true) .groupDefaultFocus(index === 0 ? true : false) .objectFit(ImageFit.Fill) - .width(CommonConstants.FULL_PERCENT) - .height(CommonConstants.FULL_PERCENT) + .width('100%') + .height('100%') .draggable(false) .borderRadius($r('app.float.banner_focus_radius')) .id(JSON.stringify(item)) Column() { VideoImgRating({ rating: item.getRating() }) } - .width(CommonConstants.FULL_PERCENT) - .height(CommonConstants.FULL_PERCENT) + .width('100%') + .height('100%') .alignItems(HorizontalAlign.End) .justifyContent(FlexAlign.End) - // [EndExclude RecommendedVideo] + // [EndExclude build_grid] + // [EndExclude aligncontent] } - // [StartExclude RecommendedVideo] .focusable(true) - .width(CommonConstants.FULL_PERCENT) - // [EndExclude RecommendedVideo] + .width('100%') // The width and height vary with the container assembly and the aspect ratio remains unchanged. .aspectRatio(HomeConstants.VIDEO_DIALOG_ASPECT_RATIO) - // [StartExclude RecommendedVideo] + // [StartExclude aligncontent] + // [StartExclude build_grid] .hoverEffect(HoverEffect.Scale) + // [EndExclude build_grid] + // [EndExclude aligncontent] .gesture( LongPressGesture({ repeat: false }) .onAction(() => { @@ -132,26 +135,22 @@ export struct RecommendedVideo { this.videoDialogController.open(); })) .bindContextMenu(RightClickMenu(this.currentWidthBreakpoint), ResponseType.RightClick) - + // [End aligncontent] VideoTitle({ title: item.getTitle() }) VideoContent({ content: item.getContent() }) - // [EndExclude RecommendedVideo] } .alignItems(HorizontalAlign.Start) } }, (item: VideoImage, index: number) => index + JSON.stringify(item)) - // [EndExclude grid1] } - // [End grid1] - // [StartExclude RecommendedVideo] + // [StartExclude build_grid] + // [StartExclude grid_foreach] .tabIndex(getTabIndex(HomeConstants.DIRECTION_LIST[4])) .editMode(false) - // [EndExclude RecommendedVideo] // Sets the number of grid layout columns and evenly divides the width. .columnsTemplate(this.videoGridColumn) .rowsTemplate(CommonConstants.VIDEO_GRID_COLUMNS[0]) - // [End RecommendedVideo] - .width(CommonConstants.FULL_PERCENT) + .width('100%') .rowsGap($r('app.float.video_grid_gap')) .columnsGap($r('app.float.video_grid_gap')) // Dynamically calculates the total height based on the following numbers of breakpoints. @@ -166,9 +165,11 @@ export struct RecommendedVideo { $r('app.float.home_content_padding_lg')).getValue(this.currentWidthBreakpoint), top: $r('app.float.recommended_video_padding_top'), bottom: $r('app.float.recommended_video_padding_bottom') - }) + } + // [EndExclude grid_foreach] + ) + // [EndExclude build_grid] // Zooming and pinching functions of the grid. - // [Start grid1] .gesture(PinchGesture({ fingers: 2 }).onActionUpdate((event: GestureEvent) => { if (event.scale > 1 && this.currentWidthBreakpoint !== BreakpointConstants.BREAKPOINT_SM) { if (this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_MD) { @@ -202,7 +203,7 @@ export struct RecommendedVideo { Logger.info(`Two-finger operation is not supported`); } })) - // [End grid1] + // [End grid_foreach] } getGridHeight(videoGridColumn: string, currentWidthBreakpoint: string, windowWidth: number): string { @@ -226,4 +227,5 @@ export struct RecommendedVideo { return result / HomeConstants.VIDEO_DIALOG_ASPECT_RATIO * HomeConstants.TWO + HomeConstants.VIDEO_GRID_DESCRIPTION_HEIGHT + HomeConstants.HEIGHT_UNIT; } + // [End build_grid] } \ No newline at end of file diff --git a/features/search/src/main/ets/view/SearchContent.ets b/features/search/src/main/ets/view/SearchContent.ets index 12de1688da9ec2fc6e970fa542566c99629e21ca..0eec1ded59222d44108dbc0e1642e2df5d328b00 100644 --- a/features/search/src/main/ets/view/SearchContent.ets +++ b/features/search/src/main/ets/view/SearchContent.ets @@ -80,6 +80,7 @@ export struct SearchContent { .getValue(this.currentWidthBreakpoint) }) } + // [Start search_discovery] @Builder searchDiscovery() { Row() { @@ -101,6 +102,7 @@ export struct SearchContent { ForEach(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? SearchConstants.SEARCH_DISCOVERY_LARGE : SearchConstants.SEARCH_DISCOVERY_LARGE.slice(0, 6), (item: string, index: number) => { ListItem() { + // [StartExclude search_discovery] Column() { Text(item) .fontSize($r('app.float.search_discovery_list_font')) @@ -111,6 +113,7 @@ export struct SearchContent { .width(CommonConstants.FULL_PERCENT) .margin({ top: $r('app.float.search_discovery_list_column_margin') }) .alignItems(HorizontalAlign.Start) + // [EndExclude search_discovery] } }, (item: string, index: number) => index + JSON.stringify(item)) } @@ -118,6 +121,7 @@ export struct SearchContent { .lanes(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? SearchConstants.SEARCH_LIST_LANES[0] : SearchConstants.SEARCH_LIST_LANES[1]) } + // [End search_discovery] @Builder searchHotTrending() { diff --git a/features/videoDetail/src/main/ets/view/AllComments.ets b/features/videoDetail/src/main/ets/view/AllComments.ets index d1f67b0cf18bc7b8f2cfde60f635fe91f21253cf..e5a3c1abd866120b67e831219344d799d9c0943b 100644 --- a/features/videoDetail/src/main/ets/view/AllComments.ets +++ b/features/videoDetail/src/main/ets/view/AllComments.ets @@ -65,13 +65,15 @@ export struct AllComments { .justifyContent(FlexAlign.Start) Row() { + // [Start get_comment_image_src] Image(item.getCommentImageSrc()) - .width(new BreakpointType(DetailConstants.COMMENT_IMAGE_WIDTH[0], DetailConstants.COMMENT_IMAGE_WIDTH[1], + .width(new BreakpointType('227vp', '254vp', this.commentImgWidth).getValue(this.currentWidthBreakpoint)) - .height(new BreakpointType(DetailConstants.COMMENT_IMAGE_HEIGHT[0], - DetailConstants.COMMENT_IMAGE_HEIGHT[1], this.commentImgHeight).getValue(this.currentWidthBreakpoint)) + .height(new BreakpointType('227vp', + '254vp', this.commentImgHeight).getValue(this.currentWidthBreakpoint)) .borderRadius( $r('app.float.all_comments_img_radius')) - .aspectRatio(DetailConstants.COMMENT_IMAGE_ASPECT_RATIO) + .aspectRatio(1.46) + // [End get_comment_image_src] } .padding({ left: $r('app.float.all_comments_img_row_padding') }) .margin({ top: $r('app.float.all_comments_img_row_margin') }) diff --git a/features/videoDetail/src/main/ets/view/RelatedList.ets b/features/videoDetail/src/main/ets/view/RelatedList.ets index 2414a72af8244a40bd2c415d8bd11b7177130d2d..b83eb5925a8899b610880905fed12922072fb442 100644 --- a/features/videoDetail/src/main/ets/view/RelatedList.ets +++ b/features/videoDetail/src/main/ets/view/RelatedList.ets @@ -35,6 +35,7 @@ export struct RelatedList { private iconList: Resource[] = DetailConstants.ICON_LIST; private scroller: Scroller = new Scroller(); + // [Start build_scroller] build() { Scroll(this.scroller) { Column() { @@ -44,7 +45,7 @@ export struct RelatedList { .visibility(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? Visibility.None : Visibility.Visible) } - .width(CommonConstants.FULL_PERCENT) + .width('100%') .alignItems(HorizontalAlign.Start) .padding({ bottom: $r('app.float.video_col_padding') }) } @@ -124,6 +125,7 @@ export struct RelatedList { } }) } + // [End build_scroller] @Builder RelatedVideoComponent() { @@ -145,7 +147,7 @@ export struct RelatedList { Text(item.getName()) .fontSize($r('app.float.related_name_font')) .lineHeight($r('app.float.related_name_line')) - .fontWeight(CommonConstants.FONT_WEIGHT_500) + .fontWeight(500) .opacity(CommonConstants.TEXT_OPACITY[2]) .fontColor(index === 0 ? $r('app.color.episodes_font') : Color.Black) } @@ -164,27 +166,30 @@ export struct RelatedList { bottom: $r('app.float.related_row_bottom') }) .height($r('app.float.related_row_height')) - .width(CommonConstants.FULL_PERCENT) + .width('100%') } .height(this.relatedVideoHeight + DetailConstants.LENGTH_UNIT) } + // [Start video_introduction] @Builder VideoIntroduction() { Column() { - this.SubTitle(DetailConstants.SUB_TITLES[3]) + // [StartExclude video_introduction] + this.SubTitle($r('app.string.introduction')) Column() { - this.IntroductionContent(DetailConstants.INTRODUCTION_CONTENT[0]) - this.IntroductionContent(DetailConstants.INTRODUCTION_CONTENT[1]) + this.IntroductionContent($r('app.string.product')) + this.IntroductionContent($r('app.string.play')) } .padding({ left: $r('app.float.sub_title_row_padding'), right: $r('app.float.sub_title_row_padding') }) - .width(CommonConstants.FULL_PERCENT) + .width('100%') .alignItems(HorizontalAlign.Start) + // [EndExclude video_introduction] Row() { ForEach(this.iconList, (item: Resource, index: number) => { Image(item) @@ -193,6 +198,7 @@ export struct RelatedList { }, (item: Resource, index: number) => index + JSON.stringify(item)) } .justifyContent(FlexAlign.SpaceBetween) + // [StartExclude video_introduction] .padding({ top: $r('app.float.introduction_row_padding'), bottom: $r('app.float.introduction_row_padding'), @@ -200,13 +206,15 @@ export struct RelatedList { right: $r('app.float.sub_title_row_padding') }) .height($r('app.float.sub_title_row_height_detail')) - .width(CommonConstants.FULL_PERCENT) + .width('100%') - this.SubTitle(DetailConstants.SUB_TITLES[4]) + this.SubTitle($r('app.string.anthology')) - List({ space: CommonConstants.LIST_SPACE }) { + // [EndExclude video_introduction] + List({ space: '12vp' }) { ForEach(this.episodes, (item: string, index: number) => { ListItem() { + // [StartExclude video_introduction] Row() { Image($r('app.media.video_playing')) .height($r('app.float.is_playing_icon_size')) @@ -225,6 +233,7 @@ export struct RelatedList { .height($r('app.float.episodes_list_height')) .width($r('app.float.episodes_list_width')) .borderRadius($r('app.float.episodes_list_radius')) + // [EndExclude video_introduction] } }, (item: string, index: number) => index + JSON.stringify(item)) } @@ -232,11 +241,12 @@ export struct RelatedList { .listDirection(Axis.Horizontal) .padding({ left: $r('app.float.sub_title_row_padding') }) .margin({ bottom: $r('app.float.episodes_list_margin') }) - .width(CommonConstants.FULL_PERCENT) + .width('100%') - this.SubTitleAndMore(DetailConstants.SUB_TITLES[5]) + this.SubTitleAndMore($r('app.string.Peripheral')) + // [StartExclude video_introduction] - List({ space: CommonConstants.LIST_SPACE }) { + List({ space: '12vp' }) { ForEach(this.peripheralVideoList, (item: RelatedVideo, index: number) => { ListItem() { Column() { @@ -249,8 +259,8 @@ export struct RelatedList { Text(item.getName()) .lineHeight($r('app.float.peripheral_name_line')) .fontSize($r('app.float.peripheral_name_font')) - .opacity(CommonConstants.TEXT_OPACITY[2]) - .fontWeight(CommonConstants.FONT_WEIGHT_500) + .opacity(0.6) + .fontWeight(500) } } }, (item: RelatedVideo, index: number) => index + JSON.stringify(item)) @@ -262,63 +272,69 @@ export struct RelatedList { left: $r('app.float.sub_title_row_padding'), right: $r('app.float.sub_title_row_padding') }) - .width(CommonConstants.FULL_PERCENT) + .width('100%') + // [EndExclude video_introduction] } - .width(CommonConstants.FULL_PERCENT) + .width('100%') .backgroundColor(Color.White) - .visibility(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? Visibility.Visible : Visibility.None) + .visibility(this.currentWidthBreakpoint === 'lg' ? Visibility.Visible : Visibility.None) } + // [StartExclude video_introduction] @Builder SubTitle(subtitle: ResourceStr) { Row() { Text(subtitle) .fontSize($r('app.float.sub_title_font')) .lineHeight($r('app.float.sub_title_text_line')) - .fontWeight(CommonConstants.FONT_WEIGHT_500) + .fontWeight(500) } .padding({ left: $r('app.float.sub_title_row_padding'), right: $r('app.float.sub_title_row_padding') }) .height($r('app.float.sub_title_row_height_detail')) - .width(CommonConstants.FULL_PERCENT) + .width('100%') } + // [EndExclude video_introduction] @Builder SubTitleAndMore(subtitle: ResourceStr) { Row() { + // [StartExclude video_introduction] Text(subtitle) .fontSize($r('app.float.sub_title_font')) .lineHeight($r('app.float.sub_title_text_line')) - .fontWeight(CommonConstants.FONT_WEIGHT_500) - + .fontWeight(500) + // [EndExclude video_introduction] Blank() - - Text(DetailConstants.SUB_TITLES[2]) + // [StartExclude video_introduction] + Text($r('app.string.more')) .fontSize($r('app.float.sub_title_font_more')) .lineHeight($r('app.float.sub_title_text_line_more')) .fontWeight(FontWeight.Normal) - .opacity(CommonConstants.TEXT_OPACITY[2]) + .opacity($r('app.string.more')) Image($r('app.media.ic_public_arrow_right')) .height($r('app.float.arrow_img_size')) .width($r('app.float.arrow_img_size')) + // [EndExclude video_introduction] } .padding({ left: $r('app.float.sub_title_row_padding'), right: $r('app.float.sub_title_row_padding') }) .height($r('app.float.sub_title_row_height_detail')) - .width(CommonConstants.FULL_PERCENT) + .width('100%') .alignItems(VerticalAlign.Center) } + // [End video_introduction] @Builder IntroductionContent(content: ResourceStr) { Text(content) .fontSize($r('app.float.introduction_content_font')) .lineHeight($r('app.float.introduction_content_line')) - .fontWeight(CommonConstants.FONT_WEIGHT_500) - .opacity(CommonConstants.TEXT_OPACITY[2]) + .fontWeight(500) + .opacity(0.6) } } \ No newline at end of file diff --git a/features/videoDetail/src/main/ets/view/VideoDetail.ets b/features/videoDetail/src/main/ets/view/VideoDetail.ets index 130f69e91c2a5999751b924fe3aded89517008f6..32e7b341263f39cf924bb9486b2ff78d996fa61c 100644 --- a/features/videoDetail/src/main/ets/view/VideoDetail.ets +++ b/features/videoDetail/src/main/ets/view/VideoDetail.ets @@ -52,15 +52,20 @@ export struct VideoDetail { public screenHeight: number = 0; private windowUtil?: WindowUtil = WindowUtil.getInstance(); private mainWindow?: window.Window; + // [Start on_window_size_change] private onWindowSizeChange: (windowSize: window.Size) => void = (windowSize: window.Size) => { + // [StartExclude on_window_size_change] if (this.pageInfo.getPageName() !== CommonConstants.PAGE_NAMES[1]) { return; } + // [EndExclude on_window_size_change] 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 === + } + // [StartExclude on_window_size_change] + else if (this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_MD && this.currentHeightBreakpoint === BreakpointConstants.BREAKPOINT_SM) { if (this.isFullScreen) { this.windowUtil?.setMainWindowOrientation(window.Orientation.AUTO_ROTATION_LANDSCAPE_RESTRICTED); @@ -75,6 +80,7 @@ export struct VideoDetail { this.windowUtil?.setMainWindowOrientation(window.Orientation.PORTRAIT); } } + // [EndExclude on_window_size_change] }; private onHalfFoldedChange(): void { @@ -90,22 +96,30 @@ export struct VideoDetail { // [Start on_full_screen_change] private onFullScreenChange(): void { - if (((this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_MD && this.currentHeightBreakpoint !== - BreakpointConstants.BREAKPOINT_SM) || this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG) && + // Large folding screen (X series) in unfolded state and tablet state, supporting rotation && large folding screen (X series) in hover state requires landscape display and does not support rotation. + if (((this.currentWidthBreakpoint === 'md' && this.currentHeightBreakpoint !== + 'sm') || this.currentWidthBreakpoint === 'lg') && !this.isHalfFolded) { this.windowUtil?.setMainWindowOrientation(window.Orientation.AUTO_ROTATION_RESTRICTED); - } else if (this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM && this.currentHeightBreakpoint === - BreakpointConstants.BREAKPOINT_LG) { + } + // Phone and large folding screen (X series) in portrait mode. + else if (this.currentWidthBreakpoint === 'sm' && this.currentHeightBreakpoint === + 'lg') { + // In full-screen mode, the layout is displayed in landscape mode. Otherwise, the layout is displayed in portrait mode. if (this.isFullScreen) { this.windowUtil?.setMainWindowOrientation(window.Orientation.AUTO_ROTATION_LANDSCAPE_RESTRICTED); } else { this.windowUtil?.setMainWindowOrientation(window.Orientation.PORTRAIT); } - } else if (this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_MD && this.currentHeightBreakpoint === - BreakpointConstants.BREAKPOINT_SM && !this.isFullScreen) { + } + // When the mobile phone and large folding screen (X series) are folded in landscape mode and the playback is not in full screen mode, the vertical display layout is displayed. + else if (this.currentWidthBreakpoint === 'md' && this.currentHeightBreakpoint === + 'sm' && !this.isFullScreen) { this.windowUtil?.setMainWindowOrientation(window.Orientation.PORTRAIT); } - if (deviceInfo.deviceType !== CommonConstants.DEVICE_TYPE) { + // The navigation bar is not hidden on a 2in1 device. + if (deviceInfo.deviceType !== '2in1') { + // The navigation bar is hidden in full-screen playback. Otherwise, the navigation bar is displayed. if (this.isFullScreen) { this.windowUtil!.disableWindowSystemBar(); } else { @@ -116,14 +130,17 @@ export struct VideoDetail { // [End on_full_screen_change] aboutToAppear() { + // [StartExclude on_window_size_change] DisplayUtil.getFoldCreaseRegion(); this.screenHeight = DeviceScreen.getDeviceHeight(); + // [EndExclude on_window_size_change] 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); } } + // [End on_window_size_change] async aboutToDisappear() { this.isFullScreen = false; @@ -153,11 +170,10 @@ export struct VideoDetail { lg: BreakpointConstants.GRID_COLUMN_SPANS[0] } }) { - // [Start VideoDetail] + // [Start side_bar_container] SideBarContainer() { Column() { // Sidebar area. - // [StartExclude VideoDetail] Scroll() { AllComments({ commentImgHeight: $commentImgHeight, commentImgWidth: $commentImgWidth }) .visibility(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? Visibility.Visible : @@ -172,18 +188,14 @@ export struct VideoDetail { SelfComment() .visibility(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? Visibility.Visible : Visibility.None) - // [EndExclude VideoDetail] } - // [StartExclude VideoDetail] .justifyContent(FlexAlign.Start) .height(CommonConstants.FULL_PERCENT) .width(CommonConstants.FULL_PERCENT) .backgroundColor(Color.White) - // [EndExclude VideoDetail] .onAreaChange((newValue: Area) => { if (newValue.width !== 0) { // Handling when the width of the sidebar changes. - // [StartExclude VideoDetail] let height: number = DetailConstants.COMMENT_IMAGE_MIN_HEIGHT_NUMBER + (Number(newValue.width) - DetailConstants.SIDE_BAR_MIN_WIDTH_NUMBER) / (this.getUIContext().px2vp(this.windowWidth) * DetailConstants.COMMENTS_AREA_PERCENT - @@ -196,13 +208,11 @@ export struct VideoDetail { DetailConstants.COMMENT_IMAGE_MIN_WIDTH_NUMBER); this.commentImgHeight = JSON.stringify(height); this.commentImgWidth = JSON.stringify(width); - // [EndExclude VideoDetail] } }) Column() { // Content area. - // [StartExclude VideoDetail] VideoDetailView({ screenHeight: this.screenHeight, relatedVideoHeight: this.relatedVideoHeight, @@ -212,24 +222,19 @@ export struct VideoDetail { SelfComment() .visibility(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG || this.isFullScreen ? Visibility.None : Visibility.Visible) - // [EndExclude VideoDetail] } - // [StartExclude VideoDetail] .height(CommonConstants.FULL_PERCENT) .width(CommonConstants.FULL_PERCENT) - // [EndExclude VideoDetail] } .showSideBar(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG && !this.isFullScreen ? true : false) - // [StartExclude VideoDetail] .showControlButton(false) .autoHide(false) .sideBarPosition(SideBarPosition.End) - // [EndExclude VideoDetail] .sideBarWidth($r('app.float.side_bar_min_width')) .minSideBarWidth($r('app.float.side_bar_min_width')) - .maxSideBarWidth(this.getUIContext().px2vp(this.windowWidth * DetailConstants.COMMENTS_AREA_PERCENT)) - // [End VideoDetail] + .maxSideBarWidth(px2vp(this.windowWidth * DetailConstants.COMMENTS_AREA_PERCENT)) + // [End side_bar_container] } .height(CommonConstants.FULL_PERCENT) } @@ -257,7 +262,6 @@ export struct VideoDetail { } } }) - // [Start key_event] .onKeyEvent((event?: KeyEvent) => { //If the key type is pressed, the subsequent code will not be executed, and the specific key logic will be executed when released. if (!event || event.type !== KeyType.Down) { @@ -280,6 +284,5 @@ export struct VideoDetail { this.avPlayerUtil!.rewind(); } }) - // [End key_event] } } \ 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 index 6dc2d3c3004a6b78a95ea0be737fb3f8a196390f..9992b36fb20973290e5d6b590320da382095417c 100644 --- a/features/videoDetail/src/main/ets/view/VideoPlayer.ets +++ b/features/videoDetail/src/main/ets/view/VideoPlayer.ets @@ -68,13 +68,17 @@ export struct VideoPlayer { } build() { + // [Start stack_aligncontent] Stack({ alignContent: this.isFullScreen ? Alignment.Center : Alignment.Bottom }) { Flex({ + // [StartExclude stack_aligncontent] direction: FlexDirection.Column, justifyContent: this.isHalfFolded ? FlexAlign.Start : FlexAlign.Center, alignItems: ItemAlign.Start + // [EndExclude stack_aligncontent] }) { Column() { + // [StartExclude stack_aligncontent] XComponent({ id: CommonConstants.PAGE_NAMES[1], type: XComponentType.SURFACE, @@ -86,10 +90,12 @@ export struct VideoPlayer { }) .width(this.isFullScreen ? -1 : this.videoHeight + DetailConstants.PERCENT_SIGN) .aspectRatio(CommonConstants.VIDEO_ASPECT_RATIO) + // [EndExclude stack_aligncontent] } .justifyContent(FlexAlign.Center) .height(this.isHalfFolded ? this.creaseRegion[0] : (this.isFullScreen ? CommonConstants.FULL_PERCENT : 'auto')) .width(CommonConstants.FULL_PERCENT) + // [StartExclude stack_aligncontent] } .width(CommonConstants.FULL_PERCENT) .onClick(() => { @@ -108,8 +114,9 @@ export struct VideoPlayer { } }) ) - + // [EndExclude stack_aligncontent] Column() { + // [StartExclude stack_aligncontent] Row() { TimeText({ time: this.currentTime }) .margin({ @@ -179,6 +186,7 @@ export struct VideoPlayer { .height($r('app.float.icon_button_row_height')) .width(CommonConstants.FULL_PERCENT) .visibility(this.isFullScreen ? Visibility.Visible : Visibility.None) + // [EndExclude stack_aligncontent] } .height(this.isFullScreen ? CommonConstants.FULL_PERCENT : 'auto') .width(CommonConstants.FULL_PERCENT) @@ -193,7 +201,7 @@ export struct VideoPlayer { } }) ) - + // [StartExclude stack_aligncontent] Row() { TimeText({ time: this.currentTime }) .margin({ @@ -244,6 +252,7 @@ export struct VideoPlayer { .alignItems(VerticalAlign.Center) .visibility(!this.isFullScreen ? Visibility.Visible : Visibility.None) + // [EndExclude stack_aligncontent] Image($r('app.media.ic_public_back')) .height($r('app.float.back_size')) .width($r('app.float.back_size')) @@ -271,6 +280,7 @@ export struct VideoPlayer { .backgroundColor(Color.Black) .focusable(false) } + // [End stack_aligncontent] } @Component diff --git a/products/phone/src/main/ets/entryability/EntryAbility.ets b/products/phone/src/main/ets/entryability/EntryAbility.ets index c2a897e34819545b07abee3e03cc3eafad532143..d30f5e19b4cca4ae81e7bdc2174ceda8ffb619bc 100644 --- a/products/phone/src/main/ets/entryability/EntryAbility.ets +++ b/products/phone/src/main/ets/entryability/EntryAbility.ets @@ -18,9 +18,9 @@ */ import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit'; -import { window } from '@kit.ArkUI'; +import { display, window } from '@kit.ArkUI'; import { hilog } from '@kit.PerformanceAnalysisKit'; -import { WindowUtil } from '@ohos/commons'; +import { CommonConstants, WindowUtil } from '@ohos/commons'; export default class EntryAbility extends UIAbility { // [Start EntryAbility] @@ -29,9 +29,9 @@ export default class EntryAbility extends UIAbility { private onWindowSizeChange: (windowSize: window.Size) => void = (windowSize: window.Size) => { this.windowUtil!.updateHeightBp(); this.windowUtil!.updateWidthBp(); - // [StartExclude setorcreate] + // [StartExclude EntryAbility] AppStorage.setOrCreate('windowWidth', windowSize.width); - // [EndExclude setorcreate] + // [EndExclude EntryAbility] }; // [StartExclude EntryAbility] onCreate(want: Want, launchParam: AbilityConstant.LaunchParam) { @@ -48,6 +48,13 @@ export default class EntryAbility extends UIAbility { hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate'); // [EndExclude EntryAbility] this.windowUtil!.setWindowStage(windowStage); + // [Start window_util_set] + let windowUtil: WindowUtil | undefined = WindowUtil.getInstance(); + if (windowUtil !== undefined) { + windowUtil.setWindowStage(windowStage); + // windowUtil.setMainWindowPortrait(); + } + // [End window_util_set] windowStage.getMainWindow().then((data: window.Window) => { this.windowObj = data; this.windowUtil!.updateWidthBp(); @@ -82,4 +89,36 @@ export default class EntryAbility extends UIAbility { // Ability has back to background hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onBackground'); } -} \ No newline at end of file + + // [Start update_width_bp] + // products/phone/src/main/ets/entryability/EntryAbility.ets + 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 = '1fr 1fr'; + if (windowWidthVp < 320) { + widthBp = 'xs'; + videoGridColumn = '1fr 1fr'; + } else if (windowWidthVp >= 320 && windowWidthVp < 600) { + widthBp = 'sm'; + videoGridColumn = '1fr 1fr'; + } else if (windowWidthVp >= 600 && windowWidthVp < 840) { + widthBp = 'md'; + videoGridColumn = '1fr 1fr 1fr'; + } else if (windowWidthVp >= 840 && windowWidthVp < 1440) { + widthBp = 'lg'; + videoGridColumn = '1fr 1fr 1fr 1fr'; + } else { + widthBp = 'xl'; + videoGridColumn = '1fr 1fr 1fr 1fr'; + } + AppStorage.setOrCreate('currentWidthBreakpoint', widthBp); + AppStorage.setOrCreate('videoGridColumn', videoGridColumn); + } + // [End update_width_bp] +}