ets/components/PhotoItem.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 Matrix4 from '@ohos.matrix4';
import router from '@system.router';
import MediaLib from '@ohos.multimedia.mediaLibrary';
import { MediaDataItem } from '@ohos/base/src/main/ets/data/MediaDataItem';
import { EventPipeline } from '../utils/EventPipeline';
import { Broadcast } from '@ohos/base/src/main/ets/utils/Broadcast';
import { Log } from '@ohos/base/src/main/ets/utils/Log';
import { Constants } from '../constants/Constants';
import screenManager from '@ohos/base/src/main/ets/manager/ScreenManager';
import { RouterConstants } from '@ohos/base/src/main/ets/constants/RouterConstants';
import { startTrace, finishTrace } from '@ohos/base/src/main/ets/utils/TraceControllerUtils';
import { LoadingPanel } from './LoadingPanel';
import { VideoIcon } from './VideoIcon';
import { MediaConstants } from '@ohos/base/src/main/ets/constants/MediaConstants';
import { getThumbnail } from '../model/ThumbnailModel';

const TAG = "PhotoItem"

@Component
export struct PhotoItem {
    item: MediaDataItem;
    pageName: string
    @State matrix: Matrix4.Matrix4Transit = Matrix4.identity().copy();
    @State photoItemDirection: PanDirection = PanDirection.Vertical;
    @Consume broadCast: Broadcast;
    @State objectFit: ImageFit = ImageFit.Contain;
    @State thumbnail: string = '';
    @State ratio: number = 1.0;
    @State showError: boolean = false;
    @Consume isPullingDown: boolean;
    @Consume pageFrom: number;
    @Consume('transitionIndex') @Watch('onTransitionChange') updateTransition: number;
    private eventPipeline: EventPipeline;
    private animationOption: any = null;
    private animationEndMatrix: any = null;
    @Provide isLoading: boolean = true;
    private imgScale: number = 1;
    private firstLoad: boolean = true;
    private preItem = { rotate: 0, height: 0, width: 0 };
    private timeStamp: string = '';

    onTransitionChange() {
        Log.info(TAG, `onTransitionChange, ${this.updateTransition} ${this.item.index}`);
        this.updateThumbnail()
        if (this.updateTransition == this.item.index) {
            this.broadCast.emit(Constants.PHOTO_SHOW_STATE, [!this.showError]);
        } else {
            this.isPullingDown = false;
        }
        // reset matrix
        if (this.imgScale != 1) {
            this.matrix = Matrix4.identity().scale({
                x: this.imgScale,
                y: this.imgScale
            }).copy();
            this.eventPipeline && this.eventPipeline.setDefaultScale(this.imgScale);
        } else {
            this.matrix = Matrix4.identity().copy();
            this.eventPipeline && this.eventPipeline.reset();
        }
        Log.info(TAG, `onTransitionChange end, ${this.updateTransition} ${this.item.index}`);
    }

    aboutToAppear(): void {
        Log.info(TAG, `aboutToAppear`);
        this.timeStamp = (new Date()).valueOf().toString();
        this.eventPipeline = new EventPipeline(this.broadCast, this.item, this.timeStamp, this.updateMatrix.bind(this));
        this.matrix = Matrix4.identity().copy();
        this.firstLoad = true;
        this.isLoading = true;
        this.thumbnail = this.item.getThumbnail(this.item.imgWidth, this.item.imgHeight);
        this.item.load(true).then(() => {
            this.isLoading = false
            this.updateThumbnail()
            Log.info(TAG, `aboutToAppear loadFinish thumbnail ${this.thumbnail}`);
        })
        // register event handling
        this.broadCast.on(Constants.TOUCH_EVENT + this.item.uri + this.timeStamp, (matrix: any) => {
            this.matrix = matrix;
        });

        this.broadCast.on(Constants.DIRECTION_CHANGE + this.item.uri + this.timeStamp, (direction: PanDirection) => {
            Log.info(TAG, `direction: ${direction}`);
            this.photoItemDirection = direction;
        });

        this.broadCast.on(Constants.ANIMATION_EVENT + this.item.uri + this.timeStamp, (animationOption: any, animationEndMatrix: any) => {
            Log.info(TAG, `animationOption: ${JSON.stringify(animationOption)}`);
            this.animationOption = animationOption;
            this.animationEndMatrix = animationEndMatrix;
        });
        this.onTransitionChange();
        this.onViewDataChanged();
        Log.info(TAG, `photoItem aboutToAppear ${this.item.uri} end ${this.item.orientation}}`);
    }

