1/* 2 * Copyright (c) 2022 Huawei Device Co., Ltd. 3 * Licensed under the Apache License, Version 2.0 (the "License"); 4 * you may not use this file except in compliance with the License. 5 * You may obtain a copy of the License at 6 * 7 * http://www.apache.org/licenses/LICENSE-2.0 8 * 9 * Unless required by applicable law or agreed to in writing, software 10 * distributed under the License is distributed on an "AS IS" BASIS, 11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 * See the License for the specific language governing permissions and 13 * limitations under the License. 14 */ 15import router from '@system.router'; 16import { Log } from '@ohos/base/src/main/ets/utils/Log'; 17import { AlbumDataItem } from '@ohos/base/src/main/ets/data/AlbumDataItem'; 18import { EmptyAlbumComponent } from '@ohos/base/src/main/ets/components/EmptyAlbumComponent'; 19import { MediaConstants } from '@ohos/base/src/main/ets/constants/MediaConstants'; 20import { WindowConstants } from '@ohos/base/src/main/ets/constants/WindowConstants'; 21import { Broadcast } from '@ohos/base/src/main/ets/utils/Broadcast'; 22import screenManager from '@ohos/base/src/main/ets/manager/ScreenManager'; 23 24const TAG = "AlbumSelectGridItemNewStyle" 25// The item of album grid, and it's new style. 26@Component 27export struct AlbumSelectGridItemNewStyle { 28 private staticIconList = new Map([ 29 [MediaConstants.ALBUM_ID_VIDEO, $r('app.media.ic_video')], 30 [MediaConstants.ALBUM_ID_FAVOR, $r('app.media.ic_favorite_overlay')] 31 ]); 32 item: AlbumDataItem; 33 @State isEmptyAlbum: boolean = false; 34 @Provide isBigCard: boolean = false; 35 @Provide gridHeight: number = 0; 36 @State bigWidth: number = 0; 37 @Consume broadCast: Broadcast; 38 gridAspectRatio = WindowConstants.CARD_ASPECT_RATIO; 39 albumCountMarginRight = WindowConstants.ALBUM_SET_NEW_ICON_SIZE + WindowConstants.ALBUM_SET_NEW_ICON_MARGIN * 2; 40 iconMarkAnchorX = WindowConstants.ALBUM_SET_NEW_ICON_SIZE + WindowConstants.ALBUM_SET_NEW_ICON_MARGIN; 41 iconMarkAnchorY = WindowConstants.ALBUM_SET_NEW_ICON_SIZE + WindowConstants.ALBUM_SET_NEW_ICON_MARGIN; 42 @State cardWidth: number = 0; 43 @State cardHeight: number = 0; 44 @State transformV: number = 0; 45 @State thumbnail: string = ""; 46 47 aboutToAppear(): void { 48 Log.debug(TAG, `aboutToAppear + ${this.item.uri}`); 49 screenManager.on(screenManager.ON_WIN_SIZE_CHANGED, () => this.updateCardSize()); 50 this.item.load().then(() => { 51 this.thumbnail = this.item.getThumbnail() 52 }) 53 this.updateCardSize(); 54 } 55 56 private updateCardSize() { 57 let contentWidth = screenManager.getWinWidth(); 58 let maxCardWidth = WindowConstants.ALBUM_SET_COVER_SIZE * WindowConstants.GRID_MAX_SIZE_RATIO; 59 let count: number = Math.ceil((contentWidth - WindowConstants.ALBUM_SET_MARGIN * 2 + WindowConstants.ALBUM_SET_GUTTER) / 60 (maxCardWidth + WindowConstants.ALBUM_SET_GUTTER)); 61 let gridWidth = ((contentWidth - WindowConstants.ALBUM_SET_MARGIN * 2 + WindowConstants.ALBUM_SET_GUTTER) / count) - 62 WindowConstants.ALBUM_SET_GUTTER; 63 this.gridHeight = gridWidth / this.gridAspectRatio; 64 this.bigWidth = gridWidth * 2 + WindowConstants.ALBUM_SET_GUTTER; 65 Log.info(TAG, `is big card : ${this.isBigCard}`); 66 67 if (MediaConstants.ROTATE_ONCE == this.item.orientation || MediaConstants.ROTATE_THIRD == this.item.orientation) { 68 this.cardWidth = this.gridHeight; 69 if (this.isBigCard) { 70 this.cardHeight = this.bigWidth; 71 } else { 72 this.cardHeight = gridWidth; 73 } 74 this.transformV = (this.cardHeight - this.cardWidth) / 2; 75 } else { 76 if (this.isBigCard) { 77 this.cardWidth = this.bigWidth; 78 } else { 79 this.cardWidth = gridWidth; 80 } 81 this.cardHeight = this.gridHeight; 82 this.transformV = 0; 83 } 84 } 85 86 updateCard() { 87 Log.debug(TAG, 'Album changed and update card size.'); 88 this.updateCardSize(); 89 } 90 91 build() { 92 Stack({ alignContent: Alignment.Bottom }) { 93 if (this.isEmptyAlbum) { 94 EmptyAlbumComponent() 95 } 96 97 if (this.isBigCard) { 98 Row() { 99 Image(this.thumbnail) 100 .width(this.cardWidth) 101 .height(this.cardHeight) 102 .transform({ y: this.transformV }) 103 .border({ radius: $r('sys.float.ohos_id_corner_radius_default_l') }) 104 .rotate({ 105 centerX: this.cardWidth / 2, 106 centerY: this.cardHeight / 2, 107 z: 1, 108 angle: this.item.orientation 109 }) 110 .onError(() => { 111 Log.debug(TAG, 'album is empty or its cover is error'); 112 this.isEmptyAlbum = true; 113 }) 114 } 115 .justifyContent(FlexAlign.Center) 116 .alignItems(VerticalAlign.Center) 117 .width(this.bigWidth) 118 .height(this.gridHeight) 119 } else { 120 Row() { 121 Image(this.thumbnail) 122 .width(this.cardWidth) 123 .height(this.cardHeight) 124 .translate({ x: this.transformV }) 125 .rotate({ 126 centerX: this.cardWidth / 2, 127 centerY: this.cardHeight / 2, 128 z: 1, 129 angle: this.item.orientation 130 }) 131 .border({ radius: $r('sys.float.ohos_id_corner_radius_default_l') }) 132 .onError(() => { 133 Log.debug(TAG, 'album is empty or its cover is error'); 134 this.isEmptyAlbum = true; 135 }) 136 } 137 .justifyContent(FlexAlign.Center) 138 .alignItems(VerticalAlign.Center) 139 .height(this.gridHeight) 140 } 141 142 143 Image($r('app.media.gradient_mask_layer')) 144 .height('50%') 145 .width('100%') 146 .border({ radius: $r('sys.float.ohos_id_corner_radius_default_l') }) 147 Column() { 148 Text(this.item.displayName) 149 .margin({ right: $r('app.float.album_set_name_margin_right') }) 150 .textOverflow({ overflow: TextOverflow.Ellipsis }) 151 .maxLines(1) 152 .fontWeight(FontWeight.Medium) 153 .fontSize($r('sys.float.ohos_id_text_size_sub_title1')) 154 .fontColor($r('app.color.white')) 155 156 Text(String(this.item.count)) 157 .margin({ right: this.albumCountMarginRight }) 158 .textOverflow({ overflow: TextOverflow.Ellipsis }) 159 .maxLines(1) 160 .fontColor($r('app.color.white')) 161 .fontWeight(FontWeight.Regular) 162 .fontSize($r('sys.float.ohos_id_text_size_body2')) 163 } 164 .width('100%') 165 .alignItems(HorizontalAlign.Start) 166 .margin({ left: $r('app.float.album_set_count_margin_left'), 167 bottom: $r('app.float.album_set_count_margin_bottom') }) 168 169 170 if (this.staticIconList.has(this.item.displayName)) { 171 Image(this.staticIconList.get(this.item.displayName)) 172 .height($r('app.float.album_set_new_style_icon')) 173 .aspectRatio(1) 174 .position({ x: '100%', y: '100%' }) 175 .markAnchor({ x: this.iconMarkAnchorX, y: this.iconMarkAnchorY }) 176 } 177 } 178 .height(this.gridHeight) 179 .border({ 180 radius: $r('sys.float.ohos_id_corner_radius_default_l'), 181 width: $r('app.float.album_cover_stroke_width'), 182 color: $r('app.color.album_cover_stroke_color') 183 }) 184 .onClick(() => { 185 Log.info(TAG, `After onClick, MediaSet is: ${JSON.stringify(this.item)}`); 186 router.push({ 187 uri: 'feature/newAlbum/view/NewAlbumPage', 188 params: { 189 item: JSON.stringify(this.item) 190 } 191 }) 192 }) 193 } 194}