diff --git a/commons/base/src/main/ets/utils/BreakpointType.ets b/commons/base/src/main/ets/utils/BreakpointType.ets index 4de1385ed7d7595d825f829537e1de816926012e..b68f78da60d28f14c18b90a26f13dff73ad294a8 100644 --- a/commons/base/src/main/ets/utils/BreakpointType.ets +++ b/commons/base/src/main/ets/utils/BreakpointType.ets @@ -26,11 +26,11 @@ export class BreakpointType { this.lg = lg; } - getValue(currentBreakpoint: string): T { - if (currentBreakpoint === BreakpointConstants.BREAKPOINT_MD) { + getValue(currentWidthBreakpoint: string): T { + if (currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_MD) { return this.md; } - if (currentBreakpoint === BreakpointConstants.BREAKPOINT_LG) { + if (currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG) { return this.lg; } else { return this.sm; diff --git a/features/home/src/main/ets/utils/PreviousVideoUtil.ets b/features/home/src/main/ets/utils/PreviousVideoUtil.ets index 1fe1781a19b4e42f9d27127e349788c52cf81c3d..0c82b70e97134f1d64c13c838edb1b95537c62e6 100644 --- a/features/home/src/main/ets/utils/PreviousVideoUtil.ets +++ b/features/home/src/main/ets/utils/PreviousVideoUtil.ets @@ -17,8 +17,8 @@ import { BreakpointConstants } from '@ohos/commons'; import { HomeConstants } from '../constants/HomeConstants'; export class PreviousVideoUtil { - static getImgAspectRatio(currentBreakpoint: string, index: number): number { - if (currentBreakpoint === BreakpointConstants.BREAKPOINT_SM) { + static getImgAspectRatio(currentWidthBreakpoint: string, index: number): number { + if (currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM) { switch (index) { case 2: return HomeConstants.PREVIOUS_TWO_RATIOS[0]; @@ -27,7 +27,7 @@ export class PreviousVideoUtil { default: return HomeConstants.PREVIOUS_TWO_RATIOS[2]; } - } else if (currentBreakpoint === BreakpointConstants.BREAKPOINT_MD) { + } else if (currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_MD) { switch (index) { case 2: return HomeConstants.PREVIOUS_TWO_RATIOS[3]; diff --git a/features/home/src/main/ets/view/BannerView.ets b/features/home/src/main/ets/view/BannerView.ets index 2ec304a3f896fbbeb4a9d39a2f32b33a18370634..34e502dbd81606c7e367f02071860903a3b6da0c 100644 --- a/features/home/src/main/ets/view/BannerView.ets +++ b/features/home/src/main/ets/view/BannerView.ets @@ -43,7 +43,7 @@ class BannerDataSource implements IDataSource { @Component export struct BannerView { - @StorageLink('currentBreakpoint') currentBreakpoint: string = BreakpointConstants.BREAKPOINT_LG; + @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string = BreakpointConstants.BREAKPOINT_LG; @StorageLink('windowWidth') windowWidth: number = 0; @StorageLink('currentTopIndex') currentTopIndex: number = 0; private bannerImgList: Banner[] = new BannerViewModel().getBannerList(); @@ -75,7 +75,7 @@ export struct BannerView { Swiper() { LazyForEach(this.bannerDataSource, (item: Banner, index: number) => { Stack() { - Image(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_SM ? item.getBannerImg().getImgSrcSm() : + Image(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM ? item.getBannerImg().getImgSrcSm() : item.getBannerImg().getImgSrc()) .objectFit(ImageFit.Fill) .borderRadius($r('app.float.banner_img_border_radius')) @@ -89,64 +89,64 @@ export struct BannerView { }) Column() { - Text(item.getDescription().getIsLeftCenter().getValue(this.currentBreakpoint) ? + Text(item.getDescription().getIsLeftCenter().getValue(this.currentWidthBreakpoint) ? item.getDescription().getDescription()[0] + item.getDescription().getDescription()[1] : item.getDescription().getDescription()[0]) - .fontSize(item.getDescription().getFontSize().getValue(this.currentBreakpoint)[0]) + .fontSize(item.getDescription().getFontSize().getValue(this.currentWidthBreakpoint)[0]) .fontWeight(item.getDescription().getFontWeight()[0]) - .lineHeight(item.getDescription().getLineHeight().getValue(this.currentBreakpoint)[0]) + .lineHeight(item.getDescription().getLineHeight().getValue(this.currentWidthBreakpoint)[0]) .fontColor(Color.White) .letterSpacing(HomeConstants.BANNER_TEXT_LETTER_SPACES[2]) .maxLines(1) Text(item.getDescription().getDescription()[1]) - .fontSize(item.getDescription().getFontSize().getValue(this.currentBreakpoint)[0]) + .fontSize(item.getDescription().getFontSize().getValue(this.currentWidthBreakpoint)[0]) .fontWeight(item.getDescription().getFontWeight()[0]) - .lineHeight(item.getDescription().getLineHeight().getValue(this.currentBreakpoint)[0]) + .lineHeight(item.getDescription().getLineHeight().getValue(this.currentWidthBreakpoint)[0]) .fontColor(Color.White) .letterSpacing(HomeConstants.BANNER_TEXT_LETTER_SPACES[2]) .maxLines(1) - .visibility(item.getDescription().getIsLeftCenter().getValue(this.currentBreakpoint) ? + .visibility(item.getDescription().getIsLeftCenter().getValue(this.currentWidthBreakpoint) ? Visibility.None : Visibility.Visible) Text(item.getDescription().getDescription()[2]) - .fontSize(item.getDescription().getFontSize().getValue(this.currentBreakpoint)[1]) + .fontSize(item.getDescription().getFontSize().getValue(this.currentWidthBreakpoint)[1]) .fontWeight(item.getDescription().getFontWeight()[1]) - .lineHeight(item.getDescription().getLineHeight().getValue(this.currentBreakpoint)[1]) + .lineHeight(item.getDescription().getLineHeight().getValue(this.currentWidthBreakpoint)[1]) .fontColor(Color.White) .margin({ - top: item.getDescription().getTopPosition().getValue(this.currentBreakpoint)[1] + top: item.getDescription().getTopPosition().getValue(this.currentWidthBreakpoint)[1] }) .letterSpacing(HomeConstants.BANNER_TEXT_LETTER_SPACES[1]) .maxLines(1) } .padding({ - left: !item.getDescription().getIsLeftCenter().getValue(this.currentBreakpoint) ? - item.getDescription().getLeftPosition().getValue(this.currentBreakpoint)[0] : '0', - top: !item.getDescription().getIsTopCenter().getValue(this.currentBreakpoint) ? - item.getDescription().getTopPosition().getValue(this.currentBreakpoint)[0] : '0' + left: !item.getDescription().getIsLeftCenter().getValue(this.currentWidthBreakpoint) ? + item.getDescription().getLeftPosition().getValue(this.currentWidthBreakpoint)[0] : '0', + top: !item.getDescription().getIsTopCenter().getValue(this.currentWidthBreakpoint) ? + item.getDescription().getTopPosition().getValue(this.currentWidthBreakpoint)[0] : '0' }) - .alignItems(item.getDescription().getIsLeftCenter().getValue(this.currentBreakpoint) ? + .alignItems(item.getDescription().getIsLeftCenter().getValue(this.currentWidthBreakpoint) ? HorizontalAlign.Center : HorizontalAlign.Start) - .justifyContent(!item.getDescription().getIsTopCenter().getValue(this.currentBreakpoint) ? + .justifyContent(!item.getDescription().getIsTopCenter().getValue(this.currentWidthBreakpoint) ? FlexAlign.Start : FlexAlign.Center) .height(CommonConstants.FULL_PERCENT) .width(CommonConstants.FULL_PERCENT) } - .height(item.getBannerImg().getHeight().getValue(this.currentBreakpoint)) + .height(item.getBannerImg().getHeight().getValue(this.currentWidthBreakpoint)) .width(CommonConstants.FULL_PERCENT) // 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.currentBreakpoint)) + HomeConstants.BANNER_RATIOS[2]).getValue(this.currentWidthBreakpoint)) }, (item: Banner, index: number) => index + JSON.stringify(item)) } .tabIndex(getTabIndex(HomeConstants.DIRECTION_LIST[2])) .index(2) - .displayCount(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_SM ? 1 : HomeConstants.TWO) + .displayCount(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM ? 1 : HomeConstants.TWO) // Interval between banner images .itemSpace(HomeConstants.SWIPER_ITEM_SPACE) // Setting the navigation point Style of the swiper. - .indicator(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_SM ? Indicator.dot() + .indicator(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM ? Indicator.dot() .itemWidth($r('app.float.swiper_item_size')) .itemHeight($r('app.float.swiper_item_size')) .selectedItemWidth($r('app.float.swiper_selected_item_width')) @@ -156,16 +156,16 @@ export struct BannerView { ) .loop(true) .width(CommonConstants.FULL_PERCENT) - .visibility((this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG) && (this.currentTopIndex === 1) ? + .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. .prevMargin(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.currentBreakpoint)) + .getValue(this.currentWidthBreakpoint)) .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.currentBreakpoint)) + .getValue(this.currentWidthBreakpoint)) // Switch the tab to switch the banner display effect. Row({ space: HomeConstants.BANNER_ROW_SPACE }) { @@ -202,7 +202,7 @@ export struct BannerView { } .height(this.getBannerNewHeight(this.windowWidth)) .width(CommonConstants.FULL_PERCENT) - .visibility((this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG) && (this.currentTopIndex === 1) ? + .visibility((this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG) && (this.currentTopIndex === 1) ? Visibility.Visible : Visibility.None) .padding({ left: $r('app.float.banner_padding_sm'), @@ -215,25 +215,25 @@ export struct BannerView { bottom: $r('app.float.banner_margin') }) .padding({ - left: this.currentBreakpoint === BreakpointConstants.BREAKPOINT_SM ? $r('app.float.banner_padding_sm') : '0', - right: this.currentBreakpoint === BreakpointConstants.BREAKPOINT_SM ? $r('app.float.banner_padding_sm') : '0' + 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' }) .visibility(this.currentTopIndex === 2 ? Visibility.None : Visibility.Visible) Row() { // Immersive layout. Column() { - Text(this.bannerImgList[2].getDescription().getIsLeftCenter().getValue(this.currentBreakpoint) ? + Text(this.bannerImgList[2].getDescription().getIsLeftCenter().getValue(this.currentWidthBreakpoint) ? this.bannerImgList[2].getDescription().getDescription()[0] + this.bannerImgList[2].getDescription().getDescription()[1] : this.bannerImgList[2].getDescription().getDescription()[0]) .fontSize(new BreakpointType($r('app.float.immersive_text_1_font_sm'), $r('app.float.immersive_text_1_font_md'), $r('app.float.immersive_text_1_font_lg')) - .getValue(this.currentBreakpoint)) + .getValue(this.currentWidthBreakpoint)) .fontWeight(this.bannerImgList[2].getDescription().getFontWeight()[0]) .lineHeight(new BreakpointType($r('app.float.immersive_text_1_line_sm'), $r('app.float.immersive_text_1_line_md'), $r('app.float.immersive_text_1_line_lg')) - .getValue(this.currentBreakpoint)) + .getValue(this.currentWidthBreakpoint)) .fontColor(Color.White) .letterSpacing(HomeConstants.BANNER_TEXT_LETTER_SPACES[2]) .maxLines(1) @@ -241,28 +241,28 @@ export struct BannerView { Text(this.bannerImgList[2].getDescription().getDescription()[1]) .fontSize(new BreakpointType($r('app.float.immersive_text_1_font_sm'), $r('app.float.immersive_text_1_font_md'), $r('app.float.immersive_text_1_font_lg')) - .getValue(this.currentBreakpoint)) + .getValue(this.currentWidthBreakpoint)) .fontWeight(this.bannerImgList[2].getDescription().getFontWeight()[0]) .lineHeight(new BreakpointType($r('app.float.immersive_text_1_line_sm'), $r('app.float.immersive_text_1_line_md'), $r('app.float.immersive_text_1_line_lg')) - .getValue(this.currentBreakpoint)) + .getValue(this.currentWidthBreakpoint)) .fontColor(Color.White) .letterSpacing(HomeConstants.BANNER_TEXT_LETTER_SPACES[2]) .maxLines(1) - .visibility(this.bannerImgList[2].getDescription().getIsLeftCenter().getValue(this.currentBreakpoint) ? + .visibility(this.bannerImgList[2].getDescription().getIsLeftCenter().getValue(this.currentWidthBreakpoint) ? Visibility.None : Visibility.Visible) Text(this.bannerImgList[2].getDescription().getDescription()[2]) .fontSize(new BreakpointType($r('app.float.immersive_text_2_font_sm'), $r('app.float.immersive_text_2_font_md'), $r('app.float.immersive_text_2_font_lg')) - .getValue(this.currentBreakpoint)) + .getValue(this.currentWidthBreakpoint)) .fontWeight(this.bannerImgList[2].getDescription().getFontWeight()[1]) .lineHeight(new BreakpointType($r('app.float.immersive_text_2_line_sm'), $r('app.float.immersive_text_2_line_md'), $r('app.float.immersive_text_2_line_lg')) - .getValue(this.currentBreakpoint)) + .getValue(this.currentWidthBreakpoint)) .fontColor(Color.White) .margin({ - top: this.bannerImgList[2].getDescription().getTopPosition().getValue(this.currentBreakpoint)[1] + top: this.bannerImgList[2].getDescription().getTopPosition().getValue(this.currentWidthBreakpoint)[1] }) .letterSpacing(HomeConstants.BANNER_TEXT_LETTER_SPACES[1]) .maxLines(1) @@ -270,16 +270,16 @@ export struct BannerView { .padding({ left: new BreakpointType($r('app.float.immersive_col_padding_left_sm'), $r('app.float.immersive_col_padding_left_md'), $r('app.float.immersive_col_padding_left_lg')) - .getValue(this.currentBreakpoint), + .getValue(this.currentWidthBreakpoint), top: new BreakpointType($r('app.float.immersive_col_padding_top_sm'), $r('app.float.immersive_col_padding_top_md'), $r('app.float.immersive_col_padding_top_lg')) - .getValue(this.currentBreakpoint) + .getValue(this.currentWidthBreakpoint) }) .height(CommonConstants.FULL_PERCENT) .width(CommonConstants.FULL_PERCENT) - .alignItems(new BreakpointType(true, false, false).getValue(this.currentBreakpoint) ? + .alignItems(new BreakpointType(true, false, false).getValue(this.currentWidthBreakpoint) ? HorizontalAlign.Center : HorizontalAlign.Start) - .justifyContent(!this.bannerImgList[2].getDescription().getIsTopCenter().getValue(this.currentBreakpoint) ? + .justifyContent(!this.bannerImgList[2].getDescription().getIsTopCenter().getValue(this.currentWidthBreakpoint) ? FlexAlign.Start : FlexAlign.Center) } .margin({ @@ -290,19 +290,19 @@ export struct BannerView { right: $r('app.float.home_content_padding') }) .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.currentBreakpoint)) + $r('app.float.immersive_banner_height_lg')).getValue(this.currentWidthBreakpoint)) .width(CommonConstants.FULL_PERCENT) .visibility(this.currentTopIndex === 2 ? Visibility.Visible : Visibility.None) } .width(CommonConstants.FULL_PERCENT) - .padding({ left: this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG && this.currentTopIndex === 2 ? + .padding({ left: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG && 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 = px2vp(windowWidth) - new BreakpointType(HomeConstants.VIDEO_GRID_MARGIN[0], - HomeConstants.VIDEO_GRID_MARGIN[1], HomeConstants.VIDEO_GRID_MARGIN[2]).getValue(this.currentBreakpoint) - + HomeConstants.VIDEO_GRID_MARGIN[1], HomeConstants.VIDEO_GRID_MARGIN[2]).getValue(this.currentWidthBreakpoint) - HomeConstants.LG_SIDEBAR_WIDTH; // Calculate the width of a single image based on the percent. result = (result - HomeConstants.VIDEO_GRID_ITEM_SPACE * HomeConstants.TWO) * CommonConstants.FOUR / @@ -315,7 +315,7 @@ export struct BannerView { @Component struct BannerText { private banner: Banner = new BannerViewModel().getBannerList()[0]; - private currentBreakpoint: string = BreakpointConstants.BREAKPOINT_LG; + private currentWidthBreakpoint: string = BreakpointConstants.BREAKPOINT_LG; private index: number = 0; build() { @@ -328,46 +328,46 @@ struct BannerText { .borderRadius($r('app.float.banner_img_border_radius')) Column() { - Text(this.banner.getDescription().getIsLeftCenter().getValue(this.currentBreakpoint) ? + Text(this.banner.getDescription().getIsLeftCenter().getValue(this.currentWidthBreakpoint) ? this.banner.getDescription().getDescription()[0] + this.banner.getDescription().getDescription()[1] : this.banner.getDescription().getDescription()[0]) - .fontSize(this.banner.getDescription().getFontSize().getValue(this.currentBreakpoint)[0]) + .fontSize(this.banner.getDescription().getFontSize().getValue(this.currentWidthBreakpoint)[0]) .fontWeight(this.banner.getDescription().getFontWeight()[0]) - .lineHeight(this.banner.getDescription().getLineHeight().getValue(this.currentBreakpoint)[0]) + .lineHeight(this.banner.getDescription().getLineHeight().getValue(this.currentWidthBreakpoint)[0]) .fontColor(Color.White) .letterSpacing(HomeConstants.BANNER_TEXT_LETTER_SPACES[2]) .maxLines(1) Text(this.banner.getDescription().getDescription()[1]) - .fontSize(this.banner.getDescription().getFontSize().getValue(this.currentBreakpoint)[0]) + .fontSize(this.banner.getDescription().getFontSize().getValue(this.currentWidthBreakpoint)[0]) .fontWeight(this.banner.getDescription().getFontWeight()[0]) - .lineHeight(this.banner.getDescription().getLineHeight().getValue(this.currentBreakpoint)[0]) + .lineHeight(this.banner.getDescription().getLineHeight().getValue(this.currentWidthBreakpoint)[0]) .fontColor(Color.White) .letterSpacing(HomeConstants.BANNER_TEXT_LETTER_SPACES[2]) .maxLines(1) - .visibility(this.banner.getDescription().getIsLeftCenter().getValue(this.currentBreakpoint) ? + .visibility(this.banner.getDescription().getIsLeftCenter().getValue(this.currentWidthBreakpoint) ? Visibility.None : Visibility.Visible) Text(this.banner.getDescription().getDescription()[2]) - .fontSize(this.banner.getDescription().getFontSize().getValue(this.currentBreakpoint)[1]) + .fontSize(this.banner.getDescription().getFontSize().getValue(this.currentWidthBreakpoint)[1]) .fontWeight(this.banner.getDescription().getFontWeight()[1]) - .lineHeight(this.banner.getDescription().getLineHeight().getValue(this.currentBreakpoint)[1]) + .lineHeight(this.banner.getDescription().getLineHeight().getValue(this.currentWidthBreakpoint)[1]) .fontColor(Color.White) .margin({ - top: this.banner.getDescription().getTopPosition().getValue(this.currentBreakpoint)[1] + top: this.banner.getDescription().getTopPosition().getValue(this.currentWidthBreakpoint)[1] }) .letterSpacing(HomeConstants.BANNER_TEXT_LETTER_SPACES[1]) .maxLines(1) } .padding({ - left: !this.banner.getDescription().getIsLeftCenter().getValue(this.currentBreakpoint) ? - this.banner.getDescription().getLeftPosition().getValue(this.currentBreakpoint)[0] : '0', - top: !this.banner.getDescription().getIsTopCenter().getValue(this.currentBreakpoint) ? - this.banner.getDescription().getTopPosition().getValue(this.currentBreakpoint)[0] : '0' + left: !this.banner.getDescription().getIsLeftCenter().getValue(this.currentWidthBreakpoint) ? + this.banner.getDescription().getLeftPosition().getValue(this.currentWidthBreakpoint)[0] : '0', + top: !this.banner.getDescription().getIsTopCenter().getValue(this.currentWidthBreakpoint) ? + this.banner.getDescription().getTopPosition().getValue(this.currentWidthBreakpoint)[0] : '0' }) - .alignItems(this.banner.getDescription().getIsLeftCenter().getValue(this.currentBreakpoint) ? + .alignItems(this.banner.getDescription().getIsLeftCenter().getValue(this.currentWidthBreakpoint) ? HorizontalAlign.Center : HorizontalAlign.Start) - .justifyContent(!this.banner.getDescription().getIsTopCenter().getValue(this.currentBreakpoint) ? + .justifyContent(!this.banner.getDescription().getIsTopCenter().getValue(this.currentWidthBreakpoint) ? FlexAlign.Start : FlexAlign.Center) .width(CommonConstants.FULL_PERCENT) .height(CommonConstants.FULL_PERCENT) diff --git a/features/home/src/main/ets/view/CommonView.ets b/features/home/src/main/ets/view/CommonView.ets index a869dcdca7464934448eca35007d08d459e10cb5..edca007f5d575eb842eb2134b7b552c3f0bb6fe9 100644 --- a/features/home/src/main/ets/view/CommonView.ets +++ b/features/home/src/main/ets/view/CommonView.ets @@ -44,7 +44,7 @@ export struct VideoImgRating { @Component export struct VideoTitle { - @StorageLink('currentBreakpoint') currentBreakpoint: string = BreakpointConstants.BREAKPOINT_LG; + @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string = BreakpointConstants.BREAKPOINT_LG; @StorageLink('currentTopIndex') currentTopIndex: number = 0; private title: string = ''; @@ -62,7 +62,7 @@ export struct VideoTitle { @Component export struct VideoContent { - @StorageLink('currentBreakpoint') currentBreakpoint: string = BreakpointConstants.BREAKPOINT_LG; + @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string = BreakpointConstants.BREAKPOINT_LG; @StorageLink('currentTopIndex') currentTopIndex: number = 0; private content: string = ''; @@ -81,7 +81,7 @@ export struct VideoContent { @Component export struct SubtitleComponent { - @StorageLink('currentBreakpoint') currentBreakpoint: string = BreakpointConstants.BREAKPOINT_LG; + @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string = BreakpointConstants.BREAKPOINT_LG; @StorageLink('currentTopIndex') currentTopIndex: number = 0; private title: string = ''; @@ -136,14 +136,14 @@ export struct VideoImgComponent { @Component export struct VideoImgPlay { - @StorageLink('currentBreakpoint') currentBreakpoint: string = BreakpointConstants.BREAKPOINT_LG; + @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string = BreakpointConstants.BREAKPOINT_LG; build() { Column() { Image($r('app.media.new_video_play')) - .height(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? $r('app.float.video_img_size_lg') : + .height(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? $r('app.float.video_img_size_lg') : $r('app.float.video_img_size')) - .width(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? $r('app.float.video_img_size_lg') : + .width(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? $r('app.float.video_img_size_lg') : $r('app.float.video_img_size')) } .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 a7bcb74ae4894c5ab78f800204c97f023601c464..74ecb3a959291293f53cd4ff6d5905f56e536c33 100644 --- a/features/home/src/main/ets/view/DailyVideo.ets +++ b/features/home/src/main/ets/view/DailyVideo.ets @@ -21,7 +21,7 @@ import { getTabIndex, SubtitleComponent, VideoImgComponent, VideoImgPlay, VideoI @Component export struct DailyVideo { - @StorageLink('currentBreakpoint') currentBreakpoint: string = BreakpointConstants.BREAKPOINT_LG; + @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string = BreakpointConstants.BREAKPOINT_LG; @StorageLink('windowWidth') windowWidth: number = 0; @StorageLink('currentTopIndex') currentTopIndex: number = 0; @State isShowingMainBorder: boolean = false; @@ -85,39 +85,39 @@ export struct DailyVideo { Row() { Text(this.mainDailyVideoImg.getTitle()) - .fontSize(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? + .fontSize(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? $r('app.float.main_daily_title_font_lg') : $r('app.float.main_daily_title_font')) .fontColor(Color.White) .fontWeight(CommonConstants.FONT_WEIGHT_700) - .margin({ left: this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? + .margin({ left: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? $r('app.float.main_daily_margin_lg') : $r('app.float.main_daily_margin') }) .layoutWeight(1) .maxLines(1) Text(this.mainDailyVideoImg.getRating()) - .fontSize(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? + .fontSize(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? $r('app.float.main_daily_rating_font_lg') : $r('app.float.main_daily_rating_font')) .fontWeight(FontWeight.Normal) .fontColor(Color.White) - .height(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? + .height(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? $r('app.float.main_daily_rating_height_lg') : $r('app.float.main_daily_rating_height')) - .width(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? + .width(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? $r('app.float.main_daily_rating_width_lg') : $r('app.float.main_daily_rating_width')) .margin({ - right: this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG? + right: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG? $r('app.float.main_daily_rating_right_lg') : $r('app.float.main_daily_rating_right'), - top: this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? + top: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? $r('app.float.main_daily_rating_top_lg') : $r('app.float.main_daily_rating_top') }) .backgroundColor($r('app.color.main_daily_rating_background')) - .borderRadius(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? + .borderRadius(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? $r('app.float.main_daily_rating_radius_lg') : $r('app.float.main_daily_rating_radius')) .textAlign(TextAlign.Center) } .alignItems(VerticalAlign.Top) .justifyContent(FlexAlign.Start) .width(CommonConstants.FULL_PERCENT) - .height(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? + .height(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? $r('app.float.main_daily_row_height_lg') : $r('app.float.main_daily_row_height')) } .width(CommonConstants.FULL_PERCENT) @@ -127,51 +127,51 @@ export struct DailyVideo { 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')) - .getValue(this.currentBreakpoint)) + .getValue(this.currentWidthBreakpoint)) .width(new BreakpointType($r('app.float.small_daily_image_width_sm'), $r('app.float.small_daily_image_width_md'), $r('app.float.small_daily_image_width_lg')) - .getValue(this.currentBreakpoint)) + .getValue(this.currentWidthBreakpoint)) .borderRadius($r('app.float.daily_small_img_radius')) Column() { Text(this.mainDailyVideoImg.getOtherInfo()) - .fontSize(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? + .fontSize(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? $r('app.float.main_daily_other_font_lg') : $r('app.float.main_daily_other_font')) .fontWeight(FontWeight.Normal) .maxLines(1) Text(this.mainDailyVideoImg.getContent()) .opacity(CommonConstants.TEXT_OPACITY[0]) - .fontSize(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? + .fontSize(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? $r('app.float.main_daily_content_font_lg') : $r('app.float.main_daily_content_font')) .fontWeight(FontWeight.Normal) .maxLines(1) } .margin({ - left: this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? + left: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? $r('app.float.small_daily_column_margin_lg'): $r('app.float.small_daily_column_margin'), - right: this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? + right: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? $r('app.float.small_daily_column_margin_lg'): $r('app.float.small_daily_column_margin') }) .alignItems(HorizontalAlign.Start) .layoutWeight(1) Button(HomeConstants.HOME_BUTTON_TEXT[0]) - .fontSize(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? + .fontSize(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? $r('app.float.main_daily_button_font_lg'): $r('app.float.main_daily_button_font')) .fontColor($r('app.color.tab_sel_color')) .fontWeight(CommonConstants.FONT_WEIGHT_500) - .height(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? + .height(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? $r('app.float.main_daily_button_height_lg') : $r('app.float.main_daily_button_height_lg')) - .width(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? + .width(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? $r('app.float.main_daily_button_width_lg') : $r('app.float.main_daily_button_width_lg')) .borderRadius($r('app.float.main_daily_button_radius')) .backgroundColor($r('app.color.button_background')) } .alignItems(VerticalAlign.Center) .padding({ - left: this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? + left: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? $r('app.float.small_daily_row_padding_lg') : $r('app.float.small_daily_row_padding'), - right: this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? + right: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? $r('app.float.small_daily_row_padding_lg') : $r('app.float.small_daily_row_padding') }) .layoutWeight(2) @@ -179,7 +179,7 @@ export struct DailyVideo { .tabIndex(getTabIndex(HomeConstants.DIRECTION_LIST[6])) .width(CommonConstants.FULL_PERCENT) // Dynamically setting the height at different breakpoints. - .height(this.getDailyVideoHeight(this.currentBreakpoint, this.windowWidth, true)) + .height(this.getDailyVideoHeight(this.currentWidthBreakpoint, this.windowWidth, true)) .borderRadius($r('app.float.card_radius')) .backgroundColor($r('app.color.home_component_background')) } @@ -206,10 +206,10 @@ export struct DailyVideo { .aspectRatio(HomeConstants.VIDEO_DIALOG_ASPECT_RATIO) Text(item.getTitle()) - .fontSize(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? + .fontSize(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? $r('app.float.daily_title_font_lg') : $r('app.float.daily_title_font')) .fontWeight(FontWeight.Normal) - .lineHeight(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? + .lineHeight(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? $r('app.float.video_title_line_lg') : $r('app.float.video_title_line')) .margin({ top: $r('app.float.daily_title_margin') }) .fontColor(this.currentTopIndex === 2 ? Color.White : $r('app.color.normal_font_color')) @@ -221,7 +221,7 @@ export struct DailyVideo { .margin({ top: $r('app.float.daily_content_margin') }) .opacity(CommonConstants.TEXT_OPACITY[0]) .fontColor(this.currentTopIndex === 2 ? Color.White : $r('app.color.normal_font_color')) - .visibility(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_SM ? Visibility.Visible : + .visibility(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM ? Visibility.Visible : Visibility.None) } .alignItems(HorizontalAlign.Start) @@ -230,7 +230,7 @@ export struct DailyVideo { } .tabIndex(getTabIndex(HomeConstants.DIRECTION_LIST[7])) // Dynamically setting the height at different breakpoints. - .height(this.getDailyVideoHeight(this.currentBreakpoint, this.windowWidth, false)) + .height(this.getDailyVideoHeight(this.currentWidthBreakpoint, this.windowWidth, false)) .width(CommonConstants.FULL_PERCENT) // Sets the number of grid layout columns and evenly divides the height. .columnsTemplate(CommonConstants.VIDEO_GRID_COLUMNS[0]) @@ -240,27 +240,27 @@ export struct DailyVideo { } } } - .padding({ left: this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG && this.currentTopIndex === 2 ? + .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') }) } - getDailyVideoHeight(currentBreakpoint: string, windowWidth: number, isMain: boolean): string { + getDailyVideoHeight(currentWidthBreakpoint: string, windowWidth: number, isMain: boolean): string { // Obtain the window width and subtract the blank parts on both sides. let result: number = px2vp(windowWidth) - new BreakpointType(HomeConstants.VIDEO_GRID_MARGIN[0], - HomeConstants.VIDEO_GRID_MARGIN[1], HomeConstants.VIDEO_GRID_MARGIN[2]).getValue(this.currentBreakpoint) - + HomeConstants.VIDEO_GRID_MARGIN[1], HomeConstants.VIDEO_GRID_MARGIN[2]).getValue(this.currentWidthBreakpoint) - HomeConstants.VIDEO_GRID_ITEM_SPACE; // Calculate the width of a single image based on the number of grid columns. - if (currentBreakpoint === BreakpointConstants.BREAKPOINT_LG) { + if (currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG) { result = (result - HomeConstants.LG_SIDEBAR_WIDTH) / HomeConstants.TWO; - } else if (currentBreakpoint === BreakpointConstants.BREAKPOINT_MD) { + } else if (currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_MD) { result /= HomeConstants.TWO; } else { result /= 1; } // Calculate the height of a single image and title, and calculate the total height of the grid layout. result = (result - HomeConstants.VIDEO_GRID_ITEM_SPACE) / HomeConstants.VIDEO_DIALOG_ASPECT_RATIO; - if (currentBreakpoint === BreakpointConstants.BREAKPOINT_SM && !isMain) { + if (currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM && !isMain) { return (result + HomeConstants.DAILY_VIDEO_DESCRIPTION_HEIGHT[0] + HomeConstants.HEIGHT_UNIT); } else { return (result + HomeConstants.DAILY_VIDEO_DESCRIPTION_HEIGHT[1] + HomeConstants.HEIGHT_UNIT); diff --git a/features/home/src/main/ets/view/Home.ets b/features/home/src/main/ets/view/Home.ets index 547fe41cdd49115db0818148b39b8675b34a6dc0..e29c1e836a0d0b804ee28219d1de868b7e82c007 100644 --- a/features/home/src/main/ets/view/Home.ets +++ b/features/home/src/main/ets/view/Home.ets @@ -26,7 +26,7 @@ export struct Home { @State isSearching: boolean = false; @StorageLink('scrollHeight') scrollHeight: number = 0; @StorageLink('currentTopIndex') currentTopIndex: number = 0; - @StorageLink('currentBreakpoint') currentBreakpoint: string = BreakpointConstants.BREAKPOINT_LG; + @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string = BreakpointConstants.BREAKPOINT_LG; private tabList: FooterTab[] = new FooterTabViewModel().getTabList(); private scroller: Scroller = new Scroller(); private sideScroller: Scroller = new Scroller(); @@ -46,9 +46,9 @@ export struct Home { .margin({ top: $r('app.float.tab_top_margin') }) .opacity(index === this.currentBottomIndex ? CommonConstants.TEXT_OPACITY[3] : CommonConstants.TEXT_OPACITY[0]) } - .padding({ bottom: this.currentBreakpoint !== BreakpointConstants.BREAKPOINT_LG && deviceInfo.deviceType !== + .padding({ bottom: this.currentWidthBreakpoint !== BreakpointConstants.BREAKPOINT_LG && deviceInfo.deviceType !== CommonConstants.DEVICE_TYPES[0] ? $r('app.float.bottom_navigation') : 0 }) - .height(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? $r('app.float.tab_height_lg') : + .height(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? $r('app.float.tab_height_lg') : CommonConstants.FULL_PERCENT) .width(CommonConstants.FULL_PERCENT) .justifyContent(FlexAlign.Center) @@ -56,7 +56,7 @@ export struct Home { build() { Tabs({ - barPosition: this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? BarPosition.Start : BarPosition.End + barPosition: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? BarPosition.Start : BarPosition.End }) { TabContent() { if (this.currentTopIndex === 2) { @@ -82,7 +82,7 @@ export struct Home { HomeHeader({ isSearching: $isSearching }) .visibility(!this.isSearching ? Visibility.Visible : Visibility.None) - .padding({ left: this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? + .padding({ left: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? $r('app.float.side_bar_width') : 0 }) } .height(CommonConstants.FULL_PERCENT) @@ -126,18 +126,18 @@ export struct Home { .tabBar(this.BottomTabBuilder(this.tabList[3], 3)) } // Change the position and size of the tab at the bottom. - .barWidth(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? $r('app.float.bottom_tab_bar_width_lg') : + .barWidth(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? $r('app.float.bottom_tab_bar_width_lg') : CommonConstants.FULL_PERCENT) - .barHeight(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_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') : $r('app.float.tab_size'))) - .barMode(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? BarMode.Scrollable : BarMode.Fixed, + .barMode(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? BarMode.Scrollable : BarMode.Fixed, { nonScrollableLayoutStyle: LayoutStyle.ALWAYS_CENTER }) - .vertical(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG) + .vertical(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG) .barBackgroundColor(this.currentTopIndex === 2 && this.currentBottomIndex === 0 ? - (this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? $r('app.color.side_bar_background') : + (this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? $r('app.color.side_bar_background') : $r('app.color.home_content_background')) : $r('app.color.tab_background_color')) - .barOverlap(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG && this.currentTopIndex === 2 ? true : + .barOverlap(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG && this.currentTopIndex === 2 ? true : false) .onChange((index: number) => { this.currentBottomIndex = index; diff --git a/features/home/src/main/ets/view/HomeContent.ets b/features/home/src/main/ets/view/HomeContent.ets index 73b77d32831a85aaa1c83b93200d18778c70c6f2..aacd955eca5565a17da786adb153f807982cfa4f 100644 --- a/features/home/src/main/ets/view/HomeContent.ets +++ b/features/home/src/main/ets/view/HomeContent.ets @@ -26,7 +26,7 @@ import { PreviousVideo } from './PreviousVideo'; @Component export struct HomeContent { - @StorageLink('currentBreakpoint') currentBreakpoint: string = BreakpointConstants.BREAKPOINT_LG; + @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string = BreakpointConstants.BREAKPOINT_LG; @StorageLink('currentTopIndex') currentTopIndex: number = 0; @StorageLink('windowWidth') windowWidth: number = 0; @State gridStatus: number = 1; @@ -83,22 +83,22 @@ export struct HomeContent { } .padding({ left: new BreakpointType($r('app.float.home_content_padding_sm'), $r('app.float.home_content_padding_md'), - $r('app.float.home_content_padding_lg')).getValue(this.currentBreakpoint), + $r('app.float.home_content_padding_lg')).getValue(this.currentWidthBreakpoint), right: new BreakpointType($r('app.float.home_content_padding_sm'), $r('app.float.home_content_padding_md'), - $r('app.float.home_content_padding_lg')).getValue(this.currentBreakpoint) + $r('app.float.home_content_padding_lg')).getValue(this.currentWidthBreakpoint) }) .width(CommonConstants.FULL_PERCENT) } // Set the background image to cover the side and top tabs. .backgroundImage(this.currentTopIndex === 2 && !this.isSearching ? new BreakpointType( $r('app.media.immersive_background_sm'), $r('app.media.immersive_background_md'), - $r('app.media.immersive_background_lg')).getValue(this.currentBreakpoint) : $r('app.media.white_background')) + $r('app.media.immersive_background_lg')).getValue(this.currentWidthBreakpoint) : $r('app.media.white_background')) // Set the size of the background image. .backgroundImageSize({ width: CommonConstants.FULL_PERCENT, height: new BreakpointType( $r('app.float.immersive_background_height_sm'), $r('app.float.immersive_background_height_md'), - $r('app.float.immersive_background_height_lg')).getValue(this.currentBreakpoint) }) + $r('app.float.immersive_background_height_lg')).getValue(this.currentWidthBreakpoint) }) // Set the uniform background color. - .backgroundColor(this.currentTopIndex === 2 && !this.isSearching ? (this.currentBreakpoint !== BreakpointConstants.BREAKPOINT_MD ? + .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 }) diff --git a/features/home/src/main/ets/view/HomeHeader.ets b/features/home/src/main/ets/view/HomeHeader.ets index 9e26499305af2a04a638acc756ed5b467a24864b..fe6170e241c0cf433ce82bf6d84a0e1d36fc3522 100644 --- a/features/home/src/main/ets/view/HomeHeader.ets +++ b/features/home/src/main/ets/view/HomeHeader.ets @@ -24,7 +24,7 @@ export struct HomeHeader { @State isShowingBorder: boolean = false; @Link isSearching: boolean; @StorageLink('scrollHeight') scrollHeight: number = 0; - @StorageLink('currentBreakpoint') currentBreakpoint: string = BreakpointConstants.BREAKPOINT_LG; + @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string = BreakpointConstants.BREAKPOINT_LG; @StorageLink('currentTopIndex') currentTopIndex: number = 0; @Styles topFocusedStyles(): void { @@ -89,15 +89,15 @@ export struct HomeHeader { }) { this.searchBar() } - .padding({ top: this.currentBreakpoint === BreakpointConstants.BREAKPOINT_SM || deviceInfo.deviceType === + .padding({ top: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM || deviceInfo.deviceType === CommonConstants.DEVICE_TYPES[0] ? 0 : $r('app.float.search_top_padding_top') }) - .height(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_SM || deviceInfo.deviceType === + .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')) } // 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.currentBreakpoint) && this.currentTopIndex === 2 ? $r('app.color.home_content_background') : + .getValue(this.currentWidthBreakpoint) && this.currentTopIndex === 2 ? $r('app.color.home_content_background') : Color.Transparent) .padding({ left: $r('app.float.search_top_padding'), @@ -113,7 +113,7 @@ export struct HomeHeader { Column() { List({ space: new BreakpointType(HomeConstants.SEARCH_TAB_LIST_SPACES[0], HomeConstants.SEARCH_TAB_LIST_SPACES[1], - HomeConstants.SEARCH_TAB_LIST_SPACES[2]).getValue(this.currentBreakpoint) + HomeConstants.SEARCH_TAB_LIST_SPACES[2]).getValue(this.currentWidthBreakpoint) }) { ForEach(HomeConstants.TOP_TOPIC_LIST, (item: string, index: number) => { ListItem() { @@ -161,7 +161,7 @@ export struct HomeHeader { .height($r('app.float.top_tab_img_size')) .margin({ left: $r('app.float.top_tab_img_margin') }) .fillColor(this.currentTopIndex === 2 ? Color.White : Color.Black) - .visibility(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_SM ? Visibility.Visible : Visibility.None) + .visibility(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM ? Visibility.Visible : Visibility.None) } .height($r('app.float.top_bar_height')) .width(CommonConstants.FULL_PERCENT) @@ -201,7 +201,7 @@ export struct HomeHeader { .backgroundColor(this.currentTopIndex === 2 ? $r('app.color.search_bar_background') : '') // Search image. - Image(this.currentTopIndex === 2 && this.currentBreakpoint ? $r("app.media.ic_public_search_white") : + Image(this.currentTopIndex === 2 && this.currentWidthBreakpoint ? $r("app.media.ic_public_search_white") : $r('app.media.ic_public_search')) .width($r('app.float.search_img_size')) .height($r('app.float.search_img_size')) @@ -221,9 +221,9 @@ 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.currentBreakpoint === BreakpointConstants.BREAKPOINT_SM ? Visibility.None : Visibility.Visible) + .visibility(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM ? Visibility.None : Visibility.Visible) } - .padding({ left: this.currentBreakpoint !== BreakpointConstants.BREAKPOINT_SM ? + .padding({ left: this.currentWidthBreakpoint !== BreakpointConstants.BREAKPOINT_SM ? $r('app.float.search_bar_row_padding') : '0' }) .justifyContent(FlexAlign.Center) .width(CommonConstants.FULL_PERCENT) diff --git a/features/home/src/main/ets/view/IconView.ets b/features/home/src/main/ets/view/IconView.ets index 117f06e17f9dd0f8b206ba7de78efc8999fa5209..007415e07f5d67652c4484501e8ca16167ec3219 100644 --- a/features/home/src/main/ets/view/IconView.ets +++ b/features/home/src/main/ets/view/IconView.ets @@ -21,7 +21,7 @@ import { getTabIndex } from './CommonView'; @Component export struct IconView { - @StorageLink('currentBreakpoint') currentBreakpoint: string = BreakpointConstants.BREAKPOINT_LG; + @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string = BreakpointConstants.BREAKPOINT_LG; @StorageLink('windowWidth') windowWidth: number = 0; @StorageLink('currentTopIndex') currentTopIndex: number = 0; private iconList: VideoIcon[] = new IconViewModel().getIconList(); @@ -71,8 +71,8 @@ export struct IconView { .tabIndex(getTabIndex(HomeConstants.DIRECTION_LIST[3])) // The number of different breakpoints is different. .displayCount(new BreakpointType(CommonConstants.FOUR, HomeConstants.SIX, HomeConstants.EIGHT) - .getValue(this.currentBreakpoint)) - .nextMargin(this.getNextMargin(this.windowWidth, this.currentBreakpoint)) + .getValue(this.currentWidthBreakpoint)) + .nextMargin(this.getNextMargin(this.windowWidth, this.currentWidthBreakpoint)) .indicator(false) .width(CommonConstants.FULL_PERCENT) .loop(false) @@ -80,23 +80,23 @@ export struct IconView { .displayMode(SwiperDisplayMode.AUTO_LINEAR) } .padding({ - left: this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? $r('app.float.icon_list_column_padding_lg') : + left: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? $r('app.float.icon_list_column_padding_lg') : $r('app.float.icon_list_column_padding') }) - .margin({ top: this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? + .margin({ top: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? $r('app.float.icon_list_column_margin_lg') : $r('app.float.icon_list_column_margin') }) - .visibility(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG && this.currentTopIndex === 2 ? + .visibility(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG && this.currentTopIndex === 2 ? Visibility.None : Visibility.Visible) } - getNextMargin(windowWidth: number, currentBreakpoint: string): string { + getNextMargin(windowWidth: number, currentWidthBreakpoint: string): string { // Obtain the window width and subtract the blank parts on both sides. let result: number = px2vp(windowWidth) - new BreakpointType(HomeConstants.VIDEO_GRID_MARGIN[0], - HomeConstants.VIDEO_GRID_MARGIN[1], HomeConstants.VIDEO_GRID_MARGIN[2]).getValue(this.currentBreakpoint) / + HomeConstants.VIDEO_GRID_MARGIN[1], HomeConstants.VIDEO_GRID_MARGIN[2]).getValue(this.currentWidthBreakpoint) / HomeConstants.TWO; - if (currentBreakpoint === BreakpointConstants.BREAKPOINT_SM) { + if (currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM) { result = result / HomeConstants.DISPLAYED_ICON_NUMBER[0]; - } else if (currentBreakpoint === BreakpointConstants.BREAKPOINT_MD) { + } else if (currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_MD) { result = result / HomeConstants.DISPLAYED_ICON_NUMBER[1]; } else { result = (result - HomeConstants.LG_SIDEBAR_WIDTH) / HomeConstants.DISPLAYED_ICON_NUMBER[2]; diff --git a/features/home/src/main/ets/view/NewVideoRelease.ets b/features/home/src/main/ets/view/NewVideoRelease.ets index bf809080079deb5061ca17872ac16512ba1131f4..4194d60da4906d4fec06b797b085c8b6d9002054 100644 --- a/features/home/src/main/ets/view/NewVideoRelease.ets +++ b/features/home/src/main/ets/view/NewVideoRelease.ets @@ -22,7 +22,7 @@ import { getTabIndex,SubtitleComponent,VideoContent,VideoImgComponent, VideoImgP @Component export struct NewVideoRelease { - @StorageLink('currentBreakpoint') currentBreakpoint: string = BreakpointConstants.BREAKPOINT_LG; + @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string = BreakpointConstants.BREAKPOINT_LG; @StorageLink('windowWidth') windowWidth: number = 0; @StorageLink('currentTopIndex') currentTopIndex: number = 0; private newVideoImgList: VideoImage[] = new VideoImgViewModel().getNewVideoImgList(); @@ -42,7 +42,7 @@ export struct NewVideoRelease { VideoImgRating({ rating: item.getRating() }) } .height(new BreakpointType($r('app.float.new_video_height_sm'), $r('app.float.new_video_height_md'), - $r('app.float.new_video_height_lg')).getValue(this.currentBreakpoint)) + $r('app.float.new_video_height_lg')).getValue(this.currentWidthBreakpoint)) .width(CommonConstants.FULL_PERCENT) .aspectRatio(HomeConstants.NEW_VIDEO_ASPECT_RATIO) @@ -55,23 +55,23 @@ export struct NewVideoRelease { } .tabIndex(getTabIndex(HomeConstants.DIRECTION_LIST[5])) .columnsTemplate(new BreakpointType(CommonConstants.VIDEO_GRID_COLUMNS[1], CommonConstants.VIDEO_GRID_COLUMNS[3], - CommonConstants.VIDEO_GRID_COLUMNS[4]).getValue(this.currentBreakpoint)) + CommonConstants.VIDEO_GRID_COLUMNS[4]).getValue(this.currentWidthBreakpoint)) .rowsTemplate(HomeConstants.NEW_VIDEO_ROWS_TEMPLATE) .width(CommonConstants.FULL_PERCENT) .columnsGap($r('app.float.new_video_columns_gap')) - .height(this.getNewVideoHeight(this.currentBreakpoint, this.windowWidth)) + .height(this.getNewVideoHeight(this.currentWidthBreakpoint, this.windowWidth)) } - .padding({ left: this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG && this.currentTopIndex === 2 ? + .padding({ left: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG && this.currentTopIndex === 2 ? $r('app.float.side_bar_width') : 0 }) } - getNewVideoHeight(currentBreakpoint: string, windowWidth: number): string { + getNewVideoHeight(currentWidthBreakpoint: string, windowWidth: number): string { let result: number = px2vp(windowWidth) - new BreakpointType(HomeConstants.VIDEO_GRID_MARGIN[0], - HomeConstants.VIDEO_GRID_MARGIN[1], HomeConstants.VIDEO_GRID_MARGIN[2]).getValue(this.currentBreakpoint); - if (currentBreakpoint === BreakpointConstants.BREAKPOINT_LG) { + HomeConstants.VIDEO_GRID_MARGIN[1], HomeConstants.VIDEO_GRID_MARGIN[2]).getValue(this.currentWidthBreakpoint); + if (currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG) { result = result - HomeConstants.LG_SIDEBAR_WIDTH; result = (result - HomeConstants.VIDEO_GRID_ITEM_SPACE * HomeConstants.SIX) / HomeConstants.SEVEN; - } else if (currentBreakpoint === BreakpointConstants.BREAKPOINT_MD) { + } else if (currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_MD) { result = (result - HomeConstants.VIDEO_GRID_ITEM_SPACE * CommonConstants.FOUR) / HomeConstants.FIVE; } else { result = (result - HomeConstants.VIDEO_GRID_ITEM_SPACE * HomeConstants.TWO) / CommonConstants.THREE; diff --git a/features/home/src/main/ets/view/PreviousVideo.ets b/features/home/src/main/ets/view/PreviousVideo.ets index 76436d657bf78ba2cf90c6c9cb243faf2b48c82f..110cb7bc733001e5ccfd91bff43d80f7210c0f50 100644 --- a/features/home/src/main/ets/view/PreviousVideo.ets +++ b/features/home/src/main/ets/view/PreviousVideo.ets @@ -22,9 +22,9 @@ import { getTabIndex, SubtitleComponent } from './CommonView'; @Component export struct PreviousVideo { - @StorageLink('currentBreakpoint') currentBreakpoint: string = BreakpointConstants.BREAKPOINT_LG; + @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string = BreakpointConstants.BREAKPOINT_LG; @StorageLink('currentTopIndex') currentTopIndex: number = 0; - @State previousVideoImgListTwo: VideoImage[] = new VideoImgViewModel().getPreviousVideoTwo(this.currentBreakpoint); + @State previousVideoImgListTwo: VideoImage[] = new VideoImgViewModel().getPreviousVideoTwo(this.currentWidthBreakpoint); @Consume('pageInfo') pageInfo: NavPathStack; private previousVideoImgListOne: VideoImage[] = new VideoImgViewModel().getPreviousVideoOne(); @@ -72,7 +72,7 @@ export struct PreviousVideo { Row() { Image(item.getImgSrc()) .objectFit(ImageFit.Fill) - .margin({ right: this.currentBreakpoint === BreakpointConstants.BREAKPOINT_SM ? + .margin({ right: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM ? $r('app.float.previous_one_image_margin_sm') : $r('app.float.previous_one_image_margin') }) .layoutWeight(CommonConstants.THREE) .height(CommonConstants.FULL_PERCENT) @@ -82,14 +82,14 @@ export struct PreviousVideo { Text(item.getTitle()) .fontSize(new BreakpointType($r('app.float.previous_one_title_font_sm'), $r('app.float.previous_one_title_font_md'), $r('app.float.previous_one_title_font_lg')) - .getValue(this.currentBreakpoint)) + .getValue(this.currentWidthBreakpoint)) .fontWeight(CommonConstants.FONT_WEIGHT_500) .maxLines(2) .textOverflow({ overflow: TextOverflow.Ellipsis }) Text(item.getContent()) .fontSize(new BreakpointType($r('app.float.previous_one_content_font_sm'), $r('app.float.previous_one_content_font_md'), $r('app.float.previous_one_content_font_lg')) - .getValue(this.currentBreakpoint)) + .getValue(this.currentWidthBreakpoint)) .opacity(CommonConstants.TEXT_OPACITY[1]) .fontWeight(FontWeight.Normal) .margin({ top: $r('app.float.previous_one_content_margin') }) @@ -97,7 +97,7 @@ export struct PreviousVideo { Text(item.getOtherInfo()) .fontSize(new BreakpointType($r('app.float.previous_one_content_font_sm'), $r('app.float.previous_one_content_font_md'), $r('app.float.previous_one_content_font_lg')) - .getValue(this.currentBreakpoint)) + .getValue(this.currentWidthBreakpoint)) .opacity(CommonConstants.TEXT_OPACITY[1]) .fontWeight(FontWeight.Normal) .margin({ top: $r('app.float.previous_one_content_margin') }) @@ -108,10 +108,10 @@ export struct PreviousVideo { .borderRadius($r('app.float.previous_one_button_radius')) .backgroundColor($r('app.color.previous_one_button_origin')) .fontWeight(CommonConstants.FONT_WEIGHT_500) - .fontSize(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? + .fontSize(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? $r('app.float.previous_one_button_font_lg') : $r('app.float.previous_one_button_font')) .fontColor(Color.White) - .height(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? + .height(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? $r('app.float.previous_one_button_height_lg') : $r('app.float.previous_one_button_height')) .layoutWeight(1) .groupDefaultFocus(index === 0 ? true : false) @@ -120,17 +120,17 @@ export struct PreviousVideo { }) Blank() - .width(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_MD ? + .width(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_MD ? $r('app.float.previous_blank_width_md') : $r('app.float.previous_blank_width')) Button(HomeConstants.HOME_BUTTON_TEXT[3]) .borderRadius($r('app.float.previous_one_button_radius')) .backgroundColor($r('app.color.button_background')) .fontWeight(CommonConstants.FONT_WEIGHT_500) - .fontSize(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? + .fontSize(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? $r('app.float.previous_one_button_font_lg') : $r('app.float.previous_one_button_font')) .fontColor($r('app.color.previous_one_button_origin')) - .height(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? + .height(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? $r('app.float.previous_one_button_height_lg') : $r('app.float.previous_one_button_height')) .layoutWeight(1) } @@ -145,13 +145,13 @@ export struct PreviousVideo { .aspectRatio(CommonConstants.PREVIOUS_ONE_ROW_RATIO) .width(CommonConstants.FULL_PERCENT) .padding({ - top: this.currentBreakpoint === BreakpointConstants.BREAKPOINT_SM ? + top: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM ? $r('app.float.previous_one_row_padding_sm') : $r('app.float.previous_one_row_padding'), - bottom: this.currentBreakpoint === BreakpointConstants.BREAKPOINT_SM ? + bottom: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM ? $r('app.float.previous_one_row_padding_sm') : $r('app.float.previous_one_row_padding'), - left: this.currentBreakpoint === BreakpointConstants.BREAKPOINT_SM ? + left: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM ? $r('app.float.previous_one_row_padding_sm') : $r('app.float.previous_one_row_padding'), - right: this.currentBreakpoint === BreakpointConstants.BREAKPOINT_SM ? + right: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM ? $r('app.float.previous_one_row_padding_sm') : $r('app.float.previous_one_row_padding') }) .backgroundColor($r('app.color.home_component_background')) @@ -170,7 +170,7 @@ export struct PreviousVideo { Column() { Image(item.getImgSrc()) .width(CommonConstants.FULL_PERCENT) - .aspectRatio(PreviousVideoUtil.getImgAspectRatio(this.currentBreakpoint, index)) + .aspectRatio(PreviousVideoUtil.getImgAspectRatio(this.currentWidthBreakpoint, index)) .objectFit(ImageFit.Fill) .focusable(true) .stateStyles({ @@ -181,38 +181,38 @@ export struct PreviousVideo { Column() { Text(item.getTitle()) .fontWeight(FontWeight.Normal) - .fontSize(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? + .fontSize(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? $r('app.float.previous_two_title_font_lg') : $r('app.float.previous_two_title_font')) .maxLines(1) - .lineHeight(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? + .lineHeight(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? $r('app.float.previous_two_title_line_lg') : $r('app.float.previous_two_title_line')) Text(item.getContent()) .fontWeight(FontWeight.Normal) - .fontSize(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? + .fontSize(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? $r('app.float.previous_two_content_font_lg') : $r('app.float.previous_two_content_font')) - .margin({ top: this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? + .margin({ top: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? $r('app.float.previous_two_content_margin_lg') : $r('app.float.previous_two_content_margin') }) .opacity(CommonConstants.TEXT_OPACITY[0]) .maxLines(1) - .lineHeight(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? + .lineHeight(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? $r('app.float.previous_two_content_line_lg') : $r('app.float.previous_two_content_line')) } .alignItems(HorizontalAlign.Start) - .height(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? + .height(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? $r('app.float.previous_two_column_height_lg') : $r('app.float.previous_two_column_height')) .width(CommonConstants.FULL_PERCENT) .padding({ - top: this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? + top: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? $r('app.float.previous_two_column_padding_lg') : $r('app.float.previous_two_column_padding'), - bottom: this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? + bottom: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? $r('app.float.previous_two_column_bottom_lg') : $r('app.float.previous_two_column_bottom'), - left: this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? + left: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? $r('app.float.previous_two_column_padding_lg') : $r('app.float.previous_two_column_padding'), - right: this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? + right: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? $r('app.float.previous_two_column_padding_lg') : $r('app.float.previous_two_column_padding') }) } - .translate({ y: (((index === 2) || (index === 3)) && (this.currentBreakpoint === + .translate({ y: (((index === 2) || (index === 3)) && (this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_MD)) ? HomeConstants.PREVIOUS_TWO_TRANSLATE_MD : '0' }) .backgroundColor($r('app.color.home_component_background')) .borderRadius($r('app.float.previous_two_radius')) @@ -224,7 +224,7 @@ export struct PreviousVideo { }) } .tabIndex(getTabIndex(HomeConstants.DIRECTION_LIST[8])) - .padding({ left: this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG && this.currentTopIndex === 2 ? + .padding({ left: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG && this.currentTopIndex === 2 ? $r('app.float.side_bar_width') : 0 }) } } \ 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 be70c4e9f4431127284115875e792194557b1d01..f9f57b3f7ce07764eb00438f9e6a71d411cabb6b 100644 --- a/features/home/src/main/ets/view/RecommendedVideo.ets +++ b/features/home/src/main/ets/view/RecommendedVideo.ets @@ -20,10 +20,11 @@ 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 { - @StorageLink('currentBreakpoint') currentBreakpoint: string = BreakpointConstants.BREAKPOINT_LG; + @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string = BreakpointConstants.BREAKPOINT_LG; @StorageLink('videoGridColumn') videoGridColumn: string = CommonConstants.VIDEO_GRID_COLUMNS[0]; @StorageLink('windowWidth') windowWidth: number = 0; @StorageLink('currentTopIndex') currentTopIndex: number = 0; @@ -97,21 +98,19 @@ export struct RecommendedVideo { return; } // Obtains all attributes of a component. - let obj: Record = JSON.parse(getInspectorByKey(JSON.stringify(item))); - let rectInfo: string[] = JSON.parse(HomeConstants.SQUARE_BRACKETS[0] + obj.$rect + - HomeConstants.SQUARE_BRACKETS[1]); + let modePosition: componentUtils.ComponentInfo = + componentUtils.getRectangleById(JSON.stringify(item)); + let windowOffset = modePosition.windowOffset; + let size = modePosition.size; // Obtains the height of the component from the top. - let rectTop: number = px2vp(JSON.parse(HomeConstants.SQUARE_BRACKETS[0] + rectInfo[0] + - HomeConstants.SQUARE_BRACKETS[1])[1]); - let rectTop2: number = px2vp(JSON.parse(HomeConstants.SQUARE_BRACKETS[0] + rectInfo[1] + - HomeConstants.SQUARE_BRACKETS[1])[1]); + let rectTop: number = px2vp(windowOffset.y); + let rectTop2: number = px2vp(windowOffset.y + Math.floor(size.height)); // Obtains the width of the component from the left. - let rectLeft: number = px2vp(JSON.parse(HomeConstants.SQUARE_BRACKETS[0] + rectInfo[0] + - HomeConstants.SQUARE_BRACKETS[1])[0]); + let rectLeft: number = px2vp(windowOffset.x); let topHeightNeeded: number = new BreakpointType(HomeConstants.VIDEO_DIALOG_HEIGHTS[0], HomeConstants.VIDEO_DIALOG_HEIGHTS[1], HomeConstants.VIDEO_DIALOG_HEIGHTS[2]) - .getValue(this.currentBreakpoint) + rectTop - rectTop2; - if (this.currentBreakpoint === BreakpointConstants.BREAKPOINT_SM) { + .getValue(this.currentWidthBreakpoint) + rectTop - rectTop2; + if (this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM) { topHeightNeeded += HomeConstants.HOME_HEADER_HEIGHT_SM; } let dialogYOffset: number; @@ -119,7 +118,7 @@ export struct RecommendedVideo { if (topHeightNeeded < rectTop) { dialogYOffset = rectTop2 - new BreakpointType(HomeConstants.VIDEO_DIALOG_HEIGHTS[0], HomeConstants.VIDEO_DIALOG_HEIGHTS[1], HomeConstants.VIDEO_DIALOG_HEIGHTS[2]) - .getValue(this.currentBreakpoint); + .getValue(this.currentWidthBreakpoint); } else { dialogYOffset = rectTop; } @@ -155,7 +154,7 @@ export struct RecommendedVideo { // Display the customized pop-up window to play the video. this.videoDialogController.open(); })) - .bindContextMenu(RightClickMenu(this.currentBreakpoint), ResponseType.RightClick) + .bindContextMenu(RightClickMenu(this.currentWidthBreakpoint), ResponseType.RightClick) VideoTitle({ title: item.getTitle() }) VideoContent({ content: item.getContent() }) @@ -173,22 +172,22 @@ export struct RecommendedVideo { .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. - .height(this.getGridHeight(this.videoGridColumn, this.currentBreakpoint, this.windowWidth)) + .height(this.getGridHeight(this.videoGridColumn, this.currentWidthBreakpoint, this.windowWidth)) .padding({ - left: this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG && this.currentTopIndex === 2 ? + left: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG && this.currentTopIndex === 2 ? new BreakpointType($r('app.float.home_recommended_padding_sm'), $r('app.float.home_recommended_padding_md'), - $r('app.float.home_recommended_padding_lg')).getValue(this.currentBreakpoint) : + $r('app.float.home_recommended_padding_lg')).getValue(this.currentWidthBreakpoint) : new BreakpointType($r('app.float.home_content_padding_sm'), $r('app.float.home_content_padding_md'), - $r('app.float.home_content_padding_lg')).getValue(this.currentBreakpoint), + $r('app.float.home_content_padding_lg')).getValue(this.currentWidthBreakpoint), right: new BreakpointType($r('app.float.home_content_padding_sm'), $r('app.float.home_content_padding_md'), - $r('app.float.home_content_padding_lg')).getValue(this.currentBreakpoint), + $r('app.float.home_content_padding_lg')).getValue(this.currentWidthBreakpoint), top: $r('app.float.recommended_video_padding_top') }) } // Zooming and pinching functions of the grid. .gesture(PinchGesture({ fingers: 2 }).onActionUpdate((event: GestureEvent) => { - if (event.scale > 1 && this.currentBreakpoint !== BreakpointConstants.BREAKPOINT_SM) { - if (this.currentBreakpoint === BreakpointConstants.BREAKPOINT_MD) { + if (event.scale > 1 && this.currentWidthBreakpoint !== BreakpointConstants.BREAKPOINT_SM) { + if (this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_MD) { animateTo({ duration: HomeConstants.ANIMATION_DURATION }, () => { @@ -201,8 +200,8 @@ export struct RecommendedVideo { this.videoGridColumn = CommonConstants.VIDEO_GRID_COLUMNS[2]; }) } - } else if (event.scale < 1 && this.currentBreakpoint !== BreakpointConstants.BREAKPOINT_SM) { - if (this.currentBreakpoint === BreakpointConstants.BREAKPOINT_MD) { + } else if (event.scale < 1 && this.currentWidthBreakpoint !== BreakpointConstants.BREAKPOINT_SM) { + if (this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_MD) { animateTo({ duration: HomeConstants.ANIMATION_DURATION }, () => { @@ -221,11 +220,11 @@ export struct RecommendedVideo { })) } - getGridHeight(videoGridColumn: string, currentBreakpoint: string, windowWidth: number): string { + getGridHeight(videoGridColumn: string, currentWidthBreakpoint: string, windowWidth: number): string { // Obtain the window width and subtract the blank parts on both sides. let result: number = px2vp(windowWidth) - new BreakpointType(HomeConstants.VIDEO_GRID_MARGIN[0], - HomeConstants.VIDEO_GRID_MARGIN[1], HomeConstants.VIDEO_GRID_MARGIN[2]).getValue(this.currentBreakpoint); - if (currentBreakpoint === BreakpointConstants.BREAKPOINT_LG) { + HomeConstants.VIDEO_GRID_MARGIN[1], HomeConstants.VIDEO_GRID_MARGIN[2]).getValue(this.currentWidthBreakpoint); + if (currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG) { result = result - HomeConstants.LG_SIDEBAR_WIDTH; } // Calculate the width of a single image based on the number of grid columns. diff --git a/features/home/src/main/ets/view/VideoDialog.ets b/features/home/src/main/ets/view/VideoDialog.ets index 88997a3ea0cc6adc99a08187069f2baf81a99ee1..7b4d9ed43b27f7bd9b3519d346d6303eae5db39e 100644 --- a/features/home/src/main/ets/view/VideoDialog.ets +++ b/features/home/src/main/ets/view/VideoDialog.ets @@ -35,7 +35,7 @@ import { HomeConstants } from '../constants/HomeConstants'; .height($r('app.float.dialog_menu_row_height')) } -@Builder export function RightClickMenu(currentBreakpoint: string) { +@Builder export function RightClickMenu(currentWidthBreakpoint: string) { Column() { MenuItemFunction($r('app.media.ic_public_view_list'), HomeConstants.VIDEO_DIALOG_OPTIONS[0]) MenuItemFunction($r('app.media.ic_public_highlights'), HomeConstants.VIDEO_DIALOG_OPTIONS[1]) @@ -43,7 +43,7 @@ import { HomeConstants } from '../constants/HomeConstants'; } .borderRadius($r('app.float.dialog_text_radius')) .backgroundColor(Color.White) - .width(currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? $r('app.float.dialog_text_col_width_lg') : + .width(currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? $r('app.float.dialog_text_col_width_lg') : $r('app.float.dialog_text_col_width')) .padding({ left: $r('app.float.dialog_text_col_padding'), @@ -53,7 +53,7 @@ import { HomeConstants } from '../constants/HomeConstants'; @CustomDialog export struct VideoDialog { - @StorageLink('currentBreakpoint') currentBreakpoint: string = BreakpointConstants.BREAKPOINT_LG; + @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string = BreakpointConstants.BREAKPOINT_LG; private xComponentController: XComponentController = new XComponentController(); private surfaceId: string = ''; private avPlayerUtil: AvPlayerUtil = new AvPlayerUtil(); @@ -171,9 +171,9 @@ export struct VideoDialog { } .margin({ bottom: $r('app.float.dialog_col_margin') }) .height(new BreakpointType($r('app.float.dialog_col_height_sm'), $r('app.float.dialog_col_height_md'), - $r('app.float.dialog_col_height_lg')).getValue(this.currentBreakpoint)) + $r('app.float.dialog_col_height_lg')).getValue(this.currentWidthBreakpoint)) .width(new BreakpointType($r('app.float.dialog_col_width_sm'), $r('app.float.dialog_col_width_md'), - $r('app.float.dialog_col_width_lg')).getValue(this.currentBreakpoint)) + $r('app.float.dialog_col_width_lg')).getValue(this.currentWidthBreakpoint)) .aspectRatio(HomeConstants.VIDEO_DIALOG_ASPECT_RATIO) .onClick(() => { if (this.avPlayer === undefined) { @@ -191,7 +191,7 @@ export struct VideoDialog { } }) - RightClickMenu(this.currentBreakpoint) + RightClickMenu(this.currentWidthBreakpoint) } .alignItems(HorizontalAlign.Start) } diff --git a/features/home/src/main/ets/viewmodel/VideoImgViewModel.ets b/features/home/src/main/ets/viewmodel/VideoImgViewModel.ets index 7ff6be0fc1ddd69dbc3ec6550923389c6aeab06d..ea6de593f92294772e8b33ee67a2e97ea24101a7 100644 --- a/features/home/src/main/ets/viewmodel/VideoImgViewModel.ets +++ b/features/home/src/main/ets/viewmodel/VideoImgViewModel.ets @@ -117,10 +117,10 @@ export class VideoImgViewModel { return this.previousVideoImgListOne; } - getPreviousVideoTwo(currentBreakpoint: string): VideoImage[] { - if (currentBreakpoint === BreakpointConstants.BREAKPOINT_MD) { + getPreviousVideoTwo(currentWidthBreakpoint: string): VideoImage[] { + if (currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_MD) { return this.previousVideoImgListTwo; - } else if (currentBreakpoint === BreakpointConstants.BREAKPOINT_LG) { + } else if (currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG) { return this.previousVideoImgListTwo.slice(1, 6); } else { return this.previousVideoImgListTwo.slice(0, 4); diff --git a/features/search/src/main/ets/view/SearchContent.ets b/features/search/src/main/ets/view/SearchContent.ets index fdfe9d8aa0aee3d3c0f7726327dc3e3984c950f4..12de1688da9ec2fc6e970fa542566c99629e21ca 100644 --- a/features/search/src/main/ets/view/SearchContent.ets +++ b/features/search/src/main/ets/view/SearchContent.ets @@ -20,7 +20,7 @@ import { SearchVideoImg } from '../viewmodel/SearchVideoImgViewModel'; @Component export struct SearchContent { - @StorageLink('currentBreakpoint') currentBreakpoint: string = BreakpointConstants.BREAKPOINT_LG; + @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string = BreakpointConstants.BREAKPOINT_LG; @State currentIndex: number = 0; @Link searchVideoList: SearchVideoImg[]; @@ -77,7 +77,7 @@ export struct SearchContent { .backgroundColor($r('app.color.result_background')) .margin({ right: new BreakpointType($r('app.float.search_content_margin_right_sm'), $r('app.float.search_content_margin_right_md'), $r('app.float.search_content_margin_right_lg')) - .getValue(this.currentBreakpoint) }) + .getValue(this.currentWidthBreakpoint) }) } @Builder @@ -98,7 +98,7 @@ export struct SearchContent { .margin({ top: $r('app.float.search_discovery_img_margin') }) List() { - ForEach(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? SearchConstants.SEARCH_DISCOVERY_LARGE : + ForEach(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? SearchConstants.SEARCH_DISCOVERY_LARGE : SearchConstants.SEARCH_DISCOVERY_LARGE.slice(0, 6), (item: string, index: number) => { ListItem() { Column() { @@ -106,7 +106,7 @@ export struct SearchContent { .fontSize($r('app.float.search_discovery_list_font')) .fontWeight(CommonConstants.FONT_WEIGHT_500) } - .padding({ right: this.getDividerPadding(this.currentBreakpoint, index) }) + .padding({ right: this.getDividerPadding(this.currentWidthBreakpoint, index) }) .height($r('app.float.search_discovery_list_column_height')) .width(CommonConstants.FULL_PERCENT) .margin({ top: $r('app.float.search_discovery_list_column_margin') }) @@ -115,7 +115,7 @@ export struct SearchContent { }, (item: string, index: number) => index + JSON.stringify(item)) } .width(CommonConstants.FULL_PERCENT) - .lanes(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? SearchConstants.SEARCH_LIST_LANES[0] : + .lanes(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? SearchConstants.SEARCH_LIST_LANES[0] : SearchConstants.SEARCH_LIST_LANES[1]) } @@ -123,7 +123,7 @@ export struct SearchContent { searchHotTrending() { List({ space: new BreakpointType(SearchConstants.HOT_TRENDING_LIST_SPACES[0], SearchConstants.HOT_TRENDING_LIST_SPACES[1], SearchConstants.HOT_TRENDING_LIST_SPACES[2]) - .getValue(this.currentBreakpoint) }) { + .getValue(this.currentWidthBreakpoint) }) { ForEach(SearchConstants.SEARCH_TABS, (item: string, index: number) => { ListItem() { Column() { @@ -195,10 +195,10 @@ export struct SearchContent { }, (item: SearchVideoImg, index: number) => index + JSON.stringify(item)) } .width(CommonConstants.FULL_PERCENT) - .height(this.currentBreakpoint !== BreakpointConstants.BREAKPOINT_LG ? $r('app.float.hot_video_list_height_sm') : + .height(this.currentWidthBreakpoint !== BreakpointConstants.BREAKPOINT_LG ? $r('app.float.hot_video_list_height_sm') : $r('app.float.hot_video_list_height')) .lanes(new BreakpointType(SearchConstants.SEARCH_LIST_LANES[2], SearchConstants.SEARCH_LIST_LANES[1], - SearchConstants.SEARCH_LIST_LANES[0]).getValue(this.currentBreakpoint), $r('app.float.hot_video_list_lane_space')) + SearchConstants.SEARCH_LIST_LANES[0]).getValue(this.currentWidthBreakpoint), $r('app.float.hot_video_list_lane_space')) .padding({ top: $r('app.float.hot_video_list_padding'), bottom: $r('app.float.hot_video_list_padding') diff --git a/features/search/src/main/ets/view/SearchForHua.ets b/features/search/src/main/ets/view/SearchForHua.ets index 1dc64a7acf2f056faa7f6db083d0b8cbb2e17fed..a48db0e5fa39a84d92ec9b59f4e150d70ccd4110 100644 --- a/features/search/src/main/ets/view/SearchForHua.ets +++ b/features/search/src/main/ets/view/SearchForHua.ets @@ -19,7 +19,7 @@ import { SearchConstants } from '../constants/SearchConstants'; @Component export struct SearchForHua { - @StorageLink('currentBreakpoint') currentBreakpoint: string = BreakpointConstants.BREAKPOINT_LG; + @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string = BreakpointConstants.BREAKPOINT_LG; @Link searchInput: string; build() { @@ -40,7 +40,7 @@ export struct SearchForHua { .width(CommonConstants.FULL_PERCENT) } .alignItems(HorizontalAlign.Start) - .margin({ right: this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG && index % + .margin({ right: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG && index % SearchConstants.SEARCH_INDEX[0] === 0 ? $r('app.float.search_hua_column_margin_lg') : 0 }) .height($r('app.float.search_hua_column_height')) .onClick(() => { @@ -53,7 +53,7 @@ export struct SearchForHua { } }) } - .lanes(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? SearchConstants.SEARCH_LIST_LANES[1] : + .lanes(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? SearchConstants.SEARCH_LIST_LANES[1] : SearchConstants.SEARCH_LIST_LANES[2]) } .layoutWeight(1) diff --git a/features/search/src/main/ets/view/SearchResult.ets b/features/search/src/main/ets/view/SearchResult.ets index d24b77f3ad1727705eb21970765dd3e459c40c56..6de709bd9ad3a887f6ddea6a4e1d2d45e64d2982 100644 --- a/features/search/src/main/ets/view/SearchResult.ets +++ b/features/search/src/main/ets/view/SearchResult.ets @@ -20,7 +20,7 @@ import { SearchVideoImg, SearchVideoImgModel } from '../viewmodel/SearchVideoImg @Component export struct SearchResult { - @StorageLink('currentBreakpoint') currentBreakpoint: string = BreakpointConstants.BREAKPOINT_LG; + @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string = BreakpointConstants.BREAKPOINT_LG; @State resultTabIndex: number = 0; @Consume('pageInfo') pageInfo: NavPathStack; @@ -117,7 +117,7 @@ export struct SearchResult { Row() { Image(item.getImgSrc()) .objectFit(ImageFit.Fill) - .margin({ right: this.currentBreakpoint === BreakpointConstants.BREAKPOINT_SM ? + .margin({ right: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM ? $r('app.float.previous_one_image_margin_sm') : $r('app.float.previous_one_image_margin') }) .layoutWeight(CommonConstants.THREE) .height(CommonConstants.FULL_PERCENT) @@ -126,15 +126,15 @@ export struct SearchResult { Text(item.getTitle()) .fontSize(new BreakpointType($r('app.float.search_result_title_font_sm'), $r('app.float.search_result_title_font_md'), $r('app.float.search_result_title_font_lg')) - .getValue(this.currentBreakpoint)) + .getValue(this.currentWidthBreakpoint)) .fontWeight(CommonConstants.FONT_WEIGHT_500) .maxLines(2) .textOverflow({ overflow: TextOverflow.Ellipsis }) Text(item.getContent()) .fontSize(new BreakpointType($r('app.float.search_result_content_font_sm'), $r('app.float.search_result_content_font_md'), $r('app.float.search_result_content_font_lg')) - .getValue(this.currentBreakpoint)) - .lineHeight(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? + .getValue(this.currentWidthBreakpoint)) + .lineHeight(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? $r('app.float.result_card_content_line_lg') : $r('app.float.result_card_content_line')) .opacity(CommonConstants.TEXT_OPACITY[1]) .fontWeight(FontWeight.Normal) @@ -143,8 +143,8 @@ export struct SearchResult { Text(item.getOtherInfo()) .fontSize(new BreakpointType($r('app.float.search_result_content_font_sm'), $r('app.float.search_result_content_font_md'), $r('app.float.search_result_content_font_lg')) - .getValue(this.currentBreakpoint)) - .lineHeight(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? + .getValue(this.currentWidthBreakpoint)) + .lineHeight(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? $r('app.float.result_card_content_line_lg') : $r('app.float.result_card_content_line')) .opacity(CommonConstants.TEXT_OPACITY[1]) .fontWeight(FontWeight.Normal) @@ -156,9 +156,9 @@ export struct SearchResult { .backgroundColor($r('app.color.button_background_1')) .fontWeight(CommonConstants.FONT_WEIGHT_500) .borderRadius($r('app.float.search_result_button_radius')) - .fontSize(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? + .fontSize(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? $r('app.float.search_result_button_font_lg') : $r('app.float.search_result_button_font')) - .height(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? + .height(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? $r('app.float.search_result_button_height_lg') : $r('app.float.search_result_button_height')) .fontColor(Color.White) .layoutWeight(1) @@ -167,16 +167,16 @@ export struct SearchResult { }) Blank() - .width(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_MD ? + .width(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_MD ? $r('app.float.search_result_button_blank_md') : $r('app.float.search_result_button_blank')) Button(SearchConstants.SEARCH_RESULT_BUTTON_TEXTS[1]) .backgroundColor($r('app.color.button_background_2')) .fontWeight(CommonConstants.FONT_WEIGHT_500) .borderRadius($r('app.float.search_result_button_radius')) - .fontSize(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? + .fontSize(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? $r('app.float.search_result_button_font_lg') : $r('app.float.search_result_button_font')) - .height(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? + .height(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? $r('app.float.search_result_button_height_lg') : $r('app.float.search_result_button_height')) .fontColor($r('app.color.button_background_1')) .layoutWeight(1) @@ -192,16 +192,16 @@ export struct SearchResult { .aspectRatio(CommonConstants.PREVIOUS_ONE_ROW_RATIO) .height(new BreakpointType($r('app.float.result_list_row_height_sm'), $r('app.float.result_list_row_height_md'), $r('app.float.result_list_row_height_lg')) - .getValue(this.currentBreakpoint)) + .getValue(this.currentWidthBreakpoint)) .width(CommonConstants.FULL_PERCENT) .padding({ - top: this.currentBreakpoint === BreakpointConstants.BREAKPOINT_SM ? + top: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM ? $r('app.float.result_list_row_padding_sm') : $r('app.float.result_list_row_padding'), - bottom: this.currentBreakpoint === BreakpointConstants.BREAKPOINT_SM ? + bottom: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM ? $r('app.float.result_list_row_padding_sm') : $r('app.float.result_list_row_padding'), - left: this.currentBreakpoint === BreakpointConstants.BREAKPOINT_SM ? + left: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM ? $r('app.float.result_list_row_padding_sm') : $r('app.float.result_list_row_padding'), - right: this.currentBreakpoint === BreakpointConstants.BREAKPOINT_SM ? + right: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM ? $r('app.float.result_list_row_padding_sm') : $r('app.float.result_list_row_padding') }) .backgroundColor($r('app.color.result_background')) diff --git a/features/search/src/main/ets/view/SearchView.ets b/features/search/src/main/ets/view/SearchView.ets index 6749461ce54a5d023928242d9842ca2f222812e7..2eb2de735f727cbfe4752eef127f00a80fea8c6b 100644 --- a/features/search/src/main/ets/view/SearchView.ets +++ b/features/search/src/main/ets/view/SearchView.ets @@ -23,7 +23,7 @@ import { SearchResult } from './SearchResult'; @Component export struct SearchView { - @StorageLink('currentBreakpoint') currentBreakpoint: string = BreakpointConstants.BREAKPOINT_LG; + @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string = BreakpointConstants.BREAKPOINT_LG; @StorageLink('currentTopIndex') currentTopIndex: number = 0; @State currentIndex: number = 0; @State searchVideoList: SearchVideoImg[] = []; @@ -64,13 +64,13 @@ export struct SearchView { .width(CommonConstants.FULL_PERCENT) .padding({ left: new BreakpointType($r('app.float.view_grid_col_padding_sm'), $r('app.float.view_grid_col_padding_md'), - $r('app.float.view_grid_col_padding_lg')).getValue(this.currentBreakpoint), + $r('app.float.view_grid_col_padding_lg')).getValue(this.currentWidthBreakpoint), right: new BreakpointType($r('app.float.view_grid_col_padding_sm'), $r('app.float.view_grid_col_padding_md'), - $r('app.float.view_grid_col_padding_lg')).getValue(this.currentBreakpoint) + $r('app.float.view_grid_col_padding_lg')).getValue(this.currentWidthBreakpoint) }) } } - .padding({ left: (this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG) && (this.currentTopIndex === 2) ? + .padding({ left: (this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG) && (this.currentTopIndex === 2) ? $r('app.float.search_view_grid_row_padding') : 0 }) .onBreakpointChange((breakPoints) => { this.searchVideoList = new SearchVideoImgModel().getTrendSearchList(breakPoints); diff --git a/features/search/src/main/ets/viewmodel/SearchVideoImgViewModel.ets b/features/search/src/main/ets/viewmodel/SearchVideoImgViewModel.ets index a3de5f47cd015870ef060a06ab7582564959455e..2c8a43482df3e41ab807870966895e2810390a73 100644 --- a/features/search/src/main/ets/viewmodel/SearchVideoImgViewModel.ets +++ b/features/search/src/main/ets/viewmodel/SearchVideoImgViewModel.ets @@ -56,10 +56,10 @@ export class SearchVideoImgModel { SearchConstants.SEARCH_RESULT_MORE[2])); } - getTrendSearchList(currentBreakpoint: string): SearchVideoImg[] { - if (currentBreakpoint === BreakpointConstants.BREAKPOINT_SM) { + getTrendSearchList(currentWidthBreakpoint: string): SearchVideoImg[] { + if (currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM) { return this.trendingSearchList.slice(0, 5); - } else if (currentBreakpoint === BreakpointConstants.BREAKPOINT_MD) { + } else if (currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_MD) { return this.trendingSearchList.slice(0, 10); } else { return this.trendingSearchList; diff --git a/features/videoDetail/src/main/ets/view/AllComments.ets b/features/videoDetail/src/main/ets/view/AllComments.ets index 2122ce23df1a30575e14d48785088c169c0a7a74..444c06be6e5d342aca1f92f7bbf4d3f6df621a1f 100644 --- a/features/videoDetail/src/main/ets/view/AllComments.ets +++ b/features/videoDetail/src/main/ets/view/AllComments.ets @@ -20,7 +20,7 @@ import { UserInfo, UserViewModel } from '../viewmodel/UserViewModel'; @Component export struct AllComments { - @StorageLink('currentBreakpoint') currentBreakpoint: string = BreakpointConstants.BREAKPOINT_LG; + @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string = BreakpointConstants.BREAKPOINT_LG; @Link commentImgHeight: string; @Link commentImgWidth: string; private commentsList: UserInfo[] = new UserViewModel().getRelatedVideoList(); @@ -67,9 +67,9 @@ export struct AllComments { Row() { Image(item.getCommentImageSrc()) .width(new BreakpointType(DetailConstants.COMMENT_IMAGE_WIDTH[0], DetailConstants.COMMENT_IMAGE_WIDTH[1], - this.commentImgWidth).getValue(this.currentBreakpoint)) + this.commentImgWidth).getValue(this.currentWidthBreakpoint)) .height(new BreakpointType(DetailConstants.COMMENT_IMAGE_HEIGHT[0], - DetailConstants.COMMENT_IMAGE_HEIGHT[1], this.commentImgHeight).getValue(this.currentBreakpoint)) + DetailConstants.COMMENT_IMAGE_HEIGHT[1], this.commentImgHeight).getValue(this.currentWidthBreakpoint)) .borderRadius( $r('app.float.all_comments_img_radius')) .aspectRatio(DetailConstants.COMMENT_IMAGE_ASPECT_RATIO) } diff --git a/features/videoDetail/src/main/ets/view/RelatedList.ets b/features/videoDetail/src/main/ets/view/RelatedList.ets index 7bdb88064d3afa7340096eeb7b3ddcfd6ac208b2..a282e4bd13320d65bd83d22936fe61dd27826547 100644 --- a/features/videoDetail/src/main/ets/view/RelatedList.ets +++ b/features/videoDetail/src/main/ets/view/RelatedList.ets @@ -21,7 +21,7 @@ import { AllComments } from './AllComments'; @Component export struct RelatedList { - @StorageLink('currentBreakpoint') currentBreakpoint: string = BreakpointConstants.BREAKPOINT_LG; + @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string = BreakpointConstants.BREAKPOINT_LG; @State commentImgHeight: string = DetailConstants.INITIAL_COMMENT_IMAGE_HEIGHT; @State commentImgWidth: string = DetailConstants.INITIAL_COMMENT_IMAGE_WIDTH; @Link relatedVideoHeight: number; @@ -40,7 +40,7 @@ export struct RelatedList { this.RelatedVideoComponent() this.VideoIntroduction() AllComments({commentImgHeight: $commentImgHeight, commentImgWidth: $commentImgWidth}) - .visibility(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? Visibility.None : + .visibility(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? Visibility.None : Visibility.Visible) } .width(CommonConstants.FULL_PERCENT) @@ -49,7 +49,7 @@ export struct RelatedList { .layoutWeight(1) .scrollBar(BarState.Off) .onScrollFrameBegin((offset: number) => { - if (this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG) { + if (this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG) { if ((offset > 0) && (this.videoHeight > DetailConstants.MIN_VIDEO_PERCENT)) { // Video zoom-out logic. // Percentage of screen height by sliding. @@ -263,7 +263,7 @@ export struct RelatedList { } .width(CommonConstants.FULL_PERCENT) .backgroundColor(Color.White) - .visibility(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? Visibility.Visible : Visibility.None) + .visibility(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? Visibility.Visible : Visibility.None) } @Builder diff --git a/features/videoDetail/src/main/ets/view/VideoDetail.ets b/features/videoDetail/src/main/ets/view/VideoDetail.ets index ac02cc99e33b8967cd54b7be725c96729afd9058..983ded766bd6a4824171f6fa1751f6b6db0715b6 100644 --- a/features/videoDetail/src/main/ets/view/VideoDetail.ets +++ b/features/videoDetail/src/main/ets/view/VideoDetail.ets @@ -23,7 +23,7 @@ import { DetailConstants } from '../constants/DetailConstants'; @Component export struct VideoDetail { - @StorageLink('currentBreakpoint') currentBreakpoint: string = BreakpointConstants.BREAKPOINT_LG; + @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string = BreakpointConstants.BREAKPOINT_LG; @StorageLink('windowWidth') windowWidth: number = 0; @StorageLink('updateTime') updateTime: number = 0; @StorageLink('isHalfFolded') isHalfFolded: boolean = false; @@ -69,7 +69,7 @@ export struct VideoDetail { if (this.windowUtil === undefined) { return; } - if (this.currentBreakpoint === BreakpointConstants.BREAKPOINT_MD && display.isFoldable()) { + if (this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_MD && display.isFoldable()) { this.windowUtil.setMainWindowOrientation(window.Orientation.AUTO_ROTATION_RESTRICTED); } } @@ -79,7 +79,7 @@ export struct VideoDetail { if (this.windowUtil === undefined) { return; } - if (this.currentBreakpoint === BreakpointConstants.BREAKPOINT_MD && display.isFoldable()) { + if (this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_MD && display.isFoldable()) { this.windowUtil.setMainWindowOrientation(window.Orientation.PORTRAIT); } this.avPlayerUtil.release(); @@ -105,7 +105,7 @@ export struct VideoDetail { Column() { Scroll() { AllComments({ commentImgHeight: $commentImgHeight, commentImgWidth: $commentImgWidth }) - .visibility(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? Visibility.Visible : + .visibility(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? Visibility.Visible : Visibility.None) } .align(Alignment.Top) @@ -115,7 +115,7 @@ export struct VideoDetail { .padding({ bottom: $r('app.float.side_scroll_padding') }) SelfComment() - .visibility(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? Visibility.Visible : + .visibility(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? Visibility.Visible : Visibility.None) } .justifyContent(FlexAlign.Start) @@ -147,13 +147,13 @@ export struct VideoDetail { }) .layoutWeight(1) SelfComment() - .visibility(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? Visibility.None : + .visibility(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? Visibility.None : Visibility.Visible) } .height(CommonConstants.FULL_PERCENT) .width(CommonConstants.FULL_PERCENT) } - .showSideBar(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? true : false) + .showSideBar(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? true : false) .showControlButton(false) .autoHide(false) .sideBarPosition(SideBarPosition.End) @@ -186,7 +186,7 @@ export struct VideoDetail { if (this.windowUtil === undefined) { return; } - if (this.currentBreakpoint === BreakpointConstants.BREAKPOINT_MD && display.isFoldable()) { + if (this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_MD && display.isFoldable()) { this.isHalfFolded = false; } this.avPlayerUtil.setStartTime(this.updateTime); diff --git a/features/videoDetail/src/main/ets/view/VideoDetailView.ets b/features/videoDetail/src/main/ets/view/VideoDetailView.ets index 81c601fdf9cd629bf20ab449c307d367ea3ce8ff..5172d7a29d8e0d49e112f3005a01500e91bdedbf 100644 --- a/features/videoDetail/src/main/ets/view/VideoDetailView.ets +++ b/features/videoDetail/src/main/ets/view/VideoDetailView.ets @@ -24,7 +24,7 @@ export struct VideoDetailView { @StorageLink('currentTime') currentTime: string = CommonConstants.INITIAL_TIME; @StorageLink('totalTime') totalTime: string = CommonConstants.INITIAL_TIME; @StorageLink('progress') progress: number = 0; - @StorageLink('currentBreakpoint') currentBreakpoint: string = BreakpointConstants.BREAKPOINT_LG; + @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string = BreakpointConstants.BREAKPOINT_LG; @StorageLink('isHalfFolded') isHalfFolded: boolean = false; @Consume('pageInfo') pageInfo: NavPathStack; @Link relatedVideoHeight: number; @@ -123,7 +123,7 @@ export struct VideoDetailView { .scrollBar(BarState.Off) .height(CommonConstants.FULL_PERCENT) .onScrollFrameBegin((offset: number) => { - if (this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG) { + if (this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG) { if ((offset > 0) && (this.videoHeight > DetailConstants.MIN_VIDEO_PERCENT)) { // Video zoom-out logic. // Percentage of screen height by sliding. diff --git a/features/videoPlayer/src/main/ets/view/FooterEpisodes.ets b/features/videoPlayer/src/main/ets/view/FooterEpisodes.ets index 56955358410589ed63d1e7af727a4bef7e4192d2..298e5233ea9201bbbd52593c7406031f93f566ae 100644 --- a/features/videoPlayer/src/main/ets/view/FooterEpisodes.ets +++ b/features/videoPlayer/src/main/ets/view/FooterEpisodes.ets @@ -20,7 +20,7 @@ import { PlayerConstants } from '../constants/PlayerConstants'; @Component export struct FooterEpisodes { - @StorageLink('currentBreakpoint') currentBreakpoint: string = BreakpointConstants.BREAKPOINT_LG; + @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string = BreakpointConstants.BREAKPOINT_LG; @Link isShowingSideBar: boolean; @Link foldStatus: display.FoldStatus; @@ -81,7 +81,7 @@ export struct FooterEpisodes { .width(CommonConstants.FULL_PERCENT) .layoutWeight(1) .padding({ bottom: $r('app.float.episode_list_bottom') }) - .lanes(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_MD ? PlayerConstants.EPISODE_LIST_LANES[0] : + .lanes(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_MD ? PlayerConstants.EPISODE_LIST_LANES[0] : PlayerConstants.EPISODE_LIST_LANES[1], $r('app.float.episode_list_lanes_space')) } .layoutWeight(1) @@ -100,7 +100,7 @@ export struct FooterEpisodes { return (display.isFoldable() && this.foldStatus !== display.FoldStatus.FOLD_STATUS_FOLDED) ? Visibility.Visible : Visibility.None; } else if (deviceInfo.deviceType === CommonConstants.DEVICE_TYPES[0]) { - return this.currentBreakpoint !== BreakpointConstants.BREAKPOINT_LG ? Visibility.Visible : Visibility.None; + return this.currentWidthBreakpoint !== BreakpointConstants.BREAKPOINT_LG ? Visibility.Visible : Visibility.None; } return Visibility.None; } diff --git a/features/videoPlayer/src/main/ets/view/SideEpisodes.ets b/features/videoPlayer/src/main/ets/view/SideEpisodes.ets index 126debd787f55a52ce4d3da0f09ace92ac1a85f3..8a6bea1141626a99940f5b25e0ff9e13f5533019 100644 --- a/features/videoPlayer/src/main/ets/view/SideEpisodes.ets +++ b/features/videoPlayer/src/main/ets/view/SideEpisodes.ets @@ -20,7 +20,7 @@ import { PlayerConstants } from '../constants/PlayerConstants'; @Component export struct SideEpisodes { - @StorageLink('currentBreakpoint') currentBreakpoint: string = BreakpointConstants.BREAKPOINT_LG; + @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string = BreakpointConstants.BREAKPOINT_LG; @Link isShowingSideBar: boolean; @Link foldStatus: display.FoldStatus; @@ -38,7 +38,7 @@ export struct SideEpisodes { Blank() } .width(CommonConstants.FULL_PERCENT) - .margin({ bottom: this.currentBreakpoint === BreakpointConstants.BREAKPOINT_SM ? + .margin({ bottom: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM ? $r('app.float.side_row_margin_sm') : $r('app.float.side_row_margin') }) List({ space: CommonConstants.LIST_SPACE }) { @@ -54,9 +54,9 @@ export struct SideEpisodes { .height($r('app.float.playing_size')) .width($r('app.float.playing_size')) .position({ - x: this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? + x: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? $r('app.float.playing_position_x_side_lg') : $r('app.float.playing_position_x_side'), - y: this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? + y: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? $r('app.float.playing_position_y_side_lg') : $r('app.float.playing_position_y_side') }) .visibility(index === 1 ? Visibility.Visible : Visibility.None) @@ -64,9 +64,9 @@ export struct SideEpisodes { .justifyContent(FlexAlign.Center) .borderRadius($r('app.float.episode_row_radius')) .backgroundColor($r('app.color.episode_row_background')) - .width(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? + .width(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? $r('app.float.episode_row_width_lg') : $r('app.float.episode_row_width_other')) - .height(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? + .height(this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_LG ? $r('app.float.episode_row_height_lg') : $r('app.float.episode_row_height_other')) } }, (item: string, index: number) => index + JSON.stringify(item)) @@ -84,10 +84,10 @@ export struct SideEpisodes { } .justifyContent(FlexAlign.Start) .backgroundColor(Color.Black) - .layoutWeight(this.currentBreakpoint !== BreakpointConstants.BREAKPOINT_LG ? 2 : 0) + .layoutWeight(this.currentWidthBreakpoint !== BreakpointConstants.BREAKPOINT_LG ? 2 : 0) .height(CommonConstants.FULL_PERCENT) - .width(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? $r('app.float.side_col_width') : 0) - .visibility((this.isShowingSideBar && (this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG || + .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) diff --git a/features/videoPlayer/src/main/ets/view/VideoPlayer.ets b/features/videoPlayer/src/main/ets/view/VideoPlayer.ets index da093cafede45a25b492713c76d6eed5681cf591..697d73da19cfc21292fd2ac4f33a99982a18e4d0 100644 --- a/features/videoPlayer/src/main/ets/view/VideoPlayer.ets +++ b/features/videoPlayer/src/main/ets/view/VideoPlayer.ets @@ -23,7 +23,8 @@ import { SideEpisodes } from './SideEpisodes'; @Component export struct VideoPlayer { - @StorageLink('currentBreakpoint') currentBreakpoint: string = BreakpointConstants.BREAKPOINT_LG; + @StorageLink('currentWidthBreakpoint') currentWidthBreakpoint: string = BreakpointConstants.BREAKPOINT_LG; + @StorageLink('currentHeightBreakpoint') currentHeightBreakpoint: string = BreakpointConstants.BREAKPOINT_LG; @StorageLink('creaseRegion') creaseRegion: number[] = []; @StorageLink('updateTime') updateTime: number = 0; @StorageLink('currentTime') currentTime: string = CommonConstants.INITIAL_TIME; @@ -61,19 +62,27 @@ export struct VideoPlayer { aboutToAppear() { 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(); } - if ((!display.isFoldable() && deviceInfo.deviceType === CommonConstants.DEVICE_TYPES[2]) || - display.getFoldStatus() === display.FoldStatus.FOLD_STATUS_FOLDED) { + + /** + * 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); } - if (display.isFoldable()) { - if (this.isHalfFolded) { - 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`); @@ -84,14 +93,16 @@ export struct VideoPlayer { aboutToDisappear() { this.avPlayerUtil.release(); 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 ((!display.isFoldable() && deviceInfo.deviceType === CommonConstants.DEVICE_TYPES[2]) || - display.getFoldStatus() === display.FoldStatus.FOLD_STATUS_FOLDED) { + if (this.currentHeightBreakpoint === 'sm' && this.currentWidthBreakpoint === 'md') { this.windowUtil.setMainWindowOrientation(window.Orientation.PORTRAIT); - } else if (deviceInfo.deviceType === CommonConstants.DEVICE_TYPES[1]) { - this.windowUtil.setMainWindowOrientation(window.Orientation.LANDSCAPE); + } 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); } @@ -172,8 +183,8 @@ export struct VideoPlayer { ImgIcon({ img: $r('app.media.ic_public_view_list_white') }) } .margin({ - top: this.currentBreakpoint === BreakpointConstants.BREAKPOINT_SM ? '0' : $r('app.float.icon_row_top'), - bottom: this.currentBreakpoint === BreakpointConstants.BREAKPOINT_SM ? + 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') }) @@ -188,9 +199,9 @@ export struct VideoPlayer { TextButton({ content: PlayerConstants.PLAYER_TEXT_LIST[3] }) } .margin({ - top: this.currentBreakpoint === BreakpointConstants.BREAKPOINT_SM ? $r('app.float.button_row_top_sm') : + top: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM ? $r('app.float.button_row_top_sm') : $r('app.float.button_row_top'), - bottom: this.currentBreakpoint === BreakpointConstants.BREAKPOINT_SM ? + bottom: this.currentWidthBreakpoint === BreakpointConstants.BREAKPOINT_SM ? $r('app.float.button_row_bottom_sm') : $r('app.float.button_row_bottom') }) } diff --git a/products/phone/src/main/ets/entryability/EntryAbility.ets b/products/phone/src/main/ets/entryability/EntryAbility.ets index 3b4bbdf3c03dbf022a132de1c38d9d0de94fb661..14a280f9acbd7abb66660b922d63da4d45dd5b43 100644 --- a/products/phone/src/main/ets/entryability/EntryAbility.ets +++ b/products/phone/src/main/ets/entryability/EntryAbility.ets @@ -20,6 +20,26 @@ import { BreakpointConstants, CommonConstants, 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); + } onCreate(want: Want, launchParam: AbilityConstant.LaunchParam) { hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate'); @@ -35,9 +55,11 @@ export default class EntryAbility extends UIAbility { windowStage.getMainWindow().then((data: window.Window) => { this.windowObj = data; - this.updateBreakpoint(this.windowObj.getWindowProperties().windowRect.width); + this.updateWidthBp(); + this.updateHeightBp(); this.windowObj.on('windowSizeChange', (windowSize: window.Size) => { - this.updateBreakpoint(windowSize.width); + this.updateWidthBp(); + this.updateHeightBp(); }) }) @@ -55,21 +77,32 @@ export default class EntryAbility extends UIAbility { }); } - private updateBreakpoint(windowWidth: number) :void{ + 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 curBp: string = ''; + let widthBp: string = ''; let videoGridColumn: string = CommonConstants.VIDEO_GRID_COLUMNS[0]; - if (windowWidthVp < BreakpointConstants.BREAKPOINT_RANGES[1]) { - curBp = BreakpointConstants.BREAKPOINT_SM; + if (windowWidthVp < 320) { + widthBp = 'xs'; videoGridColumn = CommonConstants.VIDEO_GRID_COLUMNS[0]; - } else if (windowWidthVp < BreakpointConstants.BREAKPOINT_RANGES[2]) { - curBp = BreakpointConstants.BREAKPOINT_MD; + } 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 { - curBp = BreakpointConstants.BREAKPOINT_LG; + widthBp = 'xl'; videoGridColumn = CommonConstants.VIDEO_GRID_COLUMNS[2]; } - AppStorage.setOrCreate('currentBreakpoint', curBp); + AppStorage.setOrCreate('currentWidthBreakpoint', widthBp); AppStorage.setOrCreate('videoGridColumn', videoGridColumn); }