1/* 2 * Copyright (c) 2023 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 */ 15 16import router from '@system.router' 17 18import { Log } from '../../utils/Log' 19import { ThumbnailController } from './ThumbnailController' 20import { getStore } from '../../redux/store' 21import { Action } from '../../redux/actions/Action' 22import { EventBus } from '../../worker/eventbus/EventBus' 23import { EventBusManager } from '../../worker/eventbus/EventBusManager' 24import EventLog from '../../utils/EventLog' 25 26let localState = (state) => { 27 return { 28 thumbnail: state.CameraInitReducer.thumbnail, 29 } 30} 31 32let localDispatcher = (dispatch) => { 33 return {} 34} 35 36class StateStruct { 37 thumbnail 38} 39 40@Component 41export struct ThumbnailView { 42 private TAG: string = '[ThumbnailView]:' 43 private appEventBus: EventBus = EventBusManager.getInstance().getEventBus() 44 @State thumbnailBorder: Object = {} 45 46 @State state: StateStruct = new StateStruct() 47 @State thumbnail: Resource = $r('app.media.ic_camera_thumbnail_default_white') 48 @State hasThumbnail: boolean = false 49 @State scaleValue: number = 1 50 @State tempOpacity: number = 1 51 52 private async onThumbnailUpdate(data) { 53 Log.info(`${this.TAG} onThumbnailUpdate data: ${JSON.stringify(data)} E`) 54 this.thumbnail = (data.thumbnail == null ? $r('app.media.ic_camera_thumbnail_default_white') : data.thumbnail) 55 this.hasThumbnail = data.thumbnail != undefined 56 if (this.hasThumbnail) { 57 this.thumbnailBorder = { width: 1, color: Color.White, style: BorderStyle.Solid } 58 } else { 59 this.thumbnailBorder = { width: 0 } 60 } 61 this.scaleValue = 1.5 62 this.tempOpacity = 0.0 63 animateTo({ duration: 100, curve: Curve.Sharp }, () => { 64 this.tempOpacity = 1 65 }) 66 animateTo({ duration: 300, curve: Curve.Sharp }, () => { 67 this.scaleValue = 1 68 }) 69 Log.info(`${this.TAG} onThumbnailUpdate this.state.thumbnail: ${JSON.stringify(this.thumbnail)} X`) 70 } 71 72 private async onThumbnailLoad(data) { 73 Log.info(`${this.TAG} onThumbnailLoad data: ${JSON.stringify(data)} E`) 74 this.thumbnail = (data.thumbnail == null ? $r('app.media.ic_camera_thumbnail_default_white') : data.thumbnail) 75 this.hasThumbnail = data.thumbnail != undefined 76 if (this.hasThumbnail) { 77 this.thumbnailBorder = { width: 1, color: Color.White, style: BorderStyle.Solid } 78 } else { 79 this.thumbnailBorder = { width: 0 } 80 } 81 this.scaleValue = 1 82 this.tempOpacity = 1 83 Log.info(`${this.TAG} onThumbnailLoad this.state.thumbnail: ${JSON.stringify(this.thumbnail)} X`) 84 } 85 86 aboutToAppear() { 87 Log.info(`${this.TAG} aboutToAppear E`) 88 getStore().connect(localState, localDispatcher)(this.state) 89 this.appEventBus.on(Action.ACTION_UPDATE_THUMBNAIL, this.onThumbnailUpdate.bind(this)) 90 this.appEventBus.on(Action.ACTION_LOAD_THUMBNAIL, this.onThumbnailLoad.bind(this)) 91 Log.info(`${this.TAG} aboutToAppear X`) 92 } 93 94 aboutToDisappear(): void { 95 Log.info(`${this.TAG} aboutToDisappear E`) 96 this.appEventBus.off(Action.ACTION_UPDATE_THUMBNAIL, this.onThumbnailUpdate.bind(this)) 97 this.appEventBus.off(Action.ACTION_LOAD_THUMBNAIL, this.onThumbnailLoad.bind(this)) 98 Log.info(`${this.TAG} aboutToDisappear X`) 99 } 100 101 build() { 102 Column() { 103 Stack() { 104 Image(this.thumbnail) 105 .width('100%').aspectRatio(1).borderRadius(22).objectFit(ImageFit.Fill) 106 } 107 .width('100%').height('100%') 108 .enabled(this.hasThumbnail) 109 .onClick(async () => { 110 Log.info(`${this.TAG} launch bundle com.ohos.photos`) 111 EventLog.write(EventLog.CLICK_THUMBNAIL) 112 globalThis.keepCameraZoomRatio = true 113 await globalThis.cameraAbilityContext.startAbility({ 114 parameters: { uri: 'photodetail' }, 115 bundleName: 'com.ohos.photos', 116 abilityName: 'com.ohos.photos.MainAbility' 117 }) 118 }) 119 } 120 .width(44).aspectRatio(1) 121 .borderRadius(22).border(this.thumbnailBorder) 122 .opacity(this.tempOpacity) 123 .scale({ x: this.scaleValue, y: this.scaleValue }) 124 } 125}