    private updateMatrix(matrix) {
        Log.info(TAG, `updateMatrix start ${matrix}`);
        this.matrix = matrix;
    }

    private updateThumbnail() {
        getThumbnail(this.item, this.updateTransition == this.item.index).then((thumbnail: string) => {
            this.thumbnail = thumbnail
        })
    }

    aboutToDisappear(): void {
        Log.info(TAG, `aboutToDisappear ${this.item.uri}/${this.thumbnail}`);
        // clean up event registration
        this.broadCast.off(Constants.TOUCH_EVENT + this.item.uri + this.timeStamp, null);
        this.broadCast.off(Constants.DIRECTION_CHANGE + this.item.uri + this.timeStamp, null);
        this.broadCast.off(Constants.ANIMATION_EVENT + this.item.uri + this.timeStamp, null);
        this.isPullingDown = false;
        Log.info(TAG, `aboutToDisappear ${this.item.uri}/${this.thumbnail} end`);
    }

    onViewDataChanged(): void {
        Log.info(TAG, `onViewDataChanged start`);
        this.ratio = this.calcRatio(this.item);
        if ((this.preItem.rotate == this.item.orientation && this.preItem.height == this.item.imgHeight &&
        this.preItem.width == this.item.imgWidth) && !this.firstLoad) {
            this.preItem.rotate = this.item.orientation;
            this.preItem.width = this.item.imgWidth;
            this.preItem.height = this.item.imgHeight;
            this.eventPipeline && this.eventPipeline.onDataChanged(this.item)
            return;
        }
        this.matrix = Matrix4.identity().copy();
        this.eventPipeline && this.eventPipeline.setDefaultScale(1);
        this.eventPipeline && this.eventPipeline.onDataChanged(this.item)
        this.firstLoad = false;
        this.preItem.width = this.item.imgWidth;
        this.preItem.height = this.item.imgHeight;
        Log.debug(TAG, `onViewDataChanged thumbnail:${JSON.stringify(this.thumbnail)}`);
    }

    calcRatio(info: any): number {
        if (info == null || info == undefined) {
            return 1;
        }
        if (info.width == 0 || info.height == 0) {
            return 1;
        }
        return  info.width / info.height;
    }

