ets/components/AlbumSelectGridItemNewStyle.ets

/*
 * Copyright (c) 2022 Huawei Device Co., Ltd.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
import router from '@system.router';
import { Log } from '@ohos/base/src/main/ets/utils/Log';
import { AlbumDataItem } from '@ohos/base/src/main/ets/data/AlbumDataItem';
import { EmptyAlbumComponent } from '@ohos/base/src/main/ets/components/EmptyAlbumComponent';
import { MediaConstants } from '@ohos/base/src/main/ets/constants/MediaConstants';
import { WindowConstants } from '@ohos/base/src/main/ets/constants/WindowConstants';
import { Broadcast } from '@ohos/base/src/main/ets/utils/Broadcast';
import screenManager from '@ohos/base/src/main/ets/manager/ScreenManager';

const TAG = "AlbumSelectGridItemNewStyle"
// The item of album grid, and it's new style.
@Component
export struct AlbumSelectGridItemNewStyle {
    private staticIconList = new Map([
        [MediaConstants.ALBUM_ID_VIDEO, $r('app.media.ic_video')],
        [MediaConstants.ALBUM_ID_FAVOR, $r('app.media.ic_favorite_overlay')]
    ]);
    item: AlbumDataItem;
    @State isEmptyAlbum: boolean = false;
    @Provide isBigCard: boolean = false;
    @Provide gridHeight: number = 0;
    @State bigWidth: number = 0;
    @Consume broadCast: Broadcast;
    gridAspectRatio = WindowConstants.CARD_ASPECT_RATIO;
    albumCountMarginRight = WindowConstants.ALBUM_SET_NEW_ICON_SIZE + WindowConstants.ALBUM_SET_NEW_ICON_MARGIN * 2;
    iconMarkAnchorX = WindowConstants.ALBUM_SET_NEW_ICON_SIZE + WindowConstants.ALBUM_SET_NEW_ICON_MARGIN;
    iconMarkAnchorY = WindowConstants.ALBUM_SET_NEW_ICON_SIZE + WindowConstants.ALBUM_SET_NEW_ICON_MARGIN;
    @State cardWidth: number = 0;
    @State cardHeight: number = 0;
    @State transformV: number = 0;
    @State thumbnail: string = "";
    onWindowSizeChangeCallBack = () => this.updateCardSize();

    aboutToAppear(): void {
        Log.debug(TAG, `aboutToAppear + ${this.item.uri}`);
        screenManager.on(screenManager.ON_WIN_SIZE_CHANGED, this.onWindowSizeChangeCallBack);
        this.item.load().then(() => {
            this.thumbnail = this.item.getThumbnail()
        })
        this.updateCardSize();
    }

    aboutToDisappear(): void {
        screenManager.off(screenManager.ON_WIN_SIZE_CHANGED, this.onWindowSizeChangeCallBack);
        this.onWindowSizeChangeCallBack = null;
    }

    private updateCardSize() {
        let contentWidth = screenManager.getWinWidth();
        let maxCardWidth = WindowConstants.ALBUM_SET_COVER_SIZE * WindowConstants.GRID_MAX_SIZE_RATIO;
        let count: number = Math.ceil((contentWidth - WindowConstants.ALBUM_SET_MARGIN * 2 + WindowConstants.ALBUM_SET_GUTTER) /
        (maxCardWidth + WindowConstants.ALBUM_SET_GUTTER));
        let gridWidth = ((contentWidth - WindowConstants.ALBUM_SET_MARGIN * 2 + WindowConstants.ALBUM_SET_GUTTER) / count) -
        WindowConstants.ALBUM_SET_GUTTER;
        this.gridHeight = gridWidth / this.gridAspectRatio;
        this.bigWidth = gridWidth * 2 + WindowConstants.ALBUM_SET_GUTTER;
        Log.info(TAG, `is big card : ${this.isBigCard}`);

        if (MediaConstants.ROTATE_ONCE == this.item.orientation || MediaConstants.ROTATE_THIRD == this.item.orientation) {
            this.cardWidth = this.gridHeight;
            if (this.isBigCard) {
                this.cardHeight = this.bigWidth;
            } else {
                this.cardHeight = gridWidth;
            }
            this.transformV = (this.cardHeight - this.cardWidth) / 2;
        } else {
            if (this.isBigCard) {
                this.cardWidth = this.bigWidth;
            } else {
                this.cardWidth = gridWidth;
            }
            this.cardHeight = this.gridHeight;
            this.transformV = 0;
        }
    }

    updateCard() {
        Log.debug(TAG, 'Album changed and update card size.');
        this.updateCardSize();
    }

    build() {
        Stack({ alignContent: Alignment.Bottom }) {
            if (this.isEmptyAlbum) {
                EmptyAlbumComponent()
            }

            if (this.isBigCard) {
                Row() {
                    Image(this.thumbnail)
                        .width(this.cardWidth)
                        .height(this.cardHeight)
                        .transform({ y: this.transformV })
                        .border({ radius: $r('sys.float.ohos_id_corner_radius_default_l') })
                        .rotate({
                            centerX: this.cardWidth / 2,
                            centerY: this.cardHeight / 2,
                            z: 1,
                            angle: this.item.orientation
                        })
                        .onError(() => {
                            Log.debug(TAG, 'album is empty or its cover is error');
                            this.isEmptyAlbum = true;
                        })
                }
                .justifyContent(FlexAlign.Center)
                .alignItems(VerticalAlign.Center)
                .width(this.bigWidth)
                .height(this.gridHeight)
            } else {
                Row() {
                    Image(this.thumbnail)
                        .width(this.cardWidth)
                        .height(this.cardHeight)
                        .translate({ x: this.transformV })
                        .rotate({
                            centerX: this.cardWidth / 2,
                            centerY: this.cardHeight / 2,
                            z: 1,
                            angle: this.item.orientation
                        })
                        .border({ radius: $r('sys.float.ohos_id_corner_radius_default_l') })
                        .onError(() => {
                            Log.debug(TAG, 'album is empty or its cover is error');
                            this.isEmptyAlbum = true;
                        })
                }
                .justifyContent(FlexAlign.Center)
                .alignItems(VerticalAlign.Center)
                .height(this.gridHeight)
            }


            Image($r('app.media.gradient_mask_layer'))
                .height('50%')
                .width('100%')
                .border({ radius: $r('sys.float.ohos_id_corner_radius_default_l') })
            Column() {
                Text(this.item.displayName)
                    .margin({ right: $r('app.float.album_set_name_margin_right') })
                    .textOverflow({ overflow: TextOverflow.Ellipsis })
                    .maxLines(1)
                    .fontWeight(FontWeight.Medium)
                    .fontSize($r('sys.float.ohos_id_text_size_sub_title1'))
                    .fontColor($r('app.color.white'))

                Text(String(this.item.count))
                    .margin({ right: this.albumCountMarginRight })
                    .textOverflow({ overflow: TextOverflow.Ellipsis })
                    .maxLines(1)
                    .fontColor($r('app.color.white'))
                    .fontWeight(FontWeight.Regular)
                    .fontSize($r('sys.float.ohos_id_text_size_body2'))
            }
            .width('100%')
            .alignItems(HorizontalAlign.Start)
            .margin({ left: $r('app.float.album_set_count_margin_left'),
                bottom: $r('app.float.album_set_count_margin_bottom') })


            if (this.staticIconList.has(this.item.displayName)) {
                Image(this.staticIconList.get(this.item.displayName))
                    .height($r('app.float.album_set_new_style_icon'))
                    .aspectRatio(1)
                    .position({ x: '100%', y: '100%' })
                    .markAnchor({ x: this.iconMarkAnchorX, y: this.iconMarkAnchorY })
            }
        }
        .height(this.gridHeight)
        .border({
            radius: $r('sys.float.ohos_id_corner_radius_default_l'),
            width: $r('app.float.album_cover_stroke_width'),
            color: $r('app.color.album_cover_stroke_color')
        })
        .onClick(() => {
            Log.info(TAG, `After onClick, MediaSet is: ${JSON.stringify(this.item)}`);
            router.push({
                uri: 'feature/newAlbum/view/NewAlbumPage',
                params: {
                    item: JSON.stringify(this.item)
                }
            })
        })
    }
}