    build() {
        Stack() {
            Column() {
                LoadingPanel()
            }
            .width('100%')
            .height('100%')

            Row() {
                Image(this.thumbnail)
                    .rotate({ x: 0, y: 0, z: 1, angle: 0 })
                    .syncLoad(true)
                    .transform(this.matrix)
                    .autoResize(false)
                    .fitOriginalSize(false)
                    .aspectRatio(this.ratio)
                    .objectFit(ImageFit.Cover)
                    .width("100%")
                    .height("100%")
                    .constraintSize({maxWidth:"100%", maxHeight:"100%"})
                    .sharedTransition(this.item.index == this.updateTransition ? this.pageName + this.item.getHashCode() : Constants.DEFAULT_TRANSITION_ID, {
                        duration: Constants.SHARE_TRANSITION_DURATION,
                        zIndex: 0,
                    })
                    .onComplete(() => {
                        startTrace(`PhotoItemComplete_${this.item}`);
                        Log.info(TAG, `onComplete finish, index: ${this.item.index}, item: ${JSON.stringify(this.item)}, uri: ${this.thumbnail}.`);
                        this.showError = false;
                        this.isLoading = false;
                        if (this.updateTransition == this.item.index) {
                            this.broadCast.emit(Constants.PHOTO_SHOW_STATE, [true]);
                        }
                        finishTrace(`PhotoItemComplete_${this.item.index}`);
                    })
                    .onError(() => {
                        Log.error(TAG, `image show error ${this.thumbnail} ${this.item.width} ${this.item.height}`);
                        if (this.thumbnail.length == 0 || this.item.width == 0 || this.item.height == 0) {
                            this.updateThumbnail()
                            return
                        }
                        this.showError = true;
                        this.isLoading = true;
                        if (this.updateTransition == this.item.index) {
                            this.broadCast.emit(Constants.PHOTO_SHOW_STATE, [false]);
                        }
                    })
            }
            .width('100%')
            .height('100%')
            .justifyContent(FlexAlign.Center)
            .alignItems(VerticalAlign.Center)
            .onClick(() => {
                this.broadCast.emit(Constants.TOGGLE_BAR, [null]);
            })
            .parallelGesture(
            GestureGroup(GestureMode.Parallel,
            PinchGesture({
                fingers: 2,
                distance: 1
            })
                .onActionStart((event: GestureEvent) => {
                    Log.debug(TAG, 'PinchGesture onActionStart');
                    startTrace("PinchGesture onActionStart")
                    if (this.isPullingDown) {
                        Log.debug(TAG, 'Not allow to pinch when pullingDown');
                        finishTrace("PinchGesture onActionStart")
                        return;
                    }
                    Log.debug(TAG, `PinchGesture onActionStart scale:\
                            ${event.scale}, cx: ${event.pinchCenterX}, cy: ${event.pinchCenterY}`);
                    if (this.item.mediaType == MediaLib.MediaType.IMAGE) {
                        this.eventPipeline.onScaleStart(event.scale, event.pinchCenterX, event.pinchCenterY);
                    }
                    finishTrace("PinchGesture onActionStart")
                })
                .onActionUpdate((event) => {
                    Log.debug(TAG, `PinchGesture onActionUpdate scale: ${event.scale}`);
                    startTrace("PinchGesture onActionUpdate")
                    if (this.isPullingDown) {
                        Log.debug(TAG, 'Not allow to pinch when pullingDown');
                        finishTrace("PinchGesture onActionUpdate")
                        return;
                    }
                    if (this.item.mediaType == MediaLib.MediaType.IMAGE) {
                        this.eventPipeline.onScale(event.scale);
                    }
                    finishTrace("PinchGesture onActionUpdate")
                })
                .onActionEnd(() => {
                    Log.debug(TAG, 'PinchGesture onActionEnd');
                    startTrace("PinchGesture onActionEnd")
                    if (this.isPullingDown) {
                        Log.debug(TAG, 'Not allow to pinch when pullingDown');
                        finishTrace("PinchGesture onActionEnd")
                        return;
                    }
                    if (this.item.mediaType == MediaLib.MediaType.IMAGE) {
                        this.eventPipeline.onScaleEnd();
                        if (this.animationOption != null) {
                            animateTo({
                                duration: this.animationOption.duration,
                                curve: this.animationOption.curve,
                                onFinish: () => {
                                    this.eventPipeline.onAnimationEnd(this.animationEndMatrix);
                                    this.animationOption = null;
                                    this.animationEndMatrix = null;
                                }
                            }, () => {
                                this.matrix = this.animationEndMatrix;
                            })
                        }
                    }
                    finishTrace("PinchGesture onActionEnd")
                }),
            PanGesture({
                direction: this.photoItemDirection
            })
                .onActionStart((event: GestureEvent) => {
                    startTrace("PanGesture onActionStart")
                    Log.debug(TAG, `PanGesture start offsetX:\
                                    ${vp2px(event.offsetX)}, offsetY: ${vp2px(event.offsetY)}`);
                    this.eventPipeline.onMoveStart(vp2px(event.offsetX), vp2px(event.offsetY));
                    finishTrace("PanGesture onActionStart")
                })
                .onActionUpdate((event: GestureEvent) => {
                    startTrace("PanGesture onActionUpdate")
                    Log.debug(TAG, `PanGesture update offsetX:\
                                    ${vp2px(event.offsetX)}, offsetY: ${vp2px(event.offsetY)}`);
                    this.eventPipeline.onMove(vp2px(event.offsetX), vp2px(event.offsetY));
                    finishTrace("PanGesture onActionUpdate")
                })
                .onActionEnd((event: GestureEvent) => {
                    startTrace("PanGesture onActionEnd")
                    Log.debug(TAG, `PanGesture end offsetX:\
                                    ${vp2px(event.offsetX)}, offsetY: ${vp2px(event.offsetY)}`);
                    this.eventPipeline.onMoveEnd(vp2px(event.offsetX), vp2px(event.offsetY));
                    if (this.animationOption != null) {
                        animateTo({
                            duration: this.animationOption.duration,
                            curve: this.animationOption.curve,
                            onFinish: () => {
                                this.eventPipeline.onAnimationEnd(this.animationEndMatrix);
                                this.animationOption = null;
                                this.animationEndMatrix = null;
                            }
                        }, () => {
                            this.matrix = this.animationEndMatrix;
                        })
                    }
                    finishTrace("PanGesture onActionEnd")
                }),
            TapGesture({
                count: 2
            })
                .onAction((event: GestureEvent) => {
                    if (this.isPullingDown) {
                        Log.debug(TAG, 'Not allow to double tap when pullingDown');
                        return;
                    }
                    Log.debug(TAG, `onDoubleTap event: ${JSON.stringify(event)}`);
                    if (this.item.mediaType == MediaLib.MediaType.VIDEO) {
                        return;
                    }
                    this.eventPipeline.onDoubleTap(event.fingerList[0].localX, event.fingerList[0].localY);
                    if (this.animationOption != null) {
                        Log.debug(TAG, 'TapGesture animateTo start');
                        animateTo({
                            duration: this.animationOption.duration,
                            curve: this.animationOption.curve,
                            onFinish: () => {
                                this.eventPipeline.onAnimationEnd(this.animationEndMatrix);
                                this.animationOption = null;
                                this.animationEndMatrix = null;
                            }
                        }, () => {
                            this.matrix = this.animationEndMatrix;
                        })
                    }
                })
            )
            )
            .clip(true)
            .onTouch((event) => {
                this.eventPipeline.onTouch(event);
            })
            // TODO Remind users when pictures of other devices cannot be show
            if ((this.showError || this.item.mediaType == MediaLib.MediaType.VIDEO) &&
            this.pageFrom == RouterConstants.ENTRY_FROM.DISTRIBUTED) {
                Row() {
                    Text((this.item.mediaType == MediaLib.MediaType.VIDEO) ?
                    $r('app.string.no_distributed_photo_show_video') :
                    $r('app.string.no_distributed_photo_show_image'))
                        .fontSize($r('sys.float.ohos_id_text_size_body2'))
                        .fontFamily($r('app.string.id_text_font_family_regular'))
                        .fontColor($r('sys.color.ohos_id_color_text_tertiary'))
                }
                .margin({
                    top: (this.item.mediaType == MediaLib.MediaType.VIDEO) ? $r('app.float.input_text_notify_margin') : 0
                })
            }
            if (this.isVideoPlayBtnShow()) {
                Row() {
                    VideoIcon()
                }
                .width($r('app.float.icon_video_size'))
                .height($r('app.float.icon_video_size'))
                .onClick(() => {
                    if (this.item != undefined) {
                        router.push({
                            uri: 'feature/browser/view/VideoBrowser',
                            params: {
                                uri: this.item.uri,
                                dateAdded: this.item.dateAdded,
                                previewUri: this.thumbnail
                            }
                        })
                    }
                })
            }

        }.width('100%')
        .height('100%')
    }

    private isVideoPlayBtnShow(): boolean {
        Log.debug(TAG, `isVideoPlayBtnShow: ${this.item.mediaType}`);
        return ((this.item) && (this.item.mediaType == MediaLib.MediaType.VIDEO));
    }
}